/* ==========================================================================
   GLOBAL IMAGE SIZING, CONTAINMENT & RESPONSIVE ALIGNMENT
   Single source of truth for all image containers across the website.
   Ensures images strictly fill their designated UI boxes with object-fit: cover,
   without altering any colors, typography, or UI design.
   ========================================================================== */

/* Universal Image Base & Reset */
img {
  max-width: 100%;
}

.img1,
.images,
.image-anime {
  position: relative;
  overflow: hidden;
}

/* ==========================================================================
   1. SERVICE & PROJECT DETAIL GALLERIES (Screenshot 1 Fix)
   - Left featured image matches the total height of the 2x2 grid on the right.
   - 4 thumbnail images in the 2x2 grid are perfectly equal in height and width.
   - Eliminates all vertical gaps and misalignment regardless of image aspect ratios.
   ========================================================================== */

/* Left featured image container */
.property-single-area .gallery-featured-img,
.property-single-area > .container > .row > .col-lg-6:first-of-type > .img1 {
  width: 100% !important;
  height: 504px !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  display: block !important;
  margin-bottom: 24px !important;
}

.property-single-area .gallery-featured-img img,
.property-single-area > .container > .row > .col-lg-6:first-of-type > .img1 img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  border-radius: 12px !important;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Right 2x2 grid container & thumbnails */
.property-single-area .images-area {
  width: 100% !important;
}

.property-single-area .images-area .img1,
.property-single-area .images-area .gallery-thumb-img {
  width: 100% !important;
  height: 240px !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: 10px !important;
  display: block !important;
  margin-bottom: 24px !important;
}

.property-single-area .images-area .img1 img,
.property-single-area .images-area .gallery-thumb-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  border-radius: 10px !important;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Responsive Breakpoints for Service & Project Gallery */
@media (max-width: 991px) {
  .property-single-area .gallery-featured-img,
  .property-single-area > .container > .row > .col-lg-6:first-of-type > .img1 {
    height: 360px !important;
    margin-bottom: 20px !important;
  }
  .property-single-area .images-area .img1,
  .property-single-area .images-area .gallery-thumb-img {
    height: 200px !important;
    margin-bottom: 16px !important;
  }
}

@media (max-width: 575px) {
  .property-single-area .gallery-featured-img,
  .property-single-area > .container > .row > .col-lg-6:first-of-type > .img1 {
    height: 250px !important;
  }
  .property-single-area .images-area .img1,
  .property-single-area .images-area .gallery-thumb-img {
    height: 150px !important;
  }
}

/* ==========================================================================
   2. BLOG CARDS (Screenshot 2 Fix)
   - Enforces uniform image box height on all blog cards across the website.
   - Enforces equal card height via flexbox with buttons pushed to the bottom.
   ========================================================================== */

.blog-author-boxarea {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  margin-bottom: 30px !important;
  position: relative !important;
}

.blog-author-boxarea .img1 {
  width: 100% !important;
  height: 240px !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: 8px 8px 0 0 !important;
  flex-shrink: 0 !important;
  display: block !important;
}

.blog-author-boxarea .img1 a {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

.blog-author-boxarea .img1 img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  border-radius: 8px 8px 0 0 !important;
  transition: transform 0.4s ease !important;
}

.blog-author-boxarea:hover .img1 img {
  transform: scale(1.08) !important;
}

.blog-author-boxarea .content-area {
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
}

.blog-author-boxarea .content-area p {
  flex-grow: 1 !important;
}

.blog-author-boxarea .content-area .btn-area1,
.blog-author-boxarea .content-area .readmore {
  margin-top: auto !important;
}

@media (max-width: 575px) {
  .blog-author-boxarea .img1 {
    height: 200px !important;
  }
}

/* ==========================================================================
   3. SERVICE & PROPERTY CARDS (Features & Services Grid)
   - Guarantees cards across Services page, Homepage, and Related sections
     remain identical in height and image framing.
   ========================================================================== */

.property-boxarea,
.featured-boxarea {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  margin-bottom: 30px !important;
  position: relative !important;
}

.property-boxarea .img1,
.featured-boxarea .img1 {
  width: 100% !important;
  height: 240px !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: 8px 8px 0 0 !important;
  flex-shrink: 0 !important;
  display: block !important;
}

.property-boxarea .img1 a,
.featured-boxarea .img1 a {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

.property-boxarea .img1 img,
.featured-boxarea .img1 img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  border-radius: 8px 8px 0 0 !important;
  transition: transform 0.4s ease !important;
}

.property-boxarea:hover .img1 img,
.featured-boxarea:hover .img1 img {
  transform: scale(1.08) !important;
}

.property-boxarea .content-area,
.featured-boxarea .content-area {
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
}

.property-boxarea .content-area p,
.featured-boxarea .content-area p {
  flex-grow: 1 !important;
}

.property-boxarea .content-area .price-area,
.featured-boxarea .content-area .service-card-btn-area {
  margin-top: auto !important;
}

/* ==========================================================================
   4. PORTFOLIO & GALLERY SECTIONS (GallerySection)
   - Matches heights across 2-item and 3-item columns.
   ========================================================================== */

.galler-author-area {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 10px !important;
  margin-bottom: 30px !important;
}

.galler-author-area .img1 {
  width: 100% !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: 10px !important;
  display: block !important;
}

.galler-author-area .img1 img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  border-radius: 10px !important;
  transition: transform 0.4s ease !important;
}

/* Column 1 & 3: 2 items per column */
.gallery-col-2items .galler-author-area .img1,
.col-lg-4:nth-child(1) .galler-author-area .img1,
.col-lg-4:nth-child(3) .galler-author-area .img1 {
  height: 310px !important;
}

/* Column 2: 3 items per column */
.gallery-col-3items .galler-author-area .img1,
.col-lg-4:nth-child(2) .galler-author-area .img1 {
  height: 196px !important;
}

@media (max-width: 991px) {
  .galler-author-area .img1,
  .gallery-col-2items .galler-author-area .img1,
  .gallery-col-3items .galler-author-area .img1,
  .col-lg-4:nth-child(1) .galler-author-area .img1,
  .col-lg-4:nth-child(2) .galler-author-area .img1,
  .col-lg-4:nth-child(3) .galler-author-area .img1 {
    height: 250px !important;
  }
}

@media (max-width: 575px) {
  .galler-author-area .img1,
  .gallery-col-2items .galler-author-area .img1,
  .gallery-col-3items .galler-author-area .img1,
  .col-lg-4:nth-child(1) .galler-author-area .img1,
  .col-lg-4:nth-child(2) .galler-author-area .img1,
  .col-lg-4:nth-child(3) .galler-author-area .img1 {
    height: 200px !important;
  }
}

/* ==========================================================================
   5. PROJECT CARDS (Projects List & Featured Projects)
   ========================================================================== */

.project-images-area {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 12px !important;
}

.project-images-area .img1 {
  width: 100% !important;
  height: 300px !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  display: block !important;
}

.project-images-area .img1 img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  border-radius: 12px !important;
}

@media (max-width: 575px) {
  .project-images-area .img1 {
    height: 220px !important;
  }
}

/* ==========================================================================
   6. LOCATION CARDS (Service Areas / Location Grids)
   ========================================================================== */

.location-images-area {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 8px !important;
  margin-bottom: 30px !important;
}

.location-images-area .img1 {
  width: 100% !important;
  height: 310px !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: 8px !important;
  display: block !important;
}

.location-images-area .img1 img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  border-radius: 8px !important;
}

@media (max-width: 575px) {
  .location-images-area .img1 {
    height: 220px !important;
  }
}

/* ==========================================================================
   7. ABOUT PAGE & SECTION IMAGE GRIDS
   ========================================================================== */

/* About Home 4-image grid */
.about4-section-area .about-all-images .images .img1 {
  width: 100% !important;
  height: 260px !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: 8px !important;
  display: block !important;
}

.about4-section-area .about-all-images .images .img1 img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  border-radius: 8px !important;
}

/* About Inner Section 1 (AboutAbout1SectionArea) */
.about1-section-area .about-images-area .author-images .img1 {
  width: 100% !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: 8px !important;
  display: block !important;
}

.about1-section-area .about-images-area .col-lg-6:first-child .author-images .img1 {
  height: 340px !important;
}

.about1-section-area .about-images-area .col-lg-6:last-child .author-images .img1 {
  height: 250px !important;
}

.about1-section-area .about-images-area .author-images .img1 img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  border-radius: 8px !important;
}

@media (max-width: 767px) {
  .about1-section-area .about-images-area .col-lg-6:first-child .author-images .img1,
  .about1-section-area .about-images-area .col-lg-6:last-child .author-images .img1,
  .about4-section-area .about-all-images .images .img1 {
    height: 200px !important;
  }
}

/* About Mission Section */
.mission-section-area .mission-author-area .images {
  width: 100% !important;
  height: 380px !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  display: block !important;
}

.mission-section-area .mission-author-area .images img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  border-radius: 12px !important;
}

@media (max-width: 767px) {
  .mission-section-area .mission-author-area .images {
    height: 260px !important;
  }
}

/* ==========================================================================
   8. HOMEPAGE SERVICE SECTION (ServiceHome1)
   ========================================================================== */

.service4-section-area .img1 {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: 8px !important;
  display: block !important;
}

.service4-section-area .img1 img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  border-radius: 8px !important;
}

@media (max-width: 991px) {
  .service4-section-area .img1 {
    min-height: 320px !important;
    height: 320px !important;
    margin-bottom: 30px !important;
  }
}

/* ==========================================================================
   9. DETAIL HERO & ARTICLE FEATURE BANNERS (images-area2)
   ========================================================================== */

.images-area2 .images {
  width: 100% !important;
  height: 460px !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: 16px !important;
  display: block !important;
}

.images-area2 .images img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  border-radius: 16px !important;
}

@media (max-width: 991px) {
  .images-area2 .images {
    height: 320px !important;
  }
}

@media (max-width: 575px) {
  .images-area2 .images {
    height: 220px !important;
  }
}

/* ==========================================================================
   10. CTA PROMO CARDS (OthersHome1)
   ========================================================================== */

.others5-section-area .publish-boxarea {
  position: relative !important;
  overflow: hidden !important;
  min-height: 260px !important;
}

.others5-section-area .publish-boxarea .img1 {
  position: absolute !important;
  right: 20px !important;
  bottom: 0 !important;
  top: auto !important;
  max-width: 220px !important;
  max-height: 240px !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

.others5-section-area .publish-boxarea .img1 img {
  max-height: 240px !important;
  width: auto !important;
  object-fit: contain !important;
  display: block !important;
}

@media (max-width: 991px) {
  .others5-section-area .publish-boxarea .img1 {
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    margin: 20px auto 0 !important;
    max-width: 100% !important;
    text-align: center !important;
  }
}

/* ==========================================================================
   11. TESTIMONIALS, AVATARS, AND AGENT/TEAM CARDS
   ========================================================================== */

/* Author / client avatar thumbnails */
.author-content .img1,
.testemonial-boxarea .author-content .img1,
.single-pera-box .man-img {
  width: 50px !important;
  height: 50px !important;
  min-width: 50px !important;
  min-height: 50px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
}

.author-content .img1 img,
.testemonial-boxarea .author-content .img1 img,
.single-pera-box .man-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  border-radius: 50% !important;
}

/* Testimonial side decorative image */
.testimonial2-section-area .image-anime {
  position: absolute !important;
  top: 0 !important;
  left: 44% !important;
  bottom: 0 !important;
  width: 280px !important;
  overflow: hidden !important;
}

.testimonial2-section-area .image-anime img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

/* Team & Agent cards */
.team-boxarea .img1,
.agent-boxarea .img1 {
  width: 100% !important;
  height: 300px !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: 8px !important;
  display: block !important;
}

.team-boxarea .img1 img,
.agent-boxarea .img1 img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  border-radius: 8px !important;
}

/* Instagram slider boxes */
.slider-images-area .auhtor-boxes-area .img1 {
  width: 100% !important;
  height: 200px !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: 8px !important;
  display: block !important;
}

.slider-images-area .auhtor-boxes-area .img1 img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  border-radius: 8px !important;
}

/* ==========================================================================
   12. BRAND LOGO SIZING & ALIGNMENT
   ========================================================================== */

.site-logo,
.header-area .site-logo {
  display: flex !important;
  align-items: center !important;
  max-width: 140px !important;
  height: 48px !important;
  overflow: hidden !important;
}

.site-logo a,
.header-area .site-logo a {
  display: inline-flex !important;
  align-items: center !important;
  height: 100% !important;
  max-width: 100% !important;
}

.site-logo img,
.header-area .site-logo img {
  max-height: 42px !important;
  max-width: 130px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
}

.mobile-logo,
.mobile-header .mobile-logo {
  max-width: 120px !important;
  height: 38px !important;
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
}

.mobile-logo a,
.mobile-header .mobile-logo a {
  display: inline-flex !important;
  align-items: center !important;
  height: 100% !important;
  max-width: 100% !important;
}

.mobile-logo img,
.mobile-header .mobile-logo img {
  max-height: 34px !important;
  max-width: 110px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
}

.logosicon-area .logos,
.mobile-sidebar .logos {
  max-width: 130px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
}

.logosicon-area .logos a,
.mobile-sidebar .logos a {
  display: inline-flex !important;
  align-items: center !important;
  height: 100% !important;
  max-width: 100% !important;
}

.logosicon-area .logos img,
.mobile-sidebar .logos img {
  max-height: 36px !important;
  max-width: 120px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
}

.footer-logo-area a,
.footer1-section-area .footer-logo-area a,
.footer2-section-area .footer-logo-area a,
.footer3-section-area .footer-logo-area a,
.footer4-section-area .footer-logo-area a,
.footer5-section-area .footer-logo-area a,
.cta3-header a {
  display: inline-block !important;
  max-width: 160px !important;
}

.footer-logo-area img,
.footer-logo-area a img,
.footer1-section-area .footer-logo-area img,
.footer2-section-area .footer-logo-area img,
.footer3-section-area .footer-logo-area img,
.footer4-section-area .footer-logo-area img,
.footer5-section-area .footer-logo-area img,
.cta3-header img {
  max-height: 50px !important;
  max-width: 150px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
}

/* 13. BLOG RIGHT SIDEBAR RECENT POSTS THUMBNAILS */
.blog-right-side-area .recents-post .post-area .img1 {
  width: 82px !important;
  height: 86px !important;
  position: absolute !important;
  overflow: hidden !important;
  border-radius: 8px !important;
}

.blog-right-side-area .recents-post .post-area .img1 img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 8px !important;
  display: block !important;
}

/* 14. FOOTER NEWSLETTER FORM & SUBSCRIBE BUTTON ALIGNMENT */
.footer-logo-area form,
.footer1-section-area .footer-logo-area form {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 380px !important;
}

.footer-logo-area form input,
.footer1-section-area .footer-logo-area form input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: 100% !important;
  height: 50px !important;
  margin: 0 !important;
  padding: 0 14px !important;
}

.footer-logo-area form button,
.footer1-section-area .footer-logo-area form button,
.footer1-section-area .footer-logo-area form button.header-btn1 {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
  height: 50px !important;
  padding: 0 18px !important;
  margin: 0 !important;
}

.footer-logo-area form button img,
.footer1-section-area .footer-logo-area form button img {
  display: inline-block !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  width: 14px !important;
  height: 14px !important;
}

@media (max-width: 480px) {
  .footer-logo-area form,
  .footer1-section-area .footer-logo-area form {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .footer-logo-area form input,
  .footer1-section-area .footer-logo-area form input {
    width: 100% !important;
  }
  .footer-logo-area form button,
  .footer1-section-area .footer-logo-area form button {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* 15. WHATSAPP FLOATING BUTTON & STACKED LAYOUT */
.whatsapp-floating-btn {
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  width: 56px !important;
  height: 56px !important;
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%) !important;
  color: #ffffff !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 99999 !important;
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.45) !important;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

.whatsapp-floating-btn:hover {
  transform: scale(1.08) !important;
  box-shadow: 0 6px 24px rgba(37, 211, 102, 0.65) !important;
  color: #ffffff !important;
}

.whatsapp-floating-btn:active {
  transform: scale(0.96) !important;
}

.whatsapp-icon {
  width: 30px !important;
  height: 30px !important;
  fill: #ffffff !important;
  display: block !important;
}

.whatsapp-pulse-ring {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  border: 2px solid #25D366 !important;
  pointer-events: none !important;
  animation: wa-pulse 2.2s infinite ease-out !important;
}

@keyframes wa-pulse {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  70% {
    transform: scale(1.4);
    opacity: 0;
  }
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

.whatsapp-floating-tooltip {
  position: absolute !important;
  right: 68px !important;
  background: rgba(18, 24, 28, 0.95) !important;
  color: #ffffff !important;
  font-family: var(--ztc-family-font2, sans-serif) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 6px 14px !important;
  border-radius: 20px !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateX(8px) !important;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2) !important;
}

.whatsapp-floating-tooltip::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  right: -5px !important;
  transform: translateY(-50%) !important;
  border-width: 5px 0 5px 6px !important;
  border-style: solid !important;
  border-color: transparent transparent transparent rgba(18, 24, 28, 0.95) !important;
}

.whatsapp-floating-btn:hover .whatsapp-floating-tooltip {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(0) !important;
}

/* Position Scroll-To-Top above WhatsApp */
.progress-wrap {
  bottom: 90px !important;
  right: 24px !important;
}

@media (max-width: 767px) {
  .whatsapp-floating-btn {
    bottom: 18px !important;
    right: 18px !important;
    width: 50px !important;
    height: 50px !important;
  }
  .whatsapp-icon {
    width: 26px !important;
    height: 26px !important;
  }
  .progress-wrap {
    bottom: 78px !important;
    right: 18px !important;
    width: 48px !important;
    height: 48px !important;
  }
  .whatsapp-floating-tooltip {
    display: none !important;
  }
}

/* ==========================================================================
   16. DUAL HEADER SYSTEM (TOP SMALL HEADER + REFINED MAIN HEADER)
   ========================================================================== */

/* Overall Site Header Wrapper */
.site-header-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99;
}

/* 1. Header Top Small Bar */
.header-top-bar {
  background: #08292c;
  background: linear-gradient(90deg, #051d20 0%, #0a363b 50%, #051d20 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding: 8px 0;
  color: #d1e2e4;
  font-family: var(--ztc-family-font2, sans-serif);
  font-size: 13px;
  line-height: 18px;
  position: relative;
  z-index: 100;
}

.header-top-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-top-left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.header-top-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.top-bar-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #d1e2e4;
  font-size: 13px;
  font-weight: 400;
}

.top-bar-item a {
  color: #d1e2e4;
  text-decoration: none;
  transition: color 0.25s ease;
}

.top-bar-item a:hover {
  color: #F7CF5C;
}

.top-bar-item i {
  color: #F7CF5C;
  font-size: 13px;
  flex-shrink: 0;
}

.top-bar-divider {
  width: 1px;
  height: 14px;
  background: rgba(255, 255, 255, 0.2);
}

.header-top-socials {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.header-top-socials a {
  color: #d1e2e4;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  text-decoration: none;
}

.header-top-socials a:hover {
  background: #F7CF5C;
  color: #072629;
  transform: translateY(-2px);
}

/* 2. Refined Main Header UI */
.site-header-wrapper .header-area.homepage2 {
  position: static !important;
  padding: 0 !important;
}

.site-header-wrapper .header-area.homepage2 .header-elements {
  margin-top: 14px !important;
  padding: 16px 28px !important;
  background: #ffffff !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.09), 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
  transition: all 0.35s ease !important;
}

.site-header-wrapper .header-area.homepage2 .main-menu ul li a {
  font-family: var(--ztc-family-font2) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #1a3235 !important;
  padding: 0 18px !important;
  transition: all 0.3s ease !important;
  position: relative;
}

.site-header-wrapper .header-area.homepage2 .main-menu ul li:hover > a {
  color: #0a4c52 !important;
}

/* Contact Button Refinements */
.site-header-wrapper .header-btn2 {
  background: linear-gradient(135deg, #F7CF5C 0%, #E8B936 100%) !important;
  color: #0e292d !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0.5px !important;
  padding: 12px 22px !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 14px rgba(232, 185, 54, 0.35) !important;
  transition: all 0.3s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
}

.site-header-wrapper .header-btn2:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(232, 185, 54, 0.55) !important;
  color: #05191b !important;
  background: linear-gradient(135deg, #f9d774 0%, #f0c345 100%) !important;
}

.site-header-wrapper .header-btn2 i {
  transition: transform 0.3s ease !important;
}

.site-header-wrapper .header-btn2:hover i {
  transform: translateX(3px) !important;
}

/* Sticky Main Header Behavior */
.site-header-wrapper .header-area.homepage2.sticky {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 999 !important;
  background: #ffffff !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
  padding: 0 !important;
  animation-name: fade-in-down;
  animation-duration: 0.4s;
}

.site-header-wrapper .header-area.homepage2.sticky .header-elements {
  margin-top: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: none !important;
  padding: 14px 0 !important;
  background: transparent !important;
}

/* Inner Page Header Support */
.site-header-wrapper.inner-page-header .header-area.homepage1.inner-menu {
  position: static !important;
  padding: 0 !important;
}

.site-header-wrapper.inner-page-header .header-area.homepage1.inner-menu .header-elements {
  margin-top: 14px !important;
  padding: 16px 28px !important;
  background: rgba(11, 56, 60, 0.92) !important;
  backdrop-filter: blur(10px) !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.site-header-wrapper.inner-page-header .header-area.homepage1.inner-menu.sticky {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 999 !important;
  background: #0b383c !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12) !important;
  padding: 0 !important;
  animation-name: fade-in-down;
  animation-duration: 0.4s;
}

.site-header-wrapper.inner-page-header .header-area.homepage1.inner-menu.sticky .header-elements {
  margin-top: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: none !important;
  padding: 14px 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
}

/* Mobile Header Mini Top Bar */
.mobile-top-bar-mini {
  background: #072629;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding: 6px 14px;
  font-family: var(--ztc-family-font2, sans-serif);
}