/* =========================================================
   SILARIS DIGI - PREMIUM HEADER
========================================================= */

.sdg-site-header {
    position: relative;
    z-index: 1000;

    width: 100%;

    background: rgba(255, 255, 255, 0.96);

    border-bottom: 1px solid rgba(18, 48, 95, 0.08);

    box-shadow:
        0 5px 25px rgba(12, 38, 78, 0.06);
}


/* =========================================================
   NAVBAR
========================================================= */

.sdg-site-header .navbar {
    min-height: 82px;

    padding-top: 10px !important;
    padding-bottom: 10px !important;

    background:
        rgba(255, 255, 255, 0.96) !important;

    backdrop-filter: blur(12px);
}


/* =========================================================
   LOGO
========================================================= */

.sdg-site-header .navbar-brand {
    display: flex;

    align-items: center;

    margin-right: 35px;

    padding: 0;
}


.sdg-logo {
    width: 185px;

    height: auto;

    display: block;

    transition:
        transform .3s ease;
}


.sdg-site-header .navbar-brand:hover .sdg-logo {
    transform:
        scale(1.025);
}


/* =========================================================
   NAVIGATION
========================================================= */

.sdg-site-header .navbar-nav {
    gap: 4px;
}


.sdg-nav-link {
    position: relative;

    display: inline-flex !important;

    align-items: center;
    justify-content: center;

    min-height: 48px;

    padding:
        8px 13px !important;

    color:
        #263653 !important;

    font-size: 14px;

    font-weight: 600;

    line-height: 1.2;

    white-space: nowrap;

    text-decoration: none;

    border-radius: 8px;

    transition:
        color .25s ease,
        background .25s ease,
        transform .25s ease;
}


/* =========================================================
   NAV HOVER BACKGROUND
========================================================= */

.sdg-nav-link:hover {

    color:
        #174fa5 !important;

    background:
        rgba(23, 86, 169, 0.055);

}


/* =========================================================
   ACTIVE / HOVER INDICATOR
========================================================= */

.sdg-nav-link::after {

    content: "";

    position: absolute;

    left: 50%;
    bottom: 2px;

    width: 0;
    height: 3px;

    transform:
        translateX(-50%);

    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            #7040e8,
            #168de0
        );

    transition:
        width .3s ease;

}


.sdg-nav-link:hover::after,
.sdg-nav-link.active::after {

    width: 60%;

}


/* =========================================================
   ACTIVE LINK
========================================================= */

.sdg-nav-link.active {

    color:
        #174fa5 !important;

    font-weight: 700;

    background:
        linear-gradient(
            135deg,
            rgba(112,64,232,0.055),
            rgba(22,141,224,0.045)
        );

}


/* =========================================================
   PARTNER WITH US BUTTON
========================================================= */

.sdg-nav-cta {

    position: relative;

    min-height: 45px;

    display: inline-flex !important;

    align-items: center;
    justify-content: center;

    padding:
        10px 20px !important;

    color: #ffffff !important;

    background:
        linear-gradient(
            135deg,
            #1756a9 0%,
            #3867e8 52%,
            #7541e8 100%
        ) !important;

    border: 0 !important;

    border-radius: 8px !important;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: .1px;

    overflow: hidden;

    box-shadow:
        0 7px 20px rgba(43, 88, 190, 0.22);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


/* Shine effect */

.sdg-nav-cta::before {

    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 70%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.30),
            transparent
        );

    transform:
        skewX(-20deg);

    transition:
        left .6s ease;

}


.sdg-nav-cta:hover::before {

    left: 140%;

}


.sdg-nav-cta:hover {

    color: #ffffff !important;

    transform:
        translateY(-2px);

    box-shadow:
        0 12px 28px rgba(43, 88, 190, 0.30);

}


/* =========================================================
   MOBILE TOGGLER
========================================================= */

.sdg-site-header .navbar-toggler {

    width: 45px;
    height: 45px;

    /* display: flex; */

    align-items: center;
    justify-content: center;

    margin-left: auto;

    color:
        #15346c;

    background:
        #f1f5fb;

    border:
        1px solid #e1e8f2 !important;

    border-radius: 9px;

    font-size: 19px;

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease;
}


.sdg-site-header .navbar-toggler:hover {

    color:
        #ffffff;

    background:
        #1756a9;

    transform:
        rotate(3deg);

}


/* Remove bootstrap focus */

.sdg-site-header .navbar-toggler:focus {

    box-shadow:
        0 0 0 4px rgba(23,86,169,.10) !important;

}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1400px) {

    .sdg-site-header .container-fluid {

        padding-left: 45px !important;
        padding-right: 45px !important;

    }


    .sdg-logo {

        width: 195px;

    }


    .sdg-nav-link {

        padding-left: 14px !important;
        padding-right: 14px !important;

        font-size: 14px;

    }

}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1399px) {

    .sdg-site-header .navbar-brand {

        margin-right: 20px;

    }


    .sdg-logo {

        width: 170px;

    }


    .sdg-site-header .navbar-nav {

        gap: 0;

    }


    .sdg-nav-link {

        padding-left: 9px !important;
        padding-right: 9px !important;

        font-size: 13px;

    }


    .sdg-nav-cta {

        padding-left: 15px !important;
        padding-right: 15px !important;

    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

    .sdg-site-header .navbar {

        min-height: 72px;

    }


    .sdg-logo {

        width: 165px;

    }


    /* Mobile navigation panel */

    .sdg-site-header .navbar-collapse {

        margin-top: 12px;

        padding:
            12px;

        background:
            #ffffff;

        border:
            1px solid #e5ebf3;

        border-radius: 12px;

        box-shadow:
            0 15px 35px rgba(20,50,90,.10);

    }


    .sdg-site-header .navbar-nav {

        align-items:
            stretch !important;

    }


    .sdg-nav-link {

        width: 100%;

        justify-content:
            flex-start;

        min-height: 45px;

        padding:
            10px 14px !important;

        font-size: 15px;

    }


    .sdg-nav-link::after {

        left: 14px;

        bottom: 5px;

        transform: none;

    }


    .sdg-nav-link:hover::after,
    .sdg-nav-link.active::after {

        width: 35px;

    }


    .sdg-nav-cta {

        width: 100%;

        margin-top: 8px;

        min-height: 46px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 575.98px) {

    .sdg-site-header .navbar {

        min-height: 68px;

        padding-left: 5px !important;
        padding-right: 5px !important;

    }


    .sdg-logo {

        width: 150px;

    }


    .sdg-site-header .navbar-toggler {

        width: 42px;
        height: 42px;

        font-size: 17px;

    }


    .sdg-site-header .navbar-collapse {

        margin-top: 10px;

        padding: 10px;

    }


    .sdg-nav-link {

        font-size: 14px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .sdg-logo {

        width: 135px;

    }

}

/* =========================================================
   SILARIS DIGI FOOTER
========================================================= */

.silaris-footer {

    width: 100%;

    margin: 0;

    padding: 0;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #090d38 0%,
            #070c30 45%,
            #10134d 100%
        );

    overflow: hidden;

}


/* =========================================================
   MAIN FOOTER
========================================================= */

.silaris-footer-main {

    position: relative;

    padding: 80px 45px 75px;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(122, 70, 235, .10),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #080c35 0%,
            #070b2c 55%,
            #101447 100%
        );

}


.silaris-footer-main::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(132, 74, 242, .7),
            transparent
        );

}


.silaris-footer-main::after {

    content: "";

    position: absolute;

    right: -150px;
    bottom: -180px;

    width: 400px;
    height: 400px;

    border-radius: 50%;

    border: 1px solid rgba(126, 73, 239, .08);

    box-shadow:
        0 0 0 60px rgba(126, 73, 239, .025),
        0 0 0 120px rgba(126, 73, 239, .018);

}


/* =========================================================
   COMPANY
========================================================= */

.silaris-footer-company {

    position: relative;

    z-index: 2;

    padding-right: 25px;

}


.silaris-footer-logo {

    display: inline-block;

    margin-bottom: 18px;

}


.silaris-footer-logo img {

    width: 185px;

    height: auto;

    display: block;

}


.footer-purple-line {

    width: 38px;

    height: 4px;

    margin-bottom: 20px;

    border-radius: 5px;

    background:
        linear-gradient(
            90deg,
            #914cff,
            #7436e8
        );

}


.silaris-footer-company p {

    max-width: 310px;

    margin: 0 0 25px;

    color: rgba(255,255,255,.66);

    font-size: 15px;

    line-height: 1.75;

}


.silaris-footer-copyright {

    color: rgba(255,255,255,.45);

    font-size: 13px;

    line-height: 1.7;

}


/* =========================================================
   FOOTER COLUMNS
========================================================= */

.silaris-footer-column {

    position: relative;

    z-index: 2;

}


.silaris-footer-column h3,
.silaris-footer-certified h3 {

    margin: 0;

    color: #ffffff;

    font-size: 22px;

    font-weight: 700;

    line-height: 1.3;

}


.footer-heading-line {

    width: 36px;

    height: 3px;

    margin: 12px 0 25px;

    border-radius: 5px;

    background: #8845ef;

}


/* =========================================================
   LINKS
========================================================= */

.silaris-footer-column ul {

    margin: 0;

    padding: 0;

    list-style: none;

}


.silaris-footer-column li {

    margin-bottom: 14px;

}


.silaris-footer-column a {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    color: rgba(255,255,255,.68);

    font-size: 15px;

    line-height: 1.4;

    text-decoration: none;

    transition:
        color .25s ease,
        transform .25s ease;

}


.silaris-footer-column a i {

    color: #8c4af3;

    font-size: 9px;

    transition:
        transform .25s ease;

}


.silaris-footer-column a:hover {

    color: #ffffff;

    transform: translateX(5px);

}


.silaris-footer-column a:hover i {

    transform: translateX(3px);

}


/* =========================================================
   CERTIFIED
========================================================= */

.silaris-footer-certified {

    position: relative;

    z-index: 2;

}


.certification-grid {

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 18px;

    max-width: 260px;

}


.certification-item {

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 120px;

    padding: 8px;

    border-radius: 15px;

    background:
        rgba(255,255,255,.025);

    border: 1px solid rgba(255,255,255,.07);

    transition:
        transform .3s ease,
        border-color .3s ease,
        background .3s ease;

}


.certification-item img {

    width: 100%;

    max-width: 110px;

    height: 105px;

    object-fit: contain;

    display: block;

}


.certification-item:hover {

    transform:
        translateY(-7px);

    border-color:
        rgba(143,76,245,.45);

    background:
        rgba(143,76,245,.08);

}


/* =========================================================
   FOOTER BOTTOM
========================================================= */

.silaris-footer-bottom {

    position: relative;

    z-index: 3;

    padding: 20px 45px;

    background:
        rgba(1,4,20,.72);

    border-top:
        1px solid
        rgba(255,255,255,.10);

}


.silaris-footer-bottom-inner {

    display: flex;

    align-items: center;

    justify-content: space-between;

}


/* =========================================================
   SOCIAL
========================================================= */

.silaris-footer-social {

    display: flex;

    align-items: center;

    gap: 12px;

}


.silaris-footer-social a {

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    color:
        rgba(255,255,255,.78);

    border:
        1px solid
        rgba(255,255,255,.25);

    border-radius: 50%;

    font-size: 15px;

    text-decoration: none;

    transition:
        color .3s ease,
        background .3s ease,
        border-color .3s ease,
        transform .3s ease,
        box-shadow .3s ease;

}


.silaris-footer-social a:hover {

    color: #ffffff;

    background:
        #7b42eb;

    border-color:
        #7b42eb;

    transform:
        translateY(-4px);

    box-shadow:
        0 8px 22px
        rgba(123,66,235,.30);

}


/* =========================================================
   LEGAL
========================================================= */

.silaris-footer-legal {

    display: flex;

    align-items: center;

    gap: 22px;

}


.silaris-footer-legal a {

    color:
        rgba(255,255,255,.62);

    font-size: 14px;

    text-decoration: none;

    transition:
        color .25s ease;

}


.silaris-footer-legal a:hover {

    color: #ffffff;

}


.footer-legal-divider {

    width: 2px;

    height: 25px;

    background:
        #914cff;

    display: block;

}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1400px) {

    .silaris-footer-main {

        padding-left: 55px;

        padding-right: 55px;

    }

    .silaris-footer-bottom {

        padding-left: 55px;

        padding-right: 55px;

    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

    .silaris-footer-main {

        padding:
            55px 30px 45px;

    }


    .silaris-footer-company {

        padding-right: 0;

    }


    .silaris-footer-column,
    .silaris-footer-certified {

        padding-top: 10px;

    }


    .silaris-footer-bottom {

        padding:
            18px 30px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px) {

    .silaris-footer-main {

        padding:
            45px 22px 35px;

    }


    .silaris-footer-company {

        padding-bottom: 15px;

    }


    .silaris-footer-logo img {

        width: 165px;

    }


    .silaris-footer-column h3,
    .silaris-footer-certified h3 {

        font-size: 20px;

    }


    .silaris-footer-column a {

        font-size: 14px;

    }


    .certification-grid {

        max-width: 280px;

    }


    .silaris-footer-bottom {

        padding:
            20px 22px;

    }


    .silaris-footer-bottom-inner {

        flex-direction: column;

        align-items: flex-start;

        gap: 20px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .silaris-footer-company p {

        font-size: 14px;

    }


    .certification-grid {

        gap: 12px;

    }


    .certification-item {

        min-height: 105px;

    }


    .certification-item img {

        max-width: 90px;

        height: 90px;

    }


    .silaris-footer-social a {

        width: 38px;

        height: 38px;

    }


    .silaris-footer-legal {

        gap: 14px;

        flex-wrap: wrap;

    }


    .silaris-footer-legal a {

        font-size: 13px;

    }

}

.about-page-hero {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    background-image: url("../img/about-us-strip.png");
    background-size: cover;
    background-position: center right;
    isolation: isolate;
}


/* ---------------------------------------------------------
   Gradient Overlay
--------------------------------------------------------- */

.about-hero-overlay {
    position: absolute;
    inset: 0;

    /* background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.98) 0%,
            rgba(255, 255, 255, 0.94) 32%,
            rgba(255, 255, 255, 0.72) 52%,
            rgba(255, 255, 255, 0.08) 78%,
            rgba(255, 255, 255, 0) 100%
        ); */

    z-index: -1;
}


/* ---------------------------------------------------------
   Container
--------------------------------------------------------- */

.about-page-hero .container {
    padding-top: 55px;
    padding-bottom: 55px;
}


/* ---------------------------------------------------------
   Breadcrumb
--------------------------------------------------------- */

.about-breadcrumb {
    display: flex;
    align-items: center;
    gap: 14px;

    font-size: 18px;
    font-weight: 500;
}

.about-breadcrumb a {
    color: #555;
    text-decoration: none;

    transition: color .3s ease;
}

.about-breadcrumb a:hover {
    color: var(--bs-primary);
}

.about-breadcrumb span {
    color: #999;
}

.about-breadcrumb .current {
    color: var(--bs-primary);
    font-weight: 600;
}

.about-breadcrumb i {
    font-size: 12px;
}


/* ---------------------------------------------------------
   Main Heading
--------------------------------------------------------- */

.about-hero-title {
    font-size: clamp(32px, 5vw, 48px);
    line-height: 1.08;
    color: #111;
    margin-bottom: 22px;
}

.about-hero-title span {
    color: var(--bs-primary);
}