html{
    scroll-behavior: smooth !important;
}

#About-us, #Projects, #Services, #Clients, #OurTeam, #Contact{
    scroll-behavior: smooth;
    scroll-margin-top: 10rem;
}
/* Start header section  */
nav{
    transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
}

nav.scrolled{
    background: rgba(255, 255, 255, 0.35);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

nav.scrolled ul li a, nav.scrolled ul li #language-selector {
    color: #1d4ed8;
}

nav.scrolled ul li a:hover{
    color: #3690D0;
}

.rtl{
    text-align: right !important;
}

.rtl.onTouch-section{
    left: 34rem !important;
}


.header-title{
    font-size: 3rem;
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    font-style: normal;
    line-height: 108px;
}
.header-subtitle{
    font-size: 1.6rem;
    word-spacing: 3px;
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    font-style: normal;
    line-height: 60px;
}
.header-sub-subtitle{
    font-size: 22px;
    font-family: 'Lato',sans-serif;
    font-weight: 300;
    font-style: normal;
}
/* End header section  */
/* start about us section  */
.about-us-title{
    font-size: 3rem;
    line-height: 68px;
    /* color: #1C2B5A; */
}
.about-us-description{
    color: #1C2B5A;
    font-size: 21px;
    line-height: 32px; /* 133.333% */
    letter-spacing: -0.12px;
}

.card-title{
    font-size: 1.8rem;
    line-height: 68px;
}

.card-description{
    color: #5B5B5B;
    font-size: 21px;
    line-height: 32px; /* 133.333% */
    
}

#language-selector{
    background-color: transparent;
    color: #fff;
}
#language-selector:hover {
    cursor: pointer;
}



#language-selector option{
    color: black;
}
/* End about us section  */

/* start our features section  */

.feature-btn{
    background: transparent;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.features.rtl{
    left: 38%;
}

/* end our features section */

/* start clients section  */

.ourClients-logos img{
    height: 12rem;
    object-fit: cover;
}
.ourClients-logos .contain{
    object-fit: contain;
}
.ourClients-logos .fill{
    object-fit: fill;
}

/* end clients section  */

/* start our services section */

.services{
    margin-bottom: 3rem;
}

.service-icon{
    display: flex;
width: 84px;
height: 84px;
padding: 4px;
justify-content: center;
align-items: center;
gap: 4px;
/* background: #3690D0; */
}

/* end our services section */

/* start our team section  */

.slide-body:hover .team-position{
    color: #fff;
}

/* end our team section  */

/*media Query*/

@media (max-width: 1400px) and (min-width: 1280px){
    .team-cards-container{
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
@media (min-width: 1024px){
    .rtl.header-meta{
        left: 4rem !important;
    }
    .rtl.onTouch-section{
        left: 6rem !important;
    }

}

@media (max-width: 1024px) and (min-width: 769px){
    .projects-container{
        height: 100vh;
    }
    .projects-body{
        height: auto;
    }
    .projects-inner-body{
        flex-direction: column;
    }
    .ourProject-description{
        margin-top: 3rem;
    }
    .features{
        position: relative;
        top: 0;
        left: 0;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-around;
        width: 100%;
    }
    .features button{
        width: 45%;
    }
    .features.rtl{
        left: 0%;
    }
    .ourProjects-img{
        height: 40dvh;
    }
    .ourProjects-img img{
        height: 100%;
    }
    .ourServices{
        margin-top: 6rem;
    }
    .services{
        margin-left: 0;
        margin-right: 0;
    }
    .footer{
        align-items: flex-start;
        padding-left: 5rem ;
        padding-right: 0;
    }

    #language-selector{
        background-color: transparent;
        color: #fff;
    }
}


@media (max-width: 821px) and (min-width: 769px){
    .rtl.onTouch-section, .onTouch-section {
        left: 0 !important;
        margin: auto ;
        width: 64% ;
    }
    .onTouch-section .right{
        flex-direction: row ;
        flex-wrap: wrap ;
    }
    .ourServices{
        margin-top: 11rem;
    }

    #language-selector{
        background-color: transparent;
        color: #fff;
    }
    .rtl.header-meta{
        left: -2rem;
    }
}

@media (max-width:768px) and (min-width: 640px){
    nav.scrolled ul li a {
        color: #fff;
    }
    #navbar-sticky{
        border-radius: 30px;
        width: 100%;
        /* margin-left: 0;
        margin-top: 2rem; */
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
    #navbar-sticky ul {
        margin-top: 0;
        border-radius: 30px;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    .header-data{
        height: 80vh;
    }
    .header-data video{
        height: 100%;
    }
    .header-meta{
        position: relative;
        left: 1rem;
        top: 5rem;
        width: 85%;
    }
    .rtl.header-meta{
        left: -2rem;
    }
    .header-title{
        font-size: 3rem;
    }
    .header-subtitle{
        font-size: 1.4rem;
        word-spacing: 0px;
        line-height: 40px;
    }
    .header-sub-subtitle{
        font-size: 1rem;
    }
    .rtl.onTouch-section, .onTouch-section{
        position: relative;
        top: 29%;
        left: 0 !important;
        margin: auto;
        width: 68%;
        border-radius: 32px;
        height: 13rem;
    }
    .right, .left{
        height: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-around;
        
    }

    .about-meta{
        margin: 0 2rem 5rem;
    }

    .about-us-title{
        grid-column: span 3 / span 3;
        font-size: 3rem;
        text-align: left;
    }
    .about-us-description{
        text-align: left;
    }
    .about-us-cards{
        margin-left: 2rem;
        margin-right: 2rem;
    }
    .card-description{
        width: 100%;
    }

    .projects-body{
        margin-left: 1rem;
        margin-right: 1rem;
        padding: 16px;
    }
    .projects-inner-body{
        flex-direction: column;
    }
    .ourProject-title{
        font-style: 3rem;
        margin-bottom: 1.5rem;
    }
    .ourProject-description{
        margin-bottom: 1.5rem;
    }

    .features{
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-around;
    }
    .feature-body{
        padding-right: 0.9rem;
        padding-left: 0.9rem;
    }
    .feature-name{
        font-size: 1rem;
    }

    .ourServices{
        margin-left: 2rem;        
        margin-right: 2rem;        
    }
    .services{
        grid-template-columns: repeat(1, minmax(0, 1fr));
        margin-top: 2rem;
    }
    .service-title p{
        font-size: 1.5rem;
    }

    .sliders{
        margin-left: 2rem;
        margin-right: 2rem;
    }
    .ourClients-logos{
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding-left: 0;
        padding-right: 0;
    }
    .ourClients-logos img{
        width: 100%;
    }
    /*for test*/
    .team-header{
        margin-bottom: 0;
    }
    .team-cards{
        margin-top: 4rem;
        margin-bottom: 2rem ;
    }
    .team-cards-container{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .team-cards-container .slide .slide-body{
        width: 10rem;
        padding-top: 0;
        height: 20rem;
        margin-bottom: 4rem;
    }
    .team-position{
        width: 70%;
        text-align: center;
        margin: auto;
    }
    .team-name{
        font-size: 1rem;
    }
    .team-cards-container .slide .slide-body img{
        margin: auto;
        width: 100%;
        height: 166.88px;
        border-radius: 32px;
        position: static;
        margin-top: 0;
        margin-bottom: 0;
    }
    .team-cards .slide{
        /* margin-bottom: 8rem; */
        margin-bottom: 0;
    }

    .contact-us-container{
        margin-left: 2rem;
        margin-right: 2rem;
        position: relative;
        z-index: 10;
    }
    .textarea {
        grid-column: span 2 /span 2;
        width: 100%;
    }
    .footer{
        /* display: none; */
        padding-left: 1rem;
        padding-right: 1rem;
        position: relative;
    }
    .footer-logo {
        position: absolute;
        left: 0;
        bottom: 0;
        
    }
    .footer-first-part{
        flex-direction: row;
        flex-wrap: wrap;
        position: relative;
        z-index: 10;
    }
    .footer-first-part-head{
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
    }
    .footer-first-part-info{
        width: 100%;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
    }
    .footer-first-part-last{
        width: 100%;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        margin-top: 2rem;
    }
    .footer-second-part{
        margin-bottom: 2rem;
        position: relative; 
        z-index: 10;
    }
    .footer-second-part .footer-second-part-title{
        text-align: center;
        margin-top: 2rem;
    }
    .footer-second-part-links{
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4rem;
        text-align: center;
    }
    .footer-third-part{
        position: relative;
        z-index: 10;
    }
    .footer-third-part-body{
        align-self: center;
    }
    .footer-address-title{
        text-align: center;
    }
    .footer-address-info br{
        display: none;
    }
    .footer-address-info{
        width: 100%;
        text-align: center;
        align-self: center;
    }
    .footer-view-location{
        justify-content: center;
    }
    .footer-view-location p{
        margin-right: 1rem;
    }
    .footer-m-auto{
        margin: auto;
    }

    .copyRights{
        position: relative;
        z-index: 10;
        width: 100%;
        justify-content: center;
    }


    #language-selector{
        background-color: transparent;
        color: #fff;
    }
}


@media (max-width: 691px) {

    nav.scrolled ul li a {
        color: #fff;
    }
    #navbar-sticky{
        border-radius: 30px;
        width: 100%;
        margin-left: 0;
        margin-top: 2rem;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
    #navbar-sticky ul {
        margin-top: 0;
        border-radius: 30px;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    .header-data{
        height: 80vh;
    }
    .header-data video{
        height: 100%;
    }
    .header-meta{
        position: relative;
        left: 1rem;
        top: 5rem;
        width: 85%;
    }
    .rtl.header-meta{
        left: -2rem;
    }
    .header-title{
        font-size: 3rem;
    }
    .header-subtitle{
        font-size: 1.4rem;
        word-spacing: 0px;
        line-height: 40px;
    }
    .header-sub-subtitle{
        font-size: 1rem;
    }

    .rtl.onTouch-section{
        left: -0.6rem !important;
    }
    .onTouch-section{
        position: relative;
        top: 20%;
        left: 0.6rem;
        width: 95%;
        border-radius: 32px;
        height: 10rem;
    }
    .right, .left{
        height: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-around;
        
    }

    .about-meta{
        margin: 0 2rem 5rem;
    }

    .about-us-title{
        grid-column: span 3 / span 3;
        font-size: 3rem;
        text-align: left;
    }
    .about-us-description{
        text-align: left;
    }
    .about-us-cards{
        margin-left: 2rem;
        margin-right: 2rem;
    }
    .card-description{
        width: 100%;
    }

    .projects-body{
        margin-left: 1rem;
        margin-right: 1rem;
        padding: 16px;
    }
    .projects-inner-body{
        flex-direction: column;
    }
    .ourProject-title{
        font-style: 3rem;
        margin-bottom: 1.5rem;
    }
    .ourProject-description{
        margin-bottom: 1.5rem;
    }

    .features{
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-around;
    }
    .feature-body{
        padding-right: 0.9rem;
        padding-left: 0.9rem;
    }
    .feature-name{
        font-size: 1rem;
        margin: auto;
    }

    .ourServices{
        margin-left: 2rem;        
        margin-right: 2rem;        
    }
    .services{
        grid-template-columns: repeat(1, minmax(0, 1fr));
        margin-top: 2rem;
    }
    .service-title p{
        font-size: 1.3rem;
    }

    .sliders{
        margin-left: 2rem;
        margin-right: 2rem;
    }
    .ourClients-logos{
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding-left: 0;
        padding-right: 0;
    }
    .ourClients-logos img{
        width: 100%;
    }
    /*for test*/
    .team-header{
        margin-bottom: 0;
    }
    .team-cards{
        margin-top: 4rem;
        margin-bottom: 2rem;
    }
    .team-cards-container{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .team-cards-container .slide .slide-body{
        width: 10rem;
        padding-top: 0;
        height: 20rem;
        margin-bottom: 4rem;
    }
    .team-position{
        width: 70%;
        text-align: center;
        margin: auto;
    }
    .team-name{
        font-size: 1rem;
    }
    .team-cards-container .slide .slide-body img{
        margin: auto;
        width: 100%;
        height: 166.88px;
        border-radius: 32px;
        position: static;
        margin-top: 0;
        margin-bottom: 0;
    }
    .team-cards .slide{
        /* margin-bottom: 8rem; */
        margin-bottom: 0;
    }

    .contact-us-container{
        margin-left: 2rem;
        margin-right: 2rem;
        position: relative;
        z-index: 10;
    }
    .textarea {
        grid-column: span 2 /span 2;
        width: 100%;
    }
    .footer{
        /* display: none; */
        padding-left: 1rem;
        padding-right: 1rem;
        position: relative;
    }
    .footer-logo {
        position: absolute;
        left: 0;
        bottom: 0;
        
    }
    .footer-first-part{
        flex-direction: row;
        flex-wrap: wrap;
        position: relative;
        z-index: 10;
    }
    .footer-first-part-head{
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
    }
    .footer-first-part-info{
        width: 100%;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
    }
    .footer-first-part-info .footer-mail{
        justify-content: center;
    }
    .footer-first-part-last{
        width: 100%;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        margin-top: 1rem;
    }
    .footer-second-part{
        margin-bottom: 2rem;
        position: relative; 
        z-index: 10;
    }
    .footer-second-part .footer-second-part-title{
 
        margin-top: 2rem;
    }
    .footer-second-part-links{
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 4rem;
        text-align: center;
    }
    .footer-third-part{
        position: relative;
        z-index: 10;
    }
    .footer-third-part-body{
        align-self: self-start;
    }
    /* .footer-address-title{
        text-align: center;
    } */
    .footer-address-info br{
        display: none;
    }
    .footer-address-info{
        width: 100%;
        text-align: center;
        align-self: center;
    }
    .footer-view-location{
        justify-content: flex-start;
    }
    .footer-view-location p{
        margin-right: 1rem;
    }
    .footer-m-auto{
        margin: auto;
    }

    .copyRights{
        position: relative;
        z-index: 10;
        width: 100%;
        justify-content: center;
    }

    #language-selector{
        background-color: transparent;
        color: #fff;
    }
}

@media (max-width: 1246px) and (min-width: 1024px){
    .features.rtl {
        left: 31%
    }
}


#second-project, #third-project, #fourth-project,#second-img , #third-img , #fourth-img {
    display: none ;
}