/*=========================================================
 PRIME BRANDS WEBSITE
 FILE: style.css
 PART 1 OF 8
=========================================================*/

/*=========================================================
 TABLE OF CONTENTS
===========================================================

01 ROOT VARIABLES
02 RESET
03 BASE TYPOGRAPHY
04 CONTAINERS
05 BUTTONS
06 UTILITIES
07 LOADER
08 SCROLLBAR
09 BACK TO TOP

=========================================================*/


/*=========================================================
01 ROOT VARIABLES
=========================================================*/

:root{

--primary:#1d315b;

--secondary:#304f87;

--accent:#c7a15a;

--dark:#0f1726;

--light:#ffffff;

--gray:#777777;

--border:#e5e5e5;

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

--radius:18px;

--transition:.35s ease;

--container:1280px;

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

--font-body:'Inter',sans-serif;

}


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

*{

margin:0;

padding:0;

box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:var(--font-body);

font-size:16px;

line-height:1.75;

background:#fff;

color:#222;

overflow-x:hidden;

}

img{

display:block;

max-width:100%;

height:auto;

}

a{

text-decoration:none;

color:inherit;

}

ul{

list-style:none;

}

button{

border:none;

background:none;

cursor:pointer;

font-family:inherit;

}

input,
textarea{

font-family:inherit;

outline:none;

}


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

h1,
h2,
h3,
h4,
h5{

font-family:var(--font-title);

font-weight:700;

color:#111;

line-height:1.2;

}

h1{

font-size:64px;

}

h2{

font-size:48px;

}

h3{

font-size:28px;

}

h4{

font-size:20px;

}

p{

color:#666;

margin-bottom:20px;

}

.section-title{

max-width:760px;

margin:auto;

text-align:center;

margin-bottom:90px;

}

.section-title span{

display:inline-block;

letter-spacing:3px;

font-size:13px;

font-weight:700;

color:var(--accent);

margin-bottom:20px;

text-transform:uppercase;

}

.section-title h2{

margin-bottom:30px;

}

.section-title.light h2{

color:white;

}

.section-title.light p{

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

}


/*=========================================================
04 CONTAINERS
=========================================================*/

.container{

width:min(92%,var(--container));

margin:auto;

}

section{

padding:120px 0;

position:relative;

}


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

.btn-primary{

display:inline-flex;

align-items:center;

justify-content:center;

padding:18px 42px;

border-radius:100px;

background:var(--accent);

color:white;

font-weight:600;

transition:var(--transition);

box-shadow:var(--shadow);

}

.btn-primary:hover{

transform:translateY(-4px);

}

.btn-secondary{

display:inline-flex;

align-items:center;

justify-content:center;

padding:18px 42px;

border-radius:100px;

border:2px solid white;

color:white;

transition:.35s;

}

.btn-secondary:hover{

background:white;

color:#111;

}


/*=========================================================
06 UTILITIES
=========================================================*/

.hidden{

display:none;

}

.text-center{

text-align:center;

}

.mb-30{

margin-bottom:30px;

}

.mb-50{

margin-bottom:50px;

}

.shadow{

box-shadow:var(--shadow);

}

.rounded{

border-radius:var(--radius);

overflow:hidden;

}


/*=========================================================
07 LOADER
=========================================================*/

#loader{

position:fixed;

inset:0;

background:#111;

display:flex;

justify-content:center;

align-items:center;

z-index:99999;

transition:.6s;

}

.loader-content{

text-align:center;

}

.loader-logo{

font-family:var(--font-title);

font-size:38px;

font-weight:800;

letter-spacing:5px;

color:white;

}

.loader-line{

width:160px;

height:3px;

background:var(--accent);

margin:30px auto 0;

position:relative;

overflow:hidden;

}

.loader-line::after{

content:"";

position:absolute;

width:60px;

height:100%;

background:white;

left:-60px;

animation:loader 1.5s infinite;

}

@keyframes loader{

100%{

left:160px;

}

}


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

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-thumb{

background:var(--accent);

border-radius:20px;

}

::-webkit-scrollbar-track{

background:#efefef;

}


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

#backToTop{

position:fixed;

right:30px;

bottom:30px;

width:55px;

height:55px;

background:var(--accent);

display:flex;

justify-content:center;

align-items:center;

border-radius:50%;

color:white;

font-size:20px;

box-shadow:var(--shadow);

opacity:0;

visibility:hidden;

transition:.35s;

z-index:900;

}

#backToTop.active{

opacity:1;

visibility:visible;

}

#backToTop:hover{

transform:translateY(-6px);

}

/*=========================================================
 END PART 1
 NEXT:
 HEADER
 NAVBAR
 HERO
=========================================================*/
/*=========================================================
 PART 2 OF 8
 HEADER
 NAVIGATION
 HERO
=========================================================*/


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

header{

position:fixed;

top:0;

left:0;

width:100%;

z-index:5000;

transition:.4s;

}

header.scrolled{

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

backdrop-filter:blur(14px);

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

border-bottom:1px solid rgba(0,0,0,.06);

}
header.scrolled .nav-menu a{

color:#1d315b;

}

header.scrolled .nav-menu a:hover{

color:var(--accent);

}

header.scrolled .nav-menu a.active{

color:var(--accent);

}
header.scrolled .btn-nav{

background:#1d315b;

color:#fff;

border:none;

}

header.scrolled .btn-nav:hover{

background:#2b467d;

}


/*=========================================================
NAVBAR
=========================================================*/

.navbar{

height:90px;

display:flex;

align-items:center;

}

.navbar .container{

display:flex;

align-items:center;

justify-content:space-between;

}


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

.logo{

display:flex;

align-items:center;

padding:4px 0;

}


.logo img{

max-height:72px;

width:auto;

height:auto;

display:block;

object-fit:contain;

transition:.35s ease;

}
header.scrolled .logo img{

max-height:58px;

}

/*=========================================================
MENU
=========================================================*/

.nav-menu{

display:flex;

gap:38px;

align-items:center;

}

.nav-menu a{

color:white;

font-weight:500;

font-size:15px;

position:relative;

transition:.3s;

}

.nav-menu a::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

width:0;

height:2px;

background:var(--accent);

transition:.35s;

}

.nav-menu a:hover{

color:var(--accent);

}
.nav-menu a.active::after{

width:100%;

}

.nav-menu a:hover::after{

width:100%;

}
header.scrolled .nav-menu a{

color:#1d315b;

}

header.scrolled .nav-menu a:hover{

color:var(--accent);

}

header.scrolled .nav-menu a.active{

color:var(--accent);

}
header.scrolled .nav-menu a{

color:#1d315b;

}

header.scrolled .nav-menu a:hover{

color:var(--accent);

}

header.scrolled .nav-menu a.active{

color:var(--accent);

}


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

.btn-nav{

background:linear-gradient(135deg,#d8b26b,#b88b3b);

padding:14px 28px;

border-radius:999px;

color:white;

font-weight:600;

transition:.35s;

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

}

.btn-nav:hover{

transform:translateY(-3px);

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

}


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

#mobileButton{

display:none;

width:36px;

cursor:pointer;

z-index:99999;

}

#mobileButton span{

display:block;

height:3px;

background:white;

margin:7px 0;

border-radius:3px;

transition:.35s;

}


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

#hero{

position:relative;

min-height:100vh;

display:flex;

align-items:center;

justify-content:center;

padding-top:90px;

overflow:hidden;

background:url("../images/hero/hero-cover.jpg") center center;

background-size:cover;

background-repeat:no-repeat;

}


/* preparado para video futuro */

#hero video{

position:absolute;

inset:0;

width:100%;

height:100%;

object-fit:cover;

z-index:-3;

}


/*=========================================================
OVERLAY
=========================================================*/

.hero-overlay{

position:absolute;

inset:0;

background:

linear-gradient(

90deg,

rgba(14,28,54,.42),

rgba(18,34,63,.20),

rgba(18,34,63,.05)

),

linear-gradient(

180deg,

rgba(255,255,255,.04),

rgba(0,0,0,.08)

);

}


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

.hero-content{

position:relative;

z-index:2;

max-width:760px;

color:white;

}

.hero-subtitle{

font-size:14px;

letter-spacing:4px;

text-transform:uppercase;

font-weight:700;

color:var(--accent);

margin-bottom:25px;

}

.hero-content h1{

color:white;

font-size:72px;

margin-bottom:30px;

line-height:1.05;

}

.hero-description{

font-size:20px;

line-height:1.9;

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

max-width:700px;

margin-bottom:50px;

}


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

.hero-buttons{

display:flex;

gap:20px;

flex-wrap:wrap;

}


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

.hero-stats{

margin-top:90px;

display:grid;

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

gap:25px;

position:relative;

z-index:2;

}

.hero-stat{

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

backdrop-filter:blur(18px);

padding:35px;

border-radius:20px;

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

transition:.35s;

}

.hero-stat:hover{

transform:translateY(-8px);

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

}

.hero-stat h3{

font-size:42px;

color:white;

margin-bottom:10px;

}

.hero-stat span{

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

font-size:15px;

}


/*=========================================================
SCROLL INDICATOR
=========================================================*/

.scroll-down{

position:absolute;

left:50%;

bottom:35px;

transform:translateX(-50%);

width:36px;

height:60px;

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

border-radius:30px;

display:flex;

justify-content:center;

align-items:flex-start;

padding-top:8px;

z-index:3;

}

.scroll-down span{

width:6px;

height:10px;

background:white;

border-radius:20px;

animation:scrollIndicator 1.8s infinite;

}

@keyframes scrollIndicator{

0%{

transform:translateY(0);

opacity:1;

}

100%{

transform:translateY(24px);

opacity:0;

}

}


/*=========================================================
DECORATIVE ELEMENTS
=========================================================*/

#hero::before{

content:"";

position:absolute;

right:-150px;

top:-150px;

width:450px;

height:450px;

background:radial-gradient(circle,
rgba(199,161,90,.18),
transparent 70%);

pointer-events:none;

}

#hero::after{

content:"";

position:absolute;

left:-180px;

bottom:-180px;

width:500px;

height:500px;

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

pointer-events:none;

}


/*=========================================================
 END PART 2
 NEXT:
 ABOUT
 STATISTICS
 BENTO GRID
=========================================================*/
/*=========================================================
 PART 3 OF 8
 ABOUT
 STATISTICS
 WHY PRIME
 BENTO GRID
=========================================================*/


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

#about{

background:#fff;

}

.about-grid{

display:grid;

grid-template-columns:1.1fr 1fr;

gap:90px;

align-items:center;

}

.about-image{

position:relative;

}

.about-image img{

border-radius:24px;

box-shadow:var(--shadow);

}

.about-image::after{

content:"";

position:absolute;

right:-30px;

bottom:-30px;

width:180px;

height:180px;

background:linear-gradient(135deg,
rgba(199,161,90,.18),
rgba(199,161,90,.02));

border-radius:30px;

z-index:-1;

}

.about-content h2{

margin-bottom:30px;

}

.about-content p{

margin-bottom:24px;

font-size:17px;

}


/*=========================================================
FEATURE LIST
=========================================================*/

.feature-list{

display:grid;

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

gap:22px;

margin-top:45px;

}

.feature-item{

display:flex;

gap:14px;

align-items:flex-start;

}

.feature-item i{

width:46px;

height:46px;

display:flex;

justify-content:center;

align-items:center;

background:rgba(199,161,90,.10);

border-radius:50%;

color:var(--accent);

font-size:18px;

flex-shrink:0;

}

.feature-item h4{

margin-bottom:6px;

}

.feature-item p{

font-size:15px;

margin:0;

}


/*=========================================================
STATISTICS
=========================================================*/

#statistics{

background:#111;

color:white;

overflow:hidden;

}

.stats-grid{

display:grid;

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

gap:35px;

}

.stat-card{

text-align:center;

padding:55px 35px;

border-radius:22px;

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

backdrop-filter:blur(12px);

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

transition:.35s;

}

.stat-card:hover{

transform:translateY(-8px);

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

}

.stat-card h2{

font-size:54px;

color:white;

margin-bottom:10px;

}

.stat-card span{

display:block;

color:var(--accent);

font-weight:700;

margin-bottom:18px;

letter-spacing:2px;

text-transform:uppercase;

font-size:13px;

}

.stat-card p{

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

margin:0;

font-size:15px;

}


/*=========================================================
WHY PRIME
=========================================================*/

#why-prime{

background:#f9f9f9;

}


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

.bento-grid{

display:grid;

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

grid-auto-rows:250px;

gap:28px;

}

.bento-card{

background:white;

border-radius:24px;

padding:40px;

box-shadow:var(--shadow);

display:flex;

flex-direction:column;

justify-content:flex-start;

transition:.35s;

position:relative;

overflow:hidden;

}

.bento-card:hover{

transform:translateY(-10px);

}

.bento-card::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:4px;

background:linear-gradient(90deg,
var(--accent),
#d8bc84);

transform:scaleX(0);

transform-origin:left;

transition:.35s;

}

.bento-card:hover::before{

transform:scaleX(1);

}

.bento-card.large{

grid-column:span 2;

}

.bento-card.wide{

grid-column:span 2;

}

.bento-card.tall{

grid-row:span 2;

}

.card-icon{

width:72px;

height:72px;

display:flex;

align-items:center;

justify-content:center;

background:rgba(199,161,90,.10);

border-radius:20px;

margin-bottom:28px;

font-size:28px;

color:var(--accent);

transition:.35s;

}

.bento-card:hover .card-icon{

transform:rotate(-8deg) scale(1.08);

background:linear-gradient(135deg,
var(--accent),
#d8bc84);

color:white;

}

.bento-card h3{

margin-bottom:18px;

font-size:26px;

}

.bento-card p{

margin:0;

font-size:16px;

line-height:1.8;

}


/*=========================================================
BUSINESS MODEL
=========================================================*/

#business-model{

background:white;

}

.model-wrapper{

display:grid;

grid-template-columns:1fr auto 1fr;

gap:45px;

align-items:center;

}

.model-card{

padding:45px;

border-radius:24px;

box-shadow:var(--shadow);

background:white;

}

.model-card.traditional{

border-top:6px solid #d64545;

}

.model-card.prime{

border-top:6px solid var(--accent);

}

.model-title{

font-size:26px;

font-weight:700;

margin-bottom:28px;

}

.model-card li{

display:flex;

align-items:flex-start;

gap:14px;

margin-bottom:20px;

line-height:1.6;

}

.model-card li i{

margin-top:4px;

}

.model-card.traditional i{

color:#d64545;

}

.model-card.prime i{

color:#2fa866;

}

.model-divider{

display:flex;

align-items:center;

justify-content:center;

}

.model-divider span{

width:80px;

height:80px;

border-radius:50%;

background:var(--accent);

display:flex;

align-items:center;

justify-content:center;

color:white;

font-weight:700;

font-size:22px;

box-shadow:var(--shadow);

}


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

.bento-card,
.model-card,
.stat-card{

will-change:transform;

}

.bento-card:hover,
.model-card:hover{

box-shadow:

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

}

.model-card{

transition:.35s;

}

.model-card:hover{

transform:translateY(-8px);

}

/*=========================================================
 END PART 3
 NEXT:
 CAPABILITIES
 CTA
 BRANDS
=========================================================*/
/*=========================================================
 PART 4 OF 8
 CAPABILITIES
 CTA
 FEATURED BRANDS
=========================================================*/


/*=========================================================
CAPABILITIES
=========================================================*/

#capabilities{

background:#fafafa;

}

.capability-row{

display:grid;

grid-template-columns:1fr 1fr;

align-items:center;

gap:100px;

margin-bottom:140px;

position:relative;

}

.capability-row:last-child{

margin-bottom:0;

}

.capability-row.reverse{

direction:rtl;

}

.capability-row.reverse>*{

direction:ltr;

}


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

.capability-image{

position:relative;

}

.capability-image img{

border-radius:26px;

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

transition:.45s;

position:relative;

z-index:2;

}

/* efecto "breaking the grid" */

.capability-row:nth-child(even) .capability-image img{

transform:translateX(-35px);

}

.capability-row:nth-child(odd) .capability-image img{

transform:translateX(35px);

}

.capability-image::before{

content:"";

position:absolute;

width:180px;

height:180px;

background:linear-gradient(
135deg,
rgba(199,161,90,.12),
transparent);

border-radius:30px;

top:-30px;

left:-30px;

z-index:1;

}

.capability-row:hover img{

transform:scale(1.02);

}


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

.capability-content span{

display:inline-flex;

width:70px;

height:70px;

border-radius:50%;

justify-content:center;

align-items:center;

background:rgba(199,161,90,.10);

color:var(--accent);

font-size:28px;

font-weight:700;

margin-bottom:30px;

}

.capability-content h3{

font-size:42px;

margin-bottom:28px;

}

.capability-content p{

font-size:18px;

line-height:1.9;

max-width:560px;

}


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

#cta{

background:

linear-gradient(
135deg,
#111,
#1c1c1c);

padding:140px 0;

}

.cta-box{

background:

linear-gradient(
135deg,
rgba(255,255,255,.08),
rgba(255,255,255,.03));

border-radius:32px;

padding:90px;

text-align:center;

backdrop-filter:blur(18px);

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

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

}

.cta-box h2{

color:white;

font-size:54px;

margin-bottom:25px;

}

.cta-box p{

font-size:20px;

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

max-width:760px;

margin:auto;

margin-bottom:45px;

}


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

.brands-hero{

background:

linear-gradient(
135deg,
#0e0e0e,
#1d1d1d);

padding:160px 0;

position:relative;

overflow:hidden;

}

.brands-hero::before{

content:"";

position:absolute;

right:-120px;

top:-120px;

width:420px;

height:420px;

background:

radial-gradient(circle,
rgba(199,161,90,.18),
transparent 70%);

}


/*=========================================================
BRAND SHOWCASE
=========================================================*/

.brand-showcase{

padding:150px 0;

overflow:hidden;

}

.brand-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:90px;

align-items:center;

}

.brand-grid.reverse{

direction:rtl;

}

.brand-grid.reverse>*{

direction:ltr;

}


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

.brand-image{

position:relative;

}

.brand-image img{

border-radius:30px;

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

transition:.5s;

position:relative;

z-index:2;

}

.brand-image::after{

content:"";

position:absolute;

width:220px;

height:220px;

background:linear-gradient(
135deg,
rgba(199,161,90,.15),
transparent);

border-radius:40px;

right:-40px;

bottom:-40px;

z-index:1;

}

.brand-showcase:hover .brand-image img{

transform:scale(1.03);

}


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

.brand-logo{

max-width:220px;

margin-bottom:35px;

}

.brand-category{

display:inline-block;

letter-spacing:3px;

text-transform:uppercase;

font-size:13px;

font-weight:700;

color:var(--accent);

margin-bottom:20px;

}

.brand-content h2{

font-size:52px;

margin-bottom:28px;

}

.brand-content p{

font-size:17px;

line-height:1.9;

margin-bottom:30px;

}


/*=========================================================
HIGHLIGHTS
=========================================================*/

.brand-highlights{

display:grid;

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

gap:18px;

margin:40px 0;

}

.highlight{

display:flex;

align-items:center;

gap:12px;

padding:16px 20px;

background:#fafafa;

border-radius:14px;

transition:.3s;

}

.highlight i{

color:var(--accent);

}

.highlight:hover{

background:#111;

color:white;

transform:translateY(-4px);

}

.highlight:hover i{

color:#fff;

}


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

.brand-quote{

margin-top:40px;

padding:35px;

border-left:5px solid var(--accent);

background:#f7f7f7;

border-radius:18px;

position:relative;

}

.brand-quote i{

font-size:34px;

color:var(--accent);

margin-bottom:15px;

}

.brand-quote p{

font-style:italic;

margin:0;

font-size:17px;

}


/*=========================================================
SECTION VARIATIONS
=========================================================*/

.brand-showcase.hexclad{

background:#ffffff;

}

.brand-showcase.smeg{

background:#fbfbfb;

}

.brand-showcase.bialetti{

background:#ffffff;

}


/*=========================================================
 END PART 4
 NEXT:
 PORTFOLIO
 SUCCESS STORIES
 RETAIL PARTNERS
=========================================================*/
/*=========================================================
 PART 5 OF 8
 PORTFOLIO
 SUCCESS STORIES
 RETAIL PARTNERS
=========================================================*/


/*=========================================================
PORTFOLIO INTRO
=========================================================*/

.portfolio-intro{

background:#fafafa;

padding-bottom:70px;

}


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

.brands-grid{

background:#fafafa;

padding-top:30px;

}

.portfolio-grid{

display:grid;

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

gap:35px;

}

.portfolio-card{

background:#fff;

border-radius:24px;

padding:45px 35px;

text-align:center;

box-shadow:var(--shadow);

transition:.35s;

position:relative;

overflow:hidden;

min-height:260px;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

}

.portfolio-card img{

max-width:170px;

margin-bottom:30px;

transition:.4s;

}

.portfolio-card h3{

font-size:24px;

margin-bottom:15px;

transition:.3s;

}

.portfolio-card p{

opacity:0;

transform:translateY(20px);

transition:.35s;

margin:0;

font-size:15px;

line-height:1.7;

}

.portfolio-card::before{

content:"";

position:absolute;

left:0;

top:0;

width:100%;

height:5px;

background:linear-gradient(90deg,var(--accent),#d8bc84);

transform:scaleX(0);

transform-origin:left;

transition:.35s;

}

.portfolio-card:hover{

transform:translateY(-10px);

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

}

.portfolio-card:hover::before{

transform:scaleX(1);

}

.portfolio-card:hover img{

transform:scale(1.08);

}

.portfolio-card:hover p{

opacity:1;

transform:translateY(0);

}


/*=========================================================
SUCCESS STORIES
=========================================================*/

#success-stories{

background:#ffffff;

}

.case-study{

display:grid;

grid-template-columns:1fr 1fr;

gap:80px;

align-items:center;

margin-top:50px;

}

.case-image img{

border-radius:28px;

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

}

.case-label{

display:inline-block;

padding:8px 18px;

background:rgba(199,161,90,.12);

color:var(--accent);

font-size:13px;

font-weight:700;

letter-spacing:2px;

border-radius:999px;

margin-bottom:20px;

}

.case-content h2{

font-size:52px;

margin-bottom:10px;

}

.case-content h3{

font-size:30px;

margin-bottom:25px;

}

.case-content p{

font-size:17px;

line-height:1.9;

}


/*=========================================================
KPIs
=========================================================*/

.case-kpis{

display:grid;

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

gap:25px;

margin-top:45px;

}

.kpi{

background:#fafafa;

padding:30px;

border-radius:20px;

text-align:center;

transition:.35s;

}

.kpi:hover{

background:#111;

transform:translateY(-6px);

}

.kpi h3{

font-size:42px;

color:var(--accent);

margin-bottom:10px;

}

.kpi:hover span{

color:white;

}


/*=========================================================
PARTNERS INTRO
=========================================================*/

.partners-intro{

background:#111;

padding-bottom:60px;

}

.partners-intro .section-title h2{

color:#fff;

}

.partners-intro .section-title p{

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

}


/*=========================================================
RETAIL PARTNERS
=========================================================*/

#retail-partners{

background:#111;

padding-top:20px;

padding-bottom:100px;

overflow:hidden;

}

.partners-slider{

position:relative;

overflow:hidden;

}

.partners-track{

display:flex;

align-items:center;

gap:80px;

width:max-content;

animation:marquee 40s linear infinite;

}

.partners-slider:hover .partners-track{

animation-play-state:paused;

}

.partner-logo{

display:flex;

justify-content:center;

align-items:center;

min-width:220px;

height:120px;

opacity:.45;

transition:.35s;

filter:grayscale(100%);

}

.partner-logo:hover{

opacity:1;

filter:none;

transform:scale(1.08);

}

.partner-logo img{

max-width:170px;

max-height:70px;

object-fit:contain;

}


/*=========================================================
MARQUEE
=========================================================*/

@keyframes marquee{

0%{

transform:translateX(0);

}

100%{

transform:translateX(-50%);

}

}


/*=========================================================
SUBTLE DECORATION
=========================================================*/

#success-stories::before{

content:"";

position:absolute;

top:0;

right:0;

width:320px;

height:320px;

background:radial-gradient(circle,
rgba(199,161,90,.08),
transparent 70%);

pointer-events:none;

}

/*=========================================================
 END PART 5
 NEXT:
 MARKETS
 CONTACT
 FOOTER
=========================================================*/
/*=========================================================
 PART 6 OF 8
 MARKETS
 CONTACT
 FOOTER
=========================================================*/


/*=========================================================
REGIONAL PRESENCE
=========================================================*/

#markets{

background:#fafafa;

position:relative;

overflow:hidden;

}

.map-section{

display:flex;

justify-content:center;

align-items:center;

margin:80px 0;

}

.map-image{

position:relative;

max-width:900px;

width:100%;

}

.map-image img,
.map-image svg{

width:100%;

height:auto;

display:block;

filter:drop-shadow(0 20px 45px rgba(0,0,0,.12));

transition:.4s;

}

.map-image:hover img,
.map-image:hover svg{

transform:scale(1.02);

}


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

.markets-grid{

display:grid;

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

gap:35px;

margin-top:40px;

}

.market-card{

background:#fff;

padding:40px 35px;

border-radius:24px;

box-shadow:var(--shadow);

text-align:center;

transition:.35s;

position:relative;

overflow:hidden;

}

.market-card::before{

content:"";

position:absolute;

left:0;

top:0;

width:100%;

height:4px;

background:linear-gradient(90deg,var(--accent),#d8bc84);

transform:scaleX(0);

transform-origin:left;

transition:.35s;

}

.market-card:hover{

transform:translateY(-8px);

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

}

.market-card:hover::before{

transform:scaleX(1);

}

.market-card i{

font-size:40px;

color:var(--accent);

margin-bottom:22px;

}

.market-card h3{

margin-bottom:15px;

font-size:28px;

}

.market-card p{

margin:0;

line-height:1.8;

}


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

#contact{

background:#fff;

}

.contact-wrapper{

display:grid;

grid-template-columns:420px 1fr;

gap:70px;

align-items:start;

}

.contact-information h2{

margin:20px 0 30px;

}

.contact-information>span{

display:inline-block;

letter-spacing:3px;

font-size:13px;

font-weight:700;

color:var(--accent);

text-transform:uppercase;

}

.contact-item{

display:flex;

gap:20px;

align-items:flex-start;

margin-top:35px;

}

.contact-item i{

width:56px;

height:56px;

display:flex;

justify-content:center;

align-items:center;

border-radius:50%;

background:rgba(199,161,90,.10);

color:var(--accent);

font-size:22px;

flex-shrink:0;

}

.contact-item h4{

margin-bottom:6px;

}


/*=========================================================
FORM
=========================================================*/

.contact-form{

background:#fafafa;

padding:45px;

border-radius:30px;

box-shadow:var(--shadow);

}

.form-row{

display:grid;

grid-template-columns:1fr 1fr;

gap:25px;

}

.form-group{

margin-bottom:25px;

}

.form-group label{

display:block;

font-size:14px;

font-weight:600;

margin-bottom:10px;

color:#444;

}

.form-group input,
.form-group textarea{

width:100%;

padding:16px 18px;

border:1px solid var(--border);

border-radius:14px;

background:#fff;

transition:.3s;

font-size:15px;

}

.form-group input:focus,
.form-group textarea:focus{

border-color:var(--accent);

box-shadow:0 0 0 4px rgba(199,161,90,.15);

}

.hidden-field{

position:absolute;

left:-9999px;

opacity:0;

pointer-events:none;

}


/*=========================================================
FORM STATES
=========================================================*/

input.error,
textarea.error{

border-color:#d64545;

}

input.success,
textarea.success{

border-color:#2fa866;

}

.form-message{

display:none;

margin-top:20px;

padding:16px 18px;

border-radius:12px;

font-weight:600;

}

.form-message.success{

display:block;

background:#eaf8ef;

color:#2fa866;

}

.form-message.error{

display:block;

background:#fdecec;

color:#d64545;

}


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

footer{

background:#111;

color:#fff;

padding-top:80px;

}

.footer-grid{

display:grid;

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

gap:60px;

padding-bottom:60px;

}

.footer-grid h3,
.footer-grid h4{

color:#fff;

margin-bottom:20px;

}

.footer-grid p{

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

}

.footer-grid ul li{

margin-bottom:12px;

}

.footer-grid ul a{

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

transition:.3s;

}

.footer-grid ul a:hover{

color:var(--accent);

}

.social-links{

display:flex;

gap:16px;

margin-top:10px;

}

.social-links a{

width:46px;

height:46px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

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

transition:.3s;

}

.social-links a:hover{

background:var(--accent);

transform:translateY(-4px);

}

.footer-bottom{

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

padding:25px 0;

text-align:center;

}

.footer-bottom p{

margin:0;

font-size:14px;

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

}


/*=========================================================
DECORATIVE DETAILS
=========================================================*/

footer::before{

content:"";

position:absolute;

top:0;

left:50%;

transform:translateX(-50%);

width:180px;

height:2px;

background:linear-gradient(90deg,
transparent,
var(--accent),
transparent);

}
/*=========================================================
OUR PLATFORM COUNTERS
=========================================================*/

.stats-grid .counter,
.stats-grid h3{

color:#ffffff !important;

font-weight:800;

}

/*=========================================================
OUR PLATFORM TEXT
=========================================================*/

/*=========================================================
STATISTICS SECTION
=========================================================*/

#statistics .section-title span{

color:var(--accent);

}

#statistics .section-title h2{

color:#ffffff !important;

}

#statistics .section-title p{

color:#d9d9d9 !important;

}
/*=========================================================
CONTACT FORM RESPONSE
=========================================================*/

.form-response{

display:none;

margin-top:25px;

padding:18px 22px;

border-radius:10px;

font-weight:600;

transition:.4s;

animation:fadeUp .4s ease;

}

.form-response.success{

background:#dff6e8;

color:#18794e;

border-left:5px solid #24a148;

}

.form-response.error{

background:#fde8e8;

color:#b42318;

border-left:5px solid #d92d20;

}

.form-response.hide{

opacity:0;

transform:translateY(-10px);

}

/*=========================================================
 END PART 6
 NEXT:
 RESPONSIVE HELPERS
 GLOBAL ANIMATIONS
=========================================================*/