/* poppins-latin-400-normal */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-display: swap;
    font-weight: 400;
    src: url(https://cdn.jsdelivr.net/fontsource/fonts/poppins@latest/latin-400-normal.woff2) format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* poppins-latin-400-normal */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-display: swap;
    font-weight: 600;
    src: url(https://cdn.jsdelivr.net/fontsource/fonts/poppins@latest/latin-600-normal.woff2) format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* poppins-latin-800-normal */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-display: swap;
    font-weight: 800;
    src: url(https://cdn.jsdelivr.net/fontsource/fonts/poppins@latest/latin-800-normal.woff2) format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

[data-bs-theme="light"] {
    --eg-navbar-bg: #eee;
    --eg-text:#3a3a3a;
    --eg-section-bg: #d1d1d1;
    --eg-benefits-image: url('images/beneficios-bg.webp');
    --eg-benefits-image-mob: url("images/beneficios-bg-mobile.webp");
    --eg-promotions-image: url('images/promociones-bg.webp');
    --eg-promotions-image-mob: url("images/promociones-bg-mobile.webp");
    --eg-carousel-image: url("images/nav-carousel-bg.webp");
    --eg-grad-bg: linear-gradient(90deg, #043d1b 0%, #0f8535 100%);
}

[data-bs-theme="dark"] {
    --eg-navbar-bg: #1d1d1d;
    --eg-text:#f1f1f1;
    --eg-section-bg: #2b2b2b;
    --eg-benefits-image: url('images/beneficios-bg-dark.webp');
    --eg-benefits-image-mob: url("images/beneficios-bg-mobile-dark.webp");
    --eg-promotions-image: url('images/promociones-bg-dark.webp');
    --eg-promotions-image-mob: url("images/promociones-bg-mobile-dark.webp");
    --eg-carousel-image: url("images/nav-carousel-bg-dark.webp");
    --eg-grad-bg: linear-gradient(90deg, #021a0c 0%, #115025 100%);
}


/* GENERAL RULES */

body {
    font-size: 1rem;
    font-family: 'Poppins', 'Outfit', sans-serif;
    background-color: var(--eg-navbar-bg); 
    color: var(--eg-text);
}

.container-xxl {max-width: 1440px !important;}

.section-title, #intContent h2 {
    font-size: 33px;
    text-align: center;
    color: var(--eg-text);
    font-weight: 800;
    padding-top: 60px;
}
    .section-title span {
        color: #168c33;
        font-weight: 600;
    }
    #intContent h3 {
        font-size: 22px;
        color: var(--eg-text);
        font-weight: 800;
        padding: 30px 0 20px 0;
        color: #168c33;
    }
    #intContent a {
        text-decoration: none;
        color: #168c33;
    }
    #intContent p {text-align: justify;}

#footer, #benefits, #casinoGames {
    content-visibility: auto;
    contain-intrinsic-size: 500px; 
}

/* NAV CAROUSEL */

#nav-carousel {
    background: #0a611f var(--eg-carousel-image) no-repeat top center;
}
    .top-separation {
        height: 30px;
        background: #0a611f var(--eg-carousel-image) no-repeat top center;
    }

    nav.navbar{
        height: 90px;
        background-color: var(--eg-navbar-bg);
        box-shadow: #444 0 0 20px;
    }
        [data-bs-theme="dark"] nav.navbar {box-shadow: #000 0 0 20px;}
        nav .nav-link {
            font-size: 12px;
            font-weight: 600;
            color: var(--eg-text);
            text-align: center;
            border-bottom: 3px solid rgba(0,0,0,0);
        }
        nav .nav-link:hover {border-bottom: 3px solid #0c8f08;}

        .social-media-link {
            color: #fff;
            background: #00793a;
            background: linear-gradient(90deg,#00793a 0%, #001901 100%);
            width: 36px;
            height: 36px;
            border-radius: 50%;
            font-size: 18px;
            line-height: 36px;
            display: inline-block;
            text-align: center;
            margin: 0 5px;
            border: 1px solid #126317;
        }
            .social-media-link:hover {
                background: linear-gradient(90deg,#001901 0%, #00793a 100%);
            }
        
        .btn-outline-success {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: inline-block;
            text-align: center;
            margin: 0 5px 0 20px;
            padding: 0;
        }
            .btn-outline-success i {
                font-size: 18px;
                line-height: 30px;
            }

        .navbar-toggler:focus {box-shadow: none;}

            .navbar-toggler .fa-bars {font-size: 38px;}

        .btn#registerTop {
            font-size: 13px;
            background-color: #006b14;
            font-weight: 400;
            border-radius: 4px;
        }
            .btn#registerTop:hover {
                background: #005224;
            }
        .btn#loginTop {
            color: #147311;
            font-size: 13px;
            font-weight: 400;
            border-radius: 4px;
            border: 1px solid #006b14;
            background: transparent;
        }
            .btn#loginTop:hover {
                color: #fff;
                background: #5f5f5f;
            }
            [data-bs-theme="dark"] .btn#loginTop {color: #1ac244;}

    #carouselEG {
        margin: 0 auto;
        max-width: 1440px;
        padding-top: 120px;
    }
        .carousel-control-prev-icon,
        .carousel-control-next-icon {
            background-color: rgba(0,0,0,0.5);
            background-size: 30px;
            padding: 30px 0;
            width: 60px;
            border-radius: 15px;
            border: 1px solid #595959;
        }

/* PROMOTIONS EstadioGana */

#promotionsEG {
    background-color: var(--eg-section-bg);
    background-image: var(--eg-promotions-image);
    background-position: center;
    background-repeat: no-repeat;
}

    #promotionsEG a {
        color: var(--eg-text);
        display: block;
        text-align: center;
        text-decoration: none;
    }
        #promotionsEG a img {
            max-width: 100%;
            /*transition: transform .5s;*/
        }
            /*#promotionsEG a:hover img {transform: scale(1.1);}*/

        #promotionsEG h3 {
            font-size: 20px;
            font-weight: 800;
            margin: 0;
        }
        #promotionsEG p {
            font-size: 16px;
            font-weight: 400;
            padding: 0 50px;
        }


/* BEST CASINO GAMES */

#casinoGames {
    text-align: center;
    padding-bottom: 40px;
    background: #043D1B;
    background: var(--eg-grad-bg);
}
    #casinoGames .row div img {
        max-width: 100%;
        margin-bottom: 20px;
        border: 2px solid #25C057;
        border-radius: 15px;
        transition: transform .5s;
    }
        #casinoGames .row div a:hover img {transform: scale(1.1);}


/* BENEFITS */

#benefits {
    background-color: var(--eg-section-bg);
    background-image: var(--eg-benefits-image);
    background-position: center;
    background-size: cover;
}

    #benefits .row .col-md-6:first-child {
        padding-left: 130px;
    }

    #benefits h2 {
        font-size: 54px;
        font-weight: 600;
        color: #168c33;
    }
        #benefits h2 span {
            color: var(--eg-text);
            display: block;
        }

    #benefits h3 {font-size: 36px;}

    #benefits ul {
        list-style: none;
        padding: 0;
    }
        #benefits li {
            font-size: 18px;
            position: relative;
            line-height: 32px;
            padding: 15px 0 10px 50px;
        }
            #benefits li .fa-regular.fa-circle-check {
                position: absolute;
                left: 0;
                font-size: 32px;
                color: #099C35;
            }
    a#registerBtn {
        font-size: 24px;
        background-color: #006b14;
        padding: 10px 20px;
        font-weight: 600;
        border-radius: 10px;
    }
        a#registerBtn:hover {background-color: #3e8824;}

    .app-buttons img {transition: transform .5s;}

    .app-buttons a:hover img {transform: scale(1.1);}

/* FOOTER */

#footer  {
    padding: 0 15px 50px 15px;
    min-height: 500px;
    background: #043D1B;
    background: var(--eg-grad-bg);
}
    #footer .footer-links {
        display: grid;
        padding: 40px 0;
        grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
        gap: 30px 20px;
    }
    #footer p, #footer li {
        font-size: 12px;
        color: #fff;
    }
    #footer p span {
        font-size: 23px;
        border-radius: 50%;
        border: 4px solid #fff;
        display: inline-block;
        width: 56px;
        height: 56px;
        line-height: 48px;
        text-align: center;
        font-weight: 600;
    }
    #footer h3 {
        font-size: 16px;
        font-weight: 600;
        color: #fff;
        margin-bottom: 20px;
    }
    #footer ul {
        list-style: none;
        padding: 0;
    }
        #footer li {
            color: #fff;
            font-size: 12px;
            line-height: 26px;
            position: relative;
        }
            #footer li a {
                color: #fff;
                text-decoration: none;
            }
                #footer li a:hover {text-decoration: underline;}

            #footer li i {
                background: #fff;
                height: 24px;
                width: 24px;
                color: #0A6228;
                font-size: 16px;
                border-radius: 50%;
                line-height: 24px;
                position: absolute;
                left: 0;
            }
    #footer .footer-social-segob {
        display: grid;
        gap: 0 20px;
        grid-template-columns: 1fr 4fr;
    }
        .footer-social-media a {
            color: #085925;
            background: #fff;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            font-size: 18px;
            line-height: 30px;
            display: inline-block;
            text-align: center;
        }
            .footer-social-media a:hover {
                color: #fff;
                background: #0f8435;
            }
        #footer .footer-segob {
            border-top: 1px solid #eee;
            padding-top: 15px;
        }
            #footer .footer-segob p {
                font-size: 9px;
                text-align: center;
            }



/* MEDIA QUERIES */

@media only screen and (min-width: 1366px) {
    .nav-link {margin: 0 20px;}
}

@media only screen and (max-width: 1366px) {
    .nav-link {margin: 0 6px;}
}

@media (min-width: 1150px) and (max-width: 1366px) {
    #eg-logo img {width: 250px;}
    nav .nav-link {font-size: 11px;}
}
@media (min-width: 992px) and (max-width: 1150px) {
    #eg-logo img {width: 200px;}
}

@media only screen and (max-width: 1024px) {

    #benefits h2 {font-size: 48px;line-height: 48px;}
    #benefits h3 {font-size: 24px;}

}

@media only screen and (max-width: 991px) {
    #eg-logo-mob {width: 60px;}
}

@media only screen and (min-width: 992px) {
    .login-top {order: 6;}
}

@media (min-width: 768px) and (max-width: 1024px) {

    nav .nav-link.mx-3 {
        font-size: 11px;
        margin: 0 !important;
    }
    #benefits {background: var(--eg-section-bg) var(--eg-benefits-image) no-repeat right 0;}
    
    #benefits .row .col-md-6:first-child {
        padding-left: 35px;
    }
    #benefits li {
        padding: 10px 0 8px 50px;
    }
    #footer .footer-links {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }

}


@media only screen and (max-width: 991px) {

    #nav-carousel {
        background: #0f8636;
        background-image: none;
    }
    #navbarTogglerEG {
        background: var(--eg-navbar-bg);
        margin-left: -0.75rem;
        margin-right: -0.75rem;
        padding-top: 15px;
        z-index: 9999;
        box-shadow: #222 0 10px 7px;
    }
    .navbar {
        height: auto;
        padding: 22px 0;
    }
    .navbar-nav {
        display: block;
    }
    .navbar-nav .nav-item {
        display: inline-block;
        width: 49%;
        padding: 10px 0;
    }
    .social-media {
        justify-content: center;
        padding-bottom: 30px;
    }
    .theme-btn {
        text-align: center;
        padding-bottom: 25px;
    }
    .btn-outline-success {margin: 0 5px;}
    .section-title {
        font-size: 28px;
        padding: 40px 0 20px 0;
    }
    #promotionsEG {background: var(--eg-section-bg) var(--eg-promotions-image-mob) no-repeat center / cover;}

    #promotionsEG p {
        font-size: 16px;
        padding: 0 10px;
    }
    #promotionsEG a img {max-width: 320px !important;}

    #benefits {background: var(--eg-section-bg) var(--eg-benefits-image-mob) no-repeat center / cover;}

        #benefits .row .col-md-6:first-child {
            padding: 0;
            width: 70%;
            margin: 0 auto;
        }
        #benefits h2 {margin-top: 40px;}

    #footer .footer-links {grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));}

    #footer .footer-social-segob {grid-template-columns: 150px 1fr;}
    
}
  

@media only screen and (max-width: 480px) {

    .section-title {
        font-size: 24px;
    }
    #benefits .row .col-md-6:first-child {width: 85%;}

    #benefits li {font-size: 17px;}

    #footer {padding: 0;}

        #footer .footer-links {grid-template-columns: repeat(2, 1fr);}
        #footer .footer-links > *:nth-child(5) {grid-column: span 2;}

        #footer .footer-social-segob {grid-template-columns: repeat(1, 1fr);}

            #footer .footer-social-media {text-align: center;}
            #footer .footer-segob {border-top: none;}
    
}

@media only screen and (max-width: 414px) {
    .btn#registerTop, .btn#loginTop {
        font-size: 11px;
    }
    .navbar-toggler .fa-bars {
        font-size: 28px;
    }
}