/*====================================================
WORLD APIARY
=====================================================*/

:root{

    --gold:#d7a437;
    --gold-light:#ffdb7a;
    --gold-dark:#8d6213;

    --black:#050505;
    --black2:#101010;

    --text:#ececec;

    --border:rgba(214,167,55,.45);

    --transition:.35s;

}

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    background:#000;
    color:#fff;

    font-family:'Montserrat',sans-serif;

    overflow-x:hidden;

    position:relative;

}

/*==========================================

BACKGROUND

===========================================*/

.background-grid{

    position:fixed;

    inset:0;

    z-index:-5;

    background:

        radial-gradient(circle at center,
        rgba(255,193,7,.12),
        transparent 55%),

        linear-gradient(rgba(255,180,0,.05) 1px,transparent 1px),

        linear-gradient(90deg,rgba(255,180,0,.05) 1px,transparent 1px),

        #000;

    background-size:

        cover,

        70px 70px,

        70px 70px,

        cover;

}

/* honeycomb */

.background-grid:before{

    content:"";

    position:absolute;

    inset:0;

    opacity:.08;

    background-image:

    radial-gradient(circle,var(--gold) 1px,transparent 1px);

    background-size:45px 45px;

}

/*==========================================

TYPOGRAPHY

===========================================*/

h1,h2,h3,h4{

    font-family:'Cinzel',serif;

    letter-spacing:1px;

}

.section-title{

    text-align:center;

    margin-bottom:70px;

    color:var(--gold);

    font-size:42px;

}

/*==========================================

HERO

===========================================*/

.hero{

    padding:80px 0 50px;

    position:relative;

}

.hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(circle,
    rgba(255,199,60,.18),
    transparent 70%);

    pointer-events:none;

}

/*==========================================

LOGO

===========================================*/

.logo-box{

    width:340px;

    max-width:100%;

    margin:auto;

    padding:30px;

    border:2px solid var(--gold);

    clip-path:polygon(25% 0,
                      75% 0,
                      100% 50%,
                      75% 100%,
                      25% 100%,
                      0 50%);

    background:

    linear-gradient(180deg,#141414,#060606);

    box-shadow:

    0 0 40px rgba(255,196,0,.25);

}

.logo-icon{

    position:relative;

}

.logo-world{

    font-size:34px;

    color:var(--gold);

}

.logo-box h1{

    font-size:92px;

    color:var(--gold-light);

    margin:0;

}

.logo-bee{

    position:absolute;

    right:58px;

    top:58px;

    font-size:34px;

    color:var(--gold);

}

.logo-box h3{

    margin-top:15px;

    color:var(--gold);

    font-size:30px;

}

/*==========================================

TITLE

===========================================*/

.hero-title{

    margin-top:60px;

    font-size:72px;

    color:var(--gold);

    text-shadow:

    0 0 20px rgba(255,193,7,.4);

}

.hero-subtitle{

    max-width:900px;

    margin:30px auto;

    font-size:27px;

    line-height:1.5;

    color:#eee;

}

.hero-line{

    color:var(--gold-light);

    margin-top:25px;

    font-size:34px;

}

/*==========================================

FEATURES

===========================================*/

.features{

    padding:70px 0;

}

.feature{

    text-align:center;

    padding:30px 20px;

    border:1px solid rgba(255,196,0,.25);

    background:

    linear-gradient(180deg,
    rgba(255,193,7,.08),
    rgba(0,0,0,.25));

    transition:var(--transition);

    height:100%;

}

.feature:hover{

    transform:translateY(-10px);

    border-color:var(--gold);

    box-shadow:

    0 0 35px rgba(255,193,7,.25);

}

.feature i{

    font-size:55px;

    color:var(--gold);

    margin-bottom:20px;

}

.feature h5{

    color:var(--gold-light);

    font-size:22px;

}

/*==========================================

MAIN CARDS

===========================================*/

.main-cards{

    padding:40px 0 90px;

}

.glass-card{

    position:relative;

    padding:40px;

    background:

    linear-gradient(180deg,
    rgba(18,18,18,.95),
    rgba(0,0,0,.92));

    border:1px solid rgba(255,193,7,.35);

    overflow:hidden;

    transition:.4s;

}

.glass-card:hover{

    transform:translateY(-10px);

    border-color:var(--gold-light);

    box-shadow:

    0 0 40px rgba(255,193,7,.25);

}

.glass-card h3{

    color:var(--gold);

    text-align:center;

    margin-bottom:35px;

    line-height:1.5;

    font-size:28px;

}

.glass-card ul{

    list-style:none;

    padding:0;

}

.glass-card li{

    margin-bottom:18px;

    padding-left:32px;

    position:relative;

    line-height:1.6;

}

.glass-card li::before{

    content:"✓";

    position:absolute;

    left:0;

    color:var(--gold);

    font-weight:bold;

}

.card-image{

    margin-top:35px;

}

.card-image img{

    width:100%;

    border-radius:8px;

    border:1px solid rgba(255,193,7,.3);

}

/*====================================================
OUR KEY AREAS
====================================================*/

.areas{

    padding:90px 0;

}

.area-card{

    position:relative;

    overflow:hidden;

    background:#0b0b0b;

    border:1px solid rgba(255,193,7,.28);

    transition:.4s;

    height:100%;

}

.area-card:hover{

    transform:translateY(-12px);

    border-color:var(--gold);

    box-shadow:0 0 35px rgba(255,193,7,.25);

}

.area-card img{

    width:100%;

    height:230px;

    object-fit:cover;

    display:block;

    transition:.6s;

}

.area-card:hover img{

    transform:scale(1.08);

}

.area-content{

    padding:22px;

}

.area-content h4{

    color:var(--gold);

    font-size:22px;

    line-height:1.4;

    margin-bottom:18px;

    min-height:70px;

}

.area-content ul{

    list-style:none;

    padding:0;

    margin:0;

}

.area-content li{

    margin-bottom:12px;

    padding-left:22px;

    position:relative;

    color:#ddd;

    font-size:15px;

    line-height:1.5;

}

.area-content li::before{

    content:"•";

    color:var(--gold);

    position:absolute;

    left:0;

    font-size:18px;

}

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

footer{

    padding:100px 0 70px;

    position:relative;

    overflow:hidden;

}

footer::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(circle at center,
    rgba(255,193,7,.12),
    transparent 70%);

    pointer-events:none;

}

footer h2{

    color:var(--gold);

    font-size:34px;

    margin-bottom:25px;

}

footer h1{

    color:var(--gold-light);

    font-size:54px;

    max-width:1200px;

    margin:auto;

    line-height:1.35;

    text-shadow:

    0 0 20px rgba(255,193,7,.15);

}

.footer-icon{

    padding:25px 15px;

    transition:.35s;

}

.footer-icon:hover{

    transform:translateY(-8px);

}

.footer-icon i{

    display:block;

    font-size:42px;

    color:var(--gold);

    margin-bottom:15px;

}

.footer-icon span{

    display:block;

    color:#ddd;

    font-size:15px;

    letter-spacing:1px;

}

.welcome{

    margin-top:60px;

    color:var(--gold);

    font-size:28px;

    letter-spacing:6px;

    font-family:'Cinzel',serif;

}

/*====================================================
GOLD LINES
====================================================*/

.glass-card::before,
.area-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:2px;

    background:linear-gradient(90deg,
    transparent,
    var(--gold),
    transparent);

    opacity:.35;

}

.glass-card::after,
.area-card::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    height:2px;

    background:linear-gradient(90deg,
    transparent,
    var(--gold),
    transparent);

    opacity:.35;

}

/*====================================================
SCROLLBAR
====================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#050505;

}

::-webkit-scrollbar-thumb{

    background:linear-gradient(
    var(--gold),
    #7b5a16);

    border-radius:20px;

}

/*====================================================
ANIMATIONS
====================================================*/

@keyframes glow{

    0%{

        box-shadow:0 0 0 rgba(255,193,7,0);

    }

    50%{

        box-shadow:0 0 25px rgba(255,193,7,.25);

    }

    100%{

        box-shadow:0 0 0 rgba(255,193,7,0);

    }

}

.logo-box{

    animation:glow 5s infinite;

}

.feature i{

    transition:.35s;

}

.feature:hover i{

    transform:scale(1.2) rotate(5deg);

}

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

@media (max-width:1400px){

.hero-title{

font-size:60px;

}

.hero-subtitle{

font-size:23px;

}

footer h1{

font-size:46px;

}

}

@media (max-width:992px){

.hero{

padding:60px 0;

}

.hero-title{

font-size:48px;

}

.hero-subtitle{

font-size:20px;

}

.hero-line{

font-size:24px;

}

.logo-box{

width:280px;

padding:25px;

}

.logo-box h1{

font-size:72px;

}

.logo-box h3{

font-size:24px;

}

.section-title{

font-size:34px;

}

footer h1{

font-size:38px;

}

footer h2{

font-size:28px;

}

.area-card img{

height:220px;

}

}

@media (max-width:768px){

.hero-title{

font-size:40px;

}

.hero-subtitle{

font-size:18px;

}

.hero-line{

font-size:20px;

}

.glass-card{

padding:28px;

}

.glass-card h3{

font-size:22px;

}

.section-title{

font-size:28px;

}

.area-content h4{

font-size:20px;

}

footer h1{

font-size:30px;

}

.welcome{

font-size:22px;

letter-spacing:3px;

}

}

@media (max-width:576px){

.hero{

padding-top:40px;

}

.hero-title{

font-size:34px;

}

.hero-subtitle{

font-size:16px;

}

.hero-line{

font-size:18px;

}

.logo-box{

width:220px;

padding:18px;

}

.logo-box h1{

font-size:54px;

}

.logo-box h3{

font-size:18px;

}

.logo-bee{

right:32px;

top:42px;

font-size:22px;

}

.logo-world{

font-size:24px;

}

.feature{

padding:20px;

}

.feature i{

font-size:42px;

}

.feature h5{

font-size:16px;

}

.glass-card{

padding:22px;

}

.glass-card li{

font-size:15px;

}

.area-card img{

height:190px;

}

footer{

padding:70px 0 50px;

}

footer h2{

font-size:22px;

}

footer h1{

font-size:24px;

}

.footer-icon{

padding:15px;

}

.footer-icon i{

font-size:32px;

}

.footer-icon span{

font-size:13px;

}

.welcome{

font-size:18px;

}

}


/*====================================
Reveal Animation
====================================*/

.hidden{

    opacity:0;

    transform:translateY(60px);

    transition:

    opacity .8s ease,

    transform .8s ease;

}

.show{

    opacity:1;

    transform:translateY(0);

}