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

.hero{

    height:90vh;

    width:100%;

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:0 8%;

    animation:heroSlider 15s infinite;

    position:relative;

    overflow:hidden;

    isolation:isolate;

}

/* Premium Golden Glow */

.hero::before{

    content:"";

    position:absolute;

    width:650px;

    height:650px;

    background:
    radial-gradient(circle,
    rgba(201,162,39,.14),
    transparent 70%);

    top:-220px;

    right:-180px;

    animation:heroGlow 10s ease-in-out infinite;

    pointer-events:none;

    z-index:0;

}

/* Luxury Shine */

.hero::after{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
    115deg,
    transparent 35%,
    rgba(255,255,255,.05) 50%,
    transparent 65%);

    transform:translateX(-120%);

    animation:heroShine 8s linear infinite;

    pointer-events:none;

    z-index:1;

}

/* Hero Content */

.hero-content{

    max-width:900px;

    color:var(--white);

    z-index:2;

    animation:heroFade 1.2s ease;

}

/* Top Tagline */

.hero-content .tagline{

    margin-top:-30px;

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

    font-size:17px;

    font-weight:600;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:25px;

    color:var(--gold);

    animation:fadeDown .8s ease;

}

/* Main Heading */

.hero-content h1{

    font-family:'Cormorant Garamond',serif;

    font-size:64px;

    font-weight:700;

    line-height:1.15;

    letter-spacing:.5px;

    margin-bottom:20px;

    color:var(--white);

    animation:fadeUp 1.2s ease;

    text-shadow:
    0 5px 20px rgba(0,0,0,.30);

}

/* Description */

.hero-content .description{

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

    font-size:20px;

    font-weight:400;

    line-height:1.7;

    margin-bottom:0;

    color:var(--text-light);

    animation:fadeUp 1.6s ease;

}

/* Buttons */

.hero-buttons{

    margin-top:25px;

    display:flex;

    justify-content:center;

    gap:20px;

    animation:fadeUp 2s ease;

}

/* Premium Button Hover */

.hero-buttons .btn:hover{

    transform:translateY(-5px);

}

/* =====================
BACKGROUND IMAGE SLIDER
===================== */

@keyframes heroSlider{

0%{

background-image:
linear-gradient(
rgba(11,43,38,.65),
rgba(11,43,38,.65)),
url("../images/spices-banner.jpeg");

}

33%{

background-image:
linear-gradient(
rgba(11,43,38,.65),
rgba(11,43,38,.65)),
url("../images/spices-banner2.jpeg");

}

66%{

background-image:
linear-gradient(
rgba(11,43,38,.65),
rgba(11,43,38,.65)),
url("../images/spices-banner3.jpeg");

}

100%{

background-image:
linear-gradient(
rgba(11,43,38,.65),
rgba(11,43,38,.65)),
url("../images/spices-banner.jpeg");

}

}

/* =====================
Premium Animations
===================== */

@keyframes heroGlow{

    0%{

        transform:translate(0,0) scale(1);

    }

    50%{

        transform:translate(-50px,35px) scale(1.15);

    }

    100%{

        transform:translate(0,0) scale(1);

    }

}

@keyframes heroShine{

    from{

        transform:translateX(-120%);

    }

    to{

        transform:translateX(120%);

    }

}

@keyframes heroFade{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

@keyframes fadeDown{

    from{

        opacity:0;

        transform:translateY(-35px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(45px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/*====================================*
ABOUT SECTION PREMIUM - PART 1
*====================================*/

.about{
    padding:90px 8%;
    background:#0B1F1A;
    position:relative;
    overflow:hidden;
}

/* Premium Background Glow */

.about::before{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    top:-220px;
    right:-220px;
    border-radius:50%;
    background:radial-gradient(circle,
        rgba(201,162,39,.12),
        transparent 70%);
    pointer-events:none;
}

.about::after{
    content:"";
    position:absolute;
    width:400px;
    height:400px;
    left:-180px;
    bottom:-180px;
    border-radius:50%;
    background:radial-gradient(circle,
        rgba(201,162,39,.08),
        transparent 70%);
    pointer-events:none;
}

/*====================================*
SECTION TITLE
*====================================*/

.about-section-title{
    text-align:center;
    margin-bottom:70px;
    position:relative;
    z-index:2;
}

.section-tag{
    display:inline-block;
    padding:8px 20px;
    border:1px solid rgba(201,162,39,.35);
    border-radius:50px;
    color:var(--gold);
    font-size:13px;
    font-weight:600;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:18px;
    background:rgba(255,255,255,.03);
    backdrop-filter:blur(10px);
}

.about-section-title h2{
    font-family:'Cormorant Garamond',serif;
    font-size:58px;
    color:var(--gold);
    font-weight:700;
    margin-bottom:15px;
    line-height:1.2;
}

.about-section-title p{
    max-width:700px;
    margin:auto;
    color:#d9d9d9;
    font-size:18px;
    line-height:1.8;
}

.about-section-title::after{
    content:"";
    width:90px;
    height:3px;
    background:linear-gradient(
        to right,
        transparent,
        var(--gold),
        transparent
    );
    display:block;
    margin:28px auto 0;
}

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

.about-container{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center;
    position:relative;
    z-index:2;
}

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

.about-image{
    position:relative;
}

.about-image img{
    width:100%;
    display:block;
    border-radius:24px;
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 30px 70px rgba(0,0,0,.45);
    transition:.6s;
}

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

/*====================================*
FLOATING CARD
*====================================*/

.experience-card{
    position:absolute;
    right:-25px;
    bottom:35px;
    background:rgba(18,55,42,.96);
    backdrop-filter:blur(20px);
    padding:22px 30px;
    border-left:4px solid var(--gold);
    border-radius:18px;
    box-shadow:0 18px 45px rgba(0,0,0,.35);
}

.experience-card h3{
    font-family:'Cormorant Garamond',serif;
    font-size:34px;
    color:var(--gold);
    margin-bottom:4px;
}

.experience-card span{
    color:#ffffff;
    font-size:15px;
    letter-spacing:.5px;
}

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

@media (max-width:991px){

    .about{
        padding:70px 6%;
    }

    .about-container{
        grid-template-columns:1fr;
        gap:50px;
    }

    .about-section-title h2{
        font-size:44px;
    }

    .experience-card{
        right:20px;
        bottom:20px;
    }
}
/*====================================*
ABOUT CONTENT - PART 2
*====================================*/

.about-text{
    display:flex;
    flex-direction:column;
    justify-content:center;
}


.about-subtitle{
    display:inline-flex;
    align-items:center;
    width:fit-content;

    padding:8px 18px;
    margin-bottom:18px;

    background:rgba(201,162,39,.12);
    border:1px solid rgba(201,162,39,.30);
    border-radius:50px;

    color:var(--gold);

    font-size:14px;
    font-weight:600;

    letter-spacing:1.5px;

    text-transform:uppercase;
}



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

.about-text h3{

    font-family:'Cormorant Garamond',serif;

    font-size:46px;

    font-weight:700;

    color:#fff;

    line-height:1.2;

    margin-bottom:22px;
}



.about-text p{

    color:rgba(255,255,255,.82);

    font-size:17px;

    line-height:1.9;

    margin-bottom:18px;
}



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


.about-features{

    display:grid;

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

    gap:18px;

    margin:25px 0 35px;
}




.feature-box{

    display:flex;

    align-items:center;

    gap:15px;


    padding:18px 20px;


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


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


    border-radius:16px;


    transition:.45s ease;


    cursor:default;

}




.feature-box i{


    width:48px;

    height:48px;


    display:flex;

    align-items:center;

    justify-content:center;


    border-radius:50%;


    background:rgba(201,162,39,.15);


    color:var(--gold);


    font-size:20px;


    flex-shrink:0;

}




.feature-box span{


    color:#fff;


    font-size:16px;


    font-weight:600;


    line-height:1.5;

}




.feature-box:hover{


    transform:translateY(-8px);


    border-color:rgba(201,162,39,.45);


    background:rgba(201,162,39,.08);



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

}




.feature-box:hover i{


    transform:rotate(360deg);


    transition:.8s;

}




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


.about-text .btn{


    width:fit-content;


    margin-top:10px;


    padding:15px 34px;


    border-radius:50px;


    font-size:15px;


    font-weight:600;


    letter-spacing:.5px;


    transition:.45s;

}




.about-text .btn:hover{


    transform:translateY(-4px);

}



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


@media(max-width:991px){


    .about-text{


        text-align:center;


        align-items:center;

    }



    .about-text h3{


        font-size:38px;

    }



    .about-features{


        grid-template-columns:1fr;


        width:100%;

    }



    .feature-box{


        justify-content:flex-start;

    }

}




@media(max-width:768px){


    .about-text h3{


        font-size:32px;

    }



    .about-text p{


        font-size:16px;

    }



    .about-subtitle{


        font-size:13px;

    }



    .feature-box{


        padding:16px;

    }



    .feature-box span{


        font-size:15px;

    }

}
/*====================================*
ABOUT PREMIUM ANIMATIONS - PART 3
*====================================*/


/* Smooth Transitions */

.about *,
.about *::before,
.about *::after{

    transition:all .4s ease;

}



/* Floating Image */

.about-image{

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

}



/* Gold Glow Behind Image */

.about-image::before{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    top:-40px;

    left:-40px;

    border-radius:50%;


    background:radial-gradient(circle,
    rgba(201,162,39,.12),
    transparent 70%);


    z-index:-1;

}



/* Section Fade */

.about-section-title{

    animation:fadeDown 1s ease;

}



.about-text{

    animation:fadeLeft 1s ease;

}



.about-image{

    animation:
    imageFloat 6s ease-in-out infinite,
    fadeRight 1s ease;

}



/*====================================*
HOVER EFFECTS
*====================================*/


.about-text h3:hover{

    color:var(--gold-light);

}



.section-tag:hover{

    background:rgba(201,162,39,.18);

    border-color:var(--gold);

    transform:translateY(-2px);

}



.experience-card:hover{

    transform:translateY(-8px);


    box-shadow:

    0 25px 55px rgba(0,0,0,.35),

    0 0 20px rgba(201,162,39,.18);

}



/*====================================*
BUTTON SHINE EFFECT
*====================================*/


.about-text .btn{

    position:relative;

    overflow:hidden;

}



.about-text .btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;


    background:
    linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,.5),
    transparent
    );


    transition:.8s;

}



.about-text .btn:hover::before{

    left:150%;

}



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


@supports(animation-timeline:view()){


.about-section-title,
.about-image,
.about-text{


    animation-timeline:view();


    animation-range:entry 20% cover 35%;


}


}



/*====================================*
KEYFRAMES
*====================================*/


@keyframes imageFloat{


    0%{

        transform:translateY(0px);

    }


    50%{

        transform:translateY(-10px);

    }


    100%{

        transform:translateY(0px);

    }


}




@keyframes fadeDown{


    from{

        opacity:0;

        transform:translateY(-40px);

    }


    to{

        opacity:1;

        transform:translateY(0);

    }


}




@keyframes fadeLeft{


    from{

        opacity:0;

        transform:translateX(50px);

    }


    to{

        opacity:1;

        transform:translateX(0);

    }


}




@keyframes fadeRight{


    from{

        opacity:0;

        transform:translateX(-50px);

    }


    to{

        opacity:1;

        transform:translateX(0);

    }


}




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


.about ::selection{

    background:var(--gold);

    color:#fff;

}
/*=========================*
*HOME FEATURED PRODUCTS*
*=========================*/

.home-products-page{

padding:10px 8% 15px;

background:var(--bg-dark);

}


/*=========================*
*HOME PRODUCTS TITLE*
*=========================*/


.home-products-title{

font-family:'Cormorant Garamond',serif;

text-align:center;

font-size:50px;

font-weight:700;

color:var(--gold);

text-transform:uppercase;

letter-spacing:1.5px;

margin:0 0 4px;

line-height:1.1;


/* PREMIUM REVEAL */

opacity:0;

transform:translateY(25px);

animation:titleReveal .9s ease forwards;

}



.home-products-title::after{

content:"";

display:block;

width:90px;

height:3px;

background:var(--gold);

margin:8px auto 0;

border-radius:20px;

box-shadow:0 0 15px rgba(212,175,55,.6);

}



/* TITLE ANIMATION */


@keyframes titleReveal{

to{

opacity:1;

transform:translateY(0);

}

}



/*=========================*
*HOME SWIPER*
*=========================*/


.home-productSwiper{

width:100%;

padding:8px 60px 15px;

overflow:hidden;

touch-action:auto;

cursor:grab;

}



.home-productSwiper:active{

cursor:grabbing;

}



.home-productSwiper .swiper-wrapper{

align-items:center;

}



.home-productSwiper .swiper-slide{

display:flex;

justify-content:center;

align-items:center;

height:auto;

user-select:none;


/* PREMIUM SLIDE ANIMATION */

opacity:0;

transform:translateY(40px);

animation:productReveal .8s ease forwards;

}



.home-productSwiper .swiper-slide:nth-child(1){

animation-delay:.1s;

}


.home-productSwiper .swiper-slide:nth-child(2){

animation-delay:.2s;

}


.home-productSwiper .swiper-slide:nth-child(3){

animation-delay:.3s;

}


.home-productSwiper .swiper-slide:nth-child(4){

animation-delay:.4s;

}


.home-productSwiper .swiper-slide:nth-child(5){

animation-delay:.5s;

}



@keyframes productReveal{

to{

opacity:1;

transform:translateY(0);

}

}



/*=========================*
*PRODUCT CARD PREMIUM*
*=========================*/


.home-spice-card{

width:100%;

max-width:250px;

min-height:360px;

background:

linear-gradient(
145deg,
#ffffff,
#FFF9F0
);


border-radius:18px;

overflow:hidden;

text-align:center;


border:

1px solid rgba(212,175,55,.25);


box-shadow:

0 10px 30px rgba(0,0,0,.12);


transition:

transform .5s ease,
box-shadow .5s ease;


display:flex;

flex-direction:column;


position:relative;

}





/* GOLD BORDER GLOW */


.home-spice-card::before{


content:"";


position:absolute;


inset:0;


border-radius:18px;


border:

1px solid rgba(212,175,55,.5);


opacity:0;


transition:.5s ease;


pointer-events:none;


}





.home-spice-card:hover{


transform:

translateY(-12px)
scale(1.02);



box-shadow:

0 25px 50px rgba(212,175,55,.20);



}




.home-spice-card:hover::before{


opacity:1;


}




.home-spice-card img{


width:100%;


height:160px;


object-fit:cover;



transition:


transform .7s ease,

filter .5s ease;


}




.home-spice-card:hover img{


transform:scale(1.08);


filter:brightness(.85);


}
/*=========================*
*CARD CONTENT*
*=========================*/


.home-spice-content{

flex:1;

display:flex;

flex-direction:column;

justify-content:space-between;

align-items:center;

padding:18px;

}




.home-spice-content h3{


font-family:'Cormorant Garamond',serif;


font-size:26px;


font-weight:700;


color:#12372A;


line-height:1.3;


margin:0 0 10px;


transition:.4s ease;


}



.home-spice-card:hover h3{


color:#D4AF37;


}





.home-spice-content p{


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


font-size:14px;


font-weight:400;


color:#555555;


line-height:1.7;


margin:0 0 18px;


}



/*=========================*
*VIEW DETAILS BUTTON*
*=========================*/


.home-spice-content a{


display:inline-flex;


align-items:center;


justify-content:center;


gap:8px;



padding:12px 28px;


margin-top:auto;



background:var(--gold);


color:#12372A;



text-decoration:none;


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


font-size:15px;


font-weight:600;



border-radius:50px;



transition:

all .4s ease;



box-shadow:

0 8px 20px rgba(212,175,55,.25);


}




.home-spice-content a:hover{


background:#12372A;


color:#D4AF37;


transform:translateY(-4px);



box-shadow:

0 12px 25px rgba(18,55,42,.3);


}





.home-spice-content a:active{


transform:scale(.96);


}





.home-spice-content a:focus{


background:#FFFFFF;


color:#12372A;


outline:none;


}




.home-spice-content a i{


transition:.4s ease;


}




.home-spice-content a:hover i{


transform:translateX(6px);


}





/*=========================*
*SWIPER BUTTONS PREMIUM*
*=========================*/


.home-productSwiper .swiper-button-prev,
.home-productSwiper .swiper-button-next{


width:55px !important;


height:55px !important;



background:#D4AF37 !important;



color:#12372A !important;



border-radius:50%;



position:absolute;



top:50% !important;



transform:translateY(-50%);



display:flex;



justify-content:center;



align-items:center;



box-shadow:

0 10px 30px rgba(212,175,55,.35);



transition:.4s ease;



z-index:10;



backdrop-filter:blur(8px);


}





.home-productSwiper .swiper-button-prev{


left:15px !important;


}




.home-productSwiper .swiper-button-next{


right:15px !important;


}





.home-productSwiper .swiper-button-prev::after,
.home-productSwiper .swiper-button-next::after{


font-size:22px !important;


font-weight:700;


}





.home-productSwiper .swiper-button-prev:hover,
.home-productSwiper .swiper-button-next:hover{


background:#FFFFFF !important;


color:#12372A !important;



transform:

translateY(-50%)
scale(1.1);



}




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


@media(max-width:768px){



.home-products-page{


padding:10px 5% 15px;


}





.home-products-title{


font-size:36px;


letter-spacing:1px;


}





.home-productSwiper{


padding:5px 40px 10px;


}





.home-spice-card{


max-width:250px;


}





.home-spice-content h3{


font-size:22px;


}





.home-spice-content p{


font-size:14px;


}





.home-productSwiper .swiper-button-prev,
.home-productSwiper .swiper-button-next{


width:45px !important;


height:45px !important;


}





.home-productSwiper .swiper-button-prev{


left:5px !important;


}





.home-productSwiper .swiper-button-next{


right:5px !important;


}





.home-productSwiper .swiper-button-prev::after,
.home-productSwiper .swiper-button-next::after{


font-size:18px !important;


}



}
/* ======================
PURPOSE SECTION PREMIUM
====================== */


.purpose{

padding:90px 8%;

position:relative;

overflow:hidden;

background:#0B1F1A;

}



/* Background Gold Glow */


.purpose::before{

content:"";

position:absolute;

width:450px;

height:450px;

top:-200px;

right:-150px;


background:

radial-gradient(
circle,
rgba(212,175,55,.18),
transparent 70%
);


border-radius:50%;


animation:

purposeGlow 8s ease-in-out infinite;

}



@keyframes purposeGlow{


50%{

transform:translateY(50px);

}

}





/* ======================
SECTION TITLE
====================== */


.purpose .section-title{


text-align:center;

margin-bottom:45px;


opacity:0;

transform:translateY(30px);


animation:

purposeReveal .8s ease forwards;


}



.purpose .section-title span{


display:block;


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


color:#D4AF37;


font-size:18px;


font-weight:700;


letter-spacing:4px;


text-transform:uppercase;


margin-bottom:10px;


}




.purpose .section-title h2{


font-family:'Cormorant Garamond',serif;


color:#FFFFFF;


font-size:52px;


font-weight:700;


line-height:1.2;


margin:0;


}





/* ======================
MISSION VISION GRID
====================== */


.purpose-container{


display:grid;


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


gap:35px;


}





/* ======================
PURPOSE CARD
====================== */


.purpose-card{


background:#FFF9F0;


border-radius:24px;


padding:35px;


position:relative;


overflow:hidden;


border:

1px solid rgba(212,175,55,.25);



box-shadow:

0 15px 40px rgba(0,0,0,.25);



transition:

transform .5s ease,
box-shadow .5s ease;



opacity:0;


transform:translateY(40px);


animation:

purposeReveal .8s ease forwards;


}





.purpose-card:nth-child(2){

animation-delay:.2s;

}





/* Gold Corner Glow */


.purpose-card::before{


content:"";


position:absolute;


width:180px;


height:180px;


top:-90px;


right:-90px;



background:

radial-gradient(
circle,
rgba(212,175,55,.35),
transparent 70%
);



transition:.6s;


}





.purpose-card:hover{


transform:

translateY(-12px);



box-shadow:

0 25px 60px rgba(212,175,55,.22);


}




.purpose-card:hover::before{


transform:scale(1.4);


}





/* ======================
TOP AREA
====================== */


.purpose-top{


display:flex;


align-items:center;


gap:20px;


}





/* ICON */


.icon{


width:65px;


height:65px;


border-radius:18px;


display:flex;


align-items:center;


justify-content:center;


font-size:26px;


flex-shrink:0;



transition:.5s;


}





.purpose-card:hover .icon{


transform:

rotateY(360deg);


}





.mission-icon{


background:#F3E6C8;


color:#D4AF37;


}





.vision-icon{


background:#DCE9E5;


color:#0B2B26;


}





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


.purpose-card small{


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


color:#D4AF37;


font-size:13px;


font-weight:700;


letter-spacing:3px;


text-transform:uppercase;


}





.purpose-card h3{


font-family:'Cormorant Garamond',serif;


font-size:34px;


font-weight:700;


line-height:1.25;


color:#0B2B26;


margin:8px 0 0;


transition:.4s;


}





.purpose-card:hover h3{


color:#D4AF37;


}





.purpose-card p{


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


font-size:16px;


line-height:1.8;


color:#555;


margin-top:25px;


}





/* Divider */


.purpose-line{


height:1px;


width:100%;


background:

linear-gradient(
90deg,
transparent,
#D4AF37,
transparent
);



margin:25px 0;


}





/* Bottom Tag */


.purpose-tag{


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


font-size:13px;


font-weight:600;


letter-spacing:1px;


color:#0B2B26;


}





/* ======================
REVEAL ANIMATION
====================== */


@keyframes purposeReveal{


to{


opacity:1;


transform:translateY(0);


}


}





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


@media(max-width:768px){



.purpose{


padding:50px 5%;


}




.purpose-container{


grid-template-columns:1fr;


gap:25px;


}





.purpose .section-title h2{


font-size:38px;


}





.purpose .section-title span{


font-size:15px;


}





.purpose-card{


padding:25px;


}





.purpose-top{


align-items:flex-start;


gap:15px;


}





.icon{


width:50px;


height:50px;


font-size:20px;


}





.purpose-card h3{


font-size:28px;


}





.purpose-card p{


font-size:15px;


}



}

/*=============================*
CERTIFICATION SECTION PREMIUM
*=============================*/


.certification-section{

background:#0B2B26;

padding:30px 8% 80px;

position:relative;

overflow:hidden;

}



/* Background Glow */


.certification-section::before{

content:"";

position:absolute;

width:400px;

height:400px;

right:-180px;

top:-150px;


background:

radial-gradient(
circle,
rgba(212,175,55,.18),
transparent 70%
);


border-radius:50%;

animation:certGlow 8s ease-in-out infinite;

}



@keyframes certGlow{


50%{

transform:translateY(40px);

}

}





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


.cert-heading{

text-align:center;

max-width:800px;

margin:0 auto 25px;


opacity:0;

transform:translateY(30px);

animation:certReveal .9s ease forwards;

}





.cert-heading span{

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

color:#D4AF37;

font-size:18px;

letter-spacing:4px;

font-weight:700;

text-transform:uppercase;

}





.cert-heading h2{

font-family:'Cormorant Garamond',serif;

margin:6px 0 10px;

font-size:54px;

color:#FFFFFF;

font-weight:700;

line-height:1.2;

}





.cert-heading p{

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

color:#E5E5E5;

font-size:17px;

line-height:1.6;

margin:0;

}





/*=============================*
SWIPER
*=============================*/


.certificateSwiper{

width:100%;

overflow:hidden;

margin:0;

padding:15px 0;

height:140px;

touch-action:auto;

cursor:grab;

}



.certificateSwiper:active{

cursor:grabbing;

}



.certificateSwiper .swiper-wrapper{

display:flex;

align-items:center;

height:140px;

}





.certificateSwiper .swiper-slide{

display:flex;

justify-content:center;

align-items:center;

height:140px;

user-select:none;

opacity:0;

transform:translateY(25px);

animation:certSlide .8s ease forwards;

}





.certificateSwiper .swiper-slide:nth-child(1){

animation-delay:.1s;

}


.certificateSwiper .swiper-slide:nth-child(2){

animation-delay:.2s;

}


.certificateSwiper .swiper-slide:nth-child(3){

animation-delay:.3s;

}


.certificateSwiper .swiper-slide:nth-child(4){

animation-delay:.4s;

}





@keyframes certSlide{


to{

opacity:1;

transform:translateY(0);

}

}





/*=============================*
CERTIFICATE CARD
*=============================*/


.certificate-card{

width:120px;

height:120px;

display:flex;

justify-content:center;

align-items:center;

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

border-radius:50%;

transition:.5s ease;

position:relative;

}





/* Gold Ring */


.certificate-card::before{

content:"";

position:absolute;

inset:-5px;

border-radius:50%;

border:1px solid rgba(212,175,55,.5);

opacity:0;

transition:.5s;

}





.certificate-card img{

width:90px;

height:90px;

object-fit:contain;

background:#FFFFFF;

padding:8px;

border-radius:50%;


box-shadow:

0 10px 25px rgba(0,0,0,.35);


transition:.5s ease;

}





.certificate-card:hover{

transform:translateY(-10px);

}





.certificate-card:hover::before{

opacity:1;

}





.certificate-card:hover img{

transform:scale(1.12);

box-shadow:

0 15px 35px rgba(212,175,55,.35);

}





.certificate-card h3,
.certificate-card p{

display:none;

}





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


@keyframes certReveal{


to{

opacity:1;

transform:translateY(0);

}

}





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


@media(max-width:768px){


.certification-section{

padding:25px 5% 60px;

}



.cert-heading{

margin-bottom:15px;

}



.cert-heading h2{

font-size:40px;

}



.cert-heading p{

font-size:15px;

}



.certificateSwiper{

height:120px;

padding:8px 0;

}



.certificateSwiper .swiper-wrapper{

height:120px;

}



.certificateSwiper .swiper-slide{

height:120px;

}



.certificate-card{

width:100px;

height:100px;

}



.certificate-card img{

width:80px;

height:80px;

}


}