@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

            /* ***** Common Css **** */
            :root {
                scroll-behavior: smooth;
            }

            * {
                margin: 0;
                padding: 0;
                text-decoration: none;
                list-style: none;
                box-sizing: border-box;
            }
            a:hover,
            a:focus,
            a:active {
                text-decoration: none;
            }
            ol,
            ul {
                margin: 0;
                padding: 0;
            }
            img {
                display: block;
            }
            figure{margin: 0;}
            a,button {
                transition: 0.4s linear;
                -webkit-transition: 0.4s linear;
                text-decoration: none;
                font-family: "Inter", sans-serif;
            }

            body {
                font-family: "Inter", sans-serif;
                font-size: 14px;
                font-weight: 400;
                color: #000;
                text-decoration: none;
            }
            .main-wepper {
                height: 100%;
                width: 100%;
               overflow-x: hidden;
            }
            .container {
                max-width: 1200px;
                padding: 0 15px;
                margin: 0 auto;
            }
            /* ***** End Common Css **** */

            /* **** Header **** */
            header {
                padding: 16px 0;
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                z-index: 121;
            }
            header nav {
                display: flex;
                align-items: center;
                justify-content: space-between;
            }
            header nav .navbar-logo img {
                height: 75px;
            }
            header nav .navbar-nav {
                display: flex;
                align-items: center;
                gap: 45px;
            }
            header nav .navbar-nav li a {
                font-size: 16px;
                font-weight: 400;
                color: #313131;
            }
            header nav .navbar-nav li a.active,
            header nav .navbar-nav li a:hover {
                color: #007C86;
            }
            header nav .navbar-nav li a.active {
                font-weight: bold;
            }
            /* **** End Header **** */


            .row{
                display: flex;
                margin: 0 -15px;
                flex-wrap: wrap;
            }
            .row .col-md-6{
                padding: 0 15px;
                width: 50%;
            }

            .btn-secondary{
                font-size: 18px;
                font-weight: 600;
                color: #007C86;
                border-radius: 40px;
                border: 2px solid #007C86;
                padding: 17px 42px;
                display: table;
            }
            .btn-secondary:hover{
                background-color: #007C86;
                color: #fff;
            }
            .btn-primary{
                font-size: 18px;
                font-weight: 600;
                color: #fff;
                border-radius: 40px;
                background-color: #007C86;
                border: 2px solid #007C86;
                padding: 17px 42px;
                display: table;
            }
            .btn-primary:hover{
                background-color: #313131;
                border-color: #313131;
                color: #fff;
            }


            .titlebar{
                margin: 0 0 40px;
                text-align: center;
            }
            .titlebar h2{
                font-size: 48px;
                font-weight: bold;
                color: #2C2F62;
                margin: 0;
            }
            .titlebar h2 span{color: #007C86;}





            /* **** Hero **** */
             /* Default fallback (JPG) */
            .hero-wrp {
                background-image: url("images/hero-bg.jpg");
                background-image: image-set(
                url("images/hero-bg.webp") type("image/webp"),
                url("images/hero-bg.jpg") type("image/jpeg")
             );
                background-size: cover;
                background-position: center;
                background-repeat: no-repeat;
                padding: 145px 0 0;
            }
            
            .hero-wrp .detail{
                padding: 55px 0 0;
                position: relative;
            }
            .hero-wrp .detail .design-elements{
                position: absolute;
                right: -24%;
                top: 13%;
            }
            .hero-wrp .detail h1{
                font-size: 64px;
                font-weight: bold;
                color: #2C2F62;
                margin: 0 0 40px;
                position: relative;
                z-index: 5;
            }
            .hero-wrp .detail h1 span{
                display: inline-block;
                position: relative;
                color: #007C86;
            }
            .hero-wrp .detail h1 span .glp-shape{
                position: absolute;
                left: 55%;
                top: 50%;
                -webkit-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
                pointer-events: none;
                z-index: -1;
            }
            .hero-wrp .detail p{
                line-height: 150%;
                max-width: 495px;
                font-size: 20px;
                font-weight: 400;
                color: #2C2F62;
                margin: 0 0 45px;
            }
            .hero-wrp .detail ul {
                display: flex;
                align-items: center;
                gap: 22px;
            }
            .hero-wrp .hero-img{
                margin-left: -5;
                width: 105%;
            }
            .hero-wrp .hero-img img{
                max-width: 100%;
                height:auto;
                display:block;
            }
            /* **** End Hero **** */



            /* **** Value **** */
            .value-wrp{
                padding: 88px 0 143px;
                position: relative;
            }
            .value-wrp .value-shape1{
                position: absolute;
                left: 0;
                top: 0;
                pointer-events: none;
                max-width: 100%;
            }
            .value-wrp .value-shape2{
                position: absolute;
                right: 0;
                top: 0;
                pointer-events: none;
                max-width: 100%;
            }
            .value-wrp .value-block{
                width: 100%;
                overflow: auto;
            }
            .value-wrp .value-block ul{
                display: flex;
                align-items: center;
                width: 125%;
                gap: 32px;
            }
            .value-wrp .value-block ul li{
                width: 290px;
            }
            .value-wrp .value-block ul li:nth-child(even) .value-box{
                flex-flow: column-reverse;
            }
            .value-wrp .value-block ul li:nth-child(even) .value-box .box-img img{
                box-shadow: 0px 15.74px 31.48px 0px rgba(0, 0, 0, 0.05);
            }
            .value-wrp .value-box{
                border: 1px solid #DFDFDF;
                border-radius: 32px;
                overflow: auto;
                display: flex;
                flex-flow: column;
                overflow: hidden;
            }
            .value-wrp .value-box .detail{
                padding: 24px 32px;
                min-height: 170px;
            }
            .value-wrp .value-box .detail .icon{
                height: 50px;
                width: 50px;
                background-color: rgba(0, 124, 134, 0.10);
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 100%;
                margin: 0 0 15px;
            }
            .value-wrp .value-box .detail .icon img{
                max-width: 100%;
            }
            .value-wrp .value-box .detail h3{
                font-size: 20px;
                font-weight: 600;
                color: #2C2F62;
                margin: 0;
            }
            .value-wrp .value-box .box-img{
                height: 420px;
            }
            .value-wrp .value-box .box-img img {
                height: 100%;
                width: 100%;
                object-fit: cover;
                object-position: top;
            }
            /* **** End Value **** */



            /* **** About **** */
            .about-wrp{
                padding: 0 0 100px;
                position: relative;
            }
            .about-wrp .shape-img4{
                position: absolute;
                left: 0;
                top: 10%;
                max-width: 100%;
                pointer-events: none;
            }
            .about-wrp .shape-img5{
                position: absolute;
                right: 0;
                top: 20%;
                max-width: 100%;
                pointer-events: none;
            }
            .about-wrp .row{
                align-items: center;
            }
            .about-wrp .about-image{
                position: relative;
                z-index: 15;
            }
            .about-wrp .about-image .about-bg{
                position: absolute;
                display: flex;
                inset: 0;
                align-items: center;
                justify-content: center;
                z-index: 1;
            }
            .about-wrp .about-image .about-bg img{
                max-width: 100%;
                width: auto;
                height:auto;
                max-height: 100%;
                object-fit: contain;
                display; block;
            }
            .about-wrp .about-image img{
                max-width: 100%;
                position: relative;
                z-index: 10;
                margin: 0 auto;
                image-rendering: -webkit-optimize-contrast;
            }
            .about-wrp .detail h2{
                font-size: 48px;
                font-weight: bold;
                color: #1F2148;
                margin: 0 0 24px;
            }
            .about-wrp .detail p{
                line-height: 150%;
                font-size: 18px;
                line-height: 27px;
                font-weight: 400;
                color: #2C2F62;
                margin: 0;
            }
            .about-wrp .detail p b{
                color: #007C86;
                font-weight: bold;
            }
            .about-wrp .detail h6{
                font-size: 18px;
                font-weight: bold;
                color: #1F2148;
                margin: 0 0 24px;
                line-height: 27px;
            }
            .about-wrp .detail ul{

            }
            .about-wrp .detail ul li{
                font-size: 18px;
                color: #007C86;
                font-weight: bold;
                position: relative;
                line-height: 28px;
                margin: 0 0 6px;
                padding-left: 37px;
            }
            .about-wrp .detail ul li:before{
                position: absolute;
                content: "";
                height: 25px;
                width: 25px;
                left: 0;
                top: 2px;
                background-image: url("images/checkicon.svg");
                background-size: cover;
                background-position: center;
                background-repeat: no-repeat;
            }
            /* **** End About **** */



            /* **** Work **** */
            .work-wrp{
                padding: 0 0 110px;
                position: relative;
            }
            .work-wrp .shape-img3{
                position: absolute;
                left: 0;
                top: 0;
                max-width: 100%;
                pointer-events: none;
            }
            .work-wrp .work-block{
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 85px;
            }
            .work-wrp .work-block .work-box:nth-child(odd){
                margin: 50px 0 0;
            }
            .work-wrp .work-block .work-box{
                text-align: center;
            }
            .work-wrp .work-block .work-box .icon{
                height: 60px;
                width: 60px;
                background-color: rgba(0, 124, 134, 0.10);
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 100%;
                margin: 0 auto 25px;
            }
            .work-wrp .work-block .work-box .icon img{
                max-width: 100%;
            }
            .work-wrp .work-block .work-box h3{
                font-size: 24px;
                font-weight: bold;
                color: #1F2148;
                margin: 0 0 16px;
            }
            .work-wrp .work-block .work-box p{
                line-height: 150%;
                font-size: 16px;
                font-weight: 500;
                color: #1F2148;
                margin: 0;
            }
            /* **** End Work **** */


            /* **** Pricing **** */
            .pricing-wrp{
                padding: 0 0 100px;
            }
            .pricing-wrp .pricing-block{
                max-width: 834px;
                border-radius: 32px;
                background-color: #007C86;
                margin: 0 auto;
                display: grid;
                align-items: center;
                grid-template-columns: repeat(2, 1fr);
                gap: 52px;
                padding: 47px 30px 47px 60px;
            }
            .pricing-wrp .pricing-block .detail h6{
                font-size: 20px;
                font-weight: 600;
                margin: 0 0 8px;
                color: #fff;
            }
            .pricing-wrp .pricing-block .detail p{
                line-height: 150%;
                font-size: 16px;
                font-weight: 400;
                color: #DFDFDF;
                margin: 0 0 16px;
            }
            .pricing-wrp .pricing-block .detail h2{
                font-size: 36px;
                font-weight: 600;
                color: #fff;
                margin: 0 0 8px;
            }
            .pricing-wrp .pricing-block .detail h5{
                font-size: 16px;
                font-weight: bold;
                color: #fff;
                margin: 0;
            }
            .pricing-wrp .pricing-block a{
                display: block;
                position: relative;
                font-size: 16px;
                font-weight: 600;
                color: #007C86;
                padding: 17px 24px;
                background-color: #fff;
                border-radius: 50px;
                text-align: center;
                display: block;
            }
            .pricing-wrp .pricing-block a span{
                position: absolute;
                right: 4px;
                top: 4px;
                bottom: 4px;
                background-color: #007C86;
                border-radius: 100%;
                width: 48px;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .pricing-wrp .pricing-block a:hover{
                background-color: #313131;
                color: #fff;
            }
            /* **** End Pricing **** */


            /* **** Footer **** */
            footer{
                padding: 22px 0;
                background-color: #007C86;
                text-align: center;
            }
            footer p{
                line-height: 150%;
                font-size: 18px;
                font-weight: 600;
                color: #fff;
                text-align: center;
                margin: 0;
            }
            /* **** End Footer **** */

            @media(min-width:1200px) and (max-width:1438.98px){
                .container{max-width: 1170px;}

                .titlebar{margin: 0 0 40px;}
                .titlebar h2{font-size: 40px;}


                .btn-secondary{font-size: 16px;padding: 16px 32px;}
                .btn-primary{font-size: 16px;padding: 16px 32px;}

                .hero-wrp .detail h1{font-size: 60px;}
                .hero-wrp .detail h1 span .glp-shape{max-width: 220px;}
                .hero-wrp .detail p{font-size: 18px;margin: 0 0 32px;}

                .value-wrp .value-block ul{width: fit-content;}

                .about-wrp .about-image img{max-width: 300px;}
                .about-wrp .detail h2{font-size: 40px;}
                .about-wrp .detail p{font-size: 16px;}
                .about-wrp .detail h6{font-size: 16px;}
                .about-wrp .detail ul li{font-size: 16px;}
                
                .work-wrp .work-block{gap: 35px;}
            }
            @media(min-width:992px) and (max-width:1199.98px){
                .container{max-width: 960px;}

                .titlebar{margin: 0 0 40px;}
                .titlebar h2{font-size: 40px;}


                .btn-secondary{font-size: 15px;padding: 15px 30px;}
                .btn-primary{font-size: 15px;padding: 15px 30px;}

                .hero-wrp{padding: 115px 0 0;}
                .hero-wrp .detail h1{font-size: 50px;}
                .hero-wrp .detail h1 span .glp-shape{max-width: 190px;}
                .hero-wrp .detail .design-elements{max-width: 140px;}
                .hero-wrp .detail p{font-size: 18px;margin: 0 0 32px;}

                .value-wrp .value-block ul{width: fit-content;gap: 30px;}

                .about-wrp .about-image img{max-width: 300px;}
                .about-wrp .detail h2{font-size: 40px;}
                .about-wrp .detail p{font-size: 16px;}
                .about-wrp .detail h6{font-size: 16px;}
                .about-wrp .detail ul li{font-size: 16px;}
                
                .work-wrp .work-block{gap: 35px;}

            }
            @media(min-width:768px) and (max-width:991.98px){
                .container{max-width: 740px;}

                .btn-secondary{font-size: 15px;padding: 15px 26px;}
                .btn-primary{font-size: 15px;padding: 15px 26px;}
                
                .titlebar{margin: 0 0 28px;}
                .titlebar h2{font-size: 32px;}

                .hero-wrp {
                    background-image: url("images/hero-bg-mobile.jpg"); 
                    /* fallback */
                    background-image: image-set(
                    url("images/hero-bg-mobile.webp") type("image/webp"),
                    url("images/hero-bg-mobile.jpg") type("image/jpeg")
                     );padding: 125px 0 0;}
                .hero-wrp .detail{padding: 32px 0 0;}
                .hero-wrp .detail .design-elements{max-width: 120px;}
                .hero-wrp .detail h1{font-size: 32px;margin: 0 0 26px;}
                .hero-wrp .detail h1 span img{max-width: 122px;}
                .hero-wrp .detail p{font-size: 16px;margin: 0 0 15px;}
                .hero-wrp .detail ul{gap: 18px;}
                .hero-wrp .hero-img{width: 100%;}
                .hero-wrp .detail ul{flex-wrap: wrap;}
                .hero-wrp .detail ul li{width: 100%;}
                .hero-wrp .detail ul a{width: 100%;text-align: center;}

                .value-wrp .value-block ul{width: fit-content;}

                .about-wrp .about-image img{max-width: 280px;}
                .about-wrp .detail h2{font-size: 30px;margin: 0 0 16px;}
                .about-wrp .detail p{font-size: 16px;}
                .about-wrp .detail h6{font-size: 16px;}
                .about-wrp .detail ul li{font-size: 16px;}

                .work-wrp .work-block{gap: 20px;}
                .work-wrp .work-block .work-box h3{font-size: 20px;}
                .work-wrp .work-block .work-box p{font-size: 15px;}
                footer p{font-size: 16px;}

            }
            @media(max-width:767.98px){
                .container{max-width: 540px;}

                .btn-secondary{font-size: 15px;padding: 15px 26px;}
                .btn-primary{font-size: 15px;padding: 15px 26px;}
                
                .titlebar{margin: 0 0 28px;}
                .titlebar h2{font-size: 32px;}
                
                header nav{justify-content: center;}
                header nav .navbar-nav{display: none;}

                .row .col-md-6{width: 100%;}
                .hero-wrp{background-image: url("images/hero-bg-mobile.jpg");padding: 95px 0 0;}
                .hero-wrp .detail{text-align: center;padding: 0 0 32px;}
                .hero-wrp .detail .design-elements{display: none;}
                .hero-wrp .detail h1{font-size: 32px;margin: 0 0 26px;}
                .hero-wrp .detail h1 span{display: table;margin: 0 auto;}
                .hero-wrp .detail h1 span img{max-width: 122px;}
                .hero-wrp .detail p{font-size: 16px;margin: 0 0 15px;}
                .hero-wrp .detail ul{gap: 18px;justify-content: center;}
                .hero-wrp .hero-img{width: 100%;margin: 0 auto}

                .value-wrp{padding: 48px 0;}
                .value-wrp .value-block ul{width: fit-content;}

                .about-wrp{padding: 0 0 48px;}
                .about-wrp .row{flex-flow: column-reverse;gap: 38px;}
                .about-wrp .about-image img{max-width: 280px;}
                .about-wrp .detail h2{font-size: 32px;margin: 0 0 16px;text-align: center;}
                .about-wrp .detail p{font-size: 16px;text-align: center;}

                .work-wrp {padding: 0 0 48px;}
                .work-wrp .work-block{grid-template-columns: repeat(1, 1fr);gap: 32px;}
                .work-wrp .work-block .work-box:nth-child(odd){margin: 0 auto;}
                .work-wrp .work-block .work-box{max-width: 289px;margin: 0 auto;}

                .odd-about-wrp .row{flex-flow: column;}
                .about-wrp .detail h6{font-size: 18px;text-align: center;margin: 0 0 16px;}
                .about-wrp .detail ul li{text-align: center;padding: 33px 0 0;}
                .about-wrp .detail ul li:before{left: 50%;top: 0;transform: translate(-50%, 0);}

                .pricing-wrp{padding: 0 0 48px;}
                .pricing-wrp .pricing-block{padding: 33px 44px;grid-template-columns: repeat(1, 1fr);gap: 35px;}

                .value-wrp .value-shape1{display: none;}
                .value-wrp .value-shape2{display: none;}
                .about-wrp .shape-img4{display: none;}
                .about-wrp .shape-img5{display: none;}
                .work-wrp .shape-img3{display: none;}
                footer p{font-size: 14px;}
            }

            @media(max-width:439.98px){
                .container{max-width: 540px;}
}
                .hero-wrp .detail ul{flex-wrap: wrap;}
                .hero-wrp .detail ul li{width: 100%;}
                .hero-wrp .detail ul a{width: 100%;text-align: center;}
                .pricing-wrp .pricing-block{padding: 24px;border-radius: 20px;}
                .about-wrp .detail ul li.founder-line{
                list-style: none;
                color: #000;
                font-weight: 400;
                margin: 8px 0 12px 0;
}
.waitlist-modal{
  display: none;
/* no change here */
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 9999;
  align-items: center;
  justify-content: center;
}

.waitlist-box {
  background: #fff;
  padding: 24px;
  border-radius: 16px;
  width: 90%;
  max-width: 360px;
  position: relative;
}

.waitlist-box input {
  width: 100%;
  padding: 12px 14px;
  margin-bottom: 12px;
  border-radius: 10px;
  border: 1px solid #ddd;
  font-size: 14px;
}

.waitlist-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
}  
 .icon.no-icon{
  background: none;
}
.value-box.no-accent::before,
.value-box.no-accent::after{
  display: none;
}