html { scroll-behavior: smooth; }
a:active, a:hover, a:focus { color: #ffffff; }
nav.star-accessibility-widget,.star-accessibility-widget { display: none !important; }



/* ===== TRANSPARENT NAVBAR BASE ======= */
#site-header,
#site-header.navbar,
#site-header .container,
#site-header .extended-container,
#site-header .cont-wrap,
#site-header .flex-parent,
#site-header .navbar-header,
#site-header .navbar-collapse {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  align-content: center;
}

/* ====== NAVBAR DEFAULT ====== */
#site-header.navbar-default {
  background: #00000000 !important;
  transition: all 0.3s ease;
}

/* ===== NAVBAR STICKY ====== */
#site-header.navbar-default.sticky {
  background: rgba(47, 53, 60, 0.45) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: none !important;
}

/* Remove default margins */
#site-header.navbar {
  margin-bottom: 0;
  min-height: auto;
}

/* Container Base */
/* #site-header .container {
  max-width: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
} */

/* Extended Container */
/* #site-header .extended-container {
  max-width: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
} */

/* Content Wrapper */
#site-header .cont-wrap {
  max-width: 100%;
  width: 100%;
  /* padding-left: 60px;
  padding-right: 60px; */
  /* padding-top: 15px;
  padding-bottom: 15px; */
}

/* ===== MAIN LAYOUT STRUCTURE ====== */
#site-header .flex-parent {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* gap: 32px; */
  position: relative;
  width: 100%;
}

/* ===== LOGO ====== */
#site-header .navbar-header {
  display: flex;
  align-items: center;
  /* gap: 12px; */
  flex: 0 0 auto;
  position: relative;
  z-index: 1001;
}

#site-header .navbar-brand {
  padding: 0;
  margin: 0;
  height: auto;
}

#site-header .navbar-brand.header-logo {
  padding: 0;
  margin: 0;
  height: auto;
  display: flex;
  align-items: center;
}

#site-header .navbar-brand img {
  max-height: 35px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
  transition: all 0.3s ease;
}

/* ======= CENTER MENU WITH ======= */
#site-header #main-navbar {
  flex: 0 0 auto;
  /* position: absolute; */
  /* left: 50%; */
  /* transform: translateX(-50%); */
  display: flex;
  justify-content: center;
  text-align: center;
}

#site-header .navbar-collapse {
  border: none;
  box-shadow: none;
}

/* Glassmorphism container */
#site-header #main-navbar > ul.navbar-nav {
  float: none !important;          
  display: flex;
  align-items: center;
  margin: 0;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  /* transition: all 0.3s ease; */
}

#site-header.navbar.navbar-fixed-top.navbar-default.sticky
#main-navbar > ul.navbar-nav {
border: 0 !important;
background: none!important;
border-radius: 0 !important;
backdrop-filter: none !important;
}

/* Menu items */
#site-header #main-navbar > ul.navbar-nav > li {
  float: none;
  display: inline-block;
  margin: 0;
  margin-left: 5px;
}

#site-header #main-navbar > ul.navbar-nav > li > a {
  color: #fff !important;
  padding: 10px 24px;
  font-size: 16px;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  border-radius: 50px;
  transition: background 0.2s ease, color 0.2s ease;
  background: transparent;
}

#site-header #main-navbar > ul.navbar-nav > li > a:hover,
#site-header #main-navbar > ul.navbar-nav > .active > a,
#site-header #main-navbar > ul.navbar-nav > .current-menu-item > a,
#site-header #main-navbar > ul.navbar-nav > .current-menu-ancestor > a,
#site-header #main-navbar > ul.navbar-nav > li > a:focus {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.15) !important;
  border-radius: 50px;
}

/* Remove borders between menu items */
#site-header #main-navbar > ul.navbar-nav > li + li > a {
  border-left: 0 !important;
}


/* ======= CTA BUTTONS ======= */
#site-header .header-cta-button {
  /* flex: 0 0 auto; */
  /* margin-left: auto; */
  position: relative;
  z-index: 1001;
  display: flex;
  align-items: center;
  gap: 12px;
}


/* Let's Talk button*/
#site-header .header-cta-button .btn,
#site-header .header-cta-button .btn-primary,
#site-header .header-cta-button .btn-cta,
#site-header .btn-cta {
  display: inline-block;
  padding: 12px 28px;
  border-radius: 15px;
  color: #FFFFFF;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  font-family: "Inter", sans-serif;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background .2s ease, color .2s ease, transform .06s ease, border-color .2s ease;
  cursor: pointer;
  white-space: nowrap;
}


#site-header .header-cta-button .btn:hover,
#site-header .header-cta-button .btn:focus,
#site-header .btn-cta:hover,
#site-header .btn-cta:focus {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
}


#site-header .header-cta-button .btn:active,
#site-header .btn-cta:active {
  transform: translateY(0);
}


@media (max-width: 991px) {
  #site-header .header-cta-button {
    display: none !important;
  }
  #site-header .navbar-header {
    width: 100%;
  }
}








/* ===== Hero base ===== */
.pc-hero-section {
  position: relative;
  min-height: 100vh;
  color: #fff;
  overflow: hidden;
}

/* Background video */
.pc-hero-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index: 0;
}

.home .page-container.pg-home {
  margin-top: 0 !important;
}

/* Overlay */
.pc-hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.25) 0%,
    rgba(0,0,0,0.35) 50%,
    rgba(0,0,0,0.45) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Keep wrapper chain */
.pc-hero-container,
.pc-hero-extended,
.pc-hero-wrap {
  position: relative;
  z-index: 2;
  min-height: inherit;
}

/* Flex vertical center */
.pc-hero-wrap {
  display: flex;
  justify-content: flex-start; 
  align-items: center;         
  padding: 0;                  
}

/* Content */
.pc-hero-content { 
  max-width: 960px; 
}

.pc-hero-title {
  font-family: "Inter", sans-serif;
  margin: 0 0 2rem;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: 0.2px;
  font-size: clamp(32px, 6.5vw, 80px);
}

/* CTA button */
.pc-hero-btn {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 15px;
  color: #FFFFFF;
  text-decoration: none;
  font-weight: 600;
  font-size: clamp(14px, 2.2vw, 18px);
  font-family: "Inter", sans-serif;
  background: #0E1C1C;
  border: 1px solid rgba(255,255,255,0.22);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background .2s ease, color .2s ease, transform .06s ease, border-color .2s ease;
  cursor: pointer;
}

.pc-hero-btn:hover {
  background: #FFFFFF;
  color: #0E1C1C;
  border-color: rgba(255,255,255,0.9);
}

.pc-hero-btn i {
  margin-right: 8px;
}

/* ===== Download Popup Modal ===== */
.download-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.download-popup.active {
  display: flex;
}

.download-popup-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

.download-popup-content {
  position: relative;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 20px;
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
  z-index: 1;
}

.popup-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 28px;
  height: 28px;
  border: none;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease;
  z-index: 2;
}

.popup-close:hover {
  background: rgba(255, 255, 255, 0.3);
}

.popup-close i {
  font-size: 16px;
  color: #fff;
}

.popup-inner {
  padding: 50px 40px 40px;
}

.popup-inner h3 {
  font-family: "Inter", sans-serif;
  font-size: 28px;
  font-weight: 600;
  margin: 0 0 12px 0;
  color: #fff;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.popup-inner p {
  margin: 0 0 40px 0;
  color: rgba(255, 255, 255, 0.85);
  text-align: center;
  font-size: 16px;
}

/* CF7 Form Inside Popup */
.download-popup .wpcf7-form p {
  margin-bottom: 20px;
}

.download-popup input[type="text"],
.download-popup input[type="email"] {
  width: 100%;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  font-size: 16px;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.download-popup input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.download-popup input:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.25);
}

/* Submit Button Container */
.download-popup .wpcf7-form p:has(input[type="submit"]) {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Submit Button */
.download-popup .wpcf7-submit {
  width: 100%;
  padding: 16px 18px;
  border: none;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
  border: 1px solid rgba(255, 255, 255, 0.3);
  position: relative;
}

.download-popup .wpcf7-submit:hover {
  background: rgba(255, 255, 255, 0.35);
}

/* Hide submit text when form is submitting */
.download-popup form.submitting .wpcf7-submit {
  color: transparent !important;
  pointer-events: none;
}

/* Position default CF7 spinner */
.download-popup .wpcf7-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0 !important;
  background: rgba(0, 0, 0, 0.3);
  padding: 8px;
  border-radius: 50%;
}


.download-popup .wpcf7-not-valid-tip {
  color: #fca5a5;
  font-size: 13px;
  margin-top: 6px;
}

.download-popup .wpcf7-response-output {
  margin-top: 20px;
  padding: 14px;
  border-radius: 10px;
  font-size: 14px;
  text-align: center;
  background: rgba(254, 226, 226, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fca5a5;
  border: 1px solid rgba(220, 38, 38, 0.2);
}

/* ===== Responsive ===== */
@media (max-width: 575px) {
  .pc-hero-section {
    min-height: 0;                 
    height: min(100svh, 720px);
  }

  .pc-hero-container,
  .pc-hero-extended,
  .pc-hero-wrap {
    min-height: 0;
    height: 100%;
  }

  .download-popup-content {
    max-width: 95%;
    border-radius: 16px;
  }

  .popup-inner {
    padding: 40px 28px 32px;
  }

  .popup-inner h3 {
    font-size: 22px;
  }

  .popup-inner p {
    font-size: 14px;
    margin-bottom: 32px;
  }
}




/* ============= PORTCITY SECTION ============= */

.portcity {
  padding: 100px 0;
  background-color: #fff;
  text-align: center;
}

/* --- Text Styles --- */
.portcity-heading h2 {
  font-family: "Inter", sans-serif;
  font-size: clamp(32px, 6.5vw, 55px);
  font-weight: 600;
  line-height: 1.5;
  color: #0E1C1C;
  display: inline-block;
  text-wrap: balance;
  word-break: keep-all;
}

.portcity-heading .portcity-gray {
  color: #9b9b9b;
  font-weight: 600;
}

.portcity-heading .portcity-black {
  color: #0E1C1C;
  font-weight: 700;
}

/* --- Image Styles --- */
.portcity-image {
  vertical-align: middle;
  height: 100px;
  object-fit: cover;
  margin: 0 8px;
  display: inline-block;
}

/* Custom Shape & Size */
.portcity-image-1 {
  width: 425px;
  border-radius: 60px 0px 60px 0px;
}

.portcity-image-2 {
  width: 350px;
  border-radius: 40px;
}

/* --- Responsive Adjustments --- */
@media (max-width: 991px) {
  .portcity-heading h2 { 
    line-height: 1.25; 
  }

  .portcity-image { 
    height: 60px; 
    margin: 2px 8px; 
  }
  .portcity-image-1 { 
    width: 200px; 
  }
  .portcity-image-2 { 
    width: 220px; 
  }
}

@media (max-width: 600px) {
  .portcity-heading h2 { 
    line-height: 1.35; 
  }
  .portcity-heading br { 
    display: block; 
    margin: 6px 0; 
  }

  .portcity-image { 
    height: 50px; 
    margin: 3px 8px; 
  }
  .portcity-image-1 { 
    /* width: 160px;  */
    width: 100%;
  }
  .portcity-image-2 { 
    /* width: 180px;  */
    display: none;
  }
}

@media (max-width: 575px) {
  .portcity { 
    padding: 35px 0; 
  }
}



/* Video Section */
.video-section {
  background: #fff;
  padding: 70px 0;
  border-top: 1px solid rgba(0,0,0,0.08);
}

/* Heading */
.video-head {
  text-align: center;
  margin-bottom: 50px;
}

.video-head h2 {
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 600;
  font-size: 60px;
  line-height: 1.2;
  color: #111;
  margin: 0 0 20px 0;
}

.video-head p {
  margin: 0;
  color: #6b7280;
  font-size: 20px;
}

/* Video Container */
.video-container {
  max-width: 1200px;
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(17, 24, 39, 0.1);
}

.video-player {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16 / 9;
}

/* Responsive */
@media (max-width: 991px) {
  .video-section {
    padding: 56px 0;
  }
  .video-head h2 {
    font-size: 36px;
  }
  .video-head p {
    font-size: 18px;
  }
}

@media (max-width: 575px) {
  .video-section {
    padding: 44px 0;
  }
  .video-head h2 {
    font-size: 28px;
  }
  .video-head p {
    font-size: 16px;
  }
  .video-container {
    border-radius: 12px;
  }
}




/* Amenities Section */
.amenities {
  background: #fff;
  padding: 70px 0;
  border-top: 1px solid rgba(0,0,0,0.08);
}

.amenities-title {
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 600;
  font-size: 60px;
  line-height: 1.2;
  text-align: center;
  color: #0E1C1C;
  margin: 0 0 70px 0;
}

/* Grid */
.amenities-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 25px;
}

@media (max-width: 991px) {
  .amenities { 
    padding: 56px 0; 
  }
  .amenities-title { 
    font-size: 36px; 
  }
  .amenities-grid { 
    grid-template-columns: repeat(2, 1fr); 
  }
}
@media (max-width: 575px) {
  .amenities { 
    padding: 44px 0; 
  }
  .amenities-title { 
    font-size: 28px; 
  }
  .amenities-grid { 
    grid-template-columns: 1fr; 
  }
}

/* Card */
.amenity-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 22px;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: box-shadow .2s ease, transform .12s ease, border-color .2s ease;
}
.amenity-card:hover {
  border-color: #e2e8f0;
  box-shadow: 0 8px 20px rgba(17, 24, 39, 0.06);
  transform: translateY(-2px);
}

/* Meta */
.amenity-num {
  font-size: 20px;
  color: #6b7280;
}

.amenity-icon {
  color: #0f1f1a;           
  font-size: 40px;          
  line-height: 1;
  margin-top: 5px;
  margin-bottom: 50px;
}

/* Content */
.amenity-title {
  font-size: 20px;
  font-weight: 600;
  color: #111;
  margin: 6px 0 0 0;

  /* 2-line clamp */
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  block-overflow: ellipsis;
}

.amenity-desc {
  margin: 6px 0 0 0;
  color: #6b7280;
  font-size: 15px;
  line-height: 1.7;

  /* 4-line clamp */
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  block-overflow: ellipsis;
}




/* Section shell */
.gallery {
  background: #fff;
  padding: 70px 0 40px;
  border-top: 1px solid rgba(0,0,0,0.08);
}

/* Heading */
.gallery-head {
  text-align: center;
  margin-bottom: 70px;
}
.gallery-head h2 {
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 600;
  font-size: 60px;
  line-height: 1.2;
  color: #111;
  margin: 0 0 30px 0;
}
.gallery-head p {
  margin: 0;
  color: #6b7280;
  font-size: 20px;
}

/* Allow the slider to bleed outside the centered container */
.gallery .extended-container,
.gallery .gallery-wrap { 
  overflow: visible; 
}

/* Full‑bleed slider inside a centered container */
.gallery .gallery-slider {
  --gutter:  clamp(0px, 4vw, 12px);                             /* clamp(12px, 4vw, 28px)                 space from viewport edges */
  width: calc(100vw - (var(--gutter) * 2));         /* full width minus gutters */
  max-width: none;
  margin-left: calc(50% - 50vw + var(--gutter));    /* center the full‑bleed element */
  margin-right: calc(50% - 50vw + var(--gutter));
  /* margin-top: 22px; */
  padding-bottom: 34px;                             /* room for dots */
}
.gallery .gallery-slider .swiper-wrapper { align-items: stretch; }

/* Width of each slide; 'auto' + centeredSlides = side peeks */
.gallery .gallery-slider .swiper-slide {
  width: clamp(260px, 70vw, 1100px);
}

/* Card style */
.gallery-card {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: #f4f5f6;
  box-shadow: 0 10px 30px rgba(17,24,39,.06);
  margin: 0;
  /* aspect-ratio: 16 / 9;  */
  aspect-ratio: 18 / 9;
}
.gallery-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Dots */
.gallery .swiper-pagination {
  position: relative;
  bottom: 0;
  margin-top: 15px;
}
.gallery .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  opacity: .4;
  background: #9ca3af;
}
.gallery .swiper-pagination-bullet-active {
  opacity: 1;
  background: #111;
  transform: scale(1.1);
}

/* Responsive */
@media (max-width: 991px) {
  .gallery { padding: 56px 0 32px; }
  .gallery-head h2 { font-size: 36px; }
  .gallery-card { aspect-ratio: 18 / 9; } /* keep a bit taller on tablet */
  .gallery .gallery-slider .swiper-slide { width: 86vw; }
}
@media (max-width: 575px) {
  .gallery { padding: 44px 0 28px; }
  .gallery-head h2 { font-size: 28px; }
  .gallery-head p { font-size: 13px; }
  .gallery-card { aspect-ratio: 16 / 9; } /* standard on phones */
  .gallery .gallery-slider .swiper-slide { width: 92vw; }
}






/* ===== Footer CTA ===== */

/* Layout */
.footer-contact {
  padding: 60px 0;
  border-top: 1px solid rgba(0,0,0,0.08);
}

.footer-contact .contact-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

@media (max-width: 991px) {
  .footer-contact { 
    padding: 40px 0; 
  }
  .footer-contact .contact-wrap { 
    grid-template-columns: 1fr; 
    gap: 32px; 
  }
}

@media (max-width: 480px) {
  .footer-contact .contact-right .wpcf7-submit {
    width: 100%;
  }
}

/* Left column */
.footer-contact .contact-title {
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 600;
  font-size: clamp(28px, 6.5vw, 60px);
  line-height: 1.2;
  margin: 16px 0 16px 0;
  color: #111;
}

.footer-contact .contact-subtitle {
  margin: 0 0 28px 0;
  color: #6b7280; 
  max-width: 540px;
}

.footer-contact .contact-block { margin: 30px 0; }
.footer-contact .contact-block-title {
  font-weight: 600;
  font-size: 20px;
  letter-spacing: .02em;
  text-transform: none;
  margin: 0 0 12px 0;
  color: #111;
}

/* Contact list */
.footer-contact .contact-list {
  list-style: none; 
  margin: 0; 
  padding: 0;
}
.footer-contact .contact-list li {
  display: flex; 
  align-items: center; 
  gap: 10px;
  margin-bottom: 10px;
  color: #111;
}
.footer-contact .contact-list i {
  color: #111;
  width: 18px; 
  text-align: center; 
  font-size: 16px;
}
.footer-contact .contact-list a {
  color: inherit; 
  text-decoration: none;
}
.footer-contact .contact-list a:hover { text-decoration: underline; }

/* Social icons */
.footer-contact .social-list {
  display: flex; 
  align-items: center; 
  gap: 12px;
  list-style: none; 
  margin: 0; 
  padding: 0;
}
.footer-contact .social-list a {
  display: inline-flex; 
  align-items: center; 
  justify-content: center;
  width: 36px; 
  height: 36px; 
  border-radius: 50%;
  color: #111; 
  background: #f4f5f6; 
  text-decoration: none;
  transition: transform .15s ease, background .2s ease, color .2s ease;
}
.footer-contact .social-list a:hover {
  transform: translateY(-1px);
  color: #ffffff; background: #000000;
}










/* Right column title */
.footer-contact .contact-right .form-title {
  margin: 16px 0 16px 0;
  font-weight: 600;
  font-size: 20px;
  color: #111;
}

/* Right column */
.footer-contact .contact-right .wpcf7-form p { margin-bottom: 14px; }

.footer-contact .contact-right input[type="text"],
.footer-contact .contact-right input[type="email"],
.footer-contact .contact-right input[type="tel"],
.footer-contact .contact-right textarea,
.footer-contact .contact-right select {
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 12px;
  background: #fff;
  padding: 12px 14px;
  font: inherit;
  color: #111;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.footer-contact .contact-right textarea { 
  min-height: 160px; 
  resize: vertical; 
}

.footer-contact .contact-right input:focus,
.footer-contact .contact-right textarea:focus,
.footer-contact .contact-right select:focus {
  outline: none;
  border-color: #1d1d1d;
  box-shadow: 0 0 0 3px rgba(21, 27, 29, 0.15);
}

.footer-contact .contact-right input[type="submit"],
.footer-contact .contact-right button[type="submit"],
.footer-contact .contact-right .wpcf7-submit {
  appearance: none; 
  border: 0;
  display: inline-block; 
  width: 100%;
  background: #0f1f1a; 
  color: #fff;
  padding: 14px 18px; 
  border-radius: 15px;
  font-weight: 600; 
  cursor: pointer;
  transition: filter .15s ease, transform .05s ease;
}

/* Make the submit button narrower and centered */
.footer-contact .contact-right .wpcf7-submit {
  display: block;                    
  width: clamp(240px, 60%, 360px) !important;   
  margin: 0 auto;                    
  padding: 14px 18px;                
  border-radius: 24px;
}

.footer-contact .contact-right .wpcf7-submit:hover { filter: brightness(1.05); }
.footer-contact .contact-right .wpcf7-submit:active { transform: translateY(1px); }

.footer-contact .contact-right .wpcf7-not-valid-tip { 
  color: #b91c1c; 
  font-size: 13px; 
}
.footer-contact .contact-right .wpcf7-response-output {
  margin-top: 12px; 
  border-radius: 8px; 
  padding: 10px 12px;
}

/* OutPut Message Part */
.wpcf7 form.sent .wpcf7-response-output {
  text-align: center;
}
.wpcf7 form.invalid .wpcf7-response-output, 
.wpcf7 form.unaccepted .wpcf7-response-output, 
.wpcf7 form.payment-required .wpcf7-response-output {
  text-align: center;
}

/* SUCCESS */
.wpcf7 form[data-status="sent"] .wpcf7-response-output,
.wpcf7 .wpcf7-mail-sent-ok { 
background: #e8f5e9 !important; /* fallback for older CF7 */
color: #2e7d32 !important; 
}

/* INVALID */
.wpcf7 form[data-status="invalid"] .wpcf7-response-output,
.wpcf7 form[data-status="failed"] .wpcf7-response-output,
.wpcf7 form[data-status="spam"] .wpcf7-response-output,
.wpcf7 form[data-status="aborted"] .wpcf7-response-output,
.wpcf7 .wpcf7-validation-errors, /* fallback for older CF7 */
.wpcf7 .wpcf7-mail-sent-ng { 
background: #ffebee !important; 
color: #c62828 !important; 
}


/* ==== CF7 acceptance checkbox is visible ==== */
.footer-contact .contact-right .wpcf7-acceptance .wpcf7-list-item > label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  line-height: 1.6;
}

.footer-contact .contact-right .wpcf7-acceptance input[type="checkbox"] {
  position: static !important;
  opacity: 1 !important;
  appearance: auto;
  -webkit-appearance: checkbox;
  width: 18px;
  height: 18px;
  margin: 0;
  flex: none;
  accent-color: #0E1C1C; 
}

/* custom box disable */
.footer-contact .contact-right .wpcf7-acceptance .wpcf7-list-item-label::before,
.footer-contact .contact-right .wpcf7-acceptance .wpcf7-list-item-label::after {
  content: none !important;
}

/* Spacing for the row */
.footer-contact .contact-right .wpcf7-acceptance { margin: 10px 0 16px; }

/* Visible focus ring for keyboard users */
.footer-contact .contact-right .wpcf7-acceptance input[type="checkbox"]:focus-visible {
  outline: 2px solid #0E1C1C;
  outline-offset: 2px;
}


/* CheckBox Label Red */
/* Default label color */
.footer-contact .contact-right [data-name="acceptance-795"] .wpcf7-list-item-label {
  color: #ff000073;
}

/* Not checked AFTER submit attempt -> turn red */
.footer-contact .contact-right .wpcf7-form.unaccepted[name="acceptance-795"]:not(:checked) + .wpcf7-list-item-label,
.footer-contact .contact-right .wpcf7-form.invalid[name="acceptance-795"]:not(:checked) + .wpcf7-list-item-label,
.footer-contact .contact-right[name="acceptance-795"][aria-invalid="true"] + .wpcf7-list-item-label {
  color: #ff000073 !important;
}

/* restore normal color */
.footer-contact .contact-right
  [name="acceptance-795"]:checked + .wpcf7-list-item-label {
  color: inherit !important;
}


/* SPINNER */
/* Remove Default Spinner */
.footer-contact .contact-right .wpcf7-spinner {
  display: none !important;
}

/* Target the <p> tag that contains the submit button */
.footer-contact .contact-right .wpcf7-form p:has(> input.wpcf7-submit) {
  position: relative;
}

/* While submitting hide button text */
.footer-contact .contact-right .wpcf7-form.submitting .wpcf7-submit {
  color: transparent !important;  
  pointer-events: none;            
  filter: brightness(0.95);        
}

/* Spinner overlay */
.footer-contact .contact-right .wpcf7-form.submitting p:has(> input.wpcf7-submit)::after {
  content: "";
  position: absolute;
  left: 80%;    /* 50%; */
  top: 50%;
  width: 20px;
  height: 20px;
  margin: 0 !important;             
  transform: translate(-50%, -50%); 
  border-radius: 50%;
  border: 2px solid #fff;           
  border-top-color: transparent;    
  animation: fc7-spin .8s linear infinite;
  pointer-events: none;
  z-index: 5;
}

/* Spinner animation */
@keyframes fc7-spin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}



/* ==== CF7 submit spinner — keep your spinner, center it in the button ==== */

/* Make the <p> that holds the submit the positioning context and
      shrink-wrap to the button so “center” = button center */
.footer-contact .contact-right form.wpcf7-form > p:has(> input.wpcf7-submit) {
  position: relative !important;
  display: inline-block !important;   /* shrink to button width */
  width: auto !important;
  margin: 0 auto !important;          /* keep the whole thing centered */
}

/* Fallback when :has() isn’t supported (use the last <p> in the form) */
@supports not(selector(:has(*))) {
  .footer-contact .contact-right form.wpcf7-form > p:last-of-type {
    position: relative !important;
    display: inline-block !important;
    width: auto !important;
    margin: 0 auto !important;
  }
}

/* New CF7 spinner (.wpcf7-spinner): center it with inset+margin so
      its rotation transform doesn’t break centering */
.footer-contact .contact-right form.wpcf7-form > p:has(> input.wpcf7-submit) .wpcf7-spinner {
  position: absolute !important;
  inset: 0 !important;        /* top:0 right:0 bottom:0 left:0 */
  margin: auto !important;     /* centers the spinner box */
  z-index: 5;
  pointer-events: none;
}

/* Old CF7 spinner styled by your theme (.ajax-loader): center it and
      neutralize the right:15px rule from style.css */
.footer-contact .contact-right form.wpcf7-form > p:has(> input.wpcf7-submit) .ajax-loader {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;  /* no conflict; rotation is on ::after */
  margin: 0 !important;
  z-index: 5;
  pointer-events: none;
}

/* Fallback targets when :has() isn’t supported */
@supports not(selector(:has(*))) {
  .footer-contact .contact-right form.wpcf7-form > p:last-of-type .wpcf7-spinner {
    position: absolute !important;
    inset: 0 !important;
    margin: auto !important;
    z-index: 5;
    pointer-events: none;
  }
  .footer-contact .contact-right form.wpcf7-form > p:last-of-type .ajax-loader {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    z-index: 5;
    pointer-events: none;
  }
}

/* While submitting, dim the button label so the spinner is the focus */
.footer-contact .contact-right form.wpcf7-form.submitting .wpcf7-submit {
  color: transparent !important;
  pointer-events: none;
  filter: brightness(0.95);
}

/* Keep your button centered (matches your existing rule) */
.footer-contact .contact-right .wpcf7-submit { margin: 0 auto; }









/*===== FOOTER WIDGEST =====*/
.footer-nav {
  background: #0E1C1C;         
  color: #e7ecec;
  padding: 32px 0 22px;
}

/* 2-area layout: left logo, right menu */
.footer-nav .footer-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 120px;
}

/* Left: logo */
.footer-nav .footer-logo img {
                 
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
}

/* Right: text menu */
.footer-nav .footer-menu { 
  margin-left: auto;
}

.footer-nav .footer-nav-list {
  display: flex; 
  align-items: center;
  gap: clamp(24px, 9vw, 65px);  
  list-style: none; 
  margin: 0; 
  padding: 0;
}

.footer-nav .footer-nav-list a {
  color: #eaf0f0;
  text-decoration: none;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 600;
  font-size: 18px;
  white-space: nowrap;
  opacity: 0.95;
}

.footer-nav .footer-nav-list a:hover { 
  opacity: 0.8; 
  color: #EAEAEA;
}

/*===== Responsive =======*/
@media (max-width: 991px) {
  .footer-nav .footer-bar {
    flex-direction: column;
    gap: 18px;
    min-height: unset;
  }
  
  .footer-nav .footer-menu { 
    margin-left: 0; 
  }
  
  .footer-nav .footer-nav-list { 
    gap: 28px; 
    flex-wrap: wrap;
    justify-content: center; 
  }
}

@media (max-width: 575px) {
  .footer-nav { 
    padding: 28px 0; 
  }
  
  .footer-nav .footer-nav-list { 
    gap: 18px; 
  }
  
  .footer-nav .footer-nav-list a { 
    font-size: 16px; 
    font-weight: 600; 
  }
}



/*===== FOOTER BOTTOM =====*/

/* #footer-bottom > .container {
  max-width: none;  
  width: 100%;
  margin: 0;
  padding-inline: clamp(16px, 3vw, 32px); 
} */

#footer-bottom {
  background: #0E1C1C;
  border-top: 1px solid rgba(255,255,255,0.6);
  padding: 10px 0;
  color: #eaf0f0;
  font-size: 13px;
  line-height: 1.6;
}

#footer-bottom .container {
  display: block; 
}

#footer-bottom .fb-1 {
  display: flex;
  align-items: center;
  justify-content: space-between; 
  gap: 16px;
  flex-wrap: wrap; 
}

/* Left text */
#footer-bottom .copyright-note {
  margin: 0;
  color: #eaf0f0;
  opacity: 0.85;
}

/* Right: Solution by */
#footer-bottom .fb-site-creater {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  color: #eaf0f0;
}
#footer-bottom .fb-sc-text { margin: 0; opacity: 0.8; }

#footer-bottom .fb-sc-link {
  color: #eaf0f0;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}
#footer-bottom .fb-sc-link:hover { opacity: 0.9; }

.page-header-banner {
    margin-top: 0px !important;
}

@media (min-width: 1440px) {
    .page-header-banner .phb-content {
        padding-top: 180px;
    }
}

/* Responsive */

@media (max-width: 991px) {
  #footer-bottom { 
    text-align: center; 
  }
  #footer-bottom .fb-1 {
    justify-content: center;
    gap: 10px 16px;
  }
  #footer-bottom .fb-site-creater { 
    margin-left: 0; 
  }
}


@media (max-width: 575px) {
  #footer-bottom { 
    padding: 14px 0; 
  }
  #footer-bottom .fb-1 {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }
  #footer-bottom .copyright-note,
  #footer-bottom .fb-site-creater {
    width: 100%;
  }
  #footer-bottom .copyright-note { 
    margin: 0; 
  }
  #footer-bottom .fb-site-creater {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }
}