/* =========================================
   GLOBAL
========================================= */

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Noto Sans", Arial, sans-serif;
    color: #080d27;
    background: #ffffff;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}



/* =========================================================
   RESET
========================================================= */

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

.site-header {
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 99999;
    background: #fff;
}

.site-header ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-header a {
    text-decoration: none;
}


/* =========================================================
   TOP BAR
========================================================= */

.top-bar {
    height: 36px;
    width: 100%;

    background: #050b32;
    color: #fff;

    display: flex;
    align-items: center;
    justify-content: center;
}

.top-bar-content {
    display: flex;
    align-items: center;

    gap: 12px;

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

.top-divider {
    color: #d6a000;
}

.top-highlight {
    color: #e0a900;
    font-weight: 600;
}


/* =========================================================
   WHITE MAIN HEADER
========================================================= */

.main-header {
    width: 100%;
    height: 79px;

    background: #fff;

    box-shadow:
        0 2px 10px rgba(0,0,0,.08);
}

.header-container {
    width: 100%;
    max-width: 1500px;

    height: 100%;

    margin: auto;
    padding: 0 25px;

    display: flex;
    align-items: center;
        justify-content: space-between;
}


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

.logo {
    flex-shrink: 0;

    display: flex;
    align-items: center;
}

.logo img {
    width: 315px;
    height: auto;
    display: block;
}


/* =========================================================
   WHITE HEADER NAV
========================================================= */

.main-nav {
   

    display: flex;
    align-items: center;
gap: 28px;
    justify-content: center;
}

.main-nav a {

    position: relative;

    height: 79px;

    display: flex;
    align-items: center;

    color: #080d27;

    font-size: 15px;
    font-weight: 600;

    white-space: nowrap;
}

.main-nav a:hover, .main-nav a.active {
    color: #a97800;
}

.main-nav a::after{

    content: "";

    position: absolute;

    left: 0;
    bottom: 16px;

    width: 0;
    height: 2px;

    background: #d49c00;

    transition: .3s ease;
}

.main-nav a:hover::after, .main-nav a.active::after {
    width: 100%;
}


/* =========================================================
   PHONE + CONSULTATION
========================================================= */

.header-actions {

    margin-left: 45px;

    display: flex;
    align-items: center;

    gap: 35px;
}

.phone-link {

    display: flex;
    align-items: center;

    gap: 10px;

    color: #071039;

    font-size: 16px;
    font-weight: 600;

    white-space: nowrap;
}

.phone-link i {

    color: #c08e00;

    font-size: 24px;
}

.consultation-btn-top {

    height: 46px;

    padding: 0 20px;

    display: flex;
    align-items: center;

    gap: 10px;

    background: #071039;
    color: #fff;

    border-radius: 2px;

    font-size: 15px;
    font-weight: 600;

    white-space: nowrap;

    transition: .3s ease;
}

.consultation-btn-top:hover {
    background: #b88900;
}

.consultation-btn-top i {
    font-size: 18px;
}


/* =========================================================
   DARK NAVY SERVICE MENU
========================================================= */

.service-nav {

    width: 100%;
    height: 53px;

    background: #05082c;
}

.service-nav-inner {

    width: 100%;
    max-width: 1500px;

    height: 100%;

    margin: auto;
    padding: 0 20px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.service-list {

    height: 100%;

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

    gap: 43px;
}

.service-list > li {
    height: 100%;
    position: relative;
}

.service-list > li > a {

    position: relative;

    height: 53px;

    display: flex;
    align-items: center;

    gap: 7px;

    color: #e1ab00;

    font-size: 14px;
    font-weight: 700;

    white-space: nowrap;

    transition: .25s ease;
}

.service-list > li > a:hover, .service-list > li.active > a {
    color: #fff;
}


/* ACTIVE / HOVER UNDERLINE */

.service-list > li > a::after {

    content: "";

    position: absolute;

    left: 50%;
    bottom: 7px;

    width: 0;
    height: 2px;

    background: #e0ad18;

    transform: translateX(-50%);

    transition: .3s ease;
}

.service-list > li:hover > a::after, .service-list > li.active > a::after  {
    width: 42px;
}


/* DOWN ARROW */

.service-list > li > a > i {

    font-size: 8px;

    transition: transform .3s ease;
}

.service-dropdown-parent:hover > a > i {
    transform: rotate(180deg);
}


/* =========================================================
   SUB MENU
========================================================= */

.service-dropdown {

    position: absolute;

    top: 53px;
    left: 50%;

    width: 290px;

    background: #05082c;

    border-top: 3px solid #e1ab00;

    box-shadow:
        0 18px 45px rgba(0,0,0,.20);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform:
        translateX(-50%)
        translateY(12px);

    transition:
        opacity .25s ease,
        visibility .25s ease,
        transform .25s ease;
}


/* SHOW */

.service-dropdown-parent:hover >
.service-dropdown {

    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform:
        translateX(-50%)
        translateY(0);
}


/* SUB MENU ITEMS */

.service-dropdown > li {
    position: relative;

    border-bottom: 1px solid #343761bd;
}

.service-dropdown > li:last-child {
    border-bottom: none;
}

.service-dropdown > li > a {

    min-height: 50px;

    padding: 13px 18px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    color: #f5f5f5;

    font-size: 14px;
    font-weight: 500;

    line-height: 1.45;

    transition: .25s ease;
}

.service-dropdown > li > a:hover {

    background: #0a0f47;

    color: #e1ab00;

    padding-left: 23px;
}


/* =========================================================
   SUB-SUB MENU
========================================================= */

.sub-sub-menu {

    position: absolute;

    top: -3px;
    left: calc(100% + 1px);

    width: 270px;

    background: #05082c;

    border-top: 3px solid #e1ab00;

    box-shadow:
        0 18px 45px rgba(0,0,0,.20);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateX(10px);

    transition:
        opacity .25s ease,
        visibility .25s ease,
        transform .25s ease;
}


/* SHOW SUB-SUB */

.sub-parent:hover >
.sub-sub-menu {

    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translateX(0);
}


/* RIGHT ARROW */

.sub-parent > a > i {

    font-size: 9px;

    color: #a97800;

    transition: .25s ease;
}

.sub-parent:hover > a > i {
    transform: translateX(3px);
}


/* SUB-SUB LINKS */

.sub-sub-menu li {

    border-bottom: 1px solid #343761bd;
}

.sub-sub-menu li:last-child {
    border-bottom: none;
}

.sub-sub-menu a {

    display: block;

    padding: 13px 18px;

    color: #f5f5f5;

    font-size: 14px;
    font-weight: 500;

    transition: .25s ease;
}

.sub-sub-menu a:hover {

        background: #0a0f47;

    color: #e1ab00;


    padding-left: 23px;
}

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

.mobile-menu-btn {
    display: none;

    width: 44px;
    height: 44px;

    margin-left: auto;

    border: 1px solid #071039;
    border-radius: 3px;

    background: #071039;

    cursor: pointer;

    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 5px;
}

.mobile-menu-btn span {

    width: 22px;
    height: 2px;

    background: #fff;

    transition: .3s ease;
}


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

.mobile-nav {
    display: none;
}


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

.mobile-dropdown-btn {

    width: 100%;

    min-height: 52px;

    padding: 14px 5px;

    border: none;
    outline: none;

    background: transparent;

    display: flex;
    align-items: center;
    justify-content: space-between;

    color: #f5f5f5;

    font-family: inherit;

    font-size: 15px;
    font-weight: 600;

    text-align: left;

    cursor: pointer;
}

.mobile-plus {

    width: 28px;
    height: 28px;

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

    color: #e1ab00;

    font-size: 21px;

    transition: .25s ease;
}


/* OPEN */

.mobile-dropdown.open >
.mobile-submenu {
    display: block;     padding: 0 0 8px 15px;
}

.mobile-dropdown.open >
.mobile-dropdown-btn >
.mobile-plus {
    transform: rotate(45deg);
}


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

.mobile-submenu {

    display: none;

    padding: 0 0 8px 15px;

    background: #05082c;
}

.mobile-submenu li {
    border-bottom: none;
}

.mobile-submenu li > a {

    display: block;

    padding: 11px 8px;

    border-left: 2px solid #e1ab00;

    color: #f5f5f5;

    font-size: 14px;
    font-weight: 500;

    line-height: 1.45;
}

.mobile-submenu li > a:hover {

    color: #e1ab00;

    background: #0a0f47;
}


/* =========================================================
   MOBILE LEVEL 2
========================================================= */

.mobile-submenu .mobile-dropdown-btn {

    padding-left: 8px;

    color: #f5f5f5;

    font-size: 14px;
}


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

@media (max-width: 1050px) {

    .main-header {
        height: 72px;
    }

    .header-container {
        padding: 0 18px;
    }

    .logo img {
        width: 240px;
    }

    .main-nav,
    .header-actions,
    .service-nav {
        display: none;
    }

    .mobile-menu-btn {
        display: flex;
    }

    .mobile-nav {

        display: block;

        max-height: 0;

        overflow: hidden;

        opacity: 0;
        visibility: hidden;

        background: #05082c;

        border-top: 1px solid #e5e5e5;

        box-shadow:
            0 15px 35px rgba(0,0,0,.12);

        transition:
            max-height .4s ease,
            opacity .25s ease,
            visibility .25s ease;
    }

    .mobile-nav.open {

        max-height:
            calc(100vh - 108px);

        overflow-y: auto;

        opacity: 1;
        visibility: visible;
    }

    .mobile-nav > ul {
        padding: 8px 20px 25px;
    }

    .mobile-nav > ul > li {
        border-bottom: 1px solid #e8e8e8;
    }

    .mobile-nav > ul > li > a {

        display: block;

        padding: 15px 5px;

        color: #f5f5f5;

        font-size: 15px;
        font-weight: 600;
    }


    /* HAMBURGER */

    .mobile-menu-btn.active span:nth-child(1) {

        transform:
            translateY(7px)
            rotate(45deg);
    }

    .mobile-menu-btn.active span:nth-child(2) {
        opacity: 0;
    }

    .mobile-menu-btn.active span:nth-child(3) {

        transform:
            translateY(-7px)
            rotate(-45deg);
    }

}


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

@media (max-width: 600px) {

    .top-bar {
        height: 34px;
    }

    .top-bar-content {
        font-size: 11px;
        gap: 7px;
    }

    .logo img {
        width: 215px;
    }

}

/* =========================================
   HERO BANNER
========================================= */

.hero-banner {
    position: relative;

    width: 100%;
    height: 560px;

    overflow: hidden;

    background: #020b24;
}


/* =========================================
   BACKGROUND IMAGE
========================================= */

.hero-bg {
    position: absolute;

    inset: 0;

    background-image:
        url("../images/hero-banner.jpg");

    background-size: cover;

    background-position: center center;

    background-repeat: no-repeat;

    transform: scale(1.01);

    z-index: 1;
}


/* =========================================
   DARK OVERLAY
========================================= */

.hero-overlay {
    position: absolute;

    inset: 0;

    z-index: 2;

   
}


/* =========================================
   HERO CONTAINER
========================================= */

.hero-container {
    position: relative;

    z-index: 3;

    max-width: 1200px;

    height: 100%;

    margin: 0 auto;

    padding: 0 20px;

    display: flex;

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


/* =========================================
   HERO CONTENT
========================================= */

.hero-content {
    width: 650px;

    margin-top: -5px;
}


/* =========================================
   HERO TITLE
========================================= */

.hero-content h1 {
    margin: 0;

        font-size: 42px;
    line-height: 1.12;
    font-weight: 700;
    letter-spacing: -0.5px;
    text-transform: uppercase;
    font-family: "Playfair Display", serif;
}


/* WHITE TEXT */

.hero-white {
    display: block;

    color: #ffffff;

    margin-bottom: 5px;
}


/* GOLD TEXT */

.hero-gold {
    display: block;

    color: #c99500;
}


/* =========================================
   CONSULTATION BUTTON
========================================= */

.hero-btn {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    margin-top: 25px;

    min-width: 165px;

    height: 50px;

    padding: 0 22px;
    border: solid 1px #fff;



    color: #ffffff;

    font-family:
        "Noto Sans",
        Arial,
        sans-serif;

    font-size: 13px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.1px;

    border-radius: 2px;

    transition:
        background 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


/* BUTTON HOVER */

.hero-btn:hover {
    background: #e2ad00;

    border: solid 1px #e2ad00;

    transform: translateY(-2px);

    box-shadow:
        0 8px 25px rgba(201, 149, 0, 0.25);
}


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

@media (max-width: 1100px) {

    .hero-banner {
        height: 520px;
    }

    .hero-container {
        padding: 0 30px;
    }

    .hero-content {
        width: 600px;
    }

    .hero-content h1 {
        font-size: 40px;
    }

}


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

@media (max-width: 768px) {

    .hero-banner {
        height: 560px;
    }

    .hero-bg {
        background-position: 65% center;
    }

    .hero-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(2, 11, 35, 0.94) 0%,
                rgba(2, 13, 40, 0.80) 55%,
                rgba(2, 13, 40, 0.58) 100%
            );
    }

    .hero-container {
        padding: 0 22px;

        align-items: center;
    }

    .hero-content {
        width: 100%;
    }

    .hero-content h1 {
        font-size: 34px;

        line-height: 1.15;

        letter-spacing: 0;
    }

    .hero-btn {
        margin-top: 30px;

        height: 48px;

        min-width: 150px;

        font-size: 12px;
    }

}


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

@media (max-width: 480px) {

    .hero-banner {
        height: 380px;
    }

    .hero-bg {
        background-position: 68% center;
    }

    .hero-container {
        padding: 0 18px;
    }

    .hero-content h1 {
        font-size: 24px;

        line-height: 1.18;
    }

    .hero-white {
        margin-bottom: 4px;
    }

    .hero-btn {
        min-width: 205px;

        height: 46px;

        margin-top: 27px;
    }

}



/* =========================================
   TRUSTED LEGAL SERVICES
========================================= */

.legal-services {
    width: 100%;

    background: #040725;

    color: #ffffff;

    padding: 55px 0 80px;

    overflow: hidden;
}


/* =========================================
   CONTAINER
========================================= */

.services-container {
    width: 100%;
    max-width: 1200px;

    margin: 0 auto;

    padding: 0 20px;
}


/* =========================================
   INTRO
========================================= */

.services-intro {
    display: grid;

    grid-template-columns: 330px 1fr;

    gap:150px;

    align-items: start;

    margin-bottom: 60px;
}


/* =========================================
   TITLE
========================================= */

.services-title {
    display: flex;

    align-items: flex-start;

    gap: 13px;
}

.title-line {
    width: 6px;
    height: 28px;

    flex-shrink: 0;

    margin-top: 3px;

    background: #e8ac00;
}


.services-title h2 {
    margin: 0;

       font-family: "Playfair Display", serif;


    font-size: 36px;

    line-height: 1.05;

    font-weight: 700;

    letter-spacing: 0.2px;

     font-variant: small-caps;
    font-variant-caps: small-caps;
}

.services-title h2 span {
    display: block;

    color: #ffffff;
}

.services-title h2 strong {
    display: block;

    color: #d69d00;

    font-weight: 700;

    margin-top: 3px;
}


/* =========================================
   DESCRIPTION
========================================= */

.services-description {
    padding-top: 2px;
}

.services-description p {
    margin: 0;

    color: #e0e2ec;

    font-family:
        "Noto Sans",
        Arial,
        sans-serif;

    font-size: 13px;

    line-height: 1.55;

    font-weight: 400;
}


/* =========================================
   SERVICES GRID
========================================= */

.services-grid {
    display: grid;

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

    gap: 35px;
}


/* =========================================
   SERVICE CARD
========================================= */

.service-card {
    position: relative;

    min-height: 314px;

    border: 1px solid rgba(173, 180, 205, 0.45);

    background: #030727;

    padding: 21px 25px 25px;

    overflow: hidden;

    transition:
        border-color 0.35s ease,
        transform 0.35s ease,
        box-shadow 0.35s ease;

        
}


/* =========================================
   LEFT GOLD LINE
   TOP → BOTTOM ANIMATION
========================================= */

.service-card::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 5px;
    height: 100%;

    background: #e5aa00;

    transform: scaleY(0);

    transform-origin: top;

    transition: transform 0.55s cubic-bezier(
        0.65,
        0,
        0.35,
        1
    );

    z-index: 5;
}


/* =========================================
   HOVER - LINE DRAW
========================================= */

.service-card:hover::before {
    transform: scaleY(1);
}


/* =========================================
   CARD HOVER
========================================= */

.service-card:hover {
    border-color: rgba(229, 170, 0, 0.45);

    transform: translateY(-5px);

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.30);
}

/* =========================================
   GOLD LEFT BORDER
========================================= */

.service-card.featured {
    border-left: 7px solid #e5aa00;
}


/* =========================================
   ICON CIRCLE
========================================= */

.service-icon {
    position: absolute;

    top: 0;
    right: 0;

    width: 92px;
    height: 92px;

    border-radius: 0 0 0 60px;

    background: rgba(19, 25, 62, 0.95);

    display: flex;

    align-items: center;

    justify-content: center;

    padding-left: 13px;

    padding-bottom: 13px;

    z-index: 1;
}


/* =========================================
   ICON
========================================= */

.service-icon i {
    color: #f5f1df;

    font-size: 35px;

    font-weight: 400;

    text-shadow:
        0 0 1px #ffffff;
}


/* First card icon */
.service-card.featured .service-icon {
    background: #ffffff;
}

.service-card.featured .service-icon i {
    color: #d49b00;
}


/* =========================================
   CARD CONTENT
========================================= */

.service-content {
    position: relative;

    z-index: 2;
}


/* =========================================
   CARD TITLE
========================================= */

.service-content h3 {
    margin: 0 70px 20px 0;

    color: #dca300;

       font-family: "Playfair Display", serif;
    font-variant-caps: all-small-caps;


    font-size: 28px;

    line-height: 1.05;

    font-weight: 700;
}


/* =========================================
   CARD LIST
========================================= */

.service-content ul {
    margin: 0;
    padding: 0 0 0 17px;

    list-style: none;
}


/* =========================================
   LIST ITEM
========================================= */

.service-content li {
    position: relative;

    margin-bottom: 10px;

    color: #f1f2f7;

    font-family:
        "Noto Sans",
        Arial,
        sans-serif;

    font-size: 14px;

    line-height: 1.65;

    font-weight: 500;
}


/* =========================================
   GOLD BULLET
========================================= */

.service-content li::before {
    content: "•";

    position: absolute;

    left: -16px;
    top: 0;

    color: #ffffff;

    font-size: 15px;
}


.service-content li a:hover {  color: #dca300;}

/* =========================================
   HIGHLIGHT ITEM
========================================= */

.service-content li.highlight {
    color: #dca300;
}

.service-content li.highlight::before {
    color: #dca300;
}


/* =========================================
   HOVER
========================================= */

.service-card:hover {
    border-color: #d7a000;

    transform: translateY(-5px);

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.3);
}

.service-card:hover .service-icon i {
    transform: scale(1.08);
}

.service-icon i {
    transition: transform 0.3s ease;
}


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

@media (max-width: 900px) {

    .services-container {
        max-width: 760px;
    }

    .services-intro {
        grid-template-columns: 1fr;

        gap: 20px;

        margin-bottom: 40px;
    }

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

        gap: 25px;
    }

}


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

@media (max-width: 600px) {

    .legal-services {
        padding: 45px 0 55px;
    }

    .services-container {
        padding: 0 18px;
    }

    .services-intro {
        margin-bottom: 35px;
    }

    .services-title h2 {
        font-size: 27px;
    }

    .services-description p {
        font-size: 13px;

        line-height: 1.65;
    }

    .services-grid {
        grid-template-columns: 1fr;

        gap: 20px;
    }

    .service-card {
        min-height: auto;

        padding: 23px 22px 27px;
    }

    .service-content h3 {
        font-size: 23px;
    }

    .service-content li {
        font-size: 13px;

        line-height: 1.6;
    }

}


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

@media (max-width: 400px) {

    .services-title h2 {
        font-size: 26px;
    }

    .service-icon {
        width: 82px;
        height: 82px;
    }

    .service-icon i {
        font-size: 30px;
    }

}

/* =========================================
   SERVICE ICON - NORMAL
========================================= */

.service-icon {
    position: absolute;

    top: 0;
    right: 0;

    width: 92px;
    height: 92px;

    border-radius: 0 0 0 70px;

    background: rgba(19, 25, 62, 0.95);

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

    padding-left: 13px;
    padding-bottom: 13px;

    z-index: 1;

    transition:
        background 0.35s ease,
        width 0.35s ease,
        height 0.35s ease;
}


.service-icon svg {
    width: 36px;
    height: 36px;

    color: #ffffff;

    stroke: currentColor;

    transition:
        color 0.4s ease,
        transform 0.4s ease;
}


/* =========================================
   HOVER ICON
========================================= */

.service-card:hover .service-icon {
    background: #ffffff;
}

.service-card:hover .service-icon svg {
    color: #d49b00;

    transform: scale(1.08);
}

/* =========================================
   ICON
========================================= */

.service-icon i {
    color: #ffffff;

    font-size: 35px;

    transition:
        color 0.35s ease,
        transform 0.35s ease;
}


/* =========================================
   FIRST CARD - DEFAULT
========================================= */

.service-card.featured .service-icon {
    background: #ffffff;
}

.service-card.featured .service-icon i {
    color: #d49b00;
}


/* =========================================
   HOVER - ALL CARDS
========================================= */

.service-card:hover .service-icon {
    background: #ffffff;
}

.service-card:hover .service-icon i {
    color: #d49b00;

    transform: scale(1.08);
}


.service-card {
    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

.service-card:hover {
    transform: translateY(-5px);

    border-color: #dca300;

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.28);
}

.service-icon {
    transition:
        background 0.35s ease;
}

.service-icon i {
    transition:
        color 0.35s ease,
        transform 0.35s ease;
}



/* =========================================
   ABOUT SECTION
========================================= */

.about-section {
    width: 100%;

    background: #040725;

    color: #ffffff;

    padding: 68px 0 82px;

    border-top: 1px solid
        rgba(173, 180, 205, 0.25);

 
}


/* =========================================
   CONTAINER
========================================= */

.about-container {
    width: 100%;

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 20px;
}


/* =========================================
   HEADING
========================================= */

.about-heading {
    display: flex;

    align-items: flex-start;

    gap: 18px;

    margin-bottom: 40px;
}


/* GOLD VERTICAL LINE */

.about-title-line {
    display: block;

    width: 6px;

    height: 32px;

    flex-shrink: 0;

    margin-top: 5px;

    background: #e5aa00;
}


/* =========================================
   TITLE
========================================= */

.about-heading h2 {
    margin: 0;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 36px;

    line-height: 1.08;

    font-weight: 700;

    letter-spacing: 0.2px;
}


.about-heading h2 span {
    display: block;

    color: #ffffff;
}


.about-heading h2 strong {
    display: block;

    color: #d69d00;

    font-weight: 700;

    margin-top: 3px;
}


/* =========================================
   CONTENT
========================================= */

.about-content {
    width: 100%;

    max-width: 1160px;

    margin-left: 0;
}


/* =========================================
   PARAGRAPH
========================================= */

.about-content p {
    margin: 0 0 20px;

    color: #e0e2ec;

    font-family:
        "Noto Sans",
        Arial,
        sans-serif;

    font-size: 14px;

    line-height: 1.65;

    font-weight: 400;

    letter-spacing: 0;
}


.about-content p:last-child {
    margin-bottom: 0;
}


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

@media (max-width: 900px) {

    .about-section {
        padding: 55px 0 65px;
    }

    .about-container {
        padding: 0 30px;
    }

    .about-heading {
        margin-bottom: 32px;
    }

    .about-heading h2 {
        font-size: 34px;
    }

    .about-content p {
        font-size: 13.5px;

        line-height: 1.7;

        margin-bottom: 22px;
    }

}


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

@media (max-width: 600px) {

    .about-section {
        padding: 45px 0 55px;
    }

    .about-container {
        padding: 0 20px;
    }

    .about-heading {
        gap: 13px;

        margin-bottom: 30px;
    }

    .about-title-line {
        width: 5px;

        height: 27px;

        margin-top: 3px;
    }

    .about-heading h2 {
        font-size: 29px;

        line-height: 1.08;
    }

    .about-content p {
        font-size: 13px;

        line-height: 1.7;

        margin-bottom: 20px;
    }

}


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

@media (max-width: 400px) {

    .about-heading h2 {
        font-size: 26px;
    }

    .about-content p {
        font-size: 12.5px;
    }

}


/* =========================================
   WHY CHOOSE US
========================================= */

.why-choose-section {
    width: 100%;

    display: grid;

    grid-template-columns: 1fr 1fr;

    background: #03051c;

    color: #ffffff;

    overflow: hidden;
}


/* =========================================
   LEFT IMAGE
========================================= */

.why-image {
    position: relative;

    width: 100%;

    min-height: 750px;

    overflow: hidden;
}


.why-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center center;

    transition:
        transform 0.8s ease;
}


/* Subtle image hover */

.why-choose-section:hover .why-image img {
    transform: scale(1.02);
}


/* =========================================
   RIGHT CONTENT
========================================= */

.why-content {
    display: flex;

    align-items: center;

    background: #03051c;

    padding: 55px 60px;
}


.why-inner {
    width: 100%;

    max-width: 600px;

    margin: 0 auto 0 0;
}


/* =========================================
   HEADING
========================================= */

.why-heading {
    display: flex;

    align-items: flex-start;

    gap: 18px;

    margin-bottom: 38px;
}


/* GOLD VERTICAL LINE */

.why-title-line {
    width: 6px;
    height: 32px;

    flex-shrink: 0;

    margin-top: 5px;

    background: #e5aa00;
}


/* =========================================
   TITLE
========================================= */

.why-heading h2 {
    margin: 0;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 36px;

    line-height: 1.05;

    font-weight: 700;

    letter-spacing: 0.2px;
}


.why-heading h2 span {
    display: block;

    color: #ffffff;
}


.why-heading h2 strong {
    display: block;

    color: #d69d00;

    font-weight: 700;

    margin-top: 3px;
}


/* =========================================
   WHY LIST
========================================= */

.why-list {
    width: 100%;
}


/* =========================================
   WHY ITEM
========================================= */

.why-item {
    padding: 0 0 25px;

    margin-bottom: 25px;

    border-bottom: 2px solid
        rgba(125, 131, 157, 0.22);
}


.why-item:last-child {
    border-bottom: none;

    margin-bottom: 0;

    padding-bottom: 0;
}


/* =========================================
   ITEM TITLE
========================================= */

.why-item h3 {
    margin: 0 0 7px;

    color: #dda500;

    font-family:
        "Noto Sans",
        Arial,
        sans-serif;

    font-size: 16px;

    line-height: 1.4;

    font-weight: 700;
}


/* =========================================
   ITEM DESCRIPTION
========================================= */

.why-item p {
    margin: 0;

    color: #f0f1f5;

    font-family:
        "Noto Sans",
        Arial,
        sans-serif;

    font-size: 14px;

    line-height: 1.55;

    font-weight: 400;
}


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

@media (max-width: 1000px) {

    .why-content {
        padding: 45px 35px;
    }

    .why-heading h2 {
        font-size: 35px;
    }

    .why-item {
        padding-bottom: 20px;

        margin-bottom: 20px;
    }

}


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

@media (max-width: 768px) {

    .why-choose-section {
        grid-template-columns: 1fr;
    }


    /* Image on top */

    .why-image {
        min-height: 420px;

        height: 420px;
    }


    .why-content {
        padding: 50px 25px 55px;
    }


    .why-inner {
        max-width: 100%;
    }


    .why-heading {
        gap: 14px;

        margin-bottom: 32px;
    }


    .why-title-line {
        width: 5px;

        height: 28px;

        margin-top: 3px;
    }


    .why-heading h2 {
        font-size: 32px;
    }


    .why-item h3 {
        font-size: 14px;
    }


    .why-item p {
        font-size: 13px;

        line-height: 1.65;
    }

}


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

@media (max-width: 480px) {

    .why-image {
        height: 340px;

        min-height: 340px;
    }


    .why-content {
        padding: 42px 20px 48px;
    }


    .why-heading h2 {
        font-size: 26px;
    }


    .why-item {
        padding-bottom: 18px;

        margin-bottom: 18px;
    }


    .why-item h3 {
        font-size: 13.5px;
    }


    .why-item p {
        font-size: 12.5px;
    }

}

/* =========================================
   CLIENT REVIEWS
========================================= */

.reviews-section {
    width: 100%;
    background: #020622;
    color: #ffffff;
    padding: 72px 0 70px;
    overflow: hidden;
    box-sizing: border-box;
}

.reviews-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}


/* =========================================
   HEADER
========================================= */

.reviews-header {
    text-align: center;
    max-width: 850px;
    margin: 0 auto 72px;
}

.reviews-header h2 {
    margin: 0;

    font-family: "Playfair Display", Georgia, serif;

    font-size: 36px;
    line-height: 1.1;
    font-weight: 700;

      text-transform: uppercase;
}

.reviews-header h2 span {
    color: #ffffff;
}

.reviews-header h2 strong {
    color: #dca300;
    font-weight: 700;
}

.reviews-title-line {
    width: 36px;
    height: 6px;

    background: #e5aa00;

    margin: 12px auto 18px;
}

.reviews-header p {
    margin: 0;

    color: #e1e3eb;

    font-family: "Noto Sans", Arial, sans-serif;

    font-size: 14px;
    line-height: 1.65;
}


/* =========================================
   SLIDER
========================================= */

.reviews-slider {
    position: relative;

    width: 100%;

    display: flex;
    align-items: center;

    gap: 25px;
}


/* =========================================
   VIEWPORT
========================================= */

.reviews-track-wrapper {
    width: 100%;

    overflow: hidden;

    box-sizing: border-box;
}


/* =========================================
   TRACK
========================================= */

.reviews-track {
    display: flex;

    width: 100%;

    gap: 20px;

    transition:
        transform 0.55s cubic-bezier(0.65, 0, 0.35, 1);

    will-change: transform;
}


/* =========================================
   REVIEW CARD
========================================= */

.review-card {
    flex: 0 0 calc((100% - 40px) / 3);

    min-width: 0;
    min-height: 410px;

    padding: 25px 30px;

    box-sizing: border-box;

    border: 1px solid #c99600;

    background:
        linear-gradient(
            145deg,
            rgba(8, 14, 47, 0.95),
            rgba(2, 6, 34, 0.98)
        );

    display: flex;
    flex-direction: column;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

.review-card:hover {
    transform: translateY(-5px);

    border-color: #f0b900;

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.30);
}


/* =========================================
   QUOTE
========================================= */

.quote-mark {
    height: 45px;

    color: #e5aa00;

    font-family: Georgia, serif;

    font-size: 65px;
    font-weight: 700;

    line-height: 0.7;
}


/* =========================================
   REVIEW TEXT
========================================= */

.review-card blockquote {
    margin: 0;

    color: #eeeeF3;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 15px;

    font-style: italic;

    line-height: 1.7;

    flex: 1;
}


/* =========================================
   GOLD DIVIDER
========================================= */

.review-line {
    width: 57px;
    height: 2px;

    background: #dca300;

    margin: 18px 0 20px;
}


/* =========================================
   CLIENT
========================================= */

.review-client {
    display: flex;

    align-items: center;

    gap: 18px;
}

.client-initials {
    width: 70px;
    height: 70px;

    flex-shrink: 0;

    border: 1px solid #dca300;

    border-radius: 50%;

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

    color: #dca300;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 25px;
    font-weight: 700;
}

.client-info {
    min-width: 0;
}

.client-top {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.client-top h3 {
    order: 2;

    margin: 0;

    color: #ffffff;

    font-family:
        "Noto Sans",
        Arial,
        sans-serif;

    font-size: 15px;
    font-weight: 700;
}


/* =========================================
   STARS
========================================= */

.stars {
    order: 1;

    color: #e5aa00;

    font-size: 18px;

    letter-spacing: 2px;

    line-height: 1;
}


/* =========================================
   SERVICE
========================================= */

.client-service {
    margin: 5px 0 8px;

    color: #dfe1e9;

    font-family:
        "Noto Sans",
        Arial,
        sans-serif;

    font-size: 12px;
}


/* =========================================
   LOCATION
========================================= */

.client-location {
    margin: 0;

    color: #dfe1e9;

    font-family:
        "Noto Sans",
        Arial,
        sans-serif;

    font-size: 12px;
}

.location-icon {
    color: #e5aa00;

    margin-right: 7px;

    font-size: 10px;
}


/* =========================================
   ARROWS
========================================= */

.review-arrow {
    width: 42px;
    height: 42px;

    flex-shrink: 0;

    padding: 0;

    border: 1px solid #dca300;

    border-radius: 50%;

    background: transparent;

    color: #dca300;

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

    cursor: pointer;

    z-index: 10;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}

.review-arrow span {
    font-family: Arial, sans-serif;

    font-size: 34px;

    line-height: 1;

    margin-top: -4px;
}

.review-arrow:hover {
    background: #dca300;

    color: #020622;

    transform: scale(1.08);
}

.review-arrow:disabled {
    opacity: 0.35;

    cursor: default;
}

.review-arrow:disabled:hover {
    background: transparent;

    color: #dca300;

    transform: none;
}


/* =========================================
   DOTS
========================================= */

.review-dots {
    display: flex;

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

    gap: 15px;

    margin-top: 30px;
}

.review-dot {
    width: 14px;
    height: 14px;

    padding: 0;

    border: 2px solid #dca300;

    border-radius: 50%;

    background: transparent;

    cursor: pointer;

    transition:
        background 0.3s ease,
        transform 0.3s ease;
}

.review-dot.active {
    background: #dca300;

    transform: scale(1.05);
}

.review-dot:hover {
    background: #dca300;
}


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

@media (max-width: 1000px) {

    .reviews-container {
        padding: 0 25px;
    }

    .reviews-slider {
        gap: 18px;
    }

    .review-card {
        flex: 0 0 calc((100% - 20px) / 2);
    }

}


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

@media (max-width: 700px) {

    .reviews-section {
        padding: 55px 0;
    }

    .reviews-container {
        padding: 0 20px;
    }

    .reviews-header {
        margin-bottom: 42px;
    }

    .reviews-header h2 {
        font-size: 31px;
    }

    .reviews-header p {
        font-size: 13px;
    }

    .reviews-slider {
        display: block;
    }

    .reviews-track {
        gap: 0;
    }

    .review-card {
        flex: 0 0 100%;

        min-height: 370px;

        padding: 24px;
    }

    .review-arrow {
        position: absolute;

        top: 50%;

        transform: translateY(-50%);
    }

    .review-arrow:hover {
        transform:
            translateY(-50%)
            scale(1.08);
    }

    .review-prev {
        left: -8px;
    }

    .review-next {
        right: -8px;
    }

    .review-dots {
        margin-top: 25px;

        gap: 12px;
    }
}


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

@media (max-width: 480px) {

    .reviews-header h2 {
        font-size: 26px;
    }

    .reviews-header p {
        font-size: 12.5px;
    }

    .review-card {
        min-height: 390px;

        padding: 22px;
    }

    .review-card blockquote {
        font-size: 14px;

        line-height: 1.65;
    }

    .client-initials {
        width: 62px;
        height: 62px;

        font-size: 22px;
    }

    .stars {
        font-size: 16px;
    }

    .review-arrow {
        width: 38px;
        height: 38px;
    }

    .review-arrow span {
        font-size: 30px;
    }
}

/* =========================================================
   ONLINE CONSULTATION - SCREENSHOT MATCH
========================================================= */

.consultation-section {
    width: 100%;
    min-height: 910px;

    position: relative;
    overflow: hidden;

    padding: 78px 0 55px;

    color: #fff;

    background:
        linear-gradient(
            90deg,
            rgba(2, 7, 31, 0.88) 0%,
            rgba(2, 7, 31, 0.90) 45%,
            rgba(2, 7, 31, 0.82) 100%
        ),
        url("../images/consultation-bg.jpg");

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}


/* =========================================================
   MAIN CONTAINER
========================================================= */

.consultation-container {
    width: 100%;
    max-width: 1050px;

    margin: 0 auto;

    padding: 0 25px;

    box-sizing: border-box;
}


/* =========================================================
   TOP CONTENT
   LEFT HEADING + RIGHT DESCRIPTION
========================================================= */

.consultation-content {
    width: 100%;

    display: grid;

    grid-template-columns: 330px 1fr;

    align-items: start;

    column-gap: 65px;

    margin-bottom: 82px;
}


/* =========================================================
   HEADING
========================================================= */

.section-heading {
    display: flex;

    align-items: flex-start;

    gap: 13px;

    margin: 0;
}


.heading-line {
    display: block;

    width: 6px;
    height: 67px;

    flex-shrink: 0;

    margin-top: 3px;

    background: #e5aa00;
}


.section-heading h2 {
    margin: 0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 34px;

    line-height: 1.05;

    font-weight: 700;

    text-transform: uppercase;

    color: #fff;
}


.section-heading h2 strong {
    display: inline-block;

    margin-top: 3px;

    color: #e5aa00;

    font-weight: 700;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.consultation-content > p {
    margin: 5px 0 0;

    max-width: 620px;

    color: #e0e2e9;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 14px;

    line-height: 1.65;

    font-weight: 400;
}


/* =========================================================
   FORM WRAPPER
========================================================= */

.consultation-form-wrapper {
    width: 100%;

    max-width: 920px;

    margin: 0 auto;

    padding: 0;

    background:
        rgba(0, 10, 30, 0.40);

    box-sizing: border-box;
}


/* Hide unused heading/icon */

.consultation-icon,
.form-heading {
    display: none;
}


/* =========================================================
   FORM
========================================================= */

.consultation-form {
    width: 100%;

    margin: 0;

    padding: 0 15px 0;

    box-sizing: border-box;
}


/* =========================================================
   FORM ROW
========================================================= */

.form-row {
    display: grid;

    grid-template-columns: 1fr 1fr;

    column-gap: 27px;

    width: 100%;

    margin: 0 0 22px;
}


/* =========================================================
   FORM GROUP
========================================================= */

.form-group {
    width: 100%;

    margin: 0 0 22px;

    box-sizing: border-box;
}


.form-row .form-group {
    margin-bottom: 0;
}


.form-group.full-width {
    width: 100%;
}


/* =========================================================
   LABEL
========================================================= */

.form-group label {
    display: block;

    margin: 0 0 7px;

    color: #ffffff;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 15px;

    line-height: 1.3;

    font-weight: 400;
}


.form-group label span {
    color: #e5aa00;
}


/* =========================================================
   INPUT
========================================================= */

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;

    box-sizing: border-box;

    border: 1px solid #687083;

    border-radius: 5px;

    background:
        rgba(1, 10, 28, 0.72);

    color: #ffffff;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 14px;

    outline: none;

    transition:
        border-color .25s ease,
        background .25s ease,
        box-shadow .25s ease;
}


/* =========================================================
   INPUT + SELECT
========================================================= */

.form-group input,
.form-group select {
    height: 50px;

    padding: 0 14px;
}


/* =========================================================
   TEXTAREA
========================================================= */

.form-group textarea {
    height: 81px;

    min-height: 81px;

    padding: 13px 14px;

    resize: vertical;
}


/* =========================================================
   PLACEHOLDER
========================================================= */

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #aeb3bf;

    opacity: 1;
}


/* =========================================================
   SELECT
========================================================= */

.form-group select {
    appearance: none;

    -webkit-appearance: none;

    cursor: pointer;

    padding-right: 45px;

    background-image:
        linear-gradient(
            45deg,
            transparent 50%,
            #e5aa00 50%
        ),
        linear-gradient(
            135deg,
            #e5aa00 50%,
            transparent 50%
        );

    background-position:
        calc(100% - 19px) 21px,
        calc(100% - 13px) 21px;

    background-size:
        6px 6px,
        6px 6px;

    background-repeat: no-repeat;
}


.form-group select option {
    background: #030925;

    color: #fff;
}


/* =========================================================
   FOCUS
========================================================= */

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {

    border-color: #e5aa00;

    background:
        rgba(2, 12, 34, 0.92);

    box-shadow:
        0 0 0 1px
        rgba(229, 170, 0, 0.20);
}


/* =========================================================
   SUBMIT BUTTON
========================================================= */

.consultation-submit {
    width: 100%;

    height: 48px;

    margin: 0;

    padding: 0 20px;

    border: 0;

    border-radius: 5px;

    background:
        linear-gradient(
            90deg,
            #e9aa00,
            #f0b20b
        );

    color: #050b24;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 18px;

    cursor: pointer;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 17px;

    font-weight: 700;

    text-transform: uppercase;

    transition: all .3s ease;
}


.consultation-submit:hover {
    background:
        linear-gradient(
            90deg,
            #f3b711,
            #e5a400
        );

    transform: translateY(-1px);

    box-shadow:
        0 8px 25px
        rgba(0, 0, 0, .30);
}


/* =========================================================
   SUBMIT ICON
========================================================= */

.submit-icon {
    font-size: 25px;

    line-height: 1;

    color: #07102c;
}


/* =========================================================
   SECURITY
========================================================= */

.form-security {
    width: 100%;

    margin-top: 17px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    color: #e2e3e8;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 12px;

    line-height: 1.4;

    text-align: center;
}


.lock-icon {
    color: #e5aa00;

    font-size: 14px;
}


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

@media (max-width: 900px) {

    .consultation-section {
        min-height: auto;

        padding: 65px 0 55px;
    }

    .consultation-container {
        max-width: 760px;
    }

    .consultation-content {
        grid-template-columns: 1fr;

        row-gap: 25px;

        margin-bottom: 50px;
    }

    .consultation-content > p {
        max-width: 100%;

        margin-top: 0;
    }

    .consultation-form-wrapper {
        max-width: 700px;
    }
}


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

@media (max-width: 650px) {

    .consultation-section {
        padding: 55px 0 45px;
    }

    .consultation-container {
        padding: 0 16px;
    }

    .consultation-content {
        margin-bottom: 40px;
    }

    .section-heading {
        gap: 11px;
    }

    .heading-line {
        width: 5px;

        height: 57px;
    }

    .section-heading h2 {
        font-size: 29px;
    }

    .consultation-content > p {
        font-size: 13px;

        line-height: 1.7;
    }


    /* 1 COLUMN FORM */

    .form-row {
        grid-template-columns: 1fr;

        gap: 0;

        margin-bottom: 0;
    }

    .form-row .form-group {
        margin-bottom: 20px;
    }

    .form-group {
        margin-bottom: 20px;
    }


    .form-group label {
        font-size: 14px;
    }

    .form-group input,
    .form-group select {
        height: 48px;
    }

    .form-group textarea {
        height: 100px;
    }

    .consultation-submit {
        height: 48px;

        font-size: 14px;
    }

    .form-security {
        align-items: flex-start;

        font-size: 10px;
    }
}

/* =========================================
   BLOG SECTION
========================================= */

.blog-section {
    width: 100%;
    background: #eceefd;
    color: #050525;
    padding: 68px 0 84px;
    overflow: hidden;
}


/* =========================================
   CONTAINER
========================================= */

.blog-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}


/* =========================================
   HEADER
========================================= */

.blog-header {
    display: grid;
    grid-template-columns: 190px 1fr;
    align-items: start;
    gap: 18px;

    margin: 0 auto 70px;
}


/* =========================================
   TITLE
========================================= */

.blog-title-wrap {
    position: relative;

    display: flex;
    align-items: flex-start;

    padding-left: 27px;
}


.blog-title-bar {
    position: absolute;
    left: 0;
    top: 4px;

    width: 7px;
    height: 38px;

    background: #e5aa00;
}


.blog-header h2 {
    margin: 0;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 38px;
    line-height: 1.05;

    font-weight: 700;

    color: #050525;
}


.blog-header h2 span {
    display: block;
    color: #dca300;
}


/* =========================================
   HEADER DESCRIPTION
========================================= */

.blog-header p {
    margin: 4px 0 0;

    max-width: 920px;

    color: #5d6272;

    font-family:
        "Noto Sans",
        Arial,
        sans-serif;

    font-size: 14px;
    line-height: 1.75;
}


/* =========================================
   BLOG GRID
========================================= */

.blog-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 20px;

    align-items: stretch;
}


/* =========================================
   BLOG CARD
========================================= */

.blog-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-width: 0;
    min-height: 470px;

    overflow: hidden;

    background: #ffffff;

    border-radius: 14px;

    box-shadow:
        0 8px 28px rgba(30, 35, 70, 0.08);

    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease;
}


.blog-card:hover {
    transform: translateY(-8px);

    box-shadow:
        0 20px 45px rgba(30, 35, 70, 0.16);
}


/* =========================================
   BLOG IMAGE
========================================= */

.blog-image {
    position: relative;

    display: block;

    width: 100%;
    height: 198px;

    overflow: hidden;

    background: #fff;
}


.blog-image::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.02),
            rgba(0, 0, 0, 0.16)
        );

    pointer-events: none;
}


.blog-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    transition:
        transform 0.65s cubic-bezier(.2,.7,.2,1);
}


.blog-card:hover .blog-image img {
    transform: scale(1.07);
}


/* =========================================
   BLOG CONTENT
========================================= */

.blog-content {
    display: flex;
    flex-direction: column;

    flex: 1;

    padding: 19px 20px 15px;

    box-sizing: border-box;
}


/* =========================================
   META
========================================= */

.blog-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    margin-bottom: 13px;
}


.blog-category,
.blog-date {
    display: flex;
    align-items: center;

    gap: 7px;

    font-family:
        "Noto Sans",
        Arial,
        sans-serif;

    font-size: 11px;

    line-height: 1.3;

    white-space: nowrap;
}


.blog-category {
    color: #d89f00;
    font-weight: 700;
}


.blog-date {
    color: #687080;
}


.blog-category i,
.blog-date i {
    font-size: 12px;
}


/* =========================================
   BLOG TITLE
========================================= */

.blog-content h3 {
    margin: 0;

    min-height: 58px;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 21px;
    line-height: 1.28;

    font-weight: 700;
}


.blog-content h3 a {
    color: #08082a;

    text-decoration: none;

    transition:
        color 0.3s ease;
}


.blog-content h3 a:hover {
    color: #d49c00;
}


/* =========================================
   GOLD LINE
========================================= */

.blog-line {
    width: 48px;
    height: 2px;

    flex-shrink: 0;

    background: #dca300;

    margin: 14px 0 14px;
}


/* =========================================
   DESCRIPTION
========================================= */

.blog-content p {
    margin: 0 0 20px;

    color: #555b6c;

    font-family:
        "Noto Sans",
        Arial,
        sans-serif;

    font-size: 13px;
    line-height: 1.65;

}


/* =========================================
   READ MORE
========================================= */

.blog-read-more {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    gap: 12px;

    width: 100%;

    padding-top: 11px;

    border-top: 1px solid #e1e3e8;

    color: #08082a;

    text-decoration: none;

    font-family:
        "Noto Sans",
        Arial,
        sans-serif;

    font-size: 13px;
    font-weight: 700;

    transition:
        color 0.3s ease;
}


.blog-read-more strong {
    color: #dca300;

    font-size: 23px;
    font-weight: 400;

    line-height: 1;

    transition:
        transform 0.3s ease;
}


.blog-read-more:hover {
    color: #dca300;
}


.blog-read-more:hover strong {
    transform: translateX(7px);
}


/* =========================================
   REVEAL ANIMATION
========================================= */

.reveal {
    opacity: 0;

    transform:
        translateY(35px);

    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}


.reveal.active {
    opacity: 1;

    transform:
        translateY(0);
}


/* =========================================
   STAGGER ANIMATION
========================================= */

.blog-card:nth-child(1) {
    transition-delay: 0.05s;
}


.blog-card:nth-child(2) {
    transition-delay: 0.15s;
}


.blog-card:nth-child(3) {
    transition-delay: 0.25s;
}


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

@media (max-width: 1000px) {

    .blog-section {
        padding: 60px 0 70px;
    }


    .blog-header {
        grid-template-columns: 170px 1fr;

        gap: 20px;

        margin-bottom: 55px;
    }


    .blog-header h2 {
        font-size: 34px;
    }


    .blog-header p {
        font-size: 13px;
    }


    .blog-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 22px;
    }


    .blog-card {
        min-height: 470px;
    }


    .blog-card:nth-child(3) {
        grid-column: span 2;

        width: calc(50% - 11px);

        margin: 0 auto;
    }

}


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

@media (max-width: 700px) {

    .blog-section {
        padding: 55px 0 60px;
    }


    .blog-container {
        padding: 0 20px;
    }


    .blog-header {
        display: block;

        margin-bottom: 42px;
    }


    .blog-title-wrap {
        width: fit-content;

        margin-bottom: 22px;
    }


    .blog-title-bar {
        height: 34px;
    }


    .blog-header h2 {
        font-size: 31px;
    }


    .blog-header p {
        max-width: none;

        font-size: 13px;

        line-height: 1.7;
    }


    .blog-grid {
        grid-template-columns: 1fr;

        gap: 24px;
    }


    .blog-card {
        width: 100%;

        min-height: 0;

        margin: 0 !important;

        grid-column: auto !important;
    }


    .blog-card:nth-child(3) {
        width: 100%;
    }


    .blog-image {
        height: 205px;
    }


    .blog-content {
        padding: 19px 20px 16px;
    }


    .blog-content h3 {
        min-height: auto;

        font-size: 20px;
    }


    .blog-content p {
        font-size: 13px;
    }

}


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

@media (max-width: 480px) {

    .blog-section {
        padding: 48px 0 55px;
    }


    .blog-container {
        padding: 0 16px;
    }


    .blog-title-wrap {
        padding-left: 23px;
    }


    .blog-title-bar {
        width: 6px;
        height: 31px;
    }


    .blog-header h2 {
        font-size: 28px;
    }


    .blog-header p {
        font-size: 12.5px;
        line-height: 1.7;
    }


    .blog-image {
        height: 190px;
    }


    .blog-meta {
        align-items: flex-start;
    }


    .blog-category,
    .blog-date {
        font-size: 10px;
    }


    .blog-content h3 {
        font-size: 19px;
        line-height: 1.3;
    }


    .blog-content p {
        font-size: 12.5px;
    }


    .blog-read-more {
        font-size: 12.5px;
    }

}

/* =========================================
   CTA SECTION
========================================= */

.cta-section {
    width: 100%;

    background: #020622;

    color: #ffffff;

    padding: 52px 0 55px;

    border-top: 1px solid rgba(255, 255, 255, 0.18);
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);

    overflow: hidden;
}


/* =========================================
   CONTAINER
========================================= */

.cta-container {
    width: 100%;

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 20px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 60px;
}


/* =========================================
   CONTENT
========================================= */

.cta-content {
    flex: 1;

    min-width: 0;
}


/* =========================================
   TITLE
========================================= */

.cta-content h2 {
    margin: 0 0 20px;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 36px;

    line-height: 1.2;

    font-weight: 700;

    color: #ffffff;

    letter-spacing: 0.2px;
}


/* Gold title */

.cta-content h2 span {
    color: #dca300;
}


/* =========================================
   DESCRIPTION
========================================= */

.cta-content p {
    max-width: 800px;

    margin: 0;

    color: #e1e3eb;

    font-family:
        "Noto Sans",
        Arial,
        sans-serif;

    font-size: 14px;

    line-height: 1.75;

    font-weight: 400;
}


/* =========================================
   CTA ACTION
========================================= */

.cta-action {
    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;
}


/* =========================================
   BUTTON
========================================= */

.cta-button {
    min-width: 266px;

    min-height: 56px;

    padding: 0 25px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    background: #dca300;

    color: #ffffff;

    text-decoration: none;

    font-family:
        "Noto Sans",
        Arial,
        sans-serif;

    font-size: 14px;

    font-weight: 700;

    border: 1px solid #dca300;

    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


/* =========================================
   BUTTON HOVER
========================================= */

.cta-button:hover {
    background: #f0b900;

    border-color: #f0b900;

    color: #020622;

    transform: translateY(-2px);

    box-shadow:
        0 8px 25px rgba(220, 163, 0, 0.20);
}


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

@media (max-width: 1000px) {

    .cta-container {
        gap: 40px;
    }

    .cta-content h2 {
        font-size: 31px;
    }

    .cta-content p {
        font-size: 13px;
    }

    .cta-button {
        min-width: 235px;
    }

}


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

@media (max-width: 700px) {

    .cta-section {
        padding: 48px 0;
    }


    .cta-container {
        padding: 0 20px;

        flex-direction: column;

        align-items: flex-start;

        gap: 28px;
    }


    .cta-content {
        width: 100%;
    }


    .cta-content h2 {
        font-size: 28px;

        line-height: 1.25;

        margin-bottom: 17px;
    }


    .cta-content p {
        font-size: 13px;

        line-height: 1.7;
    }


    .cta-action {
        width: 100%;

        justify-content: flex-start;
    }


    .cta-button {
        width: 100%;

        min-width: 0;

        min-height: 54px;
    }

}


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

@media (max-width: 480px) {

    .cta-content h2 {
        font-size: 25px;
    }


    .cta-content p {
        font-size: 12.5px;
    }


    .cta-button {
        font-size: 13px;
    }

}

/* =========================================
   SEO LINKS SECTION
========================================= */

.seo-links-section {
    width: 100%;
    background: #eef0ff;
    padding: 72px 0 80px;
}

.seo-links-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 55px;
}


/* =========================================
   COLUMN
========================================= */

.seo-column {
    min-width: 0;
}


/* =========================================
   TITLE
========================================= */

.seo-column h3 {
    margin: 0 0 20px;

    color: #050a2d;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 27px;
    line-height: 1.2;

    font-weight: 700;

    text-transform: uppercase;
}


/* =========================================
   LIST
========================================= */

.seo-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}


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

.seo-column li {
    margin-bottom: 10px;
}

.seo-column a {
    display: inline-block;

    color: #606578;

    font-family:
        "Noto Sans",
        Arial,
        sans-serif;

    font-size: 14px;
    line-height: 1.6;

    text-decoration: none;

    transition:
        color 0.3s ease,
        transform 0.3s ease;
}


/* =========================================
   HOVER
========================================= */

.seo-column a:hover {
    color: #c99700;
    transform: translateX(4px);
}


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

@media (max-width: 1000px) {

    .seo-links-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 45px 50px;
    }

}


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

@media (max-width: 600px) {

    .seo-links-section {
        padding: 55px 0 60px;
    }

    .seo-links-container {
        grid-template-columns: 1fr;
        gap: 38px;

        padding: 0 25px;
    }

    .seo-column h3 {
        font-size: 24px;
        margin-bottom: 16px;
    }

    .seo-column li {
        margin-bottom: 9px;
    }

    .seo-column a {
        font-size: 13px;
    }

}

/* =========================================
   DISCLAIMER
========================================= */

.disclaimer-section {
    width: 100%;
    background: #ffffff;
    padding: 55px 0 60px;
    color: #606060;
}

.disclaimer-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}


/* =========================================
   TITLE
========================================= */

.disclaimer-container h2 {
    margin: 0 0 14px;

    color: #5d5d5d;

    font-family:
        "Noto Sans",
        Arial,
        sans-serif;

    font-size: 16px;
    line-height: 1.4;

    font-weight: 700;
}


/* =========================================
   TEXT
========================================= */

.disclaimer-container p {
    margin: 0 0 5px;

    color: #666666;

    font-family:
        "Noto Sans",
        Arial,
        sans-serif;

    font-size: 13px;
    line-height: 1.7;

    font-weight: 400;
}


/* =========================================
   LAST PARAGRAPH
========================================= */

.disclaimer-container p:last-child {
    margin-bottom: 0;
}


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

@media (max-width: 900px) {

    .disclaimer-section {
        padding: 45px 0 50px;
    }

    .disclaimer-container {
        padding: 0 30px;
    }

    .disclaimer-container p {
        font-size: 13px;
        line-height: 1.8;
    }
}


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

@media (max-width: 600px) {

    .disclaimer-section {
        padding: 40px 0 45px;
    }

    .disclaimer-container {
        padding: 0 20px;
    }

    .disclaimer-container h2 {
        font-size: 15px;
        margin-bottom: 12px;
    }

    .disclaimer-container p {
        font-size: 12px;
        line-height: 1.75;
        margin-bottom: 8px;
        text-align: left;
    }
}


/* =========================================
   SCROLL TO TOP BUTTON
========================================= */

.scroll-top-btn {
    position: fixed;
    right: 25px;
    bottom: 105px;

    width: 48px;
    height: 48px;

    border: 1px solid #dca300;
    border-radius: 50%;

    background: #020622;
    color: #dca300;

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

    font-size: 18px;

    cursor: pointer;

    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);

    z-index: 9999;

    transition:
        opacity 0.35s ease,
        visibility 0.35s ease,
        transform 0.35s ease,
        background 0.3s ease,
        color 0.3s ease;
}


/* SHOW */

.scroll-top-btn.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


/* HOVER */

.scroll-top-btn:hover {
    background: #dca300;
    color: #020622;

    transform: translateY(-4px);
}


/* ICON */

.scroll-top-btn i {
    line-height: 1;
}


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

@media (max-width: 600px) {

    .scroll-top-btn {
        width: 52px;
        height:52px;

        right: 18px;
        bottom: 75px;

        font-size: 16px;
    }

}


/* =========================================
   SCROLL REVEAL ANIMATION
========================================= */

.reveal {
    opacity: 0;
    transform: translateY(35px);

    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}


/* LEFT */

.reveal-left {
    opacity: 0;
    transform: translateX(-40px);

    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}

.reveal-left.active {
    opacity: 1;
    transform: translateX(0);
}


/* RIGHT */

.reveal-right {
    opacity: 0;
    transform: translateX(40px);

    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}

.reveal-right.active {
    opacity: 1;
    transform: translateX(0);
}


.service-card:nth-child(1) {
    transition-delay: 0.1s;
}

.service-card:nth-child(2) {
    transition-delay: 0.2s;
}

.service-card:nth-child(3) {
    transition-delay: 0.3s;
}

.service-card:nth-child(4) {
    transition-delay: 0.4s;
}
.service-card:nth-child(5) {
    transition-delay: 0.5s;
}
.service-card:nth-child(6) {
    transition-delay: 0.6s;
}

/* =========================================
   FLOATING CONSULTATION
========================================= */

.floating-consultation {
    position: fixed;

    right: 28px;
    bottom: 28px;

    z-index: 99999;

    font-family:
        "Noto Sans",
        Arial,
        sans-serif;
}


/* =========================================
   FLOATING BUTTON
========================================= */

.floating-consultation-btn {
    display: flex;

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

    gap: 10px;

    min-width: 150px;
    height: 52px;

    padding: 0 22px;

    border: 1px solid #e5aa00;

    border-radius: 4px;

    background: #dca300;

    color: #050525;

    font-family:
        "Noto Sans",
        Arial,
        sans-serif;

    font-size: 13px;
    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.25);

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease;
}


.floating-consultation-btn i {
    font-size: 16px;
}


.floating-consultation-btn:hover {
    background: #f0b900;

    transform: translateY(-3px);

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.32);
}


/* =========================================
   CONSULTATION PANEL
========================================= */

.consultation-panel {
    position: absolute;

    right: 0;
    bottom: 65px;

    width: 390px;

    max-height: calc(100vh - 110px);

    overflow-y: auto;

    padding: 25px;

       background: #FFF;
    border: 1px solid #020a22;

    border-radius: 6px;

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.50);

    opacity: 0;
    visibility: hidden;

    transform:
        translateY(20px)
        scale(0.97);

    transform-origin: bottom right;

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease,
        transform 0.3s ease;
}


/* OPEN */

.floating-consultation.open
.consultation-panel {

    opacity: 1;

    visibility: visible;

    transform:
        translateY(0)
        scale(1);
}


/* =========================================
   PANEL HEADER
========================================= */

.consultation-panel-header {

    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 15px;
}


.consultation-small-title {

    display: block;

    color: #020a22;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 18px;

    line-height: 1;
}


.consultation-panel-header h3 {

    margin: 4px 0 0;

    color: #020a22;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 27px;

    line-height: 1.1;

    font-weight: 700;

    text-transform: uppercase;
}


/* =========================================
   CLOSE BUTTON
========================================= */

.consultation-close {

    width: 34px;
    height: 34px;

    flex-shrink: 0;

    border: 1px solid #dca300;

    border-radius: 50%;

    background: #020a22;

    color: #FFF;

    display: flex;

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

    cursor: pointer;

    transition:
        background 0.3s ease,
        color 0.3s ease;
}


.consultation-close:hover {

    background: #dca300;

    color: #020622;
}


/* =========================================
   DIVIDER
========================================= */

.consultation-divider {

    width: 45px;
    height: 3px;

    background: #dca300;

    margin: 17px 0 20px;
}


/* =========================================
   FORM GROUP
========================================= */

.floating-form-group {

    margin-bottom: 15px;
}


.floating-form-group label {

    display: block;

    margin-bottom: 6px;

    color: #020a22;

    font-family:
        "Noto Sans",
        Arial,
        sans-serif;

    font-size: 11px;

    font-weight: 600;
}


.floating-form-group label span {

    color: #e5aa00;
}


/* =========================================
   INPUT
========================================= */

.floating-input {

    position: relative;
}


.floating-input i {

    position: absolute;

    left: 13px;
    top: 50%;

    transform: translateY(-50%);

    color: #dca300;

    font-size: 13px;

    pointer-events: none;
}


.floating-input input,
.floating-input select,
.floating-input textarea {

    width: 100%;

    border: 1px solid #c3c3c3;

    border-radius: 4px;

    outline: none;

       background: rgb(245 245 245 / 75%);

    color: #020a22;

    font-family:
        "Noto Sans",
        Arial,
        sans-serif;

    font-size: 12px;

    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}


.floating-input input,
.floating-input select {

    height: 43px;

    padding:
        0 13px 0 38px;
}


.floating-input textarea {

    min-height: 85px;

    resize: vertical;

    padding:
        12px 13px 12px 38px;
}


.floating-input textarea + i,
.textarea-input i {

    top: 17px;

    transform: none;
}


.floating-input input::placeholder,
.floating-input textarea::placeholder {

    color: #9ca4b5;
}


.floating-input select {

    cursor: pointer;

    appearance: auto;
}


.floating-input select option {

    background: #020622;

    color: #ffffff;
}


/* FOCUS */

.floating-input input:focus,
.floating-input select:focus,
.floating-input textarea:focus {

    border-color: #dca300;

    box-shadow:
        0 0 0 2px rgba(220, 163, 0, 0.10);
}


/* =========================================
   SUBMIT
========================================= */

.floating-submit-btn {

    width: 100%;

    height: 45px;

    border: 0;

    border-radius: 4px;

    background: #e5aa00;

    color: #020622;

    display: flex;

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

    gap: 10px;

    cursor: pointer;

    font-family:
        "Noto Sans",
        Arial,
        sans-serif;

    font-size: 12px;

    font-weight: 800;

    text-transform: uppercase;

    transition:
        background 0.3s ease,
        transform 0.3s ease;
}


.floating-submit-btn:hover {

    background: #f3bd1a;

    transform: translateY(-2px);
}


.floating-submit-btn i {

    font-size: 13px;
}


/* =========================================
   SECURITY
========================================= */

.floating-security {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    margin-top: 13px;

    color: #020a22;

    font-size: 9px;

    line-height: 1.4;

    text-align: center;
}


.floating-security i {

    color: #dca300;

    font-size: 10px;
}


/* =========================================
   SCROLLBAR
========================================= */

.consultation-panel::-webkit-scrollbar {

    width: 5px;
}


.consultation-panel::-webkit-scrollbar-track {

    background: #020622;
}


.consultation-panel::-webkit-scrollbar-thumb {

    background: #dca300;

    border-radius: 10px;
}


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

@media (max-width: 700px) {

    .floating-consultation {

        right: 16px;

        bottom: 16px;
    }


    .floating-consultation-btn {

        min-width: auto;

        width: 52px;
        height: 52px;

        padding: 0;

        border-radius: 50%;
    }


    .floating-consultation-btn span {

        display: none;
    }


    .floating-consultation-btn i {

        font-size: 17px;
    }


    .consultation-panel {

        position: fixed;

        left: 15px;
        right: 15px;

        bottom: 78px;

        width: auto;

        max-height: calc(100vh - 100px);

        padding: 22px;
    }

}


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

@media (max-width: 480px) {

    .floating-consultation {

        right: 12px;

        bottom: 12px;
    }


    .consultation-panel {

        left: 10px;
        right: 10px;

        bottom: 72px;

        padding: 19px;
    }


    .consultation-panel-header h3 {

        font-size: 23px;
    }


    .floating-form-group {

        margin-bottom: 12px;
    }


    .floating-input input,
    .floating-input select {

        height: 41px;
    }

}


/* =========================================
   INNER HERO
========================================= */

.inner-hero {
    position: relative;

    min-height: 380px;

    display: flex;
    align-items: center;

    background:
        linear-gradient(
            90deg,
            rgba(2, 6, 34, .97),
            rgba(2, 6, 34, .65)
        ),
        url("../images/inner-banner.jpg")
        center / cover no-repeat;

    color: #fff;
}


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

    background:
        linear-gradient(
            135deg,
            rgba(2, 6, 34, .95),
            transparent
        );
}


.inner-hero-container {
    position: relative;

    width: 100%;
    max-width: 1200px;

    margin: auto;

    padding: 70px 25px;
}


.inner-breadcrumb {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 28px;

    font-family:
        "Noto Sans",
        Arial,
        sans-serif;

    font-size: 12px;

    color: #c8ccd8;
}


.inner-breadcrumb a {
    color: #dca300;

    text-decoration: none;
}


.inner-hero-content {
    max-width: 720px;
}


.inner-label {

    display: block;

    margin-bottom: 12px;

    color: #dca300;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2px;
}


.inner-hero h1 {

    margin: 0;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 58px;

    line-height: 1.05;

    font-weight: 700;
}


.inner-hero h1 strong {
    color: #dca300;
}


.inner-hero-line {

    width: 52px;
    height: 4px;

    background: #dca300;

    margin: 22px 0;
}


.inner-hero p {

    max-width: 650px;

    margin: 0;

    color: #dfe2eb;

    font-family:
        "Noto Sans",
        Arial,
        sans-serif;

    font-size: 15px;

    line-height: 1.75;
}


/* =========================================
   CONTENT SECTION
========================================= */

.inner-content-section {

    background: #040725;

    padding: 85px 0;
}


.inner-content-container {

    width: 100%;

    max-width: 1200px;

    margin: auto;

    padding: 0 25px;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        350px;

    gap: 65px;

    align-items: start;
}


/* =========================================
   MAIN CONTENT
========================================= */

.inner-main-content {

    color: #050525;
}


.section-eyebrow {

    color: #dca300;

    font-family:
        "Noto Sans",
        Arial,
        sans-serif;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1.5px;
}


.inner-main-content h2 {

    max-width: 700px;

    margin: 10px 0 0;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 38px;

    line-height: 1.2;

    color: #fff;
}


.gold-line {

    width: 48px;
    height: 4px;

    background: #dca300;

    margin: 20px 0 25px;
}


.inner-main-content > p {

    margin: 0 0 18px;

    color: #e0e2ec;

    font-family:
        "Noto Sans",
        Arial,
        sans-serif;

    font-size: 14px;

    line-height: 1.8;
}

.inner-main-content > p strong {color: #dca300;}


.inner-main-content h3 {

    margin: 45px 0 22px;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 28px;

    color: #050525;
}


/* =========================================
   SERVICE LIST
========================================= */

 .inner-content-section .service-list {

    display: grid;

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

    gap: 18px;
}


.service-item {

    display: flex;

    gap: 16px;

    padding: 22px;

    background: #ffffff;

    border: 1px solid #e1e3ee;

    border-radius: 6px;

    box-shadow:
        0 8px 25px rgba(20, 25, 60, .06);

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


.service-item:hover {

    transform: translateY(-5px);

    box-shadow:
        0 15px 35px rgba(20, 25, 60, .11);
}


.service-item > i {

    flex-shrink: 0;

    width: 42px;
    height: 42px;

    display: flex;

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

    background: #050525;

    color: #dca300;

    border-radius: 50%;
}


.service-item h4 {

    margin: 0 0 6px;

    color: #050525;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 18px;
}


.service-item p {

    margin: 0;

    color: #6a7080;

    font-size: 12px;

    line-height: 1.6;
}


/* =========================================
   SIDEBAR
========================================= */

.inner-sidebar {

    position: sticky;

    top: 100px;
}


/* =========================================
   CONSULTATION CARD
========================================= */

.consultation-card {

    padding: 32px 28px;

    background:
        linear-gradient(
            145deg,
            #07102c,
            #020622
        );

    border: 1px solid #dca300;

    color: #fff;

    text-align: center;

    box-shadow:
        0 18px 45px rgba(0, 0, 0, .16);
}


.consultation-icon {

    width: 58px;
    height: 58px;

    margin: 0 auto 20px;

    border: 1px solid #dca300;

    border-radius: 50%;

    display: flex;

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

    color: #dca300;

    font-size: 21px;
}


.consultation-card > span {

    color: #dca300;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.5px;
}


.consultation-card h3 {

    margin: 9px 0 13px;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 26px;
}


.consultation-card p {

    margin: 0 0 22px;

    color: #c9cedb;

    font-size: 12px;

    line-height: 1.7;
}


.consultation-card-btn {

    display: flex;

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

    gap: 10px;

    min-height: 46px;

    background: #dca300;

    color: #050525;

    text-decoration: none;

    font-size: 12px;

    font-weight: 700;

    transition:
        background .3s ease;
}


.consultation-card-btn:hover {

    background: #f0b900;
}


/* =========================================
   RELATED SERVICES
========================================= */

.related-services {

    margin-top: 25px;



    border: 1px solid rgba(173, 180, 205, 0.45);
}


.related-services h3 {

    margin: 0;

    padding: 20px;

    background: #050525;

    color: #dca300;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 21px;  border-bottom:1px solid rgba(173, 180, 205, 0.45);
}


.related-services a {

    display: flex;

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

    padding: 15px 18px;

    border-bottom:1px solid rgba(173, 180, 205, 0.45);

    color: #fff;

    text-decoration: none;

    font-size: 14px;

    transition:
        color .25s ease,
        padding .25s ease;
}


.related-services a:last-child {
    border-bottom: 0;
}


.related-services a:hover {

    color: #dca300;

    padding-left: 23px;
}


.related-services a i {

    color: #dca300;
}


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

@media (max-width: 900px) {

    .inner-content-container {

        grid-template-columns: 1fr;

        gap: 45px;
    }


    .inner-sidebar {

        position: static;

        display: grid;

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

        gap: 20px;
    }


    .related-services {

        margin-top: 0;
    }

}


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

@media (max-width: 700px) {

    .inner-hero {

        min-height: 330px;
    }


    .inner-hero-container {

        padding: 55px 20px;
    }


    .inner-hero h1 {

        font-size: 40px;
    }


    .inner-hero p {

        font-size: 13px;
    }


    .inner-content-section {

        padding: 60px 0;
    }


    .inner-content-container {

        padding: 0 20px;
    }


    .inner-main-content h2 {

        font-size: 30px;
    }


   .inner-content-section .service-list {

        grid-template-columns: 1fr;
    }


    .inner-sidebar {

        grid-template-columns: 1fr;
    }

}


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

@media (max-width: 480px) {

    .inner-hero h1 {

        font-size: 34px;
    }


    .inner-main-content h2 {

        font-size: 27px;
    }


    .service-item {

        padding: 18px;
    }

}

.form-message {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    margin-bottom: 20px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.5;
}

.form-message.success {
    background: #eaf8f0;
    border: 1px solid #b7e4c7;
    color: #176b3a;
}

.form-message.error {
    background: #fff1f1;
    border: 1px solid #f0b8b8;
    color: #a12626;
}

.form-message i {
    font-size: 18px;
    flex-shrink: 0;
}