/*==================================================
    BRAND PROCESS SECTION
==================================================*/

.brand-process{

    padding:140px 0;

    background:#fff;

    overflow:hidden;

}

.brand-process-grid{

display:grid;

grid-template-columns: 40% 60%;

gap: 24px;

align-items:center;
}


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

.process-content{

    max-width:520px;

}

.section-tag{

    display:inline-flex;

    align-items:center;

    padding:10px 22px;

    background:#111;

    color:#fff;

    border-radius:100px;

    font-size:12px;

    font-weight:700;

    letter-spacing:.18em;

    text-transform:uppercase;

    margin-bottom:28px;

}

.process-content h2{

font-size: 42px;

line-height:.95;

font-weight:700;

letter-spacing:-.04em;

margin-bottom:34px;
}

.process-content p{

    font-size:16px;

    line-height:1.8;

    color:#333;

}


/*==================================================
    RIGHT SIDE
==================================================*/

.process-cards{

display:flex;

align-items:flex-end;

justify-content:flex-end;

gap: 12px;
}


/*==================================================
    CARDS
==================================================*/

.process-card{

    position:relative;

    width:100%;

    height:500px;

    overflow:hidden;

    border-radius:34px;

    background:#f5f5f5;

    box-shadow:

    0 25px 60px rgba(0,0,0,.08);

}

.process-card-featured{

    height:560px;

}


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

.card-image{

    position:absolute;

    inset:0;

}

.card-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}


/*==================================================
    NUMBER
==================================================*/

.card-number{

    position:absolute;

    top:22px;

    left:22px;

    width:48px;

    height:48px;

    border-radius:50%;

    background:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:700;

    font-size:20px;

    z-index:5;

}


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

.card-overlay{

position:absolute;

left:0;

bottom:0;

width:100%;

padding: 24px;

z-index:5;
}

.card-overlay h3{

    font-size:38px;

    font-weight:700;

    color:#fff;

    margin-bottom:18px;

}

.card-overlay p{

font-size:16px;

line-height: 1.4;

max-width:220px;
}


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

.card-btn{

    margin-top:28px;

    text-decoration:none;

}


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

@media(max-width:1200px){

.process-content h2{

font-size:64px;

}

.process-content p{

font-size:19px;

}

.process-card{

width:250px;

height:460px;

}

.process-card-featured{

height:520px;

}

}


@media(max-width:991px){

.brand-process-grid{

grid-template-columns:1fr;

gap:70px;

}

.process-content{

max-width:100%;

text-align:center;

}

.process-cards{

justify-content:center;

}

}


@media(max-width:768px){

.process-content h2{

font-size:48px;

}

.process-content p{

font-size:18px;

}

.process-cards{

flex-direction:column;

align-items:center;

gap:30px;

}

.process-card,

.process-card-featured{

width:100%;

max-width:360px;

height:480px;

}

}


@media(max-width:576px){

.brand-process{

padding:90px 0;

}

.process-content h2{

font-size:38px;

}

.process-content p{

font-size:16px;

line-height:1.7;

}

.section-tag{

font-size:11px;

padding:8px 18px;

}

.process-card,

.process-card-featured{

height:450px;

}

.card-overlay{

padding: 26px;

background:

linear-gradient(

to top,

rgba(15,15,15,.88),

rgba(15,15,15,.52),

transparent

);

}

.card-overlay h3{

font-size:30px;

}

}

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

.card-image{

    overflow:hidden;

}

.card-image img{

    transition:1.2s cubic-bezier(.22,.61,.36,1);

}

.process-card:hover .card-image img{

    transform:scale(1.08);

}


/*==================================================
    PREMIUM GRADIENT
==================================================*/
.card-overlay{

background:

linear-gradient(

to top,

rgba(15,15,15,.88),

rgba(15,15,15,.52),

transparent

);

}


/*==================================================
    CARD HOVER
==================================================*/

.process-card{

    transition:
    transform .55s ease,
    box-shadow .55s ease;

}

.process-card:hover{

    transform:translateY(-12px);

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

}


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

.card-btn{

    width:190px;

    height:60px;

    margin-top:28px;

    padding-left:26px;

    padding-right:6px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    border-radius:100px;

    background:#9AD62B;

    color:#111;

    font-weight:700;

    text-decoration:none;

    transition:.35s;

}

.card-btn span{

    font-size:15px;

}

.btn-circle{

    width:48px;

    height:48px;

    border-radius:50%;

    background:#111;

    color:#9AD62B;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:15px;

    transition:.35s;

}

.card-btn:hover{

    width:198px;

}

.card-btn:hover .btn-circle{

    transform:rotate(45deg);

}


/*==================================================
    TYPOGRAPHY
==================================================*/

.card-overlay h3{

margin-bottom: 8px;

font-size: 24px;

line-height:1;
}

.card-overlay p{

margin-bottom: 0px;

opacity:.92;
}


/*==================================================
    NUMBER
==================================================*/

.card-number{

    backdrop-filter:blur(18px);

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

    box-shadow:

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

}


/*==================================================
    CARD BORDER
==================================================*/

.process-card::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:34px;

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

    z-index:3;

    pointer-events:none;

}

/*==================================================
    FINAL POLISH
==================================================*/

/*------------------------------------------
Smooth Card Animation
------------------------------------------*/

.process-card{

    will-change:transform;

    cursor:pointer;

}

.process-card:nth-child(1){

    animation:cardFloat1 7s ease-in-out infinite;

}

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

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

}

.process-card:nth-child(3){

    animation:cardFloat3 7.5s ease-in-out infinite;

}

@keyframes cardFloat1{

0%,100%{

transform:translateY(0px);

}

50%{

transform:translateY(-8px);

}

}

@keyframes cardFloat2{

0%,100%{

transform:translateY(0px);

}

50%{

transform:translateY(-14px);

}

}

@keyframes cardFloat3{

0%,100%{

transform:translateY(0px);

}

50%{

transform:translateY(-10px);

}

}


/*------------------------------------------
Image Overlay Shine
------------------------------------------*/

.process-card::after{

content:"";

position:absolute;

top:-100%;

left:-120%;

width:70%;

height:300%;

background:linear-gradient(

90deg,

transparent,

rgba(255,255,255,.18),

transparent

);

transform:rotate(25deg);

transition:1.1s;

z-index:4;

}

.process-card:hover::after{

left:160%;

}


/*------------------------------------------
Better Overlay Typography
------------------------------------------*/

.card-overlay{

display:flex;

flex-direction:column;

justify-content:flex-end;

height:100%;

}

.card-overlay h3{

letter-spacing:-.03em;

}

.card-overlay p{

max-width:95%;
color:white;

}


/*------------------------------------------
Premium Button
------------------------------------------*/

.card-btn{

overflow:hidden;

position:relative;

}

.card-btn::before{

content:"";

position:absolute;

left:-100%;

top:0;

width:100%;

height:100%;

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

transition:.45s;

}

.card-btn:hover::before{

left:100%;

}


/*------------------------------------------
Arrow Circle
------------------------------------------*/

.btn-circle{

flex-shrink:0;

}

.card-btn:hover .btn-circle{

background:#222;

}


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

.card-image img{

filter:saturate(.95) contrast(1.02);

}


/*------------------------------------------
Spacing
------------------------------------------*/

.process-card .card-overlay{

padding-bottom:32px;

}

.process-card-featured{

margin-top:35px;

}


/*------------------------------------------
Responsive
------------------------------------------*/

@media(max-width:991px){

.process-card-featured{

margin-top:0;

}

.process-cards{

gap:24px;

}

}


@media(max-width:768px){

.process-card,

.process-card-featured{

max-width:380px;

width:100%;

height:500px;

}

.card-overlay h3{

font-size:32px;

}

.card-overlay p{

font-size:16px;

}

}


@media(max-width:480px){

.process-card,

.process-card-featured{

height:440px;

border-radius:28px;

}

.card-overlay{

padding:22px;

}

.card-btn{

width:175px;

height:54px;

padding-left:22px;

}

.btn-circle{

width:42px;

height:42px;

}

.card-overlay h3{

font-size:28px;

}

}



/*=========================================
    OUR PROCESS
=========================================*/

.brand-process{

    padding:140px 0;

    background:#fff;

    overflow:hidden;

}

.process-header{

    text-align:center;

    max-width:760px;

    margin:0 auto 90px;

}

.process-header h2{

    font-size:56px;line-height:1.2;
    font-weight:700;
    margin:18px 0 28px;

}

.process-header p{

    font-size:20px;

    line-height:1.8;

    color:#666;

}

.process-grid{

    display:grid;

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

    gap:24px;

    align-items:start;

}


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

.process-card{

    position:relative;

    background:#fff;

    border-radius:28px;

    overflow:hidden;

    box-shadow:

    0 25px 60px rgba(0,0,0,.08);

}


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

.process-image{

    width:100%;

    height:210px;

}

.process-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}


/*=========================================
    NUMBER
=========================================*/

.process-number{

    position:absolute;

    top:18px;

    left:18px;

    width:46px;

    height:46px;

    border-radius:50%;

    background:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:18px;

    font-weight:700;

    color:#111;

}


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

.process-content{

    padding:30px;

}

.process-content h3{

    font-size:28px;

    margin-bottom:14px;

}

.process-content p{

    font-size:16px;

    line-height:1.8;

    color:#666;

}


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

@media(max-width:1400px){

.process-grid{

grid-template-columns:repeat(5,220px);

justify-content:center;

}

}


@media(max-width:1200px){

.process-grid{

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

gap:30px;

}

}


@media(max-width:768px){

.process-header h2{

font-size:46px;

}

.process-header p{

font-size:18px;

}

.process-grid{

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

}

}


@media(max-width:576px){

.brand-process{

padding:90px 0;

}

.process-header{

margin-bottom:60px;

}

.process-header h2{

font-size:36px;

}

.process-header p{

font-size:16px;

}

.process-grid{

grid-template-columns:1fr;

gap:24px;

}

.process-card{

max-width:360px;

margin:auto;

}

}

/*=========================================
    PREMIUM CARD STYLE
=========================================*/

.process-card{

    transition:
    transform .45s ease,
    box-shadow .45s ease;

    border:1px solid rgba(0,0,0,.05);

}

.process-card:hover{

    transform:translateY(-14px);

    box-shadow:
    0 45px 90px rgba(0,0,0,.14);

}


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

.process-image{

    overflow:hidden;

}

.process-image img{

    transition:1s cubic-bezier(.22,.61,.36,1);

}

.process-card:hover .process-image img{

    transform:scale(1.08);

}


/*=========================================
    GREEN ACCENT
=========================================*/

.process-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:5px;

    height:0;

    background:#9AD62B;

    transition:.45s;

    z-index:3;

}

.process-card:hover::before{

    height:100%;

}


/*=========================================
    NUMBER
=========================================*/

.process-number{

    backdrop-filter:blur(20px);

    box-shadow:

    0 12px 24px rgba(0,0,0,.12);

}


/*=========================================
    TYPOGRAPHY
=========================================*/

.process-content h3{

    transition:.35s;

}

.process-card:hover h3{

    color:#8BC53F;

}


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

.process-btn{

    margin-top:28px;

    display:inline-flex;

    align-items:center;

    justify-content:space-between;

    width:185px;

    height:56px;

    padding-left:24px;

    padding-right:6px;

    border-radius:100px;

    background:#9AD62B;

    text-decoration:none;

    color:#111;

    font-weight:700;

    overflow:hidden;

    transition:.35s;

}

.process-btn span{

    font-size:15px;

}

.process-btn-circle{

    width:44px;

    height:44px;

    border-radius:50%;

    background:#111;

    color:#9AD62B;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:.35s;

}

.process-btn:hover{

    width:194px;

}

.process-btn:hover .process-btn-circle{

    transform:rotate(45deg);

}


/*=========================================
    CARD SHINE
=========================================*/

.process-card::after{

    content:"";

    position:absolute;

    top:-150%;

    left:-120%;

    width:70%;

    height:350%;

    background:

    linear-gradient(

    90deg,

    transparent,

    rgba(255,255,255,.18),

    transparent

    );

    transform:rotate(25deg);

    transition:1s;

    pointer-events:none;

}

.process-card:hover::after{

    left:170%;

}


/*=========================================
    SLIGHT STAGGER
=========================================*/

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

    margin-top:28px;

}

.process-card:nth-child(4){

    margin-top:28px;

}


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

@media(max-width:768px){

.process-card:nth-child(2),

.process-card:nth-child(4){

margin-top:0;

}

}

/*=========================================
        FINAL POLISH
=========================================*/


/* Card Radius */

.process-card{

    border-radius:32px;

}


/* Better Image */

.process-image{

    position:relative;

}

.process-image::after{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

    to top,

    rgba(0,0,0,.22),

    transparent 45%

    );

}


/* Better Spacing */

.process-content{
    padding:0px;
}

.process-content h3{

    font-size:26px;

    line-height:1.15;

    margin-bottom:14px;

}

.process-content p{

    font-size:22px;

    line-height:1.75;

}


/* Better Number */

.process-number{

    width:52px;

    height:52px;

    font-size:17px;

    font-weight:700;

}


/* Smooth Image */

.process-image img{

    filter:saturate(.95);

}


/* Floating Animation */

.process-card{

    animation:floatCard 7s ease-in-out infinite;

}

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

    animation-delay:.6s;

}

.process-card:nth-child(3){

    animation-delay:1.2s;

}

.process-card:nth-child(4){

    animation-delay:1.8s;

}

.process-card:nth-child(5){

    animation-delay:2.4s;

}

@keyframes floatCard{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-6px);

}

}


/* Hover */

.process-card:hover{

    transform:

    translateY(-16px)

    scale(1.015);

}


/* Better Shadow */

.process-card{

    box-shadow:

    0 12px 40px rgba(0,0,0,.06);

}

.process-card:hover{

    box-shadow:

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

}


/* Better Button */

.process-btn{

    font-size:15px;

    letter-spacing:.02em;

}

.process-btn:hover{

    background:#8bc53f;

}


/* Better Arrow */

.process-btn-circle{

    transition:

    transform .35s ease,

    background .35s ease;

}

.process-btn:hover .process-btn-circle{

    transform:rotate(45deg);

    background:#191919;

}


/* Card Border */

.process-card{

    border:1px solid rgba(0,0,0,.04);

}


/* Responsive */

@media(max-width:1400px){

.process-grid{

gap:20px;

}

}


@media(max-width:991px){

.process-grid{

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

}

}


@media(max-width:768px){

.process-grid{

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

}

.process-card{

animation:none;

}

}


@media(max-width:576px){

.process-grid{

display:flex;

overflow-x:auto;

gap:18px;

padding-bottom:10px;

scroll-snap-type:x mandatory;

}

.process-grid::-webkit-scrollbar{

display:none;

}

.process-card{

min-width:300px;

scroll-snap-align:start;

margin:0;

}

}