@font-face {
  font-family: 'icons-sm';
  src:  url('fonts/icons-sm.eot?ms3c7d');
  src:  url('fonts/icons-sm.eot?ms3c7d#iefix') format('embedded-opentype'),
    url('fonts/icons-sm.ttf?ms3c7d') format('truetype'),
    url('fonts/icons-sm.woff?ms3c7d') format('woff'),
    url('fonts/icons-sm.svg?ms3c7d#icons-sm') format('svg');
  font-weight: normal;
  font-style: normal;
} 
[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icons-sm' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

 * {
            font-family: 'Poppins', sans-serif;
        }

        :root {
            --header-bg: #fff;
            --menu-bg: #231e29;
            --menu-border: #231f29;
            --accent-gradient: linear-gradient(45deg, #00d4aa, #00b8d4);
            --text-muted: #b8bcc8;
        }

        .navbar-custom {
            background-color: var(--header-bg) !important;
            padding: 1rem 0;
            min-height: 80px;
        }

        .navbar-brand {
            font-size: 1.5rem;
            font-weight: 600;
            color: white !important;
            display: flex;
            align-items: center;
            text-decoration: none;
            transition: transform 0.3s ease;
        }

        .navbar-brand:hover {
            transform: scale(1.05);
            color: white !important;
        }

        .logo-icon {
            
        }

        /* Center menu container with custom background */
        .menu-container {
            background-color: var(--menu-bg);
            border: 1px solid var(--menu-border);
            border-radius: 10px;
            padding: 0.5rem 1rem;
            display: flex;
            align-items: center;
        }

        .navbar-nav .nav-link {
            color: var(--text-muted) !important;
            font-weight: 500;
            padding: 0.75rem 1.25rem !important;
            border-radius: 6px;
            transition: all 0.3s ease;
            margin: 0 0.25rem;
            font-size: 0.95rem;
        }

        .navbar-nav .nav-link:hover {
            color: white !important;
            background: rgba(255, 255, 255, 0.1);
            transform: translateY(-1px);
        }

        .navbar-nav .nav-link.active {
            color: #00d4aa !important;
            
        }

        .btn-trial {
            background: var(--accent-gradient);
            border: none;
            color: white;
            font-weight: 600;
            padding: 0.75rem 1.5rem;
            border-radius: 8px;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(0, 212, 170, 0.3);
            text-decoration: none;
            display: inline-block;
            font-size: 0.95rem;
        }

        .btn-trial:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 25px rgba(0, 212, 170, 0.4);
            background: linear-gradient(45deg, #00e6b8, #00c7e6);
            color: white;
        }

        .navbar-toggler {
            border: 1px solid rgba(255, 255, 255, 0.2);
            padding: 0.5rem 0.75rem;
            border-radius: 6px;
        }

        .navbar-toggler:focus {
            box-shadow: 0 0 0 0.2rem rgba(0, 212, 170, 0.25);
        }

        .navbar-toggler-icon {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
        }
		
		/* products section */

		.products-wrapper {
			padding-top: 100px;
			padding-bottom: 100px;
			background: linear-gradient(180deg, #69dede, #5299ce);
			color: #333;
		}

		.products-wrapper .section-label {
			color: #03b2ac;
			text-transform: uppercase;
			font-size: 13px;
			letter-spacing: 6px;
			margin-bottom: 41px;
		}
		
		.products-wrapper .col-md-12 h2 + p {
			max-width: 946px;
			margin: 0 auto;
			margin-top: 20px;
		}
		
		[data-aos].aos-animate {
		  opacity: 1;
		  transform: none;
		}

		[data-aos].aos-animate.animate__animated {
		  animation-duration: 1.5s; /* control speed */
		}


				
		@keyframes slideRotate {
		  0% {
			opacity: 0;
			transform: translateX(-100px) rotate(-20deg);
		  }
		  100% {
			opacity: 1;
			transform: translateX(0) rotate(0);
		  }
		}

		[data-aos="custom-slide-rotate"] {
		  opacity: 0;
		  transform: translateX(-100px) rotate(-20deg);
		  transition: all 1s ease;
		}

		[data-aos="custom-slide-rotate"].aos-animate {
		  opacity: 1;
		  transform: translateX(0) rotate(0);
		  animation: slideRotate 1s ease forwards;
		}
		.card.green-card {
			background: linear-gradient(180deg, #03b2ac, #122524);
		}
		.card.white-card {
			background: #fff;
		}
		.card.blue-card {
			background: linear-gradient(180deg, #076493, #112732);
		}
		.products-wrapper .card {
			border-radius:10px;
			margin-top:25px;
			overflow:hidden;
			min-height: 340px;
		}
		.products-wrapper .card .card-body {
			display:flex;
			flex-direction:column;
			align-items:center;
			justify-content:center;
		}
		.btn-solmarine {
			background: transparent;
			border: 2px solid #01d9d2;
			text-transform: uppercase;
			font-family: 'Poppins';
			font-size: 14px;
			font-weight: 500;
			border-radius: 11px;
			line-height: 34px;
			padding-left: 25px;
			padding-right: 25px;
			transition: all .2s linear;
			-o-transition: all .2s linear;
			-moz-transition: all .2s linear;
			-webkit-transition: all .2s linear;
			color: #000;
		}
		.btn-solmarine:hover{
			background: linear-gradient(45deg, #00e6b8, #00c7e6);
			border: 2px solid #01d9d2;
			    box-shadow: 0 6px 25px rgba(0, 212, 170, 0.4);
		}
		.products-wrapper .card .card-body p {
			max-width: 320px;
			text-align: center;
			font-size: 14px;
		}
		@keyframes slideRotate3D {
		  0% {
			opacity: 0;
			transform: translateX(-100px) rotateY(-90deg);
			transform-origin: left center; /* pivot point */
		  }
		  100% {
			opacity: 1;
			transform: translateX(0) rotateY(0deg);
		  }
		}

		[data-aos="custom-slide-rotate-3d"] {
		  opacity: 0;
		  transform: translateX(-100px) rotateY(-90deg);
		  transform-origin: left center;
		  transition: all 1s ease;
		}

		[data-aos="custom-slide-rotate-3d"].aos-animate {
		  opacity: 1;
		  transform: translateX(0) rotateY(0deg);
		  animation: slideRotate3D 1s ease forwards;
		}
		
		@keyframes flip3d {
		  0% {
			transform: perspective(800px) rotateY(90deg);
			opacity: 0;
		  }
		  60% {
			transform: perspective(800px) rotateY(-15deg);
			opacity: 1;
		  }
		  100% {
			transform: perspective(800px) rotateY(0deg);
			opacity: 1;
		  }
		}

		/* Initial state for the element */
		[data-aos="flip-3d"] {
		  opacity: 0;
		  transform: perspective(800px) rotateY(90deg);
		  transition: transform 2s ease, opacity 2s ease;
		}

		/* When AOS triggers */
		[data-aos="flip-3d"].aos-animate {
		  animation: flip3d 2s ease forwards;
		}
		
		
		
		a.more {
			color: #333;
			text-decoration: none;
			font-size: 14px;
			align-items: center;
			display: flex;
			position: absolute;
			right: 10px;
			top: -29px;
			transition: all .2s linear;
			-o-transition: all .2s linear;
			-moz-transition: all .2s linear;
			-webkit-transition: all .2s linear;
		}

		a.more i {
			display: inline-flex;
			width: 21px;
			height: 21px;
			background: #1973d1;
			justify-content: center;
			align-items: center;
			border-radius: 21px;
			font-size: 14px;
			margin-left: 5px;
			line-height: 1px;
		}
		.products-wrapper h2 {
			text-align: center;
			font-size:19px;
		}
		.products-wrapper .col-md-4 h2 {
			text-align: center;
			font-size:19px;
		}
		
		.products-wrapper .card:hover a.more{
			top:10px;
		}
		a.more i {
			color: #fff;
		}
				
		.right-menu-items {
			display: flex;
			align-items: center;
		}

		.right-menu-items a:first-child{
			color:#333;
			margin-right:20px;
		}
		.swiper-slide.slide-01 {
			/*background: url(../images/istockphoto-2175866318-1024x1024.jpg) no-repeat;*/
			background-size:cover;
		}
		.slider-cntnt-box {
			background:rgba(0,0,0,0.7);
		}
		.slider-cntnt-box {
			padding: 28px;
			border-radius: 15px;
			display: flex;
			flex-direction: column;
			text-align: left;
			max-width: 475px;
		}

		.slider-cntnt-box h1 {
			/*font-size: 27px !important;*/
			font-size: 19px !important;
			text-align: left;
			margin-bottom: 16px;
		}
		.section-label {
			color: #03b2ac;
			text-transform: uppercase;
			font-size: 15px;
			letter-spacing: 5px;
			margin-bottom: 18px;
		}
		img.slide-pic {
			position: absolute !important;
			height:100%;
			width: 100%;
			object-fit: cover;
			object-position: center;
		}
		.logo-icon img {
			max-width: 167px;
		}
		
		
		.hero-banner {
			height: 810px;
		}
		
		.swiper-slide.swiper-slide-active .slide-pic-wrpr{
			position: absolute !important;
			left: 0px;
			right: 0px;
			top: 0;
			bottom: 0;
			border-radius: 0px;
			overflow: hidden;
			background: #2a8196;

		}
		/* Base state (hidden) */
			.dropdown-menu {
			  opacity: 0;
			  transform: translateY(-10px);
			  transition: opacity 0.35s ease, transform 0.35s ease;
			  display: block;           /* prevent Bootstrap from forcing display:none */
			  visibility: hidden;       /* keep it out of view */
			}

			/* When dropdown is open */
			.dropdown-menu.show {
			    opacity: 1;
				transform: translateY(0);
				visibility: visible;
				background: var(--accent-gradient);
				border: none;
				padding: 10px;
			}
		.dropdown-item:focus, .dropdown-item:hover {
			border-radius:3px;
		}
		
		
		
		.contact-link {
		  position: relative;
		  display: inline-block;
		  color: #0d6efd;          /* adjust to your brand color */
		  text-decoration: none;
		  transition: color 0.3s ease;
		}

		/* underline (hidden by default) */
		.contact-link::after {
		  content: '';
		  position: absolute;
		  left: 0;
		  bottom: 0;
		  width: 0;
		  height: 2px;
		  background: currentColor;
		  transition: width 0.3s ease;
		}

		/* hover state */
		.contact-link:hover {
		  color: #0056b3;          /* optional darker hover color */
		}

		.contact-link:hover::after {
		  width: 100%;             /* animate underline */
		}
		
		.swiper-container.hero-banner {
			margin-bottom: 0px;
		}
		.right-menu-items .dropdown-menu a {
			font-size: 14px;
		}
		.body-column {
			display: flex;
		}

		.app-cntnt-wrpr {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			padding-left: 20px;
		}

		.app-cntnt-wrpr p {
			text-align: left !important;
		}
		.card.white-card.small-card {
			min-height: 110px;
		}
		
		
		
		

		
		
		
		
				

		
        /* Demo content */
        .demo-content {
            padding: 6rem 0 4rem;
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            min-height: 100vh;
        }

        .demo-content h1 {
            color: var(--header-bg);
            margin-bottom: 1.5rem;
            font-weight: 700;
        }

        .demo-content p {
            color: #6c757d;
            font-size: 1.1rem;
            line-height: 1.6;
        }

        .feature-card {
            background: white;
            border-radius: 12px;
            padding: 2rem;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
            margin-bottom: 1.5rem;
        }

        .feature-card:hover {
            transform: translateY(-5px);
        }

        .feature-icon {
            width: 50px;
            height: 50px;
            background: var(--accent-gradient);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            margin-bottom: 1rem;
        }
		
		
		
		
		
		
		
		
		/* Hero Slider Section */
		
		
		.swiper-slide .slideranim2{
			position: relative;
			transition:all 900ms ease;
			-moz-transition:all 900ms ease;
			-webkit-transition:all 900ms ease;
			-ms-transition:all 900ms ease;
			-o-transition:all 900ms ease;
			transition: 1.3s cubic-bezier(0.5, 0.5, 0, 1);
			clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
		}

		.swiper-slide-active .slideranim2{
			-webkit-transition-delay: 1100ms;
			-moz-transition-delay: 1100ms;
			-ms-transition-delay: 1100ms;
			-o-transition-delay: 1100ms;
			transition-delay: 1100ms;
			clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
		}
		
		
		.swiper-slide .slideranim,
		.swiper-content .slideranim{
			position: relative;
			transition:all 900ms ease;
			-moz-transition:all 900ms ease;
			-webkit-transition:all 900ms ease;
			-ms-transition:all 900ms ease;
			-o-transition:all 900ms ease;
			display: inline-block;
			transition: 1.3s cubic-bezier(0.5, 0.5, 0, 1);
			clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
			background-color: rgba(var(--main-color-rgb), 0.10);
		}
		
		.swiper-slide-active .slideranim{
			-webkit-transition-delay: 500ms;
			-moz-transition-delay: 500ms;
			-ms-transition-delay: 500ms;
			-o-transition-delay: 500ms;
			transition-delay: 500ms;
			clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
		}
		
		
		.my-box {
		  position: relative;
		  display: inline-block;
		  background-color: rgba(var(--main-color-rgb), 0.10);

		  /* initial state: hidden (clipped at top) */
		  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);

		  transition: clip-path 1.3s cubic-bezier(0.5, 0.5, 0, 1);
		}

		/* when you add a class or hover */
		.my-box:hover {
		  /* final state: fully visible */
		  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
		}
		
		
		@keyframes revealTopToBottom {
		  from {
			clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
		  }
		  to {
			clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
		  }
		}

		.swiper-slide.swiper-slide-active .my-box2 {
		  animation: revealTopToBottom 1.3s cubic-bezier(0.5,0.5,0,1) forwards;

		}
		
		
		
		
		img.tab-pic {
			position: absolute !important;
			right: 0;
			top: 0;
		}

		img.mobile-pic {
			position: absolute !important;
			bottom: 0;
			left: 30px;
		}
		.banner-content {
			padding: 90px;
			position:relative;
			    display: inline-flex;
		}

		.banner-content h1 {
			font-size: 50px;
			font-weight: 600;
			color: #fff;
		}

		.banner-content h1 span {
			color: #03b2ac;
			display: flex;
			font-size: 15px;
			font-weight: 400;
		}
		
		
		.banner-content  p {
			font-size: 15px;
			color: #fff;
		}
		.banner-content  p + p{
			font-size: 15px;
			color: #03b2ac;
		}
		
        .hero-slider-section {
            background-color: var(--header-bg);
            padding-top: 80px; /* Account for fixed navbar */
            overflow: hidden;
        }

        .content-column {
            padding: 4rem 3rem;
        }

        .slider-column {
            padding: 2rem;
        }

        .slider-content {
            position: relative;
            height: 100%;
        }

        .slide-content {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            opacity: 0;
            transform: translateY(50px);
            transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            pointer-events: none;
        }

        .slide-content.active {
            opacity: 1;
            transform: translateY(0);
            pointer-events: all;
        }

        .hero-title {
            font-size: 3.5rem;
            font-weight: 700;
            line-height: 1.1;
            margin-bottom: 2rem;
            color: white;
        }

        .title-line {
            display: block;
            transform: translateY(30px);
            opacity: 0;
            animation: slideInUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
        }

        .slide-content.active .title-line:nth-child(1) { animation-delay: 0.1s; }
        .slide-content.active .title-line:nth-child(2) { animation-delay: 0.2s; }
        .slide-content.active .title-line:nth-child(3) { animation-delay: 0.3s; }
        .slide-content.active .title-line:nth-child(4) { animation-delay: 0.4s; }
        .slide-content.active .title-line:nth-child(5) { animation-delay: 0.5s; }
        .slide-content.active .title-line:nth-child(6) { animation-delay: 0.6s; }
        .slide-content.active .title-line:nth-child(7) { animation-delay: 0.7s; }

        .text-accent {
            background: var(--accent-gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .hero-description {
            font-size: 1.2rem;
            color: var(--text-muted);
            line-height: 1.6;
            margin-bottom: 2rem;
            transform: translateY(30px);
            opacity: 0;
        }

        .slide-content.active .hero-description {
            animation: slideInUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.8s forwards;
        }

        .hero-cta {
            transform: translateY(30px);
            opacity: 0;
        }

        .slide-content.active .hero-cta {
            animation: slideInUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1s forwards;
        }

        .trial-text {
            color: #00d4aa;
            font-weight: 500;
            font-size: 1rem;
        }

        @keyframes slideInUp {
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        /* Swiper Styling */
        .hero-swiper {
            height: 600px;
            border-radius: 20px;
            overflow: hidden;
        }

        .slide-image-container {
            position: relative;
            height: 100%;
            overflow: hidden;
        }

        .slide-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.8s ease;
        }

        .swiper-slide-active .slide-image {
            transform: scale(1.05);
        }

        .analytics-overlay {
            position: absolute;
            top: 20px;
            right: 20px;
            z-index: 10;
        }

        .analytics-card {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 12px;
            padding: 1.5rem;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            min-width: 200px;
            animation: fadeInScale 0.8s ease forwards;
            transform: scale(0.8);
            opacity: 0;
        }

        .swiper-slide-active .analytics-card {
            animation: fadeInScale 0.8s ease 0.5s forwards;
        }

        @keyframes fadeInScale {
            to {
                transform: scale(1);
                opacity: 1;
            }
        }

        .analytics-card h6 {
            color: var(--header-bg);
            font-weight: 600;
            margin-bottom: 1rem;
            font-size: 0.9rem;
        }

        .chart-placeholder {
            position: relative;
            height: 100px;
        }

        .chart-line {
            position: absolute;
            top: 20px;
            left: 0;
            right: 0;
            height: 2px;
            background: var(--accent-gradient);
            border-radius: 1px;
        }

        .chart-bars {
            display: flex;
            align-items: end;
            gap: 8px;
            height: 80px;
            margin-top: 20px;
        }

        .bar {
            flex: 1;
            background: var(--accent-gradient);
            border-radius: 2px 2px 0 0;
            animation: growBar 0.8s ease forwards;
            transform: scaleY(0);
            transform-origin: bottom;
        }

        .swiper-slide-active .bar:nth-child(1) { animation-delay: 0.2s; }
        .swiper-slide-active .bar:nth-child(2) { animation-delay: 0.3s; }
        .swiper-slide-active .bar:nth-child(3) { animation-delay: 0.4s; }
        .swiper-slide-active .bar:nth-child(4) { animation-delay: 0.5s; }
        .swiper-slide-active .bar:nth-child(5) { animation-delay: 0.6s; }

        @keyframes growBar {
            to {
                transform: scaleY(1);
            }
        }

        .performance-metrics {
            display: flex;
            gap: 1rem;
        }

        .metric {
            text-align: center;
            flex: 1;
        }

        .metric-circle {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: conic-gradient(from 0deg, #00d4aa 0deg, #00d4aa calc(var(--progress) * 3.6deg), #e9ecef calc(var(--progress) * 3.6deg), #e9ecef 360deg);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            color: var(--header-bg);
            font-size: 0.8rem;
            margin: 0 auto 0.5rem;
        }

        .metric span {
            font-size: 0.7rem;
            color: #666;
        }

        .prep-checklist {
            space-y: 0.5rem;
        }

        .checklist-item {
            padding: 0.5rem 0;
            font-size: 0.8rem;
            border-bottom: 1px solid #f0f0f0;
        }

        .checklist-item.completed {
            color: #28a745;
        }

        .checklist-item.active {
            color: #00d4aa;
            font-weight: 600;
        }

        .checklist-item:last-child {
            border-bottom: none;
        }

        /* Swiper Navigation */
        .swiper-button-next,
        .swiper-button-prev {
            color: white;
            background: rgba(0, 212, 170, 0.8);
            width: 50px;
            height: 50px;
            border-radius: 50%;
            margin-top: -25px;
        }

        .swiper-button-next:after,
        .swiper-button-prev:after {
            font-size: 18px;
        }

        .swiper-button-next:hover,
        .swiper-button-prev:hover {
            background: rgba(0, 212, 170, 1);
        }

        .swiper-pagination-bullet {
            background: rgba(255, 255, 255, 0.5);
            width: 12px;
            height: 12px;
        }

        .swiper-pagination-bullet-active {
            background: #00d4aa;
        }
		

		
		.card.white-card:hover {
			
			box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
			transform: translate(0px, -5px) !important;
		}
		
		
		
		
		
		
		
		
		/*why choose section animation*/
		
			
			 .onboarding-container {
					max-width: 650px;
					margin: 50px auto;
					border: 3px solid #20b2aa;
					border-radius: 15px;
					    padding: 37px;
					/*overflow: hidden;*/
					background: #f8f9fa;
					box-shadow: 0 4px 20px rgba(0,0,0,0.1);
				}

				.feature-section {
					padding: 20px 25px;
					margin: 0;
					transition: all 0.8s ease-in-out;
					position: relative;
					border-radius: 10px;
				}

				.feature-section.active {
					    background: linear-gradient(135deg, #20b2aa, #17a2b8);
						color: white;
						border-left: 4px solid #ffffff;
						transform: scale(1.02);
						
						margin-left: -90px;
						padding-left: 100px;
						border-radius: 10px;
				}

				.feature-section:not(.active) {
					background: #f8f9fa;
					color: #2c3e50;
				}

				.step-number {
					background: white;
					width: 55px;
					height: 55px;
					border-radius: 50%;
					display: flex				;
					align-items: center;
					justify-content: center;
					font-weight: bold;
					font-size: 18px;
					margin-bottom: 15px;
					transition: all 0.5s ease;
					position: relative;
					position: absolute;
					visibility: hidden;
					display:none;
				}

				.feature-section.active .step-number {
					background: rgba(255, 255, 255, 0.95);
					color: #20b2aa;
					transform: scale(1.1);
					box-shadow: 0 0px 0px 4px rgb(255 255 255 / 20%);
					visibility: visible;
					display:flex;
					left: 20px;
					top: 15px;
					font-weight: 500;
				}

				.feature-section:not(.active) .step-number {
					background: #e9ecef;
					color: #6c757d;
				}

				.feature-title {
					font-size: 16px;
					font-weight: 600;
					margin-bottom: 0px;
					transition: all 0.5s ease;
				}

				.feature-description {
					line-height: 1.6;
					font-size: 14px;
					transition: all 0.5s ease;
					opacity: 0.95;
				}

				.feature-section.active .feature-description {
					opacity: 1;
				}

				.feature-section:not(.active) .feature-description {
					color: #5a6c7d;
				}

				.progress-indicator {
					position: absolute;
					bottom: 0;
					left: 0;
					height: 4px;
					background: linear-gradient(90deg, #20b2aa, #17a2b8);
					transition: width 2s linear;
					width: 0;
					border-radius: 0 0 0 12px;
				}

				.feature-section.active .progress-indicator {
					width: 100%;
				}

				/* Connecting line between sections */
				.feature-section:not(:last-child)::after {
					content: '';
					position: absolute;
					bottom: 0;
					left: 45px;
					width: 2px;
					height: 20px;
					background: #dee2e6;
					transition: background 0.5s ease;
					display:none;
				}

				.feature-section.active:not(:last-child)::after {
					background: linear-gradient(180deg, #20b2aa, #dee2e6);
				}

				@keyframes pulse {
					0% { transform: scale(1.1); }
					50% { transform: scale(1.2); }
					100% { transform: scale(1.1); }
				}

				.feature-section.active .step-number {
					animation: pulse 0.6s ease-in-out;
				}

				/* Smooth entrance animation */
				.feature-section {
					opacity: 0;
					transform: translateX(-20px);
					animation: slideIn 0.8s ease-out forwards;
				}

				.feature-section:nth-child(2) { animation-delay: 0.1s; }
				.feature-section:nth-child(3) { animation-delay: 0.2s; }
				.feature-section:nth-child(4) { animation-delay: 0.3s; }
				.feature-section:nth-child(5) { animation-delay: 0.4s; }

				@keyframes slideIn {
					to {
						opacity: 1;
						transform: translateX(0);
					}
				}
		
		/*why choose section animation end*/
		
		
		.green {
			color: #05a09a;
		}
		
		.why-choose-solmarines p {
			font-size: 15px;
		}
		.why-choose-solmarines {
			background: url(../images/faded-arrow.png) no-repeat center;
		}
		
		.onboarding-container {
			position:relative;
		}
		.onboarding-container:before {
			content: "";
			width: 250px;
			height: 250px;
			background: linear-gradient(45deg, #141414, #05a09a);
			position: absolute;
			display: flex;
			right: -35px;
			bottom: -35px;
			border-radius: 31px;
			z-index: -1;
		}
		
		
        .how-it-works-section {
            background: linear-gradient(180deg, #076493 0%, #112732 100%);
            padding: 80px 0;
            color: white;
            display: flex;
            align-items: center;
        }

        .section-subtitle {
            font-size: 14px;
            font-weight: 500;
            letter-spacing: 2px;
            text-transform: uppercase;
            margin-bottom: 20px;
            opacity: 0.9;
        }

        .section-title {
            font-size: 35px;
			font-weight: 600;
			margin-bottom: 32px;
			line-height: 1.2;
        }

        .step-card {
            background: white;
            border-radius: 16px;
            padding: 24px 20px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
            border: none;
            position: relative;
            overflow: hidden;
        }

        .step-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
        }

        .step-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, #2563eb, #1e40af);
			display:none;
        }

        .step-icon {
            width: 60px;
            height: 60px;
           
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 25px;
            position: relative;
        }
		.step-icon img {
			max-width: 100%;
		}

        .step-icon svg {
            width: 32px;
            height: 32px;
            color: #2563eb;
        }

        .step-title {
            font-size: 16px;
			font-weight: 600;
			color: #1e293b;
			margin-bottom: 3px;
			line-height: 1.3;
        }

        .step-description {
			color: #000;
			font-size: 15px;
        }

        .contact-btn {
            background: transparent;
            border: 2px solid rgba(255, 255, 255, 0.3);
            color: white;
            padding: 15px 40px;
            border-radius: 8px;
            font-weight: 600;
            font-size: 1rem;
            letter-spacing: 0.5px;
            text-transform: uppercase;
            transition: all 0.3s ease;
            margin-top: 50px;
        }

        .contact-btn:hover {
            background: rgba(255, 255, 255, 0.1);
            border-color: rgba(255, 255, 255, 0.5);
            color: white;
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
        }

 

        /* Animation for cards */
        .step-card {
            opacity: 0;
            transform: translateY(30px);
            animation: fadeInUp 0.8s ease forwards;
        }

        .step-card:nth-child(1) { animation-delay: 0.2s; }
        .step-card:nth-child(2) { animation-delay: 0.4s; }
        .step-card:nth-child(3) { animation-delay: 0.6s; }

        @keyframes fadeInUp {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
		
		.step-card {
			display: flex;
		}

		.step-card .step-icon {
			min-width: 55px;
			margin-right: 20px;
		}
		
		
		
		
		
		
		
		.testimonial-section {
            display: flex;
            align-items: center;
        }

        .testimonial-section .swiper {
            width: 100%;
            padding: 20px 0 60px 0;
        }

        .testimonial-section .swiper-slide {
            height: auto;
            display: flex;
            justify-content: center;
        }

        .testimonial-card {
            background: #05a09a;
            border-radius: 5px;
            padding: 40px 35px;
            color: #000;
            max-width: 400px;
            width: 100%;
            margin: 0 3px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            transition: all 0.5s ease;
            position: relative;
            overflow: hidden;
            height: 420px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .testimonial-card::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -50%;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
            transition: all 0.5s ease;
        }

        .swiper-slide-active .testimonial-card {
            background: #076493;
            color: white;
            /*transform: scale(1.05);*/
            box-shadow: 0 20px 50px rgba(7, 100, 147, 0.3);
        }

        .testimonial-text {
            font-size: 14px;
            line-height: 1.7;
            margin-bottom: 30px;
            font-weight: 400;
            flex-grow: 1;
        }

        .testimonial-author {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .author-image {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid rgba(255, 255, 255, 0.3);
            transition: all 0.3s ease;
        }

        .swiper-slide-active .author-image {
            border-color: rgba(255, 255, 255, 0.6);
        }

        .author-info h4 {
            font-size: 15px;
            font-weight: 600;
            margin: 0;
            margin-bottom: 5px;
        }

        .author-info p {
            font-size: 13px;
            opacity: 0.8;
            margin: 0;
            font-weight: 400;
        }

        .swiper-slide-active .author-info p {
            opacity: 0.9;
        }

        /* Custom Swiper Pagination */
        .testimonial-section .swiper-pagination {
            bottom: 20px;
        }

       .testimonial-section .swiper-pagination-bullet {
            width: 12px;
            height: 12px;
            background: rgba(5, 160, 154, 0.4);
            opacity: 1;
            transition: all 0.3s ease;
        }

        .testimonial-section .swiper-pagination-bullet-active {
            background: #076493;
            transform: scale(1.2);
        }

        /* Navigation arrows */
        .testimonial-section .swiper-button-next,
        .testimonial-section .swiper-button-prev {
            color: #05a09a;
            width: 50px;
            height: 50px;
            background: white;
            border-radius: 50%;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }

        .testimonial-section .swiper-button-next:hover,
        .testimonial-section .swiper-button-prev:hover {
            color: #076493;
            transform: scale(1.1);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        }

       .testimonial-section  .swiper-button-next::after,
       .testimonial-section .swiper-button-prev::after {
            font-size: 20px;
            font-weight: bold;
        }

\
       

        /* Animation for entrance */
        .testimonial-card {
            opacity: 0;
            transform: translateY(30px);
            animation: fadeInUp 0.8s ease forwards;
        }

        @keyframes fadeInUp {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
		
		.testimonial-wrpr {
			background: #d2f5f5;
			padding: 90px 0;
			
		}
		
		.quotes-section {
			padding: 150px 0;
			background: url(../images/green-glow.png) no-repeat #f8f8f8 30% 0;
		}

		.quotes-section .quotes-card.card {
			border: none;
			text-align: center;
			max-width: 395px;
			position:relative;
		}

		.quotes-section .quotes-card.card h3 {
			font-size: 25px;
			line-height: 44px;
		}
		
		.quotes-section .quotes-card.card:before {
			content: "";
			display: flex;
			position: absolute;
			width: 220px;
			height: 220px;
			background: linear-gradient(180deg, #03b2ac, #e4f2f2);
			border-radius: 28px;
			left: -32px;
			top: -29px;
			z-index: 1;
		}


		.quotes-section .quotes-card.card:after {
			content: "";
			display: flex;
			position: absolute;
			width: 220px;
			height: 220px;
			background: linear-gradient(180deg, #eff9f9, #03b2ac);
			border-radius: 28px;
			right: -30px;
			bottom: -30px;
			z-index: 1;
		}
		
		.quotes-section .quotes-card.card .card-body {
			position: relative;
			z-index: 10;
			background: #fff;
			padding: 60px;
			border-radius: 20px !important;
		}
		.quotes-section  p {
			font-size: 15px;
		}
		
		.calltoaction-wrpr {
			background: linear-gradient(180deg, #03b2ac, #122424);
			min-height: 529px;
			position: relative;
			border-radius:10px;
		}
		.calltoaction-wrpr img {
			position: absolute;
			bottom: 0;
			left: 5%;
		}
		.calltoaction-wrpr .row {
			min-height: 529px;
		}
		.container-fluid.calltoaction-cntnr {
			background: #f8f8f8;
			padding: 100px 0;
		}
		
		.calltoaction-wrpr p {
			font-size: 21px;
			max-width: 400px;
		}
			
		
		
		
		
		
		
		
		
		
		 .footer-section {
            background-color: #0f0f0f;
            padding: 60px 0 30px 0;
        }
        
        .company-logo {
            font-size: 2.5rem;
            font-weight: 300;
            color: #fff;
            text-decoration: none;
            margin-bottom: 20px;
            display: inline-block;
        }
        
        .company-logo .sol {
            color: #17a2b8;
        }
        
        .company-name {
            color: #17a2b8;
			font-size: 13px;
			font-weight: 500;
			text-transform: uppercase;
			letter-spacing: 1px;
			margin-bottom: 6px;
        }
        
        .company-address {
            color: #ccc;
            font-size: 0.9rem;
            line-height: 1.6;
            margin-bottom: 0;
        }
        
        .newsletter-section h5 {
            font-size: 1.25rem;
            font-weight: 500;
            margin-bottom: 25px;
        }
        
        .newsletter-form {
            display: flex;
            gap: 15px;
            align-items: center;
        }
        
        .newsletter-input {
            background-color: transparent;
            border: 1px solid #444;
            color: #fff;
            padding: 12px 20px;
            border-radius: 5px;
            font-size: 0.9rem;
            flex: 1;
        }
        
        .newsletter-input::placeholder {
            color: #888;
        }
        
        .newsletter-input:focus {
            outline: none;
            border-color: #17a2b8;
            background-color: transparent;
            color: #fff;
            box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.25);
        }
        
        .subscribe-btn {
            background-color: #17a2b8;
            border: none;
            color: white;
            padding: 12px 30px;
            border-radius: 5px;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            transition: all 0.3s ease;
        }
        
        .subscribe-btn:hover {
            background-color: #138496;
            transform: translateY(-1px);
        }
        
        .footer-links {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        
        .footer-links li {
            margin-bottom: 12px;
        }
        
        .footer-links a {
            color: #ccc;
            text-decoration: none;
            font-size: 13px;
            transition: color 0.3s ease;
        }
        
        .footer-links a:hover {
            color: #17a2b8;
        }
        
        .copyright {
            border-top: 1px solid #333;
            padding-top: 20px;
            margin-top: 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .copyright p {
            margin: 0;
            color: #888;
            font-size: 0.9rem;
        }
        
        .social-links {
            display: flex;
            gap: 15px;
        }
        
        .social-links a {
            color: #17a2b8;
            font-size: 1.5rem;
            transition: color 0.3s ease;
        }
        
        .social-links a:hover {
            color: #fff;
        }
		
		.newsletter-wrpr {
			padding-top: 78px;
		}

		.newsletter-wrpr h5 {
			color: #fff;
			font-weight: 100;
			font-size: 16px;
		}

		.newsletter-form {
			background: #091a1d;
			padding: 5px;
			border-radius: 5px;
		}

		.newsletter-form input {
			border: none;
		}
		
		.footer-links-wrpr {
			padding-top: 82px;
		}
        
		.slider-anim-tab-pic {
			position: absolute;
			left: -117px;
			z-index: 1;
			bottom: 30px;
			max-width: 210px;
		}
		
		.slider-anim-mob-pic {
			position: absolute;
			z-index: 1;
			bottom: 0;
			left: -27px;
			left: -138px;
			max-width: 352px;
		}






	.product-banner {
            min-height: 350px;
			max-height:350px;
			overflow:hidden;
            display: flex;
            align-items: center;
            padding: 40px 0;
			background: url(../images/istockphoto-1695788491-1024x1024.jpg) no-repeat center;
			background:linear-gradient(90deg, #091f29, #043c58);
			background-size: cover;
			margin-top: 80px;
			position:relative;
        }
        
        .logo-circle {
            width: 120px;
            height: 120px;
            background: rgba(26, 188, 156, 0.1);
            border: 3px solid #1abc9c;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            margin-bottom: 30px;
        }
        
        
        
        
        .brand-text {
            color: #1abc9c;
            font-size: 16px;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-bottom: 20px;
        }
        
       .product-banner  .main-heading {
			color: #ffffff;
			font-size: 30px;
			font-weight: 500;
			line-height: 1.2;
			margin-bottom: 7px;
			z-index: 1;
			position: relative;
        }
        
        .product-banner .description {
            color: rgba(255, 255, 255, 0.85);
			font-size: 14px;
			font-weight: 400;
			line-height: 1.6;
			margin-bottom: 20px;
			max-width: 800px;
			z-index: 1;
			position: relative;
        }
        .product-banner:before {
			position: absolute;
			content: "";
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			background: color(srgb 0 0 0 / 0.4);
		}
        .product-banner .cta-container {
            display: inline-flex;
            align-items: center;
            gap: 20px;
            flex-wrap: wrap;
		    z-index: 1;
			position: relative;	
        }
        
        .product-banner .upload-btn {
            background: #1abc9c;
            color: #ffffff;
            border: none;
            padding: 18px 35px;
            font-size: 16px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            border-radius: 8px;
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-block;
        }
        
        .product-banner .upload-btn:hover {
            background: #16a085;
            color: #ffffff;
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(26, 188, 156, 0.3);
        }
        
        .product-banner .cta-text {
            color: rgba(255, 255, 255, 0.9);
            font-size: 14px;
            font-weight: 400;
			
        }
		.product-banner .section-label {
			color: #00ccc5;
			position: relative;
		}
		.product-logo {
			position: relative;
		}
		
		
		
		
		
		
		
		
		
		.features-section {
            background: #f8f9fa;
            margin-top: 0;
			padding: 90px 0;
			padding-bottom: 0px;
        }
        
        .features-title {
            font-size: 25px;
            font-weight: 600;
            color: #2c3e50;
            position: relative;
            padding-bottom: 15px;
        }
        
        .features-title::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 3px;
            background: #1abc9c;
        }
        
        .feature-card {
            background: linear-gradient(180deg, #5299ce 0%, #66d3db 100%);
            padding: 40px 25px;
            border-radius: 20px;
            transition: all 0.3s ease;
            box-shadow: 0 8px 30px rgba(26, 188, 156, 0.15);
            margin-bottom: 25px;
        }
        
        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 40px rgba(26, 188, 156, 0.25);
        }
        
        .feature-item {
            margin-bottom: 30px;
        }
        
        .feature-item:hover .feature-card {
            transform: translateY(-5px);
        }
        
        .feature-icon {
            width: 80px;
            height: 80px;
            background: transparent;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 25px;
            backdrop-filter: blur(10px);
        }
        
        .feature-title {
            color: #2c3e50;
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 15px;
            line-height: 1.4;
            margin-top: 20px;
        }
		.why-choose-solmarines .feature-title {
			margin-top: 0;
			margin-bottom: 1px;
		}
        
        .feature-description {
            color: #6c757d;
            font-size: 13px;
            font-weight: 400;
            line-height: 1.6;
            margin-bottom: 0;
        }
		
		.ready-to-try-section .container {
			position: relative;
		}
		
		
		
		
		
		
		
		/* Use Case Section Styles */
        .use-case-section {
            background: #f8f9fa;
            padding: 80px 0;
        }
        
        .use-case-card {
            background: linear-gradient(180deg, #076493 0%, #059799 100%);
            border-radius: 25px;
            overflow: hidden;
            box-shadow: 0 20px 60px rgba(26, 188, 156, 0.15);
        }
        
        .image-section {
            position: relative;
            height: 100%;
            min-height: 400px;
        }
        
        .ship-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            min-height: 400px;
			border-radius: 25px;
			position: relative;
			z-index: 1;
        }
        
        .image-credit {
            position: absolute;
            bottom: 15px;
            right: 15px;
            background: rgba(0, 0, 0, 0.6);
            color: white;
            padding: 5px 10px;
            border-radius: 5px;
            font-size: 12px;
        }
        
        .content-section {
            padding: 60px 50px;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        
        .use-case-title {
            color: #ffffff;
            font-size: 25px;
            font-weight: 600;
            margin-bottom: 40px;
            line-height: 1.2;
        }
        
        .use-case-list {
            display: flex;
            flex-direction: column;
            gap: 25px;
        }
        
        .use-case-item {
            display: flex;
            align-items: flex-start;
            gap: 20px;
        }
        
        .check-icon {
            color: #1abc9c;
            flex-shrink: 0;
            width: 38px;
            height: 38px;
            margin-top: 0px;
        }
		.use-case-content {
			display: flex;
			flex-direction: column;
			justify-content: center;
			min-height: 38px;
		}
        
        .use-case-content {
            flex: 1;
        }
        
        .use-case-heading {
            color: #ffffff;
            font-size: 16px;
            font-weight: 500;
            margin-bottom: 5px;
            line-height: 1.4;
        }
        
        .use-case-subtext {
            color: rgba(255, 255, 255, 0.7);
            font-size: 0.9rem;
            font-weight: 400;
            margin: 0;
            font-style: italic;
        }
		.arrow-right {
			position: absolute;
			left: -200px;
			top: 21px;
			z-index: 0;
		}
		
		
		
		
		.real-impact-section {
			background: #076493;
			color: #fff;
			padding: 90px 0; 
			margin-top: 222px; 
			padding-bottom: 150px;
			}

		.real-impact-section h2 {
			font-size: 25px;
			margin-bottom: 30px;
		}

		.real-impact-section p {
			font-size: 20px;
			line-height: 41px;
			max-width: 90%;
			margin: 0 auto;
			margin-bottom: 25px;
		}

		.quotesby {
			font-size: 20px;
		}

		.quotesby div {
			font-size: 14px;
		}
		.quotes1 {
			position: absolute;
			left: 0;
		}

		.quotes2 {
			position: absolute;
			right: 0;
			bottom: 0px;
		}
		
		.realimpact-pic-wrpr {
			width: 376px;
			height: 450px;
			position: absolute;
			top: -149px;
		}

		.realimpact-pic-wrpr img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			border-radius: 17px;
			position: relative;
		}

		.realimpact-pic-wrpr:before {
			content: "";
			position: absolute;
			left: -25px;
			top: -25px;
			background: linear-gradient(178deg, #03b2ac, #fff);
			display: flex		;
			width: 222px;
			height: 303px;
			border-radius: 27px;
			z-index: 0;
		}
		.ready-to-try-section:before {
			content: "";
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			background: url('../images/arrow-right.png') no-repeat center;
			background-size: 16%;
		}
		
		
		
		
		
		 /* Ready to Try Section Styles */
        .ready-to-try-section {
            background: linear-gradient(180deg, #102b39 0%, #091c25);
            padding: 80px 0;
			position:relative;
        }
        
        .ready-title {
            color: #ffffff;
			font-size: 25px;
			font-weight: 500;
			margin-bottom: 50px;
			text-align: center
        }
        
        .cta-buttons {
            display: flex;
            justify-content: center;
            gap: 25px;
            flex-wrap: wrap;
        }
        
        .cta-btn {
            padding: 18px 35px;
            font-size: 16px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            border-radius: 8px;
            text-decoration: none;
            transition: all 0.3s ease;
            border: 2px solid transparent;
            display: inline-block;
            min-width: 200px;
            text-align: center;
        }
        
        
        .product-body {
			background: #f8f9fa;
		}
        
        
        
        
        .btn-tertiary {
            background: transparent;
            color: #1abc9c;
            border-color: #1abc9c;
        }
        
        .btn-tertiary:hover {
            background: #1abc9c;
            color: #ffffff;
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(26, 188, 156, 0.3);
        }
		
		
		
		.product-banner.prep-banner {
			background: linear-gradient(90deg, #091f29, #043c58);
		}
		.product-banner.prep-banner .product-logo {
		    position: absolute;
			top: -51px;
			left: 40px;
			max-width: 308px;
		}
		.product-banner-desc {
			padding-left: 400px;
		}
		.product-banner.prep-banner  .product-banner-desc {
			padding-left: 280px;
		}

		.product-banner.prep-banner {
			min-height: 350px;
			max-height: 350px;
			overflow: hidden;
		}
		
		.product-banner-subtext .col-md-12 {
			padding-left: 496px;
			margin-top: 60px;
		}

		.product-banner-subtext .cta-container {
			display: inline-flex;
			align-items: center;
		}
		.product-banner-subtext .col-md-12 p {
			font-size: 14px;
			line-height: 28px;
		}

		.product-banner-subtext .col-md-12 .cta-container {
			font-size: 14px;
		}
		
		.position-relative{
			position-relative;
		}
		
		
		
		
		.who-is-for-section {
			background: linear-gradient(45deg, #076493, #059799);
			min-height: 500px;
			padding: 80px 0;
			position:relative;
		}

		.who-is-card {
			background: #fff;
			width: 212px;
			height: 212px;
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 0 auto;
		}
		.who-is-for-section .feature-title {
			color: white;
			text-align:center;
		}
		.who-is-for-section .feature-description {
			    color: white;
				text-align: center;
				max-width: 220px;
				margin: 0 auto;
		}
		.who-is-for-section h2 {
			color: #fff;
			font-size: 25px;
			margin-bottom: 48px;
			position: relative;
		}
		.who-is-for-section h2:before {
			content: "";
			width: 55px;
			height: 2px;
			background: #05a09a;
			position: absolute;
			left: 50%;
			margin-left: -27px;
			top: 34px;
		}
		
		.dotsbg {
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			height: 100%;
			width: 100%;
			object-fit: cover;
			opacity: .4;
		}
		.dotsbg + .container{
			position:relative;
		}		
		
		
		.realities-section {
			padding: 125px 0;
			padding-bottom: 25px;	
			background: url(../images/dots-right-with-green-blur-bg.png) center no-repeat;
		}

		.realities-section h2 {
			font-size: 25px;
		}

		.realities-section p {
			font-size: 14px;
			line-height: 24px;
		}
		
		img.realities-pic {
			width: 378px;
			height: 578px;
			object-fit: cover;
			object-position: center;
			border-radius: 230px;
		}
		section.ready-to-try-section  p {
			color: #fff;
		}
		
		.start-in-minutes h2 {
			margin-bottom: 10px !important;
		}
		.pb-arrow {
			position: absolute;
			left: 220px;
			top: -129px;
		}
		.features-section.prep-features {
			padding-bottom: 90px;
		}
		.product-banner.rightship-banner .product-logo {
			    position: absolute;
				top: 14px;
				left: 30px;
		}
		.rightship-banner .product-banner-desc {
			padding-left: 520px;
			padding-top: 60px;
		}
		.product-banner.presence-banner .product-logo {
			top: 0;
		}
		.product-banner-subtext p {
			max-width: 90%;
		}
		
		
		.contact-banner .social-links {
            display: flex;
            gap: 20px;
            justify-content: center;
            margin-top: 30px;
        }
        
        .contact-banner .social-link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 50px;
            height: 50px;
            background: #3498db;
            color: white;
            border-radius: 50%;
            text-decoration: none;
            font-size: 20px;
            transition: transform 0.3s ease, background 0.3s ease;
        }
        
        .contact-banner .social-link:hover {
            transform: translateY(-3px);
            background: #2c3e50;
            color: white;
        }
		.contact-banner p, .contact-banner .social-links {
			position: relative;
		}
		a.social-link .icon-x img {
			max-width: 18px;
			position: relative;
			top: -1px;
		}
		
		a.social-link .icon-instagram img {
			max-width: 25px;
			position: relative;
			top: -1px;
		}

		
		.contact-banner {
			min-height: 413px;
			display: flex;
			align-items: center;
			padding: 0px 0;
			background: url(../images/istockphoto-1695788491-1024x1024.jpg) no-repeat center;
			background-size: cover;
			margin-top: 80px;
			position: relative;
			justify-content: center;
		}
		.calendly-link {
            background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
            color: white;
            padding: 15px 30px;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 600;
            display: inline-block;
            margin-top: 20px;
            transition: transform 0.3s ease;
			position:relative;
        }
        
        .calendly-link:hover {
            transform: translateY(-2px);
            color: white;
        }
		
		.schedule-demo-wrpr {
			position: relative;
		}
		.contact-card.card {
			background: var(--accent-gradient);
			border: none;
			border-radius: 17px;
			min-height: 198px;
			padding: 5px;
		}

		.contact-card.card .card-body {
			padding: 29px;
			color: #fff;
		}

		.contact-card.card .card-body a,
		.contact-card.card .card-body p,
		.contact-card.card .card-body small {
			color:#333 !imporant;
			font-size:13px;
		}
		
		.contact-card.card .card-body {
			background: #fff;
			border-radius: 13px;
			color:#333;
		}
		.contact-card.card h4 {
			font-size: 16px;
			font-weight: 600;
		}
		
		.founder-section img {
			border-radius: 190px;
			width: 200px;
			height: 200px;
		}

		.founder-section {
			background: color(srgb 1 1 1 / 0.68);
			border-radius: 30px;
			padding: 38px;
			font-size: 12px;
		}

		.founder-section .founder-name {
			font-size: 16px;
			margin-top: 13px;
		}	
		.builtfor-mariners h2 {
			text-align: left !important;
			margin-bottom:20px;
			font-size: 24px;
		}
		
		.builtfor-mariners {
			padding-top: 100px;
			padding-bottom: 100px;
			background: linear-gradient(180deg, #69dede, #5299ce);
			color: #333;
		}
		
		.card.sp-card {
			padding: 22px 15px;
			border: none;
			border-radius: 10px;
			margin-top: 28px;
			background: #52dfff;
			box-shadow: 0 0 10px color(srgb 0 0 0 / 0.1);
		}

		.card.sp-card h5 {
			font-size: 15px;
			margin-bottom: 0px;
		}
		
		.why-we-exit {
			background: linear-gradient(360deg, #009be9, #12d6d9);
			min-height: 500px;
			padding: 80px 0;
			position: relative;
			color: #fff;
			text-align: center;
			border-radius: 50px;
			box-shadow: 0 50px 50px color(srgb 0 0 0 / 0.03);
			margin-top:90px;
		}
		
		.we-beleve-section .card {
			border: none;
			padding: 20px;
			min-height: 212px;
			border-radius: 17px;
			    z-index: 10;
		}

		.we-beleve-section .card h5 {
			font-size: 16px;
			line-height: 23px;
			margin-bottom: 10px;
		}
		.we-beleve-section .card .img-wrpr {
			
			margin: 0 auto;
			margin-bottom: 10px;
			margin-top: 10px;
			background: #50d4da;
			padding: 17px;
			border-radius: 40px;
		}
		
		.we-beleve-section .card img {
			max-width: 38px;
			
		}
		.we-beleve-section .card-wrpr {
			position:relative;
		}
		.we-beleve-section 	.card-wrpr:after {
			content: "";
			display: flex		;
			width: 140px;
			height: 140px;
			background: linear-gradient(180deg, #0b2231, transparent);
			position: absolute;
			left: -17px;
			top: -17px;
			z-index: 1;
			border-radius: 26px;
		}
		.card-wrpr.last-card-wrpr:after {
			top: unset;
			left: unset;
			right: -17px;
			bottom: -17px;
			background: linear-gradient(0deg, #0b2231, transparent);
		}
		
		
		
		.edge-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 30px;
            margin: 40px 0;
        }
        
        .edge-item {
            background: white;
            border-radius: 20px;
            padding: 30px;
            text-align: center;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            border: 2px solid transparent;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        
        .edge-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(30, 60, 114, 0.1), transparent);
            transition: left 0.5s;
        }
        
        .edge-item:hover::before {
            left: 100%;
        }
        
        .edge-item:hover {
            border-color: #1e3c72;
            transform: translateY(-10px);
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
        }
        
        .edge-icon {
            font-size: 3rem;
            color: #1e3c72;
            margin-bottom: 20px;
        }
        
        .edge-title {
                font-size: 18px;
				font-weight: 600;
				color: #1e3c72;
				margin-bottom: 6px;
				line-height: 1.3;
        }
		.our-edge-wrpr p{
			font-size:15px;
		}
		
		.our-edge-wrpr {
			background: linear-gradient(180deg, #076493 0%, #112732 100%);
			padding: 80px 0;
			color: #000;
			display: flex;
			align-items: center;
			margin-top: 90px;
		}
		.edge-item .step-icon {
			width: 100%;
			margin-top:20px;
			margin-bottom:40px;
		}

		.edge-item .step-icon img {
			max-width: 100px;
			
		}
		
		.serve-section {
            margin: 50px 0;
			background: linear-gradient(360deg, #009be9, #12d6d9);
			min-height: 500px;
			padding: 80px;
			position: relative;
			color: #000;
			text-align: center;
			border-radius: 50px;
			box-shadow: 0 50px 50px color(srgb 0 0 0 / 0.03);
			margin-top: 90px;
        }
        
        .serve-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-top: 30px;
        }
        
        .serve-item {
            background: rgba(255, 255, 255, 0.2);
            border-radius: 15px;
            padding: 20px;
            text-align: center;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.3);
            transition: transform 0.3s ease;
        }
        
        .serve-item:hover {
            transform: scale(1.05);
            background: rgba(255, 255, 255, 0.83);
        }
        
        .serve-item i {
            font-size: 2rem;
            margin-bottom: 10px;
        }
		.serve-item h5 {
			font-size: 15px;
			font-weight: 500;
			margin-top: 10px;
			margin-bottom: 10px;
		}
		
		.cta-section {
            background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
            color: white;
            padding: 60px 0;
            text-align: center;
            margin-top: 0px;
        }
        
        .cta-button {
            background: var(--accent-gradient);
            color: white;
            padding: 18px 40px;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 600;
            font-size: 1.1rem;
            display: inline-block;
            margin-top: 20px;
            transition: all 0.3s ease;
            box-shadow: 0 10px 30px rgb(0 188 212 / 37%);
        }
        
        .cta-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 30px rgb(0 188 212 / 57%);
            color: white;
        }
		
		a:not([href]){
			color:#3ba0b7 !important;
		}
				
		
		.swiper-content {
			width: 100%;
			position: absolute;
			left: 0;
			right: 0;
			z-index: 1;
		}
		
	.products-wrapper .card-body img {
		max-width: 99px;
	}
	img.contactpic {
		    max-width: 100%;
			object-fit: cover;
			object-position: 0 -70px;
			height: 350px;
			width: 100%;
	}	
	img{
		max-width:100%;
	}
	.cta-container {
		padding: 10px;
		border: 2px solid #619cce;
		border-radius: 10px;
	}	
	.product-banner.rightship-banner.vir-banner .product-logo {
		top: -52px;
		max-width: 302px;
	}	
	.product-banner.prep-banner.presence-banner .product-logo {
		top: -121px;
	}	
		
	.aboutsect-pic {
		min-height: 290px;
		object-fit: cover;
		border-radius:30px;
	}
	.builtfor-mariners p {
		font-size: 14px;
	}
	
	.navbar-nav-wrapper.center-navbar .menu-container {
		background: transparent;
		border: none;
	}

	.navbar-nav-wrapper.center-navbar .menu-container a {
		color: #000 !important;
		padding-left: 0px !important;
		padding-right: 0px !important;
		margin: 0 20px;
	}
		
	.navbar-nav-wrapper.center-navbar .menu-container a:after {
		  content: '';
		  position: absolute;
		  left: 0;
		  bottom: 0;
		  width: 0;
		  height: 2px;
		  background: currentColor;
		  transition: width 0.3s ease;
		}

		/* hover state */
		.navbar-nav-wrapper.center-navbar .menu-container a:hover {
		  color: #0056b3 !important;           /* optional darker hover color */
		}
		.navbar-nav-wrapper.center-navbar .menu-container a:hover::after {
			width: 100%;
		}
		.feature-section.active .feature-description {
				color: #fff;
		}
	
		

		.hero-banner + .swiper-content.phoneonly {
			display: none;
		}
		
		.footer-links a.active {
			position: relative;
		}

		.footer-links a.active:before {
			content: "\ea66";
			font-family: 'icons-sm';
			color: #3fbbcb;
			font-size: 13px;
			position: relative;
			top: 2px;
			margin-right: 8px;
		}
		
		
		
		
		
		/* Modal */

			#myModal input {
				border-radius: 0px;
				margin-bottom: 29px;
				border: none;
				height: 47px;
				background: transparent;
				color: #fff;
				border-bottom: 1px solid color(srgb 1 1 1 / 0.35);
				padding-left: 0px;
			}

			#myModal label {
				font-size: 13px;
				color: #fff;
				display: none;
			}
			#myModal .modal-header{
				border:none;
				padding-bottom:0px;
				color:#fff
			}
			#myModal textarea {
				min-height: 120px;
				margin-bottom: 17px;
				background: transparent;
				color: #fff;
				border: none;
				border-bottom: 1px solid color(srgb 1 1 1 / 0.35);
				border-radius: 0px;
				padding-left: 0px;
			}


			#myModal .modal-content {
				background: url(../images/dot-waves.png) no-repeat left 768%, linear-gradient(180deg, #076493 0%, #059799 100%);
				border: none;
				padding: 20px;
				box-shadow: 0 0 150px rgb(0 0 0 / 52%);
			}
			 select option {
				color: #000;
			}

			#myModal #country2{
				border-bottom:1px solid color(srgb 1 1 1 / 0.35);
			}

			#myModal input:focus,
			#myModal select:focus,
			#myModal textarea:focus{
				border-bottom: 1px solid #fff;
				box-shadow: none;
			}
			#myModal  select {
				border-radius: 0;
				margin-bottom: 29px;
				border: none;
				height: 47px;
				background: transparent;
				color: #fff;
				border-bottom: 1px solid #fff;
				padding-left: 0;
			}

			#request-form {
				line-height: 36px;
				padding: 0 32px;
				border: 3px solid #00c5be;
				font-size: 14px;
				text-transform: uppercase;
				letter-spacing: 1px;
				min-width: 120px;
				margin-bottom: 10px;
				margin-top: 19px;
			}
			#myModal .modal-title {
				font-size: 25px;
				font-weight:100;
			}

			/* Modal end */
			
	
			form.contact-form-wrpr label {
				font-size: 13px;
				margin-bottom: 9px;
			}
		
		.legal-docs a {
			font-size: 12px;
			text-decoration: none;
			color: #ffffffd1;
		}

		.legal-docs a + a {
			margin-left: 20px;
		}
		
		.legal-social-wrpr {
			display: flex;
			align-items: center;
		}.legal-social-wrpr {}

		.legal-social-wrpr .social-links {
			margin-left: 15px;
		}
		
		.policy h2 {
			font-size: 24px;
			margin-top: 30px;
		}

		.policy h3 {
			font-size: 20px;
			margin-bottom: 30px;
		}

		.policy p, .policy li {
			font-size: 14px;
			line-height: 33px;
		}

		.policy .col-md-12.pt-5.pb-5 {
			font-size: 14px;
			line-height: 33px;
		}
		
		.phonemenu-item{
			display:none;
		}
		
		
		
		 .whatsapp-widget {
            position: fixed;
            bottom: 30px;
            right: 30px;
            z-index: 1000;
        }

        .chat-button {
            width: 60px;
            height: 60px;
            background: #25D366;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
            transition: all 0.3s ease;
        }

        .chat-button:hover {
            transform: scale(1.1);
            box-shadow: 0 6px 20px rgba(37, 211, 102, 0.5);
        }

        .chat-button svg {
            width: 32px;
            height: 32px;
            fill: white;
        }

        .expanded-button {
            display: none;
            background: #25D366;
            border-radius: 50px;
            padding: 15px 25px;
            align-items: center;
            gap: 12px;
            cursor: pointer;
            box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
            transition: all 0.3s ease;
        }

        .expanded-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(37, 211, 102, 0.5);
        }

        .expanded-button svg {
            width: 32px;
            height: 32px;
            fill: white;
        }

        .expanded-text {
            color: white;
        }

        .expanded-text h4 {
            font-size: 14px;
            margin-bottom: 2px;
			font-weight: 100;
        }

        .expanded-text p {
            font-size: 16px;
            font-weight: 500;
			margin-bottom:0px;
        }

        .chat-popup {
            display: none;
            position: absolute;
            bottom: 80px;
            right: 0;
            width: 340px;
            background: white;
            border-radius: 12px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
            overflow: hidden;
        }

        .chat-popup.show {
            display: block;
            animation: slideUp 0.3s ease;
        }

        @keyframes slideUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .popup-header {
            background: #25D366;
            color: white;
            padding: 20px;
        }

        .popup-header h3 {
            font-size: 16px;
            margin-bottom: 5px;
        }

        .popup-header p {
            font-size: 13px;
            opacity: 0.9;
        }

        .chat-info {
            padding: 15px 20px;
            font-size: 12px;
            color: #999;
            border-bottom: 1px solid #eee;
        }

        .user-list {
            max-height: 280px;
            overflow-y: auto;
        }

        .user-item {
            display: flex;
            align-items: center;
            padding: 15px 20px;
            cursor: pointer;
            transition: background 0.2s;
            border-left: 3px solid transparent;
        }

        .user-item:hover {
            background: #f5f5f5;
        }

        .user-item.online {
            border-left-color: #25D366;
        }

        .user-item.offline {
            border-left-color: #ccc;
        }

        .user-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            margin-right: 15px;
            object-fit: cover;
        }

        .user-info {
            flex: 1;
        }

        .user-name {
            font-weight: 600;
            font-size: 15px;
            margin-bottom: 3px;
        }

        .user-role {
            font-size: 13px;
            color: #666;
        }

        .user-status {
            font-size: 11px;
            color: #999;
            margin-top: 2px;
        }

        .status-indicator {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            border: 2px solid white;
        }

        .status-indicator.online {
            background: #25D366;
        }

        .status-indicator.offline {
            background: #ccc;
        }

        /* Show expanded button on hover */
        .whatsapp-widget:hover .chat-button {
            display: none;
        }

        .whatsapp-widget:hover .expanded-button {
            display: flex;
        }
		
		
		
		
		
		/* callout-style starts */
		
		
		.label-container {
			position: relative;
            max-width: 700px; 
        }

        .label-border {
            position: relative;
            background: #f8f9fa;
            padding: 3px;
        }

        /* Black outer corners */
        .corner-tl, .corner-tr, .corner-bl, .corner-br {
            position: absolute;
            width: 170px;
            height: 25px;
            background: #1a1a1a;
        }

        .corner-tl {
            top: -3px;
            left: -3px;
            clip-path: polygon(0 0, 100% 0, 0 100%);
        }

        .corner-tr {
            top: -3px;
            right: -3px;
            clip-path: polygon(100% 0, 100% 100%, 0 0);
            background: none;
        }

        .corner-bl {
            bottom: -3px;
            left: -3px;
            clip-path: polygon(0 0, 0 100%, 100% 100%);
            background: none;
        }

        .corner-br {
            bottom: -3px;
            right: -3px;
            clip-path: polygon(100% 0, 100% 100%, 0 100%);
        }

        /* Yellow border frame */
        .yellow-frame {
            border: 8px solid #00bccd;
            padding: 6px 20px;
            background: #f8f9fa;
            position: relative;
            clip-path: polygon(
                -0px 0, 
                calc(100% - 35px) 0, 
                100% 35px, 
                100% calc(100% - 0px), 
                calc(100% - 35px) 100%, 
                35px 100%, 
                0 calc(100% - 35px), 
                0 35px
            );
        }

        /* Content */
        .content {
            text-align: center;
        }

        .content h1 {
            margin: 0 0 15px 0;
            font-size: 32px;
            font-weight: bold;
            letter-spacing: 3px;
            color: #1a1a1a;
        }

        .content p {
            margin: 0;
            font-size: 11px;
            line-height: 1.6;
            color: #333;
        }

        /* Decorative lines */
        .line-top, .line-bottom {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            width: 80%;
            height: 2px;
            background: #FFC107;
        }

        .line-top {
            top: 15px;
        }

        .line-bottom {
            bottom: 15px;
        }
		
		
		
		/* callout-style end */
		
		.sustainability-section {
			padding: 100px 80px;
			background: color(srgb 0.3 0.69 0.31 / 0.25);
		}
		
		.sustainability-section img {
			max-width:400px;
		}
				
		.sustainability-section p {
			font-size:15px;
		}
		
		.sustainability-section .card {
			border: none;
			text-align: center;
			padding: 30px;
			background:none;
		}
		
		
		
		
		
				
	/* responsive desktop height */	
	@media (max-height:700px){
		
		.banner-content {
			padding: 40px;
			
		}
		.hero-banner {
			height: 540px;
		}
	}	
		
		
		
		
		
		
		@media (max-width:1380px){
			
			.slider-anim-mob-pic {
				left: -278px;
				bottom: 40px;
			}
			.product-banner {
				min-height: 390px;
				max-height: 390px;
			}
			
		}
			
			
		@media (max-width:1100px){
			footer .col-lg-3, footer .col-lg-2 {
				width: 100%;
				text-align: center;
			}
			.navbar .nav-item {
				display: flex;
			}
			.right-menu-items {
				flex-direction: column;
			}
			.right-menu-items > a {
				margin-right: 0px !important;
				margin-top: 10px;
				color: #fff !important;
				margin-bottom: 10px;
			}
			.navbar-nav-wrapper.center-navbar .menu-container a:hover {
				background: none;
				color: #fff !important;
			}
			.navbar-nav-wrapper.center-navbar .menu-container a {
				color: #fff !important;
			}
			.phonemenu-item{
				display:block;
			}
			
			.product-banner.prep-banner.contact-banner .col-md-6:first-child {
				padding: 0px;
			}

			.product-banner.prep-banner.contact-banner .col-md-6:first-child img {
				object-position: top;
				height: 450px;
			}
			.general-enq .col-md-8, .general-enq .col-md-4 {
				width: 100%;
			}
			.product-banner.prep-banner.contact-banner .col-md-6 {
				padding: 20px;
			}

			.product-banner.prep-banner.contact-banner .col-md-6:first-child img {
				object-position: top;
			}
			.why-we-exit .col-md-4 {
				width: 100%;
				margin-bottom: 20px;
			}
			.builtfor-mariners .col-md-8, .builtfor-mariners .col-md-4 {
				width: 100%;
				padding-top: 11px;
			}
			.product-banner-subtext .col-md-12 {
				padding-left: 45px;
				margin-top: 40px;
			}
			h1.main-heading {
    			margin-top: 30px;
			}
			.product-banner .row.w-100 {
				width: unset !important;
			}
			.product-banner.prep-banner {
				min-height: unset;
				max-height: unset;
			}
			.footer-links-wrpr {
				text-align: center;
			}

			footer .col-lg-3.col-md-7.mb-4 {
				width: 100%;
			}
			.real-impact-section {
				padding-bottom: 560px;
				margin-top: 0px;
			}
			.use-case-section .col-md-6 {
				width: 100%;
			}

			.real-impact-section .col-md-6 {
				width: 100%;
			}

			.real-impact-section .realimpact-pic-wrpr {
				top: 80px !important;
			}




			.features-section .col-md-2 {
				width: 30%;
			}

			.who-is-for-section .col-md-3 {
				width: 50%;
			}
			.product-banner .col-md-6 {
				width: 100%;
			}

			.product-banner {
				min-height: unset;
				max-height: unset;
		        margin-top: 0;
			}
			.right-menu-items .btn-group {
				display: none;
			}
			.navbar-nav-wrapper.center-navbar + .ms-auto {
				margin-right: auto !important;
			}

			.who-is-for-section .container .who-is-card {
				max-width: 170px;
				max-height: 170px;
			}

			.who-is-for-section .container .who-is-card img {
				max-width: 90px;
			}
			
			.product-banner .col-md-6:nth-child(2) {
				padding-right: 30px !important;
			}
			
			button.navbar-toggler:focus {
				outline: none;
				box-shadow:none;
			}

			
			.navbar-toggler-icon {
				display: block;
				position: absolute;
				top: 16px;
				right: 10px;
				width: 50px;
				height: 50px;
				cursor: pointer;
				z-index: 400;
				padding: 0;
			}
			.navbar-toggler-icon span {
				position: absolute;
				top: 50%;
				left: 10px;
				right: 10px;
				display: block;
				height: 4px;
				margin-top: -2px;
				background-color: #5dc3da;
				font-size: 0px;
				-webkit-touch-callout: none;
				-webkit-user-select: none;
				-khtml-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;
				-webkit-transition: background-color 0.2s;
				transition: background-color 0.2s;
			}
			.navbar-toggler-icon span:before, .navbar-toggler-icon span:after {
				position: absolute;
				left: 0;
				width: 100%;
				height: 100%;
				background: #5dc3da;
				content: '';
				-webkit-transition: -webkit-transform 0.3s;
				transition: transform 0.3s;
			}
			.navbar-toggler-icon span:before {
				-webkit-transform: translateY(-220%);
				transform: translateY(-220%);
			}
			.navbar-toggler-icon span:after {
				-webkit-transform: translateY(220%);
				transform: translateY(220%);
			}
			.navbar-toggler-icon.active span:before {
				-webkit-transform: translateY(0) rotate(45deg);
				transform: translateY(0) rotate(45deg);
			}
			.navbar-toggler-icon.active span:after {
				-webkit-transform: translateY(0) rotate(-45deg);
				transform: translateY(0) rotate(-45deg);
			}
			span.navbar-toggler-icon.active span {
				background: transparent;
			}
			
			   
			
			.calltoaction-wrpr img {
				left: 1%;
				width: 410px;
			}

			.products-wrapper .d-flex {
				flex-direction: column;
				width: 100%;
			}

			.products-wrapper .d-flex a {
				margin-bottom: 5px;
				margin-left: 0px !important;
			}

			.products-wrapper .card .card-body {
				padding: 5px;
				justify-content: flex-start;
			}

			.products-wrapper .card {
				min-height: 427px;
			}
			.navbar-nav-wrapper.center-navbar {
				/*display: none;*/
			}
			.banner-content {
				padding: 40px;
			}
			.slider-anim-mob-pic {
				bottom: -40px;
				left: -198px;
			}
		}
		
		
		
		

        /* Custom layout for desktop */
        @media (min-width: 992px) {
            .navbar-nav-wrapper {
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
            }
        }

        /* Mobile responsive */
        @media (max-width: 1024px) {
			.btn-solmarine {
				padding-left: 10px;
				padding-right: 10px;
				font-size: 13px;
			}

			.products-wrapper .d-flex {
				flex-direction: unset;
				justify-content: center;
				gap: 4px;
			}

			.products-wrapper .card {
				min-height: 350px;
			}
			.calltoaction-wrpr p {
				max-width: unset;
			}
			.calltoaction-wrpr .col-md-6 {
					width: 100%;
					margin-bottom: 0px !important;
				}

				.calltoaction-wrpr .col-md-6 h2 br {
					display: none;
				}

				.calltoaction-wrpr .col-md-6 h2 {
					font-size: 27px;
				}
			.footer-links-wrpr {
				padding-top: 0px;
			}
			    .navbar-nav-wrapper.center-navbar {
					display: flex;
					justify-content: center;
					flex-direction: column;
					position: static;
					        transform: translateX(0%);
				}
            .navbar-collapse {
                background-color: var(--menu-bg);
                border: 1px solid var(--menu-border);
                border-radius: 10px;
                margin-top: 1rem;
                padding: 1rem;
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
            }

            .menu-container {
                background: none;
                border: none;
                border-radius: 0;
                padding: 0;
                flex-direction: column;
            }

            .navbar-nav .nav-link {
                text-align: center;
                margin: 0.25rem 0;
                width: 100%;
            }

            .btn-trial {
                width: 100%;
                text-align: center;
                margin-top: 1rem;
            }
        }

		
		
		
		
		
		

        /* Responsive */
        @media (max-width: 991.98px) {
            .hero-title {
                font-size: 2.5rem;
            }
            
            .content-column {
                padding: 2rem 1.5rem;
            }
            
            .hero-swiper {
                height: 400px;
            }
            
            .analytics-overlay {
                top: 10px;
                right: 10px;
            }
            
            .analytics-card {
                min-width: 150px;
                padding: 1rem;
            }
        }

        @media (max-width: 768px) {
			.calltoaction-wrpr .col-md-6 {
				width: 100%;
			}

			.calltoaction-wrpr .col-md-6 h2 br {
				display: none;
			}
			.footer-links-wrpr {
				padding-top: 0px;
			}
			.sustainability-section img {
					max-width: 100%;
				}

				.sustainability-section {
					padding: 30px;
				}
			footer .col-md-5, footer .col-md-3, footer .col-md-6 {
				width: 100%;
			}
			
			.right-menu-items {
				flex-direction: column;
			}

			.right-menu-items > a {
				margin-right: 0px !important;
				margin-top: 10px;
				color: #fff !important;
				margin-bottom: 10px;
			}
			.navbar-nav-wrapper.center-navbar {
					display: flex;
					justify-content: center;
					flex-direction: column;
					
				}
			.navbar-nav-wrapper.center-navbar li, .navbar-nav-wrapper.center-navbar ul{
				margin-left:0px;
				padding-left:0px;
			}

			.navbar-nav-wrapper.center-navbar .menu-container a {
				margin: 0 auto;
				color: #fff !important;
			}

			.navbar-nav-wrapper.center-navbar .menu-container {
				background: transparent;
			}
			
			.banner-content {
				padding: 20px;
			}


			.banner-content h1 {
				font-size: 21px !important;
			}

			.slider-anim-mob-pic {
				max-width: 270px;
				left: 50%;
				right: unset;
				margin-left: -135px;
			}

			
			footer .col-md-6, footer .col-lg-3.col-md-5 {
				text-align: center;
			}
			.container-fluid.calltoaction-cntnr .col-md-6.my-auto {
				margin-bottom: 10px !important;
			}

			.container-fluid.calltoaction-cntnr .container:before {
				content: "";
				position: absolute;
				top: 0px;
				bottom: 0;
				left: 0;
				right: 0;
				background: linear-gradient(0deg, black, transparent);
				z-index: 100;
			}

			.container-fluid.calltoaction-cntnr .container {
				position: relative;
			}

			.container-fluid.calltoaction-cntnr .container p, 
			.container-fluid.calltoaction-cntnr .container h2, 
			.container-fluid.calltoaction-cntnr .container a {
				position: relative;
				z-index: 100;
			}
			.why-choose-solmarines {
				padding-top: 90px;
				padding-bottom: 50px;
			}
						
			.hero-banner .col-md-6.text-center.my-auto {
				margin-bottom: 0px !important;
				width:100%;
			}
			.slider-cntnt-box {
				max-width: 100%;
			}
			
			.hero-banner .col-md-6:nth-child(1) {
				display: none;
			}
			
			 .slider-anim-mob-pic {
				bottom: unset;
				left: unset;
				right: -20px;
				top: -127px;
			}
			
			.newsletter-form {
                flex-direction: column;
                align-items: stretch;
            }
            
            .subscribe-btn {
                width: 100%;
            }
            
            .copyright {
                flex-direction: column;
                gap: 15px;
                text-align: center;
            }
			
			 .testimonial-section {
                padding: 60px 0;
            }
            
            .testimonial-section .testimonial-card {
                padding: 30px 25px;
                margin: 0 10px;
                height: auto;
                min-height: 380px;
            }
            
            .testimonial-section .testimonial-text {
                font-size: 1rem;
            }
            
           .testimonial-section .swiper-button-next,
           .testimonial-section .swiper-button-prev {
                display: none;
            }
			
            .hero-title {
                font-size: 2rem;
            }
            
            .hero-slider-section .row {
                flex-direction: column;
            }
            
            .slider-column {
                margin-bottom: 2rem;
            }
        }
		
		@media (max-width:500px){
			footer .col-lg-3.col-md-6.mb-4, footer .col-lg-3.col-md-7.mb-4, footer .col-lg-2.col-md-6.mb-4 {
				margin-bottom: 0px !important;
			}
			.calltoaction-cntnr .calltoaction-wrpr {
				border-radius: 0px;
			}

			.container-fluid.calltoaction-cntnr {
				padding: 0px;
			}
			.btn-solmarine {
				font-size: 12px;
			}
			.products-wrapper .card {
				min-height: 300px;
			}
			.products-wrapper .d-flex a {
				min-width: 115px;
			}
		    .product-banner.prep-banner .product-logo {
                top: -71px;
            }
			.contact-banner .social-link {
				position: relative;
				top: 9px;
				min-width: 50px;
			}
			.edge-grid {
				padding: 30px;
			}

			.serve-section {
				padding: 50px 30px;
			}

			.serve-section h2 {
				font-size: 27px;
			}
			.why-we-exit .col-md-4 {
				padding: 40px;
			}
			.features-section .col-md-2 {
				width: 70%;
			}
			.product-banner.prep-banner.contact-banner .col-md-6:first-child img {
				height: 190px;
				width: 100%;
				object-fit: cover;
			}
			.legal-social-wrpr {
				flex-direction: column;
			}

			.legal-docs {
				display: flex;
				flex-direction: column;
			}

			.legal-docs a + a {
				margin-left: 0px;
			}

			.legal-docs a {
				margin-bottom: 19px;
			}
			.footer-links-wrpr {
				padding-top: 22px;
			}
			.product-banner.prep-banner.presence-banner {
				min-height: unset;
				max-height: unset;
			}
			.who-is-for-section .col-md-4 {
				padding-top: 30px;
			}
			.product-banner-subtext .col-md-12 {
				padding-left: 30px;
				margin-top: 30px;
				padding-right: 30px;
			}
			.product-banner.prep-banner {
				    min-height: unset;
					max-height: unset;
					padding-top: 0px;
					padding-bottom: 0;
			}

			.product-banner.prep-banner .product-banner-desc {
				padding-left: 0px;
			}

			.product-banner.prep-banner .col-md-6:nth-child(2) {
				padding: 0px !important;
			}

			.product-banner.prep-banner .row.w-100 {
				width: unset !important;
			}
			
			.quotes2 {
				right: 20px;
			}
			
			.quotes1 {
				left: 20px;
			}
			
			.product-banner {
				min-height: unset;
				max-height: unset;
				margin-top: 80px;
    	        padding-top: 0;
			}

			.product-banner .col-md-6:nth-child(2) .d-flex {
				padding: 30px;
			}

			.product-banner .col-md-6:nth-child(2) .d-flex img {
				max-width: 100px;
			}
			.product-banner.prep-banner .col-md-6:nth-child(2) .d-flex img {
				max-width: 153px;
			}
			.product-banner.prep-banner.rightship-banner  .col-md-6:nth-child(2) .d-flex img {
					max-width: 216px;
			}
			.product-banner.prep-banner.presence-banner  .col-md-6:nth-child(2) .d-flex img {
				max-width: 238px;
			}
			.product-banner.prep-banner.rightship-banner.vir-banner .col-md-6:nth-child(2) .d-flex img {
				max-width: 176px;
			}

			.product-banner .col-md-6:nth-child(2) .d-flex h1 {
				font-size: 25px;
			}

			.real-impact-section {
				margin-top: 0px;
				padding-bottom: 10px;
			}

			.real-impact-section .col-md-6:first-child {
				padding: 0 50px;
				padding-bottom: 70px;
			}

			.realimpact-pic-wrpr {
				position: static;
			}

			.real-impact-section .col-md-6:nth-child(2) {
				padding: 29px;
			}

			.realimpact-pic-wrpr:before {}

			.ready-to-try-section {
				padding: 50px;
			}


			
			
			
			
			.feature-section.active {
				margin-left: -80px;
			}
			.why-choose-solmarines .col-md-6 {padding: 40px;}
			.hero-banner + .swiper-content.phoneonly {
				position: static;
				background: #113737;
				margin-left: 0px;
				display:block;
			}
			.hero-banner {
				height: 360px;
			}

			.hero-banner .swiper-content {
				display: none;
			}
			
		}