/* ========================================
   NEZO BRAND INTEGRATION
======================================== */

/* NEZO Color Variables and Classes */
.nezo-primary { 
    color: #2A4A4D; 
}

.nezo-secondary { 
    color: #4A9B8F; 
}

.nezo-bg-primary { 
    background-color: #2A4A4D; 
}

.nezo-bg-secondary { 
    background-color: #4A9B8F; 
}

.nezo-gradient { 
    background: linear-gradient(135deg, #2A4A4D 0%, #4A9B8F 100%); 
}

.nezo-logo { 
    display: inline-block; 
}







/* ========================================
   GLOBAL STYLES - UPDATED WITH NEZO BRANDING
======================================== */

/* Section Styles */


.hero {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  background: linear-gradient(135deg, #E6F3F7 0%, #B8E0D2 100%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding-top: 150px;
  padding-bottom: 80px;
  color: #2A4A4D;
  text-align: center;
}

.hero-inner {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
}

.hero h1 {
  font-size: 3.5rem;
  font-weight: 700;
  margin-bottom: 20px;
  line-height: 1.2;
}

.hero h2 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #31978C;
  margin-bottom: 20px;
}

.hero p {
  font-size: 1.125rem;
  line-height: 1.6;
  color: #2A4A4D;
  margin-bottom: 40px;
}

.hero-buttons {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  justify-content: center;
}

@media (min-width: 640px) {
  .hero-buttons {
    flex-direction: row;
  }
}
/* Global Styles */
body {
    font-family: "Noto Sans", sans-serif;
    text-align: center;
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: #f5f5f5;
    color: #243c4c;
    overflow-x: hidden;
}



.secondary-pages-hero {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  background: linear-gradient(135deg, #E6F3F7 0%, #B8E0D2 100%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding-top: 150px;
  padding-bottom: 80px;
  color: #2A4A4D;
  text-align: center;
}

.secondary-pages-hero-inner {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
}

.secondary-pages-hero h1 {
  font-size: 3.5rem;
  font-weight: 700;
  margin-bottom: 20px;
  line-height: 1.2;
}

.secondary-pages-hero h2 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #31978C;
  margin-bottom: 20px;
}

.secondary-pages-hero p {
  font-size: 1.125rem;
  line-height: 1.6;
  color: #2A4A4D;
  margin-bottom: 40px;
}

.buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px; /* Increased gap between buttons */
    flex-wrap: wrap;
    margin: 2rem 0;
}

/* Modern Button Base Styles */
.modern-btn {
    padding: 16px 32px; /* Increased padding */
    font-size: 1rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    border-radius: 12px;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px; /* Increased gap between icon and text */
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    min-width: 180px; /* Ensures buttons aren't too narrow */
    justify-content: center;
}

/* Specific styling for calendar icon */
.btn-secondary.modern-btn i.fa-calendar {
    font-size: 1rem; /* Slightly larger */
    color: #374151; /* Dark gray color matching text */
}

.modern-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Primary Button - Teal/Green */
.btn-primary.modern-btn {
    background-color: #4A9B8F;
    color: white;
    border: 2px solid #4A9B8F;
}

.btn-primary.modern-btn:hover {
    background-color: #3d8179;
    border-color: #3d8179;
}

/* Secondary Button - White with border */
.btn-secondary.modern-btn {
    background-color: white;
    color: #374151;
    border: 2px solid #E5E7EB;
}

.btn-secondary.modern-btn:hover {
    background-color: #F9FAFB;
    border-color: #D1D5DB;
    color: #111827;
}

/* Icon styling in buttons */
.modern-btn i {
    font-size: 0.875rem;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .buttons {
        flex-direction: column;
        gap: 12px;
        width: 100%;
    }
    
    .modern-btn {
        width: 100%;
        max-width: 300px;
        justify-content: center;
        padding: 14px 24px;
        font-size: 0.95rem;
    }
}

@media (max-width: 480px) {
    .modern-btn {
        padding: 12px 20px;
        font-size: 0.9rem;
    }
}


/* Video Section */
.video-section {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0px; /* Optional: adjust spacing as needed */
    background: none; /* No background */
  }
  
  .video-section video {
    width: 140%;
    max-width: 900px; /* Adjust for responsiveness */
    height: auto;
    border-radius: 20px; /* No rounded corners */
    box-shadow: none; /* No shadow */
    display: block;
  }
  

/* Modern Features Section */
.features {
    padding: 100px 20px;
}

.features-container {
    max-width: 1200px;
    margin: 0 auto;
}

.features-header {
    text-align: center;
    margin-bottom: 80px;
}

.features h1 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #2A4A4D;
    line-height: 1.2;
    margin-bottom: 20px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.features-subtitle {
    font-size: 1.125rem;
    color: #6B7280;
    line-height: 1.6;
    max-width: 700px;
    margin: 0 auto;
}

.feature-boxes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: 1000px;
    margin: 0 auto;
}

.feature-card {
    background: white;
    border-radius: 16px;
    padding: 2rem;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    border: 1px solid #E5E7EB;
    transition: all 0.3s ease;
    position: relative;
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px rgba(0, 0, 0, 0.1);
}

.feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background: #4A9B8F;
    border-radius: 16px;
    margin-bottom: 1.5rem;
    padding: 16px; /* Add padding to prevent cutoff */
}

.feature-icon img {
    width: 100%; /* Use full available space */
    height: 100%; /* Use full available space */
    max-width: 60px; /* Set maximum size */
    max-height: 60px; /* Set maximum size */
    object-fit: contain; /* Ensure proper scaling */
    filter: brightness(0) invert(1); /* Makes icons white */
}


.feature-card h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #2A4A4D;
    margin-bottom: 1rem;
}

.feature-description {
    font-size: 1rem;
    color: #6B7280;
    line-height: 1.6;
    margin-bottom: 2rem;
}

/* Metrics Section */
.feature-metric {
    margin-top: 2rem;
}

.metric-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.metric-label {
    font-size: 0.875rem;
    color: #6B7280;
    font-weight: 500;
}

.metric-value {
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
}

.metric-positive {
    color: #059669;
}

/* Progress Bars */
.progress-bar {
    width: 100%;
    height: 8px;
    background-color: #E5E7EB;
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.8s ease-out;
}

.progress-teal {
    background-color: #14B8A6;
}

.progress-green {
    background-color: #059669;
}

.progress-dark {
    background-color: #374151;
}

/* Mobile Responsive */
@media (max-width: 1024px) {
    .feature-boxes {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .features {
        padding: 60px 20px;
    }
    
    .features h1 {
        font-size: 2rem;
    }
    
    .features-subtitle {
        font-size: 1rem;
    }
    
    .feature-boxes {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .features-header {
        margin-bottom: 60px;
    }
}

/* Animation for progress bars on scroll */
@keyframes progressFill {
    from {
        width: 0%;
    }
    to {
        width: var(--progress-width);
    }
}

.feature-card:hover .progress-fill {
    animation: progressFill 1s ease-out;
}

/* Modern Pricing Section */
.pricing {
    background-color: white;
    padding: 80px 20px;
}

.pricing-container {
    max-width: 1200px;
    margin: 0 auto;
}

.pricing-header {
    text-align: center;
    margin-bottom: 60px;
}

.pricing h1 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #2A4A4D;
    margin-bottom: 16px;
    margin-top: 0;
}

.pricing-subtitle {
    font-size: 1.125rem;
    color: #6B7280;
    margin: 0;
}

.pricing-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: 1500px;
    margin: 0 auto;
}

.pricing-tier {
    background: white;
    border: 2px solid #E5E7EB;
    border-radius: 16px;
    padding: 2rem;
    position: relative;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.pricing-tier:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px rgba(0, 0, 0, 0.1);
}

/* Most Popular Badge */
.pricing-tier-popular {
    border-color: #4A9B8F;
    transform: scale(1.02);
}

.popular-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #4A9B8F;
    color: white;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Pricing Header */
.pricing-tier-header {
    margin-bottom: 2rem;
}

.pricing-tier h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #2A4A4D;
    margin-bottom: 1rem;
}

.pricing-price {
    margin-bottom: 0.5rem;
}

.price-amount {
    font-size: 2.5rem;
    font-weight: 700;
    color: #2A4A4D;
}

.price-period {
    font-size: 1rem;
    color: #6B7280;
    margin-left: 4px;
}

.price-annual {
    font-size: 0.875rem;
    color: #6B7280;
}

/* Features List */
.pricing-features {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem 0;
    text-align: left;
}

.pricing-features li {
    display: flex;
    align-items: center;
    padding: 0.75rem 0;
    font-size: 0.875rem;
    color: #374151;
    border-bottom: none;
}

.pricing-features li i {
    color: #4A9B8F;
    margin-right: 12px;
    font-size: 0.75rem;
}

/* Buttons */
.pricing-btn {
    width: 100%;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.pricing-btn-primary {
    background-color: #4A9B8F;
    color: white;
}

.pricing-btn-primary:hover {
    background-color: #3d8179;
    transform: translateY(-1px);
}

.pricing-btn-secondary {
    background-color: #F3F4F6;
    color: #374151;
    border: 1px solid #D1D5DB;
}

.pricing-btn-secondary:hover {
    background-color: #E5E7EB;
    transform: translateY(-1px);
}

/* ---------- Pricing grid layout & responsive ---------- */

/* desktop default: 3 columns */
.pricing-cards{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

/* center the 4th (Educational) card on desktop */
.pricing-cards > .pricing-tier:nth-child(4){
  grid-column: 2 / span 1;   /* middle column */
  justify-self: center;
}



/* Plugin Section */

.plugin-cards {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    height: auto;
    min-height: 0;
}

.plugin {
    width: 325px;
    margin-top: 50px;
    text-align: center;
    background: #047c6417;
    padding: 20px;
    border-radius: 15px;
    box-shadow: rgba(50, 50, 93, 0.9) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}

.plugin img {
    height: 5.5em;
    max-width: 280px;
    border-radius: 10px;
    margin-bottom: 10px;
    margin-top: 10px;
}

/* Compliance Section */

.compliance-cards {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    height: auto;
    min-height: 0;
}

.compliances {
    width: 325px;
    margin-top: 50px;
    text-align: center;
    background: #047c6417;
    padding: 20px;
    border-radius: 15px;
    box-shadow: rgba(50, 50, 93, 0.9) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}

.compliances img {
    height: 5.5em;
    max-width: 280px;
    border-radius: 10px;
    margin-bottom: 10px;
    margin-top: 10px;
}

/* Section */
.showcase{
  padding: 64px 20px;
  margin-top: 80px;
  text-align:center;
  color: var(--nz-ink);
}
.showcase > h1{
  margin: 0 0 8px;
  font-size: clamp(1.8rem,1.2rem + 1.2vw,2.2rem);
}
.showcase > p{
  margin: 0 auto 28px;
  max-width: 900px;
  line-height: 1.6;
  color:#5b6a74;
}

/* Grid like pricing cards */
.showcase-cards{
  display:grid;
  grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
  gap: 28px;
  align-items: stretch;
  max-width: 1100px;
  margin: 0 auto;
  padding-top: 30px;
}

/* Card */
.showcases{
  position: relative;
  background:#fff;
  border: 1.5px solid var(--nz-border);
  border-radius: 18px;
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
  padding: 28px 24px 24px;
  display:flex;
  flex-direction:column;
  align-items:center;
  min-height: 460px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.showcases:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(0,0,0,.10);
  border-color: rgba(36,60,76,.25);
}


/* Card headings & feature list (use your existing h1/h2 markup) */
.showcases > h1{
  margin: 4px 0 12px;
  font-size: 1.25rem;
  color: var(--nz-ink);
  text-transform: uppercase;
  letter-spacing:.04em;
}
.showcases > h2{
  width:100%;
  max-width: 320px;
  margin: 10px 0;
  font-size: .98rem;
  font-weight:600;
  color:#324a56;
  display:flex;
  align-items:flex-start;
  gap:8px;
  text-align:left;
  line-height:1.45;
}
.showcases > h2::before{
  content:"✓";
  color: var(--nz-accent);
  font-weight:800;
  margin-top:2px;
}

/* Image anchored to bottom like pricing buttons */
.showcases img{
  margin-top:auto;
  width:100%;
  max-width: 280px;
  height:auto;
  object-fit:contain;
  border-radius:12px;
  box-shadow:0 10px 20px rgba(0,0,0,.08);
}

/* Responsive tweaks */
@media (max-width: 640px){
  .showcases{ min-height: 420px; }
  .showcases img{ max-width: 240px;}
  }


/* Partners Section */
.partners {
    background-color: #ffffff;
    padding: 40px 0;
    margin-top: 80px;            /* guaranteed gap even if margins collapse */
    margin-bottom: 120px;
    width: 100%; /* Full viewport width */
    max-width: 100%; /* Prevents restricting width */
    overflow-x: hidden;          /* only hide horizontal overflow */
    overflow-y: visible;         /* allow vertical spacing to show */
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    box-sizing: border-box; /* Ensures proper width calculation */
}

/* Fix Partner Carousel Position */
.partner-carousel {
    width: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    white-space: nowrap;
    z-index: 1; /* Keep it below plugins */
}

/* Continuous Loop Effect */
.partner-slide {
    display: flex;
    animation: slide 50s linear infinite; /* Slower transition */
    min-width: 200%; /* Ensure double width for smooth looping */
}

/* Ensure images fit within the viewport */
.partner-slide img {
    height: 80px;
    margin: 0 50px;
    margin-top: 20px;
    transition: all 0.6s ease;
    max-width: 250px; /* Keep images uniform */
}

/* Hover effect */
.partner-slide img:hover {
    filter: grayscale(0%);
    transform: scale(1.1);
}

/* Smooth infinite scrolling animation */
@keyframes slide {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}




/* CTA Section */
.cta {
    position: relative; /* Required for absolute positioning of the overlay */
    background: linear-gradient(135deg, #c8d5d6 0%, #4A9B8F 100%); 
    /* width: 100vw; Full viewport width */
    max-width: 100%; /* Prevents restricting width */
    color: #243c4c;
    padding: 120px 20px;
    text-align: center; /* Keeps text centered */
    overflow: hidden; /* Ensures the overlay stays within the section */
    max-height: 100px;
}

/* Create the semi-transparent overlay */
.cta::before {
    content: ""; /* Needed for pseudo-elements */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7); /* White overlay with 50% transparency */
    z-index: 1; /* Places the overlay above the background but below the text */
}

/* Ensure content appears above the overlay */
.cta * {
    position: relative;
    z-index: 2;
}

.cta h1 {
    margin-bottom: 50px;
    margin-top: -20px;
}


.cta .buttons {
    margin-top: 20px;
}

/* Pricing Page */

.pricing-hero {
    text-align: center;
    width: 100%;
    max-width: 100vw;
    background-color: #243c4c;
    color: white;
    border-radius: 0 0 20px;
    padding-top: 160px;
    box-shadow: rgba(50, 50, 93, 0.9) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}

.pricing-hero h1 {
    font-size: 3em;
}


.pricing-hero h2 {
    font-size: 1.5em;
}


.pricing-opening {
   margin-bottom: -100px;

}

.pricing-opening h2 {
    color: #217867; 
 }

/* Pricing Image */
.pricing-image {
    width: 100%;
    max-width: 1200px;
    display: block;
}

.subscription-features h2 {
    font-size: 2.5em;
}

.sign-up-conditions {
    font-size: 0.8em;
}

/* FAQ Section */
.faq-section {
    text-align: center;
    padding: 60px 20px;
    background-color: #f5f5f5;
    border-radius: 20px;
    box-shadow: rgba(50, 50, 93, 0.9) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}

.faq-section h1 {
    margin-top: -20px;
}

.faq-container {
    display: flex;
    justify-content: center;
    gap: 50px;
    flex-wrap: wrap;
    max-width: 1000px;
    margin: auto;
}

.faq-column {
    flex: 1;
    min-width: 300px;
}

.faq-item {
    background: white;
    padding: 20px;
    margin-bottom: 15px;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    text-align: left;
}

.faq-item h3 {
    color: #247c64;
    font-size: 1.2em;
    margin-bottom: 5px;
}

.faq-item p {
    color: #333;
    font-size: 1em;
}

/* Services Section */

.services-hero {
    text-align: center;
    width: 100%;
    max-width: 100vw;
    background-color: #47b396;
    color: white;
    border-radius: 0 0 20px;
    padding-top: 140px;
    box-shadow: rgba(50, 50, 93, 0.9) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    font-size: 3em;
}

/* Center the top image too */
.services-overview img {
  display: block;
  margin: 50px auto;
  height: 200px;
}

/* (optional) center-align other inline text in the section */
.services-overview { 
    text-align: center; 
    max-width: 1400px;
    margin: 0 auto;

}

/* keep your centered, narrow headline */
.services-overview .services-headline{
  text-align:center;
  max-width:60ch;
  margin:0 auto 1rem;
  line-height:1.6;
}

/* container for icon + tooltip */
.services-overview .services-headline .info{
  position:relative;
  display:inline-flex;
  vertical-align:middle;
}

/* the little info button/icon */
.info-trigger{
  all:unset;                 /* strip default button styles */
  cursor:help;
  display:inline-grid;
  place-items:center;
  width:1.25em;
  height:1.25em;
  margin-left:.35rem;
  border:1.8px solid #4A9B8F;
  border-radius:999px;
  background:#E8F3F1;
  color:#2A4A4D;             /* the “ⓘ” color */
  font-weight:700;
  line-height:1;             /* keep the circle tight */
}

/* the tooltip bubble */
.tooltip{
  position:absolute;
  left:50%;
  top:calc(100% + .55rem);
  transform:translateX(-50%);
  background:#0b2530;
  color:#fff;
  padding:.75rem .9rem;
  border-radius:.6rem;
  box-shadow:0 12px 30px rgba(0,0,0,.18);
  width:min(60ch, 90vw);
  font-size:.95rem;
  line-height:1.55;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
  z-index:5;
}

/* arrow */
.tooltip::after{
  content:"";
  position:absolute;
  top:-8px; left:50%;
  transform:translateX(-50%);
  border:8px solid transparent;
  border-bottom-color:#0b2530;
}

/* show the tooltip on hover and keyboard focus */
.info-trigger:hover + .tooltip,
.info-trigger:focus-visible + .tooltip{
  opacity:1;
  transform:translateX(-50%) translateY(-2px);
  pointer-events:auto;
}

/* small screens: let the bubble fit better */
@media (max-width:768px){
  .tooltip{ width:min(90vw, 60ch); }
}


/* Mobile tweak */
@media (max-width: 768px) {
  .services-overview > h2,
  .services-overview .services-boxes > h2 {
    max-width: 90%;
  }
}

.services-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 columns */
    gap: 20px; /* Adjust spacing */
    justify-content: center; /* Centers the grid items */
    align-items: center;
    max-width: 800px; /* Ensures proper width */
    width: 100%; /* Responsive width */
    margin: 0 auto; /* Centers the grid container */
    margin-top: 35px;
    margin-bottom: 35px;
}


.services-tier {
    flex: 1;
    background-color: white;
    min-width: 280px;
    max-width: 320px;
    padding: 30px;
    border-radius: 20px;
    width: 320px;
    text-align: center;
    box-shadow: rgba(50, 50, 93, 0.9) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    transition: transform 0.3s ease;
}

.services-tier img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 15px;
}

/* Center the last item (Educational) in the row */
.services-tier:nth-child(4) {
    grid-column: 2; /* Places it in the center column */
}

.services-tier:hover {
    transform: scale(1.05);
}

.services-tier h2 {
    color: #247c64;
}

.services-tier ul {
    list-style: none;
    padding: 0;
}

.services-tier li {
    padding: 12px 0;
}

/* Projects Section */
.projects {
    text-align: center;
    padding: 80px 20px;
    background-color: #f5f5f5;
    border-radius: 20px;
    box-shadow: rgba(50, 50, 93, 0.9) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}

.projects h1 {
    font-size: 3em;
    margin-top: -25px;
}

/* Projects Grid */
.projects-cards {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: auto;
    margin-top: 50px;
}

/* Individual Project Item */
.project-item {
    position: relative;
    width: 380px; /* Adjust width as needed */
    height: 300px; /* Adjust height as needed */
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

/* Project Image */
.project-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease-in-out;
}

.project-item h2 {
    color: white;
}

/* Hover Overlay */
/* Fix Overlay Text Alignment */
.project-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(36, 60, 76, 0.8); /* Dark transparent overlay */
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    text-align: center;
    padding: 20px; /* Increased padding to prevent cutoff */
    box-sizing: border-box; /* Ensures padding doesn't exceed the container */
    overflow: hidden; /* Prevents content from spilling out */
}

/* Ensure Overlay Content is Properly Centered */
.project-overlay h2,
.project-overlay p {
    width: 90%; /* Prevents text from touching the edges */
    max-width: 90%;
    margin: 0 auto;
    text-align: center;
}

.project-overlay h2 {
    margin-bottom: 15px;
}

/* Show Overlay on Hover */
.project-item:hover .project-overlay {
    opacity: 1;
}

/* Ensure Text Resizes Properly on Small Screens */
@media (max-width: 768px) {
    .project-overlay h2 {
        font-size: 1.3em;
    }
    
    .project-overlay p {
        font-size: 0.9em;
    }
}

/* Keep overlay visible when a child link gets keyboard focus */
.project-item:focus-within .project-overlay{
  opacity: 1;
}

/* Space between text and buttons */
.project-overlay{ gap: .75rem; }

/* Button row */
.project-actions{
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: .25rem;
}

/* Primary CTA */
.project-btn{
  display: inline-block;
  padding: .6rem 1rem;
  border-radius: 10px;
  background: #4A9B8F;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  border: 2px solid #4A9B8F;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.project-btn:hover,
.project-btn:focus-visible{
  background: #3d8179;
  border-color: #3d8179;
  transform: translateY(-1px);
  outline: none;
}

/* Optional secondary/ghost CTA */
.project-btn--ghost{
  background: rgba(255,255,255,.1);
  color: #fff;
  border-color: rgba(255,255,255,.35);
}
.project-btn--ghost:hover,
.project-btn--ghost:focus-visible{
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.55);
}


/* Contact Page Header */
.contact-hero {
    text-align: center;
    width: 100%;
    max-width: 100vw;
    background-color: #247c64b9;
    color: white;
    border-radius: 0 0 20px;
    padding-top: 140px;
    box-shadow: rgba(50, 50, 93, 0.9) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}

.contact-hero h1 {
    font-size: 3em;
}

/* Contact Intro Section */
.contact-intro {
    text-align: center;
    margin: auto;
    padding: 40px 20px;
    font-size: 1em;
    line-height: 1.6;
    font-weight: 400 !important;
}

.contact-intro p {
    font-size: 1.5rem;
    font-weight: 500;
    color: #2A4A4D;
    line-height: 1.2;
    margin-bottom: 20px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.contact-features h2 {
    font-size: 2.5em;
}

/* Tile Container */
.tile-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap; /* Ensures proper wrapping on smaller screens */
    max-width: 900px;
    margin: auto;
}

/* Contact Tiles Section */
.contact-tiles {
    text-align: center;
    margin: 80px auto 64px;    /* top, sides, bottom */
    padding-block: 8px; 
}

.contact-tiles h2 {
    font-size: 2em;
    font-size: 2em;
    margin: 0 0 24px; 
}

.contact-tile {
    background-color: #ffffff;
    color:#243c4c;
    padding: 20px;
    width: 150px;
    text-align: center;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: rgba(50, 50, 93, 0.9) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}

.contact-tile:hover {
    background-color: #ffffff;
    transform: scale(1.05);
}

/* Tile Images */
.contact-tile img {
    width: 80px; /* Adjusts size */
    height: 80px;
    object-fit: contain; /* Ensures image fits well */
    margin-bottom: 10px;
}

/* Constrain the section and center it on the page */
.contact-form-section{
  max-width: 900px;      /* pick the width you want */
  margin: 60px auto;     /* centers horizontally */
  padding: 32px 24px;    /* keep your padding */
  background-color: #f5f5f5;
  border-radius: 20px;
  box-shadow: rgba(50,50,93,.09) 0 6px 24px, rgba(0,0,0,.08) 0 2px 6px;
  box-sizing: border-box; /* include padding in width calc */
  text-align: center;
}

/* Center the form contents and keep reasonable width inside */
.contact-form-section form{
  max-width: 640px;
  margin: 0 auto;
  text-align: left;      /* labels/inputs aligned nicely */
}

/* Form fields styling (optional polish) */
.contact-form-section .form-group{
  margin-bottom: 16px;
}
.contact-form-section label{
  display:block;
  margin-bottom: 6px;
  color:#243c4c;
  font-weight:600;
}
.contact-form-section input,
.contact-form-section textarea{
  width:100%;
  padding:12px 14px;
  border:1px solid #d1d5db;
  border-radius:10px;
  background:#fff;
  box-sizing:border-box;
}


/* Correct selector + center the button */
.contact-form-section .btn-primary.modern-btn{
  background-color: #4A9B8F;
  color: #fff;
  border: 2px solid #4A9B8F;

  display: block;           /* so margin:auto can center it */
  margin: 16px auto 0;      /* top auto bottom */
  padding: 12px 24px;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s ease-in-out;
}

.contact-form-section .btn-primary.modern-btn:hover{
  background-color: #3d8179;
  border-color: #3d8179;
}

/* the tech-support section */
.support-cta{
  text-align: center;
  margin: 72px auto 96px;    /* space above and below this section */
}


/* Mobile: let it breathe edge-to-edge but stay centered */
@media (max-width: 768px){
  .contact-form-section{ max-width: 94%; margin: 40px auto; }
  .contact-form-section form{ max-width: 100%; }
}


/* Pop-up Styling */
.popup {
    display: none; /* Hide initially */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 0px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    text-align: center;
    z-index: 1000;
}

.popup-content {
    background: white;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.popup-content button {
    background: #247c64;
    color: white;
    padding: 8px 12px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
}

.popup-content button:hover {
    background: #1b5c4e;
}


/* Unsubscribe */

.unsubscribe-form {
    text-align: center;
    margin-top: 30px;
}

.unsub-success-message {
    color: green;
    margin-top: 20px;
    font-weight: bold;
}

.unsub-error-message {
    color: red;
    margin-top: 20px;
    font-weight: bold;
}


/* Form Styling */
.guide-form {
    max-width: 600px;
    margin: auto;
    background: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    display: block;
}


/* Form Groups */
.form-group {
    margin-bottom: 20px;
    margin-right: 20px;
}

.form-group label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
    color: #243c4c;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1em;
}

form button {
    display: block; /* Ensures it behaves like a block element */
    margin: 20px auto; /* Centers the button horizontally */
    padding: 10px 20px; /* Adjust padding for better appearance */
    text-align: center;
}

/* Educational */

.educational-hero {
    background-image: url("../src/educational-Image.png"); /* Fix path */
    background-size: cover; /* Ensures full coverage */
    background-position: center; /* Centers the image */
    background-repeat: no-repeat; /* Prevents repetition */
    color: #ffffff;
    width: 100%;
    max-width: 100%;
    border-radius: 0 0 20px;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
    text-align: center; /* Keeps text centered */
    box-shadow: rgba(50, 50, 93, 0.9) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    padding-top: 150px;
}

.educational-hero h1 {
    font-size: 3em;
}

.feature-cards {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: auto;
    margin-bottom: 50px;
}

.feature-card {
    background: #31978d1e;
    padding: 20px;
    border-radius: 15px;
    box-shadow: rgba(50, 50, 93, 0.9) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    text-align: center;
    max-width: 300px;
}

.feature-card img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 15px;
}

.feature-card h3 {
    font-size: 1.2em;
    margin-bottom: 10px;
    color: #243c4c;
}

.feature-card p {
    font-size: 1em;
}

/* News Section */

.news-hero  {
    text-align: center;
    width: 100%;
    max-width: 100vw;
    background-color: #b3b49d;
    color: white;
    border-radius: 0 0 20px;
    padding-top: 140px;
    box-shadow: rgba(50, 50, 93, 0.9) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}

.news-hero h1 {
    font-size: 4em;
 
 }
 
 .news-hero h2 {
     color: #ffffff; 
  }



.news{
    width: 100%;
    max-width: 1400px;     /* pick the width you want */
    margin: 50px auto;     /* <-- centers horizontally */
    padding: 60px 40px;
    background-color: #f5f5f5;
    border-radius: 20px;
    box-shadow: rgba(50,50,93,.9) 0 2px 5px -1px, rgba(0,0,0,.3) 0 1px 3px -1px;
    box-sizing: border-box;
}

.news h1 {
    font-size: 2.5em;
    margin-bottom: 10px;
}

.news h2 {
    font-size: 1.8em;
    margin-bottom: 30px;
    color: #243c4c;
}

/* News Grid */
.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1700px;
    margin: auto;
}

/* Make the first news item span full width */
.news-item.news-featured {
    grid-column: span 3; /* Takes up all 3 columns */
    height: 500px; /* Slightly larger height */
    background-color: #217867;
}

.news-item.news-featured img {
    width: 70%;
    height: auto;  /* Allows the image to adjust proportionally */
    max-height: 500px;  /* Prevents excessive stretching */
    object-fit: contain;  /* Ensures the whole image fits without cropping */
}


/* Individual News Item */
.news-item {
    position: relative;
    width: 100%;
    height: 400px;
    max-width: 500px;
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

/* News Image */
.news-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease-in-out;
}

/* Hover Overlay */
.news-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(36, 60, 76, 0.8); /* Dark transparent overlay */
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    text-align: center;
    padding: 20px; /* Increased padding to prevent cutoff */
    box-sizing: border-box; /* Ensures padding doesn't exceed the container */
    overflow: hidden; /* Prevents content from spilling out */
}

/* Show Overlay on Hover */
.news-item:hover .news-overlay {
    opacity: 1;
}

/* Hover Zoom Effect on Image */
.news-item:hover img {
    transform: scale(1.1);
}

/* Ensure Overlay Content is Properly Centered */
.news-overlay h2,
.news-overlay p {
    width: 90%; /* Prevents text from touching the edges */
    max-width: 90%;
    margin: 0 auto;
    text-align: center;
}

.news-overlay h2 {
    margin-bottom: 15px;
}

/* Read More Button */
.news-btn {
    background-color: #85b9b4;
    color: white;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 5px;
    transition: background 0.3s ease;
    margin-top: 15px;
}

.news-btn:hover {
    background-color: #79a3a4;
}

.news-articles ul {
    list-style-type: disc; /* Ensures bullets are displayed */
    list-style-position: inside; /* Positions bullets inside the container */
    padding-left: 20px; /* Adds space for bullets */
    margin: 0 auto; /* Centers the list */
    text-align: center; /* Keeps the list centered */
    display: flex;
    flex-direction: column;
    align-items: center; /* Ensures the list stays centered */
}

.news-articles li {
    width: 100%;
    max-width: 850px;
    text-align: left; /* Aligns text to the left */
    display: list-item; /* Ensures list behavior */
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.news-article-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: left;
    max-width: 900px;
    margin: auto;
    padding: 20px;
    background: #f9f9f9;
    border-radius: 12px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

.news-article-container img {
    width: 100%;
    max-width: 700px;
    height: auto;
    border-radius: 10px;
    margin-bottom: 20px;
}

.news-content {
    padding: 10px 20px;
}

.news-content h2 {
    font-size: 1.8em;
    color: #247c64;
    margin-bottom: 15px;
}

.news-content p {
    font-size: 1.1em;
    line-height: 1.6;
    margin-bottom: 15px;
}

  .news-content a {
    color: #217867;
    text-decoration: underline;
  }
  
  .news-content a:hover {
    color: #155d4f;
  }

/* Podcast Video Embed */
.podcast-video {
    margin-top: 20px;
    text-align: center;
}

.podcast-video iframe {
    width: 100%;
    max-width: 700px;
    height: 400px;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}


/* Tutorials */

.tutorials img {
    max-width: 700px;
    margin-bottom: 55px;
}

.revit-image {
    width: 700px;
    height: auto;
}

.archicad-logo {
    width: 500px;
    height: auto;
}

.tutorials h1 {
    margin-bottom: 20px;
}

.tutorials {
    text-align: center; /* Centers the content */
    padding: 40px 20px; /* Adds spacing */
}

.tutorial-videos {
    display: flex;
    flex-direction: column; /* Stacks videos vertically */
    align-items: center; /* Centers videos */
    gap: 20px; /* Adds space between videos */
    width: 100%;
    max-width: 800px; /* Limits width for better appearance */
    margin: auto; /* Centers the container */
}

/* Ensures videos are responsive */
.tutorial-videos iframe {
    width: 100%;
    max-width: 700px; /* Adjust as needed */
    height: 400px; /* Maintains a good aspect ratio */
    border-radius: 10px; /* Optional: Adds rounded corners */
}

/* Download - Tutorials Page */

.download-tutorials h1 {
    font-size: 3em;
}

/* Highlight "Download, Install" text in green */
.highlight-text {
    color: #217867;
}

/* Style the buttons */
.btn-primary-downloads {
    display: inline-block;
    background-color:  #4A9B8F;
    color: white;
    padding: 10px 20px;
    margin: 5px 0;
    text-decoration: none;
    border-radius: 5px;
    transition: 0.3s ease;
}

.btn-primary-downloads:hover {
    background-color: #99b3ae;
}

/* Align download tutorials */
.download-tutorials-options {
    display: flex;
    justify-content: center;
    gap: 100px;
    flex-wrap: wrap;
}

/* Style individual option boxes */
.option-sketchup, .option-revit, .option-archicad {
    text-align: center;
    width: 250px;
    margin-bottom: 35px;
}

/* Make images uniform */
.option-sketchup img, .option-revit img, .option-archicad img {
    width: 250px;
    height: auto;
    margin-bottom: 30px;
}

.option-sketchup img, .option-archicad img {
    margin-bottom: 56px;
}

/* Business Cards */

.business-cards {
    background: #fff;
    width: 300px;
    border-radius: 15px;
    box-shadow: rgba(50, 50, 93, 0.9) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    padding: 20px;
    text-align: center;
    position: relative;
    margin: 150px auto 100px; /* top auto bottom */
}

.profile-image {
    background: #f0f0f0;
    border-radius: 50%;
    padding: 6px;
    width: 170px; /* Ensure consistency with the outer border */
    height: 170px;
    margin: 0 auto;
    border: 6px solid #fff;
    position: absolute;
    top: -125px; /* Keeps it slightly lower to avoid overlap */
    left: 50%;
    transform: translateX(-50%);
    box-shadow: rgba(50, 50, 93, 0.9) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.profile-image img {
    width: 110%; /* Slightly increase width to zoom in */
    height: 110%; /* Slightly increase height to zoom in */
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.1); /* Zoom in the image */
}



.business-info {
    margin-top: 80px;
    align-items: center;
}

.business-info h2 {
    font-size: 20px;
    color: #333;
    margin: 10px 0 5px;
}

.business-info .title {
    color: gray;
    font-size: 14px;
    margin-bottom: 10px;
}

.business-info p {
    font-size: 14px;
    color: #555;
    margin: 5px 0;
    display: flex; /* Enables alignment */
    align-items: center; /* Aligns icon and text vertically */
    justify-content: center; /* Ensures overall centering */
    gap: 8px; /* Adds spacing between the icon and text */
}

.business-info img.info-icon {
    width: 18px; /* Adjust icon size */
    height: 18px;
    display: inline-block;
}

.business-info p i {
    margin-right: 8px;
    color: #333;
}

.info-icon {
    width: 18px;
    height: 18px;
    margin-right: 8px;
    vertical-align: middle;
}

.social-icons {
    margin-top: 10px;
}

.social-icons a img {
    width: 24px;
    height: 24px;
    transition: 0.3s;
}

.social-icons a img:hover {
    opacity: 0.8;
}

.download-contact {
    margin-top: 15px;
}

.contact-button {
    background-color: #4A9B8F;
    color: white;
    border: none;
    padding: 10px 15px;
    font-size: 14px;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s;
}

.contact-button:hover {
    background-color: #243c4c;
}

@media (max-width: 600px) {
    .business-cards {
        max-width: 250px;
    }
  }

/* Sydney Build Expo Comp */

.competition {
    background: #acaaaa1e;
    padding: 60px 20px;
    text-align: center;
    border-radius: 20px;
    box-shadow: rgba(50, 50, 93, 0.9) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    margin: 60px auto;
    max-width: 800px;
  }
  
  .competition-logo {
    max-width: 180px;
    margin-bottom: 25px;
  }
  
  .competition h1 {
    font-size: 2.5em;
    color: #217867;
    margin-bottom: 10px;
  }
  
  .competition h2 {
    font-size: 1.2em;
    color: #243c4c;
    margin-bottom: 30px;
  }
  
  .competition-form {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 20px;
  }
  
  .competition-form input[type="email"] {
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 1em;
    margin: 0;
  }
  
  .competition-form .btn-primary {
    background-color: #217867;
    color: white;
    padding: 12px 25px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.3s ease;
    font-size: 1em;
    margin: 0;
  }
  
  .competition-form .btn-primary:hover {
    background-color: #79a3a4;
  }
  
  .competition-coffee {
    font-size: 1em;
    color: #555;
    margin-bottom: 30px;
  }
  
  .competition-book p {
    font-size: 1em;
    margin-bottom: 10px;
  }
  
  .competition-book .btn-secondary {
    padding: 10px 20px;
    background-color: #243c4c;
    color: white;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-size: 1em;
    transition: background 0.3s;
  }
  
  .competition-book .btn-secondary:hover {
    background-color: #555;
  }
  
  /* 🔽 Mobile layout: stack input and button vertically */
    @media (max-width: 600px) {
    .competition-form {
      flex-direction: column;
      align-items: center;
    }
  
    .competition-form input[type="email"],
    .competition-form button {
      width: 100%;
      max-width: 250px;
    }
  }

/* E-Book Quick Guids */

.quick-guides-container {
    display: flex;
    justify-content: space-between;
    padding: 40px;
    background-color: #fff;
    max-width: 1200px;
    margin: auto;
    box-shadow: rgba(50, 50, 93, 0.9) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    gap: 40px;
    border-radius: 2.5%;
  }
  
  /* Fix class names to match HTML */
  .left-section-ebook {
    flex: 1 1 55%;
    max-width: 55%;
  }
  
  .left-section-ebook .main-image {
    width: 100%;
    max-width: 400px;
    height: auto;
    display: block;
    margin-bottom: 20px;
  }
  
  .description-text h1 {
    font-size: 24px;
    margin-bottom: 15px;
  }
  
  .description-text p {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 15px;
  }
  
  .right-section-ebook {
    flex: 1 1 40%;
    max-width: 40%;
    background-color: #217867;
    color: #fff;
    padding: 30px;
    border-radius: 2.5%;
    padding-top: 50px;
  }
  
  .right-section-ebook h2 {
    margin-bottom: 20px;
    font-size: 20px;
    color: white;
  }

  .guide-main-image {
    display: flex;
    align-items: center;
    margin: auto;
  }
  
  .guide-form input,
  .guide-form select {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: none;
    border-radius: 4px;
    font-size: 14px;
  }
  
  .guide-form input::placeholder {
    color: #666;
  }
  
  .guide-form button {
    padding: 15px 30px;
    font-size: 1.2em;
    border: none;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.3s ease;
    box-shadow: rgba(50, 50, 93, 0.9) 0px 2px 5px -1px,
      rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    width: 100%;
    font-size: 16px;
    background-color: #217867;
    color: white;
  }
  
  .guide-form button:hover {
    background-color: #79a3a4;
  }
  
  .privacy-notice {
    margin-top: 15px;
    font-size: 12px;
    color: #e0e0e0;
  }
  
  .privacy-notice a {
    color: #ffffff;
    text-decoration: underline;
  }
  
  /* Responsive fix for mobile */
  @media (max-width: 768px) {
    .quick-guides-container {
      flex-direction: column;
      align-items: center;
    }
  
    .left-section-ebook,
    .right-section-ebook {
      max-width: 100%;
      flex: 1 1 100%;
    }
  
    .left-section-ebook .guide-main-image {
      max-width: 100%;
    }

    .guide-main-image {
        max-width: fit-content;
    }

  }
  



/* footer*/
  
header, .sticky-footer {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 0px; /* Prevent sticking to screen edges */
}

/* Modern Footer Styles */
.modern-footer {
    background-color: #111827;
    color: white;
    padding: 4rem 0;
}

.footer-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* FIX: Change grid to match your 4-column layout */
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.2fr; /* 4 columns instead of 5 */
    gap: 3rem; /* Increase gap for better spacing */
    margin-bottom: 3rem;
}

@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

/* Brand Section */
.footer-brand {
    /* First column - takes 2fr space */
}

.footer-logo-modern {
    height: 2rem;
    margin-bottom: 1rem;
}

.brand-tagline {
    color: #9CA3AF;
    margin-bottom: 1rem;
    font-size: 1rem;
}

.powered-by {
    color: #6B7280;
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
}

/* Office Locations */
.office-locations {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.office-item {
    display: flex;
    flex-direction: column;
}

.office-title {
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: white;
}

.office-item a {
    display: inline-block;
}

.office-item img {
    width: 20px;
    height: 20px;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.office-item a:hover img {
    opacity: 1;
}


.footer-heading {
    font-weight: 600;
    margin-bottom: 1rem;
    font-size: 1rem;
    color: white;
}

.footer-socials-title {
    margin-top: 2rem;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.footer-links li {
    margin: 0;
}

.footer-links li a {
    color: #9CA3AF;
    text-decoration: none;
    transition: color 0.3s ease;
    font-size: 0.9rem;
}

.footer-links li a:hover {
    color: white;
}

/* Social Icons Modern */
.social-icons-modern {
    margin-top: 1rem;
}

.social-icons-modern ul {
    margin: 0;
    padding: 0;
}

/* Footer Bottom */
.footer-bottom {
    border-top: 1px solid #374151;
    padding-top: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.copyright {
    color: #9CA3AF;
    font-size: 0.9rem;
    margin: 0;
}

.footer-bottom-socials {
    display: flex;
    gap: 1.5rem;
}

.footer-bottom-socials a {
    color: #9CA3AF;
    font-size: 1rem;
    transition: color 0.3s ease;
    text-decoration: none;
}

.footer-bottom-socials a:hover {
    color: white;
}

@media (max-width: 768px) {
    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }
    
    .footer-grid {
        grid-template-columns: 1fr;
    }
}


  
/* NAV/Header */

.index-header {
    display: flex;
    justify-content: center; /* Centers the nav */
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 1000;
}

/* Updated Navigation Styles */
nav {
    width: 70%; /* Limits width to 70% */
    height: 80px;
    position: fixed;
    top: 20px; /* Adds a small gap from the top */
    left: 50%;
    transform: translateX(-50%); /* Centers the nav */
    z-index: 1000;
    background: #ffffff; /* White background */
    border-radius: 12px; /* Rounded edges */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* Softer shadow */
    padding: 10px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px; /* Prevents stretching on larger screens */
}

/* Navigation Container */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

/* Logo */
.nav-logo {
    height: 45px;
    padding-left: 20px;
    padding-top: 10px;
}

/* Style the Navigation Links */
.nav-links {
    list-style: none;
    display: flex;
    gap: 25px;
    padding: 0;
    margin: 0;
}

/* Navigation Links */
.navbar ul {
    list-style: none;
    display: flex;
    gap: 25px;
    padding: 0;
    margin: 0;
}

/* Individual Navigation Items */
.navbar ul li {
    display: inline-block;
}

/* Navigation Links Styling */
.navbar ul li a {
    text-decoration: none;
    font-size: 18px;
    color: #243c4c;
    padding: 10px 15px;
    border-radius: 8px; /* Rounded corners */
    transition: background 0.3s ease-in-out, transform 0.2s ease-in-out, color 0.3s ease-in-out;
}

/* Hover Effect */
.navbar ul li a:hover {
    background: #f3f3f3; /* Light grey background */
    color: #243c4c;
    transform: scale(1.05);
    border-radius: 8px; /* Ensures rounded corners */
}

/* Center dropdown menu below parent */
.navbar ul li.dropdown {
    position: relative;
  }
  
  .navbar ul li .dropdown-menu {
    left: 50%;
    transform: translateX(-50%);
  }
  
/* Sign In & Register Buttons */
.nav-buttons {
    display: flex;
    gap: 15px;
    margin-right: 20px;
}

/* Sign In Button */
.btn-signin {
    background: transparent;
    color: #243c4c;
    padding: 8px 20px;
    border-radius: 8px;
    transition: all 0.3s ease-in-out;
    box-shadow: rgba(50, 50, 93, 0.9) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    text-decoration: none;
}

.btn-signin:hover {
    background: #243c4c;
    color: #ffffff;
}

/* Register Button */
.btn-register {
    background: #4A9B8F;
    color: white;
    border: none;
    padding: 8px 20px;
    border-radius: 8px;
    transition: all 0.3s ease-in-out;
    box-shadow: rgba(50, 50, 93, 0.9) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    text-decoration: none;
}

.btn-register:hover {
    background: #79a3a4;
}


.error-page {
    text-align: center;
    padding: 50px;
}

.error-page h1 {
    font-size: 36px;
    color: #243c4c;
}

.error-page p {
    font-size: 18px;
    color: #666;
    margin-bottom: 150px;
}

.error-page img {
    max-width: 400px;
    margin-top: 20px;
}

/* Dropdown container */
.dropdown {
    position: relative;
}

/* Dropdown default hidden */
.dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 12px); /* Adds 12px spacing below the button */
    left: 0;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
    padding: 10px 0;
    min-width: 160px;
    z-index: 1000;
    flex-direction: column;
}

/* Show when active */
.dropdown-menu.show {
    display: flex;
  }

/* Dropdown links */
.dropdown-menu li {
    display: block;
    width: 100%;
}

.dropdown-menu li a {
    display: block;
    padding: 10px 15px;
    font-size: 16px;
    color: #243c4c;
    text-decoration: none;
    transition: background 0.2s ease-in-out;
}

.dropdown-menu li a:hover {
    background-color: #f3f3f3;
    border-radius: 8px;
}


/* ========== NEWSLETTER PAGE STYLES ========== */

.newsletter-content {
    max-width: 900px;
    margin: 50px auto;
    padding: 0 20px;
    font-family: 'Noto Sans', sans-serif;
    font-size: 1.05rem;
    line-height: 1.8;
    color: #243c4c;
  }
  
  .newsletter-content h3 {
    font-size: 1.8rem;
    margin: 40px 0 15px;
    color: #217867;
    line-height: 1.4;
  }
  
  .newsletter-content p {
    margin-bottom: 20px;
  }
  
  .newsletter-content a {
    color: #217867;
    text-decoration: underline;
  }
  
  .newsletter-content a:hover {
    color: #155d4f;
  }
  
  .newsletter-content img {
    display: block;
    max-width: 100%;
    max-height: 500px;
    height: auto;
    margin: 30px auto;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  }
  
  .newsletter-content blockquote {
    font-style: italic;
    background-color: #f4f4f4;
    padding: 20px;
    border-left: 4px solid #217867;
    margin: 30px 0;
    border-radius: 6px;
    color: #243c4c;
  }
  
  /* Make iframe embeds inside newsletters responsive */
  .newsletter-content iframe {
    max-width: 100%;
    border-radius: 8px;
    margin: 20px 0;
  }
  
  .linkedin-button-wrapper {
    margin-top: 40px;
    text-align: center;
  }
  
  .linkedin-button {
    display: inline-block;
    background-color: #0077b5;
    color: white;
    padding: 12px 24px;
    font-size: 1rem;
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.3s ease;
    margin-bottom: 50px;
  }
  
  .linkedin-button:hover {
    background-color: #005983;
  }
  

  /* Responsive tweaks */
  @media (max-width: 768px) {
    .newsletter-content {
      font-size: 1rem;
      padding: 0 15px;
    }
  
    .newsletter-content h3 {
      font-size: 1.4rem;
    }
  }
  


/* Responsive Mobile Navigation */
@media (max-width: 1024px) {
    nav {
        width: 100%; /* Adjust width for smaller screens */
    }
}

@media (max-width: 768px) {
    .navbar ul {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 80px;
        left: 0;
        width: 100%;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        padding: 20px;
        border-radius: 0 0 12px 12px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }

    .navbar ul.show {
        display: flex;
    }

    .menu-toggle {
        display: block;
        cursor: pointer;
        color: #247c64;
        font-size: 24px;
    }
}


/* MOBILE SUPPORT */
/* UNIVERSAL MOBILE RESPONSIVENESS */

/* Hide the menu-toggle on desktop (768px and above) */
@media (min-width: 768px) {
    .menu-toggle {
        display: none !important;
    }
}


@media (max-width: 768px) {
    body {
        font-size: 16px;
        padding: 0;
        margin: 0;
    }

 

    .services-overview img {
        max-width: 250px;
    }


    /* GENERAL SECTION STYLING */
    section {
        padding: 40px 15px;
    }

    /* Make the navbar take full width */
    nav{
        width: 100%;
        height: 80px;
        /* top | right | bottom | left  → increase left pad */
        padding: 10px 24px 10px 32px;
        gap: 20px;
        box-sizing: border-box; /* make padding not overflow */
    }

    .nav-logo{
        padding-left: 0;   /* was 10px – not needed now */
        margin-left: 4px;  /* tiny extra nudge (optional) */
    }

    /* Center the nav-links */
    /* Ensure nav links are centered */
    .nav-links {
        display: none;
        flex-direction: column;
        align-items: center; /* Ensures all items align in the center */
        justify-content: center; /* Centers content vertically */
        background: rgba(255, 255, 255, 1); /* Ensure fully opaque */
        width: 100%;
        backdrop-filter: none; /* Remove blur effects */
        position: absolute;
        top: 60px; /* Adjust based on header height */
        left: 5%; /* Shift left by 50% */
        transform: translateX(-4%); /* Corrects alignment */
        padding: 15px 0;
        text-align: center;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    }

    /* Ensure each list item is centered */
    .nav-links li {
        width: 100%;
        text-align: center;
        padding: 10px 0;
    }

    /* Ensure links are properly centered */
    .nav-links li a {
        display: inline-block;
        width: auto;
        text-align: center;
        margin: 0 auto;
    }

    /* Show the menu when toggled */
    .nav-links.show {
        display: flex !important;
    }


    /* Fix navigation buttons alignment */
    .nav-buttons {
        display: flex;
        gap: 10px;
        margin-left: auto; /* Pushes it to the right */
        /* padding: 4px 15px; */
        margin-right: 55px;
    }

    .dropdown-menu {
        display: none !important;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease-in-out;
      }
      
      .dropdown-menu.show {
        display: flex !important;
        flex-direction: column;
        opacity: 1;
        visibility: visible;
      }
      
      

    /* Fix individual buttons */
    .btn-signin, .btn-register {
        padding: 8px 12px;
        font-size: 12px; /* Slightly smaller font */
        white-space: nowrap; /* Prevents wrapping */
    }

    .menu-toggle {
        display: block !important;
        cursor: pointer;
        font-size: 24px;
        margin-left: auto;
    }

    .navbar ul.show {
        display: flex;
    }


    /* UNIVERSAL HERO STYLING */
    .hero, 
    .pricing-hero,
    .services-hero,
    .contact-hero,
    .educational-hero,
    .news-hero {
        padding: 120px 0px;
        text-align: center;
    }

    .hero h1, 
    .pricing-hero h1,
    .services-hero h1,
    .contact-hero h1,
    .educational-hero h1,
    .news-hero h1 {
        font-size: 1.8em;
    }

    .hero h2,
    .pricing-hero h2,
    .services-hero h2,
    .contact-hero h2,
    .educational-hero h2,
    .news-hero h2 {
        font-size: 1.2em;
    }

    /* FIX BUTTONS */
    .buttons {
        flex-direction: column;
        gap: 10px;
    }

    .btn-primary, .btn-secondary {
        width: 100%;
        max-width: 300px;
        margin: auto;
        text-align: center;
    }

    .video-section {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background: none; /* No background */
      }
      
      .video-section video {
        width: 100%;
        max-width: 900px; /* Adjust for responsiveness */
        height: auto;
        border-radius: 0; /* No rounded corners */
        box-shadow: none; /* No shadow */
        display: block;
      }

      .feature-boxes{
        grid-template-columns: 1fr;
        justify-items: center;             /* centers the card horizontally */
        gap: 1.25rem;
    }
    .feature-card{
        width: 100%;
        max-width: 360px;                  /* stops edge-to-edge stretch */
    }


    /* FIX PRICING CARDS */
    .pricing-container{ padding-inline: 12px; }        /* optional breathing room */

    .pricing-cards{
        display: grid !important;
        grid-template-columns: minmax(0, 1fr);           /* prevents min-content overflow */
        gap: 1.25rem;
        max-width: 100%;
        margin: 0 auto;
        justify-items: center;                            /* center each card */
        box-sizing: border-box;
    }

    .pricing-tier{
        width: 100%;
        max-width: 360px;                                 /* nice readable width */
    }

    /* make sure the 4th (Educational) card doesn’t get pushed */
    .pricing-cards > .pricing-tier:nth-child(4){
        grid-column: auto;
        margin-left: 0 !important;
    }
    

    /* Ensure Plugin Section Doesn't Overlap */
    .plugins {
        position: relative;
        z-index: 2; /* Keeps it above the carousel */
        margin-bottom: 0;
        padding: 0 0 64px;  
        background-color: #ffffff;
    }

    .plugins + .partners{
        margin-top: 40px;     /* guarantees a gap even if margins would collapse */
    }

    .partners {
        padding-bottom: -50px;
    }

    /* Fix Plugin Cards Layout */
    .plugin-cards {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap; /* Ensures proper wrapping */
        gap: 20px; /* Adjust spacing */
        max-width: 100%;
        margin: auto;
        position: relative; /* Ensures it's above other elements */
        z-index: 2; /* Keep it above the carousel */
        margin-bottom: 10px;
    }

    /* Fix Individual Plugin Item */
    .plugin {
        flex: 1 1 250px; /* Ensures equal width and responsiveness */
        max-width: 250px; /* Prevents images from being too large */
        text-align: center;
    }

    /* Fix Plugin Images */
    .plugin img {
        width: 100%; /* Ensures full width */
        height: auto; /* Keeps aspect ratio */
        max-width: 180px; /* Restricts maximum size */
        display: block;
        margin: auto;
    }


    /* Ensure Plugin Section Doesn't Overlap */
    .compliance {
        position: relative;
        z-index: 2; /* Keeps it above the carousel */
        margin-bottom: 50px; /* Pushes the partner section down */
    }

    /* Fix Plugin Cards Layout */
    .compliance-cards {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap; /* Ensures proper wrapping */
        gap: 20px; /* Adjust spacing */
        max-width: 100%;
        margin: auto;
        position: relative; /* Ensures it's above other elements */
        z-index: 2; /* Keep it above the carousel */
    }

    /* Fix Individual Plugin Item */
    .compliances {
        flex: 1 1 250px; /* Ensures equal width and responsiveness */
        max-width: 250px; /* Prevents images from being too large */
        text-align: center;
    }

    /* Fix Plugin Images */
    .compliances img {
        width: 100%; /* Ensures full width */
        height: auto; /* Keeps aspect ratio */
        max-width: 180px; /* Restricts maximum size */
        display: block;
        margin: auto;
    }


    .services-cards {
        display: flex;
        flex-direction: column; /* Stack items vertically */
        align-items: center; /* Center horizontally */
        gap: 20px; /* Add space between cards */
        width: 100%;
    }

    .services-tier {
        width: 90%; /* Make each card fit well */
        max-width: 400px; /* Prevent excessive stretching */
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .services-tier img {
        width: 100%; /* Ensures images fit */
        height: auto; /* Prevents distortion */
        max-width: 350px; /* Adjusts max size */
        object-fit: cover;
        border-radius: 10px;
    }


    /* FIX PROJECTS SECTION */
    .projects-cards {
        flex-direction: column;
        align-items: center;
    }

    .project-item {
        width: 100%;
        max-width: 380px;
    }

    .news-grid {
        grid-template-columns: 1fr; /* Only 1 column */
        gap: 20px; /* Add spacing between items */
    }

    .news-item {
        width: 100%; /* Ensure it spans full width */
        max-width: 100%; /* Prevents unwanted shrinking */
        height: auto; /* Adjust height dynamically */
    }

    /* Featured News Item Stays Full Width */
    .news-item.news-featured {
        grid-column: span 1; /* Full width */
        width: 100%;
        height: auto; /* Adjust to content */
    }

    /* Ensure Images Scale Properly */
    .news-item img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }

    .cta {
        max-width: 100%;
    }

    /* FIX FOOTER */
    .footer-row {
        flex-direction: column;
        text-align: center;
    }

    .footer-column {
        margin-bottom: 20px;
    }

    .footer-logo {
        margin-left: 2px;
    }

    /* FIX SOCIAL MEDIA ICONS */
    .social-links {
        justify-content: center;
        margin-left: 0;
    }

    .social-links img {
        width: 30px;
        height: 30px;
    }

    .cta h1 {
        font-size: 1.2em;
    }
}

.dropdown-menu {
    display: none !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease-in-out;
  }
  
  .dropdown-menu.show {
    display: flex !important;
    flex-direction: column;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }