/* About us hero section */
.about-hero-section{
    position: relative;    
    width: 100%;     
}
.about-hero-section img{
    width: 100%;  
    display: flex; 
    flex-direction: column;
}



/* About us block section contents */
.about-us-section{   
   object-position: bottom;
   background-repeat: no-repeat;
   display: flex;
}
.col-2-content{
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
    margin: 0 auto;  
    width: 90%;
    align-items: center;
    gap: 30px;
    padding: 100px 0;
}
.about-block-image-wrapper{
    display: flex;
    position: relative;
    width: 100%;   
}
.about-block-image-wrapper img{   
    width: 100%;   
}
.about-us-hidden-image{
    display: none;
    padding: 30px 0;
}
.block-header{
    padding-bottom: 20px;
}
.about-us-col-1{ 
    flex: 1 1 300px;   
    height: 100%;    
}
.about-us-col-2{ 
    flex: 1 1 300px;   
    padding: 60px 30px 60px;
   
}


.about-us-col-2 h1{
    font-size: 35px;
    font-weight: 700;
}
.block-body-text p{
    font-size: 18px;
    font-weight: 300 !important;
    color: rgb(78, 78, 78);    
}











/* Dedicated team Section */
.team-section{
    position: relative;
    background-image: linear-gradient(#26315f,#19234d);
    background-size: 100% 50%;
    background-repeat: no-repeat;
    overflow: hidden;    
}
.title-lc{   
    text-align: center;    
}
.team-section-block .title{
    position: relative;
    text-align: center;
    color: rgb(255, 255, 255);   
    z-index: 3;
}
.team-block-grid{
    max-width: 1600px;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
    justify-content: center;
    justify-items: center;
    align-content: center;
    margin: 80px auto;
    align-items: center;
    gap: 100px;    
}
.employee-card{
    width: 100%;
    height: auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.employee-image{  
    max-width: 350px;
    width: 100%;   
    margin-bottom: 30px;  
    border-radius: 50%;  
}

.conact-list-info{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    color: rgb(31, 31, 31);
}
.employee-details h2{
    color: rgb(63, 63, 63) !important;
    font-size: 1.6rem;
}
.conact-list-info a{
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;    
    color: rgb(18, 47, 83);
}
.conact-list-info i{
    font-size: 18px;
    font-weight: 500;
    color: #53d7ff;
}
.conact-list-info span{
    color: rgb(124, 124, 124);
}







/* Mision and vision section */
.mission-and-vision-sectionn{    
    background-size: 100% 50% bottom;
    background-repeat: no-repeat;
    background-color: var(--pri-color10);
}
.mission-and-vision-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
    gap: 100px;    
    align-content: center;
    justify-items: center;
}
.col-header{    
    display: grid;
    grid-template-columns: repeat(1,1fr);
    align-items: center;
    justify-content: center;
    gap: 30px;
    text-align: center;
}
.col-header img{
    width: 150px;
    margin: 0 auto;
}
.col-body{
    padding: 30px;
    text-align: center;    
    color: var(--font-color1) !important;
}





/* Our values section */
.our-values-section{
    padding: 100px 0;    
    width: 90%;
    margin: 0 auto;
}
.groupcards-values{
    padding: 10px 0 10px;
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    text-align: center;
    margin-top: 50px;
}
.our-values-card{
    flex: 1 1 250px;
    display: flex;
    gap: 10px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    height: 270px;
    padding: 30px;
    border: 1px solid var(--pri-color3);
    
    
}
.our-values-card img{
    max-width: 120px;
    width: 100%;
}
.our-values-card h2{
    font-size: 18px;
    font-weight: 700;
    color: var(--font-color3);
    font-family: var(--font8);
}




/* Rights and Responsibilities section */
.rights-and-dedication-block{
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(1000px,1fr));     
}

.column{
  padding: 100px 50px;
}
.block-wrapper{
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
    gap: 50px;
    align-items: center !important;
}
.column img{
    width: 100%; 
    height: 100%; 
}
.column .title-lc,
.column .title-dc{
    padding: 10px 10px 50px !important;
    text-align: center;
   
}
.column li,
.column p{     
     font-weight: 300;
     font-size: 1rem !important;
}

.column li::marker{
    list-style: circle;
    font-size: 1.5rem;
    color: yellowgreen;
    display: flex;
    align-items: center;
    margin-top: 10px;    
}
.col-1{
   background-color: var(--pri-color1);
}
.col-1 p{
    color: white;
}
.list-points{
    padding: 35px 15px;
}
.col-2{
    background-color: var(--pri-color10);
}

.list-points li{
    margin: 10px 0;
    font-size: 0.9rem;
}

.col-2 li::marker{
    color: var(--color-theme1);
}


.group-texts h1{   
    font-weight: 600;
    text-align: left !important;
     
}

.group-texts p a{
    text-align: center !important;
    display: flex;
    justify-content: flex-start;
    padding: 10px 0;
    color: rgb(29, 206, 230);
}



.confidentiality-and-Privacy{    
    padding: 10px 30px;
    
}
.confidentiality-and-Privacy .title-lc{
    color: var(--pri-color1);
    font-size: var(--Sfont);
    padding-bottom: 40px !important;
    text-align: left;
}

.confidentiality-and-Privacy p{
    padding-bottom: 60px !important;
    color: black !important;
}




/* Media Queries */

@media screen and (max-width:940px) and (orientation: landscape) {


    /* About us page section */
    .col-2-content{
        display: grid;
        grid-template-columns: repeat(1,1fr);
        gap: 10px;
    }


    /* Dedicated team Section */
    .team-section{
        background-size: cover !important;
    }
    .team-block-grid{
        grid-template-columns: repeat(1,1fr);
    }
    .employee-details h2{
        color: rgb(255, 255, 255) !important;
    }
    .conact-list-info a{       
        color: rgb(255, 255, 255);
    }
    .conact-list-info i{
        font-size: 18px;
        font-weight: 500;
        color: #53d7ff;
    }
    .conact-list-info span{
        color: rgb(228, 228, 228);
    }   
    .employee-image{
        width: 30%;
    }

}










/* Laptops */
@media screen and (max-width:1300px){

    /* Team Section */
    .team-block-grid{
        gap: 50px;
    }
    .column img{
        height: 500px !important;
    }
     /* Rights section */
     .block-wrapper{       
        grid-template-columns: repeat(1,1fr);       
    }

    .team-block-grid {       
        grid-template-columns: repeat(1,1fr);        
    }

    /* Dedicated team Section */
    .team-section{        
        background-image: linear-gradient(#26315f,#19234d);
        background-size: cover !important;
    }
    .employee-details h2{
        color: rgb(255, 255, 255) !important;
    }
    .conact-list-info a{       
        color: rgb(255, 255, 255);
    }
    .conact-list-info span{
        color: rgb(228, 228, 228);
    }   
}



/* Tablets */
@media screen and (max-width:890px){


    /* .about hero section*/
    .about-block-image-wrapper{
        display: none;
     }
     .about-us-hidden-image{
        display: block;
     }
    .block-title{
        font-size: 40px;
        padding: 20px;
    }


    /* block div */
    .col-2-content {
        display: grid;
        grid-template-columns: repeat(1,1fr);
        margin: 0 auto;
        max-width: 1600px;
        width: 100%;
        align-items: center;
        gap: 30px;
        padding: 10px 30px;
    }

    
    /* Dedicated team Section */
    .team-section{
        background-size: cover !important;
    }
    .team-block-grid{
        grid-template-columns: repeat(1,1fr);
    }
    .employee-details h2{
        color: rgb(255, 255, 255) !important;
    }
    .conact-list-info a{       
        color: rgb(255, 255, 255);
    }
    .conact-list-info i{
        font-size: 18px;
        font-weight: 500;
        color: #53d7ff;
    }
    .conact-list-info span{
        color: rgb(228, 228, 228);
    }   
    .employee-image{
        width: 30%;
    }

    .rights-and-dedication-block {
        display: grid;
        grid-template-columns: repeat(1,1fr);
    }
    .rights-and-dedication-block .title{
        font-size: 40px !important;
    }
    

}


/* large mobile */
@media screen and (max-width:600px){

    /* about us block section contents */
    .col-2-content{
        gap: 10px;
        margin: 30px auto 0;
        padding: 0;
    }
    .block-header{
        text-align: center;
    }





    /* Dedicated team Section */
    .team-section{        
        background-image: linear-gradient(#26315f,#19234d);
        background-size: cover !important;
    }
    .team-section-block .title{
        font-size: 35px;padding-top: 30px;
    }
    .team-section{
        background-size: 50% 100%;
    }
    .team-block-grid{
        gap: 100px;
    }
    .employee-details h2{
        color: rgb(255, 255, 255) !important;
    }
    .conact-list-info a{       
        color: rgb(255, 255, 255);
    }
    .conact-list-info i{
        font-size: 18px;
        font-weight: 500;
        color: #53d7ff;
    }
    .conact-list-info span{
        color: rgb(228, 228, 228);
    }   
    .employee-image {
        width: 50%;
    }




    /* Mision and vision section */
    .mission-and-vision-grid{
        gap: 25px;
    }


    /* Rights section */
    .block-wrapper{       
        grid-template-columns: repeat(1,1fr);       
    }
    .column{
        padding: 70px 25px;
    }

    .column img{
        height: 100% !important;
    }
    
    .group-texts h1{
        font-size: 30px; 
                
    }
}


/* small size mobile */
@media screen and (max-width:330px){

}


