/* ==========================
Service Hero Section
========================== */

.abuthero-section {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px 80px;
    height: 90vh;
    background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 35%, rgba(68, 12, 153, 1) 100%);
    color: var(--color-white);
    overflow: hidden;
}

.hero-image {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    object-fit: cover;
}

    .hero-image img {
        width: 100%;
        height: auto;
        margin-bottom: 5%;
    }

/* ========== HERO SECTION MOBILE STYLES ========== */
@media (max-width: 500px) {
    .abuthero-section {
        flex-direction: column;
        justify-content: center;
        text-align: center;
        padding: 40px;
        height: 100%;
        background: linear-gradient(180deg, rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 50%, rgba(68, 12, 153, 1) 100%);
    }

    .hero-image {
        display: flex;
        position: relative;
        z-index: 1;
        bottom: 0;
    }

        .hero-image img {
            width: 100%;
            max-width: 100%;
            margin: 0 auto;
        }
}


/* ==========================
   centered section
========================== */
.centered-section {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    max-width: 100%;
    margin: 0 auto;
    padding: 30px 0px;
}

    .centered-section .images-row {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        height: 166.54px;
        margin-bottom: 3%;
        width: 133.08px;
    }

    .centered-section .info-text {
        font-family: var(--int-font);
        font-weight: 500;
        font-size: var(--xlarge-size);
        line-height: 1;
        color: var(--color-black);
        opacity: 0.7;
        margin-bottom: 3%;
    }

    .centered-section .section-separator {
        width: 0.81px;
        height: 47.17px;
        margin: 0 auto 20%;
    }

.center-line {
    width: 1117px;
    height: 1px;
    background-color: var(--color-border);
    margin: 0 auto;
}

/* ==========================
   responsive centered section
========================== */
@media (max-width: 500px) {
    .centered-section {
        padding: 20px 0px;
        justify-content: flex-start;
    }

        .centered-section .images-row {
            flex-wrap: wrap;
            gap: 20px;
            width: 100%;
            height: auto;
            margin-bottom: 3%;
        }

            .centered-section .images-row img {
                width: 60%;
                height: auto;
            }

        .centered-section .section-heading {
            font-size: var(--xxlarge-size);
            font-weight: 700;
        }

        .centered-section .info-text {
            font-size: var(--medium-size);
            line-height: 1;
        }

        .centered-section .separator {
            height: 10px;
            margin: 20px auto;
        }

    .center-line {
        width: 90%;
        margin: 20px auto 0;
    }
}

/* ==========================
   container layout
========================== */
.container {
    height: 100%;
    display: flex;
    max-width: 1200px;
    margin: 20px auto;
    font-family: var(--int-font);
    color: #1a1a1a;
    line-height: 1.6;
}

    .container .sidebar {
        width: 25%;
        padding: 30px 20px;
    }

        .container .sidebar ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .container .sidebar hr {
            border: none;
            border-top: 2px solid var(--color-border);
            margin: 10px 0;
        }

        .container .sidebar a {
            text-decoration: none;
            font-weight: 600;
            font-size: var(--xxmedium-size);
            color: #0A0331;
            cursor: default;
        }

            .container .sidebar a:hover {
                text-decoration: underline;
            }

    .container .content {
        flex: 1;
        padding: 40px 60px;
        padding-bottom: 0;
    }

        .container .content .content-heading {
            font-weight: 700;
            font-size: var(--xxxlarge-size);
            line-height: 40px;
        }

        .container .content .section-divider {
            width: 100%;
            border: none;
            border-top: 2px solid var(--color-border);
            margin: 10px 0 30px;
        }

        .container .content .content-heading2 {
            font-size: var(--xxxmedium-size);
            font-weight: 600;
            line-height: 40px;
            margin-bottom: 3%;
            color: var(--color-black);
        }

        .container .content .content-para,
        .container .content ul li {
            font-size: var(--xmedium-size);
            font-weight: 400;
            line-height: 40px;
            color: var(--color-black);
            margin-bottom: 3%;
        }

        .container .content ul {
            position: relative;
            right: 1%;
            margin-bottom: 3%;
        }

/* ==========================
   office section
========================== */
.office-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.office-heading {
    width: 100%;
    text-align: left;
    color: var(--color-black);
    font-weight: 600;
    font-family: var(--int-font);
    font-size: var(--xxxmedium-size);
    line-height: 40px;
    margin-bottom: 3%;
}


.office {
    flex: 1;
    min-width: 30%;
}

.left-line {
    width: 2px;
    height: 150px;
    background-color: var(--color-border);
    position: relative;
    margin-top: 1%;
    right: 10%;
}

.office .office-para {
    color: #0A0331;
    font-weight: 400;
    font-size: var(--xxmedium-size);
    text-decoration: none;
}
.link-para {
    color: #0A0331;
    font-weight: 400;
    font-size: var(--xxmedium-size);
    text-decoration: none;
}
/* ==========================
   responsive container
========================== */
@media (max-width: 500px) {
    .container {
        flex-direction: column;
        padding: 0 20px;
        margin-bottom: 0px;
    }

        .container .sidebar {
            display: none;
        }

        .container .content {
            padding: 0px 0;
            margin-top: -4%;
        }

            .container .content .content-heading {
                font-weight: 700;
                color: var(--color-black);
                font-size: var(--xxmedium-size);
                text-align: center;
                line-height: 32px;
            }

            .container .content .content-heading2 {
                font-weight: 700;
                color: var(--color-black);
                font-size: var(--xmedium-size);
                line-height: 32px;
                margin-bottom: 3%;
                text-align: center;
            }

            .container .content .content-para,
            .container .content ul li {
                font-weight: 400;
                color: var(--color-black);
                font-size: var(--xxsmall-size);
                line-height: 28px;
                margin-bottom: 1%;
                text-align: left;
            }

            .container .content ul {
                right: 0;
            }

    .office-container {
        flex-direction: column;
        gap: 20px;
        text-align: center;
        margin-bottom: 0px;
    }

    .office-heading {
        width: 100%;
        text-align: center;
        color: var(--color-black);
        font-weight: 600;
        line-height: 24px;
        font-family: var(--int-font);
        font-size: var(--medium-size);
        margin-bottom: 0px;
    }   
    .office {
        min-width: 30%;
    }

    .left-line {
        display: none;
    }

    .office .office-para {
        font-size: var(--xxsmall-size);
        line-height: 24px;
        margin-bottom: 0px;
    }
    .link-para {
        font-size: var(--xxsmall-size);
        line-height: 24px;
    }
}
/* ==========================
   Trusted Partner Section
========================== */
.trusted-heading {
    font-size: var(--xxxmedium-size);
    font-weight: 600;
    color: var(--color-black);
    margin-top: 5px;
    margin-bottom: 3%;
}

.trusted-image {
    width: 150px;
    max-width: 600px;
    height: auto;
    margin-bottom: 3%;
}

.trusted-para {
    font-size: var(--xxsmall-size);
    line-height: 24px;
}

/* ==========================
   Responsive Trusted Partner Section
========================== */
@media (max-width: 500px) {
    #trustedPartnerSection {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .trusted-heading {
        font-size: var(--xmedium-size);
        text-align: center;
        font-weight: 700;
        color: var(--color-black);
        margin-bottom: 1%;
        position: relative;
        bottom: 10px;

    }

    .trusted-image {
        width: 100px;
        height: auto;
        margin: 0 auto 15px;
        display: block;
        margin-bottom: 5%;
    }

    .trusted-para {
        font-size: var(--xxsmall-size);
        line-height: 24px;
        text-align: center;
    }
}