/* =======================================================
   GP ANSOR WARULOR SYSTEM
   WELCOME PAGE
   Version : 1.0
======================================================= */

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

.page-wrapper{

    width:100%;
    min-height:100vh;
    padding:0px;
    background:
        radial-gradient(circle at top right,#d7f5df 0%,transparent 35%),
        radial-gradient(circle at bottom left,#dff7e5 0%,transparent 40%),
        #eef7f0;

}

.page-card{

    width:100%;
    min-height:calc(100vh - 36px);
    background:#ffffff;
    border-radius:24px;
    overflow:hidden;
    position:relative;
    box-shadow:
        0 10px 45px rgba(0,0,0,.08);

}

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

.hero{

    position:relative;
    width:100%;
    height:calc(100vh - 230px);
    min-height:auto;
    display:flex;
    align-items:center;
    overflow:hidden;

}

.hero-container{

    display:grid;
    grid-template-columns:52% 48%;
    align-items:center;
    gap:20px;
    height:100%;

}

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

.hero-left{

    position:relative;
    z-index:20;
	padding-top:35px;

}

.hero-badge{

    display:inline-flex;
    align-items:center;
    padding:12px 20px;
    background:#E8F8EC;
    color:#0B7A3B;
    border-radius:999px;
    font-size:14px;
    font-weight:600;
    margin-bottom:28px;

}

.hero-left h1{

    font-size:64px;
    line-height:1.1;
    color:#1F2937;
    margin-bottom:24px;
    font-weight:800;

}

.hero-left h1 span{

    display:block;
    color:#0B7A3B;

}

.hero-left p{

    max-width:560px;
    font-size:18px;
    line-height:34px;
    color:#6B7280;
    margin-bottom:40px;

}

.hero-button{

    display:flex;
    align-items:center;
    gap:18px;
    margin-top:10px;
    margin-bottom:20px;

}

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

.hero-right{

    position:absolute;
    right:-30px;
    bottom:-10px;
    width:48%;
    display:flex;
    justify-content:flex-end;
    align-items:flex-end;

}

.hero-image{

    position:absolute;
    right:-80px;
    bottom:-70px;
    width:100%;
    z-index:8;

}

.hero-image img{

    width:100%;
    max-width:620px;
    height:auto;
    display:block;
    filter:drop-shadow(0 18px 30px rgba(0,0,0,.15));

}

/* =======================================================
   BACKGROUND DECORATION
======================================================= */

.hero::before{

    content:"";
    position:absolute;
    width:520px;
    height:520px;
    border-radius:50%;
    background:rgba(11,122,59,.08);
    right:-120px;
    top:-120px;
    z-index:1;

}

.hero::after{

    content:"";
    position:absolute;
    width:360px;
    height:360px;
    border-radius:50%;
    background:rgba(11,122,59,.05);
    right:80px;
    bottom:-180px;
    z-index:1;

}

/* =======================================================
   FLOATING CIRCLE
======================================================= */

.hero-circle{

    position:absolute;
    border-radius:50%;
    z-index:2;

}

.hero-circle-1{

    width:120px;
    height:120px;
    background:rgba(11,122,59,.12);
    top:80px;
    right:120px;

}

.hero-circle-2{

    width:60px;
    height:60px;
    background:rgba(11,122,59,.20);
    bottom:140px;
    left:80px;

}

.hero-circle-3{

    width:80px;
    height:80px;
    background:rgba(11,122,59,.20);
    bottom:10px;
    left:80px;

}

/* =======================================================
   IMAGE SHADOW
======================================================= */

.hero-image::after{

    content:"";
    position:absolute;
    bottom:20px;
    width:70%;
    height:35px;
    background:rgba(0,0,0,.10);
    filter:blur(28px);
    border-radius:50%;
    z-index:-1;

}

/* =======================================================
   FLOAT ANIMATION
======================================================= */

@keyframes floatImage{

    0%{

        transform:translateY(0);
    }

    50%{

        transform:translateY(-12px);
    }

    100%{

        transform:translateY(0);
    }

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

.footer{

    padding:23px 0;
    background:#0B7A3B;
    color:#fff;
    border-top:none;

}

.footer-container{

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

}

.footer-left{

    display:flex;
    align-items:center;
    gap:14px;

}

.footer-left > div{

    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:0;

}

.footer-left img{

    width:60px;
    height:60px;
    object-fit:contain;

}

.footer-left h3{

    margin:0;
    padding:0;
    font-size:20px;
    font-weight:700;
    line-height:1.1;
    color:#ffffff;

}

.footer-left p{

    margin:2px 0 0;
    padding:0;
    font-size:14px;
    line-height:1.2;
    color:rgba(255,255,255,.85);

}

.footer-right{

    display:flex;
    align-items:center;
    gap:18px;

}

.footer-right span{

    font-size:15px;
    color:#ffffff;
    font-weight:600;

}

.social-media{

    display:flex;
    gap:12px;

}

.social-media a{

    width:44px;
    height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#F3F4F6;
    transition:.30s;

}

.social-media a:hover{

    background:#0B7A3B;
    transform:translateY(-4px);

}

.social-media img{

    width:22px;
    height:22px;

}

.social-media a:hover img{

    filter:brightness(0) invert(1);

}

/* =======================================================
   COPYRIGHT
======================================================= */

.footer-bottom{

    margin-top:0px;
    padding-top:10px;
    border-top:1px solid rgba(255,255,255,.12);
    text-align:center;
    font-size:13px;
    color:rgba(255,255,255,.70);

}

/* =======================================================
   WAVE
======================================================= */

.wave{

    position:relative;
    width:100%;
    line-height:0;
    margin-top:-80px;
    z-index:5;

}

.wave img{

    width:100%;
    display:block;

}
/* =======================================================
   HOVER EFFECT
======================================================= */

.hero-left h1,
.brand-title h2{

    transition:.35s ease;

}

.hero-left h1:hover{

    transform:translateX(6px);
}

.brand-title h2:hover{

    color:#075C2C;
}

/* =======================================================
   SMOOTH TRANSITION
======================================================= */

*{
    transition:
        background .30s,
        color .30s,
        border-color .30s,
        transform .30s,
        box-shadow .30s;

}

/* =======================================================
   IMAGE EFFECT
======================================================= */

.hero-image{

    transition:.35s ease;
}

.hero-image:hover{

    transform:translateY(-8px);

}

/* =======================================================
   INFO CARD
======================================================= */

.info-item{

    transition:.30s;
}

.info-item:hover{

    transform:translateY(-8px);
    box-shadow:0 18px 45px rgba(0,0,0,.12);

}

/* =======================================================
   SECTION SPACING
======================================================= */

.section{

    position:relative;
}

/* =======================================================
   SELECTION
======================================================= */

::selection{

    background:#0B7A3B;
    color:#fff;

}

/* =======================================================
   END
======================================================= */