/* ==========================================================
MCG GYPSUM BOARD FACTORY PLC
MAIN STYLESHEET
========================================================== */

/* Google Font */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/* RESET */

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

html{
    scroll-behavior:smooth;
}

body{

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

    background:#ffffff;

    color:#222;

    overflow-x:hidden;

    line-height:1.6;

    opacity:0;

    animation:pageFade .8s ease forwards;

}

img{

    width:100%;

    display:block;

}

a{

    text-decoration:none;

    color:inherit;

}

ul{

    list-style:none;

}

button{

    border:none;

    background:none;

    cursor:pointer;

    font-family:inherit;

}

.container{

    width:min(1320px,92%);

    margin:auto;

}

/* COLORS */

:root{

--blue:#0B4E97;

--orange:#F58220;

--dark:#1C1C1C;

--light:#F8F8F8;

--gray:#6B6B6B;

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

--radius:18px;

}

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

header{

position:fixed;

top:0;

left:0;

width:100%;

background:#fff;

z-index:9999;

box-shadow:0 8px 30px rgba(0,0,0,.05);

transition:.4s;

}

.navbar{

height:110px;

display:flex;

align-items:center;

justify-content:space-between;

}

.nav-left{

display:flex;

align-items:center;

}

.logo{

display:flex;

align-items:center;

gap:15px;

}

.logo img{

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

}

.logo-text h2{

font-size:22px;

font-weight:700;

color:var(--blue);

line-height:1;

margin-bottom:6px;

}

.logo-text h3{

font-size:15px;

font-weight:700;

line-height:1.35;

color:#222;

text-transform:uppercase;

}

.nav-center ul{

display:flex;

gap:42px;

}

.nav-center a{

font-size:15px;

font-weight:600;

position:relative;

transition:.3s;

}

.nav-center a::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

width:0;

height:3px;

background:var(--orange);

transition:.35s;

}

.nav-center a:hover::after{

width:100%;

}

.nav-right{

display:flex;

align-items:center;

gap:20px;

}

.phone-btn{

background:var(--orange);

color:#fff;

padding:14px 28px;

border-radius:50px;

display:flex;

align-items:center;

gap:12px;

font-weight:600;

transition:.35s;

box-shadow:0 12px 30px rgba(245,130,32,.35);

}

.phone-btn:hover{

transform:translateY(-4px);

box-shadow:0 18px 40px rgba(245,130,32,.45);

}

.phone-btn i{

font-size:18px;

}

#menu-btn{

display:none;

width:45px;

height:45px;

cursor:pointer;

position:relative;

}

#menu-btn span{

position:absolute;

width:100%;

height:4px;

background:var(--blue);

left:0;

transition:.4s;

border-radius:50px;

}

#menu-btn.active span:nth-child(1){

transform:rotate(45deg);

top:20px;

}

#menu-btn.active span:nth-child(2){

opacity:0;

}

#menu-btn.active span:nth-child(3){

transform:rotate(-45deg);

top:20px;

}

#menu-btn span:nth-child(1){

top:8px;

}

#menu-btn span:nth-child(2){

top:20px;

}

#menu-btn span:nth-child(3){

top:32px;

}

.hero{

position:relative;

padding-top:150px;

padding-bottom:90px;

background:#ffffff;

overflow:hidden;

}

.hero-wrapper{

display:grid;

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

align-items:center;

gap:70px;

}

.hero-wrapper{

display:grid;

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

grid-template-areas:"left right";

align-items:center;

gap:70px;

}

.hero-left{

grid-area:left;

}

.hero-right{

grid-area:right;

}

.hero-small-title{

display:inline-block;

font-size:18px;

color:var(--orange);

font-weight:600;

margin-bottom:20px;

letter-spacing:1px;

text-transform:uppercase;

}

.hero-left h1{

font-size:74px;

font-weight:800;

line-height:1.05;

color:#202020;

margin-bottom:22px;

text-transform:uppercase;

}

.hero-left h1 span{

color:var(--blue);

display:block;

margin-bottom:8px;

}

.hero-line{

width:90px;

height:6px;

background:var(--orange);

border-radius:50px;

margin-bottom:30px;

}

/* Mobile Hero Image */

.hero-mobile-image{
display:none;
}

.hero-left p{

font-size:19px;

color:#666;

max-width:600px;

margin-bottom:40px;

}

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

.hero-right{

display:flex;

justify-content:center;

align-items:center;

position:relative;

}

.hero-image-box{

position:relative;

max-width:640px;

margin-left:auto;

}

.hero-image-box img{

width:100%;

display:block;

animation:floatImage 6s ease-in-out infinite;

filter:drop-shadow(0 35px 55px rgba(0,0,0,.18));

}

.image-glow{

position:absolute;

width:420px;

height:420px;

background:rgba(245,130,32,.18);

filter:blur(80px);

border-radius:50%;

top:50%;

left:50%;

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

z-index:1;

}

.hero-image-shadow{

position:absolute;

width:480px;

height:480px;

background:#0B4E97;

opacity:.08;

border-radius:50%;

top:50%;

left:50%;

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

filter:blur(20px);

}

.hero-orange-accent{

position:absolute;

width:180px;

height:180px;

background:var(--orange);

border-radius:50%;

top:-30px;

right:-30px;

opacity:.15;

}

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

.hero-shape{

position:absolute;

z-index:0;

}

.shape1{

width:520px;

height:520px;

background:#0B4E97;

border-radius:50%;

top:-250px;

right:-180px;

opacity:.05;

}

.shape2{

width:260px;

height:260px;

background:var(--orange);

border-radius:50%;

bottom:-120px;

left:-120px;

opacity:.12;

}

.hero-circle{

position:absolute;

border-radius:50%;

background:var(--orange);

opacity:.08;

}

.circle1{

width:40px;

height:40px;

left:12%;

top:30%;

}

.circle2{

width:20px;

height:20px;

right:10%;

bottom:20%;

}

.hero-decoration{

position:absolute;

border-radius:50%;

}

.decoration-one{

width:22px;

height:22px;

background:var(--orange);

left:48%;

top:5%;

}

.decoration-two{

width:12px;

height:12px;

background:#0B4E97;

right:18%;

top:35%;

}

.decoration-three{

width:26px;

height:26px;

background:#0B4E97;

left:8%;

bottom:18%;

opacity:.12;

}

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

.hero-buttons{

display:flex;

gap:20px;

margin-top:20px;

}

.btn{

display:inline-flex;

align-items:center;

justify-content:center;

gap:12px;

padding:17px 34px;

font-weight:600;

border-radius:50px;

transition:.35s;

position:relative;

overflow:hidden;

}

.btn i{

transition:.35s;

}

.btn:hover i{

transform:translateX(5px);

}

.btn-orange{

background:var(--orange);

color:#fff;

box-shadow:0 15px 35px rgba(245,130,32,.35);

}

.btn-orange:hover{

transform:translateY(-5px);

box-shadow:0 20px 40px rgba(245,130,32,.45);

}

.btn-outline{

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

color:var(--blue);

}

.btn-outline:hover{

background:var(--blue);

color:#fff;

transform:translateY(-5px);

}

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

.contact-bar{

margin-top:40px;

background:#0B4E97;

padding:45px 0;

}

.contact-grid{

display:grid;

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

gap:30px;

}

.contact-item{

display:flex;

gap:18px;

align-items:flex-start;

color:#fff;

}

.contact-item .icon{

width:60px;

height:60px;

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

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

font-size:22px;

transition:.35s;

}

.contact-item:hover .icon{

background:var(--orange);

transform:rotate(12deg) scale(1.08);

}

.contact-item h4{

margin-bottom:10px;

font-size:18px;

}

.contact-item a{

opacity:.95;

transition:.3s;

}

.contact-item a:hover{

color:#FFD49B;

}



/*=====================================================
BACK TO TOP
=====================================================*/

#backTop{

position:fixed;

right:30px;

bottom:30px;

width:55px;

height:55px;

border-radius:50%;

background:var(--orange);

color:#fff;

display:flex;

align-items:center;

justify-content:center;

font-size:20px;

cursor:pointer;

opacity:0;

visibility:hidden;

transition:.35s;

box-shadow:0 15px 30px rgba(245,130,32,.35);

z-index:999;

}

#backTop.show{

opacity:1;

visibility:visible;

}

#backTop:hover{

transform:translateY(-6px);

}

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

@keyframes floatImage{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-18px);

}

100%{

transform:translateY(0px);

}

}

@keyframes spin {

    @keyframes logoFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-10px);

}

100%{

transform:translateY(0);

}

}

    100% {

        transform: rotate(360deg);

    }

}
@keyframes pageFade{

from{

opacity:0;

transform:translateY(10px);

}

to{

opacity:1;

transform:translateY(0);

}

}

/*=====================================================
PRODUCTS SECTION
=====================================================*/

.products-section{
    padding:130px 0;
    background:#fff;
}

.products-wrapper{
    display:grid;
    grid-template-columns:520px 1fr;
    gap:70px;
    align-items:center;
}

.products-image{

    position:relative;

}

.products-content{
    display:flex;
    flex-direction:column;
}

.product-item{
    display:flex;
    gap:20px;
    padding:22px 0;
    border-bottom:1px solid rgba(0,0,0,.08);
    transition:.35s;
}

.product-item:hover{
    padding-left:15px;
}

.product-item span{
    width:48px;
    height:48px;
    background:var(--orange);
    color:#fff;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    font-weight:700;
    flex-shrink:0;
}

.product-item h3{
    color:var(--blue);
    font-size:22px;
    margin-bottom:6px;
}

.product-item p{
    color:#666;
    font-size:15px;
    line-height:1.7;
}

.products-content .btn{
    margin-top:35px;
    width:fit-content;
}

/*=====================================================
MISSION
=====================================================*/

.mission-section{

padding:140px 0;

background:white;

position:relative;

overflow:hidden;

}

.mission-grid{

display:grid;

grid-template-columns:1fr 500px;

gap:100px;

align-items:center;

position:relative;

}

.mission-box,
.vision-box{

display:flex;

align-items:flex-start;

gap:22px;

padding:35px;

margin-bottom:35px;

background:#fff;

border-radius:22px;

box-shadow:0 20px 45px rgba(0,0,0,.08);

transition:.4s;

border-left:6px solid transparent;

}

.mission-box:hover,
.vision-box:hover{

transform:translateX(12px);

border-left:6px solid var(--orange);

box-shadow:0 30px 60px rgba(0,0,0,.14);

}

.mission-box i,
.vision-box i{

width:75px;

height:75px;

background:linear-gradient(135deg,var(--orange),#ff9b3d);

color:#fff;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

font-size:28px;

flex-shrink:0;

box-shadow:0 15px 35px rgba(245,130,32,.35);

}

.mission-image{

position:relative;

overflow:hidden;

border-radius:30px;

box-shadow:0 30px 70px rgba(0,0,0,.18);

}

.mission-image img{

width:100%;

height:100%;

object-fit:cover;

transition:.7s;

}

.mission-image:hover img{

transform:scale(1.06);

}

/*=====================================================
VALUES
=====================================================*/

.values-section{

padding:120px 0;

background:#fff;

}

.values-wrapper{

display:grid;

grid-template-columns:500px 1fr;

gap:80px;

align-items:center;

}

.values-image{

overflow:hidden;

border-radius:25px;

box-shadow:var(--shadow);

}

.values-image img{

transition:.6s;

}

.values-image:hover img{

transform:scale(1.08);

}

.values-content span{

color:var(--orange);

font-weight:700;

letter-spacing:2px;

}

.values-content h2{

font-size:45px;

margin:15px 0;

color:var(--blue);

}

.values-content ul{

margin-top:35px;

}

.values-content li{

display:flex;

align-items:center;

gap:16px;

margin-bottom:24px;

font-size:19px;

font-weight:600;

transition:.3s;

}
.values-content li:hover{

color:var(--blue);

transform:translateX(10px);

}

.values-content i{

color:var(--orange);

font-size:22px;

}

/*=====================================================
SCROLL REVEAL
=====================================================*/

.reveal{
    opacity:1;
    transform:none;
}

.reveal.active{
    opacity:1;
    transform:none;
}

.hero::after{

content:"";

position:absolute;

width:2px;

height:420px;

background:var(--orange);

top:120px;

left:52%;

transform:rotate(28deg);

opacity:.8;

}

.hero::before{

content:"";

position:absolute;

right:-120px;

top:0;

width:480px;

height:100%;

background:linear-gradient(180deg,#0B4E97,#08396f);

clip-path:polygon(35% 0%,100% 0%,100% 100%,0% 100%);

z-index:0;

}
/*=====================================================
SECTION TITLES
=====================================================*/

.section-title{

text-align:center;

margin-bottom:70px;

}

.section-title span{

color:var(--orange);

font-size:15px;

font-weight:700;

letter-spacing:3px;

text-transform:uppercase;

}

.section-title h2{

font-size:52px;

font-weight:800;

color:var(--blue);

line-height:1.2;

margin:15px 0;

}

.title-line{

width:80px;

height:5px;

background:var(--orange);

margin:auto;

border-radius:20px;

}
/*=====================================================
CTA
=====================================================*/

.cta-section{

padding:120px 20px;

background:linear-gradient(135deg,#0B4E97,#08396f);

text-align:center;

color:#fff;

}

.cta-section h2{

font-size:48px;

margin-bottom:20px;

}

.cta-section p{

font-size:19px;

opacity:.92;

margin-bottom:40px;

max-width:700px;

margin-left:auto;

margin-right:auto;

}

.white{

background:#fff;

color:var(--blue);

font-weight:700;

}

.white:hover{

transform:translateY(-5px);

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

.footer{

background:#101010;

color:#fff;

padding:90px 0 30px;

position:relative;

overflow:hidden;

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

.footer{

background:#111;

color:#fff;

padding:90px 0 30px;

position:relative;

overflow:hidden;

}

.footer .container{

max-width:1320px;

margin:auto;

}
.footer-grid{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:40px;
    flex-wrap:wrap;
}

.footer-column{
    flex:1;
    min-width:220px;
}

.footer-column h3{

margin-bottom:22px;

font-size:22px;

color:#fff;

}

.footer-logo{

display:flex;

align-items:center;

gap:15px;

margin-bottom:25px;

}

.footer-logo img{

width:70px;

height:auto;

object-fit:contain;

}

.footer-about{

opacity:.85;

line-height:1.8;

margin-bottom:25px;

max-width:320px;

}

.footer-column{

min-width:0;

}

.footer-social{

display:flex;

gap:15px;

}

.footer-social a{

width:45px;

height:45px;

border-radius:50%;

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

display:flex;

align-items:center;

justify-content:center;

transition:.35s;

}

.footer-social a:hover{

background:var(--orange);

transform:translateY(-5px);

}

.footer-column ul{

padding:0;

margin:0;

}

.footer-column ul li{

margin-bottom:16px;

}

.footer-column ul li a:hover{

color:var(--orange);

}

.footer-contact li{

display:flex;

align-items:flex-start;

gap:15px;

margin-bottom:18px;

line-height:1.7;

}

.footer-bottom{

margin-top:60px;

padding-top:25px;

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

text-align:center;

opacity:.8;

}

/* Decorative background shapes */

.products-section::before{

content:"";

position:absolute;

width:320px;

height:320px;

background:rgba(11,78,151,.05);

border-radius:50%;

top:-100px;

left:-120px;

}

.mission-section::after{

content:"";

position:absolute;

width:280px;

height:280px;

background:rgba(245,130,32,.08);

border-radius:50%;

bottom:-120px;

right:-120px;

}

.values-section::before{

content:"";

position:absolute;

width:220px;

height:220px;

background:rgba(11,78,151,.04);

border-radius:50%;

top:50px;

right:-100px;

}
.footer-grid{
display:flex !important;
justify-content:space-between !important;
align-items:flex-start !important;
gap:40px !important;
}

.footer-column{
flex:1;
}

/*=====================================================
PRODUCT IMAGE GALLERY
=====================================================*/

.product-image-grid{

    display:grid;

    grid-template-columns:170px 1fr;

    grid-template-rows:1fr 1fr;

    gap:18px;

    height:520px;

}

.large-image{

    grid-column:2;

    grid-row:1 / span 2;

    overflow:hidden;

    border-radius:26px;

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

}

.small-image{

    overflow:hidden;

    border-radius:22px;

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

}

.large-image img,

.small-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.7s;

}

.large-image:hover img,

.small-image:hover img{

    transform:scale(1.08);

}

.large-image{

    position:relative;

}

.large-image::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(to top,
    rgba(0,0,0,.12),
    transparent);

}

.small-image{

    transition:.4s;

}

.small-image:hover{

    transform:translateY(-8px);

}

.large-image:hover{

    transform:translateY(-5px);

    transition:.4s;

}

/*=====================================================
PRODUCT GALLERY
=====================================================*/

.products-gallery{

max-height:0;

overflow:hidden;

opacity:0;

transform:translateY(50px);

transition:
max-height .8s ease,
opacity .6s ease,
transform .6s ease;

background:#f8fafc;

}

.products-gallery.active{

max-height:5000px;

opacity:1;

transform:translateY(0);

padding:120px 0;

}

.products-cards{

display:grid;

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

gap:30px;

margin-top:60px;

}

.product-card{

background:#fff;

border-radius:22px;

overflow:hidden;

box-shadow:0 20px 50px rgba(0,0,0,.08);

transition:.4s;

cursor:pointer;

}

.product-card:hover{

transform:translateY(-12px);

box-shadow:0 30px 70px rgba(0,0,0,.15);

}

.product-card img{

width:100%;

height:240px;

object-fit:cover;

transition:.6s;

}

.product-card:hover img{

transform:scale(1.08);

}

.product-card h3{

font-size:24px;

color:var(--blue);

padding:25px 25px 10px;

}

.product-card p{

padding:0 25px 30px;

color:#666;

line-height:1.7;

}

.product-card::after{

content:"";

display:block;

height:5px;

background:var(--orange);

transform:scaleX(0);

transition:.4s;

transform-origin:left;

}

.product-card:hover::after{

transform:scaleX(1);

}

@keyframes pageFade{

    from{

        opacity:0;

        transform:translateY(12px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

body.menu-open{

overflow:hidden;

}

/* ==========================================
HIDE MOBILE MENU ON DESKTOP
========================================== */

#mobile-menu{
    display:none;
}

#menu-overlay{
    display:none;
}