@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800&display=swap");


*{
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    transition: all .2s linear;
    outline: none;
    border: none;
}

body {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    color: #333;
}

header {
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    /* background-color: rgba(255, 255, 255, 0.7);  */
    /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);  */
    /* backdrop-filter: blur(10px); */
    z-index: 1000; 
}

header.sticky {
    background: rgba(255, 255, 255, 1); /* Adds a dark transparent background */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Adds subtle shadow */
    color: #f1f1f1; /* Adjusts text color for visibility */
  }

header nav ul {
    list-style: none;
    display: flex;
    gap: 20px;
  }
  
header nav ul li a {
    text-decoration: none;
    color: white;
    transition: color 0.3s ease;
  }
header .logo{
    margin-left: 30px;
    /* cursor: pointer; */
}

header .logo img {
    height: 60px;
    width: auto;
}

.desktop-video{
    display: none;
    width: 100%;
    height: auto;
}
.mobile-video {
    display: none;
    width: 100%;
    height: auto;
}



@media only screen and (min-width: 1025px) {
    .dropdown {
        display: none; 
    }
    .nav1{
        display: none;
    }
    header .logo{
        margin-left: 30px;
    }
    
    header .logo img {
        height: 60px;
        width:auto;
    }
    
    nav{
        margin-right: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    nav ul {
        list-style: none;
        display: flex;
        gap: 20px;
        margin: 0;
        padding: 0;
    }
    
    nav ul li a {
        color: #fff;
        text-decoration: none;
    }
    
    nav ul li a:hover {
        color: #a9cf46;
    }
    
    .nav-btn{
        cursor: pointer;
        margin-left: 25px;
        padding: 8px 10px;
        border: 1px solid #a9cf46;
        border-radius: 10px;
        background-color: #a9cf46;
        color: #fff;
    }
    
    
    .nav-btn:hover{
        background-color: #fff;
        border: 1px solid #a9cf46;
        color: #a9cf46;
    }

    .system-dropdown {
        position: relative;
       
    }
    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #ffffff;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
        z-index: 1000;
        width: 160px;
        margin: 2px 0 0 0;
        padding: 5px;
        border-radius: 10px;
        transition: opacity 0.3s ease;
    }
    .dropdown-content li {
        padding: 8px 16px;
    }
    .dropdown-content li a {
        color: #333;
        text-decoration: none;
        display: block;
    }
    
    .system-dropdown:hover .dropdown-content {
        display: block;
        opacity: 1;
    }

    
}

@media only screen and (min-width: 768px ) and (max-width: 1024px ) {
    .dropdown {
        display: none; 
    }
    .nav1{
        display: none;
    }
    header .logo{
        margin-left: 5px;
    }
    
    
    nav{
        margin-right: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    nav ul {
        list-style: none;
        display: flex;
        gap: 20px;
        margin: 0;
        padding: 0;
    }
    
    nav ul li a {
        color: #333;
        text-decoration: none;
        font-size: 15px;
    }
    
    nav ul li a:hover {
        color: #a9cf46;
    }
    
    .nav-btn{
        cursor: pointer;
        margin-left: 25px;
        padding: 8px 10px;
        border: 1px solid #a9cf46;
        border-radius: 10px;
        background-color: #a9cf46;
        color: #fff;
    }
    
    
    .nav-btn:hover{
        background-color: #fff;
        border: 1px solid #a9cf46;
        color: #a9cf46;
    }
    .system-dropdown {
        position: relative;
       
    }
    .desktop-video {
        display: block;
    }
    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #ffffff;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
        z-index: 1000;
        width: 160px;
        margin: 2px 0 0 0;
        padding: 5px;
        border-radius: 10px;
        transition: opacity 0.3s ease;
    }
    .dropdown-content li {
        padding: 8px 16px;
    }
    .dropdown-content li a {
        color: #333;
        text-decoration: none;
        display: block;
    }
    
    .system-dropdown:hover .dropdown-content {
        display: block;
        opacity: 1;
    }
    
}

/* For smaller screens (tablets, mobile devices) */
@media only screen and (max-width: 767px) {
    header .logo{
        margin-left: -7px;
        
    }
    header .logo img {
        height: 40px;
        margin-left: 20px;
    }
    .nav {
        display: none; 
        
    }
    .nav1 .nav-btn{
        cursor: pointer;
        margin-left: 25px;
        padding: 4px 4px;
        border: 1px solid #a9cf46;
        border-radius: 10px;
        font-size: 12px;
        background-color: #a9cf46;
        color: #fff;
    }
    .nav1{
        margin-left: 60px;
        align-items: center;
        justify-content: center;
        margin-bottom: 3px;
        width: 100%;
    }
    .dropdown {
        display: block; 
        position: relative;
        margin-left: auto; 
    }

    .dropdown .dropbtn {
        background-color: transparent;
        border: none;
        cursor: pointer;
        padding: 0px;
    }

    .dropdown .dropbtn i {
        color: white; 
        font-size: 24px;
    }
    body.contact .dropdown .dropbtn i {
        color: black; /* Black icon color on the contact page */
      }

    body.aboutus .dropdown .dropbtn i {
        color: black; /* Black icon color on the contact page */
      }

    body.usecase .dropdown .dropbtn i {
        color: black; /* Black icon color on the contact page */
      }

    .dropdown .dropdown-content {
        display: none; 
        position: absolute;
        right: -140%;
        text-align: center;
        background: #e8f0eb;
        border-radius: 5px;
        min-width: 120px;
        z-index: 1;
    }

    .dropdown-contact{
        margin-right: 70px;
      }

    .dropdown .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        font-size: 10px;
        margin-left: -9px;
    }

    .dropdown .dropdown-content a:hover {
        background-color: #f1f1f1;
        color: #a9cf46;
        
    }

    .dropdown:hover .dropdown-content {
        display: block;
        margin-right: 20px; 
    }

    .dropdown.show .dropdown-content {
        display: block; 
        margin-right: 20px; 
    }

    header .dropdown {
        margin-right: 20px;
    }
    header.sticky .dropbtn {
        color: #000;
      }
      
    .mobile-video {
        display: block;
        outline: 7px solid white;
        outline-offset: -1px;
        overflow: hidden;
        position: relative;
        z-index: -1;
    }
    
}


/* Hero Section */

@media only screen and (max-width: 1025px) {
    .hero h3{
        color: #13aea6;
    }
}
@media only screen and (min-width: 1025px) {
    .hero {
        text-align: center;
        background-size: cover;
        color: #fff; 
        height: 100vh;
        position: relative;
        width: 100%;
        overflow: hidden;
        background: 
            linear-gradient(180deg, #000 -50%, transparent 50%), 
            linear-gradient(0deg, #000 -50%, transparent 50%);
    }
    .desktop-video {
        display: block;
    }
    .hero-content{
        position: absolute;
        bottom: 0;
        color: #f1f1f1;
        width: 100%;
        padding: 20px;
        display: flex;
        flex-direction: column;
        align-items: start;
        text-align: start;
        margin-left: 30px;
    } 

    .hero-content-data{
        width: 700px;
    }

    .hero h3{
        font-size: 1.5rem;
        font-weight: 500;
        color: #13aea6;
    }

    .hero h1 {
        font-size: 2.6rem;
        margin-bottom: 10px;
        color: #f1f1f1;
        text-align: start;
    }

    .hero p {
        font-size: 1rem;
        margin-bottom: 20px;
        text-align: start;
    }


    #myvideo {
        max-width: 100%;
        min-width: 100%;
        min-height: 100%;
        overflow: hidden;
        position: relative;
        z-index: -1;
    }
    .hero video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: -1; /* Ensures video stays behind the header and content */
    }
    

    .hero-btn{
        background: #13aea6;
        color: #fff;
        font-weight: 500;
        padding: 10px 20px;
        text-decoration: none;
        border-radius: 10px;
    }
}

@media only screen and (min-width: 768px ) and (max-width: 1024px ) {
    .hero {
        text-align: center;
        background-size: cover;
        color: #fff;
        /* background: 
            linear-gradient(180deg, #000 0%, transparent 50%), 
            linear-gradient(0deg, #000 0%, transparent 50%);  */
    }

    .desktop-video {
        display: block;
    }

    .hero-content{
        color: #f1f1f1;
        width: 100%;
        padding: 20px;
        margin-top: -350px;
        margin-bottom: 40px;
    } 

    .hero h1 {
        font-size: 2.7rem;
        margin-bottom: 5px;
    }

    .hero p {
        font-size: 1.3rem;
        margin-bottom: 10px;
    }

    #myvideo {
        max-width: 100%;
        min-width: 100%;
        min-height: 100%;
        overflow: hidden;
        position: relative;
        z-index: -1;
   }

    .hero-btn{
        background: #13aea6;
        color: #fff;
        font-weight: 500;
        font-size: 15;
        padding: 8px 16px;
        text-decoration: none;
        border-radius: 10px;
    }
}

@media only screen and (max-width: 767px) {
    .hero {
        text-align: center;
        background-size: cover;
        color: #fff; 
        /* margin-bottom: -20px; */
        background: 
            linear-gradient(180deg, #000 -30%, transparent 50%), 
            linear-gradient(0deg, #000 -30%, transparent 50%);
    }

    .hero-content{
        bottom: 0;
        color: #f1f1f1;
        width: 100%;
        padding: 18px;
        margin-top: -200px;
        text-align: start;
    } 
    
    .hero h1 {
        font-size: 20px;
        margin-bottom: 10px;
        color:white;
        text-align: start;
    }

    .hero p {
        font-size: 12px;
        margin-bottom: 20px;
    }

    #myvideo {
        max-width: 100%;
        min-width: 100%;
        min-height: 100%;
        overflow: hidden;
        z-index: -1;
        position: relative;
    }

    .hero-btn{
        background: #13aea6;
        color: #fff;
        font-weight: 300;
        padding: 2px 6px;
        font-size: 12px;
        text-decoration: none;
        border-radius: 10px;
    }
}



/* Clients Section */

@media only screen and (min-width: 1025px){
    .featured{
        width: 100%;
        text-align: center;
        background: #E6F4EA;
        padding: 50px 20px;
      }
      
      .feature-content p{
        color: #555;
        font-size: 1.2rem;
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 40px;
      }
      
      .section-title{
        margin-bottom: 20px;
        font-size: 2em;
      }
      
      .client-in{
        margin: 10px 50px;
        padding: 20px;
        display: flex;
        overflow: hidden;
        -webkit-mask-image: linear-gradient(90deg,transparent, #fff 20%, #fff 80%, transparent );
    }
    
    .client-in ul{
        display: flex;
        gap: 50px;
    }
    
    .client-in ul li{
        list-style: none;
        display: inline-block;
        white-space: normal; 
        width: 150px;
        cursor: pointer;
        margin: 10px;
        transition: .5s;
    }
    
    .client-in-content{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        max-width: 150px;
        height: auto;
        word-wrap: break-word;  
        overflow-wrap: break-word;
    }
    
    .client-in ul li img{
        width: 100%;
        height: auto;
        margin-bottom: 5px;
        object-fit: contain;
    }
    
    .client-in ul li img:nth-child(1){
        transform: translateY(0);
        transition: .5s;
    }
    
    .client-in ul li img:nth-child(2){
        transform: translateY(0);
        transition: .5s;
    }
    
    /* Company Hover Section */
    .client-in ul li:hover img:nth-child(1){
        transform: translateY(-20%);
        transition: .5s;
    } 
    
     .client-in ul li:hover img:nth-child(2){
        transform: translateY(-20%);
        transition: .5s;
    }
    
    .client-in ul li{
        animation: animate 5s alternate infinite linear;
    }
    
    .client-in ul:hover li{
        animation-play-state: paused;
    }
    
    @keyframes animate {
        0%{
          transform: translate3d(0, 0, 0);  
        }
        100%{
          transform: translate3d(-1100px, 0, 0);
        }
    }
}

@media only screen and (min-width: 768px ) and (max-width: 1024px ){
    .featured{
        width: 100%;
        text-align: center;
        background: #E6F4EA;
        padding: 50px 20px;
      }
      
      .feature-content p{
        color: #555;
        font-size: 1.2rem;
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 40px;
      }
      
      .section-title{
        margin-bottom: 20px;
        font-size: 2.3em;
      }
      
      .client-in{
        margin: 10px 50px;
        padding: 20px;
        display: flex;
        overflow: hidden;
        -webkit-mask-image: linear-gradient(90deg,transparent, #fff 20%, #fff 80%, transparent );
    }
    
    .client-in ul{
        display: flex;
        gap: 30px;
    }
    
    .client-in ul li{
        list-style: none;
        display: inline-block;
        white-space: normal; 
        width: 150px;
        cursor: pointer;
        margin: 10px;
        transition: .5s;
    }
    
    .client-in-content{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        max-width: 100px;
        height: auto;
        word-wrap: break-word;   
        overflow-wrap: break-word;
    }
    
    .client-in ul li img{
        width: 100%;
        height: auto;
        margin-bottom: 10px;
    }
    
    .client-in ul li img:nth-child(1){
        transform: translateY(0);
        transition: .5s;
    }
    
    .client-in ul li img:nth-child(2){
        transform: translateY(0);
        transition: .5s;
    }
    
    /* Company Hover Section */
    .client-in ul li:hover img:nth-child(1){
        transform: translateY(-100%);
        transition: .5s;
    } 
    
     .client-in ul li:hover img:nth-child(2){
        transform: translateY(-100%);
        transition: .5s;
    }
    
    .client-in ul li{
        animation: animate 15s alternate infinite linear;
    }
    
    .client-in ul:hover li{
        animation-play-state: paused;
    }
    
    @keyframes animate {
        0%{
          transform: translate3d(0, 0, 0);  
        }
        100%{
          transform: translate3d(-1100px, 0, 0);
        }
    }
}

@media only screen and (max-width: 767px ){
    .featured{
        width: 100%;
        text-align: center;
        background: #E6F4EA;
        padding: 25px 10px;
      }
      
      .feature-content p{
        color: #555;
        font-size: 16px;
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 40px;
      }
      
      .section-title{
        margin-bottom: 20px;
        font-size: 27px ;
      }
      
      .client-in{
        margin: 10px 50px;
        padding: 20px;
        display: flex;
        overflow: hidden;
        font-size: 10px;
        /* -webkit-mask-image: linear-gradient(90deg,transparent, #fff 5%, #fff 95%, transparent ); */
    }
    
    .client-in ul{
        display: flex;
        gap: 10px;
    }
    
    .client-in ul li{
        list-style: none;
        display: inline-block;
        white-space: normal; 
        width: 50px;
        cursor: pointer;
        margin: 10px;
        transition: .5s;
    }
    
    .client-in-content{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        max-width: 50px;
        height: auto;
        word-wrap: break-word;  
        overflow-wrap: break-word;
    }
    
    .client-in ul li img{
        width: 100%;
        height: auto;
        margin-bottom: 10px;
    }
    
    .client-in ul li img:nth-child(1){
        transform: translateY(0);
        transition: .5s;
    }
    
    .client-in ul li img:nth-child(2){
        transform: translateY(0);
        transition: .5s;
    }
    
    .client-in ul li:hover img:nth-child(1){
        transform: translateY(-100%);
        transition: .5s;
    } 
    
     .client-in ul li:hover img:nth-child(2){
        transform: translateY(-100%);
        transition: .5s;
    }
    
    .client-in ul li{
        animation: animate 12s alternate infinite linear;
    }
    
    .client-in ul:hover li{
        animation-play-state: paused;
    }
    
    @keyframes animate {
        0%{
          transform: translate3d(0, 0, 0);  
        }
        100%{
          transform: translate3d(-630px, 0, 0);
        }
    }
}
.clients {
    text-align: center;
    padding: 50px 20px;
}
.clients h2 {
    font-size: 2.3rem;
    margin-bottom: 40px;
}
.client-logos {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
}
.client-logos img {
    max-width: 150px; 
    max-height: 100px; 
    object-fit: contain;
    margin: 10px;
}





/* Sevice Section */

.service-section {
    text-align: center;
    padding: 120px 20px 40px 20px;
}

.service-section h1 {
    font-size: 2.3em;
    margin-bottom: 20px;
}

.service-section p {
    font-size: 1.2em;
    color: #555;
    margin-bottom: 40px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.service-icons-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin: 0 20px;
}

.service-icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
}

.service-icon-item img {
    width: 90px;
    height: 90px;
    margin-bottom: 10px;
}

.service-icon-item p {
    font-size: 0.9em;
    color: #333;
}

@media (min-width: 1200px) {
    .service-icon-item {
        flex: 1 1 calc(25% - 40px); 
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .service-icon-item {
        flex: 1 1 calc(33.33% - 40px); 
    }
}

@media (min-width: 480px) and (max-width: 767px) {
    .service-icon-item {
        flex: 1 1 calc(50% - 40px); 
    }
}

@media (max-width: 479px) {
    .service-icon-item {
        flex: 1 1 100%; 
    }
}




@media only screen and (min-width: 768px) {
    .footer{
        display: flex;
        flex-direction: column;
        
    }
    .contact{
        justify-content: center; 
        align-items: center; 
        height: 150px;
        background: #E6F4EA;
    }
    .icon-div{
        display: flex;
        height :180px ;
        margin-left: 15%;
        margin-right: 15%;
        margin-top:-10px ;
        justify-content: space-between;
        align-items: center;
    }

    .contact img{
        height : 50px ;
        width: 45px;
        margin-bottom: 10px;
    }

    .icon_container{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }



    .links-div{
        display: flex;
        margin-top: 40px;
        margin-left: 3%;
        margin-right: 3%;
        justify-content: space-between;
        height: 320px;
    }

    .link_ele{
        display: flex;
        flex-direction: column;
    }
    .link_ele img{
        
        height: auto;
        width: 250px;
    }

    .links-div p{
        margin-bottom: 15px;
    }
    .revin-cont{
        margin-left: 2%;
        width:310px;
        margin-top: 20px;
        
    }

    .revin-cont img{
        height: 40px;
        width: 40px;
    }

    .social-media{
        margin-left: 6%;
        margin-right: 6%;
        display: flex;
        justify-content:space-between ;
    }

    .heading1{
        font-size: 19px;
        font-weight:bold;
    }
    a{
        text-decoration: none;
        color: black;
    }

    a p:hover{
        scale: 1.1 ;
        transition:  .3s;
    }
    a img:hover{
        scale: 1.1 ;
        transition:  .3s;
    }

    .download-links{
        display: flex;
        flex-direction: column ;
    }
    .download-links-div img{
        height: 50px;
        width: 140px;
    }

    .download-links-div .link-css-con{
        width: 250px;
    }

    .copy-div{
        justify-content:space-between ;
        align-items: center;
    }

    .copy-div p{
        text-align: center;
        margin-bottom :0%;
    }
}


@media only screen and (max-width: 767px) {
    .footer{
        display: flex;
        flex-direction: column;
        
    }
    .contact{
        justify-content: center; 
        align-items: center; 
        height: 80px;
        background: #E6F4EA;
    }
    .icon-div{
        display: flex;
        margin-left: 3%;
        margin-right: 3%;
        margin-top: 10px ;
        justify-content: space-between;
        align-items: center;
    }

    .contact img{
        height : 20px ;
        width: 20x;
        margin-bottom: 10px;
    }
    .contact p{
        font-size: 9px;
    }
    .icon_container{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }



    .links-div{
        display: flex;
        margin-top: 40px;
        margin-left: 3%;
        margin-right: 3%;
        justify-content: space-between;
        height: 200px;
    }

    .link_ele{
        display: flex;
        flex-direction: column;
    }
    .link_ele img{
        
        height: auto;
        width: 50px;
        margin-bottom: 8px;
    }

    .links-div p{
        margin-bottom: 8px;
    }
    .revin-cont{
        width:100px;   
    }

    .links p{
       font-size: 8px;  
    }

    .revin-cont img{
        height: 15px;
        width: 15px;
    }

    .social-media{
        display: flex;
        justify-content:space-between ;
    }

    .heading1{
        font-size: 10px;
        font-weight:bold;
    }
    a{
        text-decoration: none;
        color: black;
    }

    a p:hover{
        scale: 1.1 ;
        transition:  .3s;
    }
    a img:hover{
        scale: 1.1 ;
        transition:  .3s;
    }

    .download-links{
        display: flex;
        flex-direction: column ;
    }
    .download-links-div img{
        height: 20;
        width: 50px;
    }

    .download-links-div .link-css-con{
        width: 60px;
    }

   
    .copy-div p{
        text-align: center;
        margin-bottom :0%;
        font-size: 8px;
    }
}




/* General container */
.journey-container {
    padding: 50px 20px;
    background-color: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    gap: 20px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}


.about-section {
    max-width: 600px;
    padding: 20px;
    margin-left: 30px;
    box-sizing: border-box;
    flex: 1;
}

.about-section h1, .about-section h2 {
    color: #39376f;
    font-weight: 650;
    margin-bottom: 20px;
}

.about-section h1 {
    font-size: 2.3rem;
}

.about-section-content {
    padding: 20px 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    background: #f9f9f9;
}

.about-section p {
    line-height: 1.6;
    margin-bottom: 20px;
}

.inverted-comma {
    font-size: 90px;
    color: orange;
    margin-left: -30px;
    display: block;
}

.inverted-icon {
    margin-bottom: -50px;
}

.wrapper {
    flex: 1;
    display: flex;
    justify-content: center;
    margin-top: 25px;
    margin-right: 200px;
}

.wrapper-heading{
    margin-left: 100px;
}

.wrapper-heading h2{
    color: #39376f;
    font-size: 2rem;
    font-weight: 650;
    
}

.outer {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
    gap: 20px;
    margin-left: -220px;
    margin-top: 100px;
    /* overflow: hidden; */
}

.card {
    background: #fff;
    width: 500px;
    display: flex;
    align-items: center;
    padding: 50px;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    transform: translateY(100%) scale(0.5);
    justify-content: space-between;
    border-radius: 100px 20px 20px 100px;
    box-shadow: 0px 10px 18px rgba(0, 0, 0, 0.1);
    animation: animate1 15s linear infinite;
    animation-delay: calc(3s * var(--delay));
    /* z-index: var(--delay); */
    /* z-index: calc(7 - var(--delay)); */
}


/* Dynamically adjust z-index for stacking */
.card:nth-child(1) {
    z-index: 1;
}
.card:nth-child(2) {
    z-index: 2;
}
.card:nth-child(3) {
    z-index: 3;
}
.card:nth-child(4) {
    z-index: 4;
}
.card:nth-child(5) {
    z-index: 5;
}
.card:nth-child(6) {
    z-index: 6;
}

.outer:hover .card {
    animation-play-state: paused;
}

/* .card:last-child {
    animation-delay: calc(-3s * var(--delay));
} */

@keyframes animate1 {
    0% {
        opacity: 0;
        transform: translateY(100%) scale(0.5);
    }
    5%, 20% {
        opacity: 0.4;
        transform: translateY(100%) scale(0.7);
    }
    25%, 40% {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0%) scale(1);
    }
    45%, 60% {
        opacity: 0.4;
        transform: translateY(-100%) scale(0.7);
    }
    65%, 100% {
        opacity: 0;
        transform: translateY(-100%) scale(0.5);
    }
}




.card .content {
    display: flex;
    align-items: center;
}

.card .img {
    height: 145px;
    width: 145px;
    position: absolute;
    left: -2px;
    bottom: 2px;
    background: #fff;
    border-radius: 50%;
    padding: 5px;
    /* box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); */
}

.card .img img {
    height: 100%;
    width: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.card .details {
    margin-left: 120px;
}

.details span {
    font-weight: 500;
    font-size: 18px;
}

.card p {
    text-decoration: none;
    padding: 7px 18px;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
    border-radius: 25px;
    color: #fff;
    background: #10afab;
    transition: all 0.3s ease;
}

.card a:hover {
    transform: scale(0.94);
}


/* Media Query for Responsive Design */
@media ((min-width: 768px) and (max-width: 1050px)) {
    .journey-container {
        margin-top: 150px;
    }    
   
    .about-section-content{
        max-width: 430px;
        margin-left: -45px;
    }

    .wrapper-heading{
       margin-left: 0;
        
    }
}

@media (max-width: 480px) {
    .journey-container {
        flex-direction: column;
        align-items: center;
    }

    .about-section {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-left: 0;
        padding: 0;
        width: 330px;
    }

    .about-section-content{
        width: 100%;
    }

    .wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        margin-right: 0;
    }

    .wrapper-heading{
        margin-left: 0;
    }

    .outer {
        margin: 120px 0 80px -10px;
    }

    .card {
        background: #fff;
        width: 350px;
        display: flex;
        align-items: center;
        padding: 50px;
        opacity: 0;
        pointer-events: none;
        position: absolute;
        justify-content: space-between;
        border-radius: 100px 20px 20px 100px;
        box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.1);
        animation: animate1 15s linear infinite;
        animation-delay: calc(3s * var(--delay));
    }
    
    .wrapper-heading h2 {
        font-size: 1.5rem;
    }

    .card {
        padding: 15px;
    }

    .card .img {
        height: 60px;
        width: 60px;
    }

    .card .details {
        margin-left: 70px;
    }

    .details span {
        font-size: 14px;
    }

    .card p {
        font-size: 12px;
        padding: 5px 10px;
    }

}




    .revin-new-design {
        padding: 50px 20px;
        max-width: 1000px;
        margin: 0 auto;
        height: 54rem;
    }
    
    .revin-new-design-heading {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        justify-content: center;
        margin-bottom: 40px;
    }
    
    .revin-new-design-text-section{
        margin: 5px 5px 5px 30px;
    }
    
    .revin-new-carousel {
        perspective: 1000px;
        position: relative;
    }
    
    .revin-new-carousel-container {
        display: flex;
        position: relative;
        transform-style: preserve-3d;
        transition: transform 6s ease-in-out;
        height: auto; 
    }
    
    .revin-new-carousel-card {
        min-width: 100%; 
        height: auto; 
        position: absolute;
        display: flex;
        align-items: center;
        justify-content:space-between;
        background: white;
        border-radius: 8px;
        box-shadow: 
            0px 0px 5px rgba(0, 0, 0, 0.1),
            0px 0px 10px rgba(0, 0, 0, 0.05),
            0px 0px 15px rgba(0, 0, 0, 0.03);
        transition: opacity 0.5s ease, transform 1s ease;
        opacity: 0; 
        z-index: 1; 
        pointer-events: none; 
    }
    
    .revin-new-carousel-card.active {
        opacity: 1;
        z-index: 2;
        pointer-events: auto;
    }
    
    .revin-new-design-product-title {
        font-size: 36px;
        color: #333;
    }
    
    .revin-new-design-highlight {
        color: #31C6C3;
    }
    
    .revin-new-design-logo {
        display: flex;
        flex-direction: column;
    }
    
    .revin-revin {
        width: 10rem;
        height: auto;
    }
    
    .revin-revin img {
        width: 100%;
    }
    
    .revin-sight {
        width: 22rem;
        height: auto;
    }
    
    .revin-sight img {
        width: 100%;
        margin-left: -10px;
    }
    .skypulse{
        width: 100%;
        margin-left: -10px;
    }
    
    .revin-new-design-description {
        font-size: 16px;
        color: #333;
        margin-top: 20px;
        margin-bottom: 20px;
        line-height: 1.5;
    }
    
    .revin-new-design-image-section {
        flex: 1;
        display: flex;
        justify-content: center;
    }
    
    .revin-new-design-images {
        align-items: center;
        height: 30rem;
        margin: 10px;
    }
    
    .revin-new-design-images img {
        height: 100%;
        margin-bottom: 20px;
    }
    
    .revin-new-carousel-buttons {
        position: absolute;
        left: -20%;
        right: -20%;
        display: flex;
        justify-content: space-between;
        transform: translateY(500%);
    }
    
    .revin-new-carousel-btn {
        background: #31C6C3;
        border: none;
        padding: 10px 20px;
        border-radius: 50%;
        cursor: pointer;
        color: white;
        font-size: 20px;
        transition: background 0.3s ease;
    }
    
    .revin-new-carousel-btn:hover {
        background: #28a5a2;
    }
    
    

  
  /* Show desktop section for screens 768px and above (tablets and desktops) */
  @media only screen and (min-width: 768px) {
    .revin-new-design {
      display: block;
    }
  }

@media (min-width: 768px) and (max-width: 1199px) {
    .revin-new-design {
        max-width: 700px;
        padding: 40px 20px;
        height: 43rem;
    }

    .revin-new-carousel-card {
        min-width: 100%; 
       
    }
    .revin-new-design-text-section{
        margin: 10px 5px 10px 20px;
    }
    
    .revin-new-design-heading h1 {
        font-size: 32px;
    }

    
    .revin-revin {
        width: 8rem;
        height: auto;
    }
    
    .revin-revin img {
        width: 100%;
    }
    
    .revin-sight {
        width: 16rem;
        height: auto;
    }
    
    .revin-sight img {
        width: 100%;
    }

    .revin-new-carousel-card {
        flex-direction: row;
    }

    .revin-new-design-images {
        height: 20rem;
    }
    .revin-new-design-images img {
        height: 100%;
    }
    .log-img{
        height: 16rem ;
    }
    .log-img img{
        height: 100%;
    }

    .revin-new-carousel-btn {
        font-size: 18px;
    }
}


@media (min-width: 600px) and (max-width: 767px) {
    .revin-new-design {
        padding: 40px 15px;
        height: auto;
    }

    .revin-new-design-heading h1 {
        font-size: 28px;
    }

    .revin-new-design-logo {
        flex-direction: row;
    }

    .revin-new-carousel-card {
        flex-direction: column;
    }

    .revin-new-design-images {
        height: 20rem;
    }

    .revin-new-carousel-btn {
        font-size: 16px;
    }
}


/* Mobile view (display this content only on small screens) */
@media (max-width: 767px) {
    .revin-new-design {
        display: none;
    }
    .revin-new-products {
        padding: 40px 20px;
        display: block; 
    }

    h1 {
        text-align: center;
        color: #333;
    }

    .revin-new-intro {
        text-align: center;
        color: #666;
        margin-bottom: 20px;
        margin-top: 5px;
    }

    .revin-new-product {
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        margin-bottom: 20px;
        padding: 15px;
    }

    .revin-new-product img {
        max-width: 100%;
        border-radius: 8px;
    }

    .revin-new-product-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        color: #333;
        transition: color 0.3s ease; 
    }

    .revin-new-product-title.expanded {
        color: #008080;
    }

    .revin-new-product-title h2 {
        margin: 0;
    }

    .revin-new-product-title-images {
        display: flex;
        gap: 6px; 
    }

    .revin-new-product-title-images img {
        width: 45px; 
        height: 45px; 
        object-fit: contain; 
    }

    .revin-new-product-title .revin-new-toggle {
        font-size: 24px;
        color: #008080;
    }

    .revin-new-product-content {
        display: none;
    }

    .revin-new-product-content.active {
        display: block;
    }

    .revin-new-product-description h3 {
        color: #333;
    }

    .revin-new-product-description p {
        color: #666;
        margin-bottom: 10px;
    }

    .revin-new-buttons {
        display: flex;
        justify-content: space-between;
    }

    .revin-new-btn {
        text-decoration: none;
        padding: 10px 15px;
        border-radius: 4px;
        color: #fff;
    }

    .revin-new-read-more {
        background-color: #006666;
    }
    



}

/* Tablet and Desktop View (hide the content on larger screens) */
@media (min-width: 768px) {
    .revin-new-products {
        display: none;
    }
}


/* Default style for larger screens (font-size 24px) */
#whatsapp-icon {
    font-size: 17px;
}

/* Responsive style for screens smaller than 767px (font-size 10px) */
@media only screen and (max-width: 767px) {
    #whatsapp-icon {
        font-size: 10px;
    }
}



  
.below-footer {
    background-color: #fff;
    color: #333;
    padding: 10px;
    margin-left: 30px;
    margin-bottom: 10px;
}

.below-footer-content {
    max-width: 500px;
    margin-top: -60px;
    padding: 0 15px;
}

.below-footer-content h2 {
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.below-footer-content p {
    margin: 5px 0;
}

.below-footer-content a {
    color: #333;
    text-decoration: none;
}

.below-footer-divider {
    border: 0;
    height: 1px;
    background: #39376f;
    margin: 15px 0;
}

.below-footer-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.below-footer-bottom .below-footer-social-icons {
    display: flex;
    gap: 15px;
    margin-top: 10px;
    margin-right: 20px;
}

.below-footer-bottom .below-footer-social-icons img {
    width: 24px;
    height: 24px;
}

/* Responsive layout for tablets and larger screens */
@media (min-width: 768px) {
    .below-footer-bottom {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .below-footer-content {
        margin-top: 0;
    }

    .below-footer-content h2 {
        font-size: 1.75rem;
    }
}

/* Adjustments for smaller screens */
@media (max-width: 767px) {
    .below-footer {
        margin-left: 20px;
        padding: 15px;
    }

    .below-footer-content {
        max-width: 100%;
        margin-top: -30px;
        margin-left: -20px;
    }

    .below-footer-content a {
        color: #333;
        text-decoration: none;
        font-size: 0.6rem;
    }

    .below-footer-bottom {
        flex-direction: column;
    }

    .below-footer-bottom .below-footer-social-icons {
        margin-top: 10px;
        margin-right: 0;
        justify-content: center;
    }
}

/* Mobile-first approach */
@media (max-width: 480px) {
    .below-footer {
        margin-left: 10px;
        margin-bottom: 5px;
        padding: 10px;
    }

    .below-footer-content h2 {
        font-size: 0.8rem;
    }

    .below-footer-content p {
        font-size: 0.6rem;
    }

    .below-footer-bottom .below-footer-social-icons img {
        width: 20px;
        height: 20px;
    }
}