/*=========================================================
 PRIME BRANDS WEBSITE
 responsive.css
 PART 1 OF 2
=========================================================*/


/*=========================================================
1400px
=========================================================*/

@media (max-width:1400px){

.hero-content h1{

font-size:62px;

}

.hero-stats{

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

}

.container{

width:min(94%,1280px);

}

}


/*=========================================================
1200px
=========================================================*/

@media (max-width:1200px){

h1{

font-size:56px;

}

h2{

font-size:42px;

}

.about-grid,

.brand-grid,

.case-study,

.capability-row,

.contact-wrapper{

grid-template-columns:1fr;

gap:60px;

}

.brand-grid.reverse,

.capability-row.reverse{

direction:ltr;

}

.hero-content{

max-width:100%;

}

.hero-stats{

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

}

.feature-list{

grid-template-columns:1fr;

}

.stats-grid{

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

}

.bento-grid{

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

}

.bento-card.large,

.bento-card.wide{

grid-column:span 2;

}

.model-wrapper{

grid-template-columns:1fr;

}

.model-divider{

margin:30px 0;

}

.portfolio-grid{

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

}

.case-kpis{

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

}

.markets-grid{

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

}

.footer-grid{

grid-template-columns:1fr 1fr;

}

}


/*=========================================================
992px
=========================================================*/

@media (max-width:992px){

.nav-menu{

position:fixed;

top:90px;

right:-100%;

width:320px;

height:calc(100vh - 90px);

background:#111;

display:flex;

flex-direction:column;

align-items:flex-start;

padding:40px;

gap:25px;

transition:.4s;

box-shadow:-10px 0 40px rgba(0,0,0,.2);

}

.nav-menu.active{

right:0;

}

#mobileButton{

display:block;

}

.btn-nav{

display:none;

}

.hero-content h1{

font-size:56px;

}

.hero-description{

font-size:18px;

}

.hero-stats{

grid-template-columns:1fr;

}

.about-image::after{

display:none;

}

.capability-row{

margin-bottom:100px;

}

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

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

transform:none;

}

.brand-image::after{

display:none;

}

.contact-wrapper{

grid-template-columns:1fr;

}

.contact-information{

text-align:center;

}

.contact-item{

justify-content:center;

}

.footer-grid{

grid-template-columns:1fr;

text-align:center;

}

.social-links{

justify-content:center;

}

}


/*=========================================================
768px
=========================================================*/

@media (max-width:768px){

section{

padding:90px 0;

}

.hero{

min-height:auto;

padding:160px 0 120px;

}

.hero-content{

text-align:center;

}

.hero-buttons{

justify-content:center;

}

.hero-content h1{

font-size:46px;

}

.section-title{

margin-bottom:60px;

}

.section-title h2{

font-size:38px;

}

.stats-grid,

.markets-grid,

.portfolio-grid{

grid-template-columns:1fr;

}

.case-kpis{

grid-template-columns:1fr;

}

.bento-grid{

grid-template-columns:1fr;

grid-auto-rows:auto;

}

.bento-card.large,

.bento-card.wide,

.bento-card.tall{

grid-column:auto;

grid-row:auto;

}

.cta-box{

padding:60px 40px;

}

.cta-box h2{

font-size:40px;

}

.brand-highlights{

grid-template-columns:1fr;

}

.form-row{

grid-template-columns:1fr;

}

}


/*=========================================================
END PART 1
PART 2:
576px
SMALL DEVICES
PRINT
=========================================================*/
/*=========================================================
576px
=========================================================*/

@media (max-width:576px){

html{

font-size:15px;

}

section{

padding:75px 0;

}

.container{

width:92%;

}

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

h1{

font-size:38px;

}

h2{

font-size:32px;

}

h3{

font-size:24px;

}

.hero-content h1{

font-size:36px;

line-height:1.15;

}

.hero-description{

font-size:16px;

line-height:1.7;

}

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

.navbar{

height:80px;

}

.nav-menu{

top:80px;

width:100%;

padding:35px;

}

.logo-primary{

font-size:22px;

}

.logo-secondary{

font-size:11px;

letter-spacing:3px;

}

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

.hero-buttons{

flex-direction:column;

align-items:center;

}

.btn-primary,
.btn-secondary{

width:100%;

max-width:320px;

}

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

.hero-stat{

padding:28px;

}

.hero-stat h3{

font-size:34px;

}

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

.cta-box{

padding:45px 28px;

border-radius:22px;

}

.cta-box h2{

font-size:32px;

}

.cta-box p{

font-size:17px;

}

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

.brand-logo{

max-width:170px;

}

.brand-content h2{

font-size:34px;

}

.brand-highlights{

gap:14px;

}

.highlight{

padding:15px;

}

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

.case-content h2{

font-size:36px;

}

.case-content h3{

font-size:24px;

}

.case-kpis{

gap:20px;

}

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

.contact-form{

padding:28px;

}

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

padding:15px;

font-size:15px;

}

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

.footer-grid{

gap:40px;

}

.footer-bottom{

font-size:13px;

}

.social-links a{

width:44px;

height:44px;

}

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

.partner-logo{

min-width:170px;

height:90px;

}

.partner-logo img{

max-width:120px;

}

}


/*=========================================================
TOUCH DEVICES
=========================================================*/

@media (hover:none){

.portfolio-card:hover,
.bento-card:hover,
.market-card:hover,
.stat-card:hover,
.model-card:hover,
.highlight:hover{

transform:none;

}

.portfolio-card p{

opacity:1;

transform:none;

}

}


/*=========================================================
HIGH RESOLUTION DISPLAYS
=========================================================*/

@media (-webkit-min-device-pixel-ratio:2),
(min-resolution:192dpi){

img{

image-rendering:auto;

}

}


/*=========================================================
PRINT
=========================================================*/

@media print{

*{

background:white !important;

color:black !important;

box-shadow:none !important;

animation:none !important;

transition:none !important;

}

header,
footer,
.hero-buttons,
.scroll-down,
#backToTop,
video{

display:none !important;

}

section{

padding:25px 0;

page-break-inside:avoid;

}

img{

max-width:100%;

page-break-inside:avoid;

}

a{

text-decoration:none;

color:black;

}

}


/*=========================================================
ACCESSIBILITY
=========================================================*/

:focus-visible{

outline:3px solid var(--accent);

outline-offset:4px;

}

button,
a,
input,
textarea{

min-height:44px;

}


/*=========================================================
END responsive.css
=========================================================*/