:root {
    --main-width: 1200px;
}

body {
    font-family: 'Roboto', sans-serif;
    background-color: #f8f9fa;
    font-size: 16px;
    font-size: 1rem;
}

h1, h2, h3, .slab {
    font-family: 'Roboto Slab', serif;
    font-weight: 700;
}

img {
    max-width: 100%;
}

/* Main Container */
.site-wrapper {    
    background: #fff;
}

.container {
    max-width: var(--main-width);
    margin: 0 auto;
    position: relative;
}

header {
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 1000;
    opacity: 0.96;
    box-shadow: 0px 5px 5px rgba(0,0,0,0.2);
}

header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
}

nav a {
    margin-left: 20px;
    text-decoration: none;
    color: #43396b;
    font-size: 1.125rem;
    font-weight: 500;
}

section {
    padding: 20px 40px;
}

/* Slider Styles */
.hero-slider img {
    width: 100%;
    height: 70vh;
    object-fit: cover;
}

/* Container must be relative so children can be absolute */
.slider-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* Text Overlay - Bottom Left */
.slider-text-overlay {
    position: absolute;
    bottom: 70px;
    left: 0;
    z-index: 10;
    background-color: #3697db;
    padding: 10px 10px 10px 40px;
    color: white;
    text-transform: uppercase;
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1;
    max-width: 80%;
}

/* Fixed Image - Bottom Right */
.slider-image-overlay {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 10;
}

.slider-image-overlay img {
    width: 200px; /* Adjust size as needed */
    height: auto;
}

.slick-list {
    /* The large rounded corner on the slider itself */
    border-bottom-right-radius: 275px; 
    overflow: hidden; /* This clips the images inside */
}

/* Slick adjustments to ensure arrows/dots don't overlap your overlays */
.slick-dots {
    bottom: 10px !important;
}
.slick-dotted.slick-slider {
    margin-bottom: 0;
}
.slick-dots li button:before {
    color: #fff;
    opacity: 1;
}
.slick-dots li.slick-active button:before {
    color: #fff;
    opacity: 0.6;
}

@media (max-width: 980px) {
    .slider-text-overlay { bottom: 0; max-width: 100%; width: 100%; }
    .slider-image-overlay { display: none; }
    .slick-list { border-radius: unset; }
}

/* Counter Section */
.counter-box {
    padding: 20px;
    font-size: 1.25rem;
    line-height: 1.25;
}
.counter-box .icon {
    width: 100px;
}
.counter {
    font-size: 2.125rem;
    font-weight: 900;
    color: #1bb1be;
}

/* Video Section */
.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
}
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Map Container */
.map-wrapper {
    position: relative;
    width: 100%;
}

.main-map {
    width: 100%;
    display: block;
}

.map-overlay {
    position: absolute;
    /* 1. Move the top-left corner to the center of the parent */
    top: 50%;
    left: 50%;
    
    /* 2. Shift the element back by half its own width and height */
    transform: translate(-50%, -50%);
    
    /* Your existing constraints */
    width: 100%; /* Ensures it can grow up to the max-width */
    max-width: 1000px;
    
    /* Optional: Ensure it doesn't overflow small parents */
    box-sizing: border-box;
}

/* Individual Pins */
.map-pin {
    /*position: absolute;*/
    position: relative;
    transition: transform 0.3s ease;
    cursor: pointer;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    color: #fff;
    text-decoration: none;
    margin: 0 auto;
}

.map-pin span {
    margin: 0 auto;
    text-align: center;
    font-size: 1.25rem;
    /*max-width: 65px;*/
}

.map-pin.blue {
    background-color: #3697db;
}
.map-pin.purple {
    background-color: #43396b;
}
.map-pin.teal {
    background-color: #1bb1be;
}

.map-pin img {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: all 0.5s ease;
    border-radius: 50%;
}

.map-pin:hover img {
    opacity: 1;
}

@media (max-width: 1024px) {
    .map-overlay { max-width: 800px; }
    .map-pin { width: 120px; height: 120px;}
}

@media (max-width: 480px) {
    .map-pin { width: 100px; height: 100px;}
    .map-pin span { font-size: 1rem; }
}

/* Specific Positions - Adjust these % to fit your map */
/*.pin-1 { top: 20%; left: 10%; }
.pin-2 { top: 20%; left: 30%; }
.pin-3 { top: 20%; left: 50%; }
.pin-4 { top: 20%; left: 70%; }
.pin-5 { top: 60%; left: 25%; }
.pin-6 { top: 60%; left: 45%; }
.pin-7 { top: 60%; left: 65%; }*/

/* Lightbox Styling */
.white-popup {
    position: relative;
    background: #FFF;
    padding: 5px;
    width: 800px;
    max-width: 90vw;
    margin: 20px auto;
    box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.2);
}

.popup-frame {
    border: 5px solid #3697db;
    padding: 20px;
}

.popup-frame img {
    border-radius: 50%;
}

.mfp-bg {
    background: transparent;
}

/* 1. The Overlay (Background) */
.mfp-fade.mfp-bg {
  opacity: 0;
  transition: opacity 0.3s ease-out;
}
/* When open */
.mfp-fade.mfp-bg.mfp-ready {
  opacity: 0.8;
}
/* When closing */
.mfp-fade.mfp-bg.mfp-removing {
  opacity: 0;
}

/* 2. The Content (The Actual Popup) */
.mfp-fade.mfp-wrap .mfp-content {
  opacity: 0;
  transition: all 0.3s ease-out;
}
/* When open */
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
  opacity: 1;
}
/* When closing */
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
  opacity: 0;
}

.white-popup h2 {
    color: #3697db;
    font-size: 2rem;
}
.white-popup h3 {
    color: #43396b;
    font-size: 2.125rem;
}
.white-popup h4 {
    color: #3697db;
    font-family: 'Roboto', sans-serif;
    font-size: 1.5rem;
}
.white-popup a.readmore {
    font-weight: 700;
    font-size: 1.25rem;
    color: #3697db;
    text-transform: uppercase;
    text-decoration: none;
}

/* Details */
section h2 {
    font-size: 2.25rem;
    color: #3697db;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 15px; /* Adjust spacing between image and text */
    margin-bottom: 30px;
}

section h2::before,
section h2::after {
    content: "";
    display: inline-block;
    /* Set the size of your graphic here */
    width: 52px; 
    height: 15px;
    
    /* Image properties */
    background-image: url('images/subhead_dots.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

@media (max-width: 768px) {
    section h2 { font-size: 2rem; }
}

.font-purple {
    color: #43396b;
}
.font-blue {
    color: #3697db;
}
.font-white {
    color: #fff;
}
.fontsize-large {
    font-size: 1.5rem;
}

.bg-teal {
    background: #1bb1be url(images/Dots-Edges.png) 0 0 no-repeat;
    background-size: contain;
    padding: 20px 120px;
    font-size: 1.25rem;
    line-height: 2;
}

@media (max-width: 768px) {
    .bg-teal { padding: 20px; background-image: none; }
}

p:last-child {
    margin-bottom: 0;
}

/* Custom Button Styles */
.btn-secondary {
    background-color: #d1d5db !important;
    border: none;
    color: #43396b;
    font-weight: 700;
    font-size: 0.825rem;
}

.btn-secondary:hover {
    background-color: #9ca3af !important;
}

.btn-dark {
    background-color: #433878;
    border: none;
    font-weight: 700;
}


section#testimonial {
    color: white;
    background: #433878;
    font-size: 1.25rem;
    position: relative;
}
section#testimonial:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    background: url(images/Dots-Edges.png) 0 100% no-repeat;
    background-size: contain;
    transform: scaleX(-1);
    opacity: 0.5;
}

/* Testimonial Quote marks (Optional extra detail) */
.testimonial-content::before {
    content: '“';
    position: absolute;
    top: -30px;
    left: -25px;
    font-size: 140px;
}
.testimonial-content::after {
    content: '”';
    position: absolute;
    bottom: 60px;
    right: -25px;
    font-size: 140px;
    line-height: 0;
}

.download-icon svg {
    width: 20px;
}
.download-icon svg path {
    fill: #fff;
}

/* Responsive */
/* Hamburger Styling */
.menu-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 5px;
}

.bar {
    width: 25px;
    height: 3px;
    background-color: #333;
    transition: 0.3s;
}

/* Mobile Rules (Below 1024px) */
@media (max-width: 1024px) {
    .menu-toggle {
        display: flex;
    }

    nav {
        display: none; /* Hide menu by default */
        flex-direction: column;
        position: absolute;
        top: 80px; /* Height of header */
        left: 0;
        width: 100%;
        background: #fff;
        border-bottom: 1px solid #eee;
        padding: 20px 0;
        text-align: center;
        box-shadow: 0 5px 10px rgba(0,0,0,0.1);
    }

    nav.active {
        display: flex; /* Show menu when active */
    }

    nav a {
        margin: 15px 0;
        display: block;
        font-size: 1.125rem;
    }
    
    .site-wrapper {
        width: 100%; /* Go full width on mobile */
    }
}

/* Sories */
.image-left {
  float: left;
  margin-right: 15px; /* Adds space between the image and the text */
  margin-top: 15px;
  margin-bottom: 15px;
  max-width: 50%;
}
.image-right {
  float: right;
  margin-left: 15px; /* Adds space between the image and the text */
  margin-top: 15px;
  margin-bottom: 15px;
  max-width: 50%;
}
@media (max-width: 640px) {
    .image-left,
    .image-right { max-width: 100%; width: 100%; margin: 10px 0; float: none; }
}

.title-bar {
    background-color: #1bb1be;
    margin: 20px 0;
    padding: 0;
}
.title-bar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}
.title-bar h2 {
    color: #fff;
    text-align: left;
    justify-content: left;
    margin: 0;
    padding: 20px 0;
}
.title-bar h2:before,
.title-bar h2:after {
    display: none;
}
.title-bar .title-image-overlay {
    width: 140px;
    margin: -20px 0;
}

.story h3 {
    color: #3D346B;
    margin-bottom: 50px;
}

.clear {
    clear: both;
}

.blue-bar {
    background-color: #3896D3;
    color: #fff;
    font-size: 2rem;
    text-align: center;
    clear: both;
    margin: 0;
}

footer {
    font-size: 0.75rem;
}

.back a {
    color: #3896D3;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 20px;
    text-decoration: none;
}