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



/* HOME HERO BANNER CSS CODE START */
.hero-slider {
    position: relative; /* Ensure it's relative to position the absolute elements */
    height: 665px; 
    /* top: -10rem; */
}
        
        .slide {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            opacity: 0;
            transition: opacity 1.2s ease;
            display: flex;
            align-items: center;
        }
        
        .slide.active {
            opacity: 1;
        }
        
           .hero-title {
            font-family: "Archivo", sans-serif;
        }
   
        
    .slide-content {
    position: relative;
    z-index: 10; /* Make sure it stays above the background image */
    margin-top: 150px; /* You can adjust this for more space */
    padding: 0 15px;
    text-align: left;
    transition: all 1s ease;
    max-width: 720px;
}
        
        /* Center content on mobile and tablet */
        @media (max-width: 1023px) {
            .slide {
                justify-content: center;
            }
            
            .slide-content {
                text-align: center;
                padding: 0 20px;
            }
        }
        
        /* Left align on desktop */
        @media (min-width: 1024px) {
            .slide {
                justify-content: flex-start;
                padding-left: 5%;
                align-items:center;
            }
            
            .slide-content {
                text-align: left;
            }
        }
        
        .slide.active .slide-content {
            opacity: 1;
            transform: translateY(0);
        }
        
        .hero-title {
            color:rgb(17, 17, 17);
            opacity: 0;
            font-size:50px;
            transform: translateY(30px);
            transition: all 0.8s ease;
        }
        
        .slide.active .hero-title {
            opacity: 1;
            transform: translateY(0);
            
            transition-delay: 0.5s;
        }
        
        .hero-subtitle {
            color:white;
            opacity: 0;
            font-weight:500;
            font-size:30px;
            transform: translateY(30px);
            transition: all 0.8s ease;
            margin-top:20px;
            margin-bottom:20px;
    font-family: "Roboto", sans-serif;
        
        }
        
        .slide.active .hero-subtitle {
            opacity: 1;
            transform: translateY(0);
            transition-delay: 0.7s;
        }
        
        .hero-description {
            opacity: 0;
                     font-family: "Roboto", sans-serif;
            font-size:16px;
        font-weight:500;
        letter-spacing:0.1s;
            transform: translateY(30px);
            transition: all 0.8s ease;
            color: white;
        }
        
        .slide.active .hero-description {
            opacity: 1;
            transform: translateY(0);
            transition-delay: 0.9s;
        }
        
        .divider {
            height: 2px;
            width: 80px;
            background: #e11d48;
            margin: 20px 0;
            opacity: 0;
            transform: scaleX(0);
            transition: all 0.8s ease;
        }
        
        @media (max-width: 1023px) {
            .divider {
                margin: 20px auto;
            }
        }
        
        .slide.active .divider {
            opacity: 1;
            transform: scaleX(1);
            transition-delay: 1.1s;
        }
        
        .banner-btn {
            padding: 15px;
            border-radius:100px;
            border:1px solid #ffffff38;
            display:flex;
            align-items:center;
            justify-content:center;
            gap:15px;
            padding: 13px 30px;
            cursor: pointer;
            transform: translateY(20px);
            opacity: 0;
        }
        
        .slide.active .banner-btn {
            opacity: 1;
            transform: translateY(0);
            transition-delay: 1.3s;
        }
        

             
        .banner-btn:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 0%;
            height: 100%;
            background: #D6202A;
            transition: all 0.5s ease;
            z-index: -1;
            border-radius: 50px;
        }
        
        .banner-btn:hover:before {
            width: 100%;
        }
        
        .banner-btn:hover {
            border-color: transparent;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        }

    .slide.active .features-container{

    }

          .features-container {
    position: absolute;
    bottom: 0; /* Make sure it's always at the bottom */
    left: 0;
    width: 100%;
    z-index: 10; /* Ensure it is above the slider content */
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 10px; /* Adjust padding for better spacing */
    box-sizing: border-box; /* Ensure padding doesn't affect width */
}
            
            @media (min-width: 768px) {
                .features-container {
                    flex-direction: row;
                    gap: 40px;
                }
                   .slide-content{
                    padding-left: 20px;
                    padding-right: 20px;
                   }
            }
            
            .slide.active .features-container {
                /* opacity: 1;
                transform: translateY(0);
                transition-delay: 1.5s; */
            }

            @media (max-width: 1023px) {
    
            }
            
            .newsletter-form {
                display: flex;
                max-width: 400px;
                margin-top: 15px;
            }
            
            @media (max-width: 1024px) {
                .newsletter-form {
                    margin: 15px auto 0;
                }
                      .slide-content{
                    max-width: 620px;
                }
            }
           
            
            .newsletter-input {
                flex: 1;
                padding: 12px 16px;
                border: none;
                border-radius: 4px 0 0 4px;
                outline: none;
                color: #333;
            }
            
            .newsletter-btn {
                background: #1e40af;
                color: white;
                border: none;
                padding: 0 20px;
                border-radius: 0 4px 4px 0;
                cursor: pointer;
            }
            
            .slider-controls {
                position: absolute;
                bottom: 40px;
                left: 0;
                right: 0;
                z-index: 20;
                display: flex;
                justify-content: center;
                gap: 12px;
            }
            
            .slider-dot {
                width: 12px;
                height: 12px;
                border-radius: 50%;
                background: rgba(255, 255, 255, 0.5);
                cursor: pointer;
                transition: all 0.3s ease;
            }
            
            .slider-dot.active {
                background: white;
                transform: scale(1.2);
            }
            
            @media (max-width: 768px) {
                .hero-title {
                    font-size: 40px !important;
                }
                
                .hero-subtitle {
                    font-size: 1.5rem !important;
                }
                
                .newsletter-form {
                    flex-direction: column;
                }
                
                .newsletter-input {
                    border-radius: 4px;
                    margin-bottom: 10px;
                }
                
                .newsletter-btn {
                    border-radius: 4px;
                    padding: 12px;
                }

                        .slide-content{
                    max-width: 620px;
                }
            
            }

                   @media (max-width: 640px) {
    .slide-content{
                    max-width: 560px;
                }
                   }
                @media (max-width: 480px) {
                .hero-title {
                    font-size: 32px !important;
                }
               .slide {
        height: 80vh; /* Adjust height for smaller screens */
    }
                  .slide-content {
        max-width: 328px; /* Ensure content doesn't overflow */
    }
            }
/* HOME HERO BANNER CSS CODE END */




/* HOME WE REPRESENT YOU 9 CARD SLIDER CODE START */



/* HOME WE REPRESENT YOU 9 CARD SLIDER CODE END */