/* ==============================
   🌟 HEAD STATEMENT
================================= */
.best-statement {
    text-align: center;
    background-color: #1E2761;  /* Your existing button color */
}

.best-statement h1 {
    font-size: 2rem;
    font-weight: bold;
    color: white;
    padding: 10px 0;
}

/* ==============================
   🎥 HERO IMAGE SLIDER
================================= */
.hero-slider-container {
    display: flex; /* 👈 NEW: flex layout */
    width: 100%;
    background-color: white;
    box-sizing: border-box;
    text-align: left;
}

.hero-slider-container h2 {
    color: #1E2761;
    font-size: 1.6rem; /* (optional) you can tweak font-size if you want */
    font-weight: bold; /* (optional) to match your h1 style if needed */
    margin-bottom: 30px; /* (optional) add spacing below */
}


/* Side next to image slider */
.hero-content {
    flex: 1; /* 1/3 of the space */
    max-width: 33%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start; /* 👈 Stick text to the left */
    padding: 10px;
    box-sizing: border-box;
    color: #1E2761; /* dark text instead of white */
    text-align: left;
}

/* SLIDER STYLING */
.slider {
    flex: 2; /* 2/3 of the space */
    width: 100%;
    overflow: hidden;
    position: relative;
    aspect-ratio: 16 / 9;
}

.slides {
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
}

.slide {
    flex: 0 0 100%;
    width: 100%;
    height: auto;
    object-fit: cover;
    display: none;
    background-color: white;
}

.slide.active {
    display: block;
}

/* SLIDER BUTTONS */
.prev, .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    background-color: rgba(34, 109, 170, 0.2);
    border: none;
    border-radius: 25px;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.2s ease;
    font-size: 24px;
    padding: 5px;
    cursor: pointer;
}

.prev:hover, .next:hover {
    background-color: #1E2761;
}

.prev {
    left: 10px;
}

.next {
    right: 10px;
}

/* HERO SECTION */
.hero {
    text-align: center;
}

/* HEADLINE STYLING */
.hero h1 {
    font-size: 2rem;
    font-weight: bold;
    color: #1E2761;  /* Dark Blue from global styling */
    padding-bottom: 20px;
}

/* HIGHLIGHTED TEXT */
.hero .highlight {
    color: white;  /* Your brand's blue color */
    font-weight: bold;
}

/* PARAGRAPH STYLING */
.hero p {
    font-size: 1rem;
    color: #1E2761;
    padding-bottom: 20px;
}

.hero-text.translucent-bg {
    background-color: white; /* semi-transparent white */
    padding: 10px;
    border-radius: 8px;
}

.hero-blue {
    background-color: #1E2761; /* Your existing button blue color */
    color: white;
}

.hero-blue h1, .hero-blue p {
    color: white;
}

.hero-blue h1 {
    padding: 20px;
}

.hero-blue p {
    padding: 0;
}

/* CTA BUTTON */
.cta-button {
    display: inline-block;
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 8px 20px;
    font-size: 18px;
    color: white;
    background-color: #1E2761;  /* Your existing button color */
    border: none;
    border-radius: 10px;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.cta-button:hover {
    background-color: #2C9EFF;
    transform: scale(1.05);
}

/* 👇 Add this below your .hero styles */

.get-in-touch {
    text-align: center;
    padding: 10px;
    border-radius: 10px;
}

.get-in-touch h1 {
    font-weight: bold;
    color: #1E2761;
    padding-top: 15px;
}

.get-in-touch h2 {
    font-size: 1.6rem;
    font-weight: bold;
    color: #1E2761;
    margin-bottom: 10px;
}

.get-in-touch p {
    font-size: 1rem;
    color: #1E2761;
    margin: 10px;
}

.get-in-touch .cta-button {
    display: inline-block;
    padding: 8px 20px;
    font-size: 1.1rem;
    font-weight: bold;
    color: white;
    background-color: #1E2761;
    border: none;
    border-radius: 10px;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.get-in-touch .cta-button:hover {
    background-color: #2C9EFF;
    transform: scale(1.05);
}

/* global link styling */
a.href-link {
    color: #0066cc;             /* primary link color */
    text-decoration: none;      /* remove default underline */
    font-weight: 500;           /* slightly bolder for readability */
    transition: color 0.2s ease;
}

a.href-link:hover,
a.href-link:focus {
    color: #004a99;             /* darker shade on hover/focus */
    text-decoration: underline; /* subtle underline on hover only */
}

a.href-link:visited {
    color: #0066cc;             /* keep same as normal links to avoid purple */
}