/* =========================================================
           GLOBAL RESET
        ========================================================= */

        *{
            margin:0;
            padding:0;
            box-sizing:border-box;
        }

        html{
            scroll-behavior:smooth;
        }

        body{
            font-family:'Overpass',Arial,Helvetica,sans-serif;
            background:#e9eceb;
            color:#222;
        }

        img{
            max-width:100%;
            display:block;
        }

        a{
            text-decoration:none;
            color:inherit;
        }

        ul{
            list-style:none;
        }


        /* =========================================================
           TOP MOTTO BAR
        ========================================================= */

        .top-motto{
            width:100%;
            height:43px;

            display:flex;
            align-items:center;
            justify-content:space-between;

            padding:0 50px;

            background:
                linear-gradient(
                    90deg,
                    #001f18 0%,
                    #004233 50%,
                    #001f18 100%
                );

            color:#fff;

            border-bottom:1px solid rgba(255,255,255,.12);
        }

        .motto-item{
            width:33.333%;

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

            letter-spacing:4px;

            text-align:center;
        }

        .motto-item:first-child{
            text-align:left;
        }

        .motto-item:last-child{
            text-align:right;
        }


        /* =========================================================
           SCHOOL HEADER
        ========================================================= */

        .school-header{
            width:100%;

            min-height:153px;

            position:relative;

            overflow:hidden;

            background: linear-gradient( 110deg, #fbfbfb 0%, #a1e3da 48%, #90dac9 100% );

            color:#002f24;
        }

        .school-header:before{
            content:"";

            position:absolute;

            width:500px;
            height:500px;

            right:-230px;
            top:-280px;

            border-radius:50%;

            background:rgba(255,255,255,.025);
        }

        .header-container{
            width:92%;
            max-width:1280px;

            min-height:153px;

            margin:auto;

            display:flex;
            align-items:center;

            position:relative;
            z-index:2;
        }


        /* =========================================================
           LOGO
        ========================================================== */

        .school-logo{
            width:135px;
            height:135px;

            flex:0 0 135px;

            display:flex;
            align-items:center;
            justify-content:center;

            margin-right:20px;
        }

        .school-logo img{
            width:125px;
            height:125px;

            object-fit:contain;

            filter: drop-shadow( 0 4px 5px rgba(255, 255, 255, 0.45) );
        }


        /* =========================================================
           SCHOOL INFO
        ========================================================== */

        .school-info{
            flex:1;
        }

        .school-title{
            font-size:36px;

            line-height:1.15;

            font-weight:900;

            text-transform:uppercase;

            margin-bottom:9px;
        }

        .school-address{
            font-size:15px;

            margin-bottom:9px;
        }

        .school-meta{
            font-size:14px;

            font-weight:500;
        }


        /* =========================================================
           HEADER RIGHT BUTTON
        ========================================================== */

        .header-action{
            width:190px;

            display:flex;
            justify-content:flex-end;
        }

        .header-action a{
            background:#fff;

            color:#174236;

            padding:9px 14px;

            border:1px solid #dfbd4b;

            border-radius:5px;

            font-size:13px;

            font-weight:800;

            transition:.3s;
        }

        .header-action a:hover{
            background:#dfbd4b;
            color:#fff;
        }


        /* =========================================================
           NAVIGATION
        ========================================================== */

.navigation{
    width:100%;
    height:50px;

    background:#002f24;

    box-shadow:
        0 2px 5px rgba(0,0,0,.15);

    position:sticky;
    top:0;
    z-index:9999;
}

        .navigation-container{
            width:92%;
            max-width:1280px;

            height:50px;

            margin:auto;

            display:flex;
            align-items:center;
        }

        .nav-menu{
            height:50px;

            display:flex;
            align-items:center;

            gap:1px;
        }

        .nav-menu > li{
            height:50px;

            position:relative;
        }

        .nav-menu > li > a{
            height:50px;

            padding:0 13px;

            display:flex;
            align-items:center;

            color:#fff;

            font-size:13px;

            font-weight:600;

            white-space:nowrap;

            transition:.25s;
        }

        .nav-menu > li > a:hover{
            background:#075640;
        }

        .arrow{
            margin-left:5px;
            font-size:9px;
        }


        /* =========================================================
           DROPDOWN
        ========================================================== */

        .dropdown{
            position:absolute;

            left:0;
            top:50px;

            min-width:200px;

            background:#fff;

            border-top:3px solid #e6b92f;

            box-shadow:
                0 5px 18px rgba(0,0,0,.20);

            opacity:0;
            visibility:hidden;

            transform:translateY(7px);

            transition:.2s;

            z-index:9999;
        }

        .nav-menu li:hover > .dropdown{
            opacity:1;
            visibility:visible;
            transform:translateY(0);
        }

        .dropdown li{
            border-bottom:1px solid #eee;
        }

        .dropdown a{
            display:block;

            padding:11px 15px;

            color:#123d32;

            font-size:13px;

            background:#fff;

            transition:.2s;
        }

        .dropdown a:hover{
            background:#eef7f3;

            color:#087351;
        }


        /* =========================================================
           LOGIN BUTTON
        ========================================================== */

        .login-button{
            margin-left:8px;
        }

        .login-button a{
            background:
                linear-gradient(
                    180deg,
                    #32bb32,
                    #159323
                ) !important;

            border-radius:30px !important;

            padding:0 30px !important;

            font-size:14px !important;

            font-weight:800 !important;

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

        .login-button a:hover{
            background:
                linear-gradient(
                    180deg,
                    #43ca42,
                    #13861d
                ) !important;
        }


        /* =========================================================
           MOBILE BUTTON
        ========================================================== */

        .mobile-button{
            display:none;

            margin-left:auto;

            border:0;

            background:none;

            color:#fff;

            font-size:25px;

            cursor:pointer;
        }


        /* =========================================================
           MAIN PAGE
        ========================================================== */

        .main-area{
            width:100%;

            min-height:700px;

            padding:15px 0 50px;

            background-color:#e8eae8;

            background-image:
                radial-gradient(
                    rgba(255,255,255,.7) 1px,
                    transparent 1px
                );

            background-size:8px 8px;
        }

        .main-container{
            width:92%;
            max-width:1280px;

            margin:auto;
        }


        /* =========================================================
           NOTICE BAR
        ========================================================== */

        .notice-bar{
            width:100%;

            height:47px;

            display:flex;
            align-items:center;

            overflow:hidden;

            background:#fff;

            border-radius:3px;

            box-shadow:
                0 1px 5px rgba(0,0,0,.08);

            margin-bottom:18px;
        }

        .notice-heading{
            width:212px;

            height:47px;

            flex:0 0 212px;

            display:flex;
            align-items:center;

            padding:0 20px;

            background:
                linear-gradient(
                    90deg,
                    #073e30,
                    #053529
                );

            color:#fff;

            font-size:18px;

            font-weight:800;

            position:relative;
        }

        .notice-heading:after{
            content:"";

            position:absolute;

            right:-12px;

            top:0;

            border-top:23px solid transparent;
            border-bottom:24px solid transparent;
            border-left:12px solid #053529;
        }

        .notice-icon{
            color:#ffe52b;

            font-size:20px;

            margin-right:9px;
        }

        .notice-text{
            flex:1;

            height:47px;

            display:flex;
            align-items:center;

            padding:0 25px;

            overflow:hidden;
        }

        .notice-text a{
            color:#4e9c4c;

            font-size:13px;

            font-weight:600;

            white-space:nowrap;
        }


        /* =========================================================
           HERO GRID
        ========================================================== */

        .hero-grid{
            display:grid;

            grid-template-columns:
                minmax(0,2.05fr)
                minmax(330px,1fr);

            gap:25px;

            align-items:start;
        }


        /* =========================================================
           SLIDER
        ========================================================== */

        .slider-wrapper{
            background:#fff;

            padding:10px;

            box-shadow:
                0 1px 6px rgba(0,0,0,.10);
        }

        .slider{
            height:440px;

            width:100%;

            position:relative;

            overflow:hidden;

            background:#ddd;
        }

        .slide{
            position:absolute;

            inset:0;

            opacity:0;

            transition:opacity .8s ease;
        }

        .slide.active{
            opacity:1;
        }

        .slide img{
            width:100%;
            height:100%;

            object-fit:cover;
        }

        .slide-overlay{
            position:absolute;

            left:0;
            right:0;
            bottom:0;

            padding:70px 25px 22px;

            background:
                linear-gradient(
                    transparent,
                    rgba(0,0,0,.78)
                );

            color:#fff;
        }

        .slide-overlay h2{
            font-size:25px;

            margin-bottom:5px;
        }

        .slide-overlay p{
            font-size:14px;
        }


        /* =========================================================
           SLIDER BUTTONS
        ========================================================== */

        .slider-arrow{
            position:absolute;

            top:50%;

            transform:translateY(-50%);

            width:40px;
            height:58px;

            display:flex;
            align-items:center;
            justify-content:center;

            color:#fff;

            font-size:32px;

            background:rgba(0,0,0,.15);

            cursor:pointer;

            z-index:20;

            transition:.2s;
        }

        .slider-arrow:hover{
            background:rgba(0,0,0,.45);
        }

        .prev{
            left:0;
        }

        .next{
            right:0;
        }


        /* =========================================================
           SLIDER DOTS
        ========================================================== */

        .slider-dots{
            position:absolute;

            bottom:12px;

            left:50%;

            transform:translateX(-50%);

            display:flex;

            gap:6px;

            z-index:30;
        }

        .dot{
            width:9px;
            height:9px;

            border-radius:50%;

            background:rgba(255,255,255,.55);

            cursor:pointer;
        }

        .dot.active{
            background:#fff;
        }


        /* =========================================================
           RIGHT SIDE
        ========================================================== */

        .right-column{
            display:flex;

            flex-direction:column;

            gap:28px;
        }


        /* =========================================================
           MESSAGE BOX
        ========================================================== */

        .message-card{
            background:#fff;

            box-shadow:
                0 1px 5px rgba(0,0,0,.08);
        }

        .message-header{
            min-height:39px;

            display:flex;
            align-items:center;

            padding:0 10px;

            color:#fff;

            font-size:18px;

            font-weight:800;

            background:
                linear-gradient(
                    90deg,
                    #073e30,
                    #03291f
                );

            border-left:5px solid #efa900;

            position:relative;
        }

        .message-header:after{
            content:"";

            position:absolute;

            left:25px;
            bottom:-8px;

            border-left:8px solid transparent;
            border-right:8px solid transparent;
            border-top:8px solid #03291f;
        }

        .message-body{
            min-height:128px;

            display:flex;
            align-items:center;

            gap:20px;

            padding:10px;
        }

        .person-photo{
            width:120px;
            height:120px;

            flex:0 0 120px;

            padding:3px;

            border:2px solid #278fd7;

            background:#fff;

            overflow:hidden;
        }

        .person-photo img{
            width:100%;
            height:100%;

            object-fit:cover;
        }

        .person-info{
            color:#777;

            font-size:14px;

            line-height:1.45;
        }

        .person-info strong{
            color:#555;

            font-size:15px;
        }


        /* =========================================================
           INFORMATION SECTION
        ========================================================== */

        .section-grid{
            margin-top:25px;

            display:grid;

            grid-template-columns:
                1fr
                1fr
                1fr;

            gap:18px;
        }

        .info-card{
            background:#fff;

            min-height:250px;

            box-shadow:
                0 1px 5px rgba(0,0,0,.08);
        }

        .info-header{
            height:44px;

            display:flex;
            align-items:center;

            padding:0 15px;

            color:#fff;

            background:
                linear-gradient(
                    90deg,
                    #073e30,
                    #053328
                );

            border-left:5px solid #efa900;

            font-size:17px;

            font-weight:800;
        }

        .info-body{
            padding:12px 15px;
        }

        .info-item{
            display:flex;

            gap:10px;

            padding:10px 0;

            border-bottom:1px solid #eee;
        }

        .info-date{
            width:50px;

            flex:0 0 50px;

            text-align:center;

            background:#063c2e;

            color:#fff;

            padding:5px 3px;

            border-radius:2px;
        }

        .info-date strong{
            display:block;

            font-size:17px;
        }

        .info-date small{
            font-size:9px;
        }

        .info-content{
            flex:1;

            font-size:13px;

            line-height:1.4;

            color:#555;
        }

        .info-content a{
            color:#175a47;

            font-weight:700;
        }

        .view-all{
            display:block;

            text-align:right;

            margin-top:10px;

            color:#087351;

            font-size:13px;

            font-weight:700;
        }


        /* =========================================================
           WHY STUDY
        ========================================================== */

        .why-study{
            margin-top:25px;

            background:#fff;

            box-shadow:
                0 1px 5px rgba(0,0,0,.08);

            padding:25px;
        }

        .section-title{
            text-align:center;

            color:#073d30;

            font-size:27px;

            font-weight:800;

            margin-bottom:8px;
        }

        .section-line{
            width:65px;
            height:3px;

            margin:0 auto 25px;

            background:#e4b42c;
        }

        .feature-grid{
            display:grid;

            grid-template-columns:
                repeat(4,1fr);

            gap:15px;
        }

        .feature-card{
            text-align:center;

            padding:22px 15px;

            border:1px solid #e6e6e6;

            transition:.25s;

            background:#fff;
        }

        .feature-card:hover{
            transform:translateY(-4px);

            box-shadow:
                0 5px 15px rgba(0,0,0,.10);
        }

        .feature-icon{
            width:60px;
            height:60px;

            margin:0 auto 12px;

            display:flex;
            align-items:center;
            justify-content:center;

            border-radius:50%;

            background:#073e30;

            color:#ffe04b;

            font-size:26px;
        }

        .feature-card h3{
            font-size:16px;

            color:#15483a;

            margin-bottom:7px;
        }

        .feature-card p{
            font-size:12px;

            line-height:1.5;

            color:#777;
        }


        /* =========================================================
           ACHIEVEMENT
        ========================================================== */

        .achievement-section{
            margin-top:25px;

            padding:30px;

            background:
                linear-gradient(
                    110deg,
                    #073e30,
                    #01261d
                );

            color:#fff;
        }

        .achievement-title{
            text-align:center;

            font-size:27px;

            font-weight:800;

            margin-bottom:25px;
        }

        .achievement-grid{
            display:grid;

            grid-template-columns:
                repeat(4,1fr);

            gap:15px;
        }

        .achievement-box{
            text-align:center;

            padding:20px 10px;

            border:
                1px solid rgba(255,255,255,.15);

            background:
                rgba(255,255,255,.04);
        }

        .achievement-number{
            font-size:30px;

            font-weight:900;

            color:#ffe047;

            margin-bottom:5px;
        }

        .achievement-label{
            font-size:13px;

            color:#d8e4e0;
        }


        /* =========================================================
           QUICK LINKS
        ========================================================== */

        .quick-section{
            margin-top:25px;

            background:#fff;

            padding:25px;

            box-shadow:
                0 1px 5px rgba(0,0,0,.08);
        }

        .quick-grid{
            display:grid;

            grid-template-columns:
                repeat(5,1fr);

            gap:15px;
        }

        .quick-card{
            min-height:100px;

            display:flex;

            flex-direction:column;

            align-items:center;
            justify-content:center;

            gap:8px;

            color:#154638;

            border-bottom:3px solid #07533f;

            background:#fafafa;

            transition:.25s;
        }

        .quick-card:hover{
            transform:translateY(-3px);

            background:#f1f7f4;
        }

        .quick-card-icon{
            font-size:28px;
        }

        .quick-card span{
            font-size:13px;

            font-weight:700;
        }


        /* =========================================================
           FOOTER
        ========================================================== */

        .footer{
            background:#002f24;

            color:#fff;

            padding:40px 0 20px;
        }

        .footer-container{
            width:92%;
            max-width:1280px;

            margin:auto;

            display:grid;

            grid-template-columns:
                1.5fr
                1fr
                1fr
                1fr;

            gap:35px;
        }

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

            font-weight:800;

            margin-bottom:15px;

            padding-bottom:9px;

            border-bottom:
                1px solid rgba(255,255,255,.15);
        }

        .footer-text{
            color:#c9d9d4;

            font-size:13px;

            line-height:1.7;
        }

        .footer-links li{
            margin-bottom:8px;
        }

        .footer-links a{
            color:#c9d9d4;

            font-size:13px;

            transition:.2s;
        }

        .footer-links a:hover{
            color:#fff;

            padding-left:4px;
        }

        .footer-bottom{
            width:92%;
            max-width:1280px;

            margin:30px auto 0;

            padding-top:15px;

            border-top:
                1px solid rgba(255,255,255,.12);

            text-align:center;

            color:#9fb1ab;

            font-size:12px;
        }


        /* =========================================================
           RESPONSIVE
        ========================================================== */

        @media(max-width:1100px){

            .school-title{
                font-size:29px;
            }

            .nav-menu > li > a{
                padding:0 8px;
                font-size:12px;
            }

            .hero-grid{
                grid-template-columns:
                    minmax(0,1.7fr)
                    minmax(300px,1fr);
            }

            .slider{
                height:390px;
            }

        }


        @media(max-width:850px){

            .top-motto{
                padding:0 20px;
            }

            .motto-item{
                font-size:9px;
                letter-spacing:2px;
            }

            .school-logo{
                width:95px;
                height:95px;

                flex:0 0 95px;
            }

            .school-logo img{
                width:90px;
                height:90px;
            }

            .school-title{
                font-size:23px;
            }

            .school-address,
            .school-meta{
                font-size:12px;
            }

            .header-action{
                width:130px;
            }

            .header-action a{
                font-size:10px;
            }

            .mobile-button{
                display:block;
            }

            .nav-menu{
                display:none;

                position:absolute;

                left:0;
                right:0;

                top:50px;

                height:auto;

                flex-direction:column;

                align-items:stretch;

                background:#002f24;
            }

            .nav-menu.show{
                display:flex;
            }

            .nav-menu > li{
                width:100%;
                height:auto;
            }

            .nav-menu > li > a{
                width:100%;
                height:44px;

                padding:0 20px;

                border-bottom:
                    1px solid rgba(255,255,255,.08);
            }

            .dropdown{
                position:static;

                opacity:1;
                visibility:visible;

                display:none;

                transform:none;

                border-top:0;

                box-shadow:none;
            }

            .nav-menu li:hover > .dropdown{
                display:none;
            }

            .hero-grid{
                grid-template-columns:1fr;
            }

            .section-grid{
                grid-template-columns:
                    1fr;
            }

            .feature-grid{
                grid-template-columns:
                    repeat(2,1fr);
            }

            .achievement-grid{
                grid-template-columns:
                    repeat(2,1fr);
            }

            .quick-grid{
                grid-template-columns:
                    repeat(2,1fr);
            }

            .footer-container{
                grid-template-columns:
                    repeat(2,1fr);
            }

        }


        @media(max-width:600px){

            .top-motto{
                height:35px;

                padding:0 10px;
            }

            .motto-item{
                font-size:7px;
                letter-spacing:1px;
            }

            .school-header{
                min-height:130px;
            }

            .header-container{
                min-height:130px;
            }

            .school-logo{
                width:70px;
                height:70px;

                flex:0 0 70px;

                margin-right:8px;
            }

            .school-logo img{
                width:68px;
                height:68px;
            }

            .school-title{
                font-size:17px;
            }

            .school-address{
                font-size:9px;
            }

            .school-meta{
                font-size:8px;
            }

            .header-action{
                display:none;
            }

            .navigation{
                height:45px;
            }

            .navigation-container{
                height:45px;
            }

            .mobile-button{
                height:45px;
            }

            .notice-bar{
                height:auto;
                min-height:44px;
            }

            .notice-heading{
                width:145px;
                flex:0 0 145px;

                height:44px;

                padding:0 12px;

                font-size:14px;
            }

            .notice-text{
                height:44px;

                padding:0 10px;
            }

            .notice-text a{
                font-size:11px;
            }

            .slider{
                height:260px;
            }

            .slide-overlay h2{
                font-size:17px;
            }

            .slide-overlay p{
                font-size:11px;
            }

            .message-body{
                align-items:flex-start;
            }

            .person-photo{
                width:90px;
                height:100px;

                flex:0 0 90px;
            }

            .person-info{
                font-size:11px;
            }

            .person-info strong{
                font-size:12px;
            }

            .feature-grid{
                grid-template-columns:
                    1fr 1fr;
            }

            .achievement-grid{
                grid-template-columns:
                    1fr 1fr;
            }

            .quick-grid{
                grid-template-columns:
                    1fr 1fr;
            }

            .footer-container{
                grid-template-columns:
                    1fr;
            }

        }

/* =========================================================
   HOME PAGE
========================================================= */

.notice-bar{
    width:100%;
    min-height:46px;

    display:flex;
    align-items:center;

    background:#fff;

    margin-bottom:18px;

    box-shadow:0 1px 5px rgba(0,0,0,.08);

    overflow:hidden;
}

.notice-title{
    min-width:210px;
    height:46px;

    display:flex;
    align-items:center;

    padding:0 18px;

    background:#073e30;

    color:#fff;

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

.notice-icon{
    margin-right:8px;
}

.notice-text{
    flex:1;

    overflow:hidden;

    white-space:nowrap;
}

.notice-track{
    display:inline-flex;

    gap:80px;

    padding-left:25px;

    animation:noticeMove 25s linear infinite;
}

.notice-track span{
    color:#178548;

    font-size:13px;

    font-weight:600;
}

@keyframes noticeMove{

    from{
        transform:translateX(0);
    }

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

}


/* =========================================================
   HERO
========================================================= */

.hero-section{
    width:100%;

    min-height:390px;

    display:grid;

    grid-template-columns:1fr 1.25fr;

    background:#fff;

    margin-bottom:20px;

    box-shadow:
        0 2px 8px rgba(0,0,0,.10);

    overflow:hidden;
}

.hero-content{
    padding:45px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    background:
        linear-gradient(
            135deg,
            #073e30,
            #01271e
        );

    color:#fff;

    position:relative;
}

.hero-content:after{
    content:"";

    position:absolute;

    width:240px;
    height:240px;

    right:-100px;
    bottom:-100px;

    border-radius:50%;

    background:rgba(255,255,255,.04);
}

.hero-small-title{
    font-size:14px;

    color:#dfb832;

    font-weight:700;

    letter-spacing:2px;

    margin-bottom:10px;

    position:relative;

    z-index:2;
}

.hero-content h1{
    font-size:38px;

    line-height:1.2;

    font-weight:900;

    margin-bottom:12px;

    position:relative;

    z-index:2;
}

.hero-content h1 span{
    display:block;

    color:#fff;
}

.hero-content p{
    font-size:17px;

    color:#dce9e5;

    margin-bottom:25px;

    position:relative;

    z-index:2;
}

.hero-button{
    width:max-content;

    padding:11px 23px;

    background:#e3b42c;

    color:#073e30;

    border-radius:4px;

    font-size:13px;

    font-weight:800;

    position:relative;

    z-index:2;

    transition:.25s;
}

.hero-button:hover{
    background:#fff;

    color:#073e30;
}

.hero-image{
    min-height:390px;

    overflow:hidden;
}

.hero-image img{
    width:100%;
    height:100%;

    object-fit:cover;

    transition:.5s;
}

.hero-section:hover .hero-image img{
    transform:scale(1.03);
}


/* =========================================================
   FEATURE
========================================================= */

.feature-section{
    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:18px;

    margin-bottom:25px;
}

.feature-card{
    background:#fff;

    padding:25px;

    text-align:center;

    border-bottom:3px solid #e3b42c;

    box-shadow:
        0 1px 6px rgba(0,0,0,.08);

    transition:.25s;
}

.feature-card:hover{
    transform:translateY(-5px);

    box-shadow:
        0 7px 18px rgba(0,0,0,.12);
}

.feature-icon{
    width:60px;
    height:60px;

    margin:0 auto 12px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:#073e30;

    font-size:26px;
}

.feature-card h3{
    color:#073e30;

    font-size:19px;

    font-weight:800;

    margin-bottom:8px;
}

.feature-card p{
    color:#777;

    font-size:13px;

    line-height:1.7;
}


/* =========================================================
   MESSAGE
========================================================= */

.message-section{
    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:20px;

    margin-bottom:25px;
}

.message-card{
    background:#fff;

    box-shadow:
        0 1px 6px rgba(0,0,0,.10);
}

.message-header{
    height:42px;

    display:flex;

    align-items:center;

    padding:0 15px;

    color:#fff;

    background:
        linear-gradient(
            90deg,
            #073e30,
            #00291f
        );

    border-left:5px solid #e5b52e;

    font-size:16px;

    font-weight:800;
}

.message-body{
    min-height:160px;

    display:flex;

    padding:15px;
}

.message-photo{
    width:120px;

    flex:0 0 120px;

    min-height:125px;

    overflow:hidden;

    border:2px solid #e4b42c;

    background:#eaf0ed;

    display:flex;

    align-items:center;

    justify-content:center;
}

.message-photo img{
    width:100%;
    height:125px;

    object-fit:cover;
}

.photo-placeholder{
    color:#073e30;

    font-size:13px;

    font-weight:800;

    text-align:center;
}

.message-content{
    padding-left:18px;
}

.message-content h3{
    color:#073e30;

    font-size:18px;

    margin-bottom:8px;
}

.message-content p{
    color:#666;

    font-size:13px;

    line-height:1.6;

    margin-bottom:10px;
}

.message-content a{
    color:#0b7955;

    font-size:12px;

    font-weight:800;
}


/* =========================================================
   HOME ABOUT
========================================================= */

.home-about{
    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:0;

    background:#fff;

    margin-bottom:25px;

    box-shadow:
        0 1px 6px rgba(0,0,0,.08);
}

.home-about-image{
    min-height:340px;

    overflow:hidden;
}

.home-about-image img{
    width:100%;
    height:100%;

    object-fit:cover;
}

.home-about-content{
    padding:40px;
}

.home-section-label{
    color:#d4a91e;

    font-size:12px;

    font-weight:800;

    letter-spacing:3px;

    margin-bottom:8px;
}

.home-about-content h2{
    color:#073e30;

    font-size:30px;

    font-weight:900;

    margin-bottom:15px;
}

.home-about-content h2 span{
    color:#16814f;
}

.home-about-content p{
    color:#666;

    font-size:14px;

    line-height:1.8;

    margin-bottom:12px;
}

.home-about-button{
    display:inline-block;

    margin-top:8px;

    padding:10px 20px;

    background:#073e30;

    color:#fff;

    border-radius:3px;

    font-size:13px;

    font-weight:700;

    transition:.25s;
}

.home-about-button:hover{
    background:#e3b42c;

    color:#073e30;
}


/* =========================================================
   QUICK LINKS
========================================================= */

.quick-section{
    background:#fff;

    padding:30px;

    margin-bottom:25px;

    box-shadow:
        0 1px 6px rgba(0,0,0,.08);
}

.home-section-heading{
    text-align:center;

    margin-bottom:25px;
}

.home-section-heading h2{
    color:#073e30;

    font-size:27px;

    font-weight:800;
}

.home-section-heading div{
    width:60px;

    height:3px;

    background:#e3b42c;

    margin:10px auto 0;
}

.quick-grid{
    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:15px;
}

.quick-card{
    padding:20px 15px;

    border:1px solid #e5e5e5;

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    transition:.25s;
}

.quick-card:hover{
    border-color:#e3b42c;

    transform:translateY(-4px);

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

.quick-card span{
    font-size:28px;

    margin-bottom:8px;
}

.quick-card strong{
    color:#073e30;

    font-size:15px;

    margin-bottom:4px;
}

.quick-card small{
    color:#888;

    font-size:11px;
}


/* =========================================================
   HOME RESPONSIVE
========================================================= */

@media(max-width:850px){

    .notice-title{
        min-width:150px;

        font-size:13px;
    }

    .hero-section{
        grid-template-columns:1fr;
    }

    .hero-content{
        min-height:300px;
    }

    .hero-image{
        min-height:300px;
    }

    .feature-section{
        grid-template-columns:1fr;
    }

    .message-section{
        grid-template-columns:1fr;
    }

    .home-about{
        grid-template-columns:1fr;
    }

    .home-about-image{
        min-height:280px;
    }

    .quick-grid{
        grid-template-columns:
            repeat(2,1fr);
    }

}


@media(max-width:600px){

    .notice-bar{
        display:block;
    }

    .notice-title{
        width:100%;
    }

    .notice-text{
        height:40px;

        display:flex;

        align-items:center;
    }

    .hero-content{
        padding:30px 22px;
    }

    .hero-content h1{
        font-size:28px;
    }

    .hero-content p{
        font-size:14px;
    }

    .message-body{
        flex-direction:column;
    }

    .message-photo{
        width:120px;

        margin-bottom:15px;
    }

    .message-content{
        padding-left:0;
    }

    .home-about-content{
        padding:25px 20px;
    }

    .home-about-content h2{
        font-size:24px;
    }

    .quick-section{
        padding:20px 15px;
    }

    .quick-grid{
        grid-template-columns:
            1fr 1fr;
    }

}
/* =========================================================
   MOBILE NAVIGATION
   FINAL FIX
   DESIGN UNCHANGED
========================================================= */

@media (max-width: 850px){

    /* =====================================================
       NAVIGATION BAR
    ===================================================== */

    .navigation{
        width:100% !important;
        height:50px !important;

        position:sticky !important;
        top:0 !important;
        left:0 !important;

        z-index:999999 !important;

        overflow:visible !important;
    }


    /* =====================================================
       NAVIGATION CONTAINER
    ===================================================== */

    .navigation-container{
        width:92% !important;
        max-width:1280px !important;

        height:50px !important;

        margin:0 auto !important;

        display:flex !important;
        align-items:center !important;

        position:relative !important;

        overflow:visible !important;
    }


    /* =====================================================
       MOBILE BUTTON
    ===================================================== */

    .mobile-button{
        display:flex !important;

        position:absolute !important;

        right:0 !important;
        top:50% !important;

        width:45px !important;
        height:45px !important;

        margin:0 !important;
        padding:0 !important;

        transform:translateY(-50%) !important;

        border:0 !important;
        outline:none !important;

        background:transparent !important;

        align-items:center !important;
        justify-content:center !important;

        flex-direction:column !important;

        gap:5px !important;

        cursor:pointer !important;

        z-index:1000001 !important;

        -webkit-tap-highlight-color:transparent !important;
    }


    .mobile-button .menu-bar{
        display:block !important;

        width:25px !important;
        height:2px !important;

        margin:0 !important;
        padding:0 !important;

        background:#fff !important;

        border-radius:2px !important;

        transition:
            transform .25s ease,
            opacity .25s ease !important;
    }


    /* =====================================================
       HAMBURGER -> X
    ===================================================== */

    .mobile-button.active .menu-bar:nth-child(1){
        transform:
            translateY(7px)
            rotate(45deg) !important;
    }

    .mobile-button.active .menu-bar:nth-child(2){
        opacity:0 !important;
    }

    .mobile-button.active .menu-bar:nth-child(3){
        transform:
            translateY(-7px)
            rotate(-45deg) !important;
    }


    /* =====================================================
       MOBILE MENU
    ===================================================== */

    .nav-menu{
        display:none !important;

        position:absolute !important;

        top:50px !important;
        left:50% !important;

        width:100vw !important;

        height:auto !important;
        max-height:calc(100vh - 50px) !important;

        margin:0 !important;
        padding:0 !important;

        transform:translateX(-50%) !important;

        flex-direction:column !important;
        align-items:stretch !important;

        gap:0 !important;

        background:#002f24 !important;

        overflow-x:hidden !important;
        overflow-y:auto !important;

        box-shadow:
            0 8px 20px rgba(0,0,0,.30) !important;

        z-index:1000000 !important;

        -webkit-overflow-scrolling:touch !important;
    }


    /* =====================================================
       MENU OPEN
    ===================================================== */

    .nav-menu.show{
        display:flex !important;
    }


    /* =====================================================
       MAIN MENU ITEMS
    ===================================================== */

    .nav-menu > li{
        width:100% !important;

        height:auto !important;
        min-height:45px !important;

        margin:0 !important;
        padding:0 !important;

        position:relative !important;

        flex:0 0 auto !important;

        border-bottom:
            1px solid
            rgba(255,255,255,.10) !important;

        background:#002f24 !important;
    }


    /* =====================================================
       MAIN MENU LINKS
    ===================================================== */

    .nav-menu > li > a{
        width:100% !important;

        height:45px !important;
        min-height:45px !important;

        margin:0 !important;

        padding:
            0 18px !important;

        display:flex !important;

        align-items:center !important;
        justify-content:space-between !important;

        color:#fff !important;

        background:#002f24 !important;

        font-size:13px !important;
        font-weight:600 !important;

        text-decoration:none !important;

        white-space:normal !important;

        box-sizing:border-box !important;

        cursor:pointer !important;
    }


    .nav-menu > li > a:hover{
        background:#075640 !important;
    }


    .nav-menu > li.active > a{
        background:#075640 !important;
    }


    /* =====================================================
       ARROW
    ===================================================== */

    .nav-menu .arrow{
        display:inline-block !important;

        margin-left:auto !important;

        padding-left:10px !important;

        color:#fff !important;

        font-size:9px !important;

        line-height:1 !important;

        transition:
            transform .25s ease !important;
    }


    .nav-menu > li.dropdown-open > a .arrow{
        transform:rotate(180deg) !important;
    }


    /* =====================================================
       DROPDOWN
    ===================================================== */

    .nav-menu > li.has-dropdown > .dropdown{
        position:static !important;

        display:none !important;

        width:100% !important;
        min-width:100% !important;
        max-width:100% !important;

        height:auto !important;
        max-height:none !important;

        margin:0 !important;
        padding:0 !important;

        transform:none !important;

        opacity:1 !important;
        visibility:visible !important;

        overflow:visible !important;

        background:#073e30 !important;

        border:0 !important;

        border-left:
            3px solid
            #e3b42c !important;

        box-shadow:none !important;

        z-index:auto !important;
    }


    /* =====================================================
       DROPDOWN OPEN
    ===================================================== */

    .nav-menu > li.has-dropdown.dropdown-open > .dropdown{
        display:block !important;

        opacity:1 !important;
        visibility:visible !important;

        height:auto !important;
        max-height:none !important;
    }


    /* =====================================================
       DROPDOWN ITEMS
    ===================================================== */

    .nav-menu > li.has-dropdown > .dropdown > li{
        display:block !important;

        width:100% !important;

        height:auto !important;
        min-height:42px !important;

        margin:0 !important;
        padding:0 !important;

        position:relative !important;

        border-bottom:
            1px solid
            rgba(255,255,255,.08) !important;

        background:#073e30 !important;
    }


    /* =====================================================
       DROPDOWN LINKS
    ===================================================== */

    .nav-menu > li.has-dropdown > .dropdown > li > a{
        display:flex !important;

        width:100% !important;

        min-height:42px !important;
        height:auto !important;

        margin:0 !important;

        padding:
            10px 18px 10px 35px !important;

        align-items:center !important;

        color:#fff !important;

        background:#073e30 !important;

        font-size:12px !important;

        text-decoration:none !important;

        box-sizing:border-box !important;
    }


    .nav-menu > li.has-dropdown > .dropdown > li > a:hover{
        background:#0a5a45 !important;

        color:#fff !important;
    }


    /* =====================================================
       LOGIN
    ===================================================== */

    .nav-menu > li.login-button{
        width:100% !important;

        min-height:58px !important;

        margin:0 !important;

        padding:
            8px 15px !important;

        border-bottom:0 !important;

        background:#002f24 !important;
    }


    .nav-menu > li.login-button > a{
        width:100% !important;

        height:42px !important;
        min-height:42px !important;

        padding:
            0 20px !important;

        display:flex !important;

        align-items:center !important;
        justify-content:center !important;

        border-radius:25px !important;

        background:
            linear-gradient(
                180deg,
                #32bb32,
                #159323
            ) !important;

        color:#fff !important;

        font-size:14px !important;
        font-weight:800 !important;

        box-shadow:
            0 3px 6px rgba(0,0,0,.18) !important;
    }


    .nav-menu > li.login-button > a:hover{
        background:
            linear-gradient(
                180deg,
                #43ca42,
                #13861d
            ) !important;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width:600px){

    .navigation{
        height:45px !important;
    }


    .navigation-container{
        height:45px !important;
    }


    .mobile-button{
        width:42px !important;
        height:45px !important;

        right:0 !important;
        top:50% !important;

        transform:translateY(-50%) !important;
    }


    .nav-menu{
        top:45px !important;

        max-height:
            calc(100vh - 45px) !important;
    }


    .nav-menu > li > a{
        height:44px !important;
        min-height:44px !important;

        padding:
            0 15px !important;
    }


    .nav-menu > li.has-dropdown > .dropdown > li > a{
        min-height:40px !important;

        padding:
            9px 15px 9px 30px !important;
    }

}


/* =========================================================
   DESKTOP NAVIGATION
   ORIGINAL DESIGN
========================================================= */

@media (min-width:851px){

    .navigation{
        position:sticky !important;
        top:0 !important;

        z-index:99999 !important;
    }


    .nav-menu{
        display:flex !important;

        position:static !important;

        transform:none !important;

        height:50px !important;

        max-height:none !important;

        overflow:visible !important;
    }


    .nav-menu > li.has-dropdown{
        position:relative !important;
    }


    .nav-menu > li.has-dropdown > .dropdown{
        display:block;

        position:absolute !important;

        left:0 !important;
        top:50px !important;

        min-width:200px !important;

        opacity:0 !important;
        visibility:hidden !important;

        transform:translateY(7px) !important;

        transition:
            opacity .2s ease,
            visibility .2s ease,
            transform .2s ease !important;

        background:#fff !important;

        border-top:
            3px solid
            #e6b92f !important;

        box-shadow:
            0 5px 18px rgba(0,0,0,.20) !important;

        z-index:999999 !important;
    }


    .nav-menu > li.has-dropdown:hover > .dropdown{
        display:block !important;

        opacity:1 !important;
        visibility:visible !important;

        transform:translateY(0) !important;
    }

}