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

/* GLOBAL STYLES */
:root{
  --primary-color: #027353;
  --secondary-color: #80B9BF;
  --primary-background: #FAE9E5;
  --secondary-background: #F2B077;
  --triatry-background: #D99873;

  --card-bg-red:     #F9D6D5;  /* Muted Rose */
  --card-bg-orange:  #F7E0C2;  /* Peachy Tan */
  --card-bg-yellow:  #FBF1C7;  /* Buttercream */
  --card-bg-lime:    #E5F4C9;  /* Soft Lime */
  --card-bg-green:   #C7ECD3;  /* Minty Green */
  --card-bg-cyan:    #C7ECEE;  /* Pale Aqua */
  --card-bg-blue:    #D3E1F5;  /* Powder Blue */
  --card-bg-indigo:  #DCD3EE;  /* Soft Lavender */
  --card-bg-pink:    #F2D3E8;  /* Cotton Candy */
  --card-bg-brown:    #E8D8C3;  /* Light Mocha */
  --card-bg-teal:     #C4E8E2;  /* Frosted Teal */
  --card-bg-purple:  #E2D3F2;  /* Lilac Mist */
  --card-bg-gray:    #E0E0E0;  /* Light Gray */
  --card-bg-aqua:    #D3F2F2;  /* Soft Aqua */
  --card-bg-rose:    #F2D3D3;  /* Light Rose */
  --card-bg-cream:   #FFF5E1;  /* Creamy White */
}

html, body, main{
  width: 100dvw;
  height: 100dvh;
  background-color: var(--primary-background);
  overflow: auto;
}

/* Prevent main content from being affected by navigation */
main {
  position: relative;
  z-index: 1;
}

/* HAMBURGER MENU STYLES */
.hamburger-menu-btn {
  position: fixed;
  top: 2rem;
  left: 5.5%;
  z-index: 1000;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hamburger-menu-btn.menu-open {
  transform: translateX(calc(min(50dvw, 426px) - calc(5.5dvw - 14px)));
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.glassmorphism-circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.glassmorphism-circle:hover {
  transform: scale(1.05);
  background: rgba(255, 255, 255, 0.35);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.hamburger-icon {
  width: 24px;
  height: 18px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.line {
  width: 100%;
  height: 4.1px;
  background-color: var(--primary-color);
  border-radius: 7px;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transform-origin: center;
}

/* Initial slide-in animations for lines */
.line-1 {
  animation: slideInFromLeft 0.6s ease-out 0.1s both;
}

.line-2 {
  animation: slideInFromLeft 0.6s ease-out 0.2s both;
}

.line-3 {
  animation: slideInFromLeft 0.6s ease-out 0.3s both;
}

@keyframes slideInFromLeft {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Transform to X when menu is open */
.hamburger-menu-btn.active .line-1 {
  transform: rotate(45deg) translate(4px, 4px) !important;
  animation: none !important;
}

.hamburger-menu-btn.active .line-2 {
  opacity: 0;
  transform: scale(0) !important;
  animation: none !important;
}

.hamburger-menu-btn.active .line-3 {
  transform: rotate(-45deg) translate(6px, -6px) !important;
  animation: none !important;
}

/* Navigation Menu Styles */
.navigation-menu {
  position: fixed;
  top: 0;
  left: 0;
  min-width: 189px;
  width: 50%;
  max-width: 426px;
  height: 100vh;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(20px);
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  z-index: 999;
  transform: translateX(-100%);
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  box-shadow: 4px 0 20px rgba(0, 0, 0, 0.1);
}

.navigation-menu.open {
  transform: translateX(0);
}

.nav-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  gap: 3rem;
}

.nav-item {
  width: 66%;
  min-width: fit-content;
  opacity: 0;
  transform: translateX(-50px);
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.navigation-menu.open .nav-item {
  opacity: 1;
  transform: translateX(0);
}

.navigation-menu.open .nav-item:nth-child(1) {
  transition-delay: 0.22s;
}

.navigation-menu.open .nav-item:nth-child(2) {
  transition-delay: 0.41s;
}

.navigation-menu.open .nav-item:nth-child(3) {
  transition-delay: 0.66s;
}

.nav-link {
  text-decoration: none;
  color: var(--primary-color);
  font-size: 1.5rem;
  font-weight: 600;
  position: relative;
  padding: 1rem 2rem;
  border-radius: 15px;
  transition: all 0.3s ease;
  display: block;
  background: rgba(255, 255, 255, 0.26);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  text-align: center;
  width: 100%;
}

.nav-link:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  color: var(--primary-color);
}

.nav-link.active {
  opacity: 0.66;
  pointer-events: none;
  background: var(--secondary-color);
  color: white;
  box-shadow: 0 8px 25px rgba(2, 115, 83, 0.3);
}

.nav-link.active:hover {
  background: var(--primary-color);
  color: white;
  opacity: 0.9;
}

.nav-text {
  position: relative;
  z-index: 1;
}

/* BOTTOM BUTTONS */
.bottom-btns-container {
    position: fixed;
    bottom: 41px; /* Above the footer */
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    width: 66%;
    @media (min-width: 767px) and (max-width: 1221.41px) {
        width: 89%;
    }
    max-width: 100%;
    min-width: fit-content;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 2.26rem; /* Reduced gap */
    background: rgba(255, 255, 255, 0.41);
    backdrop-filter: blur(4px);
    /* Initial state for GSAP animation - invisible until animated */
    opacity: 0;
    transform: translateX(-50%) scaleX(0.001);
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* BOTTOM BUTTONS - Collapse */
.bottom-btns-container.collapsed .subscribe-newsletter-container .subscribe-btn, .bottom-btns-container.collapsed .social-share-container {
  display: none!important;
}

.bottom-btns-container.collapsed{
  gap: 0.26rem; 
}

#toggle-collapse-btn{
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
    min-width: 222px;
    max-width: 341px;
    max-height: 66px;
    margin: 0 auto;
    background: transparent;
    border: none;
    padding: 0.26rem 0;
    cursor: pointer;
    color: var(--primary-color);
    font-size: 1.14rem;
    font-weight: bolder;
}

@media screen and (min-width: 768px) {
#toggle-collapse-btn{
      display: none;
  }

.bottom-btns-container.collapsed .subscribe-newsletter-container .subscribe-btn, .bottom-btns-container.collapsed .social-share-container {
  display: none!important;
}
}

#toggle-collapse-btn svg {
    width: 24px;
    height: 24px;
    padding-bottom: 2px;
    transition: transform 0.3s ease;
}


/* BOTTOM BUTTONS - Subscribe Newsletter */
.subscribe-newsletter-container{
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 0.5rem;
    justify-content: center;
    align-items: center;
    min-width: 222px;
    max-width: 341px;
    max-height: 66px;
    margin: 0 auto;
}

.subscribe-newsletter-container .subscribe-btn{
    width: 100%;
    max-height: 66px;
    font-size: 0.89rem;
    font-weight: lighter;
    color: var(--primary-color);
    background: transparent;
    border: 1px solid var(--primary-color);
    border-radius: 50px;
    padding: 0.26rem 0;
}

.subscribe-newsletter-container .subscribe-btn:hover {
    background: var(--primary-color);
    opacity: 0.66;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

@media screen and (max-width: 768px) {
  .subscribe-newsletter-container .subscribe-btn{
      background: var(--primary-color);
      opacity: 0.66;
      color: white;
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  }
}

.subscribe-newsletter-modal{
    display: none;
    position: absolute;
    top: 41%;
    left: 50%;
    width: 89%;
    max-width: 410px;
    transform: translate(-50%, -41%);
    z-index: 4;
    background: rgba(255, 255, 255, 0.41);
    backdrop-filter: blur(4px);
    padding: 1.66rem 2.22rem 2.66rem 2.22rem;
    border-radius: 50px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.subscribe-newsletter-modal.open{
    display: flex;
    animation: slideFromBottom 0.41s ease-out forwards;
}

.subscribe-newsletter-modal .modal-content{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--primary-color);
}

.subscribe-newsletter-modal .modal-content .close{
    width: fit-content;
    height: fit-content;
    align-self: flex-end;
    cursor: pointer;
    font-size: 1.41rem;
}

.subscribe-newsletter-modal .modal-content h2{
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 1.41rem;
}

.subscribe-newsletter-modal .modal-content ::deep .newsletter-form{
    display: flex;
    width: 100%;
    gap: 0.89rem;
}

.subscribe-newsletter-modal .modal-content .newsletter-form input{
    background-color: transparent;
    border:none;
    border-bottom: 1px solid var(--primary-color);
    padding: 0.21rem 0.66rem;
}

.subscribe-newsletter-modal .modal-content .newsletter-form input:focus{
    outline: none;
    border-bottom: 3px solid var(--primary-color);
}

.subscribe-newsletter-modal .modal-content .newsletter-form button{
    font-size: 0.89rem;
    font-weight: lighter;
    color: var(--primary-color);
    background: transparent;
    border: 1px solid var(--primary-color);
    border-radius: 50px;
    padding: 0.26rem 0.66rem;
}

.subscribe-newsletter-modal .modal-content .newsletter-form button:hover{
    background: var(--primary-color);
    opacity: 0.66;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.subscribe-newsletter-modal .modal-content .successMsg {
    display: none;
    color: green;
    font-size: 0.89rem;
    margin-top: 1.41rem;
}
.subscribe-newsletter-modal .modal-content .successMsg.show {
    display: block;
}

.subscribe-newsletter-modal .modal-content .errorMsg {
    display: none;
    color: red;
    font-size: 0.89rem;
    margin-top: 1.41rem;
}

.subscribe-newsletter-modal .modal-content .errorMsg.show {
    display: block;
}

/* BOTTOM BUTTONS - Logo */
.logo-container {
    display: flex;
    flex: 2;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-width: 266px;
    max-width: 389px;
    gap: 0.26rem;
}

.logo-container img {
    width: 100%;
    height: auto;
    max-height: 89px;
    object-fit: cover;
}

.logo-container a{
    text-decoration: none;
    letter-spacing: 0.14rem;
    font-weight: bolder;
    white-space: nowrap;
    background: linear-gradient(45deg, #ff0000, #ff8000, #ffff00, #80ff00, #00ff00, #00ff80, #00ffff, #0080ff, #0000ff, #8000ff, #ff00ff, #ff0080, #ff0000, #ff8000, #ffff00, #80ff00, #00ff00, #00ff80, #00ffff, #0080ff, #0000ff, #8000ff, #ff00ff, #ff0080);
    background-size: 400% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: rainbow 7s ease-in-out infinite;
}

@keyframes rainbow {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

/* BOTTOM BUTTONS - Social Share Buttons */
.copied-warn{
    position: absolute;
    bottom: 50dvh;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    z-index: 5;
    color: var(--primary-color);
    text-shadow: white 0 0 5px, white 0 0 10px, white 0 0 15px;
    animation: slideFromBottom 0.89s ease-out forwards;
}

@keyframes slideFromBottom {
    0% {
        transform: translateX(-50%) translateY(100dvh);
        opacity: 0;
    }
    100% {
        transform: translateX(-50%) translateY(-50%);
        opacity: 1;
    }
}

.social-share-container {
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
    min-width: 222px;
    max-width: 341px;
    max-height: 66px;
    gap: 0.5rem; 
    margin: 0 auto;
}

.share-text {
    font-size: 0.9rem;
    color: var(--primary-color);
    text-shadow: white 0 0 5px, white 0 0 10px, white 0 0 15px;
    font-weight: bold;
    margin-right: 0.25rem; /* Reduced margin */
}

.share-buttons {
    display: flex;
    gap: 0.5rem; /* Reduced gap */
    align-items: center;
}

.share-btn {
    display: flex;
    align-items: center;
    justify-content: center; /* Center icon */
    width: 36px; /* Fixed width for circle */
    height: 36px; /* Fixed height for circle */
    padding: 0; /* Remove padding */
    border-radius: 50%; /* Make fully circular */
    text-decoration: none;
    transition: all 0.3s ease;
    color: white;
    opacity: 0.66;
}

.share-btn svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.share-btn.twitter {
    background: #000000;
}

.share-btn.twitter:hover {
    background: #333333;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    opacity: 1;
}

.share-btn.facebook {
    background: #1877F2;
}

.share-btn.facebook:hover {
    background: #166FE5;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(24, 119, 242, 0.4);
    opacity: 1;
}

.share-btn.linkedin {
    background: #0A66C2;
}

.share-btn.linkedin:hover {
    background: #004182;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(10, 102, 194, 0.4);
    opacity: 1;
}

.share-btn.email {
    background: black;
}

.share-btn.email:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    opacity: 1;
}

.footer{
    position: fixed;
    bottom: 0;
    padding: 0.66rem 0;
    width: 100%;
    text-align: center;
    color: var(--primary-color);
    font-weight: 600;
    text-shadow: white 0 0 5px, white 0 0 10px, white 0 0 15px;
    z-index: 2; /* Ensure footer stays above main content */
}

/* PAGE TRANSITION OVERLAY */
#page-transition-overlay {
  position: fixed;
  top: -41%;
  left: 0;
  width: 100dvw;
  height: 241dvh; /* Made taller to show the curved bottom */
  z-index: 9999;
  pointer-events: none;
  display: block;
}

#page-transition-overlay svg {
  width: 100%;
  height: 100%;
}

/* Overlay uses primary color for all pages */
#page-transition-overlay svg path {
  color: var(--card-bg-green);
}