/* Import google font  */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@200;300;400;500;700;800;900&display=swap');
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Tajawal", sans-serif;
}

html{
    scroll-behavior: smooth;
    overflow-x: hidden;
}
/* start section hero  */
.hero{
    margin-top: 84px;
    background-image: url(../img/hero\ section.svg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* background: linear-gradient(to right, #4E48AB, #14123A); */
    height: 552px;
    
}
.hero .img{
    /* top: 84px; */
    width: 100%;
}
.hero .img img{
    width: 100%;
}
.hero .content{
    height: 552px;
}
.hero .txt{
    font-size: 39px;
    font-weight: 500;
    color: white;
}
.hero .txt .span{
    font-size: 58px;
    font-weight: 700;
    color: white;
}
/* md screen  */
@media (min-width: 768px) and (max-width: 992px){
    .hero{
        margin-top: 65px;
        background-image: url(../img/hero\ section-md.svg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        height: 317px;
    }
    .hero .content{
        height: 317px;
    }
    .hero .txt{
        font-size: 22px;
    }
    .hero .txt .span{
        font-size: 31px;
    }
}
/* sm screen  */
@media (max-width: 768px){
    .hero{
        margin-top: 48px;
        background-image: url(../img/hero\ section-sm.svg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        height: 162px;
    }
    .hero .content{
        height: 162px;
    }
    .hero .txt{
        font-size: 12px;
    }
    .hero .txt .span{
        font-size: 16px;
    }
}
/* end section hero  */
/* start section we are here  */
.we-are-here{
    background: #EFF1FF;
}
.we-are-here .content .form input, textarea{
    margin-bottom: 2rem;
}
.we-are-here .content .form .bttn{
    width: 270px;
    background: #2F2B73;
    color: white;
    font-size: 20px;
    font-weight: 700;
    border: none;
    border-radius: 10px !important;
}
#basic-addon1{
    transform: translatey(-111%);
    left: 30px;
    opacity: .8;
}
.we-are-here .content .d-lg-block h2{
    font-size: 31px;
    font-weight: 700;
    color: #2F2B73;
}
.we-are-here .content .d-lg-block .text{
    font-size: 25px;
    font-weight: 400;
    color: #14123A;
}
.we-are-here .content label{
    font-size: 20px;
    font-weight: 500;
    color: #000000;
}
.we-are-here .contact-info .contact-info-title{
    font-size: 31px;
    font-weight: 700;
    color: #2F2B73;
}
.we-are-here .contact-info .contact-info-title, .contact-info-item{
    margin-bottom: 2rem;
}

.we-are-here .contact-info .txt1{
    font-size: 18px;
    font-weight: 500;
    color: #56565E;
}
.we-are-here .contact-info .txt2{
    font-size: 25px;
    font-weight: 400;
    color: #14123A;
}
.we-are-here .contact-info .google-map iframe{
    width: 100%;
    height: 250px;
}
/* md screen  */
@media (min-width: 768px) and (max-width: 992px){
    .we-are-here .content .form, .contact-info{
        width: 100% !important;
    }
    .we-are-here .contact-info .google-map iframe{
        width: 75%;
        height: 250px;
    }
    .we-are-here .contact #contactForm{
        width: 100% !important;
    }
}
/* sm screen  */
@media (max-width: 768px){
    #basic-addon1{
        left: 25px;
    }
    .we-are-here .content  .w-50{
        width: 100%!important;
    }
    .we-are-here .content  .w-50 img{
        width: 32px;
    }
    .we-are-here .content .form .bttn{
        width: 100%;
    }
    .we-are-here .content label{
        font-size: 16px;
    }
    .we-are-here .contact-info h2{
        font-size: 25px;
    }
    .we-are-here .contact-info .txt1{
        font-size: 16px;
    }
    .we-are-here .contact-info .txt2{
        font-size: 20px;
    }
    .we-are-here .contact-info .google-map iframe{
        width: 100%;
        height: 250px;
    }
}
/* end section we are here  */





.text-danger {
    color: red;
    font-size: 0.9rem;
}

.d-none {
    display: none;
}

.error-border {
    border: 2px solid red;
}