* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: inherit;
}


:root {
    --primary-color: #2956A1;
    --primary-color-hover: #183e80;
    --secondary-color: #000413;
    --text-color: #061A3C; 
    --background-light: #F9F9F9;
    --primary-light: #4880DE;
    --primary-lighter: #2956A112;
}

html{
    scroll-behavior: smooth;
}

body {
    font-family: 'SF Pro Display', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.65em;
    color: var(--text-color);
    background-color: #F9F9F9;
}


h1,
.h1{
    font-size: 62px;
    font-weight: 600;
    line-height: 1.35em;
}

h2,
.h2{
    font-size: 48px;
    font-weight: 600;
    line-height: 1.35em;
}

h3,
.h3{
    font-size: 26px;
    font-weight: 600;
    line-height: 1.35em;
}

h4,
.h4{
    font-size: 24px;
    font-weight: 600;
    line-height: 1.35em;
}

h5,
.h5{
    font-size: 20px;
    font-weight: 600;
    line-height: 1.35em;
}

h6,
.h6{
    font-size: 18px;
    font-weight: 600;
    line-height: 1.35em;
}

img {
    max-width: 100%;
    display: block;
}
.text-primary {
    color: var(--primary-color);
}
.text-secondary {
    color: var(--secondary-color);
}
.text-primary-light {
    color: var(--primary-light);
}
.text-white {
    color: #ffffff!important;
}
.text-center {
    text-align: center;
}
.text-left {
    text-align: left;
}
.text-right {
    text-align: right;
}
.bg-proimary {
    background-color: var(--primary-color)!important;
}
.bg-secondary {
    background-color: var(--secondary-color)!important;
}
.bg-primary-light {
    background-color: var(--primary-light)!important;
}
.bg-primary-lighter {
    background-color: var(--primary-lighter)!important;
}
.section-vertical-spacing-top {
    padding-top: 100px;
}
.section-vertical-spacing-bottom {
    padding-bottom: 100px;
}
.container {
    max-width: 1350px;
    margin: 0 auto;
    width: 100%;
    padding: 0 20px;
}
.mb-0{
    margin-bottom: 0!important;
}
.bg-dark {
    background-color: var(--secondary-color);
}
.bg-light {
    background-color: var(--background-light);
}

.btn {
    color: #000413;
    padding: 14px 26px;
    border-radius: 100px;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.75em;
    text-decoration: none;
    transition: all 0.3s ease;
    max-width: max-content;
    min-width: 141px;
    text-align: center;
}

.btn-primary {
    background-color: var(--primary-color);
    color: #ffffff;
}

.btn-primary:hover {
    background-color: var(--primary-color-hover);
    color: #ffffff;
}

.btn-with-icon{
    display: flex;
    gap: 15px;
    padding-left: 0;
    padding-right: 0;
}




/* ======================================================
    Common Layout: Flexbox Grid
=======================================================*/
.flex-box {
    display: flex;
    align-items: center;
    gap: 24px;
    width: 100%;
}
.flex-col{
    flex-direction: column;
}
.flex-row{
    flex-direction: row;
}
.flex-wrap {
    flex-wrap: wrap;
}
.flex-center {
    justify-content: center;
    align-items: center;
    text-align: center;
}
.flex-start {
    justify-content: flex-start;
    align-items: flex-start;
}
.flex-end {
    justify-content: flex-end;
    align-items: flex-end;
}


/* ======================================================
    Gap Utilities
=======================================================*/
.gap-5  { gap: 5px!important;  }
.gap-10 { gap: 10px!important; }
.gap-15 { gap: 15px!important; }
.gap-20 { gap: 20px!important; }
.gap-24 { gap: 24px!important; }
.gap-30 { gap: 30px!important; }
.gap-40  { gap: 40px!important;  }
.gap-50  { gap: 50px!important;  }
.gap-60  { gap: 60px!important;  }
.gap-80  { gap: 80px!important;  }
.gap-100 { gap: 100px!important; }
.col-1  { flex: 1  1 calc(8.333%  - 22px); min-width: 0; }
.col-2  { flex: 2  1 calc(16.667% - 20px); min-width: 0; }
.col-3  { flex: 3  1 calc(25%     - 18px); min-width: 0; }
.col-4  { flex: 4  1 calc(33.333% - 16px); min-width: 0; }
.col-5  { flex: 5  1 calc(41.667% - 14px); min-width: 0; }
.col-6  { flex: 6  1 calc(50%     - 12px); min-width: 0; }
.col-7  { flex: 7  1 calc(58.333% - 10px); min-width: 0; }
.col-8  { flex: 8  1 calc(66.667% - 8px);  min-width: 0; }
.col-9  { flex: 9  1 calc(75%     - 6px);  min-width: 0; }
.col-10 { flex: 10 1 calc(83.333% - 4px);  min-width: 0; }
.col-11 { flex: 11 1 calc(91.667% - 2px);  min-width: 0; }
.col-12 { flex: 12 1 100%;                 min-width: 0; }



/* ======================================================
    Common: Section Header
=======================================================*/
.content-section {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 25px;
}

.section-header--vertical-spacing{
    margin: 0 auto 60px;
}

.section-subtitle {
    font-size: 18px;
    text-transform: uppercase;
    color: var(--primary-color);
}
.max-width-475 {
    max-width: 475px!important;
}
.max-width-560 {
    max-width: 560px!important;
}
.max-width-575 {
    max-width: 575px!important;
}
.max-width-660 {
    max-width: 660px!important;
    margin: 0 auto;
}
.max-width-742 {
    max-width: 742px!important;
}
.max-width-1000 {
    max-width: 1000px!important;
}



/* ======================================================
    Feature List (right-aligned with icon on right)
=======================================================*/
.feature-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 20px;
}

.feature-list li {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 22px;
    font-size: 16px;
    font-weight: 400;
    color: var(--secondary-color);
    text-align: right;
}

.feature-list li::after {
    content: '';
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    background-color: #c5cfe3;
    border-radius: 0;
}

.feature-list li:first-child::after {
    background-color: var(--primary-color);
}



/* ======================================================
    Icon Box
=======================================================*/
.image-box {
    display: flex;
    gap: 20px;
    flex-direction: row;
    align-items: flex-start;
    background-color: white;
    border-radius: 16px;
    padding: 20px;
}

.image-box--image {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    background-color: #AFB9CA38;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-box--image img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.image-box--content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.image-box--content p {
    font-size: 16px;
    line-height: 1.6;
    color: #6b7280;
}

/* icon on left, title + description stacked to the right */
.image-box.image-left {
    flex-direction: row;
    align-items: flex-start;
}

/* icon on top, title + description stacked below */
.image-box.image-top {
    flex-direction: column;
    align-items: flex-start;
}




/* ======================================================
    Accordion
=======================================================*/
.accordian {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.accordian-item {
    background: #FFFFFF26;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: 20px;
    padding: 30px 20px;
    color: #ffffff;
}

.accordian-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 26px;
    font-weight: 400;
    line-height: 1.35;
}

.accordian-header span {
    font-size: 32px;
    font-weight: 400;
    opacity: 0.9;
    flex-shrink: 0;
}

.accordian-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s ease, margin-top 0.35s ease;
    margin-top: 0;
    overflow: hidden;
    font-weight: 300;
    padding-right: 70px;
}

.accordian-content > * {
    overflow: hidden;
}

.accordian-item.is-open .accordian-content {
    grid-template-rows: 1fr;
    margin-top: 14px;
}

.accordian-content p {
    font-size: 18px;
    font-weight: 300;
    color: white;
}

.accordian-header {
    cursor: pointer;
    user-select: none;
}


/* ======================================================
    Video Player
=======================================================*/
.video-player-wrapper {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    background: #000;
    aspect-ratio: 16 / 9;
    width: 100%;
}

.video-player {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.video-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 72px;
    height: 72px;
    background: #ffffff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, opacity 0.2s ease;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
}

.video-play-btn:hover,
.video-player-wrapper:hover .video-play-btn {
    transform: translate(-50%, -50%) scale(1.08);
}

.video-play-icon {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 11px 0 11px 20px;
    border-color: transparent transparent transparent var(--primary-color);
    margin-left: 5px;
    flex-shrink: 0;
}

.video-player-wrapper.is-playing .video-play-btn {
    opacity: 0;
    pointer-events: none;
}


/* ======================================================
    Form Base
=======================================================*/
.form-label {
    display: block;
    font-size: 18px;
    font-weight: 400;
    color: var(--secondary-color);
    margin-bottom: 10px;
}

.form-input {
    display: block;
    width: 100%;
    padding: 20px 24px;
    font-size: 16px;
    font-weight: 300;
    font-family: inherit;
    color: var(--secondary-color);
    background: #ffffff;
    border: 1.5px solid #d1d5db;
    border-radius: 14px;
    outline: none;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
    appearance: none;
    -webkit-appearance: none;
}

.form-input::placeholder {
    color: #061A3C94;
    font-weight: 300;
}

.form-input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(41, 86, 161, 0.1);
}

.form-input.has-error {
    border-color: #dc3545;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.12);
}

.form-input.has-error:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.2);
}

textarea.form-input {
    resize: vertical;
    line-height: 1.6;
}

/* ======================================================
    Contact Form 7 Overrides
=======================================================*/

/* CF7 wraps every field in a <span> — make it block */
.wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}

/* CF7 pattern: <label> wraps both the label text and the input */
.wpcf7-form .form-group label {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 0;
    font-size: 18px;
    font-weight: 400;
    color: var(--secondary-color);
    cursor: default;
}

/* ── CF7 field inputs: match .form-input exactly ── */
.wpcf7-text,
.wpcf7-email,
.wpcf7-tel,
.wpcf7-textarea,
.wpcf7-select {
    display: block;
    width: 100%;
    padding: 20px 24px;
    font-size: 16px;
    font-weight: 300;
    font-family: inherit;
    color: var(--secondary-color);
    background: #ffffff;
    border: 1.5px solid #d1d5db;
    border-radius: 14px;
    outline: none;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
}

.wpcf7-text::placeholder,
.wpcf7-email::placeholder,
.wpcf7-tel::placeholder,
.wpcf7-textarea::placeholder {
    color: #061A3C94;
    font-weight: 300;
}

.wpcf7-text:focus,
.wpcf7-email:focus,
.wpcf7-tel:focus,
.wpcf7-textarea:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(41, 86, 161, 0.1);
}

.wpcf7-textarea {
    min-height: 260px;
    resize: vertical;
    line-height: 1.6;
}

/* ── CF7 submit: match .btn.btn-primary.form-submit-btn ── */
.wpcf7-submit {
    background-color: var(--primary-color);
    color: #ffffff;
    padding: 18px 60px;
    font-size: 16px;
    font-weight: 500;
    font-family: inherit;
    border: none;
    border-radius: 100px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: background-color 0.3s ease;
    min-width: 141px;
    line-height: 1.75em;
}

.wpcf7-submit:hover {
    background-color: var(--primary-color-hover);
}

/* Invalid field */
.wpcf7-not-valid {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.12) !important;
}

.wpcf7-not-valid:focus {
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.2) !important;
}

/* Per-field validation tip */
.wpcf7-not-valid-tip {
    display: block;
    font-size: 13px;
    color: #dc3545;
    margin-top: 6px;
}

/* Response output */
.wpcf7-response-output {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    font-size: 15px;
    font-weight: 400;
    align-self: flex-start;
    width: 100%;
}

.wpcf7-form.sent .wpcf7-response-output {
    color: #28a745;
}

.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.spam .wpcf7-response-output {
    color: #dc3545;
}

.wpcf7-spinner {
    visibility: hidden;
    display: inline-block;
    background-color: var(--primary-color);
    opacity: 0.75;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 100%;
    padding: 0;
    margin: 0;
    position: relative;
    flex-shrink: 0;
}

form.submitting .wpcf7-spinner {
    visibility: visible;
}

.wpcf7-spinner::before {
    content: '';
    position: absolute;
    background-color: #ffffff;
    top: 4px;
    left: 4px;
    width: 6px;
    height: 6px;
    border-radius: 100%;
    transform-origin: 8px 8px;
    animation: wpcf7spin 1000ms linear infinite;
}

@keyframes wpcf7spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}