/*************************************************/
/* GLOBAL */
/*************************************************/
*
{
    box-sizing:border-box;
}
html
{
    scroll-behavior:smooth;
}
body
{
    margin:0;
    font-family:
        "Segoe UI",
        Arial,
        sans-serif;
    background:var(--page-bg);
    color:var(--text-color);
}
/*************************************************/
/* READ ONLY */
/*************************************************/
.form-control-readonly
{
    background-color:#e9ecef;
    color:#6c757d;
    cursor:default;
}
.form-control-readonly:focus
{
    background-color:#e9ecef;
    border-color:#ced4da;
    box-shadow:none;
    outline:0;
}
/*************************************************/
/* NAVBAR */
/*************************************************/
.navbar
{
    width:100%;
    padding:
        7px 20px;
    background:
        rgba(255,255,255,.92);
    backdrop-filter:
        blur(15px);
    -webkit-backdrop-filter:
        blur(15px);
    box-shadow:
        0 5px 25px
        rgba(0,0,0,.08);
    z-index:1030;
}
/*************************************************/
/* NAVBAR INNER */
/*************************************************/
.navbar-inner
{
    width:100%;
    max-width:none;
    margin:0;
    padding:0;
    display:flex;
    align-items:center;
    gap:18px;
}
/*************************************************/
/* BRAND */
/*************************************************/
.navbar-brand
{
    flex:
        0 0 auto;
    margin:
        0 18px 0 0;
    padding:0;
}
.nav-logo
{
    display:block;
    width:auto;
    height:50px;
    max-width:200px;
    object-fit:contain;
    background:#fff;
    border-radius:14px;
    padding:
        5px 9px;
    box-shadow:
        0 6px 18px
        rgba(0,0,0,.12);
}
/*************************************************/
/* NAVBAR COLLAPSE */
/*************************************************/
.navbar .navbar-collapse
{
    flex:
        1 1 auto;
    flex-basis:auto;
    width:auto;
    min-width:0;
    align-items:center;
}
/*************************************************/
/* NAVIGATION */
/*************************************************/
.navbar .navbar-nav
{
    flex:
        1 1 auto;
    min-width:0;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    flex-wrap:nowrap;
    margin:0;
    padding:0;
    gap:0;
}
.navbar .nav-item
{
    flex:
        0 0 auto;
}
.navbar .nav-link
{
    display:block;
    margin:0;
    padding:
        8px 7px;
    color:var(--title-color);
    font-size:.88rem;
    line-height:1.2;
    font-weight:600;
    white-space:nowrap;
    text-decoration:none;
    border-radius:7px;
    transition:
        color .2s ease,
        background .2s ease;
}
.navbar .nav-link:hover
{
    color:var(--main-color);
    background:
        rgba(0,0,0,.035);
}
.navbar .funny-link
{
    color:var(--main-color);
}
/*************************************************/
/* SOCIAL LINKS */
/*************************************************/
.social-links
{
    flex:
        0 0 auto;
    display:flex;
    align-items:center;
    gap:8px;
    margin-left:14px;
    padding-left:14px;
    border-left:
        1px solid
        rgba(0,0,0,.10);
}
.social-links a
{
    width:30px;
    height:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0;
    padding:0;
    color:var(--title-color);
    font-size:1.15rem;
    line-height:1;
    text-decoration:none;
    border-radius:7px;
    transition:
        color .2s ease,
        background .2s ease,
        transform .2s ease;
}
.social-links a:hover
{
    color:var(--main-color);
    background:
        rgba(0,0,0,.035);
    transform:
        translateY(-1px);
}

/*************************************************/
/* SOCIAL BIG */
/*************************************************/
.social-big
{
    display:flex;
    align-items:center;
    gap:1rem;
}
.social-big a
{
    text-decoration:none;
    font-size:1.8rem;
}

/*************************************************/
/* NAVBAR TOGGLER */
/*************************************************/
.navbar-toggler
{
    border:0;
    padding:
        6px 8px;
    box-shadow:none !important;
    outline:none !important;
}
.navbar-toggler:focus
{
    box-shadow:none !important;
}

/*************************************************/
/* HERO */
/*************************************************/
.hero
{
    min-height:90vh;
    background:
        linear-gradient(
            135deg,
            rgba(76,159,56,.55),
            rgba(23,105,170,.55)
        ),
        url("../images/hero.jpg");
    background-size:cover;
    background-position:center;
    display:flex;
    align-items:center;
}

.hero-overlay
{
    width:100%;
    padding-top:80px;
}

.hero-logo
{
    max-width:260px;
    max-height:160px;
    object-fit:contain;
}

.hero-logo-box
{
    display:inline-flex;
    padding:
        25px 45px;
    background:white;
    border-radius:35px;
    box-shadow:
        0 20px 50px
        rgba(0,0,0,.25);
}

.hero h1
{
    margin-top:40px;
    font-size:3.4rem;
    font-weight:800;
    color:white;
    text-shadow:
        0 5px 20px
        rgba(0,0,0,.35);
}

.hero p
{
    max-width:700px;
    margin:
        25px auto;
    font-size:1.3rem;
    color:white;
}

.hero-buttons
{
    margin-top:40px;
}

.hero .btn
{
    border-radius:30px;
    padding:
        12px 35px;
    font-weight:600;
}

/*************************************************/
/* HERO QR */
/*************************************************/
.hero
{
    position:relative;
}

.hero-qr-section
{
    position:absolute;

    top:96px;
    right:32px;

    display:flex;

    gap:48px;

    z-index:5;
}

.hero-qr
{
    width:100px;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:16px;
}

.hero-qr img
{
    display:block;

    width:128px;
    height:128px;

    padding:5px;

    background:#fff;

    border-radius:9px;

    box-shadow:
        0 5px 14px
        rgba(0,0,0,.22);

    object-fit:contain;
}

.hero-qr span
{
    color:#fff;

    font-size:12px;
    font-weight:600;

    line-height:1.2;

    text-align:center;
}

/*************************************************/
/* HERO COUNTDOWN */
/*************************************************/
.hero-countdown
{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:8px;

	margin:18px auto 22px;
	padding:9px 18px;

	border:1px solid rgba(255,255,255,.55);
	border-radius:24px;

	background:rgba(18,52,91,.78);

	color:white;

	font-size:15px;
	font-weight:500;

	line-height:1;
	letter-spacing:.2px;

	box-shadow:0 3px 10px rgba(0,0,0,.18);
}

.hero-countdown i
{
	font-size:15px;
}

.hero-countdown strong
{
	display:inline-flex;
	align-items:center;
	justify-content:center;

	min-width:42px;
	padding:5px 8px;

	border-radius:15px;

	background:#87c442;
	color:white;

	font-size:17px;
	font-weight:800;
}

/*************************************************/
/* HERO GALLERY */
/*************************************************/
.hero-gallery
{
    position:relative;

    display:inline-flex;

    width:512px;
    height:315px;

    margin:0 auto 30px;

    overflow:hidden;

    background:#fff;

    border:5px solid rgba(255,255,255,.95);

    border-radius:28px;

    box-shadow:
        0 18px 45px rgba(0,0,0,.30),
        0 4px 12px rgba(0,0,0,.18);
}

.hero-gallery .carousel,
.hero-gallery .carousel-inner,
.hero-gallery .carousel-item
{
    width:100%;
    height:100%;
}

.hero-gallery-image
{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;

    transition:
        transform .8s ease;
}

.hero-gallery .carousel-item.active .hero-gallery-image
{
    transform:scale(1.02);
}

/*************************************************/
/* GALLERY CONTROLS */
/*************************************************/
.hero-gallery .carousel-control-prev,
.hero-gallery .carousel-control-next
{
    top:50%;

    width:42px;
    height:42px;

    margin-top:-21px;

    opacity:.9;

    background:rgba(18,52,91,.72);

    border-radius:50%;

    transition:
        .2s ease;
}

.hero-gallery .carousel-control-prev
{
    left:14px;
}

.hero-gallery .carousel-control-next
{
    right:14px;
}

.hero-gallery .carousel-control-prev:hover,
.hero-gallery .carousel-control-next:hover
{
    background:#12345b;

    opacity:1;

    transform:scale(1.08);
}

.hero-gallery .carousel-control-prev-icon,
.hero-gallery .carousel-control-next-icon
{
    width:18px;
    height:18px;
}

/*************************************************/
/* GALLERY INDICATORS */
/*************************************************/
.hero-gallery .carousel-indicators
{
    margin-bottom:12px;
}

.hero-gallery .carousel-indicators button
{
    width:8px;
    height:8px;

    margin:
        0 4px;

    border:0;

    border-radius:50%;

    background:#fff;

    opacity:.55;

    transition:.2s ease;
}

.hero-gallery .carousel-indicators button.active
{
    width:24px;

    border-radius:8px;

    opacity:1;
}

/*************************************************/
/* SECTION */
/*************************************************/
.section
{
    padding:
        80px 0;
}
.section-title
{
    text-align:center;
    margin-bottom:50px;
    color:var(--title-color);
    font-size:2.2rem;
    font-weight:700;
}
/*************************************************/
/* PRIORITY / WELCOME CARDS */
/*************************************************/
.welcome-card
{
    height:100%;
    padding:
        35px 25px;
    background:white;
    border-radius:30px;
    text-align:center;
    border-top:
        5px solid
        var(--main-color);
    box-shadow:
        0 20px 45px
        rgba(0,0,0,.12);
    transition:
        .3s;
}
.welcome-card:hover
{
    transform:
        translateY(-8px);
}
.welcome-card i
{
    font-size:55px;
    color:var(--main-color);
}
.welcome-card h4
{
    margin-top:20px;
    color:var(--title-color);
}
.welcome-card p
{
    color:var(--text-secondary);
}
/*************************************************/
/* ABOUT */
/*************************************************/
.about-section
{
    background:
        linear-gradient(
            135deg,
            #f5faf3,
            #ffffff
        );
}
.about-icon
{
    width:100%;
    height:350px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:
        linear-gradient(
            135deg,
            #0d6efd,
            #198754
        );
    border-radius:30px;
    color:white;
    font-size:120px;
    box-shadow:
        0 20px 45px
        rgba(0,0,0,.15);
}
.about-section h2
{
    color:var(--title-color);
    font-weight:700;
}
/*************************************************/
/* NEWS */
/*************************************************/
.news-section
{
    background:#f5faf3;
}
.news-card
{
    height:100%;
    background:white;
    border-radius:30px;
    overflow:hidden;
    box-shadow:
        0 20px 45px
        rgba(0,0,0,.12);
}
.news-card img
{
    width:100%;
    height:220px;
    object-fit:cover;
}
.news-card h4
{
    color:var(--title-color);
}
.news-icon
{
    height:180px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:
        linear-gradient(
            135deg,
            #0d6efd,
            #198754
        );
    border-radius:
        20px 20px 0 0;
    color:white;
    font-size:80px;
}
/*************************************************/
/* CONTACT */
/*************************************************/
.contact-section
{
    background:white;
}
.social-big a
{
    font-size:2rem;
    color:var(--main-color);
    margin-right:20px;
}
.social-big a:hover
{
    opacity:.7;
}
/*************************************************/
/* LOGIN */
/*************************************************/
.login-card
{
    padding:35px;
    background:white;
    border-radius:30px;
    border-top:
        5px solid
        var(--main-color);
    box-shadow:
        0 20px 45px
        rgba(0,0,0,.15);
}
.login-card h3
{
    text-align:center;
    margin-bottom:30px;
    color:var(--title-color);
}

/*************************************************/
/* FOOTER */
/*************************************************/
footer
{
    padding:30px;
    color:white;
    background:
        linear-gradient(
            90deg,
            var(--footer1),
            var(--footer2)
        );
}

.footer-logo
{
    height:55px;
    object-fit:contain;
}

/*************************************************/
/* FOOTER COUNTER */
/*************************************************/
.footer-counter
{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:5px 11px;
    border-radius:20px;
    background:#285c32;
    color:inherit;
    font-size:12px;
    line-height:1;
    white-space:nowrap;
}

.footer-counter i
{
    font-size:11px;
    opacity:.75;
}

.footer-counter-label
{
    opacity:.75;
    font-weight:500;
}

.footer-counter-value
{
    min-width:30px;
    padding:4px 7px;
    border-radius:12px;
    background:#1d4727;
    font-weight:700;
    text-align:center;
    letter-spacing:.3px;
}

/*************************************************/
/* BLUE THEME - RIVER */
/*************************************************/
body.style-blue
{
    --page-bg:
        linear-gradient(
            135deg,
            #f4f8fc,
            #dfeefa
        );
    --main-color:#2f73b8;
    --title-color:#1f365c;
    --text-color:#333;
    --text-secondary:#667085;
    --footer1:#1f365c;
    --footer2:#2f73b8;
    --card-bg:#fff;
    --border-color:
        rgba(0,0,0,.08);
}
/*************************************************/
/* GREEN THEME - FOREST */
/*************************************************/
body.style-green
{
    --page-bg:
        linear-gradient(
            135deg,
            #f6faf3,
            #dcefd3
        );
    --main-color:#5b9e45;
    --title-color:#1f365c;
    --text-color:#333;
    --text-secondary:#667085;
    --footer1:#3f7d33;
    --footer2:#74b957;
    --card-bg:#fff;
    --border-color:
        rgba(0,0,0,.08);
}
/*************************************************/
/* NATURE THEME */
/*************************************************/
body.style-nature
{
    --page-bg:
        linear-gradient(
            135deg,
            #fffefb,
            #eef6e8
        );
    --main-color:#5a9647;
    --title-color:#24466d;
    --text-color:#333;
    --text-secondary:#667085;
    --footer1:#24466d;
    --footer2:#5a9647;
    --card-bg:#fff;
    --border-color:
        rgba(0,0,0,.08);
}
/*************************************************/
/* GOLD THEME - HERITAGE */
/*************************************************/
body.style-gold
{
    --page-bg:
        linear-gradient(
            135deg,
            #fffcf4,
            #f8ecd0
        );
    --main-color:#bf8c22;
    --title-color:#5d4632;
    --text-color:#333;
    --text-secondary:#6b7280;
    --footer1:#8c6414;
    --footer2:#d8ad3d;
    --card-bg:#fff;
    --border-color:
        rgba(0,0,0,.08);
}
/*************************************************/
/* STONE THEME */
/*************************************************/
body.style-stone
{
    --page-bg:
        linear-gradient(
            135deg,
            #f7f8f9,
            #e7ebef
        );
    --main-color:#5d7288;
    --title-color:#23384f;
    --text-color:#333;
    --text-secondary:#6b7280;
    --footer1:#23384f;
    --footer2:#5d7288;
    --card-bg:#fff;
    --border-color:
        rgba(0,0,0,.08);
}
/*************************************************/
/* DESKTOP */
/*************************************************/
@media(min-width:992px)
{
    .navbar
    {
        padding-left:24px;
        padding-right:24px;
    }
    .navbar-inner
    {
        width:100%;
        max-width:none;
        display:flex;
        align-items:center;
    }
    .navbar .navbar-collapse
    {
        flex:
            1 1 auto !important;
        flex-basis:auto !important;
        width:auto !important;
        min-width:0;
        display:flex !important;
        align-items:center;
    }
    .navbar .navbar-nav
    {
        flex:
            1 1 auto;
        min-width:0;
        display:flex;
        align-items:center;
        justify-content:flex-end;
        flex-wrap:nowrap;
    }
    .navbar .nav-link
    {
        padding-left:6px;
        padding-right:6px;
        font-size:.82rem;
    }
    .nav-logo
    {
        max-width:190px;
    }
    .social-links
    {
        margin-left:10px;
        padding-left:10px;
        gap:5px;
    }
}
/*************************************************/
/* LARGE DESKTOP */
/*************************************************/
@media(min-width:1200px)
{
    .navbar .nav-link
    {
        padding-left:7px;
        padding-right:7px;
        font-size:.86rem;
    }
    .social-links
    {
        margin-left:14px;
        padding-left:14px;
        gap:7px;
    }
}
/*************************************************/
/* VERY LARGE DESKTOP */
/*************************************************/
@media(min-width:1400px)
{
    .navbar
    {
        padding-left:30px;
        padding-right:30px;
    }
    .navbar .nav-link
    {
        padding-left:8px;
        padding-right:8px;
        font-size:.9rem;
    }
    .nav-logo
    {
        max-width:210px;
    }
}
/*************************************************/
/* MOBILE */
/*************************************************/
@media(max-width:991.98px)
{
	.hero-countdown
	{
		margin:14px auto 18px;
		padding:8px 13px;
		font-size:13px;
	}

	.hero-countdown strong
	{
		min-width:38px;
		padding:4px 7px;

		font-size:16px;
	}

    .hero-gallery
    {
        width:calc(100vw - 40px);
        max-width:256px;

        height:auto;
        aspect-ratio:480 / 295;

        margin-bottom:24px;

        border-width:3px;
        border-radius:20px;
    }

    .hero-gallery .carousel-control-prev,
    .hero-gallery .carousel-control-next
    {
        width:34px;
        height:34px;

        margin-top:-17px;
    }

    .hero-gallery .carousel-control-prev
    {
        left:8px;
    }

    .hero-gallery .carousel-control-next
    {
        right:8px;
    }
	
    .navbar
    {
        padding:
            7px 15px;
        background:
            rgba(255,255,255,.97);
        backdrop-filter:
            blur(15px);
        -webkit-backdrop-filter:
            blur(15px);
    }
    /*************************************************/
    /* NAVBAR INNER */
    /*************************************************/
    .navbar-inner
    {
        width:100%;
        display:flex;
        flex-wrap:wrap;
        align-items:center;
        gap:0;
    }
    /*************************************************/
    /* BRAND */
    /*************************************************/
    .navbar-brand
    {
        flex:
            1 1 auto;
        min-width:0;
        margin:0;
        padding:0;
    }
    .nav-logo
    {
        display:block;
        width:auto;
        height:48px;
        max-width:
            calc(100vw - 85px);
        object-fit:contain;
    }
    /*************************************************/
    /* TOGGLER */
    /*************************************************/
    .navbar-toggler
    {
        flex:
            0 0 auto;
        width:44px;
        height:44px;
        margin:
            0 0 0 8px;
        padding:6px;
        border:0;
        box-shadow:none !important;
        outline:none !important;
    }
    .navbar-toggler:focus,
    .navbar-toggler:active
    {
        box-shadow:none !important;
        outline:none !important;
    }
    /*************************************************/
    /* COLLAPSE */
    /*************************************************/
    .navbar .navbar-collapse
    {
        flex:
            0 0 100% !important;
        flex-basis:
            100% !important;
        width:
            100% !important;
        min-width:0;
        margin:
            9px 0 0 0;
        padding:
            9px 0 0 0;
        border-top:
            1px solid
            rgba(0,0,0,.08);
        /* IMPORTANT:
           DO NOT SET display:block HERE */
    }
    /*************************************************/
    /* NAVIGATION */
    /*************************************************/
    .navbar .navbar-nav
    {
        display:block;
        width:100%;
        margin:0;
        padding:0;
    }
    .navbar .nav-item
    {
        width:100%;
        margin:0;
        padding:0;
    }
    .navbar .nav-link
    {
        display:block;
        width:100%;
        margin:0;
        padding:
            10px 8px;
        font-size:.95rem;
        line-height:1.3;
        text-align:left;
        white-space:normal;
    }
    /*************************************************/
    /* SOCIAL */
    /*************************************************/
    .social-links
    {
        width:100%;
        display:flex;
        align-items:center;
        justify-content:flex-start;
        gap:8px;
        margin:
            8px 0 0 0;
        padding:
            10px 0 2px 0;
        border-left:0;
        border-top:
            1px solid
            rgba(0,0,0,.10);
    }
    .social-links a
    {
        flex:
            0 0 auto;
        width:32px;
        height:32px;
    }
    .hero-qr-section
    {
        display:none;
    }	
	
	.footer
		{
			padding:18px 12px;
		}

		.footer .row
		{
			display:flex;
			align-items:center;
			flex-wrap:nowrap;
		}

		.footer .col-md-6
		{
			width:50%;
			flex:0 0 50%;
		}

		.footer .col-md-6:last-child
		{
			text-align:right;
		}

		.footer-counter
		{
			justify-content:flex-end;
		}

}

/*************************************************/
/* EXTRA SMALL */
/*************************************************/
@media(max-width:576px)
{
    .navbar
    {
        padding:
            6px 10px;
    }
    .nav-logo
    {
        height:44px;
        max-width:
            calc(100vw - 72px);
        border-radius:12px;
    }
    .navbar-toggler
    {
        width:40px;
        height:40px;
        margin-left:5px;
    }
    .navbar .navbar-collapse
    {
        margin-top:8px;
        padding-top:8px;
    }
    .navbar .nav-link
    {
        padding:
            9px 6px;
        font-size:.93rem;
    }
    .hero-qr-section
    {
        display:none;
    }	
}

/*************************************************/
/* HERO - MOBILE */
/*************************************************/

@media (max-width:767.98px)
{
    .hero
    {
        min-height:100vh;

        background-position:
            center center;
    }


    .hero-overlay
    {
        padding:
            60px 15px
            35px;
    }


    .hero-logo-box
    {
        padding:
            15px 25px;

        border-radius:24px;

        box-shadow:
            0 12px 30px
            rgba(0,0,0,.25);
    }


    .hero-logo
    {
        max-width:190px;
        max-height:115px;
    }


    .hero h1
    {
        margin-top:2px;

        font-size:1.6rem;

        line-height:1.15;
    }


    .hero p
    {
        margin: 18px auto;

        font-size:1.05rem;

        line-height:1.5;

        max-width:500px;
    }


    .hero-buttons
    {
        margin-top:8px;

        display:flex;
        flex-direction:column;
        align-items:center;

        gap:14px;
    }


    .hero .btn
    {
        width:100%;
        max-width:300px;

        padding:
            11px 25px;
    }


    .hero-qr-section
    {
        display:none;
    }
}