:root {

  --black: #000000;
  --color-005495: #005495;
  --color-1a1a1a: #1a1a1a;
  --color-31455b: #31455b;
  --color-777: #777;
  --color-b0b0b0: #b0b0b0;
  --color-dfb122: #dfb122;
  --color-f1c22b: #f1c22b;
  --color-fff0d8: #fff0d8;
  --white: #ffffff;
}

.shell {

  max-width: 1320px;
  /* Slightly wider to allow for more edge spacing */
  margin: 0 auto;
  padding: 0 80px;
  /* Increased side padding */

}

.site-footer {

  background: var(--color-fff0d8);
  /* Updated sandal bg color */
  color: var(--color-31455b);
  padding: 10px 0 5px;
  position: relative;
  overflow: visible;
}

/* ==============================
   Download the App CTA Box
============================== */
.shell.app-cta {

  background: var(--color-005495);
  /* Updated blue color */
  /* Darker blue matching the image */
  color: var(--white);
  border-radius: 15px;
  /* More rounded like the image */
  padding: 40px 60px 40px 80px !important;
  /* Left padding set to 80px to align content perfectly straight with About Paal Dappa on laptops */
  display: flex;
  justify-content: space-between;
  gap: 60px;
  align-items: center;
  position: relative;
  z-index: 100;
  max-width: 1200px !important;
  /* Locked to the standard page alignment boundary */
  width: calc(100% - 10%) !important;
  /* 5% margin on each side matching header alignment */
  box-sizing: border-box !important;
  /* Forces padding inside the boundary to fit perfectly inside guidelines */
  margin: -80px auto 60px auto !important;
  /* Centered properly */
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.app-cta h3 {

  margin: 0 0 16px 0;
  /* Equivalent to 13px */
  font-weight: 500;
  color: var(--white);
}

.store-badges {

  display: flex;
  gap: 16px;
  align-items: center;
  margin-left: -8px;
  /* nudge badges left for better alignment with heading */

}

.store-badge img {

  width: auto;
  display: block;
  object-fit: contain;
}

/* Drastic adjustment to balance the physically mismatched image files */
.store-badge:first-child img {

  height: 72px;
}

.store-badge:last-child img {

  height: 52px;
}

.availability-card {

  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-right: 40px;
  /* Shifts the block slightly to the left */

}

.availability-card label {

  font-weight: 500;
  color: var(--white);
}

.availability-row {

  display: flex;
  gap: 15px;
  width: 100%;
}

.availability-row input {

  flex: 1;
  max-width: 250px;
  /* Reduced width slightly */
  height: 50px;
  border-radius: 999px;
  border: none;
  padding: 0 15px 0 25px;
  /* Added more space on the left */
  outline: none;
  color: var(--color-777);
  /* Increased font size */
  background: var(--white);
}

.availability-row input::placeholder {

  color: var(--color-b0b0b0);
  /* Light gray placeholder as seen in image */

}

.availability-row .button-gold {

  height: 50px;
  padding: 0 40px;
  border-radius: 999px;
  background: var(--color-f1c22b);
  color: var(--black);
  /* Pure black text for "Check" button */
  font-weight: 500;
  /* Medium weight matching image */
  border: none;
  cursor: pointer;
  transition: background 0.3s ease;
}

.availability-row .button-gold:hover {

  background: var(--color-dfb122);
}

/* ==============================
   Footer Bottom Grid
============================== */
.footer-grid {

  display: flex;
  justify-content: space-between;
  align-items: start;
  padding: 20px 0 !important;
  /* Remove horizontal padding so contents touch the outer boundaries perfectly */
  max-width: 1200px !important;
  /* Locked to the standard page alignment boundary */
  width: calc(100% - 10%) !important;
  /* 5% margin on each side matching header alignment guidelines perfectly on laptops */
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* LOGO COLUMN */
.footer-brand {

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Align logo to the absolute left edge of the grid */
  text-align: left;
}

.footer-logo {

  width: auto;
  height: 160px;
  /* matched header logo height */
  margin-bottom: 5px;
  object-fit: contain;
}

.footer-wellness {

  font-weight: 900;
  color: var(--color-005495);
  /* Updated blue color */

}

/* CONTACT COLUMN */
.footer-contact h3,
.footer-nav h3,
.footer-social h3 {

  /* Increased font size */
  font-weight: 800;
  color: var(--color-005495);
  /* Updated blue color */
  margin-bottom: 10px;
  /* Reduced gap between heading and content */
  text-transform: none;
}

.footer-contact p {

  /* Increased font size */
  line-height: 2;
  /* Adjusted line-height to match links */
  color: var(--color-1a1a1a);
  margin-bottom: 20px;
  font-weight: 400;
  padding-top: 10px;
  /* match .footer-links-col so they align */

}

.footer-contact-info {

  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Reduced gap */

}

.footer-contact-row {

  display: flex;
  align-items: center;
  gap: 10px;
  /* Increased font size */
  color: var(--color-1a1a1a);
  font-weight: 500;
}

.footer-icon-circle {

  width: 22px;
  height: 22px;
  background: var(--color-005495);
  /* Updated blue color */
  /* Blue background matching second screenshot */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-f1c22b);
  /* Yellow icon */
  flex-shrink: 0;
}

/* QUICK LINKS COLUMN */
.footer-links-container {

  display: flex;
  gap: 100px;
  /* Much wider gap as seen in image */
  margin-top: 8px;
  /* Added space above 'About Paal Dappa' and 'Careers' */

}

.footer-links-col {

  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 15px !important;
  /* add a line break-like gap above the first links */

}

.footer-links-col a {

  /* Increased font size */
  color: var(--color-1a1a1a);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}

.footer-links-col a:hover {

  color: var(--color-005495);
  /* Updated blue color */

}

.footer-social {

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Left-align heading and icons within the column */
  text-align: left;
}

/* FOLLOW US COLUMN */
.social-row {

  display: flex;
  gap: 12px;
  margin-top: 25px;
  justify-content: flex-start;
  /* Align icons row starting point */

}

.social-btn {

  width: 30px;
  height: 30px;
  background: var(--color-f1c22b);
  /* Yellow background */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-1a1a1a);
  /* Dark icons */
  transition:
    transform 0.3s ease,
    background 0.3s ease;
  text-decoration: none;
}

.social-btn:hover {

  transform: translateY(-3px);
  background: var(--color-dfb122);
}

/* COPYRIGHT */
.footer-bottom {

  margin-top: 30px;
  padding: 15px 0 !important;
  /* Remove horizontal padding so copyright text aligns perfectly with leftmost boundary */
  text-align: left;
  /* Increased font size */
  color: var(--color-1a1a1a);
  opacity: 0.8;
  max-width: 1200px !important;
  /* Locked to the standard page alignment boundary */
  width: calc(100% - 10%) !important;
  /* 5% margin on each side matching header alignment guidelines perfectly on laptops */
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* ==============================
   RESPONSIVE DESIGN (Pixel Perfect)
============================== */

/* TABLETS (iPad Air / Pro) */
@media (max-width: 1024px) {

  .shell {

    padding: 0 40px;
}

  .shell.app-cta {

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    margin: -100px auto 40px;
    padding: 30px !important;
    max-width: 90%;
    width: min(100%, 760px);
    text-align: center;
}

  .app-cta h3 {

    text-align: center;
    margin-left: 0;
}

  .store-badges {

    justify-content: center;
    margin-left: 0;
    gap: 15px;
}

  .store-badge:first-child img {

    height: 50px !important;
}

  .store-badge:last-child img {

    height: 36px !important;
}

  .availability-row {

    flex-direction: column;
    gap: 15px;
    align-items: center;
}

  .availability-card {

    margin-right: 0;
    text-align: center;
}

  .availability-row input,
  #pinInput {

    height: 48px !important;
    padding: 0 20px !important;
    width: 100% !important;
    max-width: 320px !important;
    text-align: center !important;
    display: block;
    margin: 0 auto;
    border-radius: 999px !important;
}

  .availability-row .button-gold {

    height: 48px !important;
    width: 100% !important;
    max-width: 320px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto;
    border-radius: 999px !important;
}

  .footer-grid {

    flex-wrap: wrap;
    gap: 40px;
    justify-content: space-around;
}

  .footer-brand {

    padding-left: 0;
    margin-right: 0;
    width: 100%;
}
}

/* MOBILE (Phones) */
@media (max-width: 768px) {

  .shell {

    padding: 0 20px;
}

  .shell.app-cta {

    margin: -80px auto 40px;
    padding: 25px 15px !important;
    width: min(100%, 700px);
    max-width: 100%;
}

  .availability-card {

    align-items: center;
    text-align: center;
}

  .availability-row {

    flex-direction: column;
    align-items: center;
    /* Center children horizontally */
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    gap: 15px;
}

  #pinInput {

    display: block !important;
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 20px !important;
    border-radius: 999px !important;
    border: none !important;
    text-align: center !important;
    background: var(--white) !important;
    margin: 0 auto;
}

  .availability-row .button-gold {

    width: 100% !important;
    max-width: 320px;
    height: 48px !important;
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
}

  .footer-grid {

    flex-direction: column;
    gap: 30px;
    text-align: left;
}

  .footer-brand,
  .footer-contact,
  .footer-nav,
  .footer-social {

    width: 100%;
    margin-right: 0;
    padding-left: 0;
}

  .footer-links-container {

    gap: 40px;
}

  .footer-logo {

    margin-left: 0;
}

  .footer-bottom {

    text-align: center;
    margin-top: 0;
    padding-top: 25px;
}
}

/* SMALL MOBILE */
@media (max-width: 480px) {

  .shell.app-cta {

    margin-top: -60px;
}

  .app-cta h3 {

    margin-bottom: 20px;
}

  .store-badges {

    flex-wrap: nowrap;
    gap: 10px;
}

  .store-badge:first-child img {

    height: 40px !important;
}

  .store-badge:last-child img {

    height: 29px !important;
}

  .footer-links-container {

    flex-direction: column;
    gap: 15px;
}

  .social-row {

    justify-content: flex-start;
}
}

/* ==============================
   IPAD PRO SPECIFIC (1024x1366)
   Fix for pin code input height
============================== */
@media screen and (min-width: 820px) and (max-width: 1024px) {

  .availability-row input#pinInput {

    height: 65px !important;
    min-height: 65px !important;
    padding: 0 40px !important;
    box-sizing: border-box !important;
}

  .availability-row .button-gold {

    height: 65px !important;
    min-height: 65px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
}

/* ==============================
   IPAD AIR SPECIFIC (820x1180)
   Moving blue card higher
============================== */
@media screen and (min-width: 820px) and (max-width: 820px) {

  .shell.app-cta {

    margin-top: -110px !important;
    /* Move little more top */
  
}
}

/* ULTRA-WIDESCREEN DESKTOP (1900px and above) */
@media (min-width: 1900px) {

  .site-footer {

    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    height: 656.5px !important;
    /* Locked to exactly 656.5px to prevent ballooning on 2000px - 3000px+ monitors */
    box-sizing: border-box !important;
    padding-bottom: 25px !important;
    padding-top: 0 !important;
}

  .shell.app-cta {

    max-width: 1481px !important;
    width: 1481px !important;
    height: 257.5px !important;
    /* Locked to your exact measured height */
    box-sizing: border-box !important;
    margin-left: auto !important;
    /* Centering auto margin makes left and right gaps 100% mathematically equal */
    margin-right: auto !important;
    /* Centering auto margin makes left and right gaps 100% mathematically equal */
    margin-top: -128.75px !important;
    /* Exactly half of 257.5px height to center the banner perfectly on the footer's top border */
    margin-bottom: 20px !important;
    padding: 40px 60px 40px 80px !important;
    /* Left padding set to 80px to align content perfectly straight with About Paal Dappa on widescreen */
  
}

  .footer-grid,
  .footer-bottom {

    max-width: 1481px !important;
    /* Matches the exact 1481px width of the blue banner for perfect edge-to-edge alignment */
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

  /* WIDESCREEN FONT OVERRIDES (1920px sweet spot) */
  .app-cta h3 {

    font-weight: 700 !important;
    color: var(--white) !important;
}

  .footer-contact p,
  .footer-links-col a,
  .footer-bottom p,
  .footer-contact-row a {

    font-weight: 400 !important;
    color: var(--color-1a1a1a) !important;
}

  .footer-contact h3,
  .footer-nav h3,
  .footer-social h3 {

    font-weight: 700 !important;
    color: var(--color-005495) !important;
}
}