:root {
  --bts-blue: #4A74E8;
  --bts-blue-dark: #3763D8;
  --bts-heading: #666666;
  --bts-copy: #7A7A7A;
  --bts-pale: #F0F3FA;
  --bts-white: #ffffff;
}

.about-page {
  margin: 0;
  overflow-x: hidden;
  background: #ffffff;
}

.about-shell {
  width: min(1100px, calc(100% - 96px));
  margin: 0 auto;
}

.about-kicker {
  display: inline-block;
  position: relative;
  margin: 0 0 24px;
  padding-top: 26px;
  color: var(--bts-blue);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1.3;
  text-transform: uppercase;
}

.about-kicker::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 48px;
  height: 3px;
  border-radius: 10px;
  background: var(--bts-blue);
}

.about-section-heading {
  max-width: 1050px;
  margin: 0 auto 62px;
  text-align: center;
}

.about-section-heading .about-kicker::before {
  left: 50%;
  transform: translateX(-50%);
}

.about-section-heading h2,
.about-story h2,
.about-experience h2,
.about-values h2,
.about-cta h2 {
  margin: 0;
  color: var(--bts-heading);
  font-size: clamp(42px, 4.2vw, 70px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.045em;
}

.about-section-heading > p {
  max-width: 820px;
  margin: 26px auto 0;
  color: var(--bts-copy);
  font-size: 18px;
  line-height: 1.75;
}

/* HERO */

.about-hero {
  position: relative;
  min-height: 760px;
  overflow: hidden;
  color: #ffffff;
  background: #343d54 url("../assets/about-us-hero-v3.png") center center / cover no-repeat;
}

.about-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(39, 51, 84, 0.76) 0%, rgba(52, 66, 104, 0.48) 54%, rgba(40, 50, 77, 0.22) 100%);
}

.about-hero .site-header {
  position: relative;
  z-index: 5;
}

.about-hero-shell {
  position: relative;
  z-index: 2;
  width: min(1100px, calc(100% - 96px));
  margin: 112px auto 0;
}

.about-hero-copy {
  max-width: 850px;
}

.about-hero-kicker {
  display: block;
  margin-bottom: 22px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.about-hero-copy h1 {
  margin: 0;
  color: #ffffff !important;
  font-size: clamp(50px, 5vw, 82px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.045em;
}

.about-hero-copy > p {
  max-width: 760px;
  margin: 28px 0 0;
  color: #ffffff !important;
  font-size: 19px;
  line-height: 1.75;
}

.about-hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 30px;
  margin-top: 36px;
}

.about-primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 60px;
  padding: 16px 30px;
  border-radius: 20px;
  background: var(--bts-blue);
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  box-shadow: 0 14px 30px rgba(38, 70, 164, 0.26);
  transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.about-primary-button:hover {
  transform: translateY(-3px);
  background: var(--bts-blue-dark);
  box-shadow: 0 18px 38px rgba(38, 70, 164, 0.34);
}

.about-primary-button i {
  transition: transform 0.25s ease;
}

.about-primary-button:hover i {
  transform: translateX(5px);
}

.about-hero-link {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
}

.about-hero-link i {
  transition: transform 0.25s ease;
}

.about-hero-link:hover i {
  transform: translateX(5px);
}

/* STORY */

.about-story {
  padding: 118px 0;
  background: #ffffff;
}

.about-story-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: 110px;
  align-items: start;
}

.about-story-heading h2 {
  max-width: 590px;
}

.about-story-copy {
  padding-top: 54px;
}

.about-story-copy p {
  margin: 0 0 23px;
  color: var(--bts-copy);
  font-size: 17px;
  line-height: 1.82;
}

.about-story-copy .about-lead {
  color: var(--bts-heading);
  font-size: 23px;
  font-weight: 500;
  line-height: 1.58;
}

/* OWNERS */

.about-leadership {
  padding: 112px 0 122px;
  background: var(--bts-pale);
}

.owner-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 34px;
}

.owner-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(74, 116, 232, 0.1);
  border-radius: 28px;
  background: #ffffff;
  box-shadow: 0 20px 54px rgba(35, 48, 82, 0.09);
  transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease, box-shadow 0.38s ease;
}

.owner-image {
  height: 490px;
  overflow: hidden;
  background: #E9EDF5;
}

.owner-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.5s ease;
}

.owner-card:hover .owner-image img {
  transform: scale(1.025);
}

.owner-content {
  padding: 38px 40px 42px;
}

.owner-role {
  display: block;
  margin-bottom: 16px;
  color: var(--bts-blue);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.owner-content h3 {
  margin: 0 0 22px;
  color: var(--bts-heading);
  font-size: 34px;
  font-weight: 400;
}

.owner-content p {
  margin: 0 0 18px;
  color: var(--bts-copy);
  font-size: 16px;
  line-height: 1.76;
}

.owner-content p:last-child {
  margin-bottom: 0;
}

/* EXPERIENCE */

.about-experience {
  padding: 116px 0;
  color: #ffffff;
  background: linear-gradient(135deg, #4968D8 0%, #7485E5 100%);
}

.about-experience-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 84px;
  align-items: center;
}

.about-kicker-light,
.about-experience .about-kicker {
  color: #ffffff;
}

.about-experience .about-kicker::before {
  background: rgba(255, 255, 255, 0.85);
}

.about-experience h2 {
  max-width: 700px;
  color: #ffffff;
}

.experience-copy > p {
  max-width: 680px;
  margin: 28px 0 34px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 18px;
  line-height: 1.75;
}

.experience-stat {
  display: flex;
  align-items: center;
  gap: 22px;
  width: fit-content;
  padding: 20px 26px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.09);
  transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

.experience-stat strong {
  color: #ffffff;
  font-size: 44px;
  font-weight: 400;
  line-height: 1;
}

.experience-stat span {
  max-width: 170px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 14px;
  line-height: 1.45;
}

.expertise-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.expertise-item {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 112px;
  padding: 22px 24px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 21px;
  background: rgba(255, 255, 255, 0.1);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

.expertise-item i {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  font-size: 19px;
  transition: transform 0.3s ease, background 0.3s ease;
}

.expertise-item span {
  color: #ffffff;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
}

/* PARTNERS */

.about-partners {
  padding: 116px 0 122px;
  background: #ffffff;
}

.partner-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
}

.partner-card {
  position: relative;
  min-height: 250px;
  padding: 36px 38px;
  border: 1px solid #E7EAF1;
  border-radius: 25px;
  background: #ffffff;
  box-shadow: 0 16px 42px rgba(35, 48, 82, 0.07);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.partner-card:hover {
  transform: translateY(-7px);
  border-color: rgba(74, 116, 232, 0.28);
  box-shadow: 0 24px 54px rgba(35, 48, 82, 0.12);
}

.partner-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 18px;
  background: #EEF3FF;
  color: var(--bts-blue);
  font-size: 23px;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s ease, color 0.3s ease;
}

.partner-card h3 {
  margin: 25px 0 12px;
  color: var(--bts-heading);
  font-size: 23px;
  font-weight: 600;
}

.partner-card p {
  margin: 0;
  color: var(--bts-copy);
  font-size: 16px;
  line-height: 1.7;
}

/* VALUES + FOOTPRINT */

.about-values {
  padding: 112px 0 122px;
  background: var(--bts-pale);
}

.values-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 80px;
  align-items: end;
  margin-bottom: 56px;
}

.values-intro > p {
  margin: 0 0 8px;
  color: var(--bts-copy);
  font-size: 18px;
  line-height: 1.78;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.value-card {
  position: relative;
  overflow: hidden;
  min-height: 225px;
  padding: 30px;
  border-radius: 23px;
  background: #ffffff;
  box-shadow: 0 14px 38px rgba(35, 48, 82, 0.07);
  transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s ease, box-shadow 0.34s ease;
}

.value-card > span {
  color: #A9B3CA;
  font-size: 14px;
  font-weight: 700;
}

.value-card h3 {
  margin: 34px 0 13px;
  color: var(--bts-heading);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.35;
}

.value-card p {
  margin: 0;
  color: var(--bts-copy);
  font-size: 15px;
  line-height: 1.68;
}

.value-card:last-child {
  background: linear-gradient(135deg, #4A74E8 0%, #637EE0 100%);
  box-shadow: 0 18px 42px rgba(74, 116, 232, 0.24);
}

.value-card:last-child > span,
.value-card:last-child h3,
.value-card:last-child p {
  color: #ffffff;
}

.value-card:last-child > span,
.value-card:last-child p {
  color: rgba(255, 255, 255, 0.82);
}

.footprint-strip {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 0.8fr;
  gap: 1px;
  margin-top: 30px;
  overflow: hidden;
  border-radius: 23px;
  background: #DDE3F1;
}

.footprint-strip > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 150px;
  padding: 28px 34px;
  background: #ffffff;
  transition: background 0.3s ease, transform 0.3s ease;
}

.footprint-strip strong {
  color: var(--bts-heading);
  font-size: clamp(28px, 2.6vw, 42px);
  font-weight: 400;
  line-height: 1.15;
}

.footprint-strip span {
  margin-top: 10px;
  color: var(--bts-copy);
  font-size: 14px;
}

/* CTA */

.about-cta {
  padding: 100px 0 128px;
  background: #ffffff;
}

.about-cta-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 70px;
  align-items: center;
  padding: 68px 72px;
  border-radius: 30px;
  background: linear-gradient(135deg, #4968D8 0%, #7485E5 100%);
}

.about-cta h2 {
  max-width: 950px;
  color: #ffffff;
  font-size: clamp(40px, 4vw, 66px);
}

.about-cta p {
  margin: 24px 0 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: 17px;
  line-height: 1.7;
}

.about-cta .about-kicker {
  color: #ffffff;
}

.about-cta .about-kicker::before {
  background: rgba(255, 255, 255, 0.85);
}

.about-cta .about-primary-button {
  border: 1px solid rgba(255, 255, 255, 0.38);
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  box-shadow: none;
}

.about-cta .about-primary-button:hover {
  border-color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.23);
  box-shadow: 0 18px 38px rgba(34, 53, 131, 0.22);
}

/* REVEAL */

.reveal-item {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* INTERACTIVE MOVEMENT */

.owner-card.reveal-item.is-visible:hover {
  transform: translateY(-10px);
  border-color: rgba(74, 116, 232, 0.3);
  box-shadow: 0 30px 68px rgba(35, 48, 82, 0.16);
}

.owner-card:hover .owner-image img {
  transform: scale(1.055);
}

.experience-stat:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.16);
  box-shadow: 0 16px 34px rgba(34, 53, 131, 0.18);
}

.expertise-item.reveal-item.is-visible:hover {
  transform: translateY(-7px);
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.17);
  box-shadow: 0 18px 34px rgba(33, 52, 132, 0.18);
}

.expertise-item:hover i {
  transform: translateY(-2px) scale(1.1) rotate(-4deg);
  background: rgba(255, 255, 255, 0.23);
}

.partner-card.reveal-item.is-visible:hover {
  transform: translateY(-9px);
  border-color: rgba(74, 116, 232, 0.32);
  box-shadow: 0 28px 60px rgba(35, 48, 82, 0.14);
}

.partner-card:hover .partner-icon {
  transform: translateY(-4px) scale(1.08) rotate(-4deg);
  background: var(--bts-blue);
  color: #ffffff;
}

.value-card.reveal-item.is-visible:hover {
  transform: translateY(-9px);
  box-shadow: 0 26px 54px rgba(35, 48, 82, 0.14);
}

.value-card:last-child.reveal-item.is-visible:hover {
  background: linear-gradient(135deg, #3763D8 0%, #596FD4 100%);
  box-shadow: 0 28px 58px rgba(55, 99, 216, 0.32);
}

.footprint-strip > div:hover {
  position: relative;
  z-index: 1;
  transform: translateY(-4px);
  background: #F7F9FF;
}

@media (prefers-reduced-motion: reduce) {
  .owner-card,
  .owner-image img,
  .experience-stat,
  .expertise-item,
  .expertise-item i,
  .partner-card,
  .partner-icon,
  .value-card,
  .footprint-strip > div {
    transition: none;
  }

  .owner-card.reveal-item.is-visible:hover,
  .experience-stat:hover,
  .expertise-item.reveal-item.is-visible:hover,
  .partner-card.reveal-item.is-visible:hover,
  .value-card.reveal-item.is-visible:hover,
  .footprint-strip > div:hover {
    transform: none;
  }
}

/* RESPONSIVE */

@media (max-width: 1100px) {
  .about-story-grid,
  .about-experience-grid,
  .values-intro {
    gap: 55px;
  }

  .owner-image {
    height: 420px;
  }

  .values-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .about-shell,
  .about-hero-shell {
    width: min(100% - 48px, 760px);
  }

  .about-hero {
    min-height: 700px;
    background-position: 62% center;
  }

  .about-hero-shell {
    margin-top: 110px;
  }

  .about-page .nav-shell.mobile-menu-open {
    position: relative;
  }

  .about-page .nav-shell.mobile-menu-open .nav-left,
  .about-page .nav-shell.mobile-menu-open .nav-right {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 20;
    display: flex;
    align-items: stretch;
    flex-direction: column;
    gap: 0;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(38, 50, 82, 0.96);
    backdrop-filter: blur(12px);
  }

  .about-page .nav-shell.mobile-menu-open .nav-left {
    top: 92px;
    border-radius: 18px 18px 0 0;
  }

  .about-page .nav-shell.mobile-menu-open .nav-right {
    top: 244px;
    border-top: 0;
    border-radius: 0 0 18px 18px;
  }

  .about-page .nav-shell.mobile-menu-open .nav-link {
    width: 100%;
    padding: 13px 12px;
  }

  .about-page .nav-shell.mobile-menu-open .nav-link.active::after {
    display: none;
  }

  .about-page .nav-shell.mobile-menu-open .dropdown-menu {
    position: static;
    display: none;
    min-width: 0;
    margin-top: 3px;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .about-page .nav-shell.mobile-menu-open .dropdown.is-open .dropdown-menu {
    display: block;
  }

  .about-story,
  .about-leadership,
  .about-experience,
  .about-partners,
  .about-values {
    padding: 84px 0;
  }

  .about-story-grid,
  .about-experience-grid,
  .values-intro,
  .about-cta-inner {
    grid-template-columns: 1fr;
  }

  .about-story-copy {
    padding-top: 0;
  }

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

  .owner-image {
    height: 530px;
  }

  .about-section-heading {
    margin-bottom: 46px;
  }

  .about-cta-inner {
    gap: 34px;
    padding: 52px 46px;
  }
}

@media (max-width: 700px) {
  .expertise-grid,
  .partner-grid,
  .values-grid,
  .footprint-strip {
    grid-template-columns: 1fr;
  }

  .footprint-strip {
    gap: 1px;
  }
}

@media (max-width: 620px) {
  .about-shell,
  .about-hero-shell {
    width: calc(100% - 32px);
  }

  .about-hero {
    min-height: 660px;
    background-position: 66% center;
  }

  .about-hero-shell {
    margin-top: 90px;
  }

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

  .about-hero-copy > p {
    font-size: 16px;
  }

  .about-hero-actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 22px;
  }

  .about-story,
  .about-leadership,
  .about-experience,
  .about-partners,
  .about-values {
    padding: 68px 0;
  }

  .about-section-heading h2,
  .about-story h2,
  .about-experience h2,
  .about-values h2,
  .about-cta h2 {
    font-size: 38px;
  }

  .about-story-copy .about-lead {
    font-size: 20px;
  }

  .owner-image {
    height: 370px;
  }

  .owner-content {
    padding: 30px 25px 34px;
  }

  .owner-content h3 {
    font-size: 29px;
  }

  .experience-stat {
    align-items: flex-start;
    flex-direction: column;
  }

  .value-card {
    min-height: 190px;
  }

  .about-cta {
    padding: 68px 0 95px;
  }

  .about-cta-inner {
    padding: 42px 26px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-item {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==================================================
   BTS WHATSAPP BUTTON
================================================== */


/* Floating WhatsApp Button */

.whatsapp-button {

    position:fixed;

    right:30px;

    bottom:30px;

    width:58px;

    height:58px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#25D366;

    border:none;

    border-radius:50%;

    color:#ffffff;

    font-size:30px;

    cursor:pointer;

    z-index:9999;

    box-shadow:
        0 12px 30px rgba(0,0,0,.18);

    transition:
        transform .3s ease,
        background .3s ease;

}


.whatsapp-button:hover {

    background:#20bd5a;

    transform:translateY(-5px);

}



/* ==================================================
   WHATSAPP POPUP
================================================== */


.whatsapp-popup {

    position:fixed;

    right:30px;

    bottom:105px;

    width:320px;

    background:#ffffff;

    border-radius:24px;

    overflow:hidden;

    box-shadow:
        0 25px 70px rgba(0,0,0,.20);

    z-index:9998;

    opacity:0;

    visibility:hidden;

    transform:translateY(20px);

    transition:

        opacity .35s ease,

        transform .35s ease,

        visibility .35s ease;

}



/* Popup active state */

.whatsapp-popup.active {

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}



/* Small pointer */

.whatsapp-popup::after {

    content:"";

    position:absolute;

    right:48px;

    bottom:-10px;

    width:22px;

    height:22px;

    background:#ffffff;

    transform:rotate(45deg);

}



/* ==================================================
   POPUP HEADER
================================================== */


.whatsapp-popup-header {

    position:relative;

    padding:25px 28px;

    background:#6675D9;

    color:#ffffff;

}



.whatsapp-popup-header h3 {

    margin:0;

    font-size:22px;

    line-height:1.35;

    font-weight:500;

}



/* Close button */

.whatsapp-close {

    position:absolute;

    top:15px;

    right:18px;

    background:none;

    border:none;

    color:#ffffff;

    font-size:28px;

    cursor:pointer;

    line-height:1;

}



.whatsapp-close:hover {

    opacity:.7;

}



/* ==================================================
   POPUP BODY
================================================== */


.whatsapp-popup-body {

    padding:28px;

    color:#46505f;

    font-size:16px;

    line-height:1.65;

}



.whatsapp-popup-body h4 {

    margin:0 0 12px;

    font-size:20px;

    color:#111111;

    font-weight:700;

}



.whatsapp-popup-body p {

    margin:0 0 20px;

}



/* ==================================================
   WHATSAPP ACTION BUTTON
================================================== */


.whatsapp-popup-link {

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    width:100%;

    padding:14px 20px;

    border-radius:50px;

    background:#25D366;

    color:#ffffff;

    text-decoration:none;

    font-size:18px;

    font-weight:600;

    transition:.3s ease;

}



.whatsapp-popup-link:hover {

    background:#20bd5a;

    color:#ffffff;

    transform:translateY(-3px);

}



.whatsapp-popup-link i {

    font-size:25px;

}



/* ==================================================
   BACK TO TOP BUTTON
================================================== */


.back-to-top {

    position:fixed;

    left:30px;

    bottom:30px;

    width:52px;

    height:52px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#586FE5;

    color:#ffffff;

    border:none;

    border-radius:50%;

    font-size:18px;

    cursor:pointer;

    z-index:9999;

    opacity:0;

    visibility:hidden;

    transform:translateY(20px);

    transition:.3s ease;

    box-shadow:

        0 12px 30px rgba(0,0,0,.15);

}



.back-to-top:hover {

    background:#4359d2;

    transform:translateY(-5px);

}



/* Visible state */

.back-to-top.show {

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}



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


@media(max-width:600px){


    .whatsapp-button {

        width:55px;

        height:55px;

        right:20px;

        bottom:20px;

        font-size:28px;

    }



    .whatsapp-popup {

        width:calc(100% - 40px);

        right:20px;

        bottom:90px;

    }



    .whatsapp-popup-header {

        padding:22px;

    }



    .whatsapp-popup-header h3 {

        font-size:20px;

    }



    .whatsapp-popup-body {

        padding:24px;

    }



    .back-to-top {

        width:48px;

        height:48px;

        left:20px;

        bottom:20px;

    }


}