/* Navbar and Menu Styles */
@media (max-width: 768px) { /* Adjust the breakpoint as needed */
    .submenu {
        flex-direction: column;
        margin-top:0%;
    }
}
.submenu {
    width: calc(100% + 25%); /* Adjust the base percentage according to your current setup */
   
}


.navbar_menu li {
    position: relative; /* Needed for dropdown positioning */
}

/* Dropdown Menu Styles */
.dropdown:hover .submenu {
    display: block; /* Show submenu on hover */
}


.submenu-links,
.submenu-feature {
    display: inline-block;
    vertical-align: top;
    padding: 5px; /* Adjust padding */
}

.submenu-links {
    width: 35%; /* Left column width */
}

.submenu-feature {
    width: 65%; /* Right column width */
}

.submenu-links a {
    display: block;
    padding: 0px 0; /* Spacing between links */
    color: #333; /* Link color */
    text-decoration: none; /* Removes underline */
}

.submenu-links a:hover {
    background-color: #f3f7fd;
    color:#072252;
}
.submenu-links a:hover {
    text-decoration: underline; /* Style for hover state */
}

.submenu-feature h3 {
    margin-top: 0;
}

/* Adjustments for mobile and other responsive styles as needed */
@media (max-width: 768px) {
    .submenu {
        display: none; /* Optionally hide the dropdown on smaller screens */
    }
    .submenu-links a {
    color: red; /* Link color */
    text-decoration: none; /* Removes underline */
}
}
@media screen and (max-width: 800px) {
    .submenu {
   
    min-width: auto;
}
.submenu-links a {
    color: #000; /* Link color */
    text-decoration: none; /* Removes underline */
}

    /* Other responsive adjustments */
}
.submenu {
    display: none; /* Hide submenu by default */
    position: absolute;
    left: 0;
    background-color: #fff; /* Submenu background */
    box-shadow: 0 8px 16px rgba(0,0,0,0.1); /* Optional: Adds a shadow to the dropdown */
    z-index: 1000; /* Ensure dropdown is above other content */
    min-width: 650px; /* Set a minimum width for the dropdown */
    border-radius: 4px; /* Optional: for rounded corners */
    padding: 15px; /* Add some padding inside the dropdown */
}

.submenu-links,
.submenu-feature {
    display: inline-block;
    vertical-align: top;
}

.submenu-links {
    width: 45%; /* Left column width */
}

.submenu-feature {
    width: 55%; /* Right column width */
}


.submenu-feature {
    background-color: rgba(51, 204, 204, 0.1); /* Different background for the feature column */
    padding: 20px; /* Adjust padding as needed */
}

.submenu-feature h3 {
    margin-bottom: 30px; /* Space below the title */
    margin-top:23px;
}

.submenu-feature hr {
    margin-bottom: 20px; /* Space below the separation line */
}

.resource-item {
    display: flex;
    align-items: center;
    margin-bottom: 20px; /* Space between resource items */
    color: rgb(11, 95, 255);

}

.resource-item:hover {
   color:#0B5FFF;
}

.resource-image {
    width: 50%; /* Image takes up 30% of the resource item */
    margin-right: 10px; /* Space between the image and the text */
}

.resource-info {
    width: 70%; /* Text takes up 70% of the resource item */
}

.resource-info h4 {
    margin: 0;
    font-size: 16px; /* Adjust title font size as needed */
}

.resource-info p {
    margin: 5px 0 0; /* Adjust subtitle margin as needed */
    font-size: 14px; /* Adjust subtitle font size as needed */
}

.submenu-links .link-item {
    margin-bottom: 10px; /* Space between link items */
}

.submenu-links .link-title {
    font-weight: bold; /* Make the title bold */
    text-decoration: none; /* Remove underline from links */
    color: #000; /* Set link color */
}

.submenu-links .link-subtitle {
    font-size: 0.9em; /* Smaller font size for subtitle */
    color: #666; /* Lighter color for subtitle */
}

.link-container {
    padding: 10px;
    cursor: pointer;
    padding-bottom:25px;
border-bottom: 0.5px;
border-bottom: 0.5px solid;
border-bottom: solid #f4f6f9;
padding-top:10%;
}

.link-container:hover {
    background-color: rgba(51, 204, 204, 0.1);
}

.link-container:hover .link-title {
    color: #28a396;
}

.link-title {
    color: #000;
    text-decoration: none;
    display: block;
}


.link-subtitle {
    color: #000;
    margin-top: 5px;
}

/* Rest of the styles remain the same */

#achievements .achievement_section {
	padding-top: 87px;
	background-image: url(https://hyperinreact.twodoorsdigital.com/assets/achievement-bg-Buoa3CwC.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	min-height: 262px;
	position: relative;
	margin-bottom: 90px
}

#achievements .main_Visitors {
	width: 100%;
	max-width: 1124px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	align-items: stretch;
	gap: 10px;
	justify-content: space-between;
	left: 50%;
	transform: translate(-50%);
	position: absolute;
	padding-left: 12px;
	padding-right: 12px
}

#achievements .Visitor_card1 {
	padding: 20px 24px;
	border-radius: 8px;
	border: 1.5px solid #29A296;
	background: #ffffffb3;
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	text-align: center;
	grid-auto-rows: 1fr
}

#achievements .Visitor_card1 h3 {
	color: #28a396;
	text-align: center;
	font-family: Roboto;
	font-size: 64px;
	font-style: normal;
	font-weight: 500;
	line-height: 72px;
	letter-spacing: -1.28px
}

#achievements .Visitor_card1 p {
	padding-top: 24px;
	color: var(--Black, #121212);
	text-align: center;
	font-family: Roboto;
	font-size: 22px;
	font-style: normal;
	font-weight: 500;
	line-height: 40px
}

@media screen and (max-width: 916px) {
	#achievements .Visitor_card1 h3 {
		font-size: 48px;
		line-height: 58px
	}

	#achievements .Visitor_card1 p {
		font-size: 24px;
		padding-top: 12px;
		line-height: 36px
	}
}

@media screen and (max-width: 768px) {
	#achievements .achievement_section {
		min-height: 200px
	}

	#achievements .Visitor_card1 {
		padding: 20px 14px
	}

	#achievements .Visitor_card1 h3 {
		font-size: 38px;
		line-height: 48px
	}

	#achievements .Visitor_card1 p {
		font-size: 18px;
		line-height: 28px
	}
}

@media screen and (max-width: 675px) {
	#achievements .Visitor_card1 h3 {
		font-size: 32px;
		line-height: 32px
	}
}

@media screen and (max-width: 556px) {
	#achievements .Visitor_card1 h3 {
		font-size: 34px;
		line-height: 24px;
		font-weight:900;
	}

	#achievements .Visitor_card1 p {
		font-size: 12px;
		line-height: 22px
	}

	#achievements .achievement_section {
		padding-top: 64px;
		min-height: 150px;
		margin-bottom: 40px
	}
}

@media screen and (max-width: 420px) {
	#achievements .Visitor_card1 {
		padding: 20px 5px 20px 7px
	}

	#achievements .main_Visitors {
		gap: 4px;
		padding-left: 4px;
		padding-right: 4px
	}
}

#announcements .header-section {
	background: linear-gradient(to right, #fff, #38a396)
}

#announcements .header-section .top-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 20px 0;
	color: #000;
	gap: 12px
}

#announcements .header-section .hyperin_whitepaper_img {
	width: 100%;
	max-width: 160px
}

#announcements .hyperin_whitepaper_img img {
	width: 100%
}

#announcements .announcement-cta {
	background-color: #000;
	color: #fff;
	font-size: 14px;
	line-height: 20px;
	padding: 10px 20px;
	text-decoration: none;
	white-space: nowrap
}

#announcements .title_p {
	font-size: 22px;
	font-weight: 500;
	line-height: 32px;
	color: #000
}

#announcements .descript_p {
	margin: 0;
	font-size: 22px;
	font-weight: 300;
	line-height: 32px;
	color: #000
}

#announcements .download_btn {
	display: flex
}

#announcements .header-section .cross-button {
	background-color: transparent;
	border: none;
	color: #000;
	cursor: pointer;
	margin-left: 20px;
	margin-right: 0
}

@media screen and (max-width: 768px) {
	#announcements .hyperin_whitepaper_img {
		display: none
	}

	#announcements .header-section .top-header {
		padding: 12px 0;
		gap: 6px
	}

	#announcements .title_p {
		font-size: 18px
	}

	#announcements .descript_p {
		font-size: 18px;
		line-height: 24px
	}

	#announcements .announcement-cta {
		font-size: 12px;
		padding: 7px 12px
	}
}

@media screen and (max-width: 550px) {
	#announcements .title_p {
		font-size: 12px
	}

	#announcements .descript_p {
		font-size: 12px;
		line-height: 18px
	}
}

@media screen and (max-width: 420px) {
	#announcements .descript_p {
		display: none
	}

	#announcements .title_p {
		font-size: 12px;
		font-weight: 300;
		line-height: 20px
	}

	#announcements .header-section .cross-button {
		margin-left: 6px
	}

	#announcements .announcement-cta {
		padding: 0;
		background: transparent;
		color: #000
	}
}

#cta {
	margin-top: 120px;
	margin-bottom: 120px
}

#cta .more-leads-section {
    position: relative; /* Needed for pseudo-element positioning */
    padding: 50px 12px;
    text-align: center;
    overflow: hidden; /* Ensures the pseudo-element doesn't overflow the border-radius */
}

#cta .more-leads-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(180deg, #20776c 0%, #28a396 65%, #46d2c3 100%);

    z-index: -1; /* Ensures the background is behind the content */
    border-radius: 0px; /* Matches the parent's border-radius */
}

#cta .main-leads {
	width: 100%;
	max-width: 650px;
	margin: 0 auto
}

#cta .more-leads-section h2 {
	color: var(--white, #FFF);
	text-align: center;
	font-family: Roboto;
	font-size: 48px;
	font-style: normal;
	font-weight: 500;
	line-height: 60px;
	letter-spacing: -.96px
}

#cta .more-leads-section .enterprise-p {
	padding-top: 16px;
	color: #Ffffff;
	text-align: center;
	font-family: Roboto;
	font-size: 25px;
	font-style: normal;
	font-weight: 300;
	line-height: 30px
}

#cta .more-leads-section .booked-btn {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 32px;
	padding-top: 24px
}

#cta .more-leads-section .Bookdemo-btn {
	width: 100%;
	max-width: 202px;
	height: 60px;
	color: #FFF;
	font-family: Roboto;
	font-size: 18px;
	font-style: normal;
	font-weight: 500;
	line-height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	border-radius: 0px;
	background: #25897d;
    border: transparent;
    transition: background 0.3s ease-in-out; /* Add transition effect for background change */


}
#cta .more-leads-section .Bookdemo-btn:hover {

	background: #28a396;
	border: 1px solid #28a396;

}

#powerTool .readmore

#powerTool .readmore::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background-color: #25897d; /* Darkened version of #f19200 for hover effect */
  transition: all 0.3s; /* Smooth transition for hover effect */
  border-radius: 10px;
  z-index: -1;
}


#cta .more-leads-section .contect-us-btn {
	width: 100%;
	max-width: 202px;
	height: 60px;
	background: transparent;
    border-radius: 8px;
    border:transparent;
	color: var(--white, #FFF);
	font-family: Roboto;
	font-size: 18px;
	font-style: normal;
	font-weight: 500;
	line-height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	transition: background 0.3s ease-in-out;
}

#cta .more-leads-section .contect-us-btn:hover {
	background: #28a396; 
    border-radius: 8px;
}

#cta .Onboarding {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px;
	padding-top: 32px
}

#cta .more-leads-section .Onboarding-d {
	display: flex;
	gap: 12px;
	align-items: center
}

#cta .more-leads-section .Onboarding-d p {
	color: #dfffff;
	text-align: center;
	font-family: Roboto;
	font-size: 20px;
	font-style: normal;
	font-weight: 300;
	line-height: 30px
}

@media screen and (max-width: 670px) {
	#cta .more-leads-section h2 {
		font-size: 42px;
		line-height: 44px
	}
}

@media screen and (max-width: 420px) {
	#cta .more-leads-section h2 {
		max-width: 240px;
		margin: 0 auto;
		font-size: 24px;
		line-height: 32px
	}

	#cta .more-leads-section .enterprise-p {
		padding-top: 12px;
		font-size: 14px;
		line-height: 21px
	}

	#cta .more-leads-section .Bookdemo-btn,
	#cta .more-leads-section .contect-us-btn {
		width: 100%;
		max-width: 180px;
		height: 45px
	}

	#cta .more-leads-section .Onboarding-d p {
		font-size: 18px
	}
}

@media screen and (max-width: 800px) {
	#cta {
		margin-top: 0;
		margin-bottom: 0
	}
	#cta .more-leads-section .contect-us-btn {

    font-size: 31px;
}
}

#footer .footer-section {
	padding-top: 48px;
	background: #000
}

#footer .footer-logo {
	width: 100%;
	max-width: 206px
}

#footer .footer-logo img {
	width: 60%
}

#footer .top-footer {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding-bottom: 30px;
	border-bottom: 1px solid #C1C7CD
}

#footer .main-input-filed {
	width: 100%;
	max-width: 498px;
	display: flex;
	align-items: center;
	gap: 16px
}

#footer .in-field {
	width: 100%;
	max-width: 349px;
	display: flex;
	align-items: center;
	gap: 8px;
	border-radius:0px;
	border:transparent;
	background: var(--CoolGray-10, #F2F4F8);
	padding: 12px 16px
}

#footer .in-field input {
	background: transparent;
	border: none;
	width: 100%
}

#footer .in-field input::placeholder {
	color: var(--CoolGray-60, #697077);
	font-family: Roboto;
	font-size: 16px;
	font-style: normal;
	font-weight: 300;
	line-height: 140%
}

#footer .subscribe-btn {
	width: 132px;
	display: flex;
	justify-content: center;
	padding: 16px 12px;
	border-radius:0px;
	border:transparent;
	background: #28a396;
	color: var(--Default-White, var(--white, #FFF));
	font-family: Roboto;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 100%;
	letter-spacing: .5px
}

#footer .main-footer-links {
	padding: 30px 0;
	border-bottom: 1px solid var(--CoolGray-30, #C1C7CD)
}

#footer .ft-links {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	gap: 48px
}

#footer .main-footer-links .footer-link {
	display: flex;
	flex-direction: column;
	gap: 16px
}

#footer .main-footer-links .footer-link .fp-link {
	color: var(--Default-White, var(--white, #FFF));
	font-family: Roboto;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 100%
}

#footer .down-p {
	padding: 12px 0;
	color: var(--Default-White, var(--white, #FFF));
	font-family: Roboto;
	font-size: 18px;
	font-style: normal;
	font-weight: 500;
	line-height: 110%
}

#footer .google-btn,
#footer .google-btn2 {
	padding-top: 16px;
	display: flex;
	gap: 16px
}

#footer .join-us {
	padding-top: 24px;
	width: 100%;
	max-width: 266px;
	margin-left: auto
}

#footer .Inc-d {
	padding: 30px 0
}

#footer .Inc-d p {
	color: var(--Default-White, var(--white, #FFF));
	font-family: Roboto;
	font-size: 14px;
	font-style: normal;
	font-weight: 300;
	line-height: 140%
}

@media screen and (max-width: 720px) {
	#footer .top-footer {
		flex-wrap: wrap
	}

	#footer .ft-links {
		display: flex;
		flex-wrap: wrap
	}

	#footer .join-us {
		margin-left: unset
	}

	#footer .footer-logo {
		width: 100%;
		max-width: 170px
	}
}

@media screen and (max-width: 420px) {
	#footer .ft-links {
		display: grid;
		grid-template-columns: .8fr 1fr;
		gap: 10px;
		row-gap: 40px
	}

	#footer .google-btn {
		flex-wrap: wrap
	}

	#footer .google-btn img {
		width: 120px
	}

	#footer .main-footer-links .footer-link .fp-link {
		font-weight: 300
	}

	#footer .main-input-filed {
		flex-wrap: wrap
	}

	#footer .subscribe-btn {
		width: 100%
	}

	#footer .in-field,
	#footer .subscribe-btn {
		padding: 8px 12px
	}

	#footer .in-field input::placeholder {
		font-size: 14px;
		font-weight: 300
	}

	#footer .footer-logo {
		width: 100%;
		max-width: 122px
	}
}

@media screen and (max-width: 375px) {
	#footer .in-field input::placeholder {
		font-size: 12px;
		font-weight: 300
	}
}

#demoRequest .demorequest_section {
	background: #ededed;
	padding: 85px 0
}

#demoRequest .main-efficiency {
	display: flex;
	align-items: center;
	gap: 30px
}

#demoRequest .efficiency-text {
	width: 100%;
	max-width: 683px
}

#demoRequest .efficiency-text h2 {
	color: #151515e6;
	font-family: Roboto;
	font-size: 48px;
	font-style: normal;
	font-weight: 500;
	line-height: 60px;
	letter-spacing: -.96px
}

#demoRequest .request-btn {
	padding-top: 63px;
	display: flex;
	gap: 17px
}

#demoRequest .request-btn .demo-btn {
	width: 100%;
	max-width: 222px;
	height: 60px;
	display: flex;
	align-items: center;
	gap: 12px;
	justify-content: center;
	border: 1px solid var(--Foundation-Orange-orange-500, #28a396);
	background: var(--Foundation-Orange-orange-500, #28a396);
	box-shadow: 0 1px 2px #28a396;
	color: var(--Base-White, var(--white, #FFF));
	font-family: Roboto;
	font-size: 18px;
	font-style: normal;
	font-weight: 500;
	line-height: 28px;
}

#demoRequest .request-btn .demo-btn:hover {
    background: #25897d;
}
#demoRequest .contact-btn {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	color: #28a396 !important;
}

#demoRequest .efficiency-img {
	width: 100%;
	max-width: 498px;
}

#demoRequest .efficiency-img img {
	width: 100%;
}

@media screen and (max-width: 991px) {
	#demoRequest .main-efficiency {
		flex-wrap: wrap;
		justify-content: center;
	}

	#demoRequest .efficiency-text h2 {
		text-align: center;
	}

	#demoRequest .request-btn {
		justify-content: center
	}
}

@media screen and (max-width: 550px) {
	#demoRequest .efficiency-text h2 {
		font-size: 36px;
		line-height: 48px
	}
}

@media screen and (max-width: 470px) {
	#demoRequest .efficiency-text h2 {
		font-size: 32px;
		line-height: 42px
	}
}

@media screen and (max-width: 425px) {
	#demoRequest .efficiency-text h2 {
		font-size: 28px;
		line-height: 40px
	}

	#demoRequest .request-btn .demo-btn {
		height: 40px;
		font-size: 14px;
		gap: 2px
	}

	#demoRequest .request-btn {
		padding-top: 32px;
		gap: 6px
	}
}

@media screen and (max-width: 425px) and (max-width: 360px) {
	#demoRequest .efficiency-text h2 {
		font-size: 24px;
		line-height: 36px
	}
}

#hero {
    position: relative;
    background: url(https://hyperinreact.twodoorsdigital.com/assets/bg-shade.jpg) top center / cover no-repeat;
    /*background: radial-gradient(circle at 10% 20%, rgba(40, 163, 150, 0.1) 0.1%, rgba(233, 226, 226, 0.28) 50.1%);*/
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden;
}

.container.hero {
    position: relative;
    z-index: 3; /* Ensures content is above the moving gradient */
    /* Additional styling for layout and spacing */
}

.hero__text, .hero__animated {
    z-index: 3; /* Ensures text and animated content are above the moving gradient */
}

.moving-gradient {
    position: absolute;
    width: 1200px; /* Adjust size as needed */
    height: 700px;
    background: radial-gradient(circle, #28a396 30%, transparent 50%);
    border-radius: 50%;
    filter: blur(90px);
    animation: moveAndScale 20s infinite alternate ease-in-out;
    z-index: 2; /* Above the background, below the content */
    top: 0; /* Adjust positioning as needed */
    left: 0; /* Adjust positioning as needed */
    opacity:0.5;
}

.moving-gradient::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.1),
      rgba(0, 0, 0, 0.1) 1px,
      transparent 1px,
      transparent 2px
    );
    pointer-events: none;
    opacity: 0.5;
}



@keyframes moveAndScale {
    0%, 100% {
        transform: translate(75%, 10%) scale(1); /* Start from the middle-right */
    }
    25% {
        transform: translate(75%, 20%) scale(1.1); /* Move slightly down and to the right */
    }
    50% {
        transform: translate(50%, 50%) scale(1); /* Move to the middle-right */
    }
    75% {
        transform: translate(75%, 80%) scale(1.1); /* Move down and to the right */
    }
}





@media (max-width: 1115px) {
	#hero {
		min-height: none;
		padding-top: calc(50px + 3rem);
		height: auto
	}

	#hero .hero__text {
		text-align: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center
	}
}

#hero .hero {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	flex-wrap: wrap;
	gap: 1.5rem
}

#hero .hero__text {
	flex: 1 1 40rem;
	padding: 2px;
	max-width: 30rem
}

#hero .hero__text-title {
	color: #262626;
	font-family: Roboto;
	font-size: 70px;
	font-style: normal;
	font-weight: 300;
	line-height: 74px;
	letter-spacing: 1px;
	margin-bottom: 24px
}

#hero .hero__text-subtitle {
	color: #000;
	font-family: Roboto;
	font-size: 21px;
	font-style: normal;
	font-weight: 300;
	line-height: 30px;
	margin-bottom: 40px;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis
}

#hero .hero__text-button {
    display: inline-block;
    padding: 10px 26px; /* Adjusted to match the desired padding */
    background-color: #28a396; /* Button color */
    color: #fff;
    font-family: Roboto, sans-serif;
    font-size: 16px; /* Adjusted font size */
    font-weight: 300; /* Adjusted font weight */
    line-height: 28px; /* Adjusted line height */
    transition: all 0.3s; /* Smooth transition for all properties */
    position: relative;
    overflow: hidden;
    cursor: pointer;
    justify-content: center;
    align-items: center;
    border:none;
    
}

#hero .hero__text-button .button-text {
    position: relative;
    z-index: 2; /* Ensures text is above the pseudo-elements */
    color:#FFF;
}

#hero .hero__text-button::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background-color: #25897d; /* Darkened version for hover effect */
    transition: width 0.3s ease; /* Animates the width */
    z-index: 1; /* Below the text but above the button background */
}

#hero .hero__text-button:hover::before {
    width: 100%;
}

#hero .hero__text-button .arrow {
    display: inline-block;
    margin-left: 8px; /* Space between text and arrow */
    width: 0;
    height: 0;
    border-top: 5px solid transparent; /* Adjust size of arrow */
    border-bottom: 5px solid transparent; /* Adjust size of arrow */
    border-left: 5px solid #fff; /* Arrow color, assuming white text */
    transition: transform 0.3s ease; /* Animate the transform property */
    z-index: 2; /* Ensures arrow is above the pseudo-elements */
}

#hero .hero__text-button:hover .arrow {
    transform: translateX(5px); /* Move arrow to the right on hover */
}


#hero .hero__animated {
	flex: 1 1 37rem;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 40rem;
	overflow: hidden
}

#hero .hero__animated svg {
	height: 80%;
	width: 100%
}

.static-svg {
    display: none; /* Hide static image by default */
}

.static-svg img {
        width: 100%;
        height: auto; /* Adjust height based on width to maintain aspect ratio */
        object-fit: contain; /* Ensures the full image is visible */
    }

@media (max-width: 800px) {
	#hero .hero__animated {
		height: 26rem;
		align-items:unset;
	}
	#svg-animation{ display:none;}

	#hero .hero__animated svg {
		height: 100%;
		width: 100%
	}
	.hero__animated > :first-child {
        display: none; /* Hide SVG animation on mobile */
    }

    .static-svg {
        display: block; /* Show static image on mobile */
        width: 100%; /* Make the static image cover the full width */
        height:200px;
        margin-top:0;
    }

   
    #reviews .swiper {
    padding: 0 22px;
    }
    #reviews .swiper-button-prev {
       
        display: none;
    }
    #reviews .swiper-button-next {
    display: none;
}
}

@media (max-width: 500px) {
	#hero .hero__animated {
		height: 26rem
	}
}

@media (max-width: 800px) {
	#hero #svg-animation {
		max-width: 610px;
		height: 100%;
		width: 100%
	}
}

#hero #svg-animation .inner-svg-box {
	float: left;
	width: 100%;
	margin: 60px 0;
	display: flex
}

#hero #svg-animation .pt-5 {
	padding-top: 50px
}

#hero #svg-animation .center-svg-box {
	position: relative
}

#hero #svg-animation .center-svg-box li:first-child {
	left: 25%;
	top: 30%
}

#hero #svg-animation .center-svg-box li:nth-child(2) {
	left: 12%;
	top: 37.5%
}

#hero #svg-animation .center-svg-box li:nth-child(3) {
	left: 21%;
	top: 45%
}

#hero #svg-animation .center-svg-box li:nth-child(4) {
	left: 12%;
	top: 52.5%
}

#hero #svg-animation .center-svg-box li:nth-child(5) {
	left: 25%;
	top: 60%
}

#hero #svg-animation .center-svg-box li:nth-child(6) {
	right: 25%;
	top: 30%
}

#hero #svg-animation .center-svg-box li:nth-child(7) {
	right: 12%;
	top: 37.5%
}

#hero #svg-animation .center-svg-box li:nth-child(8) {
	right: 21%;
	top: 45%
}

#hero #svg-animation .center-svg-box li:nth-child(9) {
	right: 12%;
	top: 52.5%
}

#hero #svg-animation .center-svg-box li:nth-child(10) {
	right: 25%;
	top: 60%
}

#hero #svg-animation .center-svg-box li:nth-child(11) {
	left: 57%;
	bottom: 14%
}

#hero #svg-animation .center-svg-box li:nth-child(12) {
	left: 37%;
	bottom: 14%
}

#hero #svg-animation .center-svg-box li:nth-child(13) {
	left: 50%;
	bottom: 19%;
	transform: translate(-50%)
}

#hero #svg-animation .icon-hover-box {
	width: 6%;
	height: 6%;
	cursor: pointer;
	position: absolute;
	z-index: 3
}

#hero #svg-animation .green-icon {
	left: 0
}

#hero #svg-animation .blue-icons {
	right: 0
}

#hero #svg-animation .yellow-icons {
	bottom: 0
}

#hero #svg-animation .icon-hover-box img {
	width: 100%;
	aspect-ratio: 1
}

#hero #svg-animation .lines-dash {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40%;
	z-index: 2
}

#hero #svg-animation .left-lines {
	left: 0
}

#hero #svg-animation .right-lines {
	right: 0
}

#hero #svg-animation .bottom-lines {
	left: 50%;
	width: 20%;
	transform: translate(-50%);
	bottom: 36px;
	top: auto
}

#hero #svg-animation .lines-dash img {
	width: 100%
}

#hero #svg-animation .big-center-box {
	opacity: 0;
	width: 60%;
	margin: 0 auto
}

#hero #svg-animation .bchart-logo {
	position: absolute;
	width: 4%;
	z-index: 5
}

#hero #svg-animation .bchart-logo img {
	width: 100%;
	aspect-ratio: 1
}

#hero #svg-animation #logogreen {
	top: 50%;
	transform: translateY(-50%);
	left: 0
}

#hero #svg-animation #logoblue {
	top: 50%;
	transform: translateY(-50%);
	right: 0
}

#hero #svg-animation #logoyellow {
	left: 50%;
	transform: translate(-50%);
	bottom: 0
}

#hero #svg-animation .green-icons,
#hero #svg-animation .blue-icons,
#hero #svg-animation .yellow-icons,
#hero #svg-animation .lines-dash,
#hero #svg-animation .bchart-logo {
	opacity: 0
}

#hero #svg-animation .green-icons:hover img {
	border-radius: 100px
}

#hero #svg-animation #svg-animation {
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 1
}

#hero #svg-animation .pt-5 {
	padding-top: 30px
}

#hero #svg-animation .gt-consumer {
	transform: translate(-350px, -233px)
}

#hero #svg-animation .gt-commercial {
	transform: translate(350px, -233px)
}

#hero #svg-animation .inner-svg-box {
	margin: 10px 0
}

#hero #svg-animation .drop-menu-button {
	width: 100%;
	height: 100%
}

#hero #svg-animation .background_themes {
	background-image: none
}

#hero #svg-animation #svg-animation {
	transform: scale(2);
	margin-top: 43%;
	height: 767px
}

#hero #svg-animation .service .space {
	margin-top: 50px
}

#hero #svg-animation .logos-row {
	gap: 30px
}

#hero #svg-animation #parallax-container {
	left: 0
}

#hero #svg-animation .navbar {
	margin-top: 0;
	display: flex;
	align-items: center;
	margin-bottom: 0
}

.navbar

{background:red;}

#hero #svg-animation .carousel-y {
	flex-direction: column;
	margin-bottom: 0;
	margin-top: 0;
	gap: 10px
}

#hero #svg-animation .figure1 {
	width: 100%
}

#hero #svg-animation .carousel-x {
	left: 0%;
	width: 100%
}

#hero #svg-animation .logos-color img {
	width: 100%
}

#hero #svg-animation img.desktop-logo {
	border: none;
	outline: none;
	max-width: 70%
}

#hero #svg-animation img.mobile-logo {
	display: none
}

#hero #svg-animation .desktop-logo-section {
	position: absolute;
	width: 55%;
	top: 3%
}

#hero #svg-animation #connect {
	margin-top: 0
}

#hero #svg-animation .carousel-x {
	margin: 0
}

#hero #svg-animation header .navigation {
	margin-top: -35px
}

#hero #svg-animation header .navigation {
	float: left;
	width: 100%
}

#hero #svg-animation .service_container {
	padding-top: 6%
}

#navbar {
    position: fixed;
    top: 0;
    width: 100%;
    background: transparent; /* Start with a transparent background */
    transition: background-color 0.3s; /* Smooth transition for background change */
    z-index: 10; /* Ensure navbar is above other content */
}

#navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px; /* Adjust based on your design */
    height: 70px; /* Adjust based on your design */
}

#navbar nav {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 1; /* This will make the nav element take up available space */
}

.navbar_menu {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 20px; /* Adjust the gap between links as needed */
    flex-grow: 1; /* This will make the navbar_menu take up the available space */
    height:70px;
}



.contact-us-desktop {
    margin: 10px;
    padding: 10px 20px;
    text-align: center;
    transition: 0.5s;
    background-size: 200% auto;
    color: #000;
    display: block;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    border: 1px solid #000;
    touch-action: manipulation;
}

.contact-us-desktop:hover {
    background-position: right center;
  /* change the direction of the change here */
  color: #fff;
  text-decoration: none;
  background:#28a396;
  box-shadow: 0px 0px 14px -7px #28a396;
  border: 1px solid #28a396;
}

.contact-us-desktop:active {
  transform: scale(0.95);
}


@keyframes shadowPulse {
    0% {
        box-shadow: 0 0 20px #f19200, 0 0 30px #f19200 inset; /* Start with a larger shadow */
    }
    50% {
        box-shadow: 0 0 30px #f19200, 0 0 70px #f19200 inset; /* Shadow grows even larger */
    }
    100% {
        box-shadow: 0 0 20px #f19200, 0 0 30px #f19200 inset; /* Return to the starting size */
    }
}




.burger-menu {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 40px; /* Adjust size as needed */
    height: 25px; /* Adjust size as needed */
    cursor: pointer;
    margin-left: auto; /* Aligns to the right */
}

.burger-menu span {
    display: block;
    height: 3px; /* Adjust thickness as needed */
    width: 100%;
    background: #333; /* Adjust color as needed */
    transition: all 0.3s ease-in-out;
}

.burger-menu.open span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.burger-menu.open span:nth-child(2) {
    opacity: 0;
}

.burger-menu.open span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

@media (min-width: 801px) {
    .burger-menu {
        display: none;
    }
    .mobile-menu-buttons {
        display: none;
    }
}

.mobile-menu-buttons {
    display: flex;
    justify-content: center; /* Center the buttons within the container */
    gap: 10px; /* Adjust the space between the buttons */
    padding: 15px 0; /* Add some padding above and below the buttons */
}

.request-demo-mobile,
.contact-us-mobile {
    display: block; /* Ensure the links behave like block elements */
    background-color: #0B5FFF; /* Example background color for "Request Demo" */
    color: #ffffff; /* Text color */
    text-align: center;
    padding: 20px 30px !important; /* Adjust padding to control the button size */
    border-radius: 5px; /* Rounded corners */
    text-decoration: none; /* Remove underline from links */
    margin-top:8%;
    margin-bottom:8%;
}

.contact-us-mobile {
    background-image: linear-gradient(45deg, #FF512F 0%, #F09819  51%, #FF512F  100%);
    
}



/* Media query for desktop screens */
@media (min-width: 800px) { /* Adjust the breakpoint as needed */
    .contact-us-desktop {
        display: block; /* Show the Contact Us button on desktop */
    }

    .mobile-menu {
        display: none; /* Ensure the burger menu icon is hidden on desktop */
    }
    #navbar {
    height:70px;
}
}

/* Media query for mobile screens */
@media (max-width: 799px) { /* Adjust the breakpoint as needed */
    .mobile-menu {
        display: block; /* Show on mobile */
    }

    .navbar_menu {
        display: none; /* Optionally hide the main navigation links on mobile if using a dropdown menu */
    }

    .contact-us-desktop {
        display: none; /* Hide on mobile */
    }
     #navbar {
    height:90px;
}
#reviews .carouselItem {
    background: #fff;
}
}
#navbar #logo {
	margin-right: auto;
	height: 32px
}

#navbar nav {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: row
}

#navbar nav a {
	text-decoration: none;

}

#navbar nav ul {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: row;
	list-style: none;
	gap: 3rem
}

#navbar nav ul li a {
	display: block
}

#navbar nav ul li a:hover {
	display: block
	color:#07225D;
}


#navbar nav ul li.active {
	font-weight: 500
}

#navbar nav .secondary-button {
	border: none
}

#navbar nav .secondary-button a {
	border: 1px solid #f19200;
	color: #f19200;
	font-weight: 500;
	display: flex;
	justify-content: center;
	align-items: center;
	white-space: nowrap;
	background: #fff;
	border-radius: 8px;
	height: 45px;
}

#navbar nav .secondary-button a:hover {
	border: 1px solid #f19200;
	color: #FFF;
	font-weight: 500;
	display: flex;
	justify-content: center;
	align-items: center;
	white-space: nowrap;
	background: #f19200;
	border-radius: 12px;
}
#navbar nav button.secondary-button {
	margin-left: 1.5rem
}

#navbar nav .mobile-menu {
	display: none
}

@media (max-width: 800px) {
	#navbar nav .mobile-menu {
		display: block
	}

#navbar nav .navbar_menu {
    z-index: 50;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: calc(100vh - 50px); /* Adjust the 50px if your navbar height is different */
    overflow-y: auto;
    flex-direction: column;
    padding: 2rem 1rem;
    justify-content: flex-start;
    box-shadow: 0 1rem 1rem rgba(70, 70, 70, 0.27);
    background: #000;
    transform: translateY(-100%); /* Start completely off-screen */
    opacity: 0;
    pointer-events: none;
    gap: 0rem;
    transition: transform 0.5s ease, opacity 0.5s ease; /* Smooth transition for transform and opacity */
}


	#navbar nav .navbar_menu li {
		width: 100%;
		text-align: left;
		border-bottom: 1px solid white
	}

	#navbar nav .navbar_menu li a {
		padding: 1.5rem 0;
		color: #FFF;
		font-size: 1.5rem
	}
	#navbar nav .navbar_menu li a.link-title {
	    color:#072252;
	    font-size: 1.5rem;
	    line-height: 1.556rem;
	    padding-bottom: 0px;
	}

	#navbar nav .navbar_menu li.active a {
		color: #fff;
		font-weight: 700;
		opacity: .5
	}

	#navbar nav .navbar_menu li:not(.active) a {
		font-weight: 300
	}

	#navbar nav .navbar_menu li:hover {
		background: #272727
	}

	#navbar nav .navbar_menu.show {
    transform: translateY(0); /* Move to original position */
    opacity: 1; /* Fully visible */
    pointer-events: all; /* Make items clickable */
}


	
	

	#navbar nav .navbar_menu .secondary-button {
		display: none !important;
	}
	#navbar .container {
    
    padding-left: 6%;
    padding-right: 6%;
    margin-top:4%;
}
}

#powerTool{
	background:none;
}

#powerTool .main_mange {
	display: flex;
	justify-content: space-between;
	padding: 100px 0;
	align-items: center
}

#powerTool:nth-child(2n) .main_mange {
	flex-direction: row-reverse
}

#powerTool .mange_text {
	width: 100%;
	max-width: 655px
}

#powerTool .mange_text h2 {
	width: 100%;
	position: relative;
	padding-bottom: 10px;
	margin-bottom: 30px;
	font-weight: 300;
	color: #000;
	font-size:3em;
	line-height:1;
}

#powerTool .mange_text h2:after {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	height: 4px;
	width: 64px;
	background: none;
	bottom: 0
}

#powerTool .mange_text p {
	width: 100%;
	margin-bottom: 30px;
	font-size: 25px;
	color: #000;
	font-weight: 100;
	line-height: 1.4;
}

#powerTool .readmore {
  display: inline-block;
  padding: 12px 26px; /* Adjusted to match your original padding */
  border-radius: 0px;
  background-color: #f19200; /* Your specified button color */
  color: #fff;
  text-transform: uppercase;
  font-family: Roboto, sans-serif; /* Ensuring font consistency */
  font-size: 14px; /* Your specified font size */
  font-weight: 500; /* Your specified font weight */
  line-height: 20px; /* Your specified line height */
  letter-spacing: 0.15rem; /* Added for style */
  transition: all 0.3s; /* Smooth transition for all properties */
  position: relative;
  overflow: hidden;
  z-index: 1;
}


#powerTool .readmore::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #28a396; /* Same as button background for a unified look */
  border-radius: 0;
  z-index: -2;
}

#powerTool .readmore::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background-color: #25897d; /* Darkened version of #f19200 for hover effect */
  transition: all 0.3s; /* Smooth transition for hover effect */
  border-radius: 0;
  z-index: -1;
}

#powerTool .readmore:hover::before {
  width: 100%;
}

#powerTool .readmore:hover {
  color: #fff; /* Maintain white text color on hover */
}

.readmore .arrow {
    display: inline-block;
    margin-left: 8px; /* Space between text and arrow */
    width: 0; 
    height: 0; 
    border-top: 5px solid transparent; /* Adjust size of arrow */
    border-bottom: 5px solid transparent; /* Adjust size of arrow */
    border-left: 5px solid #fff; /* Arrow color, assuming white text */
    transition: transform 0.3s ease; /* Animate the transform property */
}

.readmore:hover .arrow {
    transform: translateX(5px); /* Move arrow to the right on hover */
}


#powerTool .mange_img {
	width: 100%;
	max-width: 541px
}

#powerTool .mange_img img {
	width: 100%
}

#powerTool .border-botom {
	width: 90%;
	height: 1px;
	background: #d4d3d3;
	margin: 0 auto
}

@media screen and (max-width: 768px) {
	#powerTool .main_mange {
		padding: 80px 0;
		flex-wrap: wrap;
		justify-content: center;
		gap: 20px
	}

	#powerTool .mange_text {
		order: 2
	}
	#hero .hero__text-title {
    font-size: 48px;
    font-weight: 400;
    line-height: 50px;
    margin-top:6%;
}
#hero .hero__text-subtitle {
   
    padding-left: 5%;
    padding-right: 5%;
}
}

@media screen and (max-width: 420px) {
	#powerTool .mange_text p {
		font-size: 20px;
		line-height: 32px;
		text-align: center
	}

	#powerTool .main_mange {
		padding: 50px 0
	}

	#powerTool .mange_text h2:after {
		left: 50%;
		transform: translate(-50%)
	}

	#powerTool .mange_text h2 {
		text-align: center
	}

	#powerTool .readmore {
		margin: 0 auto;
		display: flex;
		justify-content: center;
		width: fit-content
	}
}

#powerTools .service_section {
    width: 100%;
    background: #fff;
    padding: 50px 0;
}


#powerTools .alone-heading {
	width: 100%;
	text-align: center;
	font-weight: 100;
	font-size: 55px;
	line-height: 65px
}

#powerTools .main-services {
	padding-top: 100px;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 20px
}

#powerTools .services-card-1 {
	text-decoration: none;
	text-align: center;
	align-items: center;
	display: flex;
	flex-direction: column;
	padding: 30px;
	border-radius:12px;
}

#powerTools .services-card-1:hover {
	background: #f7f6f6;
	transition: .6s;
	-webkit-transition: .6s
}

#powerTools .Manage_img {
	width: 100%;
	max-width: 100px
}

#powerTools .Manage_img img {
	width: 100%
}

#powerTools .services-card-1 span {
	width: 100%;
	font-size: 30px;
	text-align: center;
	color: #000;
	margin-top: 30px;
	font-weight: 300;
	letter-spacing: .1em
}

#powerTools .services-card-1 p {
	width: 100%;
	max-width: 360px;
	padding: 0 10px;
	font-size: 25px;
	line-height: 37px;
	color: #000;
	font-weight: 100;
	margin-top: 35px
}

#powerTools .border-botom {
	width: 70%;
	background: #d4d3d3;
	margin: 0 auto
}

@media screen and (max-width: 991px) {
	#powerTools .services-card-1 p {
		font-size: 28px;
		line-height: 32px;
		padding-left:2%;
		padding-right:2%;
	}
}

@media screen and (max-width: 768px) {
	#powerTools .main-services {
		padding-top: 50px;
		grid-template-columns: 1fr 1fr
	}

	#powerTools .service_section {
		padding: 30px 0
	}
	
	#powerTools .services-card-1 p {
		font-size: 28px;
		line-height: 32px;
		padding-left:2%;
		padding-right:2%;
	}
	
	#powerTool .mange_text h2 {
    font-size: 2.5em;
    margin-top: 10%;
    font-weight:400;
    }
    
    #powerTools .services-card-1 span {
        font-size: 40px;
        
    }
}

@media screen and (max-width: 550px) {
	#powerTools .main-services {
		grid-template-columns: 1fr
	}

	#powerTools .alone-heading {
		font-size: 32px;
		line-height: 44px
	}
}

#reviews .reviews {
	padding-top: 0px;
	padding-bottom: 80px;
	display: flex;
	gap: 1rem;
	gap: 20px
}

#reviews .reviews__text {
	flex: 1 1 27rem;
	width: 34%
}

#reviews .reviews__text h2 {
	color: #141414e6;
	font-family: Roboto;
	font-size: 48px;
	font-style: normal;
	font-weight: 500;
	line-height: 60px;
	letter-spacing: -.96px;
	margin-bottom: 9px
}

#reviews .reviews__text p {
	color: #000;
	font-family: Roboto;
	font-size: 18px;
	font-style: normal;
	font-weight: 300;
	line-height: 28px
}

#reviews .reviews__carousel {
	flex: 1 1 30rem;
	position: relative;
	width: 66%
}

@media (max-width: 800px) {
	#reviews .reviews {
	    padding-top: 0px;
		flex-direction: column
	}
	

	#reviews .reviews__text {
		flex: 0 1 auto;
		width: 100%
	}

	#reviews .reviews__text h2 {
		color: #141414e6;
		font-family: Roboto;
		font-size: 48px;
		font-style: normal;
		font-weight: 500;
		line-height: 60px;
		letter-spacing: -.96px;
		margin-bottom: 9px
	}

	#reviews .reviews__text p {
		color: #000;
		font-family: Roboto;
		font-size: 18px;
		font-style: normal;
		font-weight: 300;
		line-height: 28px
	}

	#reviews .reviews__carousel {
		flex: 0 1 auto;
		width: 100%
	}
}

#reviews .swiper {
	width: 100%;
	height: 100%;
	padding: 0 22px;
	overflow: visible !important;
}

#reviews .swiper-slide {
	text-align: center;
	font-size: 18px;
	background: #fff;
	display: flex;
	justify-content: center;
	align-items: center
}

#reviews .swiper-pagination {
	top: calc(100% + 50px);
	gap: 16px
}

#reviews .swiper-wrapper {
	overflow-y: visible !important;
}

#reviews .swiper-pagination-bullet {
	width: 72px;
	height: 7px;
	border-radius: 16px;
	background: #fef4e6;
	opacity: 1
}

#reviews .swiper-pagination-bullet-active {
	background: #f4a833
}

#reviews .swiper-button-next {
	height: 100%;
	width: 49px;
	top: 1.3rem;
	right: 0
}

#reviews .swiper-button-next:after {
	content: "";
	background-image: url("data:image/svg+xml,%3csvg%20width='45'%20height='44'%20viewBox='0%200%2045%2044'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M15.9326%2013.5856L24.3292%2022.0006L15.9326%2030.4156L18.5176%2033.0006L29.5176%2022.0006L18.5176%2011.0006L15.9326%2013.5856Z'%20fill='%23F19200'/%3e%3c/svg%3e");
	background-position: center;
	background-size: contain;
	right: auto;
	height: 44px;
	width: 100%;
	position: absolute;
	left: 50%;
	top: 50%;
	background-repeat: no-repeat;
	transform: translate(-50%, -50%)
}

#reviews .swiper-button-prev {
	height: 100%;
	width: 49px;
	top: 1.3rem;
	left: 0
}

#reviews .swiper-button-prev:after {
	content: "";
	background-image: url("data:image/svg+xml,%3csvg%20width='45'%20height='44'%20viewBox='0%200%2045%2044'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20id='mdi:chevron-up'%3e%3cpath%20id='Vector'%20d='M29.066%2030.415L20.6693%2022L29.066%2013.585L26.481%2011L15.481%2022L26.481%2033L29.066%2030.415Z'%20fill='%23F19200'/%3e%3c/g%3e%3c/svg%3e");
	background-position: center;
	background-size: contain;
	height: 44px;
	width: 44px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	right: auto;
	background-repeat: no-repeat
}

#reviews .carouselItem {
	background: #FFF;
	padding: 24px;
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: 1rem
}

#reviews .carouselItem>p {
	color: #141414e6;
	font-family: Roboto;
	font-size: 18px;
	font-style: normal;
	font-weight: 300;
	text-align: left;
	line-height: 28px;
	min-height: 196px
}

#reviews .carouselItem__quoteIcon {
	height: 24px;
	width: 24px;
	aspect-ratio: 1
}

#reviews .carouselItem__divider {
	border: 1.5px solid #f19200
}

#reviews .carouselItem__brandInfo {
	display: flex;
	gap: 1rem
}

#reviews .carouselItem__brandInfo>img {
	height: 64px
}

#reviews .carouselItem__brandInfo-text {
	flex: 1;
	padding: 6px 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between
}

#reviews .carouselItem__brandInfo-text h3 {
	color: #141414;
	font-family: Roboto;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 24px;
	text-align: left
}

#reviews .carouselItem__brandInfo-text h4 {
	color: #141414;
	text-align: left;
	font-family: Roboto;
	font-size: 14px;
	font-style: normal;
	font-weight: 300;
	line-height: 140%
}

#trustedUsers .trustedUsers {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
	padding-top: 34px;
	padding-bottom: 34px
}

#trustedUsers .trustedUsers .swiper-container-free-mode>.swiper-wrapper {
	transition-timing-function: linear
}

#trustedUsers .trustedUsers .swiper-wrapper {
	-webkit-transition-timing-function: linear !important;
	-o-transition-timing-function: linear !important;
	transition-timing-function: linear !important
}

#trustedUsers .trustedUsers__title {
	color: #3d3d3d;
	font-family: Roboto;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 24px;
	width: 299px;
	text-align: center
}

#trustedUsers .trustedUsers__brands {
	flex: 1 1 50rem;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem;
	height: 48px;
	overflow: hidden
}

#trustedUsers .trustedUsers__brands-brand {
	height: 48px;
	display: flex;
	justify-content: center;
	align-items: center
}

@media (max-width: 1134px) {
	#trustedUsers .trustedUsers__title {
		width: 100%
	}
}

#whyHyperIn {
	margin-top: 5%;
	margin-bottom:5%;
}

#whyHyperIn .whyHyperIn__heading {
	color: #101828;
	font-family: Roboto;
	font-size: 36px;
	font-style: normal;
	font-weight: 500;
	line-height: 44px;
	letter-spacing: -.72px;
	margin-bottom: 20px
}

#whyHyperIn .whyHyperIn__description {
	color: #475467;
	font-family: Roboto;
	font-size: 20px;
	font-style: normal;
	font-weight: 300;
	line-height: 30px;
	margin-bottom: 20px;
	width: 100%;
	max-width: 768px
}

@media screen and (max-width: 800px) {
	#whyHyperIn .whyHyperIn__heading {
		font-size: 48px;
		line-height: 56px
	}

	#whyHyperIn .whyHyperIn__description {
		font-size: 16px;
		line-height: 24px
	}
}

#whyHyperIn .whyHyperIn__flexBox {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem
}

#whyHyperIn .whyHyperIn__flexBox-tabs {
	flex: 1 1 30rem
}

#whyHyperIn .whyHyperIn__flexBox-dynamicImage {
	flex: 1 1 30rem;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	min-height: 491px
}

#whyHyperIn .whyHyperIn__flexBox-dynamicImage img {
	opacity: 0;
	position: absolute;
	height: 100%;
	width: auto;
	max-width: 100%;
	object-fit: contain;
	object-position: bottom
}

#whyHyperIn .whyHyperIn__flexBox-dynamicImage img.active {
	animation: slideInFade .5s ease-out forwards
}

@media screen and (max-width: 800px) {
	#whyHyperIn .whyHyperIn__flexBox-dynamicImage {
		min-height: 300px
	}

	#whyHyperIn .whyHyperIn__flexBox-dynamicImage img {
		width: 100%;
		height: 100%;
		max-width: none;
		object-fit: contain;
		bottom: 0
	}
}

#whyHyperIn .whyHyperIn__tab {
	padding: 16px 24px;
	border-left: 4px solid #f2f4f7;
	cursor: pointer
}

#whyHyperIn .whyHyperIn__tab h4 {
	color: #101828;
	font-family: Roboto;
	font-size: 20px;
	font-style: normal;
	font-weight: 500;
	line-height: 30px;
	margin-bottom: 8px
}

#whyHyperIn .whyHyperIn__tab p {
	color: #475467;
	font-family: Roboto;
	font-size: 16px;
	font-style: normal;
	font-weight: 300;
	line-height: 24px;
	margin-bottom: 20px
}

#whyHyperIn .whyHyperIn__tab button {
	background: #fff;
	border: none;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	font-family: Roboto;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 24px
}

#whyHyperIn .whyHyperIn__tab button span {
	color: #28a396;
}

#whyHyperIn .whyHyperIn__tab button img {
	translate: 0px;
	transition: all .1s ease
}

#whyHyperIn .whyHyperIn__tab button:hover img {
	translate: 5px
}

#whyHyperIn .whyHyperIn__tab img.active {
	display: none
}

#whyHyperIn .whyHyperIn__tab img.inactive {
	display: inline-block
}

#whyHyperIn .whyHyperIn__tab.active {
	border-left: 4px solid #f19200
}

#whyHyperIn .whyHyperIn__tab.active button span {
	color: #f19200 !important
}

#whyHyperIn .whyHyperIn__tab.active img.active {
	display: inline-block
}

#whyHyperIn .whyHyperIn__tab.active img.inactive {
	display: none
}

@keyframes slideInFade {
	0% {
		opacity: 0;
		transform: translate(100%)
	}

	to {
		opacity: 1;
		transform: translate(0)
	}
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	scroll-behavior: smooth;
	color: #000;
	
}

*:focus {
	outline: none
}

#bodyClone {
	width: 100%;
	min-height: 100vh;
	overflow-x: hidden;
	overflow-y: auto;
	position: relative;
	font-family: Roboto, sans-serif;
}

header {
	width: 100%;
	z-index: 50;
	top: 0;
	left: 0;
	transition: transform .3s ease;
	transform: translateY(0);
	box-shadow: 0 0 2rem #0003;
	position: fixed
}

header.hidden {
	transform: translateY(-100%)
}

header.visible {
	transform: translateY(0)
}

button {
	cursor: pointer
}

a {
	text-decoration: none
}

.container {
	max-width: 1300px;
	width: 100%;
	padding: 0 10px;
	margin: 0 auto
}

@font-face {
	font-family: swiper-icons;
	src: url(data:application/font-woff;charset=utf-8;base64,\ d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA);
	font-weight: 400;
	font-style: normal
}

:root {
	--swiper-theme-color: #007aff;
}

:host {
	position: relative;
	display: block;
	margin-left: auto;
	margin-right: auto;
	z-index: 1
}

.swiper {
	margin-left: auto;
	margin-right: auto;
	position: relative;
	overflow: hidden;
	list-style: none;
	padding: 0;
	z-index: 1;
	display: block
}

.swiper-vertical>.swiper-wrapper {
	flex-direction: column
}

.swiper-wrapper {
	position: relative;
	width: 100%;
	height: 100%;
	z-index: 1;
	display: flex;
	transition-property: transform;
	transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
	box-sizing: content-box
}

.swiper-android .swiper-slide,
.swiper-ios .swiper-slide,
.swiper-wrapper {
	transform: translateZ(0)
}

.swiper-horizontal {
	touch-action: pan-y
}

.swiper-vertical {
	touch-action: pan-x
}

.swiper-slide {
	flex-shrink: 0;
	width: 100%;
	height: 100%;
	position: relative;
	transition-property: transform;
	display: block
}

.swiper-slide-invisible-blank {
	visibility: hidden
}

.swiper-autoheight,
.swiper-autoheight .swiper-slide {
	height: auto
}

.swiper-autoheight .swiper-wrapper {
	align-items: flex-start;
	transition-property: transform, height
}

.swiper-backface-hidden .swiper-slide {
	transform: translateZ(0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden
}

.swiper-3d.swiper-css-mode .swiper-wrapper {
	perspective: 1200px
}

.swiper-3d .swiper-wrapper {
	transform-style: preserve-3d
}

.swiper-3d {
	perspective: 1200px
}

.swiper-3d .swiper-slide,
.swiper-3d .swiper-cube-shadow {
	transform-style: preserve-3d
}

.swiper-css-mode>.swiper-wrapper {
	overflow: auto;
	scrollbar-width: none;
	-ms-overflow-style: none
}

.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar {
	display: none
}

.swiper-css-mode>.swiper-wrapper>.swiper-slide {
	scroll-snap-align: start start
}

.swiper-css-mode.swiper-horizontal>.swiper-wrapper {
	scroll-snap-type: x mandatory
}

.swiper-css-mode.swiper-vertical>.swiper-wrapper {
	scroll-snap-type: y mandatory
}

.swiper-css-mode.swiper-free-mode>.swiper-wrapper {
	scroll-snap-type: none
}

.swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide {
	scroll-snap-align: none
}

.swiper-css-mode.swiper-centered>.swiper-wrapper:before {
	content: "";
	flex-shrink: 0;
	order: 9999
}

.swiper-css-mode.swiper-centered>.swiper-wrapper>.swiper-slide {
	scroll-snap-align: center center;
	scroll-snap-stop: always
}

.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child {
	margin-inline-start: var(--swiper-centered-offset-before)
}

.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper:before {
	height: 100%;
	min-height: 1px;
	width: var(--swiper-centered-offset-after)
}

.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child {
	margin-block-start: var(--swiper-centered-offset-before)
}

.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper:before {
	width: 100%;
	min-width: 1px;
	height: var(--swiper-centered-offset-after)
}

.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top,
.swiper-3d .swiper-slide-shadow-bottom {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 10
}

.swiper-3d .swiper-slide-shadow {
	background: #00000026
}

.swiper-3d .swiper-slide-shadow-left {
	background-image: linear-gradient(to left, #00000080, #0000)
}

.swiper-3d .swiper-slide-shadow-right {
	background-image: linear-gradient(to right, #00000080, #0000)
}

.swiper-3d .swiper-slide-shadow-top {
	background-image: linear-gradient(to top, #00000080, #0000)
}

.swiper-3d .swiper-slide-shadow-bottom {
	background-image: linear-gradient(to bottom, #00000080, #0000)
}

.swiper-lazy-preloader {
	width: 42px;
	height: 42px;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -21px;
	margin-top: -21px;
	z-index: 10;
	transform-origin: 50%;
	box-sizing: border-box;
	border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
	border-radius: 50%;
	border-top-color: transparent
}

.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,
.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader {
	animation: swiper-preloader-spin 1s infinite linear
}

.swiper-lazy-preloader-white {
	--swiper-preloader-color: #fff
}

.swiper-lazy-preloader-black {
	--swiper-preloader-color: #000
}

@keyframes swiper-preloader-spin {
	0% {
		transform: rotate(0)
	}

	to {
		transform: rotate(360deg)
	}
}

:root {
	--swiper-navigation-size: 44px
}

.swiper-button-prev,
.swiper-button-next {
	position: absolute;
	top: var(--swiper-navigation-top-offset, 50%);
	width: calc(var(--swiper-navigation-size) / 44 * 27);
	height: var(--swiper-navigation-size);
	margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
	z-index: 10;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--swiper-navigation-color, var(--swiper-theme-color))
}

.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
	opacity: .35;
	cursor: auto;
	pointer-events: none
}

.swiper-button-prev.swiper-button-hidden,
.swiper-button-next.swiper-button-hidden {
	opacity: 0;
	cursor: auto;
	pointer-events: none
}

.swiper-navigation-disabled .swiper-button-prev,
.swiper-navigation-disabled .swiper-button-next {
	display: none !important
}

.swiper-button-prev svg,
.swiper-button-next svg {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transform-origin: center
}

.swiper-rtl .swiper-button-prev svg,
.swiper-rtl .swiper-button-next svg {
	transform: rotate(180deg)
}

.swiper-button-prev,
.swiper-rtl .swiper-button-next {
	left: var(--swiper-navigation-sides-offset, 10px);
	right: auto
}

.swiper-button-lock {
	display: none
}

.swiper-button-prev:after,
.swiper-button-next:after {
	font-family: swiper-icons;
	font-size: var(--swiper-navigation-size);
	text-transform: none !important;
	letter-spacing: 0;
	font-variant: initial;
	line-height: 1
}

.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
	content: "prev"
}

.swiper-button-next,
.swiper-rtl .swiper-button-prev {
	right: var(--swiper-navigation-sides-offset, 10px);
	left: auto
}

.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
	content: "next"
}

.swiper-pagination {
	position: absolute;
	text-align: center;
	transition: .3s opacity;
	transform: translateZ(0);
	z-index: 10
}

.swiper-pagination.swiper-pagination-hidden {
	opacity: 0
}

.swiper-pagination-disabled>.swiper-pagination,
.swiper-pagination.swiper-pagination-disabled {
	display: none !important
}

.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-horizontal>.swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal {
	bottom: var(--swiper-pagination-bottom, 8px);
	top: var(--swiper-pagination-top, auto);
	left: 0;
	width: 100%
}

.swiper-pagination-bullets-dynamic {
	overflow: hidden;
	font-size: 0
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
	transform: scale(.33);
	position: relative
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active,
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
	transform: scale(1)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
	transform: scale(.66)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
	transform: scale(.33)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
	transform: scale(.66)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
	transform: scale(.33)
}

.swiper-pagination-bullet {
	width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
	height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
	display: inline-block;
	border-radius: var(--swiper-pagination-bullet-border-radius, 50%);
	background: var(--swiper-pagination-bullet-inactive-color, #000);
	opacity: var(--swiper-pagination-bullet-inactive-opacity, .2)
}

button.swiper-pagination-bullet {
	border: none;
	margin: 0;
	padding: 0;
	box-shadow: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none
}

.swiper-pagination-clickable .swiper-pagination-bullet {
	cursor: pointer
}

.swiper-pagination-bullet:only-child {
	display: none !important
}

.swiper-pagination-bullet-active {
	opacity: var(--swiper-pagination-bullet-opacity, 1);
	background: var(--swiper-pagination-color, var(--swiper-theme-color))
}

.swiper-vertical>.swiper-pagination-bullets,
.swiper-pagination-vertical.swiper-pagination-bullets {
	right: var(--swiper-pagination-right, 8px);
	left: var(--swiper-pagination-left, auto);
	top: 50%;
	transform: translate3d(0, -50%, 0)
}

.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet {
	margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
	display: block
}

.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
	top: 50%;
	transform: translateY(-50%);
	width: 8px
}

.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
	display: inline-block;
	transition: .2s transform, .2s top
}

.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
	margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px)
}

.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
	left: 50%;
	transform: translate(-50%);
	white-space: nowrap
}

.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
	transition: .2s transform, .2s left
}

.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
	transition: .2s transform, .2s right
}

.swiper-pagination-fraction {
	color: var(--swiper-pagination-fraction-color, inherit)
}

.swiper-pagination-progressbar {
	background: var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, .25));
	position: absolute
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
	background: var(--swiper-pagination-color, var(--swiper-theme-color));
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	transform: scale(0);
	transform-origin: left top
}

.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
	transform-origin: right top
}

.swiper-horizontal>.swiper-pagination-progressbar,
.swiper-pagination-progressbar.swiper-pagination-horizontal,
.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite {
	width: 100%;
	height: var(--swiper-pagination-progressbar-size, 4px);
	left: 0;
	top: 0
}

.swiper-vertical>.swiper-pagination-progressbar,
.swiper-pagination-progressbar.swiper-pagination-vertical,
.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite {
	width: var(--swiper-pagination-progressbar-size, 4px);
	height: 100%;
	left: 0;
	top: 0
}

.swiper-pagination-lock {
	display: none
}

.submenu {
    display: none; /* Hide submenu by default */
    position: absolute;
    left: 0;
    right: 0; /* Align the dropdown's right edge with the menu item's right edge */
    background-color: #fff; /* Submenu background */
    box-shadow: 0 8px 16px rgba(0,0,0,0.1); /* Optional: Adds a shadow to the dropdown */
    z-index: 1000; /* Ensure dropdown is above other content */
    min-width: 680px; /* Set a minimum width for the dropdown on larger screens */
    border-radius: 4px; /* Optional: for rounded corners */
    padding: 15px; /* Add some padding inside the dropdown */
}

/* Adjust for mobile screens */
@media (max-width: 767px) { /* Adjust this breakpoint as needed */
    .submenu {
        min-width: auto; /* On smaller screens, allow the width to adjust automatically */
        width: 100%; /* Take up the full width of the parent container */
    }
}



/* Mobile styles */
@media (max-width: 768px) { /* Adjust this breakpoint as needed */
    .submenu {
        flex-direction: column;
    }
    #hero .hero__text-button {
    display:none;
    }
    .submenu-feature {
        order: 2; /* Ensure the feature section comes after the links */
        width: 100%; /* Take full width on mobile */
    }

    .submenu-links {
        width: 100%; /* Take full width on mobile */
        margin-bottom: 20px; /* Add some space between the links and feature sections */
    }

    .navbar_menu.show .dropdown .submenu {
        max-height: none; /* Ensure there's enough space for the expanded submenu */
    }
}