@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;1,300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;1,300&family=Roboto&display=swap');


:root {
    --theme: #f5b745;
}

::-webkit-scrollbar {
    display: none;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Open Sans', 'Roboto', sans-serif !important;
    min-height: 100vh;

}

.navbar {
    transition: all 0.4s;
}

.navbar .nav-link {
    color: #fff;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
    color: var(--theme);
    text-decoration: none;

}

.navbar-nav .active {
    border-bottom: 3px solid var(--theme);
}

.navbar .navbar-brand {
    color: #fff;
}


/* Change navbar styling on scroll */
.navbar.active {
    background: #000;
    box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.1);

}

.navbar.active .nav-link {
    color: #fff;
}

.navbar.active .nav-link:hover,
.navbar.active .nav-link:focus {
    color: var(--theme);
    text-decoration: none;
}

.navbar.active .navbar-brand {
    color: #555;
}

.home {
    width: 100%;
    height: 100vh;
    background: url('../images/thami-cover.jpg ');
    background-size: cover;
}

.home::before {
    content: "";
    background: rgba(0, 0, 0, .65);
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
}

.home .home-container {
    position: relative;
    z-index: 2;
    min-width: 18.75rem;
    max-width: 53.125rem;
    padding-left: 7.5rem;
}

.home .home-container .home-title {
    font-size: 3.75rem;
    color: var(--theme);
    font-weight: 700;

}

.home .home-container .home-script {
    font-size: 1.6875rem;
    color: #fff;

}

.btn,
.button {
    border: 2px solid black;
    background-color: white;
    color: black;
    padding: 14px 28px;
    font-size: 16px;
    cursor: pointer;
    width: 165px;
    border-radius: 0px;

}

.btn-home {
    background-color: var(--theme);
    color: #000;

}

.btn-home:hover {
    border-color: var(--theme);
    color: var(--theme);
    background-color: transparent;
}

.about .about-block,
.about .about-info {
    min-height: 100vh;
    height: 48rem;
    position: relative;
}

.about .about-info {
    display: flex;
    align-items: center;
}

.about-images {
    width: 20.75rem;
    height: 28.25rem;
    position: absolute;
    background-color: #ffe7bd;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;

}

.about-images2 {
    width: 20.75rem;
    height: 28.25rem;
    position: absolute;
    top: 35%;
    left: 30%;
    transform: translate(-50%, -50%);
    z-index: 2;
    background-size: cover;
    object-fit: cover;
}

.about-images3 {
    width: 20.75rem;
    height: 28.25rem;
    position: absolute;
    top: 60%;
    left: 65%;
    transform: translate(-50%, -50%);
    z-index: 3;
    background-size: cover;
    object-fit: cover;
}

.about .about-title {
    font-size: 1.5rem;
    color: var(--theme);


}

.about .about-subtitle {
    font-size: 2.875rem;
    color: #383837;
    font-weight: 700;


}

.about .about-script {
    font-size: 1.125rem;
    color: #4c4c4c;

}

.event {
    position: relative;
    background-color: #f5b745;
    min-height: 100vh;
}

.event::before
{
    content: ' ';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;    
    background: url('../images/Events\ Background.jpg') no-repeat ;
    object-fit: cover;
    min-height: 100vh;
    background-blend-mode: multiply;
}
.event-content
{
    position: relative;
}
.event .event-title {
    font-size: 1.5rem;
    color: #000;
    font-weight: bold;
    padding-top: 2.5rem;
    margin-bottom: 1rem;

}

.event .event-subtitle {
    font-size: 4.3125rem;
    color: #000;
    font-weight: bold;

}

.event-img {
    background: #000;
    width: 120px;
    height: 120px;
    position: relative;
}
svg {
    fill: var(--theme);
  }

.event-img::after {
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.5;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.event-name {
    margin-top: 2rem;
    color: #000;
    font-size: 1.875rem;
}

.event-script {
    color: #000;
    font-size: .875rem;
    font-weight: 600;
}

.btn-event {
    border-color: #000;
    color: #000;
    background-color: transparent;
}

.btn-event:hover {
    background-color: #000;
    color: #fff;
    text-decoration: none;
}

.publications .publications-text,
.publications .publications-img {
    min-height: 100vh;
    position: relative;
}

.publications .publications-text {
    display: flex;
    align-items: center;
}

.publications-img .img {
    width: 35.3125rem;
    height: 32.5625rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    object-fit: cover;
    background-size: cover;

}

.publications .title {
    color: var(--theme);
    font-size: 1.5rem;
}

.publications .subtitle {
    color: #383837;
    font-weight: 700;
    font-size: 2.875rem;

}

.publications .script {
    font-size: 1.125rem;
    color: #4c4c4c;
}

.community {
    background-color: var(--theme);
}

.community .community-images,
.community .community-text {
    min-height: 100vh;
    position: relative;
}

.community .community-images,
.community .community-text {
    display: flex;
    align-items: center;
}

.community .community-images .card {
    width: 20rem;
}

.community-images .card .card-img-top {
    height: 290px;
    object-fit: cover;
}

.community-text .community-title {
    font-size: 1.5rem;
    color: #000;

}

.community-text .community-subtitle {
    font-size: 2.875rem;
    font-weight: 700;
    color: #000;

}

.community-text .community-script {
    font-size: 1.125rem;
    color: #000;
    font-weight: 600;

}

.btn-community {
    background-color: #000;
    color: #fff;

}

.btn-community:hover {
    border-color: #000;
    color: #000;
    background-color: transparent;
}

.footer-1 {
    background-color: #000;
}

.footer-1 .social-img {
    height: 2.1875rem;
}

.widget .title {
    font-size: 1.5rem;
}

.widget ul {
    list-style: none;
    font-size: 1.0625rem;
}

.widget ul li {
    margin-bottom: 1rem;
}

.widget ul li a {
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
}

.widget ul li a:hover {
    color: var(--theme);
    text-decoration: none;
}

.footer-line {
    border: 2px solid #fff;
}

.banner-2 {

    height: 15.625rem;
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.banner-2::before {
    content: "";
    background: rgba(0, 0, 0, .65);
    position: absolute;
    height: 15.625rem;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
}

.about-home {
    background-image: url("../images/about.jpg");
}

/* .about-home-container {
    position: relative;
    z-index: 2;
    min-width: 18.75rem;
    max-width: 53.125rem;
    padding-left: 7.5rem;
} */

/* .about-home-container .about-home-title {
    font-size: 2.8125rem;
    font-weight: 700;
    color: #fff;
    margin-top: 5.5rem;
} */

.about-story .about-block {
    margin-top: 1.5625rem;
}

.our-team {
    background-color: var(--theme);
    min-height: 100vh;
}

.our-team .title {
    font-size: 1.5rem;
    text-align: center;
    padding-top: 2.5rem;
    margin-bottom: 1rem;
    font-weight: 700;
}

.our-team .script {
    font-size: 1.125rem;
    margin-bottom: 2.5rem;
    text-align: center;
}

.our-team .img {
    object-fit: cover;
    height: 18.75rem;

}

.our-gallery {
    min-height: 100vh;
}

.our-gallery .title {
    font-size: 1.5rem;
    text-align: center;
    padding-top: 2.5rem;
    margin-bottom: 1rem;
    font-weight: 700;
    color: var(--theme);
}

.our-gallery .script {
    font-size: 1.125rem;
    margin-bottom: 2.5rem;
    text-align: center;
}

.our-gallery .card {
    border: 0;
    margin-bottom: 1.5625rem;
}

.our-gallery .img {

    max-height: 17.5rem;
    object-fit: cover;
}

.card-last {
    position: relative;
}

.card-last::before {
    content: "";
    background: rgba(0, 0, 0, .65);
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
}

.card-last .overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.card-last .overlay .overlay-content {
    line-height: 224px;
    width: 100%;
    text-align: center;
    color: #fff;
}

.card-last .overlay .overlay-content a {
    color: #fff;
    padding: 0 2rem;
    display: inline-block;
    border: 2px solid rgba(255, 255, 255, 0.4);
    height: 40px;
    line-height: 40px;
    cursor: pointer;
    text-decoration: none;
    font-weight: bold;
    font-size: 1rem;
}

.card-last .overlay .overlay-content a:hover,
.card-last .overlay .overlay-content a.hover {
    background: var(--theme);
    border-color: var(--theme);
}

.events-banner {
    background: url('../images/eventBanner.jpg');
}

.about-home-container,
.events-container,
.publication-container,
.get_involved-container,
.contact_us-container {
    position: relative;
    z-index: 2;
    min-width: 18.75rem;
    max-width: 53.125rem;
    padding-left: 7.5rem;
}


.about-home-container .about-home-title,
.events-container .title,
.publication-container .title,
.get_involved-container .title,
.contact_us-container .title {
    font-size: 2.8125rem;
    font-weight: 700;
    color: #fff;
    margin-top: 5.5rem;
}

.latest-news,
.latest-articles,
.latest-books,
.articles,
.releases {
    min-height: 100vh;
}

.latest-news .title,
.latest-articles .title,
.latest-books .title,
.releases .title {
    font-size: 1.5rem;
    font-weight: 700;
    padding-top: 2.5rem;
    margin-bottom: 1.25rem;
    text-align: center;
    color: var(--theme);
}

.latest-news .script,
.latest-articles .script,
.latest-books .script,
.releases .script {
    font-size: 1.125rem;
    margin-bottom: 2.5rem;
    text-align: center;

}

.latest-news .card-body,
.latest-articles .card-body {
    padding: 1.25rem 0;
}

.latest-news .date,
.latest-articles .date {
    background-color: var(--theme);
    width: 3.125rem;
    height: 4.125rem;
    float: left;
    margin-bottom: 5rem;

}

.latest-news .digit,
.latest-articles .digit {
    font-size: 1.9375rem;
    font-weight: bold;

}

.latest-news .text,
.latest-articles .text {
    font-size: 1.125rem;
    font-weight: bold;
    margin-top: -13px;
}

.latest-news .info .title,
.latest-articles .info .title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #000;
}

.latest-news .info .script,
.latest-articles .info .script {
    font-size: 1.125rem;
    margin-top: 8px;
    text-align: left;
    margin-bottom: 8px;
}

.latest-news .info a,
.latest-articles .info a {
    color: var(--theme);
    font-size: 1rem;
    font-weight: bold;
}

.latest-news .info a:hover,
.latest-articles .info a:hover {
    text-decoration: none;
    border-bottom: 1px solid var(--theme);
    color: var(--theme);
}

.latest-blog {
    min-height: 100vh;
    background-color: var(--theme);
}

.latest-blog .title {
    font-size: 1.5rem;
    font-weight: 700;
    padding-top: 2.5rem;
    margin-bottom: 1.25rem;
    text-align: center;
}

.latest-blog .script {
    font-size: 1.125rem;
    margin-bottom: 2.5rem;
    text-align: center;
}

.latest-blog .card-body {
    padding: 1.25rem 0;
}

.latest-blog .info .title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #000;
}

.latest-blog .info .script {
    font-size: 1.125rem;
    margin-top: 8px;
    text-align: left;
    margin-bottom: 8px;
}

.latest-blog .info a {
    color: #000;
    font-weight: bold;
    font-size: 1rem;
}

.latest-blog .info a:hover {
    text-decoration: none;
    border-bottom: 1px solid #000;
    color: #000;
}

.publication-banner {
    background-image: url('../images/bookshelf.jpg');
}

.latest-books .book-img {
    background-color: var(--theme);
    height: 10.3125rem;
    width: 9.25rem;
    float: left;
    padding: 1.3rem 2rem;
    margin-right: 1.125rem;
}

.latest-books .book-info .book-title {
    font-size: 1.4375rem;
    font-weight: bold;
    text-transform: capitalize;
}

.latest-books .book-info .book-author,
.latest-books .book-info .print,
.latest-books .book-info .book-read {
    font-size: 1rem;
}

.latest-books .book-info a {
    color: var(--theme);
    font-weight: bold;
}

.latest-books .book-info a:hover {
    text-decoration: none;
    border-bottom: 1px solid var(--theme);
    color: var(--theme);
}

.articles .title {
    font-size: 1.5rem;
    font-weight: 700;
    padding-top: 2.5rem;
    margin-bottom: 1.25rem;
    text-align: center;
    color: #000;
}

.articles .script {
    font-size: 1.125rem;
    margin-bottom: 2.5rem;
    text-align: center;

}

.articles .card-body {
    padding: 1.25rem 0;
}

.articles .date {
    background-color: #000;
    width: 3.125rem;
    height: 4.125rem;
    float: left;
    margin-bottom: 5rem;
}

.articles .digit {
    font-size: 1.9375rem;
    font-weight: bold;
    color: var(--theme);
}

.articles .text {
    font-size: 1.125rem;
    font-weight: bold;
    margin-top: -13px;
    color: var(--theme);
}

.articles .info .title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #000;
}

.articles .info .script {
    font-size: 1.125rem;
    margin-top: 8px;
    text-align: left;
    margin-bottom: 8px;
}

.articles .info a {
    color: #000;
    font-size: 1rem;
    font-weight: bold;
}

.latest-news .info a:hover,
.latest-articles .info a:hover {
    text-decoration: none;
    border-bottom: 1px solid #000;
    color: #000;
}

.releases .news-title {
    font-size: 1.5rem;
    font-weight: 700;
}

.releases .date {
    background-color: #fff;
    width: 3.125rem;
    height: 4.125rem;
    position: absolute;
    margin: 1rem;

}

.releases .digit {
    font-size: 1.9375rem;
    font-weight: bold;

}

.releases .text {
    font-size: 1.125rem;
    font-weight: bold;
    margin-top: -13px;
}

.releases .card-body {
    padding: 1.25rem 0;
}

.releases .news-description {
    font-size: 1.125rem;
    color: #5f5f5f;
    font-weight: 700;
}

.releases .news-publisher {
    color: #5f5f5f;
    font-size: .8125rem;
}

.releases .new-box {
    margin-top: -1rem;
}

.releases .news-link {
    color: #5f5f5f;
    font-size: .8125rem;
}

.releases .trend-title {
    font-size: 1.125rem;
    font-weight: 600;
}

.releases .trend-description {
    font-size: 1rem;
    color: #5f5f5f;
    font-weight: 700;
}

.releases .trend-publisher {
    color: #5f5f5f;
    font-size: .8125rem;
}

.resources {
    min-height: 100vh;
    background-color: var(--theme);
}

.resources .title {
    font-size: 1.5rem;
    font-weight: bold;
    padding-top: 2.5rem;
    margin-bottom: 1.25rem;
    text-align: center;
}

.resources .subtitle {
    font-size: 2.625rem;
    font-weight: bold;
    text-align: center;
}

.resources .script {
    font-size: 1.125rem;
    margin-bottom: 2.5rem;
    text-align: center;
}

.resources .card-body {
    padding: 0px;
}

.resources .res-img {
    background-color: var(--theme);
    height: 10rem;
    width: 9.25rem;
    float: left;
    margin-right: 1.125rem;
}

.resources .res-img .img-fluid {
    object-fit: cover;
    height: 11.5625rem;
    width: 10rem;
}

.resources .res-info .res-title {
    font-size: .75rem;
    font-weight: bold;
}

.resources .res-info .res-description {
    font-size: .6875rem;
    font-weight: bold;
    margin-top: 1rem;
}

.resources .res-info .res-btn {
    border: 2px solid black;
    background-color: #000;
    color: var(--theme);
    padding: 6px 15px;
    font-size: .625rem;
    cursor: pointer;
    width: 5.3125rem;
    border-radius: 0px;
}

.resources .res-info .res-btn:hover {
    border-color: #000;
    color: #000;
    background-color: transparent;
    text-decoration: none;
}

.get_involved-banner {
    background-image: url('../images/support\ a\ community.jpg');
}

.btn-sponsor {
    background-color: #000;
    color: var(--theme);
}

.btn-sponsor:hover {
    border-color: #000;
    color: #000;
    background-color: transparent;
}

.contact_us-banner {
    background-image: url('../images/contactus.jpg');
}

.contact-detail {
    min-height: 100vh;
}

.contact-address {
    padding: 2.5rem 1rem;
    background-color: var(--theme);
}

.contact-address .title {
    font-size: 2.3125rem;
    font-weight: bold;
    padding-left: 4rem;
    margin-bottom: 3rem;
}

.contact-address .detail {
    padding-left: 1rem;
    display: flex;
    justify-items: center;
    margin-bottom: 2rem;
}

.contact-address .detail i {
    padding-right: .3125rem;
    font-size: 1.875rem;
}

.contact-address .detail span {
    font-size: 1.1875rem;
    font-weight: bold;
    padding-left: 1rem;
}

.contact-address .social-icons {
    display: flex;
    justify-content: center;
}

.contact-address .social-icons ul li {
    padding-inline: 1rem;
}

.contact-address .social-icons a {
    color: #000;
    cursor: pointer;
}

.contact-address .social-icons a:hover {
    border-bottom: 2px solid #000;
    text-decoration: none;
}

.contact-address .social-icons a i {
    font-size: 1.875rem;
}

.contact-form {
    padding-block: 2.5rem;
}

.contact-form .title {
    font-size: 2.3125rem;
    font-weight: bold;
    color: var(--theme);
}

.contact-form .script {
    font-size: 1.4375rem;
    color: #7b7b7b;
}

.contact-form .form input,
.contact-form .form textarea {
    padding: 0.8rem 2rem;
    background: #e2e2e2;
}

.contact-form .form .btn-submit {
    background-color: var(--theme);
    font-weight: bold;
}
/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.back-to-top {
    position: fixed;
    display: none;
    width: 40px;
    height: 40px;
    border-radius: 50px;
    right: 15px;
    bottom: 15px;
    background: var(--theme);
    color: #fff;
    transition: display 0.5s ease-in-out;
    z-index: 99999;
  }
  
  .back-to-top i {
    font-size: 24px;
    position: absolute;
    top: 7px;
    left: 8px;
  }
  
  .back-to-top:hover {
    background:black;
    color: var(--theme);
    border: 1px solid var(--theme);
    transition: background 0.2s ease-in-out;
  }
  

/* Change navbar styling on small viewports */
@media (max-width: 991.98px) {
    .navbar {
        background: #000;
    }

    .navbar-nav .active {
        width: 100px;
    }


    .navbar .navbar-brand,
    .navbar .nav-link {
        color: #fff;
    }

    .navbar i {
        color: #fff;
    }

    .navbar .logo-image {
        height: 3.5rem;
    }

    .home .home-container {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding-left: 0px;
    }

    .home .home-container .home-title {
        font-size: 2rem;
        color: var(--theme);
        font-weight: 700;
    }

    .home .home-container .home-script {
        font-size: 1.125rem;
        color: #fff;
    }

    .about .about-block {
        height: 25rem;
        position: relative;
    }

    .about .about-info {
        height: 22rem;
        min-height: 20rem;
    }

    .about-images,
    .about-images2,
    .about-images3 {
        width: 13.75rem;
        height: 19.25rem;
    }

    .about .about-info {
        align-items: flex-start;

    }

    .about .about-title {
        font-size: 1.2rem;
    }

    .about .about-subtitle {
        font-size: 1.5rem;
    }

    .about .about-script {
        font-size: 1.125rem;
    }

    .event {
        min-height: 1165px;
    }

    .event .event-title {
        font-size: 1rem;
    }

    .event .event-subtitle {
        font-size: 2.3125rem;
    }

    .publications {
        height: 55rem
    }

    .publications .publications-text,
    .publications .publications-img {
        height: 22rem;
        min-height: 20rem;
    }

    .publications .publications-text {
        align-items: baseline;
        margin-top: 35px;
    }

    .publications-img .img {
        width: 22.3125rem;
        height: 25.5625rem;
        position: absolute;
        top: 50%;
        left: 50%;
        object-fit: cover;
        background-size: cover;
    }

    .publications .title {
        font-size: 1.2rem;
    }

    .publications .subtitle {
        font-size: 1.5rem;
    }

    .publications .script {
        font-size: 1.125rem;
    }

    .community {
        padding-bottom: 3rem;
    }

    .community .community-images .card {
        width: auto;
    }

    .community .community-images,
    .community .community-text {
        height: auto;
        position: relative;
    }

    .community .community-text {
        align-items: flex-start;
        height: 18rem;
        min-height: 18rem;
    }

    .community-text .community-title {
        font-size: 1.2rem;
        color: #000;
    }

    .community-text .community-subtitle {
        font-size: 1.5rem;
    }

    .community-text .community-script {
        font-size: 1.125rem;
    }

    .widget {
        border-top: .125rem solid var(--theme);
        margin-top: .9375rem;
        padding-top: .9375rem;
    }

    .about-story {
        padding-bottom: 5rem;
    }

    .about-story .about-info {
        margin-top: 2.375rem;
    }

    .about-story .about-block {
        margin-top: -2.875rem;
    }

    .about-vision {
        padding-top: 5rem;
    }

    .about-vision .publications-text {
        padding-top: 2rem;
    }

    .about-missions .publications-img {
        height: 15rem;
    }

    .our-team .img {
        object-fit: cover;
        height: 18.75rem;
        width: 252px;
        margin-left: auto;
        margin-right: auto;
    }

    .our-gallery .img {
        object-fit: contain;
    }

    .about-home-container,
    .events-container,
    .publication-container,
    .get_involved-container,
    .contact_us-container {
        padding-left: 4.5rem;
    }

    .about-home-container .about-home-title,
    .events-container .title,
    .publication-container .title,
    .get_involved-container .title,
    .contact_us-container .title {
        font-size: 2rem;
    }
}