/* GLOBAL FONT FAMILY */
html, body, h1, h2, h3, h4, h5, h6, p, a, button, input, textarea {
    font-family: 'Inter', sans-serif;
    
}


a:hover{
    color: #990f02;
}
.conveners-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Align heading with first image */
    gap: 30px;
    margin-top: 50px;
}

.conveners-title {
    font-size: 28px;
    font-weight: bold;
}

.conveners-section {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
}

.convener-card {
    width: 200px;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.convener-card img {
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 10px;
    filter: grayscale(100%);
}
.convener-car img {
    width: 200px;
    height: 200px;
    object-fit: contain;
    border-radius: 10px;
    filter: grayscale(100%);
}
.convener-name {
    font-weight: 600;
    font-size: 1.1rem;
    margin: 0;
}

.convener-role {
    color: #676767;
    font-size: 0.95rem;
    margin: 0;
}

/* ===== MOBILE ===== */
@media (max-width: 768px) {
    .conveners-container {
        align-items: center; /* center heading on mobile */
    }

    .conveners-section {
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }

    .convener-card {
        width: 85%;
        text-align: center;
    }

    .convener-card img {
        width: 100%;
        height: auto;
    }

    .conveners-title {
        font-size: 24px;
        text-align: center;
    }

    .convener-name {
        font-size: 1rem;
    }

    .convener-role {
        font-size: 0.9rem;
    }
}
/* Prevent any horizontal overflow on mobile/tablet */
html, body {
  overflow-x: hidden;
  width: 100%;
}

/* Ensure images and iframes don't exceed their containers */
img, iframe {
  max-width: 100%;
  height: auto;
}

/* Prevent flex children from stretching beyond screen width */
section {
  max-width: 100vw;
  overflow-x: hidden;
}

    .hero {
        position: relative;
        border-radius: 30px;
        margin: 30px 0;
        width: 95%;
        height: 100vh;
        overflow: hidden;
    }

    .hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background: url("images/bg.webp") center/cover no-repeat;
        opacity: 0.7;
        z-index: -1;
    }

    .hero-title {
        margin: 30px 0 4px 0;
    }

    /* top, right, bottom, left */
    .hero-sub {
        margin: 0;
    }

    .scroll-container {
        width: 100%;
        overflow: hidden;
        background: #fff;
        padding: 10px 0;
    }

    .scroll-content {
        display: flex;
        gap: 10px;
        /* space between images */
        justify-content: space-around;
        animation: scroll-left 12s linear infinite;
    }

    .scroll-content img {
        width: 200px;
        height: 200px;
        object-fit: contain;
        /* ensures full logo is visible */
        border-radius: 10px;
        background: #fff;
        /* optional: adds white padding if logo has transparency */
        padding: 5px;
        /* optional spacing inside each box */
    }
    .footer {
        display: flex;
        justify-content: space-around;
            padding: 20px 0;
            border-radius: 15px 15px 0 0;
        }

        .footer-title {
            font-size: 18px;
        }

        .social-icons img {
            width: 28px;
            height: 28px;
        }


    /* Animation */
    @keyframes scroll-left {
        from {
            transform: translateX(100%);
        }

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

    /* ====== MOBILE (phones under 768px) ====== */
    @media (max-width: 768px) {
        .hero {
            height: auto;
            width: 100%;
            border-radius: 15px;
            margin: 20px 0;
        }

        .hero div {
            margin: 40px 20px 20px 20px !important;
        }

        .hero-title {
            font-size: 24px !important;
            margin-top: 10px;
        }

        .hero-sub {
            font-size: 18px !important;
        }

        .scroll-content img {
            width: 80px;
            height: 80px;
        }

        header h1 {
            font-size: 28px;
        }

        header p {
            font-size: 18px;
        }

        /* Conveners stacked vertically */
        section[style*="display: flex; justify-content: center; gap: 30px;"] {
            flex-direction: column !important;
            align-items: center !important;
            gap: 150px !important;
            /* increase spacing between conveners */
            margin-top: 40px !important;
        }

        section[style*="height: 200px; width: 200px;"] {
            width: 85% !important;
            height: auto !important;
            /* let content expand naturally */
            text-align: center !important;
        }

        section[style*="height: 200px; width: 200px;"] img {
            width: 100%;
            height: auto;
            border-radius: 10px;
            margin-bottom: 10px;
            /* adds space between image and name */
        }

        /* Text adjustments */
        p {
            font-size: 18px !important;
            line-height: 1.4em !important;
        }

        h2 {
            font-size: 22px !important;
        }

        h3 {
            font-size: 18px !important;
        }

        /* Buttons */
        section[style*="display: flex; gap:20px"] {
            flex-direction: row;
            gap: 10px !important;
        }

        button {
            width: 100px !important;
            height: 50px !important;
            background-color: #990f02 !important;
            color: #fff !important;
            border: none !important;
        }

        .scroll-container {
            padding: 5px 0;
        }

        .scroll-content {
            gap: 15px;
        }

        /* "Our Partners" */
        p[style*="font-size: 50px;"] {
            font-size: 24px !important;
            text-align: center !important;
        }
    }

    .footer {
        margin-top: 100px;
        padding: 30px 0;
        text-align: center;
        background-color: #f5f5f5;
        border-radius: 20px 20px 0 0;
    }

    .footer-title {
        font-weight: bold;
        font-size: 22px;
        margin-bottom: 15px;
        color: #000;
    }

    .social-icons {
        display: flex;
        justify-content: center;
        gap: 15px;
    }

    .social-icons img {
        width: 28px;
    height: 28px;
        filter: grayscale(100%);
        transition: all 0.3s ease;
    }

    /* Add brand colors on hover */
    .social-icons a:nth-child(1):hover img {
        filter: grayscale(0%);
        fill: #0077b5;
        /* LinkedIn blue */
    }

    .social-icons a:nth-child(2):hover img {
        filter: grayscale(0%);
        fill: #E4405F;
        /* Instagram pink */
    }

    .social-icons img:hover {
        transform: scale(1.1);
    }

    /* ====== TABLET (between 769px–1024px) ====== */
    @media (min-width: 769px) and (max-width: 1024px) {
        .hero {
            height: 70vh;
            width: 90%;
        }

        .hero-title {
            font-size: 36px !important;
        }

        .hero-sub {
            font-size: 22px !important;
        }

        .scroll-content img {
            width: 120px;
            height: 120px;
        }

        .button {
            display: flex;
        }

        section[style*="display: flex; justify-content: center; gap: 30px;"] {
            flex-wrap: wrap !important;
            justify-content: center !important;
            gap: 20px !important;
        }

        section[style*="height: 200px; width: 200px;"] {
            width: 40% !important;
        }

        p {
            font-size: 22px !important;
        }

        button {
            width: 150px !important;
            background-color: #990f02;
        }

        p[style*="font-size: 50px;"] {
            font-size: 36px !important;
        }
    }