@import url('https://fonts.googleapis.com/css2?family=Anton&family=El+Messiri:wght@400;500;600;700&display=swap');


@font-face {
    font-family: "helvetica-light";
    src: url("/fonts/helvetica-light.ttf")
}

@font-face {
    font-family: "janna-regular";
    src: url("/fonts/janna-regular.ttf")
}

:root{
    --teal-blue: #043c5c;
    --blue-color: #0099f1;
}

/**{*/
/*    font-family: janna-regular, sans-serif !important;*/
/*}*/

.bg-teal{
    background: var(--teal-blue);
}
.text-teal{
    color: var(--teal-blue);
}

.nav-active{
    background: #e5e7eb70;
    padding: 0.5rem;
}

.nav-item a.from-left:after {
    transform-origin: left;
}

.nav-item a.from-right:after {
    transform-origin: right;
}
html, #app{
    overflow-x: hidden !important;
}

body{
    /*font-family: 'Anton', sans-serif;*/
    /*font-family: 'El Messiri', sans-serif !important;*/
    overflow-x: hidden !important;
}

.btn__teal{
    background-color: var(--teal-blue) !important;
    color: white;
    border-color: var(--teal-blue) !important;
}

.btn__teal:hover{
    opacity: 0.7;
}
p{
    text-align: justify;
    font-family: janna-regular, sans-serif;
}

/* Navbar */

.nav-item{
    padding-left: 2rem;
    text-align: center;
}
.nav-item a{
    font-family: "helvetica-light",sans-serif;
    line-height: 41px;
    font-size: 15px;
    color: rgb(118 118 118);
}

.nav-item button{
    color: rgb(118 118 118) !important;
    font-family: janna-regular, sans-serif;
}

/*@media (max-width: 991px) {*/

/*}*/
.navbar-menu{
    padding-right: 6rem;
}

/*@media (min-width: 992px) {*/
/*    */
/*}*/

/*End Navbar*/


/* Hero Section */
.hero-section{
    width: 100%;
    height: 80vh;
    background: linear-gradient(50deg, rgb(234 234 234 / 53%) 1%, rgb(223 215 215 / 60%) 101%), url(/img/images/header.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.btn__meet__the__fellows{
    background-color: var(--teal-blue);
    border-color: var(--teal-blue);
    transition: border-color 0.4s ease 0s, background-color 0.4s ease 0s;
    border-radius: 12px;
}

.hero__container{
    position: relative;
}
@media (max-width: 991px) {

    .hero__container{
        width: 100%;
    }

    .hero__container .hero__text {
        font-size: 2rem;
        color: var(--teal-blue);
        font-family: 'Anton', sans-serif;
        padding: 2rem;
        text-align: center;
    }

    .btn__meet__the__fellows{
        left: 28%;
        right: 20%;
    }
}

@media (min-width: 992px) {
    .hero__container{
        width: 556px;
        margin: 189px 0px 60px calc((76% - 1293px) * 0.5);
        text-align: center;
        position: relative;
        display: flex;
        justify-content: center;
    }

    .hero__container .hero__text{
        font-size: 70px;
        color: var(--teal-blue);
        font-family: 'Anton', sans-serif;
    }
    .fellows__section{
        padding-left: 3rem;
        padding-right: 3rem;
    }
}

.btn__meet__the__fellows {
    background-color: var(--teal-blue) !important;
    color: white;
    margin-top: 2rem !important;
    position: absolute;
    bottom: -75px;
    font-family: "janna-regular", sans-serif;
    font-size: 1.2rem;
    transition: color 0.4s ease 0s;
}
.btn__meet__the__fellows span{
    transition: color 0.4s ease 0s;
    white-space: nowrap;
}
.btn__meet__the__fellows:hover {
    background-color: #095b8d !important;
}

/* End Hero Section */


/*Features Section*/


.feature.first {
    background-color: rgba(0, 62, 95, 0.95);
    color: white;
}

.feature.second {
    background-color: rgba(56, 149, 199, 0.95);
    color: white;
}

.feature.third {
    background-color: rgba(139, 214, 0, 0.9);
    color: white;
}

.feature__title{
    height: auto;
    margin: 50px 0px 25px calc((100% - 326px) * 0.5);
    font-family: janna-regular ,sans-serif;
}

.feature__desc{
    height: auto;
    margin: 0px 0px 41px calc((100% - 326px) * 0.5);
    font-family: janna-regular ,sans-serif;
    position: relative;
    left: 0px;
    grid-area: 2 / 1 / 3 / 2;
    justify-self: start;
    align-self: start;
    width: 310px;
}

.feature__desc .feature__desc__text{
    line-height: 1.4em;
    font-size: 15px;
}

.feature__arrow{
    width: 3rem;
    margin-top: 1rem;
}

/*End Features section*/


/*Home About*/


@media (max-width: 991px) {
    .home__about{
        width: 100%;
        background: url(/img/images/background.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }

    .about__desc {
        background-color: #ffffffd1;
        text-align: justify;
        font-family: janna-regular, sans-serif;
        padding: 3rem 2rem;
        font-size: 1rem;

    }
    .about__text{
        padding-top: 6rem;
        padding-left: 15px;
        padding-right: 15px;
        padding-bottom: 2rem;
    }
}

.home__about .home__about__first__col{
    background: url(/img/images/background.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.about__desc{
    background: linear-gradient(50deg, rgb(255 255 255 / 87%) 1%, rgb(255 255 255 / 84%) 101%), url(/img/images/background.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}


@media (min-width: 992px) {
    .about__desc{
        background-color: #ffffffd1;
        padding-left: 2rem;
        padding-top: 3rem;
        padding-right: 17rem;
        text-align: justify;
        font-family: janna-regular, sans-serif;
        font-size: 1.1rem;
        padding-bottom: 2rem;
    }

    .home__about{
        width: 100%;
    }
    .about__text{
        padding: 4rem;
    }
}

/* end Home About*/


/* Footer */

footer{

    padding-top: 3rem;
    padding-bottom: 2rem;
}
.footer__desc{
    text-align: center;
    font-family: janna-regular, sans-serif;
    font-size: 1rem;
    color: var(--teal-blue);
    padding: 1rem;
}

.copy__rights{
    margin-right: 1rem;
    /*text-align: right;*/
}


@media (max-width: 991px) {
    footer{
        padding-left: 1rem;
    }
    .social__icons{
        display: flex;
        justify-content: center;
        align-content: center;
        margin-top: 1.5rem;
    }
}
@media (min-width: 992px) {
    .social__icons{
        display: flex;
        justify-content: center;
        align-content: center;
        margin-top: 1.5rem;
    }
    footer{
        padding-left: 3rem;
    }
}

.footer__logo{
    width: 6rem;
    height: auto;
}
/* End Footer */


/*About Hikma Page*/

.about__hikma__section{
    width: 100%;
    /*height: 100vh;*/
    background: linear-gradient(50deg, rgb(255 255 255 / 88%) 1%, rgb(255 255 255 / 87%) 101%), url(/img/images/background.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

/*@media (max-width: 991px) {*/
/*    .about__hikma__section {*/
/*        */
/*    }*/
/*}*/

@media (min-width: 992px) {

    .about__hikma__section{
        padding-right: 12rem;
        padding-left: 12rem;
        padding-top: 10rem;
        padding-bottom: 5rem;
    }
}



.about__text{

    font-family: janna-regular, sans-serif;
    text-align: justify;
}

.programs__section{
    padding-top: 2rem;
}
.program__title{
    margin-top: 1rem;
    margin-bottom: 1rem;
    font-size: 1.5rem;
    font-family: janna-regular, sans-serif;
    font-weight: bold;
    color: var(--blue-color);

}

.program__brief{
    text-align: justify;
}

.program__image{
    object-fit: cover;
    height: 250px;
    width: 100%;
}

.read__more_button{
    color: white;
    background-color: var(--teal-blue);
    border-radius: 10px;
    font-family: janna-regular, sans-serif;
}
.read__more_button:hover{
    opacity: 0.7;
}
/* End About Hikma Page*/


/*Organizer Section*/

.organizer__section{
    margin-top: 5rem;
    background: linear-gradient(50deg, rgb(255 255 255 / 88%) 1%, rgb(255 255 255 / 87%) 101%), url(/img/images/background.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.organizer__intro{
    margin-top: 5rem;
    padding: 2rem;
    font-family: janna-regular, sans-serif;
    text-align: justify;
}

.organizer__name{
    color: var(--teal-blue);
    font-family: janna-regular, sans-serif;
}

.organizer__image{
    width: 100%;
    height: 350px;
    object-fit: cover;
    object-position: top;
}


.organizer__content{
    margin-top: 2rem;
    padding: 2rem;
    font-family: janna-regular, sans-serif;
    text-align: justify;
}


@media (max-width: 991px) {

    .programs__section{
        padding-right: 15px;
        padding-left: 15px;
    }
    .plr-sm{
        padding-right: 15px;
        padding-left: 15px;
    }
    .organizer__intro{
        padding: 2rem 15px;
    }

    .hide_sm{
        display: none !important;
    }
    .organizer_col{
        margin-top: 1.5rem;
    }
    .organizer__section{
        padding-bottom: 3rem;
    }
}

@media (min-width: 992px) {
    .organizer__content{
        margin-right: 16rem;
        margin-left: 16rem;
        font-family: janna-regular,s;
    }
    .organizer__intro{
        margin-right: 18rem;
        margin-left: 18rem;
    }
    .organizer__section{
        padding: 2rem;
    }
}

/* End Organizer Section*/



/* Start Fellows Section*/

.fellows__section{
    width: 100%;
    /*height: 100vh;*/
    background: linear-gradient(50deg, rgb(255 255 255 / 88%) 1%, rgb(255 255 255 / 87%) 101%), url(/img/images/background.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding-top: 8rem;
    padding-bottom: 2rem;
    font-family: janna-regular, sans-serif;
}


.fellow__image{
    border-radius: 99999px;
    border-radius: 50%;
    height: 250px;
    width: 250px;
}
/* End Fellows Section*/


/*Hikma Platform*/



.platform__intro{
    padding-top: 5rem;
    font-family: janna-regular, sans-serif;
    text-align: justify;

}

@media (max-width: 991px) {
    .platform__intro{
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .hikma_sm{
        display: block;
    }
    .hikma_lg{
        display: none !important;
    }
    .contact__section{
        padding-bottom: 2rem;
    }
    .privacy__Section{
        padding: 1rem;
    }
    .platform__section{
        padding-bottom: 2rem;
    }

    .brand_sm{
        display: flex;
    }
    .on_lg_only{
        display: none !important;
    }
    .gap-4{
        gap: unset !important;
    }
}

@media (min-width: 992px) {
    .platform__section{
        margin-top: 5rem;
        padding-bottom: 2rem;
    }
    .platform__intro{
        padding-right: 30%;
        padding-left: 30%;
    }
    .hikma_sm{
        display: none;
    }
    .hikma_lg{
        display: block !important;
    }
    .brand_sm{
        display: none !important;
    }
    .on_lg_only{
        display: block;
    }
}

.platform__section, .privacy__Section{
    background: linear-gradient(50deg, rgb(255 255 255 / 88%) 1%, rgb(255 255 255 / 87%) 101%), url(/img/images/background.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.contact__section{
    /*margin-top: 2rem;*/
    width: 100%;
    background-color: rgb(176,167,85);
    /*height: 300px;*/
    position: relative;
}

.hakima{
    height: 310px;
    position: relative;
    bottom: 0.7rem;
}

.hikma__question{
    font-size: 1.8rem;
    color: white;
    margin-top: 3rem;
    font-family: janna-regular, sans-serif;
    text-align: center;
}

.hikma__first_text{
    margin-top: 1rem;
    color: white;
    text-align: center;
}
.hikma__second_text{
    color: white;
    text-align: center;
}

.privacy__title{
    margin-top: 3rem;
    font-size: 1.5rem;
}
.privacy__Section{
    padding-bottom: 3rem;
    padding-top: 3rem;
}

.btn__platform{
    background: linear-gradient(141deg, #003e5f 0%, #1b77cd 100%);
    border-radius: 9999px;
    display: flex;
}
/* End Hikma Platform*/



/*Publications*/

.publication__section{
    margin-top: 5rem;
    background: linear-gradient(50deg, rgb(255 255 255 / 88%) 1%, rgb(255 255 255 / 87%) 101%), url(/img/images/background.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.publication__details{
    background: linear-gradient(50deg, rgb(255 255 255 / 96%) 1%, rgb(255 255 255 / 90%) 101%), url(/img/images/background.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    margin-top: 5rem;
    padding-bottom: 2rem;
    padding-right: 15px;
    padding-left: 15px;
}
/* End Publications*/

.pub_image{
    height: 250px;
    object-fit: cover;
    object-position: top;
}

.fellow__image{
    filter: grayscale(100%);
}

.fellow__image:hover{
    filter: grayscale(0);
}