@import url("assets/fonts/nunito.css");

:root {
    --brand-primary: #435de8;
    --brand-ink: #152348;
    --text-muted: #8190ab;
    --text-color: #52617e;
    --border-color: #dce3f1;
    --surface: #f5f7fd;
    --white: #fff;
    --black: #000;
    --h1: 46px;
    --h2: 32px;
    --h2small: 26px;
    --h3: 21px;
    --h4: 20px;
    --body: 18px;
    --small: 16px;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
    text-decoration: none;
}
img {
    max-width: 100%;
}
html{
    scroll-behavior:smooth;
}
body{
    font-family: "Nunito", sans-serif;
    color: var(--text-color);
    font-size: var(--body);
}
h1, h2, h3, h4 {
    font-weight: 700;
    color: var(--brand-ink);
}
h1 {
    font-size: var(--h1);
}
h2 {
    font-size: var(--h2);
}
h3 {
    font-size: var(--h3);
}
h4 {
    font-size: var(--h4);
}
p, li  {
    a {
        color: var(--brand-primary);
    }
}
.h2small {
    font-size: var(--h2small);
}
small, .small {
    font-size: var(--small);
}
strong {
    font-weight: 700;
}
.container {
    max-width: 1600px;
    padding-left: 50px;
    padding-right: 50px;
}
.small-container {
    max-width: 1000px;
}
.site-btn, .site-outline-btn {
    font-weight: 600;
    font-size: var(--small);
    line-height: 125%;
    padding: 15px 30px;
    display: inline-block;
    text-decoration: none;
    border-radius: 3px;
    margin-top: 1rem;
    transition: .4s all;
}
.site-btn {
    background: var(--brand-primary);
    border: 1px solid var(--brand-primary);
    color: var(--white);
}
.site-outline-btn {
    background: transparent;
    border: 1px solid var(--brand-primary);
    color: var(--brand-primary);
}
#contact {
    scroll-margin-top: 60px; /* Height of your fixed header */
}
.navbar-brand img {
    width: 220px;
}
.hdr_contact_btn {
    background: var(--brand-primary);
    text-decoration: none;
    font-weight: 600;
    display: inline-block;
    padding: 12px 25px;
    color: var(--white);
    border-radius: 3px;
    font-size: var(--small);
}
.section-padding {
    padding:80px 0;
}
.bg-light-grey {
    background-color: var(--surface);
}
.hero{
    min-height: 70vh;
    display: flex;
    align-items: center;
    background: var(--surface);
    color: var(--brand-ink);
}
.feature-list {
    li {
        margin: 10px 0;
    }
    span.icon {
        margin-right: 10px;
        width: 30px;
        height: 30px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: var(--brand-primary);
        color: #fff;
        border-radius: 50%;
    }
}
.about-row {
    .col-item {
        position: relative;
        flex-basis: 28% !important;
        margin-left: 0;
        padding: 20px 25px;
        border-left: 1px solid var(--border-color);
        height: auto;
        transition: .3s;
        &:before {
            content: " ";
            height: 57px;
            width: 1px;
            background-color: var(--brand-primary);
            position: absolute;
            left: -1px;
            top: 0;
        }
        &:hover {
            box-shadow: 0 4px 8px rgba(0,40,85,.1);
        }
        p {
            margin-bottom: 0;
        }
        .col-icon {
            margin-bottom: 1rem;
        }
    }
}

ul.flex-list {
    display: flex;
    flex-wrap: wrap;
    gap: 25px 40px;
    color: var(--brand-ink);
    li {
        flex: 0 0 calc(50% - 20px); /* Two columns */
    }
}

.btn-gallery {
    button {
        width: 42px;
        height: 42px;
        border-radius: 3px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--brand-ink);
        color: var(--brand-ink);
        padding: 0;
        line-height: 1;
        background: transparent;
        margin-right: 1rem;
    }
}

.secure-carousel {
    .owl-stage, .owl-item {
        display: flex;
    }
    .owl-item .item {
        width: 100%;
        height: 100%;
    }
    .item {
        background-color: var(--white);
        padding: 24px;
    }
    .col-icon {
        width: 65px !important;
        height: 65px;
        object-fit: contain;
        margin-bottom: 1rem;
    }
    .owl-nav {
        display: flex;
        justify-content: center;
        gap: 20px;
        margin-top: 2rem;
        button {
            width: 42px;
            height: 42px;
            border-radius: 3px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 1px solid var(--brand-ink) !important;
            color: var(--brand-ink) !important;
            padding: 0 !important;
            line-height: 1 !important;
            background: transparent !important;
        }
    }
}

.accordion {
    .accordion-item {
        border: 0;
        border-radius: 0;
        background: transparent;
        border-bottom: 1px solid #e5e5e5 !important;
    }
    .accordion-button {
        font-size: var(--body);
        font-weight: 700;
        font-size: var(--h3);
        border: 0;
        border-radius: 0 !important;
        background: transparent;
        color: #000;
        outline: none;
        box-shadow: none;
        padding: 15px 0;
        transition: .3s all;
        &:hover {
            background: var(--surface);
        }
        img {
            width: 50px;
            height: 50px;
            object-fit: contain;
            margin-right: 1.5rem;
        }
        &:after {
            margin-right: 1rem;
        }
    }
    .accordion-body {
        padding: 1rem 1rem 1rem calc(50px + 1.5rem);
        font-size: var(--small);
        color: var(--brand-ink);
    }
}

footer {
    font-size: 15px;
    padding: 50px 0 20px;
    background-color: var(--brand-ink);
    color: var(--white);
    .ftr_logo {
        width: 250px;
    }
    .ftr-Links {
        a {
            color: var(--white);
            text-decoration: none;
            &:hover {
                color: var(--brand-primary);
            }
        }
    }
    .ftr_copyright {
        border-top: 1px solid #efe9f9;
        color: var(--white);
    }
}

form {
    .form-label {
        font-weight: 600;
        color: #222;
        margin-bottom: 8px;
    }
    .required {
        color: #ff4d4f;
    }
    .form-control, .form-select {
        height: 48px;
        border-radius: 10px;
        border: 1px solid #d8d8d8;
        font-size: 16px;
    }
    textarea.form-control {
        min-height: 140px;
        resize: vertical;
        padding-top: 12px;
    }
    .form-control:focus,
    .form-select:focus {
        border-color: var(--brand-primary);
        box-shadow: none;
    }
}


@media (max-width: 1199.98px) {
:root {
    --h1: 32px;
    --h2: 28px;
    --h2small: 24px;
    --h3: 21px;
    --h4: 20px;
    --body: 18px;
    --small: 16px;
}
.about-row {
    .col-item {
        flex-basis: 32% !important;
    }
}
footer {
    .ftr_logo {
        width: 180px;
    }
}
}

@media (max-width: 991px) {
.section-padding {
    padding: 40px 0;
}
.accordion {
    .accordion-button {
        img {
            width: 42px;
            height: 42px;
            margin-right: .75rem;
        }
        &:after {
            margin-right: 8px;
        }
    }
    .accordion-body {
        padding: 1rem 1rem 1rem calc(42px + .75rem);
    }
}
}

@media (max-width: 767.98px) {
.container {
    padding-left: 20px;
    padding-right: 20px;
}
.about-row {
    .col-item {
        flex-basis: 100% !important;
    }
}
ul.flex-list {
    gap: 15px 0;
    li {
        flex: 0 0 100%;
    }
}
}

@media (max-width: 575.98px) {
.hdr_contact_btn {
    padding: 10px 15px;
}
.site-btn, .site-outline-btn {
    padding: 12px 20px;
    margin-top: 0;
}
}


@media (max-width: 460.98px) {
    .navbar-brand img {
        width: 150px;
    }
    :root {
        --h1: 26px;
        --h2: 24px;
        --h2small: 22px;
        --h3: 19px;
        --h4: 18px;
        --body: 16px;
        --small: 14px;
    }
    .feature-list {
        span.icon {
            margin-right: 5px;
            width: 20px;
            height: 20px;
        }
    }
}