html{
    scroll-behavior: smooth;
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;

}

body{
    background-color: #ECFCEC;
    font-family: 'Open Sans', sans-serif;
    width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: rgb(72, 139, 97);
    

}

.changeToPurple{
    color: #9D27BF ;
    display: inline;
    width: 100%;
    
}
.changeToPurple2{
    color: #7B2AFF ;
    display: inline;
    width: 100%;
    
}
.changeToWhite{
    color: #ffffff ;
    display: inline;
    width: 100%;
}


h1  {
    color: #036E35;
}
h2  {
    color: #036E35;
}
h3  {
    color: #036E35;
}
p  {
    color: #024F26;
}



#sit-header {
    
    width: 100%;
    height: 13%;
    background-color: transparent;
    display: flex;
    position: fixed;
    margin: 0px;
    top: 0;
    z-index: 200;
    backdrop-filter: blur(5px);
    background-image: linear-gradient
    ( 50deg,
     #01010190
     #23a22f
     #067d76 
     );

}
#sit-header-mobile {
    
    width: 100%;
    height: 13%;
    display: none;
    
}
#desktop-nav {
    background: #ecfcec90;
    width: 100%;
    height: 100%;
    display: flex;
    position: relative;
    align-content: center;
    align-items: center;
    justify-content: center;
    
    
}


#mobile-icn {
    width: 100px;
    position: absolute;
    display: none;
    left: 0;
    margin-left: 5px;

}
#close-icn {
    width: 100px;
    position: absolute;
    display: none;
    left: 0;
    margin-left: 5px;

}
nav img {
    width: 100px;
    position: absolute;
    display: flex;
    left: 0;
    margin-left: 100px;

}

#nav-menu {
    display: flex;
    position: absolute;
    gap: 40px;
    right: 0;
    margin-right: 100px;
    align-content: center;
    align-items: center;
    justify-content: center;

}

#nav-menu li {
    display: flex;
    font-family: Arial, Helvetica, sans-serif;
    position: relative;
    
}

a {
    color: #037a2e;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.9rem;
    letter-spacing: 0.07rem;
    text-decoration: none;
    text-align: center;
    text-decoration: none;

}





    

   

/*-------------------media query (Mobile)-----------------------*/

 /*mobile phones screen size styles 480px – 
 header media query starts here*/

 
 @media screen and (max-width: 480px) {
    
    #sit-header {
    
        width: 100%;
        height: 2%;
        display: none;
        position: fixed;
        
    }
    
    
    
    #sit-header-mobile {
    
        width: 100vw;
        height: 13%;
        display: flex;
        position: fixed;
        margin: 0px;
        top: 0;
        z-index: 200;
    
        
        backdrop-filter: blur(5px);
        background-image: linear-gradient
        ( 50deg,
         #89f2ac90
         #aaa5ac
         #dadbe2 
         )
    
    }

    #nav-menu-mobile {
        background: rgb(225, 246, 237);
        width: 100%;
        height: 100%;
        display: flex;
        position: absolute;
        visibility: hidden;
        align-content: center;
        align-items: center;
        justify-content: center;
        text-align: center;
        
    }

    
    
    #header-site-logo-mobile {
        width: 100px;
        height: 25px;
        position: absolute;
        display: flex;
        margin-left: 10px;
        z-index: 202;
        
    
    }

    #mobile-bar-nav{
        margin-top: px;
        
        
    }
    #sitLogo-nd-menuIcon{
        margin-top: 20px;
        
        
    }
    
   #mobile-icn-mobile {
        width: 30px;
        height: 20px;
        position: absolute;
        display: flex;
        visibility: visible;
        margin-left: 322px;
        cursor: pointer;
        filter: opacity(50%);
        z-index: 202;
        
    }
   
    
   #close-icn-mobile {
        width: 10px;
        height: 10px;
        position: absolute;
        display: flex;
        visibility: hidden;
        margin-left: 322px;
        cursor: pointer;
        filter: invert();
        z-index: 202;
        border: 1px solid rgb(15, 0, 0);
        border-radius: 100px;
        padding: 10px;
        
    }
   


    #nav-menu-mobile {
        display: flex;
        width: 100%;
        height: 100vh;
        flex-direction: column;
        position: absolute;
        visibility: collapse;
        top: 0;
        gap: 0px;
        text-align: center;
        padding: 0px 0px 0px 0px;
        margin-top: 0px 0px 80px 0px;
       }
    
    
    #nav-menu-mobile, li {
       text-align: center;
       margin: 0;
       padding: 0px 0px 50px 0px;
       list-style: none;
       justify-content: center;
       align-items: center;
       align-content: center;
        
    }
    
    a {
        color: #ffffff;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 0.9rem;
        letter-spacing: 0.07rem;
        text-decoration: none;
        text-align: center;
        text-decoration: none;
        
    
    }

    
}

 /*.........................home-page-section1..................................*/


 /*mobile phones screen size styles 480px – 
 header media query starts here*/

.home-section1 {
    width: auto;
    height: 700px;
    display: flex;
    flex-direction: column;
    position: relative;
    gap: px;
    overflow: hidden;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;

}

#grassland {
    width: 100%;
    height:  100%;
    position: absolute;
    margin: auto;
    padding: 0;
    align-content: center;
    justify-content: center;
}

#grassland2 {
    width: 100%;
    height:  100%;
    position: absolute;
    display: none;
    margin: auto;
    padding: 0;
    align-content: center;
    justify-content: center;
}


h1 { 
    color: #037a2e;
    font-size: 3rem;
    font-family: Arial, Helvetica, sans-serif;
    Arial,sans-serif;
    align-content: center;
    align-items: center;
    justify-content: center;
    padding: 200px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    
}

.sct1-p-shell {
    width: 700px;
    height:auto;
    display: flex;
    flex-direction: column;
    position: relative;
    gap: 10px;
    margin-left: 100px;

}





.sct1-p {
    color: #025c5c;
    font-size: 1.5rem;
    font-family: Arial, Helvetica, sans-serif;
    align-content: center;
    align-items: center;
    justify-content: center;
    margin: 0;
    
}

/*-------------------media query (Mobile)-----------------------*/

 /*mobile phones screen size styles 480px – 
 section1 media query starts here*/

@media screen and (max-width: 480px) {
   
    .home-section1 {
    width: auto;
    height: 688px;

    display: flex;
    flex-direction: column;
    position: relative;
    gap: px;
    overflow: hidden;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;


}

h1 {
    font-size: 1.9rem;
    font-weight: 700;
    font-family: Arial, Helvetica, sans-serif; Arial Narrow, Arial, 
    sans-serif;
    align-content: center;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0px 0px 0px 0px;
    margin: 80px 0px 0px 0px;
}

#grassland {
    width: 100%;
    height:  100%;
    position: absolute;
    margin: auto;
    display: none;
    visibility: hidden;
    padding: 0;
    align-content: center;
    justify-content: center;
}
#grassland2 {
    width: fit-content;
    height:  100%;
    position: absolute;
    display: flex;
    margin: 0;
    padding: 0;
    align-content: center;
    justify-content: center;
}


.sct1-p-shell {
    width: fit-content;
    height:auto;
    display: flex;
    position: relative;
    align-content: center;
    align-items: center;
    justify-content: center;
    padding: 0px 20px 0px 20px;
    margin: 0px 0px 0px 0px;
    gap: px;

}





.sct1-p {
    color: #064b44;
    font-size: 0.9375rem;
    letter-spacing: 0rem;
    font-family: Arial, Helvetica, sans-serif;
    align-content: center;
    align-items: center;
    justify-content: center;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    
}

    
    
/*section1 phnoe scree media query 
ends here*/

}





.section3 {
    width: 100%;
    height:auto;
    display: flex;
    flex-direction: column;
    position: relative;
    align-content: center;
    align-items: center;
    justify-content: center;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
}

.sect3-h2 {
    color: #036E35;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2.9rem;
    font-weight: bolder;
    text-align: center;
    width: 900px;
    height: 100%;
    display: flex;
    position: relative;
    align-content: center;
    align-items: center;
    justify-content: center;
    padding: 0px 0px 0px 0px;
    margin: px 0px 60px 0px;

}

.sect3-h3 {
    color: #036E35;
    width: auto;
    height:auto;
    display: flex;
    position: relative;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    
    

}


.dual-card-shell {
    width: 100%;
    height:auto;
    display: flex;
    flex-direction: row;
    position: relative;
    gap: 20px;
    align-content: center;
    align-items: center;
    justify-content: center;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    

}
.sect3-card {
    background-image: url(img/glass-p.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 100%;
    border-radius: 10px;
    width: 30%;
    height: 250px;
    display: flex;
    flex-direction: ;
    position: relative;
    border: 1px solid #307C4E36;
    align-content: center;
    align-items: center;
    justify-content: center;
    
    
}
    
.sect3-img {
    width: 30%;
    height:auto;
    display: flex;
    position: relative;
    
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;

}
.sect3-txt-shell {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 50;
    width: 100%;
    height:auto;
    display: flex;
    flex-direction: column;
    position: relative;
    align-content: center;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0px 40px 0px 40px;
    margin: 0px 0px 0px 0px;
    
    
}
.card-body-txt {
    font-size: 0.8rem;
    line-height: 1.2rem;
    color: #046432;
    width: 100%;
    height: auto;
    display: flex;
    position: relative;
    text-align: center;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    }

.card-rm-txt {
    width: 150px;
    height:40px;
    display: flex;
    position: relative;
    color: #009245;
    font-size: 1.2rem;
    letter-spacing: 0.2rem;
    font-family: Arial, Helvetica, sans-serif;
    align-content: center;
    align-items: center;
    justify-content: center;
    margin: 10px 0px 0px 0px;
    border: 0.05px solid  #47e5a36f;
    border-radius: 5px;
    gap: 2%;
}

.sect3-rm-arow{
    width: auto;
    height:auto;
    display: flex;
    position: relative;
    align-content: center;
    align-items: center;
    justify-content: center;
}


/*-------------------media query (Mobile)-----------------------*/

 /*mobile phones screen size styles 480px – 
 section3 media query starts here*/
@media screen and (max-width: 480px) {
    
    .section3 {
    width: 100%;
    height:auto;
    display: flex;
    flex-direction: column;
    position: relative;
    align-content: center;
    align-items: center;
    justify-content: center;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    }
  
    .sect3-h2 {
        font-weight: 1000;
        font-size: 1.2rem;
        color: #0f6d2c;
        width: 340px;
        height: 100%;
        display: flex;
        position: relative;
        align-items: center;
        align-content: center;
        justify-content: center;
        padding: 0px 0px 0px 0px;
        margin: 0px 0px 40px 0px;
        }
    
    
    .sect3-h3 {
        font-size: 0.8rem;
        font-weight: 1000;
        color: #036E35;
        width: auto;
        height:auto;
        display: flex;
        position: relative;
        padding: 0px 0px 0px 0px;
        margin: 0px 0px 0px 0px;
    
        
    }
    
    
    .dual-card-shell {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        position: relative;
        align-content: center;
        align-items: center;
        justify-content: center;
        gap: 50px;
        
    
    }
    .sect3-card {
    
    border-radius: 10px;
    width: 300px;
    height: 190px;
    display: flex;
    position: relative;
    border: 1px solid #307C4E36;
    align-content: center;
    align-items: center;
    justify-content: center;
    }

    .sect3-img {
        width: 20%;
        height: 100%;
        display: flex;
        position: relative;
        align-content: center;
        align-items: center;
        justify-content: center;

    
    }
    .sect3-txt-shell {
        font-family: Arial, Helvetica, sans-serif;
        letter-spacing: 0.1rem;
        font-weight: 50;
        width: 100%;
        height:auto;
        display: flex;
        flex-direction: column;
        position: relative;
        align-content: center;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 0px 20px 0px 20px;
        margin: 0px 0px 0px 0px;
        
        
    }
    
    
    .card-body-txt {
        font-size: 0.7.5rem;
        font-weight: 100;
        color: #046432;
        width: 100%;
        height: auto;
        display: flex;
        position: relative;
        text-align: center;
        padding: 0px 0px 0px 0px;
        margin: 0px 0px 0px 0px;
    
        
        }
    
    .card-rm-txt {
        
        
        font-size: 0.8rem;
        
        
        
        
        
        gap: 2%;
        
        
        
        
    }
    
    .sect3-rm-arow{
        width: 10px;
        height: 10px;
        display: flex;
        position: relative;
        
    }

}
  /*mobile phones screen size styles 480px – 
 section3 media query ends here*/
 

 


.section4 {
    background: #166839;
    width: 100%;
    height:auto;
    display: flex;
    flex-direction: column;
    position: relative;
    align-content: center;
    align-items: center;
    justify-content: center;
    gap: 100px;
    padding: 0px 0px 0px 0px;
    margin: 100px 0px 0px 0px;
    

}
.sect4-h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 3rem;
    letter-spacing: 0.2rem;
    display: inline;
    position: relative;
    align-content: center;
    align-items: center;
    justify-content: center;
    margin-top: 10%;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
}
.sect4-h1 {
    color: #ffffff ;
    font-size: 3rem;
    font-family: Arial, Helvetica, sans-serif;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
}




.sect4-txt-shell {
    font-family: Arial, Helvetica, sans-serif;
        width: 660px;
        height:fit-content ;
        display: flex;
        flex-direction: column;
        position: relative;
        align-content: center;
        justify-content: center;
        gap: 20px;
        padding: 0px 0px 0px 0px;
        margin: 0px 0px 0px 0px;
    
    
}


.sect4-txt-shell p {
    color: #E3F2D9;
    height: auto;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1rem;
    line-height: 1.5rem;
    display: flex;
    position: relative;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;

}

.sect4-img {
    width: 500px;
    height:auto;
    display: flex;
    position: relative; 
    align-content:flex-end;
    justify-content: end;
    margin-left: 5%;
    margin-right: 0;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;

}
.sect4-h1-2 {/*the second part of the card in section4*/
    color: rgb(255, 255, 255);
    font-size: 4rem;
    font-family: Arial, Helvetica, sans-serif;
    letter-spacing: 0.5rem;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
}


.sect4-card-shell1 {
    width: auto;
    height: 500px;
    display: flex;
    position: relative;
    align-content: center;
    align-items: center;
    justify-content: center;
}

/*-------------------media query (Mobile)-----------------------*/

 /*mobile phones screen size styles 480px – 
 section4 media query starts here*/
 
 @media screen and (max-width: 480px) {
   
    .section4 {background: #166839;
        width: 100%;
        height:auto;
        display: flex;
        flex-direction: column;
        position: relative;
        align-content: center;
        align-items: center;
        justify-content: center;
        gap: 100px;
        padding: 0px 0px 0px 0px;
        margin: 100px 0px 0px 0px;
        
    
    }
   

    .sect4-card-shell1 {
        width: fit-content;
        height: 100%;
        display: flex;
        flex-direction: column-reverse;
        position: relative;
        align-content: center;
        align-items: center;
        justify-content: center;
        margin: 0px 0px 40px 0px;
        
    }

    .sect4-txt-shell {

        width: 340px;
        height:fit-content;
        display: inline;
        flex-direction: column;
        position: relative;
        padding-left: ;
        margin: 0;
        align-content: center;
        align-items: center;
        justify-content: center;
        gap: 20px;
        order: 1;
        padding: 0px 0px 0px 0px;
        margin: 100px 0px 0px 0px;
            
    }
    
    .sect4-h1 {
        color: rgb(245, 245, 247);
        font-size: 1.5rem;
        font-weight: 900;
        font-family: Arial, Helvetica, sans-serif;
        margin-top: 5px;
        align-content: center;
        align-items: center;
        justify-content: center;
        padding: 0%;
        width: 300px;
       

        }
        .sect4-txt-shell{
            color: #E3F2D9;
            height: auto;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 1rem;
            display: flex;
            position: relative;
            padding: 0px 0px 0px 0px;
            margin: 20px 0px 0px 0px;
        
        }
    .sect4-img {
        width: 300px;
        height: auto;
        display: flex;
        position: relative; 
        align-content:center;
        justify-content: center;
        align-content: center;
        align-items: center;
        justify-content: center;
        margin-top: 20px;
    
    }



 }

 /*mobile phones screen size styles 480px – 
 section4 media query ends here*/

 


.section6 {
    width: 100%;
    height:auto;
    display: flex;
    flex-direction: column;
    position: relative;
    
    gap: 10%;
}
.sect6-h1 {
    color: #036E35 ;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2.5rem;
    letter-spacing: 0.2rem;
    margin-left: 10%;
    margin-top: 10%
    
}
.sect6-cards-case-shell {
    width: ;
    height:auto;
    display: flex;
    flex-direction: ;
    position: relative;
    gap: 5%;
    margin-top: 2%;
    margin-right: 10%;
    margin-left: 10%;
    
    

}
.sect6-cards-shell {
    width: auto;
    height:auto;
    display: flex;
    flex-direction: column;
    position: relative;
    

}
.sect6-txt-shell {
    width: auto;
    height:auto;
    display: flex;
    flex-direction: column;
    position: relative;
    align-content: start;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;

}
.sect6-h4 {
    width: auto;
    height:auto;
    display: flex;
    flex-direction: row;
    position: relative;
    align-content: center;
    align-items: center;
    justify-content: center;
    margin: 0%;
    margin-top: 20px;

}
.sect6-txt {width: auto;
    height:auto;
    display: flex;
    flex-direction: row;
    position: relative;
    align-content: center;
    align-items: center;
    justify-content: center;
    margin: 0%;

}

.sect6-cards-img {
    border: 1px solid white;
    border-radius: 10px;
    width: 100%;
    height:auto;
    display: flex;
    position: relative;
    align-content: center;
    align-items: center;
    justify-content: center;

}

/*-------------------media query (Mobile)-----------------------*/

 /*mobile phones screen size styles 480px – 
 section6 media query starts here*/

 
 @media screen and (max-width: 480px) {
    .section6 {
        width: 100%;
        height:auto;
        display: flex;
        flex-direction: column;
        position: relative;
        align-items: center;
        align-content: center;
        justify-content: center
        gap: 10px;
    }
    .sect6-h1 {
        color: #036E35 ;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1.8rem;
        font-weight: 900;
        margin-bottom: 10px;
        margin-top: 10%;
        align-items: center;
        align-content: center;
        justify-content: center;
        text-align: center;
        
    }
    .sect6-cards-case-shell {
        width: 350px;
        height:auto;
        display: flex;
        flex-direction: column;
        position: relative;
        gap: 5%;
        margin-right: 10%;
        margin-left: 10%;
        
        
    
    }
    .sect6-cards-shell {
        width: auto;
        height:auto;
        display: flex;
        flex-direction: column;
        position: relative;
        margin-top: 40px;
        
    
    }
    .sect6-txt-shell {
        width: 300px;
        height:auto;
        display: flex;
        flex-direction: ;
        position: relative;
        align-content: start;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 10px;
    
    }
    .sect6-h4 {
        width: auto;
        height:auto;
        display: flex;
        flex-direction: row;
        position: relative;
        align-content: center;
        align-items: center;
        justify-content: center;
        margin: 0%;
        margin-top: 20px;
    
    }
    .sect6-txt {
        width: auto;
        height:auto;
        display: flex;
        flex-direction: row;
        position: relative;
        align-content: center;
        align-items: center;
        justify-content: center;
        margin: 0%;
    
    }
    
    .sect6-cards-img {
        width: 100%;
        height:auto;
        display: flex;
        position: relative;
        align-content: center;
        align-items: center;
        justify-content: center;
    
    }


 }

 /*mobile phones screen size styles 480px – 
 section6 media query ends here*/


    

 /*..............Our services styles below......................*/



 /*mobile phones screen size styles 480px – 
 footer media query starts here*/

/* below here is the our services css styles*/
.section1-os {
    margin-bottom: 100px;
    margin-top: 100px;
    width: 100%;
    height:auto;
    display: flex;
    flex-direction: column;
    position: relative;
    gap: 10%
    align-content: center;
    align-items: center;
    justify-content: center;
    

}
.sect1-img-os {

    width: 70%;
    height: 400px;
    display: flex;
    position: absolute;
    border-radius: 10px;
    top: 10%;
    z-index: 1;
    
    
}



.section2-os {
    width: 100%;
    height:auto;
    display: flex;
    flex-direction: column;
    position: relative;
    gap: 10%;
    align-content: center;
    align-items: center;
    justify-content: center;
    

}
.sect2-p-os {
    color: white;
    font-size: 0.9rem;
    font-family: Arial, Helvetica, sans-serif;
    width: 60%;
    height:auto;
    display: flex;
    position: relative;
    margin-bottom: 50px;
    margin-top: 20px;
    align-content: center;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 2;

}

    

.sect2-h2-os {
    color: white;
    width: 60;
    font-size: 2.5rem;
    font-family: Arial, Helvetica, sans-serif;
    display: flex;
    position: relative;
    margin-bottom: 0;
    z-index: 2;
    margin-top: 180px;

}


.section3-os {
    margin-top: 50px;
    width: 100%;
    height:auto;
    display: flex;
    flex-direction: column;
    position: relative;
    gap: 50px;
    align-content: center;
    align-items: center;
    justify-content: center;

}
.sect3-h2-os {
    font-size: 2.5rem;
    font-family: Arial, Helvetica, sans-serif;
    display: flex;
    position: relative;
    margin-bottom: 0;
    align-content: center;
    align-items: center;
    justify-content: center;

}
.sect3-card-shell1-os {
    width: 70%;
    height:auto;
    display: flex;
    position: relative;
    gap: 40px;
    align-content: center;
    justify-content: center;
    

}
.sect3-card-shell2-os {
    width: 70%;
    height:auto;
    display: flex;
    position: relative;
    gap: 40px;
    align-content: center;
    justify-content: center;
    

}
.sect3-card-shell3-os {
    width: 70%;
    height:auto;
    display: flex;
    position: relative;
    gap: 40px;
    align-content: center;
    justify-content: center;
    

}
.sect3-card-shell4-os {
    width: 70%;
    height:auto;
    display: flex;
    position: relative;
    gap: 40px;
    align-content: center;
    justify-content: center;
    

}

.sect3-p-os {
    font-size: 0.9rem;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.5rem;
    width: 60%;
    height:auto;
    display: flex;
    position: relative;
    align-content: center;
    align-items: center;
    justify-content: center;

}
.sect3-h3-os {
    font-size: 1.5rem;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.5rem;
    width: 100%;
    height:auto;
    display: flex;
    position: relative;
    margin: 0;
   

}
.sect3-img-os {
    width: 30%;
    height:auto;
    display: flex;
    position: relative;
    align-content: center;
    align-items: center;
    justify-content: center;

}
.sect3-txt-shell-os {
    width: 100%;
    height:auto;
    display: flex;
    flex-direction: column;
    position: relative;
    align-content: center;
    justify-content: center;

}


/*-------------Media query(Mobile) our serviveces--------------------*/
/*(secc3-os) media query for (mobile) starts here*/

@media screen and (max-width: 480px) {
.section1-os {
    margin-bottom: 220px;
    margin-top: 100px;
    width: 100%;
    height:auto;
    display: flex;
    flex-direction: column;
    position: relative;
    gap: 10%;
    align-content: center;
    align-items: center;
    justify-content: center;
    
    

}
.sect1-img-os {

    width: 100%;
    height:200;
    display: flex;
    position: absolute;
    
    transform: translateY(0);
    
    
}
.sect1-h3-os {
    font-size: 1.5rem;
    font-family: Arial, Helvetica, sans-serif;
    width: 79.8%;
    height:auto;
    display: flex;
    position: relative;
    margin: 0%
    align-content: center;
    align-items: center;
    justify-content: center;

}
.sect1-p-os {
    font-size: 0.9rem;
    font-family: Arial, Helvetica, sans-serif;
    width: 79.8%;
    height:auto;
    display: flex;
    position: relative;
    margin: 0%
    align-content: center;
    align-items: center;
    justify-content: center;


}


.section2-os {
    width: 100%;
    height:auto;
    display: flex;
    flex-direction: column;
    position: relative;
    gap: 10%;
    align-content: center;
    align-items: center;
    justify-content: center;
    

}
.sect2-p-os {
    font-size: 0.9rem;
    font-family: Arial, Helvetica, sans-serif;
    width: 79.8%;
    height:auto;
    display: flex;
    position: relative;
    margin-bottom: 50px;
    margin-top: 20px;
    align-content: center;
    align-items: center;
    justify-content: center;

}
.sect2-img-shell-os{
    width: 100%;
    height:auto;
    display: flex;
    position: relative;
    gap: 100px
    align-content: center;
    align-items: center;
    justify-content: center;
    
}
.sect2-h2-os {
    font-size: 2.5rem;
    font-family: Arial, Helvetica, sans-serif;
    display: flex;
    position: relative;
    margin-bottom: 0;

}
.sect2-img-os {
    width: 20%;
    height:auto;
    display: flex;
    position: relative;
    margin: 20px;
    align-content: center;

}

.section3-os {
    margin-top: 50px;
    width: 100%;
    height:auto;
    display: flex;
    flex-direction: column;
    position: relative;
    gap: 100px;
    align-content: center;
    align-items: center;
    justify-content: center;

}
.sect3-h2-os {
    font-size: 2.5rem;
    font-family: Arial, Helvetica, sans-serif;
    display: flex;
    position: relative;
    margin-bottom: 0;
    align-content: center;
    align-items: center;
    justify-content: center;
    align-self: center;

}
.sect3-card-shell1-os {
    width: 70%;
    height:auto;
    display: flex;
    position: relative;
    flex-direction: column;
    gap: px;
    align-items: center;
    align-content: center;
    justify-content: center;
    

}
.sect3-card-shell2-os {
    width: 70%;
    height:auto;
    display: flex;
    position: relative;
    flex-direction: column-reverse;
    gap: px;
    align-items: center;
    align-content: center;
    justify-content: center;
    

}
.sect3-card-shell3-os {
    width: 70%;
    height:auto;
    display: flex;
    position: relative;
    flex-direction: column ;
    gap: px;
    align-items: center;
    align-content: center;
    justify-content: center;
    

}
.sect3-card-shell4-os {
    width: 70%;
    height:auto;
    display: flex;
    position: relative;
    flex-direction: column-reverse;
    gap: px;
    align-items: center;
    align-content: center;
    justify-content: center;
    

}

.sect3-p-os {
    font-size: 0.9rem;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.5rem;
    width: 100%;
    height:auto;
    display: flex;
    position: relative;
    align-content: center;
    align-items: center;
    justify-content: center;

}
.sect3-h3-os {
    font-size: 1.5rem;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.5rem;
    width: 100%;
    height:auto;
    display: flex;
    position: relative;
    margin: 0;
   

}
.sect3-img-os {
    width: 30%;
    height:auto;
    display: flex;
    position: relative;
    align-content: center;
    align-items: center;
    justify-content: center;

}
.sect3-txt-shell-os {
    width: 100%;
    height:auto;
    display: flex;
    flex-direction: column;
    position: relative;
    align-content: center;
    justify-content: center;

}
}

 /*.................abou us styles below..........................*/


 /* from here starts the styles of about us styles*/

.section1-au {
    margin-top: 100px;
    width: 100%;
    height:auto;
    display: flex;
    flex-direction: column;
    position: relative;
    gap: px;
    align-content: center;
    align-items: center;
    justify-content: center;
    
}
.sect1-au-img {
    width: 200px;
    align-content: center;
    align-items: center;
    justify-content: center;

}
.sect1-au-h3 {
    font-size: 1.3rem;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    letter-spacing: 0.1rem;
    line-height: 2.5rem;
    width: 100%;
    height:auto;
    display: flex;
    position: relative;
    margin: 0;
    align-content: center;
    align-items: center;
    justify-content: center;

}
.sect1-au-p {
    font-size: 1.2rem;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.5rem;
    width: 70%;
    height:auto;
    display: flex;
    position: relative;
    align-content: center;
    align-items: center;
    justify-content: center;
    padding: 0px 100px 0px 100px;


}
.section2-au {
    margin-top: 70px;
    width: auto;
    height:auto;
    display: flex;
    position: relative;
    gap: px;
    align-content: center;
    align-items: center;
    justify-content: center;
    

}
.sect2-au-img2{
    margin-top: auto;
    width: auto;
    height:auto;
    display: flex;
    position: relative;
    

}
.sect2-au-img1{
    margin-top: auto;
    width: auto;
    height:auto;
    display: flex;
    position: relative;
   
    

}
.sect2-au-h4 {
    font-size: 1.3rem;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    letter-spacing: 0.1rem;
    line-height: 2.5rem;
    width: 100%;
    height:auto;
    display: flex;
    position: relative;
    margin: 0;
    align-content: center;
    align-items: center;
    justify-content: center;

}
.sect2-au-p {
    font-size: 0.9rem;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.5rem;
    width: 100%;
    height:auto;
    display: flex;
    position: relative;
    align-content: center;
    align-items: center;
    justify-content: center;

}
.sect2-au-card {
    width: 100%;
    height:auto;
    display: flex;
    flex-direction: column;
    position: relative;
    gap: 5px;
    align-content: center;
    align-items: center;
    justify-content: center;
    

}
.sect2-au-card2 {
    width: 100%;
    height:auto;
    display: flex;
    flex-direction: column;
    position: relative;
    gap: 5px;
    align-content: center;
    align-items: center;
    justify-content: center;
    top: 100px;

}
.section3-au {
    margin-top: 100px;
    width: 100%;
    height:auto;
    display: flex;
    flex-direction: column;
    position: relative;
    gap: 100px;
    align-content: center;
    align-items: center;
    justify-content: center;

}
.sect3-au-card {
    width: 80%;
    height:auto;
    display: flex;
    position: relative;
    gap: 40px;
    align-content: center;
    align-items: center;
    justify-content: center;

}
.sect3-au-img{
    width: 100%;
    height: 400px;
    display: flex;
    position: relative;
    gap: 40px;
    align-content: center;
    align-items: center;
    justify-content: center;

}
.sect3-au-txt-shell {
    width: auto;
    height:auto;
    display: flex;
    position: relative;
    flex-direction: column;
    gap: 8px;
    
    

}
.sect3-au-h4 {
    font-size: 1.3rem;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    letter-spacing: 0.1rem;
    line-height: 2.5rem;
    width: 100%;
    height:auto;
    display: flex;
    position: relative;
    margin: 0;

}
.sect3-au-p {font-size: 0.9rem;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.5rem;
    width: 100%;
    height:auto;
    display: flex;
    position: relative;
    margin: 0%;

}
.sect3-au-h2 {
    margin-top: 100px;
    margin-bottom: 0;
    font-size: 2rem;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    letter-spacing: 0.1rem;
    
    line-height: 2.5rem;
    width: 100%;
    height:auto;
    display: flex;
    position: relative;
    align-content: center;
    align-items: center;
    justify-content: center

}
.section-4-au {
    margin-top: 70px;
    width: 70vw;
    height:auto;
    display: flex;
    flex-direction: column;
    position: relative;
    gap: px;
    align-content: center;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;

}
.sect4-au-p {
    font-size: 1.2rem;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 2rem;
    width: 100%;
    height:auto;
    display: flex;
    position: relative;
    margin: 0%;

}

/*-------------------media query (Mobile)-----------------------*/

/*(about us) media query for (mobile) starts here*/

@media screen and (max-width: 480px) {
    .section1-au {
        margin-top: 100px;
        width: 100%;
        height:auto;
        display: flex;
        flex-direction: column;
        position: relative;
        gap: px;
        align-content: center;
        align-items: center;
        justify-content: center;
        
    }
    .sect1-au-img {
        align-content: center;
        align-items: center;
        justify-content: center;
    
    }
    .sect1-au-h3 {
        font-size: 1.3rem;
        font-family: Arial, Helvetica, sans-serif;
        text-align: center;
        letter-spacing: 0.1rem;
        
        line-height: 2.5rem;
        width: 100%;
        height:auto;
        display: flex;
        position: relative;
        margin: 0;
        align-content: center;
        align-items: center;
        justify-content: center;
    
    }
    .sect1-au-p {
        font-size: 0.9rem;
        font-family: Arial, Helvetica, sans-serif;
        
        line-height: 1.5rem;
        width: 100%;
        height:auto;
        display: flex;
        position: relative;
        align-content: center;
        align-items: center;
        justify-content: center;
    
    
    }
    .section2-au {
        margin-top: 70px;
        width: auto;
        height:auto;
        display: flex;
        flex-direction: column;
        position: relative;
        gap: 50px;
        align-content: center;
        align-items: center;
        justify-content: center;
        
    
    }
    .sect2-au-img2{
        margin-top: auto;
        width: auto;
        height:auto;
        display: flex;
        position: relative;
        
    
    }
    
    .sect2-au-img1{
        margin-top: auto;
        width: auto;
        height:auto;
        display: flex;
        position: relative;
        
    
    }
    .sect2-au-h4 {
        font-size: 1.3rem;
        font-family: Arial, Helvetica, sans-serif;
        text-align: center;
        letter-spacing: 0.1rem;
        
        line-height: 2.5rem;
        width: 100%;
        height:auto;
        display: flex;
        position: relative;
        margin: 0;
        align-content: center;
        align-items: center;
        justify-content: center;
    
    }
    .sect2-au-p {
        font-size: 0.9rem;
        font-family: Arial, Helvetica, sans-serif;
       
        line-height: 1.5rem;
        width: 100%;
        height:auto;
        display: flex;
        position: relative;
        align-content: center;
        align-items: center;
        justify-content: center;
    
    }

    .sect2-au-card {
        width: 100%;
        height:auto;
        display: flex;
        flex-direction: column;
        position: relative;
        gap: 5px;
        align-content: center;
        align-items: center;
        justify-content: center;
    
    }
    .sect2-au-card2 {
        width: 100%;
        height:auto;
        display: flex;
        flex-direction: column;
        position: relative;
        gap: 5px;
        align-content: center;
        align-items: center;
        justify-content: center;
        top: 0px;
    
    }
    .section3-au {
        margin-top: 100px;
        width: 100%;
        height:auto;
        display: flex;
        flex-direction: column;
        position: relative;
        gap: 100px;
        align-content: center;
        align-items: center;
        justify-content: center;
    
    }
    .sect3-au-card {
        width: 80%;
        height:auto;
        display: flex;
        flex-direction: column;
        position: relative;
        gap: 40px;
        align-content: center;
        align-items: center;
        justify-content: center;
    
    }
    .sect3-au-img{
        width: 100%;
        height: 400px;
        display: flex;
        position: relative;
        gap: 40px;
        align-content: center;
        align-items: center;
        justify-content: center;
    
    }
    .sect3-au-txt-shell {
        width: auto;
        height:auto;
        display: flex;
        position: relative;
        flex-direction: column;
        gap: 8px;
        
        
    
    }
    .sect3-au-h4 {
        font-size: 1.3rem;
        font-family: Arial, Helvetica, sans-serif;
        text-align: center;
        letter-spacing: 0.1rem;
        
        line-height: 2.5rem;
        width: 100%;
        height:auto;
        display: flex;
        position: relative;
        margin: 0;
    
    }
    .sect3-au-p {font-size: 0.9rem;
        font-family: Arial, Helvetica, sans-serif;
        
        line-height: 1.5rem;
        width: 100%;
        height:auto;
        display: flex;
        position: relative;
        margin: 0%;
    
    }
    .sect3-au-h2 {
        margin-top: 100px;
        margin-bottom: 0;
        font-size: 2rem;
        font-family: Arial, Helvetica, sans-serif;
        text-align: center;
        letter-spacing: 0.1rem;
        
        line-height: 2.5rem;
        width: 100%;
        height:auto;
        display: flex;
        position: relative;
        align-content: center;
        align-items: center;
        justify-content: center
    
    }
    .section-4-au {
        margin-top: 70px;
        width: 70vw;
        height:auto;
        display: flex;
        flex-direction: column;
        position: relative;
        gap: px;
        align-content: center;
        align-items: center;
        justify-content: center;
        margin-left: auto;
        margin-right: auto;
    
    }
    .sect4-au-p {
        font-size: 0.9rem;
        font-family: Arial, Helvetica, sans-serif;
        
        line-height: 2rem;
        width: 100%;
        height:auto;
        display: flex;
        position: relative;
        margin: 0%;
    
    }
}   


















































 /*...........footer syles below this point....................*/

footer{
    width: 100%;
    height: 100%;
    background-color:#098d56;
    display: flex;
    flex-direction: column;
    position: relative;
    align-items: center;
    align-content: center;
    justify-content: center;
    gap: 20px;
    padding-bottom: 40px;
    padding-top: 40px;
    margin-top: 100px;
    
    

}
footer h4{
    color: aliceblue;
    font-size: 0.9em;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    align-items: center;
    align-content: center;
    justify-content: ;


}

footer p{
    color: aliceblue;
    font-size: 0.9em;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    align-items: center;
    align-content: center;
    justify-content: ;
    


}

#colume-L1-2, #colume-L1-3  p {
    
    font-size: 0.9em;
    padding: 500px;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;


}


#layer-1 {
    width: fit-content;
    height: 100%;

    display: flex;
    flex-direction:;
    position: relative;
    align-items: flex-start;
    align-content: center;
    justify-content: ;
    gap: 200px;

}
#colume-L1-1 {
    width: fit-content;
    height: 50px;

    display: flex;
    flex-direction: column;
    position: relative;
    margin: 0;
    gap: 60px;
    
}

#footer-site-logo{
    width: 100px;
    height: 100px;
    margin: 0;
}

#colume-L1-2 {
    width: 100px;
    height: fit-content;
    display: flex;
    flex-direction:column;
    position: relative;
    gap: 30px;
    
    

}

#colume-L1-3 {
    width: 100px;
    height: fit-content;
    display: flex;
    flex-direction:column;
    position: relative;
    margin: 0;
    gap: 30px;
    

}

#colume4-L1-4 {
    width: 300px;
    height:auto;
    display: flex;
    flex-direction:column;
    position: relative;
    
}

#colume4-L1-4, label {
    color: aliceblue;
    font-size: 0.9em;
    padding: 500px;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.5em;
    margin: 0;
    padding: 0;

}

#input-nd-send-button {
    
    display: flex;
   text-align: justify;
   align-items: center;
    gap: 10px;
    
}
#send-icn {
    border-radius: 3px;
    background-color: #515257;
    padding: 6px;
    width: 20px;
   text-align: justify;
   align-items: center;
    align-content: center;
    justify-content: center;
    
}


#colume4-L1-4 p {
    color: rgb(173, 172, 172);
   text-align: justify;
}
footer input{
    width: 260px;
    height: 28px;
    border-radius: 4px;
    background-color: rgb(255, 255, 255);
    border: #00000000;
    


}

#layer-2{
    width: fit-content;
    height: 100%;
    display: flex;
    flex-direction: row;
    position: relative;
    align-content: center;
    align-items: center;
    justify-content: flex-start;
    gap: 1070px;
    margin-top: 40px;
}
#colume-L2-1{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    position: relative;
    align-items: center;
    align-content: center;
    justify-content: center;

}
#colume-L2-1, img {
    width: 35px;
}

#colume-L2-2{
    width: fit-content;
    height: fit-content;
    display: flex;
    flex-direction:column;
    position: relative;
    gap: 15px;
    justify-content: center;
    

}

#footer-socail-media-icons-layer{
    width: 50px;
    height: 100%;
    display: flex;
    flex-direction: row;
    position: relative;
    align-items: center;
    align-content: center;
    justify-content: flex-start;
    gap: 40px;
}

footer a {
    color: aliceblue;
    text-decoration: none;
}


/*(Footer) media query for (mobile) starts here*/

@media screen and (max-width: 480px) {
footer{
    width: 100%;
    height: 100%;
    background-color: #098d56;
    display: flex;
    flex-direction: column;
    position: relative;
    align-items: center;
    align-content: center;
    justify-content: center;
    gap: 30px;
    padding-bottom: 40px;
    padding-top: 40px;

}
footer h4{
    color:#ffffff;
    font-size: 0.9em;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    align-items: center;
    align-content: center;
    justify-content: center;
   


}

footer p{
    color: #ffffff;
    font-size: 0.9em;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    align-items: center;
    align-content: center;
    justify-content: ;
    


}

#colume-L1-2, #colume-L1-3 p {
    color: aliceblue;
    font-size: 0.9em;
    padding: 500px;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    text-align: center;



}


#layer-1 {
    width: fit-content;
    height: 100%;

    display: flex;
    flex-direction:column;
    position: relative;
    align-items: center;
    align-content: center;
    justify-content: center;
    gap: 80px;

}
#colume-L1-1 {
    width: fit-content;
    height: 50px;
    display: flex;
    flex-direction: column-reverse;
    position: relative;
    margin: 0;
    gap: 60px;
    align-items: center;
    align-content: center;
    justify-content: center;
    text-align: center;
    order: 4;
}

#footer-site-logo{
    width: 100px;
    height: 100px;
    margin: 0;
    align-items: center;
    align-content: center;
    justify-content: center;
}

#colume-L1-2 {
    width: 100px;
    height: fit-content;
    display: flex;
    flex-direction:column;
    position: relative;
    gap: 30px;
    align-items: center;
    align-content: center;
    justify-content: center;
    text-align: center;
    
    

}

#colume-L1-3 {
    width: 100px;
    height: fit-content;
    display: flex;
    flex-direction:column;
    position: relative;
    margin: 0;
    gap: 30px;
    align-items: center;
    align-content: center;
    justify-content: center;
    text-align: center;
    

}

#colume4-L1-4 {
    width: 300px;
    height:auto;
    display: flex;
    flex-direction:column;
    position: relative;
    align-items: flex-start;
    align-content: flex-start;
    justify-content: flex-end;
    
    
    
}

#colume4-L1-4 label {
    
    font-size: 0.9em;
    padding: 500px;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.5em;
    margin: 0;
    padding: 0;
    
    
    
    

}

#colume4-L1-4 p {
    color: rgb(173, 172, 172);
   text-align: justify;
    
}
#input-nd-send-button {
    display: flex;
   text-align: justify;
   align-items: center;
    align-content: center;
    justify-content: center;
    gap: 12px;
    
}
#send-icn {
    width: 20px;
   text-align: justify;
   align-items: center;
    align-content: center;
    justify-content: center;
    
}

footer input{
    width: 250px;
    height: 28px;
    border-radius: 4px;
    background-color: rgb(255, 255, 255);
    border: #00000000;
    

}

#layer-2{
    width: fit-content;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    align-content: center;
    align-items: center;
    justify-content: center;
    gap: 40px;
    margin-top: 40px;
}
#colume-L2-1{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    position: relative;
    align-items: center;
    align-content: center;
    justify-content: center;

}
#colume-L2-1, img {
    width: 35px;
}

#colume-L2-2{
    width: fit-content;
    height: fit-content;
    display: flex;
    flex-direction:column;
    position: relative;
    gap: 15px;
    align-items: center;
    align-content: center;
    justify-content: center;
    

}

#footer-socail-media-icons-layer{
    width: 50px;
    height: 100%;
    display: flex;
    flex-direction: row;
    position: relative;
    align-items: center;
    align-content: center;
    justify-content: center;
    gap: 40px;
}

footer a {
    color: #ffffff;
    text-decoration: none;
}

}