/* GLOBAL */

.about-container{
width:90%;
max-width:1200px;
margin:auto;
}

section{
padding:30px 0;
}

/* HERO */

.about-hero{
position:relative;
background:url('assets/img/slider.png') center/cover no-repeat;
color:white;
text-align:center;
padding:150px 20px;
}

.about-hero::before{
content:"";
position:absolute;
inset:0;
background:rgba(0,60,70,0.65);
}

.about-hero .about-container{
position:relative;
z-index:2;
}

.about-hero h1{
font-size:38px;
color:#fff;
}

.about-hero span{
color:#d6926c;
font-style:italic;
}

.about-hero p{
margin-top:20px;
font-size:20px;
color:#fff;
}

/* PROMISE */

.promise-section{
background:linear-gradient(135deg,#caece9,#caece8);
}

.promise-grid{
row-gap:30px;
}

.promise-box{
padding:30px;
border-radius:10px;
text-align:center;
height:100%;
transition:.3s;
}

.promise-box:hover{
transform:translateY(-8px);
box-shadow:0 10px 25px rgba(0,0,0,0.1);
}

.promise-box img{
width:50px;
margin-bottom:20px;
}

.promise-box h3{
font-size:20px;
margin-bottom:10px;
}

/* DESC */

.desc-title{
max-width:800px;
margin:0 auto 50px;
font-size:22px;
font-style:italic;
color:#555;
text-align:center;
padding:0 20px;
}

/* QUOTE */

.quote-section{
background:#fff;
text-align:center;
}

.quote-section h2{
font-size:38px;
line-height:1.6;
}

.quote-section span{
color:#d6926c;
}

/* ORIGIN TIMELINE */

.origin-section{
background:linear-gradient(135deg,#caece9,#caece8);
}

.origin-title{
font-size:48px;
margin-bottom:70px;
}

.origin-title span{
color:#c57a5c;
font-style:italic;
}

.timeline-row{
display:grid;
grid-template-columns:200px 60px 1fr;
gap:20px;
margin-bottom:60px;
align-items:flex-start;
}

.timeline-left{
text-align:center;
}

.timeline-left img{
width:100px; 
border-radius:10px;
}

.timeline-left p{
font-size:12px;
letter-spacing:2px;
color:#777;
text-transform:uppercase;
}

.timeline-middle{
position:relative;
display:flex;
justify-content:center;
}

.timeline-middle::before{
content:"";
position:absolute;
top:0;
bottom:0;
width:2px;
background:#d0a088;
height:100px;
}

.timeline-dot{
width:10px;
height:10px;
background:#c57a5c;
border-radius:50%;
position:relative;
top:46px;
}

.timeline-content h3{
font-size:22px;
margin-bottom:10px;
text-align:left;
}

.timeline-content p{
color:#444;
line-height:1.7;
text-align:left;
}

/* ROOTS */

.roots-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center;
}

.roots-image img{
width:100%;
border-radius:10px;
}

.stats{
display:flex;
gap:60px;
margin-top:40px;
}

.stats h2{
font-size:55px;
color:#244236;
}

/* CTA */

.cta-section{
background:linear-gradient(135deg,#caece9,#caece8);
text-align:center;
}

.cta-section h2{
font-size:40px;
}

.cta-btn{
display:inline-block;
background:white;
color:black;
padding:15px 40px;
margin-top:30px;
text-decoration:none;
font-weight:600;
border-radius:4px;
}

/* OFFER */

.offer-badge{
display:inline-block;
color:white;
border:2px solid #035474;
font-size:28px;
font-weight:700;
padding:9px 22px;
margin-bottom:10px;
border-radius:3px;
}

/* MOBILE */

@media(max-width:768px){

section{
padding:70px 0;
}

.about-hero h1{
font-size:32px;
}

.timeline-row{
grid-template-columns:1fr;
}

.timeline-middle{
display:none;
}

.roots-grid{
grid-template-columns:1fr;
}

.stats{
flex-direction:column;
gap:20px;
}

.promise-box{
margin-bottom:20px;
}

}

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

.feature-row{
margin-top:-50px;
padding-bottom:60px;
}

.feature-card{
background:#fff;
border-radius:12px;
padding:25px;
text-align:center;
box-shadow:0 10px 30px rgba(0,0,0,0.05);
height:100%;
transition:.3s;
}

.feature-card:hover{
transform:translateY(-6px);
}

.feature-card img{
width:100%;
height:180px;
object-fit:cover;
border-radius:8px;
margin-bottom:15px;
}

.feature-card h4{
font-weight:600;
margin-bottom:10px;
}

/* ================= TRUST LOGOS ================= */

.trust-logos{
padding:5px 0;
text-align:center;
}

.trust-logos img{
height:60px;
margin:1px 5px;
opacity:.85;
transition:.3s;
}
.trust-logos img{
	height:90px;
}

.behodasize{
    height:85px !important;
}

.trust-logos img:hover{
opacity:1;
transform:scale(1.05);
}

.custom-card{
    position: relative;
    border-radius: 8px;
    overflow: visible;
    text-align:center;
}

.card-image img{
    width:100%;
    height: 180px;
    border-radius:58px 0px 0px 0px;
}

.card-content{
    background:#fff;
    padding:20px;
    width:100%;
    margin:auto;
    margin-top:0px;
    border-radius:0px 0px 28px 0px;
    box-shadow:0 10px 30px rgba(0,0,0,0.15);
}

.card-content h4{
    font-size:18px;
    font-weight:600;
    margin-bottom:10px;
    font-family:serif;
}



/* ================= Check List ================= */

/* SECTION */
.check-list {
  background: url('assets/img/reception.png') center/cover no-repeat;
  padding: 30px 0;
}

.check-list .overlay {
 background: linear-gradient(135deg, rgba(0,60,70,0.9), rgba(0,0,0,0.85));
  padding: 38px 0;
}

/* TITLE */
.section-title {
  text-align: center;
  color: #fff;
  font-size: 33px;
  margin-bottom: 80px;
  font-family: serif;
}

/* FULL WIDTH WRAPPER */
.checklist-wrapper {
  width: 100%;
  padding: 0 60px;
  display: flex;
  flex-direction: column;
  gap: 60px;
}


/* IMAGE */
.step-img {
  width: 85%;
  height: 53;
  min-height: 100px;
  object-fit: cover;
  transition: 0.5s;
  border-radius: 10px;
  border: 1px solid #cbcdcd;
  box-shadow: 0px 0px 9px 0px;
}

.step-img:hover {
  transform: scale(1.06);
}

/* CONTENT */
.step-content {
  padding: 28px;
}

.step-content h3 {
  font-size: 24px;
  margin-bottom: 15px;
  color: #fff;
}

.step-content ul {
  padding-left: 1px;
}

.step-content li {
  margin-bottom: 5px;
  font-size: 16px;
  color: #fff;
  line-height: 1.6;
  font-family: sans-serif;
}

/* MOBILE */
@media(max-width:768px){
  .checklist-wrapper {
    padding: 0 20px;
  }

  .section-title {
    font-size: 28px;
    margin-bottom: 50px;
  }

  .step-content {
    padding: 25px;
  }

  .step-img {
    min-height: 200px;
  }
  
  .trust-logos img{
    height:64px;
    }
    .behodasize{
        height:60px !important;
    }
}
/* Remove default bullets */
.styled-list {
  list-style: none;
  padding: 0;
  margin-top: 5px;
}

/* Each item */
.styled-list li {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  background: rgba(0,0,0,0.07);
  padding: 5px 10px;
  border-radius: 8px;
  margin-bottom: 3px;
  font-size: 16px;
  color: #fff;
  transition: 0.3s;
}

/* Icon */
.styled-list li span {
  color: #0bbcd6;
  font-weight: bold;
  font-size: 18px;
  margin-top: 2px;
}

/* Hover effect */
.styled-list li:hover {
  background: rgba(11,188,214,0.08);
  transform: translateX(5px);
}

/* Profassional effect ECTION BACKGROUND */
.office-section {
  background: url('assets/img/slider.png') center/cover no-repeat;
  padding: 0px 0px;
  position: relative;
}

.office-section .overlay {
  background: linear-gradient(135deg, rgba(0,60,70,0.9), rgba(0,0,0,0.85));
  padding: 80px 20px;
}

/* TEXT CONTENT */
.office-content h2 {
  color: #fff;
  font-size: 42px;
  margin-bottom: 20px;
  font-family: serif;
}

.sub-text {
  color: #ddd;
  font-size: 18px;
  max-width: 700px;
  margin: 0 auto 20px;
  line-height: 1.7;
}

.recurring {
  color: #0bbcd6;
  font-weight: 600;
  font-size: 16px;
}

/* CTA BOX */
.cta-banner {
  margin-top: 20px;
  padding: 15px 10px;
  border-radius: 6px;
  text-align: center;
  box-shadow: 0 25px 70px rgba(0,0,0,0.25);
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  transition: 0.3s;    
  
}

/* Hover subtle lift */
.cta-banner:hover {
  transform: translateY(-5px);
}

/* CTA TEXT */
.cta-banner h3 {
  font-size: 24px;
  color: #fff;
  margin-bottom: 15px;
}

.cta-sub {
  font-size: 18px;
  color: #0bbcd6;
  margin-bottom: 25px;
  font-weight: 600;
}

/* BUTTONS */
.cta-buttons {
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
}

.btn-primary {
  background: #0bbcd6;
  color: #fff;
  padding: 14px 30px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  transition: 0.3s;
}

.btn-primary:hover {
  background: #099bb0;
}

.btn-secondary {
  background: #222;
  color: #fff;
  padding: 14px 30px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  transition: 0.3s;
}

.btn-secondary:hover {
  background: #000;
}

/* MOBILE */
@media(max-width:768px){
  .office-content h2 {
    font-size: 28px;
  }

  .cta-banner {
    padding: 30px 20px;
  }

  .cta-banner h3 {
    font-size: 18px;
  }
}

.deeplink{
    color: #f6f6f6;
    text-decoration: none;
}