@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --primary-color: #152638;
    --secondary-color: #043060;
    --text-color: #333;
    --background-color: #fefefe;
}

html {
    scroll-behavior: smooth;
}

body::-webkit-scrollbar {
    width: 0.7rem;
}

body::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: var(--primary-color);
}

body::-webkit-scrollbar-thumb {
    background-color: #fefefe;
    outline: 1px solid slategrey;
    border-radius: 10px;
}

body {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    line-height: 1.6;
    color: #333;
    background-color: var(--background-color);
}

main {
    margin: 10px 15px;
    /* padding-top: 0; */
}

img {
    max-width: 100%;
    height: auto;
}

.btn {
    background-color: var(--primary-color);
    color: #e9e9e9;
    position: relative;
    transition: all 0.3s ease-in-out;
    border: 0px solid #ffffff4d;
    padding: 0.5rem 2.8rem;
    margin-top: 1rem;
    border-radius: 2rem;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
    font-weight: 500;
    /* text-transform: uppercase; */
    font-size: 1rem;
}

.btn-secondary {
    background-color: var(--background-color);
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    padding: 0.65rem 2.5rem;
}

.btn:hover {
    transform: scale(1.08);
    border-color: #fff9;
    background-color: var(--primary-color);
    color: var(--background-color);
}

.btn:hover::before {
    animation: shine 1.5s ease-out infinite;
}

.btn::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(100deg,
            rgba(255, 255, 255, 0) 30%,
            rgba(247, 254, 255, 0.632),
            rgba(255, 255, 255, 0) 70%);
    top: 0;
    left: -100px;
    opacity: 0;
}

.btn-secondary::before {
    left: 0px;
}

@keyframes shine {
    0% {
        left: -100px;
        opacity: 0.3;
    }

    60% {
        left: 80%;
        opacity: 0.5;
    }

    to {
        left: 100%;
        opacity: 0;
    }
}

h2 {
    letter-spacing: 0.12rem;
    font-size: 2.4rem;
    margin-bottom: 0.5rem;
    color: var(--primary-color);
}

.tagline {
    font-size: 0.9rem !important;
    color: #484747;
    margin-bottom: 0.5rem !important;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.4rem;
}

.tagline-hr {
    width: 50px;
    height: 2px;
    background-color: var(--primary-color);
    opacity: 1;
    border: none;
    margin: 1.5rem 0 3.5rem;
}

@media screen and (max-width: 1200px) {
    h2 {
        font-size: 2.2rem;
    }
}

@media screen and (max-width: 992px) {
    h2 {
        font-size: 2rem;
    }

    .tagline {
        font-size: 0.8rem !important;
    }
}

@media screen and (max-width: 768px) {
    main {
        margin: 0;
    }

    h2 {
        font-size: 1.8rem;
    }
}

@media screen and (max-width: 368px) {
    .tagline {
        font-size: 0.7rem !important;
    }

    .tagline-hr {
        height: 1.5px;
    }
}

/* HEADER SECTION */

header {
    background-color: #0a121a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%230f2c4b' fill-opacity='0.4'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    /* border: 1px solid var(--primary-color); */
}

nav>div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0rem;
}

.nav-logo-div {
    max-width: 8%;
}

header ul {
    display: flex;
    gap: 2.5rem;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-link {
    color: #adadad;
    transition: 0.2s ease-in-out;
}

.nav-link:focus {
    color: #adadad;
}

.nav-link:hover, .nav-link.active {
    color: #C4C4C4 !important;
    font-weight: 600;
    text-decoration: underline;
}

.navbar-toggler {
    display: none;
    font-size: 1.5rem;
    cursor: pointer;
}

.fa-bars {
    color: #e1e1e1;
}

.dropdown-menu {
    display: none;
    position: absolute;
    background: linear-gradient(135deg, #152638, #043060);
    border: 1px solid var(--primary-color);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    top: 100%;
    left: 0;
    z-index: 1000;
    font-size: 0.9rem;
    color: #e1e1e1;
}

.dropdown-menu a {
    display: block;
    padding: 0.5rem 1rem;
    color: var(--light-color);
    transition: var(--transition);
}

.dropdown:hover .dropdown-menu {
    display: block !important;
}

.dropdown:hover .nav-link {
    color: #C4C4C4 !important;
}

.dropdown-item.active, .dropdown-item:active {
    background: var(--background-color);
    color: var(--secondary-color);
}

@media screen and (max-width: 1200px) {
    header ul {
        gap: 1.5rem;
    }
    
}

@media (max-width: 992px) {
    nav>div {
        flex-wrap: wrap;
    }

    .nav-items {
        display: none;
        flex-direction: column;
        gap: 1rem;
        width: 100%;
        margin-bottom: 1rem;
    }

    .nav-items.active {
        display: flex;
    }

    .navbar-toggler {
        font-size: 1.8rem;
        display: block;
        text-align: right;
    }

    .dropdown-menu {
        position: static;
        border: none;
        box-shadow: none;
    }

    .dropdown-menu a {
        padding: 0.5rem 1rem;
    }
    
    .nav-logo-div {
        max-width: 12%;
    }
}

@media screen and (max-width: 768px) {
    .nav-logo-div {
        max-width: 15%;
    }
}

@media (max-width: 420px) {
    .nav-logo-div {
        max-width: 20%;
    }
}

@media screen and (max-width: 368px) {
    .nav-logo-div {
        max-width: 20%;
    }
}

/* HERO SECTION */

#hero-section {
    background-color: #f7fdff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23cecece' fill-opacity='0.32'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    padding: 50px;
}

#hero-section p {
    font-size: 1.1rem;
    letter-spacing: 0.07rem;
    margin-bottom: 0.8rem;
    color: #727272;
}

#hero-section h2 {
    font-size: 2.6rem;
}

#hero-section h1 {
    font-size: 2rem;
    letter-spacing: 0.5rem;
    font-weight: 800;
    margin-top: 0;
    margin-bottom: 0.5rem;
    color: var(--primary-color);
    text-transform: uppercase;
    text-align: center;
}

#hero-section .row {
    --bs-gutter-x: 2.8rem;
}

#hero-section .col-md-6:first-of-type {
    border-right: 2px solid #ccc;
}

#hero-img {
    height: 450px;
    width: 100%;
    background: url('../images/hero-img.jpg') center top;
    background-size: cover;
    position: relative;
    display: flex;
    align-items: center;
    text-align: center;
    /* background-attachment: fixed; */
}

#hero-img h2 {
    color: #e9e9e9;
    position: relative;
    font-weight: 300;
    letter-spacing: 5px;
    text-transform: uppercase;
}

#hero-img::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(1, 12, 24, 0.7);
}

@media screen and (max-width:1200px) {
    #hero-section h2 {
        font-size: 2.2rem;
    }
}

@media screen and (max-width: 768px) {
    #hero-section .col-md-6:first-of-type {
        border-right: none;
        padding-bottom: 2rem;
    }

    #hero-section h1 {
        font-size: 1.8rem;
    }
}

@media screen and (max-width: 576px) {
    #hero-section h2 {
        font-size: 1.8rem;
    }

    #hero-section p {
        font-size: 1rem;
    }

    #hero-section h1 {
        font-size: 1.5rem;
    }
}

@media screen and (max-width: 320px) {
    #hero-section h1 {
        font-size: 1rem;
    }
}

/* BENEFITS SECTION */

#benefits {
    padding: 4rem 0 5rem;
}

.benefit-card {
    border: 1px solid #e0e0e0;
    padding: 3rem;
    transition: all 0.3s ease-in-out;
    height: 100%;
    background: linear-gradient(135deg, var(--background-color) 60%, #dfe9f3);
}

.benefit-card:hover {
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
    transform: translateY(-5px);
}

.benefit-card h3 {
    font-size: 1.2rem;
    color: #121C27;
    margin-bottom: 1rem;
}

.benefit-card p, .benefit-card ul, .benefit-card hr {
    font-size: 1rem;
    color: #484747;
    margin-bottom: 1.5rem;
}

.benefit-card i {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
}

/* MEMBERSHIP CATEGORIES */
#membership-categories {
    background-color: #0a121a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%230f2c4b' fill-opacity='0.4'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    padding: 4rem 0rem 6rem;
}

#membership-categories h2, #countries h2 {
    color: #e3e3e3;
}

#membership-categories .col-md-4 {
    text-align: center;
    /* padding: 1.8rem; */
    padding-top: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.category-card, .footer-links, .footer-info, .sidebar-item {
    background: linear-gradient(135deg, #12233481, #010c18);
    padding: 2rem;
    border: 1px solid #223344;
    box-shadow: 15px 15px 30px #010c18,
        -5px -5px 15px #12233481;
    height: 100%;
    text-align: center;
    transition: all 0.3s ease-in-out;
}

#membership-categories h3 {
    font-size: 1.2rem;
    color: #e3e3e3;
    font-weight: 500;
}

#membership-categories p {
    margin-top: 0.8rem;
    font-size: 1rem;
    color: #888888;
    transition: color 0.3s ease-in-out;
}

#membership-categories i {
    font-size: 2rem;
    color: #777777f2;
    transition: color 0.3s ease-in-out;
    margin-bottom: 1.8rem;
}

#membership-categories .tagline, #countries .tagline {
    color: #b3b3b3;
}

#membership-categories hr, footer hr, #countries hr {
    background: #b3b3b3;
}

.category-card hr, footer hr {
    border: 0;
    height: 2px;
    width: 40%;
    margin: 0.5rem auto 1rem;
    opacity: 0.8;
    transition: all 0.3s ease-in-out;
}

.category-card:hover hr, .footer-links:hover hr {
    width: 100%;
    opacity: 0.4;
}

#membership-categories .col-md-4:hover p, #membership-categories .col-md-4:hover i {
    color: #C4C4C4;
}

/* FEATURED EVENT SECTION */
#featured-event {
    padding: 0rem 0 5rem;
}

#featured-event .row {
    align-items: center;
    gap: 2rem;
}


.event-details h3 {
    font-size: 2rem;
}

.event-details .event-info {
    margin: 1.2rem 0;
}

.event-details .event-info p {
    margin: 0.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.event-details .action-btns {
    display: flex;
    gap: 1rem;
    align-items: center;
}

@media screen and (max-width: 992px) {
    .event-details .action-btns {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }
}

@media screen and (max-width: 768px) {
    #featured-event .row {
        flex-direction: column;
    }

    .event-details h3 {
        font-size: 1.5rem;
        text-align: center;
    }

    .event-details .action-btns {
        justify-content: center;
    }
}

@media screen and (max-width: 576px) {
    #featured-event .row {
        padding: 0 1rem;
    }

    .event-details .event-info p {
        font-size: 0.9rem;
    }

    .event-details .action-btns {
        align-items: center;
    }
}

/* CTA SECTION */
#cta-section {
    background: url('../images/layered-steps-haikei.svg') center top;
    background-size: cover;
    background-color: #010c18;
    padding: 5rem 0.5rem;
    margin: 0 10px;
    border-radius: 50px;
    box-shadow: 0px 8px 20px 10px rgba(0, 0, 0, 0.3);
}

#cta-section h2 {
    color: #5993d2;
    font-size: 2rem;
    font-weight: 900;
    margin-bottom: 2rem;
}

#cta-section p {
    color: #b3b3b3;
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
}

#cta-section p a {
    color: #f3f3f3;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
    font-weight: 500;
}

#cta-section p a:hover {
    color: #5993d2;
}

#cta-section .btn, .btn-register {
    background: linear-gradient(135deg, #318ef1, #043060);
    color: #fff;
    padding: 0.8rem 2.5rem;
    font-size: 1rem;
    font-weight: 500;
}

#cta-section .btn::before {
    background-image: linear-gradient(100deg,
            rgba(255, 255, 255, 0) 30%,
            #010c18ac,
            rgba(255, 255, 255, 0) 70%);
}

@media screen and (max-width: 992px) {
    #cta-section {
        margin: 0 5px;
        padding: 4rem 0.5rem;
        border-radius: 40px;
    }
}

@media screen and (max-width: 768px) {
    #cta-section h2 {
        font-size: 1.5rem;
    }

    #cta-section p {
        font-size: 1rem;
    }
    
    #cta-section .btn, .btn-register, .btn-secondary {
        padding: 0.6rem 2rem;
        font-size: 0.9rem;
    }
}

@media screen and (max-width: 576px) {
    #cta-section {
        padding: 2.5rem 2rem;
        border-radius: 25px;
    }

    #cta-section h2 {
        margin-bottom: 1rem;
    }

    #cta-section p {
        margin-bottom: 1rem;
    }
}

/* CONTACT SECTION */
#contact-section {
    padding: 4rem 0 5rem;
}

#contact-section .contact-card {
    border: 1px solid #e0e0e0;
    transition: all 0.3s ease-in-out;
    background: linear-gradient(135deg, var(--background-color) 70%, #dfe9f3);
    max-height: 600px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;

}

#contact-section .contact-card:hover {
    /* box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1); */
    transform: translateY(-5px);
}

#contact-section .contact-card h3 {
    font-size: 1.5rem;
    color: #121C27;
    margin-bottom: 0.5rem;
}

#contact-section .contact-card .contact-form-img {
    flex: 1;
    object-fit: cover;
}

#contact-section .contact-card .contact-img {
    width: 100%;
    max-height: 300px;
    overflow: hidden;
    flex: 1;
}

#contact-section .contact-card .contact-img img {
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 1;
}

#contact-section .contact-card .contact-info, .contact-form form {
    padding: 3rem 2rem 3rem;
    text-align: center;
}

#contact-section .contact-card .contact-info {
    flex: 0.5;
}

#contact-section .contact-card .contact-info a {
    color: var(--secondary-color);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease-in-out;
    display: block;
}

#contact-section .contact-card .contact-info a:hover {
    color: #1674d9;
}

.contact-form form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    text-align: left;
}

.contact-form form textarea {
    resize: none;
}

.contact-form form input, .contact-form form textarea {
    width: 100%;
    border: 1px solid #ccc;
}

.contact-form form input:focus, .contact-form form textarea:focus {
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
    border-color: #007bff;
}

.contact-form form button:focus {
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
    border-color: #007bff;
}

.contact-form form button.btn:hover {
    transform: scale(1.03);
}

/* FOOTER SECTION */
footer {
    background-color: #0a121a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%230f2c4b' fill-opacity='0.4'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    color: #e9e9e9;
    padding: 4rem 0 2rem;
}

footer .footer-links {
    background: linear-gradient(135deg, #12233481, #010c18);
    padding: 1.5rem;
    text-align: end;
}

footer hr {
    margin-right: 0;
}

footer .footer-links ul, .sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

footer .footer-links ul li, .sidebar ul li {
    margin-bottom: 0.5rem;
}

footer a, .sidebar a {
    color: #b3b3b3;
    text-decoration: none;
    font-size: 0.95rem;
    transition: all 0.2s ease-in-out;
}

footer a:hover, .sidebar a:hover, .sidebar a.active {
    color: #5993d2;
    font-weight: 600;
    text-decoration: underline;
}

footer h3, .sidebar h3 {
    color: #6087ad;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

footer .footer-info p.tagline {
    color: #989898;
    font-size: 0.8rem !important;
    margin: 0.5rem 0;
    transition: color 0.2s ease-in-out;
}

footer .footer-info:hover p.tagline {
    color: #b3b3b3;
}

footer .copyright {
    text-align: center;
    color: #f3f3f3;
    font-size: 0.9rem;
    margin-top: 3rem;
    margin-bottom: 1rem;
}

footer .copyright p {
    margin-bottom: 0.4rem;
}

.footer-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.footer-logo img {
    width: 50%;
}

@media screen and (max-width: 1200px) {
    footer .footer-info p.tagline {
        display: none;
    }
}

@media screen and (max-width: 768px) {
    footer .footer-info p.tagline {
        display: block;
    }
}

@media screen and (max-width: 240px) {
    footer .footer-info p.tagline {
        display: none;
    }
}

/* MISSION VISION SECTION */

.about-img {
    background: url('../images/about.webp') center top;
    background-size: cover;
    position: relative;
}

.about-img::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.7;
    background-color: #0a121a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%230f2c4b' fill-opacity='0.4'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

#mission-vision .benefit-card, #presenting .benefit-card {
    height: unset;
    background: linear-gradient(135deg, var(--background-color) 40%, #bfd8f1);

}

#mission-vision .benefit-card:hover, #presenting .benefit-card:hover {
    box-shadow: unset;
    transform: unset;
}

@media screen and (max-width: 768px) {
    #mission-vision .about-img {
        height: 30rem;
    }
}

/* MAJOR SERVICES */
.major-services .benefit-card .service-image {
    position: relative;
    height: 200px;
    width: 100%;
    overflow: hidden;
    border-radius: 0px;
}

.major-services .benefit-card .service-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.major-services .benefit-card .service-image::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--background-color), rgba(224, 224, 224, 0.5) 30%);
}

/* FEATURES */
#key-features {
    padding: 0rem 0 5rem;
    background-color: #f7fdff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23cecece' fill-opacity='0.32'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");

}

.feature-card {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    max-width: 320px;
    border: 1px solid #223344;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
}

.feature-card>i {
    color: var(--background-color);
    font-size: 2rem;
}

.feature-card.feature-1 {
    background: linear-gradient(-45deg, #007bff8c 0%, #04306091 100%), url('../images/major-services-4.jpg');
    background-size: cover;
}

.feature-card.feature-2 {
    background: linear-gradient(-45deg, #007bff8c 0%, #04306091 100%), url('../images/features-2.jpg') center center;
    background-size: cover;
}

.feature-card.feature-3 {
    background: linear-gradient(-45deg, #007bff8c 0%, #04306091 100%), url('../images/features-3.jpg') center center;
    background-size: cover;
}

.feature-card:hover {
    transform: rotate(-2deg) scale(1.1);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.feature-card-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    width: 100%;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
    background-color: #fff;
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
    text-align: center;
}

.feature-card:hover .feature-card-content {
    transform: translate(-50%, -50%) rotate(0deg);
    opacity: 1;
}

.feature-card-title {
    margin: 0;
    font-size: 24px;
    color: #333;
    font-weight: 700;
}

.feature-card-description {
    margin: 10px 0 0;
    font-size: 14px;
    color: #777;
    line-height: 1.4;
}

@media screen and (max-width: 992px) {
    .feature-card-title {
        font-size: 20px;
        line-height: 1.5rem;
    }
}

@media screen and (max-width: 368px) {
    .feature-card {
        max-width: 250px;
    }
}

@media screen and (max-width: 290px) {
    .feature-card {
        max-width: 200px;
    }

    .feature-card-title {
        font-size: 16px;
    }
}

/* COUNTRIES */
#countries {
    background-color: #0a121a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%230f2c4b' fill-opacity='0.4'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    color: #e9e9e9;
    padding: 4rem 0;
}

@keyframes slides {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

.logos {
    overflow: hidden;
    padding: 30px 0px;
    white-space: nowrap;
    position: relative;
}

.logos:before, .logos:after {
    position: absolute;
    top: 0;
    content: '';
    width: 250px;
    height: 100%;
    z-index: 2;
}

.logos:before {
    left: 0;
    background: linear-gradient(to left, rgba(255, 255, 255, 0), #0a121a);
}

.logos:after {
    right: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), #0a121a);
}

.presenting .logos::before,
.presenting .logos::after {
    background: none
}

.logo_items {
    display: inline-block;
    animation: 30s slides infinite linear;
}

.logos:hover .logo_items {
    animation-play-state: paused;
}

.logo_items img {
    height: 100px;
    padding: 0 10px;
    transition: all 0.3s ease-in-out;
}

.logos:hover .logo_items img:hover {
    transform: scale(1.05);
}

.logos:hover .logo_items img:not(:hover) {
    opacity: 0.5;
    transition: opacity 0.3s ease-in-out;
}

@media screen and (max-width: 768px) {
    .logo_items img {
        height: 70px;
    }  

    #countries .tagline-hr {
        margin-bottom: 1rem;
    }
}

@media screen and (max-width: 576px) {
     .logos:before {
        left: 0;
        background: linear-gradient(to left, rgba(255, 255, 255, 0), #0a121a3e);
    }

    .logos:after {
        right: 0;
        background: linear-gradient(to right, rgba(255, 255, 255, 0), #0a121a3e);
    }

    .logos:hover .logo_items img:not(:hover) {
        opacity: 1;
    }
}

/* CHALLENGES */
#challenges {
    background-color: #f7fdff;
    padding: 5rem 0;
}

.challenges-img {
    position: sticky;
    top: 9rem;
}

.challenges-img::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    background-color: #f7fdff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23cecece' fill-opacity='0.32'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* SOLUTIONS */
#solutions {
    background-color: #f7fdff;
    padding: 1rem 0 5rem;
}

#solutions .benefit-card {
    border: 1px solid #223344;
    background: linear-gradient(135deg, var(--background-color) 40%, #bfd8f1);
}

/* CULTURAL EXCHANGE */
.cultural-exchange .feature-card>.feature-card-title {
    color: var(--background-color);
    font-size: 2rem;
}

.cultural-exchange .feature-card.feature-1 {
    background: linear-gradient(-45deg, #007bff8c 0%, #04306091 100%), url('../images/hero-img.jpg') center center;
    ;
    background-size: cover;
}

.cultural-exchange .feature-card.feature-2 {
    background: linear-gradient(-45deg, #007bff8c 0%, #04306091 100%), url('../images/cultural-2.jpg') center center;
    ;
    background-size: cover;
}

.cultural-exchange .feature-card.feature-3 {
    background: linear-gradient(-45deg, #007bff8c 0%, #04306091 100%), url('../images/cultural-3.jpg') center center;
    ;
    background-size: cover;
}

/* CULTURAL BENEFITS LIST */
.benefits-list {
    position: sticky;
    top: 9rem;
    margin-bottom: 3rem;
}

.benefits-list section {
    padding: 3rem 0;
    position: sticky;
    color: #e9e9e9;
    top: 9rem;
}

.benefits-list img {
    object-fit: cover;
    width: 100%;
}

.benefits-list section.benefit-card {
    background: linear-gradient(135deg, var(--background-color) 40%, #bfd8f1);
    border: 1px solid #223344;
}

@media screen and (max-width: 768px) {
    .benefits-list {
        position: static;
        margin-bottom: 0;
    }

    .benefits-list section {
        position: static;
        top: auto;
    }
    
    .benefits-list .benefit-card h3 {
        margin-top: 1rem;
    }
}

/* TEAM PAGE */
.team-page {
    background-color: #f7fdff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23cecece' fill-opacity='0.32'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* GALLERY PAGE */
#gallery-section {
    padding: 0.5rem 0 6rem;
}

.gallery-grid {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.gallery-grid .gallery-item {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
}

.gallery-grid .gallery-item img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    transition: transform 0.3s ease-in-out;
}

.gallery-grid .gallery-item:hover img {
    transform: scale(1.1);
}

.gallery-grid .gallery-item .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0a121aac;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.gallery-grid .gallery-item .overlay i {
    color: #fff;
    font-size: 1.5rem;
}

.gallery-grid .gallery-item:hover .overlay {
    opacity: 1;
}

.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.8);
}

.modal-content {
    position: relative;
    margin: auto;
    padding: 5px;
    width: fit-content;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 60%;
}

.modal-content img {
    border-radius: 8px;
    width: fit-content;
    max-height: 80vh;
}

.modal-content .modal-caption {
    padding: 0.5rem 1rem;
    width: fit-content;
}

.modal-content .close {
    position: absolute;
    top: 10px;
    right: 20px;
    color: #010c18;
    font-size: 30px;
    font-weight: bold;
    cursor: pointer;
}

.modal-content .close:hover,
.modal-content .close:focus {
    color: #1674d9;
    text-decoration: none;
    cursor: pointer;
}

/* BLOGS PAGE */
#blogs-listing {
    padding: 4rem 0 6rem;
}

#blogs-listing .benefit-card i{
    margin-bottom: 0;
}

#blogs-listing .benefit-card p{
    margin-bottom: 1rem;
}

.blogs-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.blog-post.benefit-card {
    height: unset;
    width: 100%;
}

.blog-post.benefit-card img {
    height: 200px;
    object-fit: cover;
}

.sidebar {
    width: 100%;
    background-color: #0a121a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%230f2c4b' fill-opacity='0.4'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    padding: 1.5rem 1.5rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 20px;
    border-radius: 6px;
}

.blog-post h2 {
    font-size: 1.5rem;
    margin: 10px 0;
    color: #0a121a;
}

.blog-post p {
    font-size: 1rem;
    color: #555;
}

.blog-post a {
    color: #1674d9;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
}

.blog-post a::after {
    content: ' →';
    color: #1674d9;
    transition: all 0.3s ease-in-out;
}

.blog-post a:hover {
    text-decoration: underline;
    color: #0a121a;
    padding-left: 10px;
}

.blog-post a:hover::after {
    color: #0a121a;
}

.blog-meta {
    display: flex;
    gap: 1rem;
    margin-top: 10px;
    margin-bottom: 0.5rem;
}

.blog-meta span {
    font-size: 0.9rem;
    color: #777;
}

.blog-meta span i {
    margin-right: 5px;
    font-size: 0.9rem;
}

.blog-content {
    font-size: 0.9rem;
    font-weight: 400;
    text-align: justify;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

#blog-full {
    padding: 2rem;
    background-color: #f7fdff;
    border-radius: 8px;
    margin: auto;
}

.sidebar .social-icons {
    display: flex;
    justify-content: space-around;
}

@media screen and (max-width: 992px) { 
    .sidebar {
        padding: 1rem 1rem 2rem;
    }

    #blogs-listing {
        padding-bottom: 4rem;
    } 
}

/* Presenting Logos */
.presenting-logos {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    align-items: center;
}

.presenting-logos img {
    height: 100px;
    object-fit: contain;
}

@media screen and (max-width: 768px) {
    .presenting-logos .benefit-card {
        padding: 2rem;
    }
}

@media screen and (max-width: 576px) {
    .presenting-logos .benefit-card {
        padding: 1rem;
        width: 100%;
        text-align: center;
    }
}