.hero-section{
        
      /* background: var(--primary-color);*/
      background-color: antiquewhite;

        
}





.hero-section .home-content{
        display:flex;
        align-items: center;
        padding-left: 4%;
        color:var(--white-color);
        justify-content: space-between;
        margin-right:5%;
        padding-top: 5%;
        

}
.hero-section .hero-details .title{
        font-size:30px;
        color:orange;
        font-family: "Miniver",sans-serif;
}
.hero-section .hero-details .description{

        font-size: var(--font-size-xl);
        margin-top: 8px;
        max-width: 70%;
        font-size: var(--font-size-m);
        color: #e1e9f2;
        
        
        

}
.hero-section .hero-details .row{
        padding: 10px 26px;
        color:var(--primary-color);
        background: rgb(215, 218, 211);
        border-radius: border-box;
        border: 2px solid transparent;
        gap: 2px;
        
}
.hero-section .hero-details .btn1{
        padding: 10px 26px;
        color:var(--primary-color);
        background: rgb(215, 218, 211);
        border-radius: border-box;
        border: 2px solid transparent;
        gap: 2px;
}
.hero-section.hero-image-wrapper{
    /*
        max-width: 500px;
        margin-right: 0px;
        padding-right: 20%;
        */
/*
        position: relative;
    width: 100%;
    height: 500px; /* Adjust the height as needed 
    background-image: url('images/banner.jpg'); / Replace with your banner image path 
    background-size: cover;  /* Ensures the image covers the entire section 
    background-position: center; /* Centers the image 
    background-repeat: no-repeat;
    */
        
        
        
        
        
        
}
@media  screen and(max-width:900px) {
        
}

.about-section{
        padding: 120px 0;
        background:rgb(169, 166, 171);

}
.about-details .section-title h1{
        text-align: center;
}
.about-section .section-content{
        display:flex;
        gap:50px;
        align-items: center;
        justify-content: space-between;
        margin-left: 5%;
}

.about-section .about-details{
        max-width: 50%;

}
.about-section .about-image-wrapper .about-image{
        width:100%;
        height:100%;
        object-fit: cover;
        border-radius: 50%;

}
.section-title{
        text-align:center;
        padding: 60px 0 100px;
        text-transform: uppercase;
        font-size:var(--font-size-xl);

}
.section-title::after{
        position:fixed;
        width:100%;
        z-index: 5;
        background: var(--primary-color);

}
.about-section .about-details .section-title{
        padding:0;
        font-size: 200%;
}
.about-section .about-details .text{
        line-height: 30px;
        margin:50px 0 30px;
        text-align: center;
        font-size: var(--font-size-m);
        margin-right: 10%;
}
.about-section .about-content{
        gap:70px;
        flex-direction: column-reverse;

}
.about-section .about-details .button{
        
        padding: 10px 26px;
        color:var(--primary-color);
        background: rgb(182, 185, 179);
        border-radius: border-box;
        border: 2px solid transparent;
        gap: 3px;
        border-radius: 5px;

        



}




.service-container{
        min-height: 100vh;
        width:100%;
        background-color: #e5e6f4c6;
    
    
    }
    .service-wrapper{
        padding: 5% 8%;
    }
    .service{
    
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    h1{
        color: #fff;
        font-size: 5rem;
        -webkit-text-stroke-width: 2px;
        -webkit-text-stroke-color: transparent;
        letter-spacing: 4px;
        background-color: rgb(4,52,83);
        background: linear-gradient(8deg,rgba(8,52,83,1)0%,rgba(0,230,173,1)41%,rgba(41,17,45,1)100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        position:relative;
    }
    h1:after{
        content:"";
        position: absolute;
        top:100%;
        left:10%;
        height:8px;
        width:80%;
        border-radius:8px;
        background-color: rgba(255,255,255,0.05);
    }
    h1 span{
        position:absolute;
        top:100%;
        left:10%;
        height:8px;
        border-radius:50%;
        background-color: #72e2ae;
    
    }
    @keyframes anim{
        95%{
            opacity: 1;
        }
        100%{
            opacity:0;
            left:88%;
        }
    }
    .cards{
        display:grid;
        grid-template-columns: repeat(3,1fr);
        gap:30px;
        margin-top: 80px;
        
    }
    .card{
        height:auto;
        width:370px;
        background-color: #b9bbbf;
        padding: 3% 8%;
        border:0.2px solid rgb(114,226,174,0.2);
        border-radius:8px;
        transition:.6s;
        display:flex;
        align-items:center;
        flex-direction: column;
        position:relative;
        overflow:hidden;
    
    
    }
    .card:after{
        content:"";
        position:absolute;
        top:150%;
        left:-200px;
        width:120%;
        transition:.6s;
        display:flex;
        align-items: center;
        flex-direction: column;
        position:relative;
        overflow:hidden;
        opacity:0.5;
        transition: 1s ;
    }
    .card:hover:after{
        width:225%;
        top:-100%;
    }
    
    .card i{
        color:#72e2ae;
        margin-top:40px;
        margin-bottom:20px;
        font-size: 4.8rem;
    
    }
    .card h2{
        color:#fff;
        font-size: 20px;
        font-weight: 600;
        letter-spacing: 1px;
        
    }
    .card p{
        text-align:left;
        width: 100%;
        margin:12px 0;
        
    }


    .pratu {
        text-align: center;
        padding: 20px;
        background-color: #e1c8c8;
        max-height: fit-content;
    }
    
    .pratu-content .h2 {
        color: #333;
        font-size: 24px;
    }
    
    .shinde {
        display: inline-block;
        padding: 10px 20px;
        background-color:orange;
        color: #fff;
        text-decoration: none;
        border-radius: 5px;
    }
    
    .shinde-button:hover {
        background-color: #e1e9f2;
    }


    .blogs h2 {
        font-size: 24px;
        margin: 20px 0;
        text-align: center;
    }
    
    .blogs h2 {
        font-size: 24px;
        margin: 20px 0;
        text-align: center;
    }
    
    .blog-container {
        display: flex;
        justify-content: center;
        gap: 20px;
        flex-wrap: wrap;
        padding: 20px;
    }
    
    .blog {
        background: white;
        border-radius: 10px;
        padding: 15px;
        width: 300px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
    
    .blog img {
        width: 100%;
       /* height: auto;*/
        border-radius: 5px;
    }
    
    .blog h3 {
        color: #333;
        font-size: 20px;
    }
    
    .blog p {
        font-size: 16px;
        color: #666;
    }
    
    
    
    .read-more {
        display: inline-block;
        margin-top: 10px;
        padding: 10px 15px;
        background-color: orange;
        color: white;
        text-decoration: none;
        border-radius: 5px;
    }