/*==================================================
DIAMOND AREA CDC
HOME.CSS
PART 1
==================================================*/


/*==================================================
ROOT
==================================================*/

:root{

--green:#0B6E3E;
--green-dark:#084C2C;
--green-light:#EEF8F0;

--gold:#D9B54A;

--blue:#1E5AA8;

--white:#ffffff;

--text:#555555;

--heading:#0B6E3E;

--shadow:0 15px 40px rgba(0,0,0,.08);

}


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

*{

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

}

html{

scroll-behavior:smooth;

}

body{

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

background:#F6FBF7;

color:var(--text);

line-height:1.8;

overflow-x:hidden;

}

img{

display:block;

max-width:100%;

}

a{

text-decoration:none;

}

ul{

list-style:none;

}

.container{

width:min(1280px,92%);

margin:auto;

}


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

.top-bar{

background:var(--gold);

padding:10px 0;

}

.top-bar-content{

display:flex;

justify-content:center;

align-items:center;

gap:15px;

font-size:14px;

font-weight:600;

color:var(--green);

text-align:center;

}

.top-bar i{

margin-right:8px;

color:var(--green);

}


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

header{

position:sticky;

top:0;

left:0;

width:100%;

background:var(--green);

border-bottom:3px solid var(--gold);

z-index:9999;

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

}



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

.hero{

position:relative;

overflow:hidden;

background:linear-gradient(180deg,#F8FCF8,#EEF8F0);

padding:90px 0 120px;

}

/* Nigeria Watermark */

.hero-watermark{

position:absolute;

left:26%;

top:50%;

transform:translate(-50%,-50%);

width:480px;

opacity:.05;

pointer-events:none;

z-index:1;

}

/* Hero Content Above Watermark */

.hero .container{

position:relative;

z-index:2;

}

/* Layout */

.hero-grid{

display:grid;

grid-template-columns:1.05fr .95fr;

align-items:center;

gap:80px;

}

/*=====================================
LEFT CONTENT
=====================================*/

.hero-content{

max-width:650px;

}

/* Subtitle */

.hero-subtitle{

display:inline-block;

font-size:13px;

font-weight:700;

letter-spacing:3px;

text-transform:uppercase;

color:var(--green);

padding-bottom:10px;

margin-bottom:20px;

border-bottom:3px solid var(--gold);

}

/* Heading */

.hero-content h1{

font-size:68px;

font-weight:800;

line-height:1.05;

letter-spacing:-2px;

color:var(--heading);

margin-bottom:30px;

}

/* Paragraph */

.hero-content p{

font-size:18px;

line-height:1.9;

color:#555;

margin-bottom:40px;

}

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

.hero-buttons{

display:flex;

gap:18px;

flex-wrap:wrap;

}

.btn-primary,

.btn-secondary{

display:inline-flex;

align-items:center;

justify-content:center;

padding:15px 32px;

border-radius:8px;

font-size:15px;

font-weight:600;

transition:.35s;

min-width:180px;

}

/* Primary */

.btn-primary{

background:var(--green);

color:#fff;

box-shadow:0 10px 25px rgba(11,110,62,.20);

}

.btn-primary:hover{

background:var(--green-dark);

transform:translateY(-4px);

}

/* Secondary */

.btn-secondary{

background:#fff;

color:var(--green);

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

}

.btn-secondary:hover{

background:var(--green);

color:#fff;

transform:translateY(-4px);

}

/*=====================================
RIGHT IMAGE
=====================================*/

.hero-image{

display:flex;

justify-content:flex-end;

align-items:center;

}

.hero-image img{

width:100%;

max-width:610px;

height:560px;

object-fit:cover;

border-radius:20px;

border:8px solid #fff;

box-shadow:var(--shadow);

transition:.35s;

}

.hero-image img:hover{

transform:translateY(-6px);

}

/* Decorative Glow */

.hero::after{

content:"";

position:absolute;

right:-180px;

bottom:-180px;

width:620px;

height:620px;

background:radial-gradient(circle,rgba(11,110,62,.05),transparent 70%);

border-radius:50%;

pointer-events:none;

}
/*==================================================
WHO WE ARE
==================================================*/

.about-home{

position:relative;

overflow:hidden;

padding:120px 0;

background:linear-gradient(180deg,#EEF8F0,#E7F4EA);

}

/* Decorative Dots */

.about-home::after{

content:"";

position:absolute;

right:70px;

bottom:80px;

width:120px;

height:120px;

opacity:.12;

background-image:
radial-gradient(var(--green) 2px,transparent 2px);

background-size:16px 16px;

pointer-events:none;

}

/*=====================================
LAYOUT
=====================================*/

.about-grid{

display:grid;

grid-template-columns:1fr 1fr;

align-items:center;

gap:90px;

position:relative;

z-index:2;

}

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

.about-image{

position:relative;

}

.about-image::before{

content:"";

position:absolute;

left:-22px;

top:-22px;

width:92%;

height:92%;

background:#D4EED8;

border-radius:20px;

z-index:0;

}

.about-image img{

position:relative;

z-index:2;

width:100%;

height:520px;

object-fit:cover;

border-radius:20px;

border:8px solid #fff;

box-shadow:var(--shadow);

transition:.35s;

}

.about-image img:hover{

transform:translateY(-6px);

}

/*=====================================
CONTENT
=====================================*/

.about-content{

position:relative;

z-index:2;

}

.section-title{

display:inline-block;

font-size:13px;

font-weight:700;

letter-spacing:3px;

text-transform:uppercase;

color:var(--green);

padding-bottom:10px;

margin-bottom:20px;

border-bottom:3px solid var(--gold);

}

.about-content h2{

font-size:48px;

font-weight:800;

line-height:1.2;

color:var(--heading);

margin-bottom:25px;

}

.about-content p{

font-size:17px;

line-height:1.9;

color:#555;

margin-bottom:20px;

}

/*=====================================
READ MORE
=====================================*/

.read-more{

display:inline-flex;

align-items:center;

gap:10px;

margin-top:20px;

font-size:15px;

font-weight:700;

color:var(--green);

transition:.35s;

}

.read-more i{

transition:.35s;

}

.read-more:hover{

color:var(--gold);

}

.read-more:hover i{

transform:translateX(8px);

}
/*==================================================
CHAIRMAN'S WELCOME
==================================================*/

.chairman{

position:relative;

overflow:hidden;

padding:120px 0;

background:linear-gradient(180deg,#F8FCF8,#EDF8EF);

}

/*=====================================
OGUN STATE WATERMARK
=====================================*/

.chairman-watermark{

position:absolute;

right:40px;

top:110px;

width:340px;

opacity:.06;

pointer-events:none;

z-index:1;

}

.chairman .container{

position:relative;

z-index:2;

}


/*=====================================
LAYOUT
=====================================*/

.chairman-grid{

display:grid;

grid-template-columns:470px 1fr;

align-items:center;

gap:90px;

}


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

.chairman-image{

position:relative;

}

.chairman-image::before{

content:"";

position:absolute;

right:-22px;

bottom:-22px;

width:92%;

height:92%;

background:#DCEFE0;

border-radius:20px;

z-index:0;

}

.chairman-image img{

position:relative;

z-index:2;

width:100%;

height:620px;

object-fit:cover;

border-radius:20px;

border:8px solid #fff;

box-shadow:var(--shadow);

transition:.35s;

}

.chairman-image img:hover{

transform:translateY(-6px);

}


/*=====================================
CONTENT
=====================================*/

.chairman-content{

position:relative;

z-index:2;

}

.quote-icon{

font-size:56px;

color:var(--gold);

margin-bottom:15px;

opacity:.9;

}

.chairman-content h2{

font-size:48px;

font-weight:800;

line-height:1.2;

color:var(--heading);

margin-bottom:25px;

}

.chairman-intro{

font-size:22px;

font-weight:600;

line-height:1.6;

color:var(--green);

margin-bottom:25px;

}

.chairman-content p{

font-size:17px;

line-height:1.9;

color:#555;

margin-bottom:20px;

}


/*=====================================
SIGNATURE
=====================================*/

.chairman-signature{

margin-top:35px;

padding-top:25px;

border-top:2px solid #E5EFE8;

margin-bottom:30px;

}

.chairman-signature h3{

font-size:26px;

font-weight:700;

color:var(--green);

margin-bottom:6px;

}

.chairman-signature span{

font-size:15px;

color:#666;

line-height:1.8;

}


/*=====================================
READ FULL MESSAGE
=====================================*/

.chairman .read-more{

display:inline-flex;

align-items:center;

gap:10px;

font-size:15px;

font-weight:700;

color:var(--green);

transition:.35s;

}

.chairman .read-more:hover{

color:var(--gold);

}

.chairman .read-more i{

transition:.35s;

}

.chairman .read-more:hover i{

transform:translateX(8px);

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

.women-footer,
footer{

position:relative;

overflow:hidden;

background:var(--green);

border-top:4px solid var(--gold);

padding:80px 0 30px;

color:#fff;

}

/* CDC Watermark */

footer::before{

content:"";

position:absolute;

right:-70px;

bottom:-90px;

width:300px;

height:300px;

background:url("../images/logo/logo.png") center/contain no-repeat;

opacity:.05;

pointer-events:none;

}

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

.footer-grid{

display:grid;

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

gap:60px;

margin-bottom:50px;

position:relative;

z-index:2;

}

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

.footer-logo{

display:flex;

align-items:center;

gap:18px;

margin-bottom:22px;

}

.footer-logo img{

width:78px;

height:78px;

background:#fff;

padding:10px;

border-radius:50%;

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

}

.footer-logo h3{

font-size:24px;

font-weight:700;

color:#fff;

margin-bottom:5px;

}

.footer-logo p{

font-size:14px;

color:#DDEBDD;

}

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

.footer-about>p{

color:#DDEBDD;

line-height:1.9;

font-size:15px;

}

/*=====================================
HEADINGS
=====================================*/

.footer-links h4,
.footer-contact h4{

font-size:19px;

font-weight:700;

color:var(--gold);

margin-bottom:22px;

}

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

.footer-links ul{

display:flex;

flex-direction:column;

gap:14px;

}

.footer-links a{

color:#DDEBDD;

transition:.30s;

}

.footer-links a:hover{

color:#fff;

padding-left:6px;

}

/*=====================================
CONTACT
=====================================*/

.footer-contact p{

margin-bottom:14px;

color:#DDEBDD;

line-height:1.8;

font-size:15px;

}

/*=====================================
BOTTOM
=====================================*/

.footer-bottom{

margin-top:45px;

padding-top:25px;

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

text-align:center;

position:relative;

z-index:2;

}

.footer-bottom p{

font-size:14px;

color:#DDEBDD;

letter-spacing:.3px;

}

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

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#EEF8F0;

}

::-webkit-scrollbar-thumb{

background:var(--green);

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:var(--green-dark);

}

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

::selection{

background:var(--green);

color:#fff;

}
/*==================================================
OFFICIAL OGUN STATE ANTHEM CARD
==================================================*/

.official-anthem{

width:100%;

max-width:620px;

margin:70px auto 80px;

padding:35px;

background:#ffffff;

border-left:8px solid #D9B54A;

border-top:4px solid #0B6E3E;

border-radius:18px;

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

text-align:center;

position:relative;

overflow:hidden;

transition:.35s;

}

/* CDC Watermark */

.official-anthem::before{

content:"";

position:absolute;

right:-35px;

bottom:-35px;

width:140px;

height:140px;

background:url("../images/logo/logo.png") center/contain no-repeat;

opacity:.05;

pointer-events:none;

}

/* Small Gold Accent */

.official-anthem::after{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:4px;

background:linear-gradient(90deg,#D9B54A,#0B6E3E,#D9B54A);

}

/* Hover */

.official-anthem:hover{

transform:translateY(-6px);

box-shadow:
0 25px 55px rgba(0,0,0,.14);

}

/* Heading */

.official-anthem h4{

font-size:24px;

font-weight:700;

color:#0B6E3E;

margin-bottom:12px;

letter-spacing:.5px;

}

/* Description */

.official-anthem p{

font-size:16px;

line-height:1.8;

color:#555;

margin-bottom:25px;

}

.official-anthem strong{

color:#0B6E3E;

font-size:18px;

}

/* Audio Player */

.official-anthem audio{

width:100%;

max-width:420px;

margin:auto;

display:block;

border-radius:40px;

filter:

drop-shadow(0 8px 20px rgba(11,110,62,.18));

}

/* Small Official Label */

.official-anthem h4::before{

content:"OFFICIAL";

display:block;

font-size:11px;

font-weight:700;

letter-spacing:3px;

color:#D9B54A;

margin-bottom:10px;

}
/*==================================================
PREMIUM WEBSITE FOOTER
==================================================*/

.site-footer{

background:#0B6E3E;

color:#fff;

margin-top:80px;

padding:70px 0 25px;

position:relative;

overflow:hidden;

border-top:6px solid #D9B54A;

}

/* Watermark */

.site-footer::before{

content:"";

position:absolute;

right:-60px;

bottom:-60px;

width:260px;

height:260px;

background:url("../images/logo/logo.png") center/contain no-repeat;

opacity:.04;

pointer-events:none;

}

/*=========================
TOP GRID
=========================*/

.footer-top{

display:grid;

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

gap:60px;

position:relative;

z-index:2;

}

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

.footer-logo{

width:90px;

margin-bottom:20px;

}

.footer-about h2{

font-size:30px;

font-weight:700;

margin-bottom:18px;

color:#fff;

}

.footer-about p{

font-size:15px;

line-height:1.9;

color:#EAF6EE;

max-width:420px;

}

/*=========================
HEADINGS
=========================*/

.footer-links h3,

.footer-contact h3,

.footer-social h3{

font-size:22px;

color:#D9B54A;

margin-bottom:18px;

position:relative;

}

.footer-links h3::after,

.footer-contact h3::after,

.footer-social h3::after{

content:"";

display:block;

width:45px;

height:3px;

background:#D9B54A;

margin-top:8px;

}

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

.footer-links ul{

list-style:none;

padding:0;

margin:0;

}

.footer-links li{

margin-bottom:14px;

}

.footer-links a{

color:#F5F5F5;

text-decoration:none;

transition:.3s;

}

.footer-links a:hover{

color:#D9B54A;

padding-left:8px;

}

/*=========================
CONTACT
=========================*/

.footer-contact p{

display:flex;

gap:12px;

margin-bottom:18px;

line-height:1.8;

color:#F2F2F2;

}

.footer-contact i{

color:#D9B54A;

margin-top:4px;

min-width:18px;

}

/*=========================
BOTTOM
=========================*/

.footer-bottom{

margin-top:55px;

padding-top:35px;

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

text-align:center;

}

/*=========================
SOCIAL
=========================*/

.social-icons{

display:flex;

justify-content:center;

gap:15px;

margin:20px 0 35px;

}

.social-icons a{

width:48px;

height:48px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

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

color:#fff;

font-size:18px;

transition:.35s;

text-decoration:none;

}

.social-icons a:hover{

background:#D9B54A;

color:#0B6E3E;

transform:translateY(-6px);

}

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

.footer-bottom hr{

border:none;

height:1px;

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

margin:25px 0;

}

.footer-copyright{

font-size:14px;

color:#EAF6EE;

}

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

@media(max-width:991px){

.footer-top{

grid-template-columns:1fr;

text-align:center;

gap:45px;

}

.footer-about p{

margin:auto;

}

.footer-contact p{

justify-content:center;

text-align:left;

}

.footer-links h3::after,

.footer-contact h3::after,

.footer-social h3::after{

margin:10px auto 0;

}

}

@media(max-width:768px){

.site-footer{

padding:55px 0 20px;

}

.footer-logo{

width:75px;

}

.footer-about h2{

font-size:26px;

}

.footer-links h3,

.footer-contact h3,

.footer-social h3{

font-size:20px;

}

.footer-about p,

.footer-contact p,

.footer-links a{

font-size:15px;

}

.social-icons a{

width:44px;

height:44px;

font-size:17px;

}

}
/*==================================================
MOBILE HEADER & NAVIGATION
==================================================*/

@media (max-width: 768px) {

    .navbar{
        height:80px;
        position:relative;
    }

    .logo{
        gap:10px;
    }

    .logo-circle{
        width:58px;
        height:58px;
    }

    .logo-circle img{
        width:42px;
        height:42px;
    }

    .logo-text h2{
        font-size:18px;
        line-height:1.2;
    }

    .logo-text p{
        font-size:11px;
    }

    .menu-toggle{
        display:flex;
        align-items:center;
        justify-content:center;
        width:46px;
        height:46px;
        font-size:24px;
        color:#fff;
        cursor:pointer;
        z-index:1001;
    }

    nav{
        position:absolute;
        top:80px;
        left:0;
        width:100%;
        background:#0B6E3E;
        display:none;
        border-top:1px solid rgba(255,255,255,.15);
        box-shadow:0 12px 25px rgba(0,0,0,.15);
    }

    nav.active{
        display:block;
    }

    nav ul{
        flex-direction:column;
        gap:0;
    }

    nav ul li{
        width:100%;
    }

    nav ul li a{
        display:block;
        padding:16px 25px;
        border-bottom:1px solid rgba(255,255,255,.10);
        color:#D9B54A;
    }

    nav ul li a:hover,
    nav ul li a.active{
        background:#084C2C;
        color:#fff;
    }
}
/*==================================================
FINAL MOBILE HEADER OVERRIDE
==================================================*/
@media (max-width:768px){

    .navbar{
        height:85px;
        display:flex;
        align-items:center;
        justify-content:space-between;
        position:relative;
    }

    .logo{
        display:flex;
        align-items:center;
        gap:12px;
        flex:1;
    }

    .logo-circle{
        width:58px;
        height:58px;
    }

    .logo-circle img{
        width:44px;
        height:44px;
    }

    .logo-text h2{
        font-size:18px;
        line-height:1.1;
        margin:0;
    }

    .logo-text p{
        font-size:11px;
        margin:2px 0 0;
    }

    /* FORCE THE HAMBURGER TO SHOW */
    .menu-toggle{
        display:flex !important;
        align-items:center;
        justify-content:center;
        width:60px;
        height:60px;
        cursor:pointer;
        flex-shrink:0;
        z-index:9999;
    }

    .menu-toggle i{
        font-size:38px !important;
        color:#ffffff !important;
        line-height:1;
    }

    nav{
        position:absolute;
        top:85px;
        left:0;
        width:100%;
        background:#0B6E3E;
        display:none;
    }

    nav.active{
        display:block;
    }

    nav ul{
        display:flex;
        flex-direction:column;
        gap:0;
    }

    nav ul li{
        width:100%;
    }

    nav ul li a{
        display:block;
        padding:16px 20px;
        border-bottom:1px solid rgba(255,255,255,.12);
    }

}
/*==================================================
GREEN GLOWING MOBILE HAMBURGER
==================================================*/

@media (max-width:768px){

    .menu-toggle{

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

        width:70px;
        height:70px;

        background:#0B6E3E;
        border-radius:18px;

        box-shadow:
            0 0 20px rgba(11,110,62,.45),
            0 0 45px rgba(0,255,120,.35);

        cursor:pointer;

        transition:.35s;
    }

    .menu-toggle:hover{

        transform:scale(1.05);

        box-shadow:
            0 0 25px rgba(11,110,62,.60),
            0 0 55px rgba(0,255,120,.45);

    }

    .menu-toggle i{

        font-size:42px !important;
        color:#ffffff !important;

    }

}
/*==================================================
PREMIUM WEBSITE POLISH
==================================================*/


/*------------------------------------
Smooth Page Fade
------------------------------------*/

body{

    animation:pageFade .8s ease;

}

@keyframes pageFade{

from{

opacity:0;

}

to{

opacity:1;

}

}


/*------------------------------------
Beautiful Selection
------------------------------------*/

::selection{

background:#0B6E3E;

color:#fff;

}


/*------------------------------------
Soft Image Hover
------------------------------------*/

.hero-image img,
.about-image img,
.chairman-image img{

transition:.55s ease;

}

.hero-image:hover img,
.about-image:hover img,
.chairman-image:hover img{

transform:scale(1.03);

box-shadow:

0 30px 60px rgba(0,0,0,.16);

}


/*------------------------------------
Floating Images
------------------------------------*/

.hero-image{

animation:floatHero 5s ease-in-out infinite;

}

@keyframes floatHero{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0);

}

}


/*------------------------------------
Buttons
------------------------------------*/

.btn-primary,
.btn-secondary{

transition:.35s;

}

.btn-primary:hover{

transform:

translateY(-5px)

scale(1.02);

box-shadow:

0 22px 45px rgba(11,110,62,.28);

}

.btn-secondary:hover{

transform:

translateY(-5px)

scale(1.02);

}


/*------------------------------------
Read More
------------------------------------*/

.read-more{

transition:.35s;

}

.read-more:hover{

letter-spacing:.5px;

}


/*------------------------------------
Section Titles
------------------------------------*/

.section-title{

position:relative;

}

.section-title::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

width:70px;

height:3px;

background:#D9B54A;

border-radius:20px;

}


/*------------------------------------
Hero Heading
------------------------------------*/

.hero-content h1{

text-shadow:

0 12px 25px rgba(11,110,62,.08);

}


/*------------------------------------
Paragraphs
------------------------------------*/

.hero-content p,
.about-content p,
.chairman-content p{

text-wrap:pretty;

}


/*------------------------------------
Chairman Quote
------------------------------------*/

.quote-icon{

animation:quotePulse 4s infinite;

}

@keyframes quotePulse{

50%{

transform:scale(1.08);

opacity:.65;

}

}


/*------------------------------------
Official Anthem
------------------------------------*/

.official-anthem{

transition:.45s;

}

.official-anthem:hover{

transform:

translateY(-8px);

box-shadow:

0 35px 60px rgba(0,0,0,.15);

}


/*------------------------------------
Footer Logo
------------------------------------*/

.footer-brand:hover .footer-logo{

transform:

rotate(-6deg)

scale(1.05);

transition:.45s;

}


/*------------------------------------
Scrollbar
------------------------------------*/

::-webkit-scrollbar-thumb{

transition:.35s;

}

::-webkit-scrollbar-thumb:hover{

background:#0D8148;

}
/*==================================================
PREMIUM HERO EFFECTS
==================================================*/

/* Elegant moving glow */

.hero::before{

    content:"";

    position:absolute;

    top:-180px;

    left:-180px;

    width:500px;

    height:500px;

    border-radius:50%;

    background:radial-gradient(circle,
    rgba(217,181,74,.12),
    transparent 70%);

    animation:heroGlow 12s linear infinite;

    pointer-events:none;

}

/* Second glow */

.hero::after{

    animation:heroGlow2 14s linear infinite;

}

@keyframes heroGlow{

0%{

transform:translate(0,0);

}

50%{

transform:translate(60px,40px);

}

100%{

transform:translate(0,0);

}

}

@keyframes heroGlow2{

0%{

transform:translate(0,0);

}

50%{

transform:translate(-50px,-40px);

}

100%{

transform:translate(0,0);

}

}

/* Better Heading */

.hero-content h1{

    letter-spacing:-2px;

    text-shadow:

        0 10px 25px rgba(11,110,62,.08);

}

/* Hero Paragraph */

.hero-content p{

    max-width:620px;

}

/* Premium Buttons */

.hero-buttons{

    margin-top:10px;

}

.btn-primary{

    position:relative;

    overflow:hidden;

}

.btn-primary::before{

    content:"";

    position:absolute;

    left:-120%;

    top:0;

    width:100%;

    height:100%;

    background:linear-gradient(

        120deg,

        transparent,

        rgba(255,255,255,.35),

        transparent

    );

    transition:.8s;

}

.btn-primary:hover::before{

    left:120%;

}
/*==================================================
PREMIUM CHAIRMAN SECTION
==================================================*/

/* Elegant background glow */

.chairman{

    position:relative;

}

.chairman::after{

    content:"";

    position:absolute;

    left:-180px;

    bottom:-180px;

    width:450px;

    height:450px;

    border-radius:50%;

    background:radial-gradient(circle,
    rgba(217,181,74,.10),
    transparent 70%);

    pointer-events:none;

}

/* Premium image */

.chairman-image{

    transition:.45s ease;

}

.chairman-image:hover{

    transform:translateY(-8px);

}

.chairman-image img{

    transition:.55s ease;

}

.chairman-image:hover img{

    transform:scale(1.03);

}

/* Gold border animation */

.chairman-image::before{

    transition:.45s;

}

.chairman-image:hover::before{

    transform:translate(10px,10px);

}

/* Chairman intro */

.chairman-intro{

    position:relative;

    padding-left:22px;

}

.chairman-intro::before{

    content:"";

    position:absolute;

    left:0;

    top:6px;

    width:6px;

    height:80%;

    border-radius:20px;

    background:#D9B54A;

}

/* Signature */

.chairman-signature{

    transition:.35s;

}

.chairman-signature:hover{

    padding-left:10px;

}

/* Name */

.chairman-signature h3{

    letter-spacing:.5px;

}

/* Quote icon */

.quote-icon{

    filter:drop-shadow(0 6px 12px rgba(217,181,74,.25));

}

/* Read More */

.chairman .read-more{

    font-size:16px;

}

.chairman .read-more:hover{

    letter-spacing:.5px;

}
/*==================================================
LUXURY ABOUT SECTION
==================================================*/

/* Elegant background glow */

.about-home{

    position:relative;

}

.about-home::before{

    content:"";

    position:absolute;

    right:-180px;

    top:-180px;

    width:420px;

    height:420px;

    border-radius:50%;

    background:radial-gradient(circle,
    rgba(11,110,62,.07),
    transparent 70%);

    pointer-events:none;

}

/* Premium image animation */

.about-image{

    transition:.45s ease;

}

.about-image:hover{

    transform:translateY(-8px);

}

.about-image img{

    transition:.55s ease;

}

.about-image:hover img{

    transform:scale(1.04);

}

/* Decorative frame */

.about-image::before{

    transition:.45s;

}

.about-image:hover::before{

    transform:translate(-10px,-10px);

}

/* Better heading */

.about-content h2{

    position:relative;

}

.about-content h2::after{

    content:"";

    display:block;

    width:90px;

    height:4px;

    margin-top:18px;

    border-radius:30px;

    background:linear-gradient(90deg,#0B6E3E,#D9B54A);

}

/* Paragraph rhythm */

.about-content p{

    text-align:justify;

}

/* Read More */

.about-content .read-more{

    margin-top:12px;

    transition:.35s;

}

.about-content .read-more:hover{

    letter-spacing:.6px;

}
/*==================================================
SOFT FLOATING DECORATIONS
==================================================*/

.hero-watermark{

    animation:floatMap 12s ease-in-out infinite;

}

.chairman-watermark{

    animation:floatMap2 14s ease-in-out infinite;

}

@keyframes floatMap{

    0%{

        transform:translate(-50%,-50%);

    }

    50%{

        transform:translate(-50%,-58%);

    }

    100%{

        transform:translate(-50%,-50%);

    }

}

@keyframes floatMap2{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-15px);

    }

    100%{

        transform:translateY(0);

    }

}
/*==================================================
DIAMOND AREA CDC SIGNATURE STYLE
==================================================*/

/* Uniform section spacing */

.hero,
.about-home,
.chairman{

    position:relative;

    overflow:hidden;

}

/* Elegant divider between sections */

.hero::before,
.about-home::after,
.chairman::before{

    content:"";

    position:absolute;

    left:50%;

    bottom:0;

    transform:translateX(-50%);

    width:180px;

    height:3px;

    border-radius:30px;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(217,181,74,.85),
        transparent
    );

    opacity:.45;

}

/* Consistent heading style */

.hero-content h1,
.about-content h2,
.chairman-content h2{

    letter-spacing:-1.5px;

}

/* Premium paragraph rhythm */

.hero-content p,
.about-content p,
.chairman-content p{

    max-width:680px;

}

/* Elegant image shadow */

.hero-image img,
.about-image img,
.chairman-image img{

    box-shadow:
        0 18px 45px rgba(0,0,0,.08),
        0 5px 18px rgba(11,110,62,.08);

}

/* Gentle section hover */

.hero:hover,
.about-home:hover,
.chairman:hover{

    transition:.4s;

}

/* Premium image border */

.hero-image img,
.about-image img,
.chairman-image img{

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

}

/* Signature gold line */

.section-title{

    color:#0B6E3E;

}

.section-title::before{

    content:"";

    display:inline-block;

    width:28px;

    height:3px;

    margin-right:12px;

    margin-bottom:4px;

    background:#D9B54A;

    border-radius:30px;

}
/*==================================================
MICRO INTERACTIONS
==================================================*/

/* Links */

a{

    transition:.3s ease;

}

/* Images */

img{

    transition:.45s ease;

}

/* Buttons */

button,
.btn-primary,
.btn-secondary{

    transition:.35s ease;

}

/* Cards */

.official-anthem{

    cursor:default;

}

/* Read More */

.read-more{

    font-weight:700;

}

.read-more i{

    transition:.35s;

}

.read-more:hover i{

    transform:translateX(8px);

}

/* Footer icons */

.footer-social a{

    transition:.35s;

}

.footer-social a:hover{

    transform:
        translateY(-4px)
        rotate(8deg);

}
/* =========================================================
   DIAMOND AREA CDC
   CHAIRMAN — EMERALD & GOLD PREMIUM VERSION
   FINAL OVERRIDE
========================================================= */

section.chairman {
    position: relative !important;
    overflow: hidden !important;

    padding: 125px 0 135px !important;

    background:
        radial-gradient(
            circle at 12% 45%,
            rgba(20, 125, 78, .55),
            transparent 32%
        ),
        radial-gradient(
            circle at 90% 15%,
            rgba(217, 181, 74, .08),
            transparent 25%
        ),
        linear-gradient(
            135deg,
            #032b1c 0%,
            #064f32 48%,
            #032d1e 100%
        ) !important;

    color: #ffffff !important;
}


/* =========================================================
   GOLD TOP / BOTTOM ATMOSPHERE
========================================================= */

section.chairman::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #D9B54A 25%,
            #F0D477 50%,
            #D9B54A 75%,
            transparent
        );

    opacity: .9;
}


section.chairman::after {
    content: "";

    position: absolute;

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

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(217,181,74,.65),
            transparent
        );
}


/* =========================================================
   OGUN MAP
========================================================= */

section.chairman .chairman-watermark {

    position: absolute !important;

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

    transform: translateY(-50%) !important;

    width: 470px !important;

    opacity: .065 !important;

    filter:
        brightness(0)
        invert(1) !important;

    pointer-events: none;

    z-index: 1;
}


/* =========================================================
   CONTENT WRAPPER
========================================================= */

section.chairman .container {
    position: relative;

    z-index: 3;
}


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

section.chairman .chairman-grid {

    display: grid !important;

    grid-template-columns:
        minmax(390px, 470px)
        minmax(0, 1fr) !important;

    gap: clamp(55px, 8vw, 105px) !important;

    align-items: center;
}


/* =========================================================
   CHAIRMAN PHOTO
========================================================= */

section.chairman .chairman-image {

    position: relative;

    z-index: 3;

    isolation: isolate;
}


/* Gold offset frame */

section.chairman .chairman-image::before {

    content: "";

    position: absolute;

    left: -18px;
    bottom: -18px;

    width: 100%;
    height: 100%;

    border-radius: 26px;

    background:
        linear-gradient(
            135deg,
            #D9B54A,
            #F0D477
        );

    z-index: -1;

    box-shadow:
        0 15px 40px rgba(0,0,0,.18);
}


/* Green glow behind portrait */

section.chairman .chairman-image::after {

    content: "";

    position: absolute;

    inset: 12% -12% -10% 12%;

    border-radius: 40px;

    background:
        radial-gradient(
            circle,
            rgba(38,180,111,.35),
            transparent 70%
        );

    filter: blur(30px);

    z-index: -2;
}


/* Actual portrait */

section.chairman .chairman-image img {

    width: 100% !important;

    height: 590px !important;

    object-fit: cover;

    object-position: center top;

    border:
        7px solid #ffffff !important;

    border-radius: 24px !important;

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

    transition:
        transform .55s cubic-bezier(.2,.7,.2,1),
        box-shadow .55s ease;
}


section.chairman .chairman-image:hover img {

    transform:
        translateY(-7px)
        scale(1.015);

    box-shadow:
        0 40px 90px rgba(0,0,0,.42);
}


/* =========================================================
   CONTENT
========================================================= */

section.chairman .chairman-content {

    position: relative;

    z-index: 4;

    color: #ffffff !important;
}


/* =========================================================
   SECTION LABEL
========================================================= */

section.chairman .section-title {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 22px;

    padding-bottom: 10px;

    border-bottom:
        2px solid #D9B54A;

    color: #F0D477 !important;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 3px;

    text-transform: uppercase;
}


/* Small gold line before label */

section.chairman .section-title::before {

    content: "";

    width: 32px;

    height: 2px;

    background: #D9B54A;
}


/* =========================================================
   QUOTE ICON
========================================================= */

section.chairman .quote-icon {

    margin-bottom: 10px !important;

    color: #D9B54A !important;

    font-size: 62px !important;

    line-height: .7;

    opacity: 1 !important;

    filter:
        drop-shadow(
            0 8px 15px rgba(0,0,0,.15)
        );
}


/* =========================================================
   MAIN HEADING
========================================================= */

section.chairman .chairman-content h2 {

    margin-bottom: 24px !important;

    max-width: 680px;

    color: #ffffff !important;

    font-size:
        clamp(40px, 4.5vw, 62px) !important;

    line-height: 1.04 !important;

    letter-spacing: -2px;

    font-weight: 800;
}


/* Gold underline */

section.chairman .chairman-content h2::after {

    content: "";

    display: block;

    width: 78px;

    height: 4px;

    margin-top: 22px;

    border-radius: 20px;

    background:
        linear-gradient(
            90deg,
            #D9B54A,
            #F0D477
        );
}


/* =========================================================
   WELCOME QUOTE
========================================================= */

section.chairman .chairman-intro {

    position: relative;

    max-width: 700px;

    margin-bottom: 30px !important;

    padding:
        21px 28px 21px 30px;

    background:
        rgba(255,255,255,.075) !important;

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

    border-left:
        4px solid #D9B54A !important;

    border-radius:
        0 16px 16px 0;

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

    color:
        rgba(255,255,255,.94) !important;

    font-size: 18px !important;

    font-weight: 600;

    line-height: 1.7;
}


/* =========================================================
   BODY TEXT
========================================================= */

section.chairman .chairman-content p {

    max-width: 700px;

    color:
        rgba(255,255,255,.72) !important;

    font-size: 14px !important;

    line-height: 1.9;

    margin-bottom: 19px;
}


/* =========================================================
   SIGNATURE
========================================================= */

section.chairman .chairman-signature {

    margin-top: 35px;

    padding-top: 24px;

    margin-bottom: 28px;

    border-top:
        1px solid
        rgba(255,255,255,.14) !important;
}


section.chairman .chairman-signature::before {

    content: "";

    display: block;

    width: 65px;

    height: 3px;

    margin-top: -25px;

    margin-bottom: 20px;

    border-radius: 20px;

    background: #D9B54A;
}


section.chairman .chairman-signature h3 {

    margin-bottom: 6px;

    color: #F0D477 !important;

    font-size: 22px;

    font-weight: 800;

    letter-spacing: .5px;
}


section.chairman .chairman-signature span {

    color:
        rgba(255,255,255,.58) !important;

    font-size: 12px;

    line-height: 1.8;
}


/* =========================================================
   READ FULL MESSAGE
========================================================= */

section.chairman .read-more {

    display: inline-flex;

    align-items: center;

    gap: 11px;

    padding-bottom: 8px;

    border-bottom:
        1px solid #D9B54A;

    color: #ffffff !important;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: .7px;

    text-transform: uppercase;

    transition:
        color .3s ease,
        gap .3s ease;
}


section.chairman .read-more i {

    color: #D9B54A;

    transition:
        transform .3s ease;
}


section.chairman .read-more:hover {

    gap: 16px;

    color: #F0D477 !important;
}


section.chairman .read-more:hover i {

    transform: translateX(4px);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    section.chairman {

        padding: 95px 0 110px !important;

    }


    section.chairman .chairman-grid {

        grid-template-columns: 1fr !important;

        gap: 65px !important;

        max-width: 720px;

        margin: 0 auto;
    }


    section.chairman .chairman-image {

        width: min(500px, 90%);

        margin: 0 auto;
    }


    section.chairman .chairman-image img {

        height: 570px !important;
    }


    section.chairman .chairman-content {

        max-width: 700px;

        margin: auto;
    }


    section.chairman .chairman-watermark {

        width: 350px !important;

        right: -100px !important;

        top: 55% !important;
    }

}


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

@media (max-width: 600px) {

    section.chairman {

        padding: 75px 0 90px !important;
    }


    section.chairman .chairman-grid {

        gap: 48px !important;
    }


    section.chairman .chairman-image {

        width: 88%;
    }


    section.chairman .chairman-image img {

        height: 450px !important;

        border-width: 5px !important;

        border-radius: 20px !important;
    }


    section.chairman .chairman-image::before {

        left: -11px;

        bottom: -11px;

        border-radius: 20px;
    }


    section.chairman .section-title {

        font-size: 8px;

        letter-spacing: 2.2px;
    }


    section.chairman .quote-icon {

        font-size: 48px !important;
    }


    section.chairman .chairman-content h2 {

        font-size: 37px !important;

        letter-spacing: -1px;
    }


    section.chairman .chairman-intro {

        padding: 17px 18px 17px 20px;

        font-size: 15px !important;

        line-height: 1.7;
    }


    section.chairman .chairman-content p {

        font-size: 13px !important;

        line-height: 1.85;
    }


    section.chairman .chairman-signature h3 {

        font-size: 18px;
    }


    section.chairman .chairman-watermark {

        width: 280px !important;

        right: -120px !important;

        top: 43% !important;

        opacity: .04 !important;
    }

}
/* =========================================================
   DIAMOND AREA CDC
   FINAL SECTION DIVIDERS
   TRUE SECTION-TO-SECTION POSITIONING
========================================================= */


/* ---------------------------------------------------------
   HERO → WHO WE ARE
--------------------------------------------------------- */

.hero::after {

    content: "" !important;

    position: absolute !important;

    left: 50% !important;
    bottom: -1px !important;

    transform: translateX(-50%) !important;

    width: 320px !important;
    height: 24px !important;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(217,181,74,.12) 10%,
            #D9B54A 30%,
            #F4D978 50%,
            #D9B54A 70%,
            rgba(217,181,74,.12) 90%,
            transparent 100%
        ) !important;

    clip-path: polygon(
        0 44%,
        42% 44%,
        47% 30%,
        50% 0,
        53% 30%,
        58% 44%,
        100% 44%,
        100% 56%,
        58% 56%,
        53% 70%,
        50% 100%,
        47% 70%,
        42% 56%,
        0 56%
    ) !important;

    border-radius: 30px;

    filter:
        drop-shadow(
            0 0 7px
            rgba(217,181,74,.55)
        );

    z-index: 50 !important;

    pointer-events: none;

    animation: sectionDividerGlow 4s ease-in-out infinite;
}


/* =========================================================
   HERO CENTER DIAMOND
========================================================= */

.hero::before {

    content: "" !important;

    position: absolute !important;

    left: 50% !important;
    bottom: 0 !important;

    top: auto !important;

    transform:
        translate(-50%, 50%)
        rotate(45deg) !important;

    width: 12px !important;
    height: 12px !important;

    background:
        linear-gradient(
            135deg,
            #FFF0A8,
            #D9B54A
        ) !important;

    border:
        2px solid rgba(255,255,255,.85);

    border-radius: 2px;

    box-shadow:
        0 0 0 4px rgba(217,181,74,.08),
        0 0 18px rgba(217,181,74,.75);

    z-index: 60 !important;

    pointer-events: none;

    animation: sectionDiamondPulse 4s ease-in-out infinite;
}


/* =========================================================
   WHO WE ARE → CHAIRMAN
========================================================= */

.about-home::after {

    content: "" !important;

    position: absolute !important;

    left: 50% !important;
    bottom: -1px !important;

    right: auto !important;

    transform: translateX(-50%) !important;

    width: 320px !important;
    height: 24px !important;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(217,181,74,.12) 10%,
            #D9B54A 30%,
            #F4D978 50%,
            #D9B54A 70%,
            rgba(217,181,74,.12) 90%,
            transparent 100%
        ) !important;

    clip-path: polygon(
        0 44%,
        42% 44%,
        47% 30%,
        50% 0,
        53% 30%,
        58% 44%,
        100% 44%,
        100% 56%,
        58% 56%,
        53% 70%,
        50% 100%,
        47% 70%,
        42% 56%,
        0 56%
    ) !important;

    z-index: 50 !important;

    pointer-events: none;

    animation: sectionDividerGlow 4s ease-in-out infinite;
}


/* =========================================================
   ABOUT CENTER DIAMOND
========================================================= */

.about-home::before {

    content: "" !important;

    position: absolute !important;

    left: 50% !important;
    bottom: 0 !important;

    transform:
        translate(-50%, 50%)
        rotate(45deg) !important;

    width: 12px !important;
    height: 12px !important;

    background:
        linear-gradient(
            135deg,
            #FFF0A8,
            #D9B54A
        ) !important;

    border:
        2px solid rgba(255,255,255,.85);

    border-radius: 2px;

    box-shadow:
        0 0 0 4px rgba(217,181,74,.08),
        0 0 18px rgba(217,181,74,.75);

    z-index: 60 !important;

    pointer-events: none;

    animation: sectionDiamondPulse 4s ease-in-out infinite;
}


/* =========================================================
   CHAIRMAN → ANTHEM
========================================================= */

.chairman::after {

    content: "" !important;

    position: absolute !important;

    left: 50% !important;
    bottom: -1px !important;

    right: auto !important;
    top: auto !important;

    transform: translateX(-50%) !important;

    width: 320px !important;
    height: 24px !important;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(217,181,74,.15) 10%,
            #D9B54A 30%,
            #F4D978 50%,
            #D9B54A 70%,
            rgba(217,181,74,.15) 90%,
            transparent 100%
        ) !important;

    clip-path: polygon(
        0 44%,
        42% 44%,
        47% 30%,
        50% 0,
        53% 30%,
        58% 44%,
        100% 44%,
        100% 56%,
        58% 56%,
        53% 70%,
        50% 100%,
        47% 70%,
        42% 56%,
        0 56%
    ) !important;

    z-index: 50 !important;

    pointer-events: none;

    animation: sectionDividerGlow 4s ease-in-out infinite;
}


/* =========================================================
   CHAIRMAN CENTER DIAMOND
========================================================= */

.chairman::before {

    content: "" !important;

    position: absolute !important;

    left: 50% !important;
    bottom: 0 !important;

    top: auto !important;

    transform:
        translate(-50%, 50%)
        rotate(45deg) !important;

    width: 12px !important;
    height: 12px !important;

    background:
        linear-gradient(
            135deg,
            #FFF0A8,
            #D9B54A
        ) !important;

    border:
        2px solid rgba(255,255,255,.85);

    border-radius: 2px;

    box-shadow:
        0 0 0 4px rgba(217,181,74,.10),
        0 0 20px rgba(217,181,74,.85);

    z-index: 60 !important;

    pointer-events: none;

    animation: sectionDiamondPulse 4s ease-in-out infinite;
}


/* =========================================================
   GLOW
========================================================= */

@keyframes sectionDividerGlow {

    0%,
    100% {

        opacity: .72;

        filter:
            drop-shadow(
                0 0 4px
                rgba(217,181,74,.30)
            );
    }

    50% {

        opacity: 1;

        filter:
            drop-shadow(
                0 0 12px
                rgba(217,181,74,.75)
            );
    }

}


/* =========================================================
   DIAMOND PULSE
========================================================= */

@keyframes sectionDiamondPulse {

    0%,
    100% {

        box-shadow:
            0 0 0 4px
            rgba(217,181,74,.08),

            0 0 12px
            rgba(217,181,74,.55);
    }

    50% {

        box-shadow:
            0 0 0 6px
            rgba(217,181,74,.12),

            0 0 22px
            rgba(217,181,74,.95);
    }

}


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

@media (max-width: 600px) {

    .hero::after,
    .about-home::after,
    .chairman::after {

        width: 210px !important;

        height: 20px !important;
    }


    .hero::before,
    .about-home::before,
    .chairman::before {

        width: 9px !important;

        height: 9px !important;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .hero::after,
    .about-home::after,
    .chairman::after,
    .hero::before,
    .about-home::before,
    .chairman::before {

        animation: none !important;
    }

}
/* =========================================================
   HERO — ABOVE THE FOLD FIX
   Keep the entire hero visible on desktop
========================================================= */

.hero {
    padding: 52px 0 78px !important;
}


/* Keep the hero content compact */

.hero-content {
    max-width: 620px !important;
}


.hero-subtitle {
    font-size: 11px !important;
    padding-bottom: 8px !important;
    margin-bottom: 15px !important;
}


/* Smaller heading so the buttons fit */

.hero-content h1 {
    font-size: 58px !important;
    line-height: 1.02 !important;
    letter-spacing: -1.8px !important;
    margin-bottom: 20px !important;
}


/* Tighter paragraph */

.hero-content p {
    max-width: 590px !important;

    font-size: 15px !important;

    line-height: 1.7 !important;

    margin-bottom: 24px !important;
}


/* Buttons immediately follow the text */

.hero-buttons {
    margin-top: 0 !important;

    gap: 14px !important;
}


/* Slightly more compact buttons */

.hero-buttons a {
    min-height: 46px;

    display: inline-flex;

    align-items: center;

    justify-content: center;
}


/* Hero image */

.hero-image img {
    height: 500px !important;

    max-width: 570px !important;
}


/* =========================================================
   DESKTOP — KEEP EVERYTHING IN FIRST VIEW
========================================================= */

@media (min-width: 1200px) {

    .hero {
        padding-top: 48px !important;
        padding-bottom: 70px !important;
    }

    .hero-content h1 {
        font-size: 58px !important;
    }

    .hero-content p {
        font-size: 15px !important;
        line-height: 1.68 !important;
    }

    .hero-image img {
        height: 500px !important;
    }

}


/* =========================================================
   LAPTOP
========================================================= */

@media (min-width: 992px) and (max-width: 1199px) {

    .hero {
        padding-top: 45px !important;
        padding-bottom: 65px !important;
    }

    .hero-content h1 {
        font-size: 52px !important;
    }

    .hero-content p {
        font-size: 14px !important;
        line-height: 1.7 !important;
    }

    .hero-image img {
        height: 460px !important;
    }

}


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

@media (max-width: 767px) {

    .hero {
        padding-top: 45px !important;
        padding-bottom: 65px !important;
    }

    .hero-content h1 {
        font-size: 42px !important;
        line-height: 1.05 !important;
    }

    .hero-content p {
        font-size: 14px !important;
        line-height: 1.75 !important;
        margin-bottom: 22px !important;
    }

    .hero-image img {
        height: 390px !important;
    }

}