:root{
--pink:#f16a82;
--pink-soft:#f7a8b8;
--dark:#2b2b2b;
--bg:#efefef;
--thememeatbrown:#e0bc6a;
--themepurple:#27092F;
}
*{
margin: 0;
padding: 0;
overflow-x: hidden;
}
body{
font-family:'Poppins','Segoe UI',sans-serif;
color:var(--dark);
}

.home-hero-wrapper{
position:relative;
height: 700px;
background: url('../images/hero-background.png') center / cover no-repeat;
}
.home-content-row {
position: relative;
z-index: 999;
justify-content: start;
top: 14rem;
left: 7rem;
height: 65%;
scrollbar-width: none;
}

/* ---------- SIDEBAR NAV ---------- */
.side-nav{
padding-top:0px;
padding-left:0px;
}
.side-nav ul{
list-style:none;
padding:0;
margin:0 0 10px;
}
.side-nav li{
margin-bottom:10px;
}
.side-nav ul a{
color:var(--themepurple);
text-decoration:none;
font-weight:500;
font-size:1.02rem;
transition:color .2s;
}
.side-nav a:hover{
color:var(--thememeatbrown);
}
.side-nav ul a i{
color:var(--dark);
margin-right:8px;
font-size:0.75rem;
}
.side-nav .social-grid a i {
margin-right:0px;
}
.social-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:12px;
width:120px;
}
.social-grid a{
background-color: #fff;
width:44px;
height:44px;
border-radius:50%;
border:1px solid var(--thememeatbrown);
display:flex;
align-items:center;
justify-content:center;
color:var(--thememeatbrown);
text-decoration:none;
transition:.2s;
}
.social-grid a:hover{
background:rgba(208, 208, 208, 0.29);
color:var(--themepurple);
border-color:var(--themepurple);
}

/* intro section */
.introduction-content-row, .since-content-row {
position: relative;
justify-content: center;
align-items: center;
}
.intro-image {
position: relative;
background: url('../images/products/introduction-product.png') center / cover no-repeat;
height: 35rem;
width: 100%;
}
.intro-leftside{
position: absolute;
width: 50%;
padding: 0;
margin: 0px;
}
.introduction-eyebrow{
color:var(--thememeatbrown);
font-weight:600;
letter-spacing:2px;
font-size:0.85rem;
text-transform: uppercase;
margin-bottom:0px;
}
.into-top{
top:50px;
}
.into-bottom{
top:420px;
}
.intro-title, .since-title{
font-weight:500;
font-size:2.6rem;
text-transform: uppercase;
color:#222;
margin-bottom:40px;
}
.intro-btn {
background-color:var(--themepurple);
color: #ffff;
border: 2px solid var(--themepurple);
}
.intro-btn:hover {
background-color: rgba(255, 255, 255, 0.5);
border: 2px solid var(--thememeatbrown);
color:var(--thememeatbrown);
/* Transition rule */
transition: background-color 0.3s ease, transform 0.3s ease;
}
.intro-btn:hover p{
transform: scaleX(1.1);
transition: transform 0.3s ease;
}
.intro-description, .since-description {
font-size: 12px;
}

/* since section */
.since-intro-image {
position: relative;
background: url('../images/products/since-product.png') center / cover no-repeat;
height: 35rem;
width: 100%;
}
.since-intro-center{
position: absolute;
color:#ffff;
width: 40%;
padding: 0;
margin: 0px;
}
.since-intro-title{
font-weight:500;
font-size:2rem;
text-transform: uppercase;
margin-bottom:40px;
}
.since-intro-description{
font-size: 12px;
}
.since-into-top{
top:250px;
}
.since-image-model{
width: 30%;
}

/* about section */
.about-intro-image {
position: relative;
background: url('../images/products/about-more.png') center / cover no-repeat;
height: 620px;
width: 100%;
margin-top: 55px;
}
.about-eyebrow {
color: var(--thememeatbrown);
font-weight: 600;
letter-spacing: 2px;
font-size: 0.85rem;
text-transform: uppercase;
margin-bottom: 0px;
}
.about-intro-center{
position: absolute;
z-index: 999;
color:#000000;
width: 55%;
left: 40%;
padding: 0;
margin-top: 200px;
}
.about-intro-title{
font-weight:500;
font-size:2.6rem;
text-transform: uppercase;
margin-bottom:40px;
}
.about-intro-description{
font-size: 12px;
}

/* testimonials section */
.testimonials-background{
position:relative;
background:url('../images/testimonials-background.png') center / cover no-repeat;
padding:70px 0;
width:100%;
}
/* soft overlay so text stays readable over the photo */
.testimonials-background::before{
content:'';
position:absolute;
inset:0;
background:rgba(255,255,255,0.3);
}
.testimonials-content-row{
position:relative;
height: 20rem;
z-index:2;
}
.testimonials-eyebrow{
text-align:center;
color:var(--thememeatbrown);
font-weight:700;
letter-spacing:2px;
font-size:0.85rem;
margin-bottom:6px;
}
.testimonials-heading{
text-align:center;
font-weight:800;
font-size:2.4rem;
color:#222;
margin-bottom:40px;
}
/* card holding photo + quote */
.testimonial-card{
display:flex;
align-items:flex-start;
gap:22px;
max-width:800px;
margin:0 20px;
justify-content: center;
align-items: center;
transition: opacity 0.2s ease;
}
.testimonials-user-image{
width:110px;
height:110px;
flex:0 0 110px;
background:#ccc center / cover no-repeat;
}
.testimonials-leftside{
text-align:left;
}
.testimonial-title{
font-weight:700;
font-size:1.1rem;
margin-bottom:10px;
color:#222;
}
.testimonial-text{
font-size:0.92rem;
line-height:1.7;
color:#444;
margin-bottom:12px;
}
.testimonial-author{
font-weight:600;
font-size:0.9rem;
color:#222;
}
/* nav arrows */
.testimonial-arrow{
width:38px;
height:38px;
border-radius:50%;
border:1px solid rgba(0,0,0,0.25);
background: var(--thememeatbrown);
color:#fff;
display:flex;
align-items:center;
justify-content:center;
flex:0 0 38px;
transition:.2s;
}
.testimonial-arrow:hover{
background:var(--themepurple);
border-color:var(--thememeatbrown);
color:#fff;
}
.testimonial-row-flex{
display:flex;
align-items:center;
justify-content: center;
justify-content:center;
gap:24px;
}

/* subscribe section */
.subscribe-eyebrow{
text-align:center;
color:var(--thememeatbrown);
font-weight:600;
letter-spacing:2px;
font-size:0.85rem;
margin-bottom:6px;
}
.subscribe-title{
font-weight:700;
font-size:2.6rem;
text-transform: uppercase;
color:#222;
margin-bottom:40px;
}
.subscribe-content-row{
position:relative;
z-index:999;
justify-content: center;
}
.subscribe-leftside{
margin: 0px;
}
.subscribe-btn {
background-color: var(--themepurple);
color: #fff;
border: 2px solid transparent;
transition: background-color 0.3s ease;
}
.subscribe-btn:hover {
background-color:rgba(255, 255, 255, 0.5);
border: 2px solid var(--thememeatbrown);
}
.subscribe-btn:hover p {
transform: scaleX(1.1);
color:var(--thememeatbrown);
transition: transform 0.3s ease, transform 0.3s ease;
}
.subscribe-description {
font-size: 12px;
}
.subscribe-section, .footer-section {
padding: 70px 0px;
}