/* Variables for Consistency */
:root {
    --primary-color: #d4af37; /* Moto Bold Red */
    --dark-color: #08172f;
    --light-color: #0c0c0c;
    --gray-color: #070707;
}

/* Hero Section / Main Title */
.about-hero {
    text-align: center;
    padding: 80px 20px 40px;
    background-color: #f0ebeb;
    border-bottom: 1px solid #eeeeee;
}

.hero-title {
    font-size: 4rem;
    font-weight: 900;
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 3px;
    margin: 0;
}

/* Layout Grid Container */
.about-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 20px 100px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

/* Left Content Column */
.about-content .main-heading {
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--dark-color);
    text-transform: uppercase;
    margin-bottom: 25px;
    line-height: 1.2;
    letter-spacing: -0.5px;
}

.about-content .description-text {
    color: var(--gray-color);
    font-size: 1.05rem;
    line-height: 1.8;
    margin-bottom: 35px;
    font-weight: 500;
    text-align: justify;
}

/* Key Capabilities Heavy List */
.capabilities-title {
    font-size: 1.6rem;
    font-weight: 900;
    color: var(--primary-color);
    text-transform: uppercase;
    margin-bottom: 25px;
    letter-spacing: 0.5px;
}

.capabilities-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.capabilities-list li {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    color: var(--dark-color);
    text-transform: uppercase;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.3s ease;
}

/* List Hover Animation */
.capabilities-list li:hover {
    transform: translateX(15px);
    color: var(--primary-color);
}

.capabilities-list li i {
    color: var(--primary-color);
    margin-right: 15px;
    font-size: 1.3rem;
}

/* Right Column: Image Design with Heavy Borders */
.about-image-wrapper {
    position: relative;
    padding: 10px;
}

/* Background Heavy Red Frame Effect */
.about-image-wrapper::before {
    content: '';
    position: absolute;
    top: -15px;
    left: -15px;
    width: 100%;
    height: 100%;
    border: 6px solid var(--primary-color);
    border-radius: 24px;
    z-index: 1;
    pointer-events: none;
    transition: all 0.4s ease;
}

.about-image {
    width: 100%;
    height: auto;
    border-radius: 20px;
    display: block;
    position: relative;
    z-index: 2;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.35);
    filter: grayscale(25%);
    transition: filter 0.4s ease, transform 0.4s ease;
}

/* Image Wrapper Hover Effect */
.about-image-wrapper:hover::before {
    top: -5px;
    left: -5px;
    border-color: var(--dark-color);
}

.about-image-wrapper:hover .about-image {
    filter: grayscale(0%);
    transform: scale(1.02);
}

/* Responsive Breakdown for Tablets and Mobile */
@media (max-width: 968px) {
    .about-container {
        grid-template-columns: 1fr;
        gap: 45px;
        padding: 40px 20px 60px;
    }

    .hero-title {
        font-size: 2.8rem;
    }

    .about-content .main-heading {
        font-size: 2rem;
    }
    
    .about-image-wrapper {
        margin-top: 20px;
    }
}

/* ===== CTA BAR ===== */
  .cta-bar { background: #050d1c; padding: 40px 50px; border-radius: 6px; display: flex; justify-content: space-between; align-items: center; gap: 30px; border: 1px solid rgba(212, 175, 55, 0.12); overflow: hidden; }
  .cta-content { max-width: 75%; text-align: left; opacity: 0; transform: scale(0.75); transition: opacity 0.9s cubic-bezier(.22,1,.36,1), transform 0.9s cubic-bezier(.22,1,.36,1); }
  .cta-content.show { opacity: 1; transform: scale(1); }
  .cta-bar h2 { color: #D4AF37; font-family: 'Outfit', sans-serif; font-size: 1.85rem; font-weight: 700; margin-bottom: 10px; }
  .cta-bar p { color: #f5f7fa; font-size: 1.05rem; font-weight: 400; line-height: 1.6; margin: 0; }
  .btn-white { background: #ffffff; color: #050d1c; padding: 15px 32px; border-radius: 4px; font-weight: 700; font-size: 0.9rem; letter-spacing: 0.5px; text-transform: uppercase; text-decoration: none; white-space: nowrap; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); transition: all 0.4s cubic-bezier(.22, 1, .36, 1); }
  .btn-white:hover { background: #D4AF37; color: #050d1c; border-color: #D4AF37; transform: translateY(-3px); box-shadow: 0 8px 25px rgba(212, 175, 55, 0.35); }

  /*what we do*/
  /* Variables for Consistency */
:root {
    --primary-color: #d4af37; /* Moto Bold Gold */
    --dark-color: #08172f;
    --light-color: #0c0c0c;
    --gray-color: #070707;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:'Outfit', sans-serif; background:#f0ebeb;}

/* Hero Section / Main Title */
.about-hero {
    text-align: center;
    padding: 80px 20px 40px;
    background-color: #f0ebeb;
    border-bottom: 1px solid #eeeeee;
}

.hero-title {
    font-size: 4rem;
    font-weight: 900;
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 3px;
    margin: 0;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1);
}
.hero-title.show{ opacity:1; transform:translateY(0); }
.hero-sub{
    color:var(--gray-color);
    font-size:1rem;
    font-weight:500;
    margin-top:14px;
    opacity:0;
    transform:translateY(20px);
    transition: opacity .8s cubic-bezier(.22,1,.36,1) .15s, transform .8s cubic-bezier(.22,1,.36,1) .15s;
}
.hero-sub.show{opacity:1;transform:translateY(0);}

/* ===== WHAT WE DO GRID ===== */
.what-container{
    max-width:1200px;
    margin:0 auto;
    padding:70px 20px 40px;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:40px;
}
.what-card{
    background:#ffffff;
    border-radius:16px;
    padding:38px 34px;
    position:relative;
    box-shadow:0 15px 35px rgba(0,0,0,0.06);
    border:2px solid transparent;
    opacity:0;
    transform:translateY(40px) scale(.96);
    transition:opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1), border-color .4s ease, box-shadow .4s ease;
}
.what-card.show{opacity:1;transform:translateY(0) scale(1);}
.what-card:nth-child(1){transition-delay:.05s;}
.what-card:nth-child(2){transition-delay:.15s;}
.what-card:nth-child(3){transition-delay:.25s;}
.what-card:nth-child(4){transition-delay:.35s;}
.what-card:hover{
    border-color:var(--primary-color);
    transform:translateY(-8px) scale(1);
    box-shadow:0 25px 45px rgba(212,175,55,0.18);
}
.what-card i{
    font-size:1.7rem;
    color:var(--primary-color);
    margin-bottom:18px;
    display:inline-block;
    transition:transform .4s cubic-bezier(.175,.885,.32,1.275);
}
.what-card:hover i{ transform: scale(1.2) rotate(-8deg); }
.what-card h3{
    font-size:1.3rem;
    font-weight:900;
    color:var(--dark-color);
    text-transform:uppercase;
    letter-spacing:0.3px;
    margin-bottom:14px;
}
.what-card p{
    color:var(--gray-color);
    font-size:0.98rem;
    line-height:1.75;
    font-weight:500;
}

/* Layout Grid Container */
.about-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 20px 100px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

/* Left Content Column */
.about-content{
    opacity:0;
    transform:translateX(-40px);
    transition:opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1);
}
.about-content.show{opacity:1;transform:translateX(0);}

.about-content .main-heading {
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--dark-color);
    text-transform: uppercase;
    margin-bottom: 25px;
    line-height: 1.2;
    letter-spacing: -0.5px;
}
.about-content .main-heading span{ color: var(--primary-color); }

.about-content .description-text {
    color: var(--gray-color);
    font-size: 1.05rem;
    line-height: 1.8;
    margin-bottom: 35px;
    font-weight: 500;
    text-align: justify;
}

/* Key Capabilities Heavy List */
.capabilities-title {
    font-size: 1.6rem;
    font-weight: 900;
    color: var(--primary-color);
    text-transform: uppercase;
    margin-bottom: 25px;
    letter-spacing: 0.5px;
}

.capabilities-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.capabilities-list li {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    color: var(--dark-color);
    text-transform: uppercase;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.3s ease;
}

/* List Hover Animation */
.capabilities-list li:hover {
    transform: translateX(15px);
    color: var(--primary-color);
}

.capabilities-list li i {
    color: var(--primary-color);
    margin-right: 15px;
    font-size: 1.3rem;
}

/* Right Column: Image Design with Heavy Borders */
.about-image-wrapper {
    position: relative;
    padding: 10px;
    opacity:0;
    transform:translateX(40px);
    transition:opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1);
}
.about-image-wrapper.show{opacity:1;transform:translateX(0);}

/* Background Heavy Gold Frame Effect */
.about-image-wrapper::before {
    content: '';
    position: absolute;
    top: -15px;
    left: -15px;
    width: 100%;
    height: 100%;
    border: 6px solid var(--primary-color);
    border-radius: 24px;
    z-index: 1;
    pointer-events: none;
    transition: all 0.4s ease;
}

.about-image {
    width: 100%;
    height: auto;
    border-radius: 20px;
    display: block;
    position: relative;
    z-index: 2;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.35);
    filter: grayscale(25%);
    transition: filter 0.4s ease, transform 0.4s ease;
}

/* Image Wrapper Hover Effect */
.about-image-wrapper:hover::before {
    top: -5px;
    left: -5px;
    border-color: var(--dark-color);
}

.about-image-wrapper:hover .about-image {
    filter: grayscale(0%);
    transform: scale(1.02);
}
/* Responsive Breakdown for Tablets and Mobile */
@media (max-width: 968px) {
    .about-container {
        grid-template-columns: 1fr;
        gap: 45px;
        padding: 40px 20px 60px;
    }
    .what-container{ grid-template-columns:1fr; }

    .hero-title {
        font-size: 2.8rem;
    }

    .about-content .main-heading {
        font-size: 2rem;
    }
    
    .about-image-wrapper {
        margin-top: 20px;
    }
    .cta-bar{ flex-direction:column; text-align:center; padding:34px 26px; }
    .cta-content{ max-width:100%; text-align:center; }
}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important;}
  .hero-title,.hero-sub,.what-card,.about-content,.about-image-wrapper,.cta-content{opacity:1 !important;transform:none !important;}
}

/* ===== WHY US SECTION ===== */
  .why-us { background: #f8f9fa; padding: 60px 0 100px; }
  .why-grid { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 35px; 
    max-width: 1300px; 
    margin: 0 auto;
  }
  .why-card { 
    background: #0f172a; 
    padding: 40px 30px; 
    border-radius: 15px; 
    text-align: center; 
    border: 1px solid rgba(212,175,55,0.2);
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    transform-style: preserve-3d; 
    perspective: 1000px; 
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; 
    height: 100%; 
  }
  .why-card:hover { 
    transform: perspective(1000px) translateY(-12px) rotateX(3deg); 
    border-color: #D4AF37; 
    box-shadow: 0 0 25px rgba(212,175,55,0.5), 0 0 50px rgba(212,175,55,0.3); 
  }
  .why-card img { width: 60px; margin-bottom: 20px; transition: transform 0.4s ease; }
  .why-card:hover img { transform: rotateY(360deg); }
  .why-card h3 { color: #D4AF37; font-size: 1.4rem; margin-bottom: 10px; }
  .why-card p { color: #ffffff; }

  /* ===== SCROLL ANIMATION ===== */
  .slide-right { opacity: 0; transform: translateX(100px); transition: opacity 0.8s ease, transform 0.8s ease; }
  .slide-right.show { opacity: 1; transform: translateX(0); }
  .range-card:nth-child(1) { transition-delay: 0.1s; }
  .range-card:nth-child(2) { transition-delay: 0.2s; }
  .range-card:nth-child(3) { transition-delay: 0.3s; }
  .range-card:nth-child(4) { transition-delay: 0.4s; }
  .why-card:nth-child(1) { transition-delay: 0.1s; }
  .why-card:nth-child(2) { transition-delay: 0.2s; }
  .why-card:nth-child(3) { transition-delay: 0.3s; }
  .why-card:nth-child(4) { transition-delay: 0.4s; }
  .why-card:nth-child(5) { transition-delay: 0.5s; }
  .why-card:nth-child(6) { transition-delay: 0.6s; }

  /* ===== RESPONSIVE ===== */
  @media (max-width: 980px) {
    .range-grid { grid-template-columns: 1fr; gap: 35px; }
    .range-img img { height: 360px; }
    .cta-bar { flex-direction: column; text-align: center; padding: 35px 25px; gap: 22px; }
    .cta-content { max-width: 100%; text-align: center; }
    .why-grid { grid-template-columns: repeat(2, 1fr); } 
  }
  @media (max-width: 640px) {
    .range-img img { height: 280px; }
    .cta-bar h2 { font-size: 1.4rem; }
    .cta-bar p { font-size: 0.95rem; }
    .why-grid { grid-template-columns: 1fr; } 
  }