*
{
    box-sizing:border-box;
    margin:0;
    padding:0
}

:root {
  --red: #e31b23;
  --dark-red: #b80f18;
  --yellow: #ffd42a;
  --gold: #f2b705;
  --dark: #202020;
  --text: #5f5f5f;
  --white: #ffffff;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family:
    "Manrope",
    sans-serif;
  color:
    var(--dark);
  background:
    radial-gradient(
      circle at 8% 12%,
      rgba(
        255,
        212,
        42,
        0.16
      ),
      transparent 25%
    ),

    radial-gradient(
      circle at 92% 30%,
      rgba(
        227,
        27,
        35,
        0.07
      ),
      transparent 27%
    ),

    linear-gradient(
      135deg,
      #ffffff 0%,
      #fffdf5 48%,
      #fff5eb 100%
    );

  background-attachment:
    fixed;

  overflow-x:
    hidden;
}


h1,
h2,
h3,
h4,
.nav-link,
.hero-btn,
.primary-btn,
.secondary-btn {
  font-family:
    "Outfit",
    sans-serif;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 65px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 6%;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 2px solid #e31b23;
  box-shadow:
    0 5px 20px
    rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(10px);  
}

.brand-logo {
  display: flex;
  align-items: center;
  width: 220px;
  height: 58px;
  text-decoration: none;
  overflow: hidden;
}

.brand-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
}

.about-navbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    height: 82px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 7%;
    box-sizing: border-box;
    background:
        rgba(255, 255, 255, 0.82);
    border-bottom:
        1px solid
        rgba(227, 27, 35, 0.25);
    box-shadow:
        0 8px 30px
        rgba(35, 35, 35, 0.07);
    backdrop-filter:
        blur(18px);
    -webkit-backdrop-filter:
        blur(18px);
    transition:
        0.35s ease;
}

.about-navbar .nav-logo {
    display: flex;
    align-items: center;

    width: 250px;
    height: 60px;

    text-decoration: none;
}

.about-navbar .nav-logo img {
    display: block;

    width: 90%;
    height: 90%;

    object-fit: contain;
    object-position: left center;

    transition:
        transform 0.3s ease;
}

.about-navbar .nav-logo:hover img {
    transform:
        scale(1.03);
}

.about-navbar .nav-links {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 9px;
    margin: 0;
    list-style: none;
    background:
        rgba(255, 255, 255, 0.62);
    /* border:
        1px solid
        rgba(40, 40, 40, 0.1);
    border-radius: 18px;
    box-shadow:
        0 8px 25px
        rgba(0, 0, 0, 0.06); */
    backdrop-filter:
        blur(18px);
    -webkit-backdrop-filter:
        blur(18px);
}

.about-navbar .nav-links a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 13px 20px;
    color: #3d3d42;
    border-radius: 12px;

    font-family:
        "Outfit",
        sans-serif;

    font-size: 0.85rem;

    font-weight: 700;

    text-decoration: none;

    transition:
        color 0.25s ease,
        background 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);
}

.about-navbar .nav-links a i {
    color: #df252b;

    font-size: 0.95rem;

    transition:
        transform 0.25s ease,
        color 0.25s ease;
}


/* =========================================
   HOVER
========================================= */

.about-navbar .nav-links a:hover {
    color: #d91f26;

    background:
        rgba(227, 27, 35, 0.08);

    transform:
        translateY(-2px);
}

.about-navbar .nav-links a:hover i {
    transform:
        scale(1.15);
}


/* =========================================
   ACTIVE PAGE
   This is the important part
========================================= */

.about-navbar .nav-links a.active {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #c9141c,
            #e93138
        );

    box-shadow:
        0 7px 18px
        rgba(227, 27, 35, 0.25);

    transform:
        translateY(-1px);
}


/* Active icon */

.about-navbar .nav-links a.active i {
    color: #ffffff;
}


/* =========================================
   ACTIVE HOVER
========================================= */

.about-navbar .nav-links a.active:hover {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #b91018,
            #d92b32
        );

    transform:
        translateY(-2px);

    box-shadow:
        0 9px 22px
        rgba(227, 27, 35, 0.30);
}


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

/* Remove the old permanent red background */

.about-navbar .nav-links .contact-link {
    color: #3d3d42;

    background: transparent;
}

.about-navbar .nav-links .contact-link i {
    color: #df252b;
}


/* Contact hover */

.about-navbar .nav-links .contact-link:hover {
    color: #d91f26;

    background:
        rgba(227, 27, 35, 0.08);

    transform:
        translateY(-2px);
}


/* =========================================
   CONTACT ACTIVE PAGE
========================================= */

.about-navbar .nav-links .contact-link.active {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #c9141c,
            #e93138
        );

    box-shadow:
        0 7px 18px
        rgba(227, 27, 35, 0.25);
}

.about-navbar .nav-links .contact-link.active i {
    color: #ffffff;
}

/* =========================================
   EXTRA NAVBAR ENHANCEMENTS
========================================= */

/* Navbar entrance animation */
.about-navbar {
    animation: navbarSlideDown 0.7s ease forwards;
}

@keyframes navbarSlideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* =========================================
   NAV LINKS - GLASS SHINE EFFECT
========================================= */

.about-navbar .nav-links a {
    overflow: hidden;
    isolation: isolate;
}

.about-navbar .nav-links a::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;

    width: 80%;
    height: 100%;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.35),
        transparent
    );

    transform: skewX(-20deg);
    transition: left 0.6s ease;

    pointer-events: none;
}

.about-navbar .nav-links a:hover::before {
    left: 130%;
}


/* =========================================
   ANIMATED RED UNDERLINE
========================================= */

.about-navbar .nav-links a:not(.active)::after {
    content: "";

    position: absolute;
    left: 50%;
    bottom: 5px;

    width: 0;
    height: 2px;

    border-radius: 10px;

    background: linear-gradient(
        90deg,
        #c9141c,
        #ef4148
    );

    transform: translateX(-50%);

    transition:
        width 0.3s ease,
        opacity 0.3s ease;

    opacity: 0;
}

.about-navbar .nav-links a:not(.active):hover::after {
    width: 35%;
    opacity: 1;
}


/* =========================================
   ACTIVE TAB - EXTRA GLOW
========================================= */

.about-navbar .nav-links a.active {
    position: relative;

    box-shadow:
        0 7px 18px rgba(227, 27, 35, 0.25),
        0 0 0 1px rgba(255, 255, 255, 0.15) inset;

    animation: activeGlow 2.5s ease-in-out infinite;
}

@keyframes activeGlow {
    0%,
    100% {
        box-shadow:
            0 7px 18px rgba(227, 27, 35, 0.22),
            0 0 0 1px rgba(255, 255, 255, 0.12) inset;
    }

    50% {
        box-shadow:
            0 9px 24px rgba(227, 27, 35, 0.34),
            0 0 0 1px rgba(255, 255, 255, 0.18) inset;
    }
}


/* =========================================
   ICON MICRO ANIMATION
========================================= */

.about-navbar .nav-links a i {
    display: inline-block;
}

.about-navbar .nav-links a:hover i {
    animation: iconBounce 0.45s ease;
}

@keyframes iconBounce {
    0% {
        transform: scale(1);
    }

    45% {
        transform: scale(1.25) rotate(-4deg);
    }

    75% {
        transform: scale(1.08) rotate(3deg);
    }

    100% {
        transform: scale(1.15) rotate(0);
    }
}


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

.about-navbar .nav-logo {
    transition:
        transform 0.3s ease,
        filter 0.3s ease;
}

.about-navbar .nav-logo:hover {
    transform: translateY(-1px);
    filter: drop-shadow(
        0 5px 12px rgba(227, 27, 35, 0.12)
    );
}


/* =========================================
   NAVBAR HOVER BORDER
========================================= */

.about-navbar:hover {
    border-bottom-color:
        rgba(227, 27, 35, 0.35);

    box-shadow:
        0 10px 35px rgba(35, 35, 35, 0.09);
}


/* =========================================
   CONTACT SPECIAL EFFECT
========================================= */

.about-navbar .nav-links .contact-link {
    position: relative;
}

.about-navbar .nav-links .contact-link:hover {
    box-shadow:
        0 5px 15px rgba(227, 27, 35, 0.08);
}


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

@media (max-width: 1000px) {

    .about-navbar {
        padding: 0 4%;
    }

    .about-navbar .nav-logo {
        width: 200px;
    }

    .about-navbar .nav-links {
        gap: 4px;
        padding: 6px;
    }

    .about-navbar .nav-links a {
        padding: 11px 14px;
        font-size: 0.8rem;
    }
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 768px) {

    .about-navbar {
        height: 72px;
        padding: 0 20px;
    }

    .about-navbar .nav-logo {
        width: 160px;
        height: 52px;
    }

    .about-navbar .nav-links {
        gap: 2px;
        padding: 5px;
        border-radius: 14px;
    }

    .about-navbar .nav-links a {
        padding: 9px 11px;
        gap: 5px;
        font-size: 0.72rem;
    }

    .about-navbar .nav-links a i {
        font-size: 0.8rem;
    }
}


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

@media (max-width: 600px) {

    .about-navbar {
        height: auto;
        min-height: 70px;

        padding: 10px 15px;

        flex-wrap: wrap;
        gap: 8px;
    }

    .about-navbar .nav-logo {
        width: 140px;
        height: 45px;
    }

    .about-navbar .nav-logo img {
        width: 100%;
        height: 100%;
    }

    .about-navbar .nav-links {
        width: 100%;

        justify-content: center;

        overflow-x: auto;
        scrollbar-width: none;

        border-radius: 14px;
    }

    .about-navbar .nav-links::-webkit-scrollbar {
        display: none;
    }

    .about-navbar .nav-links a {
        flex-shrink: 0;

        padding: 9px 12px;

        font-size: 0.7rem;
    }
}


/* =========================================
   VERY SMALL MOBILE
========================================= */

@media (max-width: 400px) {

    .about-navbar {
        padding: 8px 10px;
    }

    .about-navbar .nav-logo {
        width: 125px;
    }

    .about-navbar .nav-links a {
        padding: 8px 9px;
        font-size: 0.65rem;
    }

    .about-navbar .nav-links a i {
        font-size: 0.72rem;
    }
}


/* =========================================
   REDUCED MOTION ACCESSIBILITY
========================================= */

@media (prefers-reduced-motion: reduce) {

    .about-navbar,
    .about-navbar *,
    .about-navbar::before,
    .about-navbar::after {
        animation: none !important;
        transition: none !important;
    }
}

/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 900px) {

    .about-navbar {
        padding: 0 4%;
    }

    .about-navbar .nav-logo {
        width: 190px;
    }

    .about-navbar .nav-links {
        gap: 4px;
    }

    .about-navbar .nav-links a {
        padding: 11px 14px;
    }
}


@media (max-width: 700px) {

    .about-navbar {
        height: auto;
        min-height: 75px;

        padding: 10px 4%;

        flex-wrap: wrap;
        justify-content: center;

        gap: 10px;
    }

    .about-navbar .nav-logo {
        width: 180px;
        height: 50px;
    }

    .about-navbar .nav-links {
        width: 100%;

        justify-content: center;

        overflow-x: auto;
    }

    .about-navbar .nav-links a {
        padding: 10px 12px;
        font-size: 0.78rem;
    }
}




/*


@media (max-width: 568px) {

  .navbar {

    height: auto;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 12px;

    padding: 12px 18px;

  }

  .nav-logo img {
    height:150px;
    width: 170px;
    margin-left: 40px;
    height: auto;

  }

  .nav-links {

    width: 100%;

    display: flex;

    justify-content: space-between;

    align-items: center;

    flex-wrap: wrap;

    gap: 10px;

    padding: 20px;

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

    backdrop-filter: blur(18px);

    -webkit-backdrop-filter: blur(18px);

    border-radius: 16px;

  }

  .nav-links li {

    list-style: none;

  }

  .nav-links a {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    padding: 10px 16px;

    font-size: 1.20rem;

    white-space: nowrap;

  }

}


/* ==========================================
   Small Phones
========================================== */

@media (max-width: 480px) {

  .navbar {

    display: flex;
    flex-direction: column;

    justify-content: center;
    align-items: center;

    padding: 12px;

    gap: 12px;

    height: auto;
  }

  .nav-logo {

    display: flex;
    justify-content: center;
    align-items: center;

    width: 100%;
  }
  .nav-logo img{
      width:145px;
      margin-right: 35px;
  }
  .nav-links {

    display: flex;
    justify-content: center;
    align-items: center;

    flex-wrap: wrap;

    width: 100%;

    gap: 8px;

    padding: 8px;
  }

  .nav-links a {

    padding: 8px 12px;

    font-size: 0.85rem;
  }

}
/* ==========================
   HERO LIGHT GRADIENT
========================== */

.hero {
  position:
    relative;

  min-height:
    calc(
      100vh - 78px
    );

  display:
    grid;

  grid-template-columns:
    1.1fr 0.9fr;

  align-items:
    center;

  gap:
    50px;

  padding:
    80px 8%;

  overflow:
    hidden;

  /* Soft gradient background */

  background:

    radial-gradient(
      circle at 85% 18%,
      rgba(
        255,
        212,
        42,
        0.28
      ),
      transparent 28%
    ),

    radial-gradient(
      circle at 10% 85%,
      rgba(
        227,
        27,
        35,
        0.08
      ),
      transparent 28%
    ),

    linear-gradient(
      125deg,
      #ffffff 0%,
      #fffdf7 42%,
      #fff7e8 75%,
      #fff1ed 100%
    );
}


/* Decorative background blur */

.hero::before {
  content:
    "";

  position:
    absolute;

  top:
    -150px;

  right:
    -120px;

  width:
    430px;

  height:
    430px;

  border-radius:
    50%;

  background:
    rgba(
      255,
      212,
      42,
      0.2
    );

  filter:
    blur(45px);

  animation:
    backgroundFloat
    9s ease-in-out
    infinite;
}


/* Red decorative blur */

.hero::after {
  content:
    "";

  position:
    absolute;

  left:
    -180px;

  bottom:
    -190px;

  width:
    420px;

  height:
    420px;

  border-radius:
    50%;

  background:
    rgba(
      227,
      27,
      35,
      0.08
    );

  filter:
    blur(55px);

  animation:
    backgroundFloat
    11s ease-in-out
    infinite reverse;
}


/* Keep hero content above effects */

.hero-content,
.hero-visual {
  position:
    relative;

  z-index:
    2;
}
 
/* Background motion */

@keyframes backgroundFloat {

  0%,
  100% {
    transform:
      translate(
        0,
        0
      )
      scale(1);
  }

  50% {
    transform:
      translate(
        -20px,
        25px
      )
      scale(1.08);
  }
}

.hero>div{max-width:900px}
    
    .eyebrow{color:#ffd42a;font-weight:800;letter-spacing:3px;margin-bottom:15px}
    
   .hero h1 {
  margin-bottom:
    52px;

  color:
    #413a3a;

  font-family: "Lucida Handwriting" cursive;

  /* font-style: italic; */

  font-size:
    clamp(
      3.2rem,
      4.5vw,
      8.5rem
    );

  font-weight:
    500;

  line-height:
    0.98;

  letter-spacing:
    -3px;
}


/* Gradient text */

.hero h1 span  {
  display:
    block;

  background:
    linear-gradient(
      90deg,
      #e31b23,
      #ff5a42,
      #e31b23
    );

  background-size:
    200% auto;

  -webkit-background-clip:
    text;

  background-clip:
    text;

  color:
    transparent;

  font-style: normal;
  animation:
    textGradient
    5s linear
    infinite;
}

.hero h1 {
  font-style:italic
}

.hero p {
  font-size: 23px;

    font-family:'Times New Roman', Times, serif;

    font-weight: 500;
}
/* =================================
    JUMPING / BOUNCING DUCK
================================= */

.duck-area {
  position: relative;

  width: 500px;
  height: 500px;

  display: flex;

  align-items: center;
  justify-content: center;
}


/* Duck animation container */

.duck-jump {
  position: relative;

  z-index: 2;

  animation:
    duckJump 2.2s
    cubic-bezier(
      0.45,
      0,
      0.55,
      1
    )
    3
    forwards;
}


/* Duck image */

.hero-duck {
  display: block;

  width: 350px;

  height: auto;

  object-fit: contain;

  /* Makes movement smooth */
  will-change: transform;

  filter:
    drop-shadow(
      0 20px 15px
      rgba(
        0,
        0,
        0,
        0.18
      )
    );
}


/* =================================
   DUCK JUMP ANIMATION
================================= */

@keyframes duckJump {

  /* Duck standing */

  0%,
  100% {
    transform:
      translateY(0)
      rotate(-3deg)
      scaleX(1)
      scaleY(1);
  }


  /* Duck bends before jumping */

  12% {
    transform:
      translateY(15px)
      rotate(-5deg)
      scaleX(1.08)
      scaleY(0.91);
  }


  /* Duck jumps upward */

  42% {
    transform:
      translateY(-80px)
      rotate(7deg)
      scaleX(0.96)
      scaleY(1.06);
  }


  /* Duck stays briefly in air */

  55% {
    transform:
      translateY(-72px)
      rotate(4deg)
      scaleX(0.98)
      scaleY(1.04);
  }


  /* Duck comes down */

  75% {
    transform:
      translateY(8px)
      rotate(-4deg)
      scaleX(1.07)
      scaleY(0.92);
  }


  /* Duck settles */

  88% {
    transform:
      translateY(-10px)
      rotate(2deg)
      scaleX(0.98)
      scaleY(1.03);
  }
}


/* =================================
   MOVING GROUND SHADOW
================================= */

.duck-shadow {
  position: absolute;

  z-index: 1;

  bottom: 60px;

  width: 240px;
  height: 35px;

  border-radius: 50%;

  background:
    rgba(
      65,
      35,
      10,
      0.25
    );

  filter:
    blur(12px);

  animation:
    shadowBounce
    2.2s ease-in-out
    infinite;
}


@keyframes shadowBounce {

  /* Shadow when duck is on ground */

  0%,
  100% {
    transform:
      scaleX(1);

    opacity:
      0.32;
  }


  /* Shadow becomes smaller
     when duck is in the air */

  42%,
  55% {
    transform:
      scaleX(0.48);

    opacity:
      0.1;
  }


  /* Shadow expands on landing */

  75% {
    transform:
      scaleX(1.12);

    opacity:
      0.38;
  }
}
/* =========================================
   TABLET (768px - 991px)
========================================= */

@media (max-width: 991px) {

    .hero{

        grid-template-columns: 1fr;

        text-align: center;

        gap: 50px;

        padding: 80px 5%;
    }

    .hero > div{

        max-width: 100%;
    }

    .hero h1{

        font-size: clamp(2.8rem, 7vw, 4.5rem);

        letter-spacing: -1px;

        margin-bottom: 25px;
    }

    .hero p{

        font-size: 20px;

        line-height: 1.7;

        max-width: 650px;

        margin: auto;
    }

    .duck-area{

        width: 350px;

        height: 350px;

        margin: auto;
    }

    .hero-duck{

        width: 270px;
    }

    .duck-shadow{

        width: 180px;

        bottom: 50px;
    }

}


/* =========================================
   MOBILE (480px - 767px)
========================================= */

@media (max-width: 767px){

    .hero{

        grid-template-columns: 1fr;

        text-align: center;

        gap: 40px;

        padding: 60px 20px;
    }

    .hero h1{

        font-size: 2.5rem;

        line-height: 1.15;

        letter-spacing: 0;

        margin-bottom: 20px;
    }

    .hero p{

        font-size: 18px;

        line-height: 1.7;

        margin-bottom: 25px;
    }

    .duck-area{

        width: 280px;

        height: 280px;

        margin: auto;
    }

    .hero-duck{

        width: 220px;
    }

    .duck-shadow{

        width: 150px;

        height: 25px;

        bottom: 40px;
    }

}


/* =========================================
   SMALL PHONES (320px - 479px)
========================================= */

@media (max-width: 479px){

    .hero{

        padding: 40px 16px;

        gap: 30px;
    }

    .hero h1{

        font-size: 2rem;

        line-height: 1.2;

        margin-bottom: 18px;
    }

    .hero p{

        font-size: 16px;

        line-height: 1.6;
    }

    .eyebrow{

        font-size: 12px;

        letter-spacing: 2px;
    }

    .duck-area{

        width: 220px;

        height: 220px;
    }

    .hero-duck{

        width: 170px;
    }

    .duck-shadow{

        width: 120px;

        height: 20px;

        bottom: 32px;
    }

    .hero::before{

        width: 220px;

        height: 220px;

        top: -70px;

        right: -80px;
    }

    .hero::after{

        width: 220px;

        height: 220px;

        left: -90px;

        bottom: -90px;
    }

}
/* =================================
   MOBILE DUCK
================================= */

@media (max-width: 300px) {


  .duck-area {
    width: 50px;
    height: 50px;
  }

  .hero-duck {
    width: 50px;
  }

  .duck-shadow {
    bottom: 35px;

    width: 160px;
    height: 20px;
  }

  @keyframes duckJump {

    0%,
    100% {
      transform:
        translateY(0)
        rotate(-3deg);
    }

    42% {
      transform:
        translateY(-45px)
        rotate(6deg);
    }

    75% {
      transform:
        translateY(5px)
        rotate(-3deg);
    }
  }
}


@keyframes textGradient {

  to {
    background-position:
      200% center;
  }
}
















.about {
  padding:
    110px 8%;

  text-align:
    center;

  background:

    linear-gradient(
      135deg,
      #fff8e9,
      #ffffff,
      #fff5ef
    );
}
.contact {
  padding:
    110px 8%;

  text-align:
    center;

  color:
    #ffffff;

  background:

    linear-gradient(
      135deg,
      #b90f19,
      #e31b23,
      #ff5a42
    );
}

.lead
    {
        max-width:700px;
        margin:25px auto;
        color:#4e4040;
        font-size:1.15rem;
        line-height:1.7
    }
    
    .primary
    {
        display:inline-block;
        background:#e71919;
        color:#fff;
        padding:15px 25px;
        border-radius:50px;
        text-decoration:none;
        font-weight:800;
        transition:.25s
    }
    
    .primary:hover
    {
        transform:translateY(-3px);
        background:#ffd42a;
        color:#111
    }



















    
/* =================================
   SERVICES SECTION BACKGROUND
================================= */

.services {
  position: relative;

  padding: 110px 7%;

  overflow: hidden;

  /* Same light gradient style as Hero */

  background:

    radial-gradient(
      circle at 85% 15%,
      rgba(255, 212, 42, 0.25),
      transparent 28%
    ),

    radial-gradient(
      circle at 8% 80%,
      rgba(227, 27, 35, 0.08),
      transparent 30%
    ),

    linear-gradient(
      135deg,
      #ffffff 0%,
      #fffdf7 45%,
      #fff7e8 75%,
      #fff1ed 100%
    );
}


/* Yellow glowing background shape */

.services::before {
  content: "";

  position: absolute;

  top: -180px;
  right: -150px;

  width: 450px;
  height: 450px;

  border-radius: 50%;

  background:
    rgba(255, 212, 42, 0.18);

  filter:
    blur(55px);

  animation:
    serviceBackgroundFloat
    9s ease-in-out
    infinite;
}


/* Light red glowing background shape */

.services::after {
  content: "";

  position: absolute;

  bottom: -200px;
  left: -150px;

  width: 430px;
  height: 430px;

  border-radius: 50%;

  background:
    rgba(227, 27, 35, 0.08);

  filter:
    blur(60px);

  animation:
    serviceBackgroundFloat
    11s ease-in-out
    infinite reverse;
}


/* Keep service content above background */

.services .heading,
.services .grid {
  position: relative;

  z-index: 2;
}


/* =================================
   BACKGROUND ANIMATION
================================= */

@keyframes serviceBackgroundFloat {

  0%,
  100% {
    transform:
      translate(0, 0)
      scale(1);
  }

  50% {
    transform:
      translate(-25px, 25px)
      scale(1.08);
  }
}

/* Services heading */

.services .heading h2 {
  color: #202020;

  font-family:
    "Outfit",
    sans-serif;

  font-size:
    clamp(
      2.5rem,
      6vw,
      4.5rem
    );

  font-weight: 600;

  letter-spacing:
    -2px;
}


/* Small heading */

.services .heading .eyebrow {
  color: #e31b23;

  font-weight: 800;

  letter-spacing: 3px;
}


/* Description */

.services .heading p:last-child {
  color: #666666;

  font-family:
    "Manrope",
    sans-serif;
}

    .heading{text-align:center;max-width:700px;margin:0 auto 50px}
    .heading h2,.about h2,.contact h2{font-size:clamp(2.3rem,5vw,4rem);margin-bottom:15px}
    .heading>p:last-child
    {color:#bbb}
    
    .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;max-width:1450px;margin:auto}
    
    .card
    {
        position:relative;
        min-height:330px;
        overflow:hidden;
        border-radius:18px;
        background: #ffffff;
        border:1px solid rgba(0, 0, 0, 0.07);
        box-shadow:0 15px 35px rgba(0, 0, 0, 0.12);
        /* background:#222; */
        box-shadow:0 15px 30px #0006;
        transition:.45s
    }

    .card img
    {
        position:absolute;
        inset:0;
        width:100%;
        height:100%;
        object-fit:cover;
        transition:.7s
    }
    
    .card:after
    {
        content:'';
        position:absolute;
        inset:0;
        background:linear-gradient(to top,#000f,#0001)
    }

    .overlay
    {
        position:absolute;
        z-index:2;
        left:0;
        right:0;
        bottom:0;
        padding:27px;
        transform:translateY(100px);
        transition:.5s
    }
    .overlay small
    {
        color:#ffd42a;
        font-weight:800
    }

    .overlay h3
    {
        font-family: 'Times New Roman', Times, serif;
        color:#ddd;
        font-size:1.5rem;
        margin:9px 0
    }
    .overlay p
    {
        color:#ddd;
        line-height:1.6;
        opacity:0;
        transform:translateY(12px);
        transition:.35s
    }
    .overlay a
    {
        display:inline-block;
        margin-top:15px;
        color:#fff;
        background:#ffd42a;
        padding:10px 15px;
        border-radius:30px;
        text-decoration:none;
        font-weight:800;
        opacity:0;
        transition:.35s
    }
    
    .card:hover{transform:translateY(-9px)}
    
    .card:hover img{transform:scale(1.1);filter:brightness(.6)}
    
    .card:hover .overlay{transform:translateY(0)}
    
    .card:hover .overlay p,.card:hover .overlay a
    {opacity:1;transform:translateY(0)}
    
    .about {

        font-family:'Times New Roman', Times, serif;
        font: weight 100px; ;
        background:

        radial-gradient(
        circle at 85% 15%,
        rgba(255, 212, 42, 0.25),
        transparent 28%
        ),

        radial-gradient(
        circle at 8% 80%,
        rgba(227, 27, 35, 0.08),
        transparent 30%
        ),

        linear-gradient(
        135deg,
        #ffffff 0%,
        #fffdf7 45%,
        #fff7e8 75%,
        #fff1ed 100%
        );
    }
    .about,.contact
    {
        padding:110px 8%;
        text-align:center
    }
    
    
    .about>div
    {
      max-width:800px;
      margin:auto
    }
    
    .about p {
      font-size: 20px;
      line-height: 1.5;
    }
    
    @media (max-width: 768px) {

    .about,
    .contact {
        padding: 70px 20px;
    }

    .about > div {
        max-width: 100%;
    }

    .about h2 {
        font-size: 2rem;
        margin-bottom: 20px;
    }

    .about  .eyebrow {
      margin-left: 100px;
    } 

    .about p {
        font-size: 16px;
        line-height: 1.8;
        text-align: justify;
    }
}


/* contact form  */

.contact {
  padding: 110px 8%;

  background:
    linear-gradient(
      135deg,
      #fff8e9,
      #ffffff,
      #fff2ec
    );
}


.contact-content {
  display: grid;

  grid-template-columns:
    0.85fr 1.15fr;

  gap: 70px;

  align-items: center;

  max-width: 1250px;

  margin: auto;
}


.contact-info h2 {
  margin-bottom: 20px;

  color: #202020;

  font-family:
    "Outfit",
    sans-serif;

  font-size:
    clamp(
      2.5rem,
      5vw,
      4.5rem
    );

  line-height: 1;
}


.contact-info h2 span {
  display: block;

  color: #e31b23;
}


.contact-info p {
  color: #666666;

  line-height: 1.8;
}


/* Form */

.contact-form {
  padding: 35px;

  background:
    rgba(
      255,
      255,
      255,
      0.92
    );

  border:
    1px solid
    rgba(
      0,
      0,
      0,
      0.08
    );

  border-radius:
    24px;

  box-shadow:
    0 20px 55px
    rgba(
      0,
      0,
      0,
      0.1
    );
}


.form-row {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 18px;
}


.form-group {
  display: flex;

  flex-direction:
    column;

  gap: 8px;

  margin-bottom:
    18px;
}


.form-group label {
  color:
    #333333;

  font-family:
    "Outfit",
    sans-serif;

  font-size:
    0.9rem;

  font-weight:
    700;
}


.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;

  padding:
    14px 15px;

  color:
    #222222;

  background:
    #fafafa;

  border:
    1px solid
    #dddddd;

  border-radius:
    10px;

  outline:
    none;

  font-family:
    "Manrope",
    sans-serif;

  font-size:
    0.9rem;

  transition:
    border 0.25s ease,
    box-shadow 0.25s ease;
}


.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color:
    #e31b23;

  box-shadow:
    0 0 0 4px
    rgba(
      227,
      27,
      35,
      0.08
    );
}


.form-group textarea {
  resize:
    vertical;
}


.submit-btn {
  width: 100%;

  padding:
    15px;

  color:
    white;

  background:
    linear-gradient(
      135deg,
      #e31b23,
      #ff4b4b
    );

  border:
    none;

  border-radius:
    50px;

  cursor:
    pointer;

  font-family:
    "Outfit",
    sans-serif;

  font-size:
    1rem;

  font-weight:
    800;

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}


.submit-btn:hover {
  transform:
    translateY(-3px);

  box-shadow:
    0 12px 25px
    rgba(
      227,
      27,
      35,
      0.25
    );
}


/* Mobile */

@media (
  max-width: 850px
) {

  .contact-content {
    grid-template-columns:
      1fr;

    gap:
      40px;
  }
}


@media (
  max-width: 550px
) {

  .contact {
    padding:
      80px 5%;
  }

  .contact-info  {
    font-size: 13px;
  }

  .contact-form {
    padding:
      22px;
  }

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






    /* =================================
   FUN MEDIA ENTERTAINMENT FOOTER
================================= */

.fun-footer {
  position: relative;

  overflow: hidden;

  padding:
    48px 4% 0;

  color:
    #b8b8c0;

  background:
    linear-gradient(
      115deg,
      #17171d 0%,
      #101114 50%,
      #17171d 100%
    );
}


/* Subtle dotted background */

.fun-footer::before {
  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  opacity: 0.35;

  background-image:

    radial-gradient(
      rgba(
        255,
        255,
        255,
        0.18
      )
      1px,
      transparent 1px
    );

  background-size:
    24px 24px;
}


/* Main Footer */

.footer-main {
  position: relative;

  z-index: 2;

  display: grid;

  grid-template-columns:
    1.5fr
    1fr
    0.9fr
    0.8fr;

  gap: 70px;

  max-width: 1800px;

  margin: auto;

  padding:
    0 0 85px;
}


/* Brand */

.footer-brand h2 {
  display: flex;

  flex-direction: column;

  margin-bottom: 24px;

  color:
    #ffffff;

  font-family:
    "Outfit",
    sans-serif;

  font-size:
    clamp(
      2rem,
      3vw,
      2.8rem
    );

  font-weight:
    800;

  line-height:
    0.95;

  letter-spacing:
    -1px;
}


.footer-brand h2 span {
  color:
    #ffd42a;

  font-size:
    0.55em;

  font-weight:
    700;

  letter-spacing:
    5px;

  text-transform:
    uppercase;
}


.footer-brand p {
  max-width:
    330px;

  margin-bottom:
    30px;

  color:
    #a8a8b0;

  font-size:
    0.98rem;

  font-weight:
    500;

  line-height:
    1.85;
}


/* Social Icons */

.footer-social {
  display: flex;

  align-items: center;

  gap: 14px;
}


.footer-social a {
  width:
    50px;

  height:
    50px;

  display: grid;

  place-items:
    center;

  color:
    #d2d2d8;

  background:
    rgba(
      255,
      255,
      255,
      0.05
    );

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.12
    );

  border-radius:
    13px;

  text-decoration:
    none;

  font-size:
    1.1rem;

  transition:
    transform 0.25s ease,
    color 0.25s ease,
    background 0.25s ease,
    border-color 0.25s ease;
}


.footer-social a:hover {
  color:
    #17171d;

  background:
    #ffd42a;

  border-color:
    #ffd42a;

  transform:
    translateY(-5px);
}


/* Footer Links */

.footer-links {
  display: flex;

  flex-direction:
    column;

  align-items:
    flex-start;

  gap:
    19px;
}


.footer-links h3 {
  margin:
    0 0 10px;

  color:
    #ffffff;

  font-family:
    "Outfit",
    sans-serif;

  font-size:
    0.95rem;

  font-weight:
    800;

  letter-spacing:
    3px;
}


.footer-links a {
  position: relative;

  color:
    #a9a9b2;

  font-size:
    0.98rem;

  font-weight:
    600;

  text-decoration:
    none;

  transition:
    color 0.2s ease,
    transform 0.2s ease;
}


.footer-links a:hover {
  color:
    #ffd42a;

  transform:
    translateX(6px);
}


/* Bottom Bar */

.footer-bottom {
  position: relative;

  z-index: 2;

  display: flex;

  align-items:
    center;

  justify-content:
    space-between;

  max-width:
    1800px;

  margin:
    auto;

  padding:
    30px 0 25px;

  border-top:
    1px solid
    rgba(
      255,
      255,
      255,
      0.1
    );
}


.footer-bottom p {
  margin:
    0;

  color:
    #a1a1aa;

  font-size:
    0.92rem;

  font-weight:
    600;
}


.footer-bottom a {
  color:
    #b5b5bd;

  font-size:
    0.9rem;

  font-weight:
    600;

  text-decoration:
    none;

  transition:
    color 0.2s ease;
}


.footer-bottom a:hover {
  color:
    #ffd42a;
}


/* =================================
   TABLET
================================= */

@media (
  max-width: 1000px
) {

  .footer-main {
    grid-template-columns:
      1.4fr
      1fr
      1fr;

    gap:
      50px;
  }


  .footer-brand {
    grid-column:
      1 / -1;
  }


  .footer-brand p {
    max-width:
      500px;
  }
}


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

@media (
  max-width: 650px
) {

  .fun-footer {
    padding:
      55px 7% 0;
  }


  .footer-main {
    grid-template-columns:
      1fr;

    gap:
      40px;

    padding-bottom:
      55px;
  }


  .footer-brand {
    grid-column:
      auto;
  }


  .footer-brand h2 {
    font-size:
      2.2rem;
  }


  .footer-links {
    gap:
      15px;
  }


  .footer-bottom {
    flex-direction:
      column;

    align-items:
      flex-start;

    gap:
      15px;

    padding:
      25px 0;
  }
}

    

    @media(max-width:1100px)
    {.grid{grid-template-columns:repeat(2,1fr)}}
    
    @media(max-width:700px)
    {
        .site-header
        {
            flex-direction:column;
            padding:7px
        }
        .brand span
        {
            font-size:.95rem
        }
        .nav
        {
            width:100%;
            height:50px
        }
        .btn
        {
            padding:.4em;
            font-size:.78rem
        }
        .hero
        {
            padding-top:150px
        }
        .grid
        {
            grid-template-columns:1fr
        }
        .overlay
        {
            transform:translateY(0)
        }
        .overlay p,.overlay a
        {
            opacity:1;
            transform:none
        }
    }


    /* =================================
   IMPROVED MOBILE FOOTER
================================= */

@media (max-width: 650px) {

  .fun-footer {
    padding: 50px 20px 0;
  }


  .footer-main {
    display: grid;

    grid-template-columns: 1fr;

    gap: 38px;

    padding-bottom: 45px;
  }


  /* Brand section */

  .footer-brand {
    grid-column: auto;
  }


  .footer-brand h2 {
    font-size: 2rem;

    line-height: 1;

    margin-bottom: 18px;
  }


  .footer-brand h2 span {
    font-size: 0.5em;

    letter-spacing: 3px;
  }


  .footer-brand p {
    max-width: 100%;

    margin-bottom: 24px;

    font-size: 0.9rem;

    line-height: 1.7;
  }


  /* Social icons */

  .footer-social {
    gap: 10px;

    flex-wrap: wrap;
  }


  .footer-social a {
    width: 44px;

    height: 44px;

    border-radius: 11px;

    font-size: 1rem;
  }


  /* Footer links */

  .footer-links {
    width: 100%;

    gap: 14px;
  }


  .footer-links h3 {
    margin-bottom: 7px;

    font-size: 0.82rem;

    letter-spacing: 2px;
  }


  .footer-links a {
    font-size: 0.9rem;

    line-height: 1.5;
  }


  /* Bottom section */

  .footer-bottom {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    justify-content: flex-start;

    gap: 13px;

    padding: 22px 0;

    text-align: left;
  }


  .footer-bottom p {
    font-size: 0.78rem;

    line-height: 1.6;
  }


  .footer-bottom a {
    font-size: 0.82rem;
  }
}


/* =================================
   EXTRA SMALL MOBILE
   320px – 375px
================================= */

@media (max-width: 380px) {

  .fun-footer {
    padding-left: 16px;
    padding-right: 16px;
  }


  .footer-brand h2 {
    font-size: 1.25rem;
  }


  .footer-social {
    gap: 8px;
  }


  .footer-social a {
    width: 35px;
    height: 35px;
  }


  .footer-bottom p {
    font-size: 0.82rem;
  }
}