.elementor-10 .elementor-element.elementor-element-ca39136 > .elementor-element-populated{margin:0px 0px 0px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;padding:0px 0px 0px 0px;}/* Start custom CSS for html, class: .elementor-element-9da6b4b *//* =========================================================
ASHIRWAD TOURS & TRAVELS — HOME HERO
REVISION: CONTENT ALIGNMENT + DUAL-SIDE IMAGE FADE

ROOT CLASS:
.att-home-hero

IMPORTANT:
HTML + JS remain unchanged.
This CSS replaces the previous hero CSS completely.
========================================================= */


/* =========================================================
1. ROOT
========================================================= */

.att-home-hero {
  --att-primary: #123F4A;
  --att-secondary: #1D6570;
  --att-accent: #E49A32;
  --att-ivory: #F6F1E8;
  --att-charcoal: #24282A;
  --att-white: #FFFFFF;

  --att-font-display:
    'Anek',
    'Inter',
    system-ui,
    -apple-system,
    'Segoe UI',
    sans-serif;

  --att-font-body:
    'Inter',
    system-ui,
    -apple-system,
    'Segoe UI',
    sans-serif;

  position: relative;
  isolation: isolate;

  box-sizing: border-box;

  width: 100vw;
  width: 100dvw;

  max-width: 100vw;
  max-width: 100dvw;

  margin-top: 0;
  margin-bottom: 0;

  margin-left: calc(50% - 50vw);
  margin-left: calc(50% - 50dvw);

  margin-right: calc(50% - 50vw);
  margin-right: calc(50% - 50dvw);

  padding: 0;

  overflow: hidden;

  background: var(--att-ivory);

  color: var(--att-charcoal);

  font-family: var(--att-font-body);
}


/* =========================================================
2. ROTATING IMAGE LAYER
========================================================= */

.att-home-hero [data-att="slides"] {
  position: absolute;

  z-index: -2;

  inset: 0 0 auto 0;

  width: 100%;

  height: calc(100% - 330px);

  overflow: hidden;

  background: var(--att-ivory);
}


.att-home-hero [data-att="slide"] {
  position: absolute;

  inset: 0;

  display: block;

  width: 100%;
  height: 100%;

  opacity: 0;

  transition: opacity 900ms ease;
}


.att-home-hero
[data-att="slide"][data-active="true"] {
  opacity: 1;
}


.att-home-hero [data-att="slide"] img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  object-position: center;

  border: 0;
}


/* =========================================================
3. MOBILE IMAGE FADE
========================================================= */

.att-home-hero [data-att="slides"]::after {
  content: "";

  position: absolute;

  z-index: 2;

  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(246, 241, 232, 0.98) 0%,
      rgba(246, 241, 232, 0.94) 35%,
      rgba(246, 241, 232, 0.78) 58%,
      rgba(246, 241, 232, 0.35) 78%,
      rgba(246, 241, 232, 0.06) 100%
    );
}


/* =========================================================
4. MAIN HERO
========================================================= */

.att-home-hero [data-att="hero-main"] {
  position: relative;

  z-index: 2;

  min-height: 760px;

  padding:
    48px
    18px
    44px;
}


.att-home-hero [data-att="inner"] {
  width: 100%;

  max-width: 1200px;

  margin: 0 auto;
}


.att-home-hero [data-att="copy"] {
  width: 100%;

  max-width: 700px;
}


/* =========================================================
5. EYEBROW
========================================================= */

.att-home-hero [data-att="eyebrow"] {
  margin: 0 0 12px;

  color: var(--att-primary);

  font-family: var(--att-font-body);

  font-size: 12px;

  font-weight: 600;

  line-height: 1.4;

  letter-spacing: 0.12em;

  text-transform: uppercase;
}


/* =========================================================
6. H1
========================================================= */

.att-home-hero h1 {
  margin: 0;

  color: var(--att-primary);

  font-family: var(--att-font-display);

  font-size:
    clamp(
      34px,
      10vw,
      46px
    );

  font-weight: 700;

  line-height: 1.04;

  letter-spacing: -0.025em;
}


.att-home-hero [data-att="heading-line"] {
  display: block;
}


.att-home-hero [data-att="typing-line"] {
  display: block;

  min-height: 1.08em;

  margin-top: 4px;

  color: var(--att-accent);
}


.att-home-hero [data-att="typing-text"] {
  color: inherit;
}


/* TYPING CURSOR */

.att-home-hero [data-att="typing-cursor"] {
  display: inline-block;

  width: 3px;

  height: 0.82em;

  margin-left: 5px;

  vertical-align: -0.04em;

  border-radius: 2px;

  background: var(--att-accent);

  animation:
    attTypingCursorBlink
    0.78s
    steps(1)
    infinite;
}


@keyframes attTypingCursorBlink {

  0%,
  48% {
    opacity: 1;
  }

  49%,
  100% {
    opacity: 0;
  }

}


/* =========================================================
7. DESCRIPTION
========================================================= */

.att-home-hero [data-att="description"] {
  max-width: 620px;

  margin-top: 24px;
}


.att-home-hero [data-att="description"] p {
  margin: 0;

  color: var(--att-charcoal);

  font-family: var(--att-font-body);

  font-size: 16px;

  font-weight: 400;

  line-height: 1.62;
}


.att-home-hero
[data-att="description"]
p + p {
  margin-top: 16px;
}


/* =========================================================
8. BENEFITS
========================================================= */

.att-home-hero [data-att="benefits"] {
  display: grid;

  grid-template-columns: 1fr;

  gap: 14px;

  margin-top: 26px;
}


.att-home-hero [data-att="benefit"] {
  display: flex;

  align-items: center;

  gap: 11px;

  min-width: 0;

  color: var(--att-primary);

  font-family: var(--att-font-body);

  font-size: 14px;

  font-weight: 600;

  line-height: 1.35;
}


.att-home-hero [data-att="check-icon"] {
  display: grid;

  flex: 0 0 36px;

  width: 36px;
  height: 36px;

  place-items: center;
}


.att-home-hero
[data-att="check-icon"]
svg {
  display: block;

  width: 36px;
  height: 36px;

  overflow: visible;
}


.att-home-hero
[data-att="check-icon"]
circle {
  fill: var(--att-accent);

  stroke: var(--att-white);

  stroke-width: 2;
}


.att-home-hero
[data-att="check-icon"]
path {
  fill: none;

  stroke: var(--att-white);

  stroke-width: 3.5;

  stroke-linecap: round;

  stroke-linejoin: round;
}


/* =========================================================
9. CTA AREA
========================================================= */

.att-home-hero [data-att="actions"] {
  display: flex;

  flex-direction: column;

  align-items: stretch;

  gap: 12px;

  margin-top: 30px;
}


.att-home-hero [data-att="plan-trip"],
.att-home-hero [data-att="whatsapp"] {
  box-sizing: border-box;

  min-height: 52px;

  border-radius: 8px;

  font-family: var(--att-font-body);

  font-size: 15px;

  font-weight: 600;

  line-height: 1;

  letter-spacing: 0.02em;

  text-decoration: none;

  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    background-color 180ms ease;
}


/* PLAN MY TRIP */

.att-home-hero [data-att="plan-trip"] {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 18px;

  padding:
    14px
    22px;

  color: var(--att-primary);

  background: var(--att-accent);

  border:
    2px solid
    var(--att-accent);

  box-shadow:
    0
    8px
    22px
    rgba(18, 63, 74, 0.10);
}


.att-home-hero
[data-att="plan-trip"]
svg {
  width: 22px;

  height: 22px;

  fill: none;

  stroke: currentColor;

  stroke-width: 2;

  stroke-linecap: round;

  stroke-linejoin: round;
}


/* WHATSAPP */

.att-home-hero [data-att="whatsapp"] {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  padding:
    13px
    18px;

  color: var(--att-primary);

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

  border:
    2px solid
    var(--att-secondary);
}


.att-home-hero
[data-att="whatsapp"]
svg {
  flex: 0 0 26px;

  width: 26px;

  height: 26px;

  fill: none;

  stroke: #25D366;

  stroke-width: 1.7;

  stroke-linecap: round;

  stroke-linejoin: round;
}


/* CTA STATES */

.att-home-hero
[data-att="plan-trip"]:hover,
.att-home-hero
[data-att="whatsapp"]:hover {
  transform: translateY(-2px);
}


.att-home-hero
[data-att="plan-trip"]:hover {
  box-shadow:
    0
    10px
    24px
    rgba(18, 63, 74, 0.16);
}


.att-home-hero
[data-att="whatsapp"]:hover {
  background: var(--att-white);
}


.att-home-hero
[data-att="plan-trip"]:focus-visible,
.att-home-hero
[data-att="whatsapp"]:focus-visible {
  outline:
    3px solid
    var(--att-primary);

  outline-offset: 3px;
}


/* =========================================================
10. TRUST STRIP
========================================================= */

.att-home-hero [data-att="trust-strip"] {
  position: relative;

  z-index: 3;

  width: 100%;

  padding:
    26px
    18px
    30px;

  background: var(--att-primary);

  color: var(--att-white);
}


.att-home-hero [data-att="trust-inner"] {
  display: grid;

  grid-template-columns: 1fr;

  width: 100%;

  max-width: 1320px;

  margin: 0 auto;
}


.att-home-hero [data-att="trust-item"] {
  display: grid;

  grid-template-columns:
    50px
    1fr;

  align-items: center;

  gap: 16px;

  min-width: 0;

  padding:
    18px
    0;

  border-bottom:
    1px solid
    rgba(255, 255, 255, 0.20);
}


.att-home-hero
[data-att="trust-item"]:last-child {
  border-bottom: 0;
}


.att-home-hero
[data-att="trust-item"]
svg {
  display: block;

  width: 48px;

  height: 48px;

  fill: none;

  stroke: var(--att-white);

  stroke-width: 3;

  stroke-linecap: round;

  stroke-linejoin: round;
}


.att-home-hero
[data-att="trust-item"]
p {
  margin: 0;

  color: var(--att-white);

  font-family: var(--att-font-body);

  font-size: 15px;

  font-weight: 500;

  line-height: 1.38;
}


/* =========================================================
11. TABLET — 768px+
========================================================= */

@media (min-width: 768px) {

  .att-home-hero [data-att="slides"] {
    height:
      calc(100% - 210px);
  }


  /*
  DUAL FADE:
  - Ivory protection on far left
  - Image gradually appears through centre
  - Full photography on right
  */

  .att-home-hero
  [data-att="slides"]::after {
    background:

      /* LEFT EDGE SOFT FADE */
      linear-gradient(
        90deg,
        rgba(246, 241, 232, 0.98) 0%,
        rgba(246, 241, 232, 0.94) 7%,
        rgba(246, 241, 232, 0.70) 15%,
        rgba(246, 241, 232, 0.18) 25%,
        rgba(246, 241, 232, 0) 34%
      ),

      /* TEXT → IMAGE TRANSITION */
      linear-gradient(
        90deg,
        rgba(246, 241, 232, 0.97) 0%,
        rgba(246, 241, 232, 0.96) 30%,
        rgba(246, 241, 232, 0.88) 40%,
        rgba(246, 241, 232, 0.63) 52%,
        rgba(246, 241, 232, 0.28) 64%,
        rgba(246, 241, 232, 0.07) 76%,
        rgba(246, 241, 232, 0) 86%
      );
  }


  .att-home-hero
  [data-att="slide"]
  img {
    object-position: center center;
  }


  .att-home-hero
  [data-att="hero-main"] {
    display: flex;

    align-items: center;

    min-height: 670px;

    padding:
      64px
      24px
      58px;
  }


  .att-home-hero
  [data-att="copy"] {
    max-width: 700px;
  }


  .att-home-hero
  [data-att="eyebrow"] {
    margin-bottom: 14px;

    font-size: 13px;
  }


  .att-home-hero h1 {
    font-size: 44px;

    line-height: 1.05;
  }


  .att-home-hero
  [data-att="description"] {
    margin-top: 24px;
  }


  .att-home-hero
  [data-att="benefits"] {
    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      );

    gap: 18px;

    margin-top: 28px;
  }


  .att-home-hero
  [data-att="benefit"] {
    align-items: flex-start;

    font-size: 13px;
  }


  .att-home-hero
  [data-att="actions"] {
    flex-direction: row;

    align-items: center;

    gap: 14px;

    margin-top: 30px;
  }


  .att-home-hero
  [data-att="plan-trip"] {
    min-width: 220px;
  }


  .att-home-hero
  [data-att="whatsapp"] {
    min-width: 280px;
  }


  .att-home-hero
  [data-att="trust-strip"] {
    padding: 24px;
  }


  .att-home-hero
  [data-att="trust-inner"] {
    grid-template-columns:
      repeat(
        5,
        minmax(0, 1fr)
      );
  }


  .att-home-hero
  [data-att="trust-item"] {
    grid-template-columns:
      44px
      1fr;

    gap: 10px;

    padding:
      8px
      15px;

    border-right:
      1px solid
      rgba(255, 255, 255, 0.24);

    border-bottom: 0;
  }


  .att-home-hero
  [data-att="trust-item"]:last-child {
    border-right: 0;
  }


  .att-home-hero
  [data-att="trust-item"]
  svg {
    width: 39px;

    height: 39px;
  }


  .att-home-hero
  [data-att="trust-item"]
  p {
    font-size: 12px;
  }

}


/* =========================================================
12. DESKTOP — 1025px+

KEY FIXES HERE:
1. Content max-width changed to 1360px.
2. Additional horizontal padding gives a deliberate inset.
3. Left edge image receives a soft ivory fade.
4. Existing centre fade is preserved.
========================================================= */

@media (min-width: 1025px) {

  .att-home-hero [data-att="slides"] {
    height:
      calc(100% - 118px);
  }


  /*
  DESKTOP FADE SYSTEM

  Layer 1:
  Adds the missing soft fade at the far-left edge.

  Layer 2:
  Protects text and gradually exposes the image
  toward the right.

  The two gradients blend together naturally.
  */

  .att-home-hero
  [data-att="slides"]::after {
    background:

      linear-gradient(
        90deg,

        rgba(246, 241, 232, 0.99) 0%,

        rgba(246, 241, 232, 0.94) 5%,

        rgba(246, 241, 232, 0.70) 11%,

        rgba(246, 241, 232, 0.30) 18%,

        rgba(246, 241, 232, 0.06) 25%,

        rgba(246, 241, 232, 0) 31%
      ),

      linear-gradient(
        90deg,

        rgba(246, 241, 232, 0.99) 0%,

        rgba(246, 241, 232, 0.98) 27%,

        rgba(246, 241, 232, 0.94) 35%,

        rgba(246, 241, 232, 0.77) 44%,

        rgba(246, 241, 232, 0.46) 54%,

        rgba(246, 241, 232, 0.17) 65%,

        rgba(246, 241, 232, 0.04) 75%,

        rgba(246, 241, 232, 0) 84%
      );
  }


  .att-home-hero
  [data-att="hero-main"] {
    min-height: 650px;

    padding:
      62px
      48px
      52px;
  }


  /*
  ALIGNMENT FIX

  Previous max-width: 1200px

  At a 1920px viewport this produced roughly:
  (1920 - 1200) / 2 = 360px left inset.

  The reference is closer to a broader
  1360px content framework.

  New approximate inset:
  (1920 - 1360) / 2 = 280px

  This creates a more balanced relationship
  between the copy and photography.
  */

  .att-home-hero
  [data-att="inner"] {
    max-width: 1360px;
  }


  .att-home-hero
  [data-att="copy"] {
    max-width: 760px;
  }


  .att-home-hero
  [data-att="eyebrow"] {
    font-size: 13px;

    letter-spacing: 0.13em;
  }


  .att-home-hero h1 {
    width: max-content;

    max-width: 100%;

    font-size: 56px;

    line-height: 1.02;
  }


  .att-home-hero
  [data-att="heading-line"],
  .att-home-hero
  [data-att="typing-line"] {
    white-space: nowrap;
  }


  .att-home-hero
  [data-att="typing-line"] {
    min-width: 19ch;
  }


  .att-home-hero
  [data-att="description"] {
    max-width: 620px;

    margin-top: 24px;
  }


  .att-home-hero
  [data-att="description"]
  p {
    font-size: 17px;

    line-height: 1.55;
  }


  .att-home-hero
  [data-att="benefits"] {
    gap: 22px;

    margin-top: 28px;
  }


  .att-home-hero
  [data-att="benefit"] {
    font-size: 14px;
  }


  .att-home-hero
  [data-att="actions"] {
    margin-top: 30px;
  }


  .att-home-hero
  [data-att="plan-trip"],
  .att-home-hero
  [data-att="whatsapp"] {
    min-height: 56px;

    font-size: 15px;
  }


  .att-home-hero
  [data-att="trust-strip"] {
    display: flex;

    align-items: center;

    min-height: 118px;

    padding:
      20px
      32px;
  }


  .att-home-hero
  [data-att="trust-item"] {
    grid-template-columns:
      52px
      1fr;

    gap: 14px;

    padding:
      7px
      24px;
  }


  .att-home-hero
  [data-att="trust-item"]
  svg {
    width: 47px;

    height: 47px;
  }


  .att-home-hero
  [data-att="trust-item"]
  p {
    font-size: 14px;

    line-height: 1.35;
  }

}


/* =========================================================
13. LARGE DESKTOP — 1440px+
========================================================= */

@media (min-width: 1440px) {

  .att-home-hero
  [data-att="hero-main"] {
    min-height: 680px;

    padding-left: 56px;

    padding-right: 56px;
  }


  .att-home-hero
  [data-att="inner"] {
    max-width: 1360px;
  }


  .att-home-hero h1 {
    font-size: 58px;
  }


  .att-home-hero
  [data-att="copy"] {
    max-width: 800px;
  }

}


/* =========================================================
14. EXTRA LARGE DESKTOP — 1800px+

Keeps content from drifting too far left/right on
very large monitors.
========================================================= */

@media (min-width: 1800px) {

  .att-home-hero
  [data-att="inner"] {
    max-width: 1400px;
  }

}


/* =========================================================
15. REDUCED MOTION
========================================================= */

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

  .att-home-hero
  [data-att="slide"],

  .att-home-hero
  [data-att="plan-trip"],

  .att-home-hero
  [data-att="whatsapp"] {
    transition: none;
  }


  .att-home-hero
  [data-att="typing-cursor"] {
    animation: none;

    opacity: 1;
  }


  .att-home-hero
  [data-att="plan-trip"]:hover,

  .att-home-hero
  [data-att="whatsapp"]:hover {
    transform: none;
  }

}

/* =========================================================
ASHIRWAD HERO — FINAL DESKTOP ALIGNMENT + LEFT IMAGE VISIBILITY
-------------------------------------------------------------
PURPOSE:
1. Align hero copy with left edge of header logo.
2. Allow background image to remain softly visible behind
   the left/text area.
3. Does NOT change typography, spacing, buttons, carousel,
   animation, benefits or trust strip.
========================================================= */


@media (min-width: 1025px) {

  /* =======================================================
  1. ALIGN HERO COPY WITH HEADER LOGO

  Header logo starts approximately 38–40px from viewport.
  Hero copy now uses the same left alignment instead of
  being centred inside the 1360px container.
  ======================================================= */

  .att-home-hero [data-att="hero-main"] {
    padding-left: 40px;
    padding-right: 40px;
  }


  .att-home-hero [data-att="inner"] {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }


  /*
  Keep the actual copy width exactly as before.
  Only its horizontal starting position changes.
  */

  .att-home-hero [data-att="copy"] {
    width: 100%;
    max-width: 800px;
  }


  /* =======================================================
  2. BACKGROUND IMAGE VISIBILITY BEHIND LEFT SIDE

  IMPORTANT:
  Previous gradient was almost 100% opaque ivory on left.
  That completely concealed the photograph.

  New treatment:
  Far-left = translucent ivory
  Text zone = readable but image still subtly visible
  Middle = progressively clearer photograph
  Right = untouched photograph
  ======================================================= */

  .att-home-hero [data-att="slides"]::after {
    background:

      linear-gradient(
        90deg,

        rgba(246, 241, 232, 0.78) 0%,

        rgba(246, 241, 232, 0.82) 8%,

        rgba(246, 241, 232, 0.86) 18%,

        rgba(246, 241, 232, 0.88) 28%,

        rgba(246, 241, 232, 0.82) 36%,

        rgba(246, 241, 232, 0.68) 44%,

        rgba(246, 241, 232, 0.45) 53%,

        rgba(246, 241, 232, 0.22) 62%,

        rgba(246, 241, 232, 0.08) 71%,

        rgba(246, 241, 232, 0) 80%
      );
  }

}


/* =========================================================
LARGE DESKTOP
Keep same left alignment — do NOT re-centre hero content.
========================================================= */

@media (min-width: 1440px) {

  .att-home-hero [data-att="hero-main"] {
    padding-left: 40px;
    padding-right: 40px;
  }


  .att-home-hero [data-att="inner"] {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }

}


/* =========================================================
EXTRA LARGE DESKTOP
Override previous 1400px centred container rule.
========================================================= */

@media (min-width: 1800px) {

  .att-home-hero [data-att="inner"] {
    max-width: none;
  }

}

/* =========================================================
FINAL MICRO-ADJUSTMENT
Move complete hero content 10px right on desktop only.
Nothing else is changed.
========================================================= */

@media (min-width: 1025px) {

  .att-home-hero [data-att="hero-main"] {
    padding-left: 50px;
  }

}

@media (min-width: 1440px) {

  .att-home-hero [data-att="hero-main"] {
    padding-left: 50px;
  }

}/* End custom CSS */