/* ========================================== IMPORT FONTS ========================================== */
/* @import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Changa:wght@300;400;500;600;700&display=swap');

/* ================================================================================================== */
/*
@font-face {
    font-family: 'Changa';
    font-style: normal;
    font-weight: 300;
    src: local('Changa Regular'), url('Changa-Regular.woff') format('woff');
    }


    @font-face {
    font-family: 'Changa';
    font-style: normal;
    font-weight: 400;
    src: local('Changa Light'), url('Changa-Light.woff') format('woff');
    }


    @font-face {
    font-family: 'Changa';
    font-style: normal;
    font-weight: 500;
    src: local('Changa Medium'), url('Changa-Medium.woff') format('woff');
    }


    @font-face {
    font-family: 'Changa';
    font-style: normal;
    font-weight: 600;
    src: local('Changa SemiBold'), url('Changa-SemiBold.woff') format('woff');
    }


    @font-face {
    font-family: 'Changa';
    font-style: normal;
    font-weight: 700;
    src: local('Changa Bold'), url('Changa-Bold.woff') format('woff');
    } */
:root {
    --dark-blue: #2e2e43;
    --black: #171932;
    --light-blue: #52A9CD;
    --darkblue2: #19476C;
    --light-grey: #747b8c;
    --light-grey2: #f8f9fa;
    --white: #ffffff;
}

/* =================================== GENERAL =================================== */
html {
    scroll-behavior: smooth;
}

header {
    height: 70vh;
}

body {
    font-family: 'Changa', 'sans-serif';
}

/* ================================================================================= */

/* =================================== NAVBAR =================================== */
.navbar .navbar-brand img {
    max-width: 80px;
}

/*
.navbar-expand-lg .navbar-nav:lang(ar) {
    padding-left: 30px;
}

.navbar-expand-lg .navbar-nav:lang(en) {
    padding-right: 30px;
} */

li.nav-item.changeLang:lang(ar) {
    margin-top: 8px;
    margin-right: 15px;
}

li.nav-item.changeLang:lang(en) {
    margin-top: 8px;
    margin-left: 15px;
}

.nav-item {
    border-bottom: 2px solid transparent;
}

.nav-item:not(.changeLang):hover {
    border-bottom: 2px solid var(--light-blue);
    /* transform: ; */
    /* border-radius: 25px; */
}

#about .bg-light {
    border-radius: 20px;
}

/* ================================================================================= */

/* =================================== CAROUSEL =================================== */
.carousel {
    height: 70vh;
}

.carousel-inner {
    height: 70vh;
}

.carousel .carousel-indicators button {
    width: 10px;
    height: 10px;
    border-radius: 100%;
}

.carousel-item {
    height: 70vh;
}

.carousel-item img {
    object-fit: cover;
    height: 70vh;
}

/* ================================================================================= */

/* ===================================== ABOUT ===================================== */



.large-screen {
    display: block;
}

.mobile-screen {
    display: none;
}

section:not(#contact) {
    padding: 80px 0px;
}


section .subtitle {
    font-weight: 700;
    /* padding-bottom: 15px; */
    margin-top: 15px;
}


section .subtitle::before {
    content: '';
    /* width: 10%; */
    display: block;
    background-color: var(--light-blue);
    height: 2px;
    margin-bottom: 10px;
}

section .title {
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    padding-bottom: 40px;
}


section .title::before,
section .title::after {
    content: '';
    display: inline-block;
    width: 10%;
    color: var(--dark-blue);
    background-color: var(--light-blue);
    border: 1px solid var(--light-blue);
    margin: 8px 20px;

}

section.dark {
    background-color: var(--darkblue2);
    color: var(--white);
    text-align: justify;
    text-justify: inter-character;
}

section.dark .title {
    color: var(--white);
}

section.light {
    background-color: var(--light-grey2);
}

section.dark-back {
    background: url(../img/1584370643788.png);
    background-repeat: no-repeat;
    background-size: cover;
    color: white;
}

#about ul {
    list-style: none;
}

.section-icon {
    width: 60%;
    background-color: var(--light-blue);
    border-radius: 100%;
    padding: 20px;
}

.section-icon2 {
    width: 150px;
    background-color: var(--light-blue);
    height: 150px;
}

.icon-wrapper {
    /* width: 60%; */
    /* text-align: end; */
    margin-bottom: 20px;
}


.icon-wrapper2 {
    width: 50%;
    /* text-align: end; */
    margin:auto;
    margin-bottom: 20px;
}



.subdetail {
    margin-right: 20px;
    text-align: justify;
}

.subdetail i:lang(ar) {
    margin-left: 10px;
    color: var(--light-grey);
}


.subdetail i:lang(en) {
    margin-right: 10px;
    color: var(--light-grey);
}

.line {
    border: 1px solid var(--light-grey);
}

.about-sub {
    color: var(--light-grey);
}


/* ================================================================================= */

.slider {
    width: 50%;
    margin: 100px auto;
}

.slick-slide {
    margin: 0px 20px;
}

.slick-slide img {
    width: 100%;
}

.slick-prev:before,
.slick-next:before {
    color: black;
}

.slick-slide {
    transition: all ease-in-out .3s;
    /* opacity: .2; */
}

.slick-active {
    /* opacity: .5; */
}

.slick-current {
    opacity: 1;
}

.slick-next {
    right: 0px !important;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
    direction: ltr;
}

.certificate-multiple-items .img-wrapper {
    width: 150px;
    height: 150px;
    margin: auto;
    display: flex;
    justify-content: center;
    /* padding: 10px; */
}

.certificate-multiple-items img {
    width: 120px;
    margin: auto;
    /* padding: 10px; */
}

#contact {
    background-color: var(--dark-blue);
    padding: 50px;
    padding-bottom: 20px;
    color: var(--white);
}

#contact-info {
    padding-bottom: 30px;
}

#contact-info i:lang(ar) {
    padding-left: 10px;
    font-size: 18px;
}

#contact-info i:lang(en) {
    /* padding-right: 10px; */
    font-size: 18px;
}

#contact-info i::after {
    content: '';
    color: var(--light-blue);
    display: inline;
    background-color: var(--light-blue);
    border-left: 2px solid var(--light-blue);
    margin-right: 10px;
    width: 20px;
    height: 15px;
}

#contact-info i:lang(en)::after {
    margin-left: 10px;
}

#contact-info a i::after {
    display: none;
}

#contact-info a {
    padding: 3px;
}

#contact-info span {
    /* padding-left: 10px;
    font-size: 20px; */
    margin-bottom: 10px;
}

#copyright-part {
    border-top: 1px solid var(--white);
    padding-top: 10px;
}

.fa-brands {
    background-color: var(--light-blue);
    border-radius: 100%;
    width: 40px;
    height: 40px;
    padding: 10px;
    color: var(--white);
}

.img-wrappers {
    background-color: var(--darkblue2);
    padding: 20px;
    /* border-radius: 100%; */
    border-radius: 25px;
    width: fit-content;
    margin: auto;
    margin-bottom: 30px;
}

.img-wrappers img {
    width: 50px;
    height: 50px;

}

.contribution-item,
.features-item {
    border: 1px solid transparent;
    text-align: center;
    padding: 25px;
    padding-bottom: 10px;
}

.contribution-item:hover,
.features-item:hover {
    border: 1px solid var(--light-grey);
    border-radius: 20px;
    border-color: var(--light-blue);
    box-shadow: 0 5px 10px rgb(0 0 0 / 5%);
}

.contribution-item:hover .img-wrappers,
.features-item:hover .img-wrappers {
    background-color: var(--light-blue);
    /* border: 1px solid var(--darkblue2); */
    border-radius: 25px;
    box-shadow: 0 10px 10px rgb(0 0 0 / 5%);

}

/* ============================================================================ */

#statistics .part {
    border-bottom: 2px solid var(--light-grey2);
    margin-bottom: 20px;
    /* font-weight: 700;
    font-size: 25px; */
}

#statistics .counter {
    font-weight: 700;
    font-size: 30px;
    color: var(--light-blue)
}

#statistics .statistic-name {
    color: var(--light-grey);
}

.interest-item-small .img-fluid {
    max-width: 10%;
}

.interest-item i {
    display: inline-block;
    position: absolute;
}

.interest-item p:lang(ar) {
    margin-right: 25px
}


.interest-item p:lang(en) {
    margin-left: 25px
}

#interest img {
    width: 40%;
}

/* 800 and wider */
/* @media screen and (min-width: 769px) {
    .carousel-caption {
        bottom: 20%;
    }
  } */


/* =================================== VERIFICATION =================================== */
.card {
    min-width: 50%;
    width: fit-content;
}

.card img {
    height: 300px;
    object-fit: cover;
}

.response .fa-solid {
    display: inline-block;
}

.subpage-subtitle::after {
    display: block;
    content: '';
    width: 20%;
    margin: 20px auto;
    /* padding: 20px 0px; */
    height: 1px;
    background-color: var(--light-blue);
}

.response strong {
    color: var(--light-blue);
}

.error-message{
    color: red;
}


.zoom-in-out-box img {
    max-height: 450px;
    animation: zoom-in-zoom-out 3s ease infinite;

    }

    @keyframes zoom-in-zoom-out {
    0% {
        transform: scale(1, 1);
    }
    50% {
        transform: scale(1.05, 1.05);
    }
    100% {
        transform: scale(1, 1);
    }
}
/* ================================================================================= */

/* ================================== RESPONSIVE ==================================== */
@media screen and (max-width: 460px) {
    section .title::before {
        display: none;
    }

    section .title::after {
        content: '';
        display: block;
        width: 30%;
        text-align: center;
        color: var(--dark-blue);
        border: 1px solid var(--light-blue);
        margin: auto;
        margin-top: 20px;
    }


    .section-icon {
        width: 30%;
    }


    .icon-wrapper2 {
        /* width: 50%; */
        /* text-align: end; */
        margin:auto;
        margin-bottom: 20px;
    }

    .section-icon2 {
        /* width: 50%; */
        /* text-align: end; */
        /* margin:auto;
        margin-bottom: 20px; */
        margin-top: 40px;
    }

    #verification img{
        width: 50%;
    }

    #verification .about-sub{
        margin-top: 20px !important;
    }

    .sp{
        margin-top: 40px !important;
    }

    section .subtitle::before {
        width: 30%;
        margin: auto;
        margin-bottom: 10px;
    }


    .row-with-bg {
        margin: 0px 15px;
    }


    .subdetail {
        margin-right: 0px;
    }

    .interest-item {
        padding: 20px;
        padding-bottom: 0px;
    }

    #contact-info strong {
        display: none;
    }


    #contact-info p {
        font-size: calc(.7rem + .05vw);
    }


    #contact-info h6 {
        text-align: center;
    }

    .social {
        margin-bottom: 20px;
    }

    #copyright-part {
        /* font-size: calc(.7rem + .05vw); */
        font-size: 14px;
    }

    /*
#contact-info{
    text-align: center;
} */

    .large-screen {
        display: none;
    }

    .mobile-screen {
        display: block;
    }

}
@media screen and (max-width: 767px) {
    input[name="search"] {
        margin-bottom: 20px;
    }

    #search-result-part{
        margin-top: 140px;
    }
}

/* ================================================================================= */