@import url('https://fonts.googleapis.com/css2?family=Amiri:ital,wght@0,400;0,700;1,400;1,700&family=Noto+Sans+Arabic:wght@100..900&display=swap');

:root{
    --font-primary:"Amiri", serif;
    --font-secondary:"Noto Sans Arabic", sans-serif;

    --font-size-text:clamp(1rem, 1.8vw, 1.2rem);
    --line-height-text:clamp(1.2rem, 2.2vw, 1.5rem);

    --font-size-small:clamp(0.8rem, 1.4vw, 1rem);
    --line-height-small:clamp(1rem, 1.4vw, 1.2rem);

    --font-size-h1:clamp(2rem, 3.6vw, 2.4rem);
    --line-height-h1:clamp(2.6rem, 5vw, 3rem);

    --font-size-h2:clamp(1.65rem, 3vw, 2rem);
    --line-height-h2:clamp(2.5rem, 4.5vw, 3rem);
    
    --font-size-h3:clamp(1.3rem, 2.4vw, 1.6rem);
    --line-height-h3:clamp(2rem, 3.6vw, 2.4rem);

    --color-bg: #f5f7fa;
    --color-bg-rgb: 245,247,250;
    --color-bg-card: #ffffff;
    --color-bg-card-rgb: 255,255,255;

    --color-primary: #0d6efd;
    --color-primary-rgb: 13 110 253;
    --color-primary-gradient:linear-gradient(135deg, #0d6efd, #6f42c1);

    --color-text: #2c3e50;
    --color-text-rgb: 44,62,80;
    --color-border: #e0e0e0;
    --color-border-rgb: 224,224,224;
    --color-overlay: #000000;
    --color-overlay-rgb: 0,0,0;

     --shadow-card: 0 2px 8px rgba(var(--color-text-rgb), 0.04);

    --border-radius-card:10px;

    
            
}
        /* Base styles */
        body {
            font-family: var(--font-secondary);
            font-size:var(--font-size-text);
            line-height:var(--line-height-text);

            background-color: var(--color-bg);
            color: var(--color-text);
        }

        h1,h3 {
            font-family: var(--font-primary);            
        }
        h1, h2, h3{
            font-weight:700;
        }
        h1{
            font-size:var(--font-size-h1);
            line-height:var(--line-height-h1);
        }
        h2{
            font-size:var(--font-size-h2);
            line-height:var(--line-height-h2);
        }
        h3{
            font-size:var(--font-size-h3);
            line-height:var(--line-height-h3);
        }
        .badge{
            padding: 4px 8px;
        }
        .no-js-message {
            display: none;
            background: #fff3cd;
            border: 1px solid #ffc107;
            border-radius: 8px;
            padding: 20px;
            margin: 20px 0;
        }

        .no-js .no-js-message {
            display: block;
        }


.btn-main {
    background: var(--color-primary-gradient);
    border: none;
    color: white;
    font-size: 1.3rem;
    padding: 0.8rem 2.5rem;
    border-radius: 50px;
    font-weight: 600;
    box-shadow: 0 8px 20px rgba(111, 66, 193, 0.3);
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.btn-main.btn-main-grey {
    background: rgb(225, 225, 225);
    color: var(--color-text);
}
.btn-main:disabled {
    opacity:0.5;
}
.btn-main:disabled:hover {
    transform:none;
     box-shadow:transparent;
}
.btn-main-sm{
    padding: 8px 20px;
    font-size: 1rem;
}
 .btn-main:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(111, 66, 193, 0.4);
    color: white;
}
.btn-main.btn-main-grey:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(111, 66, 193, 0.4);
    color: var(--color-text);
}
.btn-main i {
    font-size: 1.2rem;
}
@media (max-width: 767px) {
    .btn-main {
        font-size: 1.1rem;
        padding: 0.7rem 1.8rem;
    }
    .btn-main.btn-main-sm{
    padding: 8px 20px;
    font-size: 1rem;
}
}


 /* ---- SPONSORS CAROUSEL: absolute bottom‑right, max-width 250px (desktop) ---- */
        .sponsors-section {
        
            max-width: 250px;
            width: 100%;
            z-index: 10;
        }
        .home-wrapper .sponsors-section {
            position: absolute;
            bottom: 30px;
            right: 30px;
            left: auto;    
            z-index: 10;
        }

        /* small title above carousel */
        .sponsors-title {
            font-family: "Amiri", serif;
            font-size: 1.2rem;
            font-weight: 700;
            color: #6f42c1;
            margin-bottom: 8px;
            text-align: right;
            padding-right: 4px;
        }

        /* carousel itself */
        .sponsors-carousel {
            width: 100%;
            height: 140px;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
            background: white;
        }
         .home-wrapper .sponsors-carousel {           
            height: auto;
        }


        .sponsor-slide {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: white;
        }

        .sponsor-slide img {
            height: 100%;
            width: 100%;
            object-fit: cover;
        }

        /* ---- PAGINATION DOTS (desktop) ---- */
        .sponsors-pagination {
            position: absolute;
            bottom: 6px !important;
            left: 0 !important;
            right: 0 !important;
            display: flex;
            justify-content: center;
            gap: 6px;
        }

        .sponsors-pagination .swiper-pagination-bullet {
            width: 8px;
            height: 8px;
            background: #ccc;
            opacity: 0.7;
            margin: 0 4px !important;
        }

        .sponsors-pagination .swiper-pagination-bullet-active {
            color: var(--bs-primary);
            opacity: 1;
            transform: scale(1.2);
        }

         /* ----- MOBILE (≤767px) : NATURAL FLOW, STACKED, BALANCED PADDING ----- */
        @media (max-width: 767px) {

         
            /* sponsors section – normal flow, full width */
            .sponsors-section {
                position: static;
                max-width: 250px;
                width: 100%;
                margin:auto;
                margin-top: 2rem;
            }
            .home-wrapper .sponsors-section {
                position: static;
              
            }

            /* title above carousel – now centred on mobile */
            .sponsors-title {
                text-align: center;
                margin-bottom: 12px;
                font-size: 1.3rem;
            }

            .sponsors-carousel {
                height: auto;
            }
          

           
        }

        /* extra small fine-tuning */
        @media (max-width: 480px) {
           
            .sponsors-carousel {
                height: 110px;
            }
            .sponsor-slide {
                padding: 10px;
            }
        }