:root{
    --primary-color: #15102E;
    --secondary-color: #faf7f2;
    --header-color: #FE901B;
    --primary-bg: #faf7f2;
    --secondary-bg: #15102E;
    --primary-gradient: radial-gradient(circle at 24.1% 68.8%, var(--primary-color) 30%, var(--primary-content) 70%);
    --secondary-gradient: linear-gradient(135deg, #FE901B 10%, rgb(245, 85, 85) 100%);
    --primary-content: #4559f7;
    --hover-primary-content: #7C8CFF;
    --hover-secondary-content: #ba6c17;
    --primary-font: "Poppins", sans-serif;
}

html,body
   {
        overflow-x: hidden; 
        margin: 0;
        padding: 0;
    }
body{
    font-family: var(--primary-font);
    background-color: var(--primary-bg);
}
nav ul{
    margin-left: 10px;

}
.nav-link:hover{
opacity: .6;
transition: ease-in-out 200ms;
}

nav .active{
    font-weight: 600;
    text-decoration: underline;
}
.dropdown-heading{
    color: var(--hover-secondary-content);
}
.nav-link{
    font-family: var(--primary-font) !important;
    color: var(--secondary-color) !important;
}
.nav-link-scrolled{
    color: var(--primary-color) !important;
}

.nav-buttons-group{
    margin-right: 0px;
}

.nav-button{
    color: var(--secondary-color);
    border-color: var(--header-color);
    border-radius: 5px;
    background-color: var(--header-color);
}
.nav-button-scrolled{
    color: var(--secondary-color);
    background-color: var(--primary-content);
    border-color: var(--primary-content);
}

.nav-button:hover{
    color: var(--primary-color);
    background-color: var(--hover-secondary-content);
    transition: ease-in-out 300ms;
}
.nav-button-scrolled:hover{
    color: var(--primary-color);
    background-color: var(--hover-primary-content);
    transition: ease-in-out 300ms;
    }
.navbar{
    background-color: transparent !important;
    transition: ease-in-out 500ms;
}
.scrolled{
   background-color: var(--primary-bg) !important; 
}

.logo {
    width: auto;
    height: 60px;
}
.offcanvas{
    color: var(--secondary-color);
    background-color: var(--secondary-bg) !important;
}
.offcanvas-scrolled{
    background-color: var(--primary-bg) !important;
    color: var(--secondary-color);
}
.offcanvas-header{
    color: var(--header-color) !important;
}
.btn-close{
    filter: invert(0.5) sepia(1) 
            saturate(60) !important;
}
.hero-container {
    background: var(--secondary-bg);
    background-image: url(/images/background3.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin: 0 auto;
    text-align: center;
    max-width: 100%;
    height: 100vh;
}
header{
    padding-top: 15vh;
    text-align: left;
}
header h1{
color: var(--secondary-color);

}
header h3{
    color: var(--header-color);
    
}


h1{
    font-weight: 600;
font-size: clamp(36px,5vw,92px);
margin-bottom: 20px;
}
h2{
    font-size: clamp(32px,7vw,48px);
}
h3{
    text-transform: uppercase;
    font-size: clamp(20px,3vw,32px);
    color: var(--primary-color);
}
header img{
    height: 50vh;
}
.home-products h1{
    padding-top: 60px;
    color: var(--header-color);
}
.home-products h1, h3{
    text-align: center;
    letter-spacing: 5px;
    
}
.home-products h2{   
    margin: 10px auto;
    font-size: clamp(14px,2vw,24px);
}
.integration-button{
    margin-top: 20px;
    color: var(--secondary-color);
    border-color: var(--header-color);
    background-color: var(--header-color);
}
.integration-button:hover{
    color: var(--primary-color);
    border-color: var(--hover-secondary-content);
    background-color: var(--hover-secondary-content);
    transition: ease-in-out 300ms;
}
.integration-link{
    text-decoration: none;
}
.home-commitment{
    background-color: var(--secondary-bg);
    color: var(--primary-bg);
    padding: 30px;
    margin: 60px 0px ;
    max-width: 100%;
}
.home-commitment h3{
    color: var(--secondary-color);
}
g{
    max-width: 100%;
}

.start-button{
    color: var(--secondary-color);
    border-color: var(--secondary-color);
}
.start-button:hover{
    color: var(--primary-color);
    background-color: var(--hover-primary-content);
    border-radius: 5px;
    border-color: var(--secondary-bg);
    transition: ease-in-out 300ms;
    }
.home-benefits{
    color: var(--primary-color);
}
.home-benefits p{
    color: var(--header-color);
}
.home-benefits i{
        font-size: 50px;
        color: var(--header-color);
}
footer{
    padding: 60px 0px;
    background-color: var(--secondary-bg);
    color: var(--secondary-color);
}

footer h1{
    font-size: 22px;
}
footer ul{
    list-style: none;
    color: var(--header-color);
    
}
footer a{
    text-decoration: none;
    color: var(--secondary-color);
    font-size: 14px;
}
footer a:hover{
color: var(--hover-secondary-content);
transition: ease-in-out 300ms;
}
.footer-logo {
    aspect-ratio: 1 / 1;
    max-width: 200px;
}
.page header{
    background: var(--primary-gradient);
    color: var(--secondary-color);
    position: relative;
}
header .statement {
    padding: 0px 12vw;
    text-align: center;
}
.choose{
    font-size: clamp(16px, 3vw, 24px);
    padding-bottom: 15vh;
}

.integration-page dotlottie-player{
    max-width:500px;
    height: auto;
}
.space{
    padding-bottom: 28px;
}
.back-to-top{
    display: none;
    
}
.back-to-top-scrolled{
    display: block;
}
.back-to-top i{
    color: var(--secondary-color);
    font-size: clamp(24px, 1vw, 48px);
    border-radius: 360px;
    background-color: var(--primary-content);
    padding: 20px 20px;
}
.back-to-top i:hover{
    background-color: var(--hover-primary-content);
    transition: ease-in-out 300ms;
}
.integration-grid{
    color: var(--secondary-color);
    position: relative;
    margin-top: -120px;
    max-width: 100%;
    z-index: 15;
}
.integration-card{
    border: #faf7f2 1px solid;
    background-color: var(--primary-bg);
    aspect-ratio: 1 / 1;
    color: var(--primary-color);
    border-radius: 5px clamp(20px, 1vw, 50px);
    box-shadow: 0px 0px 10px #1b2640;
    min-width: 100px;
    max-width: 200px;
    text-decoration: none;
    padding-top: 10px;
    position: relative;
    overflow: hidden;
    z-index: 1;
}
.integration-card p {
    font-size: clamp(20px, 1vw, 24px);
    z-index: 4;
}
.integration-card:hover i {
    color: #fff;
    transform: rotateY(360deg);
  }
  .integration-card:hover p {
    color: #fff;
  }
  .integration-card:before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--header-color);
    transition: .5s;
    z-index: 2;
  }
  
  .integration-card:hover:before {
    bottom: 0;
  }
  .integration-card i {
    position: relative;
    transition: .5s;
    z-index: 3;
    text-align: center;
    font-size: 50px;
  }
.integration-content{
    padding: 30px 40px;
    padding-bottom:5vw;
}
.integration{
    padding-top: 80px;
    padding-bottom: 20px;
    
}
.all-features h3{
    font-size: clamp(16px, 3vw, 24px);
    font-weight: 600;
}

hr{
    color: var(--secondary-color);
    background: linear-gradient(to right, var(--primary-bg), var(--secondary-bg), var(--primary-bg));
    height: 3px;
}
.how, .contact-content, .hardware-content, .quote{
    padding: 10px;
    background: var(--secondary-gradient);
    color: var(--secondary-color);
}
.how p{
    margin-bottom: 0px;
}
.how h3, .hardware-content h3{
    color: var(--secondary-color);
    text-align: start;
}
.about-page header, .services-page header, .hardware-page header{
    font-size: 20px;
    padding-bottom: 10vh;
}
.contact-content, .contact-content h3, .service-info{
    font-size: 20px;
    padding: 10px 0;
    text-align: start;
}
.contact-info li {
    list-style: none;
}
.service-info h3{
    text-align: start;
}
.carousel-item{
    background-color: var(--primary-bg);
  }
  .product-info, .product-info h3{
    text-align: center;
  }
  header hr{
    color: var(--header-color);
    background: var(--header-color);
    width: 25%;
    margin: 40px auto;
  }
   
  
@media (max-width: 991.98px) { 
    
    
    nav li{
        padding-left: 30px;
    }
       
     h3{
        letter-spacing: normal !important;
     }
     .logo {
        width: auto;
        height: 30px;
    }
    header{
        padding-top: 15vh;
    }
    .hero-container{
        height: 60vh;
    }
    .integration-content{
        padding: 30px 20px;
    }
    
 }


 @media (max-width: 1199.98px) { 
    nav ul{
        margin-left: 0; 
    }
    .overlay-text{
        display: none;
     }
    .mobile-overlay-text{
        display: block;
    }
    .button-text{
        display: none;
    }
    .nav-buttons-group{
        margin-right: 0;
    }
  }