body{
    margin:0;
}


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

.rg-topbar {
    width: 100%;
    background: #06275c;
    color: #ffffff;
}

.rg-topbar-wrapper {
    min-height: 32px;

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

.rg-topbar-left {
    display: flex;
    align-items: center;
    gap: 18px;
    padding-left:20px;
}

.rg-topbar-left a {
    display: flex;
    align-items: center;
    gap: 7px;

    color: #ffffff;

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

    text-decoration: none;

    transition: 0.3s ease;
}

.rg-topbar-left a i {
    color: #f5b400;
    font-size: 14px;
}

.rg-topbar-left a:hover {
    color: #f5b400;
}


/* SOCIAL ICONS */

.rg-topbar-right {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-right:20px;
}

.rg-topbar-right a {
    display: flex;
    align-items: center;
    justify-content: center;

    color: #ffffff;

    font-size: 12px;

    text-decoration: none;

    transition: 0.3s ease;
}

.rg-topbar-right a:hover {
    color: #f5b400;
}


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

@media (max-width: 767px) {

    .rg-topbar-wrapper {
        min-height: 38px;

        justify-content: center;
    }

    .rg-topbar-left {
        gap: 12px;
    }

    .rg-topbar-left a {
        font-size: 10px;
    }

    .rg-topbar-left a i {
        font-size: 10px;
    }

    .rg-topbar-right {
        display: none;
    }

    .rg-topbar-left a:nth-child(2) {
        display: none;
    }

}


/* =========================================
   RG MAIN HEADER
========================================= */

.rg-main-header {
    width: 100%;
    background: #ffffff;
    position: relative;
    z-index: 9999;

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


/* STICKY HEADER */

.rg-main-header.sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;

    animation: rgHeaderSlide 0.3s ease;
}

@keyframes rgHeaderSlide {

    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }

}


/* HEADER WRAPPER */

.rg-header-wrapper {
    min-height: 82px;

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


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

.rg-logo {
    flex-shrink: 0;
    margin-left:20px;
}

.rg-logo a {
    display: block;
}

.rg-logo img {
    width: 289px;
    height: auto;

    display: block;
}


/* =========================================
   DESKTOP MENU
========================================= */

.rg-desktop-menu {
    margin-left: auto;
    margin-right: 35px;
}

.rg-desktop-menu > ul {
    margin: 0;
    padding: 0;

    display: flex;
    align-items: center;

    list-style: none;

    gap: 34px;
}

.rg-desktop-menu ul li {
    position: relative;
}

.rg-desktop-menu ul li a {
    display: flex;
    align-items: center;
    gap: 7px;

    padding: 30px 0;

    color: #061d4d;

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

    

    text-decoration: none;

    transition: all 0.3s ease;
}


/* HOVER */

.rg-desktop-menu ul li a:hover {
    color: #f5b400;
}


/* ACTIVE */

.rg-desktop-menu > ul > li > a.active {
    color: #f5b400;
}


/* ACTIVE UNDERLINE */

.rg-desktop-menu > ul > li > a.active::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 18px;

    width: 100%;
    height: 2px;

    background: #f5b400;
}


/* DROPDOWN ICON */

.rg-desktop-menu .rg-has-dropdown > a i {
    font-size: 9px;

    transition: transform 0.3s ease;
}

.rg-desktop-menu .rg-has-dropdown:hover > a i {
    transform: rotate(180deg);
}


/* =========================================
   DESKTOP SUBMENU
========================================= */

.rg-submenu {
    position: absolute;

    top: 100%;
    left: 0;

    width: 245px;

    margin: 0;
    padding: 12px 0;

    background: #ffffff;

    list-style: none;

    border-top: 3px solid #f5b400;

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);

    opacity: 0;
    visibility: hidden;

    transform: translateY(15px);

    transition: all 0.3s ease;
}


/* SHOW SUBMENU */

.rg-has-dropdown:hover .rg-submenu {
    opacity: 1;
    visibility: visible;

    transform: translateY(0);
}


/* SUBMENU LINK */

.rg-submenu li a {
    display: block !important;

    padding: 11px 18px !important;

    color: #061d4d !important;

    font-size: 12px !important;

    text-transform: none !important;

    font-weight: 600 !important;
}

.rg-submenu li a:hover {
    background: #f5b400;

    color: #061d4d !important;
}


/* =========================================
   GET A QUOTE BUTTON
========================================= */

.rg-header-button a {
    display: inline-flex;

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

    gap: 8px;

    min-width: 140px;

    padding: 13px 18px;

    background: #f5b400;

    color: #061d4d;

    font-size: 12px;
    font-weight: 800;

    text-transform: uppercase;

    text-decoration: none;

    transition: all 0.3s ease;
}

.rg-header-button a:hover {
    background: #061d4d;

    color: #ffffff;
}

.rg-header-button a i {
    transition: transform 0.3s ease;
}

.rg-header-button a:hover i {
    transform: translateX(4px);
}


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

.rg-menu-toggle {
    display: none;

    width: 44px;
    height: 44px;

    padding: 0;

    border: 0;

    background: #061d4d;

    cursor: pointer;

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

    flex-direction: column;

    gap: 5px;
}

.rg-menu-toggle span {
    display: block;

    width: 22px;
    height: 2px;

    background: #ffffff;

    transition: all 0.3s ease;
}


/* HAMBURGER ACTIVE */

.rg-menu-toggle.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

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

.rg-menu-toggle.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}


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

.rg-mobile-menu {
    display: none;

    position: absolute;

    top: 100%;
    left: 0;

    width: 100%;

    background: #ffffff;

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);

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

    overflow-y: auto;
}

.rg-mobile-menu-inner {
    padding: 15px 20px 25px;
}

.rg-mobile-menu ul {
    margin: 0;
    padding: 0;

    list-style: none;
}

.rg-mobile-menu > .rg-mobile-menu-inner > ul > li {
    border-bottom: 1px solid #eeeeee;
}

.rg-mobile-menu ul li a {
    display: block;

    padding: 14px 5px;

    color: #061d4d;

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

    text-decoration: none;

    text-transform: uppercase;
}

.rg-mobile-menu ul li a:hover {
    color: #f5b400;
}


/* MOBILE ACTIVE */

.rg-mobile-menu ul li a.active {
    color: #f5b400;
}


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

.rg-mobile-service-title {
    display: flex;

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

.rg-mobile-service-title > a {
    flex: 1;
}

.rg-mobile-dropdown-btn {
    width: 45px;
    height: 45px;

    border: 0;

    background: transparent;

    color: #061d4d;

    cursor: pointer;
}

.rg-mobile-dropdown-btn i {
    font-size: 11px;

    transition: transform 0.3s ease;
}


/* MOBILE SUBMENU */

.rg-mobile-submenu {
    display: none;

    padding-left: 15px !important;

    background: #f8f9fb;
}

.rg-mobile-submenu li {
    border-bottom: 1px solid #eeeeee;
}

.rg-mobile-submenu li a {
    padding: 11px 10px !important;

    font-size: 12px !important;

    text-transform: none !important;
}


/* OPEN */

.rg-mobile-dropdown.open .rg-mobile-submenu {
    display: block;
}

.rg-mobile-dropdown.open
.rg-mobile-dropdown-btn i {
    transform: rotate(180deg);
}


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

.rg-mobile-quote {
    margin-top: 20px;
}

.rg-mobile-quote a {
    display: flex !important;

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

    gap: 10px;

    padding: 14px !important;

    background: #f5b400;

    color: #061d4d !important;

    text-align: center;

    text-transform: uppercase !important;
}


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

@media (max-width: 991px) {

    .rg-header-wrapper {
        min-height: 75px;
    }

    .rg-logo img {
        width: 180px;
    }

    .rg-desktop-menu {
        display: none;
    }

    .rg-header-button {
        display: none;
    }

    .rg-menu-toggle {
        display: flex;
    }

}


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

@media (max-width: 767px) {

    .rg-header-wrapper {
        min-height: 68px;
    }

    .rg-logo img {
        width: 155px;
    }

    .rg-menu-toggle {
        width: 42px;
        height: 42px;
        margin-right:20px;
    }

}



/* =========================================
   RG HERO SLIDER
========================================= */

.rg-hero-section {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.rg-hero-slider {
    width: 100%;
    height: auto;
}

.rg-hero-slide {
    position: relative;

    width: 100%;
    height: 500px;
    min-height: 500px;

    display: flex;
    align-items: center;

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


/* =========================================
   HERO OVERLAY
========================================= */

.rg-hero-overlay {
    position: absolute;

    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    z-index: 1;

    background: linear-gradient(
        90deg,
        rgba(4, 30, 70, 0.92) 0%,
        rgba(4, 30, 70, 0.80) 30%,
        rgba(4, 30, 70, 0.40) 60%,
        rgba(4, 30, 70, 0.08) 100%
    );
}


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

.rg-hero-section .rg-hero-container {
    position: relative;

    z-index: 2;

    width: 100%;

    margin-left: auto;
    margin-right: auto;

    padding-left: 15px;
    padding-right: 15px;
}


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

.rg-hero-content {
    position: relative;

    z-index: 3;

    padding-left: 15px;
}


.rg-hero-subtitle {
    display: block;

    margin-bottom: 12px;

    color: #f5b400;

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

    line-height: 1.4;

    text-transform: uppercase;

    letter-spacing: 0.2px;
}


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

.rg-hero-content h1 {
    margin: 0 0 15px;

    color: #ffffff;

    font-size: 48px;
    font-weight: 800;

    line-height: 1.12;

    text-transform: uppercase;
}


.rg-hero-content h1 span {
    color: #f5b400;
}


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

.rg-hero-content p {
    max-width: 480px;

    margin: 0 0 25px;

    color: #ffffff;

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

    line-height: 1.65;
}


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

.rg-hero-btn {
    display: inline-flex;

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

    gap: 12px;

    padding: 14px 20px;

    background: #f5b400;

    color: #061d4d;

    font-size: 12px;
    font-weight: 800;

    line-height: 1;

    text-decoration: none;

    text-transform: uppercase;

    transition: all 0.3s ease;
}


.rg-hero-btn i {
    font-size: 12px;

    transition: transform 0.3s ease;
}


.rg-hero-btn:hover {
    background: #ffffff;

    color: #061d4d;
}


.rg-hero-btn:hover i {
    transform: translateX(5px);
}


/* =========================================
   PAGINATION
========================================= */

.rg-hero-pagination {
    position: absolute;

    bottom: 15px !important;

    left: 0;

    z-index: 10;
}


.rg-hero-pagination
.swiper-pagination-bullet {
    width: 9px;
    height: 9px;

    margin: 0 5px !important;

    background: #ffffff;

    opacity: 1;
}


.rg-hero-pagination
.swiper-pagination-bullet-active {
    width: 28px;

    border-radius: 20px;

    background: #f5b400;
}


/* =========================================
   LARGE DESKTOP
   1200px AND ABOVE
========================================= */

@media (min-width: 1200px) {

    .rg-hero-section .rg-hero-container {
        max-width: 1140px;

        padding-left: 15px;
        padding-right: 15px;
    }

    .rg-hero-content {
        padding-left: 15px;
    }

}


/* =========================================
   DESKTOP
   992px - 1199px
========================================= */

@media (min-width: 992px) and (max-width: 1199px) {

    .rg-hero-slide {
        height: 480px;
        min-height: 480px;
    }

    .rg-hero-section .rg-hero-container {
        max-width: 960px;

        padding-left: 15px;
        padding-right: 15px;
    }

    .rg-hero-content {
        padding-left: 10px;
    }

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

    .rg-hero-subtitle {
        font-size: 14px;
    }

    .rg-hero-content p {
        max-width: 440px;

        font-size: 14px;
    }

}


/* =========================================
   TABLET
   768px - 991px
========================================= */

@media (min-width: 768px) and (max-width: 991px) {

    .rg-hero-slide {
        height: 450px;
        min-height: 450px;

        background-position: center center;
    }


    .rg-hero-section .rg-hero-container {
        max-width: 720px;

        padding-left: 15px;
        padding-right: 15px;
    }


    .rg-hero-content {
        padding-left: 10px;
    }


    .rg-hero-content h1 {
        font-size: 38px;

        line-height: 1.15;
    }


    .rg-hero-subtitle {
        font-size: 13px;
    }


    .rg-hero-content p {
        max-width: 400px;

        font-size: 14px;

        line-height: 1.6;
    }


    .rg-hero-btn {
        padding: 13px 18px;

        font-size: 11px;
    }


    .rg-hero-overlay {
        background: linear-gradient(
            90deg,
            rgba(4, 30, 70, 0.92) 0%,
            rgba(4, 30, 70, 0.72) 55%,
            rgba(4, 30, 70, 0.25) 100%
        );
    }

}


/* =========================================
   MOBILE
   BELOW 767px
========================================= */

@media (max-width: 767px) {

    .rg-hero-slide {
        height: 560px;
        min-height: 560px;

        align-items: center;

        background-position: center center;
    }


    .rg-hero-section .rg-hero-container {
        width: 100%;
        max-width: 100%;

        padding-left: 20px;
        padding-right: 20px;
    }


    .rg-hero-content {
        padding-left: 0;
        padding-right: 0;
    }


    .rg-hero-subtitle {
        margin-bottom: 10px;

        font-size: 12px;

        line-height: 1.5;
    }


    .rg-hero-content h1 {
        margin-bottom: 15px;

        font-size: 32px;

        line-height: 1.15;
    }


    .rg-hero-content p {
        max-width: 100%;

        margin-bottom: 22px;

        font-size: 14px;

        line-height: 1.6;
    }


    .rg-hero-btn {
        padding: 13px 17px;

        font-size: 11px;
    }


    .rg-hero-overlay {
        background: rgba(4, 30, 70, 0.72);
    }


    .rg-hero-pagination {
        bottom: 15px !important;
    }

}


/* =========================================
   SMALL MOBILE
   BELOW 480px
========================================= */

@media (max-width: 480px) {

    .rg-hero-slide {
        height: 520px;
        min-height: 520px;

        background-position: 60% center;
    }


    .rg-hero-section .rg-hero-container {
        padding-left: 18px;
        padding-right: 18px;
    }


    .rg-hero-subtitle {
        font-size: 10px;
    }


    .rg-hero-content h1 {
        font-size: 27px;

        line-height: 1.16;
    }


    .rg-hero-content p {
        font-size: 13px;

        line-height: 1.55;
    }


    .rg-hero-btn {
        padding: 12px 15px;

        font-size: 10px;

        gap: 8px;
    }


    .rg-hero-pagination
    .swiper-pagination-bullet {
        width: 8px;
        height: 8px;
    }


    .rg-hero-pagination
    .swiper-pagination-bullet-active {
        width: 24px;
    }

}



/* =========================================
   RG STRENGTH SECTION
========================================= */

.rg-strength-section {
    width: 100%;

    background: #06275c;

    position: relative;
}


/* CONTAINER */

.rg-strength-container {
    width: 100%;

    max-width: 1140px;

    margin: 0 auto;

    padding: 0 15px;
}


/* GRID */

.rg-strength-grid {
    display: grid;

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

    width: 100%;
}


/* =========================================
   STRENGTH ITEM
========================================= */

.rg-strength-item {
    min-height: 105px;

    padding: 18px 15px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    border-right: 1px solid rgba(255, 255, 255, 0.25);

    transition: all 0.3s ease;
}


/* REMOVE BORDER FROM LAST */

.rg-strength-item:last-child {
    border-right: none;
}


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

.rg-strength-icon {
    width: 42px;
    height: 42px;

    margin-bottom: 25px;

    display: flex;

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

    color: #f5b400;

    font-size: 40px;
}


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

.rg-strength-content h3 {
    margin: 0 0 4px;

    color: #ffffff;

    font-size: 16px;

    font-weight: 800;

    line-height: 1.3;

    text-transform: uppercase;
}


.rg-strength-content p {
    max-width: 170px;

    margin: 0 auto;

    color: rgba(255, 255, 255, 0.85);

    font-size: 16px;

    font-weight: 400;

    line-height: 1.45;
}


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

.rg-strength-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.rg-strength-item:hover .rg-strength-icon {
    transform: translateY(-3px);

    transition: transform 0.3s ease;
}


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

@media (min-width: 1200px) {

    .rg-strength-container {
        max-width: 1140px;

        padding-left: 15px;
        padding-right: 15px;
    }

    .rg-strength-item {
        min-height: 110px;

        padding: 18px 12px;
    }

}


/* =========================================
   TABLET
   768px - 991px
========================================= */

@media (min-width: 768px) and (max-width: 991px) {

    .rg-strength-container {
        max-width: 720px;

        padding-left: 15px;
        padding-right: 15px;
    }


    .rg-strength-grid {
        grid-template-columns: repeat(3, 1fr);
    }


    .rg-strength-item {
        min-height: 120px;

        padding: 18px 10px;

        border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    }


    /* Remove right border from every 3rd item */

    .rg-strength-item:nth-child(3n) {
        border-right: none;
    }


    .rg-strength-icon {
        font-size: 27px;

        width: 40px;
        height: 40px;
    }


    .rg-strength-content h3 {
        font-size: 11px;
    }


    .rg-strength-content p {
        max-width: 180px;

        font-size: 10px;
    }

}


/* =========================================
   MOBILE
   BELOW 767px
========================================= */

@media (max-width: 767px) {

    .rg-strength-container {
        width: 100%;

        max-width: 100%;

        padding: 0;
    }


    .rg-strength-grid {
        grid-template-columns: repeat(2, 1fr);
    }


    .rg-strength-item {
        min-height: 125px;

        padding: 18px 10px;

        border-right: 1px solid rgba(255, 255, 255, 0.25);

        border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    }


    /* Last item spans full width */

    .rg-strength-item:last-child {
        grid-column: 1 / -1;

        border-right: none;
    }


    /* Second item in each row */

    .rg-strength-item:nth-child(2n) {
        border-right: none;
    }


    .rg-strength-icon {
        width: 40px;
        height: 40px;

        margin-bottom: 6px;

        font-size: 26px;
    }


    .rg-strength-content h3 {
        font-size: 11px;

        line-height: 1.3;
    }


    .rg-strength-content p {
        max-width: 150px;

        font-size: 10px;

        line-height: 1.45;
    }

}


/* =========================================
   SMALL MOBILE
   BELOW 480px
========================================= */

@media (max-width: 480px) {

    .rg-strength-item {
        min-height: 120px;

        padding: 15px 8px;
    }


    .rg-strength-icon {
        font-size: 24px;
    }


    .rg-strength-content h3 {
        font-size: 14px;
    }


    .rg-strength-content p {
        font-size: 14px;

        max-width: 135px;
    }

}


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

.rg-about-section {
    width: 100%;
    padding: 60px 0;
    background: #ffffff;
    overflow: hidden;
}

/* REMOVE BOOTSTRAP CONTAINER LIMIT */

.rg-about-section .container {
    width: 100%;
    max-width: 100% !important;

    margin: 0;
    padding: 0;
}


/* WRAPPER */

.rg-about-wrapper {
    display: grid;

    grid-template-columns: 0.95fr 1.05fr;

    align-items: center;

    gap: 70px;
    padding-left:4%;
}


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

.rg-about-image {
    position: relative;

    padding-right: 25px;
}


.rg-about-image-main {
    width: 100%;

    height: 470px;

    overflow: hidden;
}


.rg-about-image-main img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform 0.5s ease;
}


.rg-about-image:hover img {
    transform: scale(1.04);
}


/* EXPERIENCE BOX */

.rg-about-experience {
    position: absolute;

    right: 0;
    bottom: 35px;

    width: 170px;
    min-height: 105px;

    padding: 18px;

    background: #f5b400;

    display: flex;

    align-items: center;

    gap: 12px;

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}


.rg-about-experience strong {
    color: #06275c;

    font-size: 42px;

    line-height: 1;

    font-weight: 800;
}


.rg-about-experience span {
    color: #06275c;

    font-size: 12px;

    line-height: 1.4;

    font-weight: 700;

    text-transform: uppercase;
}


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

.rg-about-content {
    padding-right: 20px;
}


.rg-section-subtitle {
    display: inline-block;

    margin-bottom: 10px;

    color: #f5b400;

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 1px;

    text-transform: uppercase;
}


.rg-about-content h2 {
    max-width: 600px;

    margin: 0 0 18px;

    color: #06275c;

    font-size: 42px;

    line-height: 1.15;

    font-weight: 800;
}


.rg-about-content h2 span {
    color: #f5b400;
}


/* LINE */

.rg-about-line {
    width: 55px;

    height: 3px;

    margin-bottom: 20px;

    background: #f5b400;
}


/* PARAGRAPHS */

.rg-about-content p {
    margin-bottom: 15px;

    color: #666666;

    font-size: 18px;

    line-height: 1.75;
}


.rg-about-intro {
    font-weight: 500;
}


/* =========================================
   FEATURES
========================================= */

.rg-about-features {
    display: grid;

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

    gap: 15px 25px;

    margin: 25px 0;
}


.rg-about-feature {
    display: flex;

    align-items: flex-start;

    gap: 10px;
}


.rg-about-feature-icon {
    flex-shrink: 0;

    color: #f5b400;

    font-size: 17px;

    margin-top: 2px;
}


.rg-about-feature h4 {
    margin: 0 0 4px;

    color: #06275c;

    font-size: 16px;

    font-weight: 800;

    text-transform: uppercase;
}


.rg-about-feature p {
    margin: 0;

    font-size: 17px;

    line-height: 1.5;
}


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

.rg-about-btn {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    padding: 14px 20px;

    background: #06275c;

    color: #ffffff;

    font-size: 11px;

    font-weight: 800;

    text-decoration: none;

    text-transform: uppercase;

    transition: all 0.3s ease;
}


.rg-about-btn i {
    transition: transform 0.3s ease;
}


.rg-about-btn:hover {
    background: #f5b400;

    color: #06275c;
}


.rg-about-btn:hover i {
    transform: translateX(5px);
}


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

@media (min-width: 1200px) {

    .rg-about-section .container {
        max-width: 1140px;
    }

}


/* =========================================
   TABLET
   768px - 991px
========================================= */

@media (min-width: 768px) and (max-width: 991px) {

    .rg-about-section {
        padding: 70px 0;
    }


    .rg-about-wrapper {
        grid-template-columns: 1fr 1fr;

        gap: 35px;
    }


    .rg-about-image {
        padding-right: 15px;
    }


    .rg-about-image-main {
        height: 420px;
    }


    .rg-about-experience {
        width: 145px;

        min-height: 90px;

        padding: 13px;
    }


    .rg-about-experience strong {
        font-size: 34px;
    }


    .rg-about-experience span {
        font-size: 10px;
    }


    .rg-about-content {
        padding-right: 0;
    }


    .rg-about-content h2 {
        font-size: 32px;
    }


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

        line-height: 1.65;
    }


    .rg-about-features {
        grid-template-columns: 1fr;

        gap: 10px;

        margin: 20px 0;
    }


    .rg-about-feature h4 {
        font-size: 12px;
    }

}


/* =========================================
   MOBILE
   BELOW 767px
========================================= */

@media (max-width: 767px) {

    .rg-about-section {
        padding: 60px 0;
    }


    .rg-about-wrapper {
        display: flex;

        flex-direction: column;

        gap: 40px;
    }


    /* IMAGE */

    .rg-about-image {
        width: 100%;

        padding-right: 15px;
    }


    .rg-about-image-main {
        height: 350px;
    }


    .rg-about-experience {
        right: 0;

        bottom: 25px;

        width: 150px;

        min-height: 85px;

        padding: 12px;
    }


    .rg-about-experience strong {
        font-size: 32px;
    }


    .rg-about-experience span {
        font-size: 10px;
    }


    /* CONTENT */

    .rg-about-content {
        width: 100%;

        padding-right: 0;
    }


    .rg-section-subtitle {
        font-size: 11px;

        letter-spacing: 0.8px;
    }


    .rg-about-content h2 {
        font-size: 30px;

        line-height: 1.18;
    }


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

        line-height: 1.7;
    }


    /* FEATURES */

    .rg-about-features {
        grid-template-columns: 1fr;

        gap: 12px;

        margin: 22px 0;
    }


    .rg-about-feature h4 {
        font-size: 15px;
    }


    .rg-about-feature p {
        font-size: 10px;
    }


    /* BUTTON */

    .rg-about-btn {
        padding: 13px 17px;

        font-size: 14px;
    }

}


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

@media (max-width: 480px) {

    .rg-about-section {
        padding: 50px 0;
    }


    .rg-about-image-main {
        height: 300px;
    }


    .rg-about-content h2 {
        font-size: 27px;
    }


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


    .rg-about-experience {
        width: 135px;

        min-height: 75px;
    }


    .rg-about-experience strong {
        font-size: 28px;
    }

}



/* =========================================
   OUR SERVICES SECTION
========================================= */

.rg-services-section {
    width: 100%;
    padding: 75px 0 70px;
    background: #ffffff;
    overflow: hidden;
}


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

.rg-services-heading {
    width: 100%;
    padding: 0 20px;
    margin-bottom: 35px;
    text-align: center;
}

.rg-services-subtitle {
    display: block;
    margin-bottom: 5px;

    color: #f5b400;

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

    letter-spacing: 1px;
    text-transform: uppercase;
}

.rg-services-heading h2 {
    margin: 0;

    color: #06275c;

    font-size: 32px;
    font-weight: 800;

    line-height: 1.2;

    text-transform: uppercase;
}

.rg-services-heading h2 span {
    color: #f5b400;
}

.rg-services-line {
    width: 45px;
    height: 3px;

    margin: 10px auto 12px;

    background: #f5b400;
}

.rg-services-heading p {
    max-width: 750px;

    margin: 0 auto;

    color: #555555;

    font-size: 18px;

    line-height: 1.6;
}


@media(max-width:600px){
    .rg-services-heading p {
   
    
    font-size: 16px !important;
    
}
}


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

.rg-services-slider-wrap {
    position: relative;

    width: 100%;

    overflow: visible;
}


/* =========================================
   SWIPER
========================================= */

.rg-services-slider {
    width: 100%;

    padding: 10px 70px 55px !important;

    overflow: hidden;
}

.rg-services-slider .swiper-wrapper {
    align-items: stretch;
}

.rg-services-slider .swiper-slide {
    height: auto;

    display: flex;
}


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

.rg-service-card {
    position: relative;

    width: 100%;

    min-height: 340px;

    background: #ffffff;

    border: 1px solid #dddddd;

    border-radius: 5px;

    overflow: visible;

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07);

    transition: all 0.35s ease;
}

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

    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.13);
}


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

.rg-service-image {
    position: relative;

    width: 100%;

    height: 150px;

    overflow: hidden;

    border-radius: 5px 5px 0 0;
}

.rg-service-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform 0.5s ease;
}

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


/* =========================================
   NUMBER
========================================= */

.rg-service-number {
    position: absolute;

    top: 0;
    left: 0;

    min-width: 45px;

    padding: 9px 10px;

    background: #06275c;

    color: #ffffff;

    font-size: 11px;

    font-weight: 700;

    line-height: 1;

    text-align: center;
}


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

.rg-service-icon {
    position: relative;

    width: 58px;
    height: 58px;

    margin: -29px auto 0;

    display: flex;

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

    background: #ffffff;

    border: 2px solid #eeeeee;

    border-radius: 50%;

    color: #06275c;

    font-size: 23px;

    z-index: 5;

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.14);

    transition: all 0.3s ease;
}

.rg-service-card:hover .rg-service-icon {
    background: #f5b400;

    border-color: #f5b400;

    color: #06275c;
}


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

.rg-service-content {
    padding: 10px 12px 20px;

    text-align: center;
}

.rg-service-content h3 {
    min-height: 35px;

    margin: 0 0 9px;

    color: #06275c;

    font-size: 17px;

    font-weight: 800;

    line-height: 1.3;

    text-transform: uppercase;
}

.rg-service-content p {
    /* max-width: 190px; */

    min-height: 42px;

    margin: 0 auto;

    color: #555555;

    font-size: 18px;

    line-height: 1.55;
}


/* =========================================
   LEFT / RIGHT ARROWS
========================================= */

.rg-services-prev,
.rg-services-next {
    position: absolute;

    top: 50%;

    width: 48px;
    height: 48px;

    display: flex;

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

    background: #f5b400;

    color: #06275c;

    border-radius: 50%;

    font-size: 15px;

    cursor: pointer;

    z-index: 100;

    transform: translateY(-50%);

    transition: all 0.3s ease;
}


/* LEFT ARROW */

.rg-services-prev {
    left: 18px;
}


/* RIGHT ARROW */

.rg-services-next {
    right: 18px;
}


/* HOVER */

.rg-services-prev:hover,
.rg-services-next:hover {
    background: #06275c;

    color: #ffffff;

    transform: translateY(-50%) scale(1.08);
}


/* =========================================
   PAGINATION
========================================= */

.rg-services-pagination {
    bottom: 8px !important;
}

.rg-services-pagination
.swiper-pagination-bullet {
    width: 8px;
    height: 8px;

    margin: 0 4px !important;

    background: #06275c;

    opacity: 0.3;
}

.rg-services-pagination
.swiper-pagination-bullet-active {
    width: 25px;

    border-radius: 20px;

    background: #f5b400;

    opacity: 1;
}


/* =========================================
   VIEW ALL SERVICES BUTTON
========================================= */

.rg-services-button-wrapper {
    margin-top: 15px;

    text-align: center;
}

.rg-services-button {
    display: inline-flex;

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

    gap: 10px;

    padding: 13px 20px;

    background: #06275c;

    color: #ffffff;

    font-size: 11px;

    font-weight: 800;

    text-decoration: none;

    text-transform: uppercase;

    transition: all 0.3s ease;
}

.rg-services-button:hover {
    background: #f5b400;

    color: #06275c;
}

.rg-services-button i {
    transition: transform 0.3s ease;
}

.rg-services-button:hover i {
    transform: translateX(5px);
}


/* =========================================
   LAPTOP
   992px - 1199px
========================================= */

@media (min-width: 992px) and (max-width: 1199px) {

    .rg-services-section {
        padding: 65px 0 70px;
    }

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

    .rg-services-slider {
        padding-left: 60px !important;
        padding-right: 60px !important;
    }

    .rg-service-card {
        min-height: 330px;
    }

    .rg-service-image {
        height: 145px;
    }

    .rg-services-prev {
        left: 10px;
    }

    .rg-services-next {
        right: 10px;
    }

}


/* =========================================
   TABLET
   768px - 991px
========================================= */

@media (min-width: 768px) and (max-width: 991px) {

    .rg-services-section {
        padding: 60px 0 65px;
    }

    .rg-services-heading h2 {
        font-size: 28px;
    }

    .rg-services-heading p {
        font-size: 12px;
    }

    .rg-services-slider {
        padding-left: 50px !important;
        padding-right: 50px !important;
    }

    .rg-service-card {
        min-height: 320px;
    }

    .rg-service-image {
        height: 160px;
    }

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

    .rg-service-content p {
        font-size: 10px;
    }

    .rg-services-prev {
        left: 8px;
    }

    .rg-services-next {
        right: 8px;
    }

    .rg-services-prev,
    .rg-services-next {
        width: 42px;
        height: 42px;

        font-size: 13px;
    }

}


/* =========================================
   MOBILE
   BELOW 767px
========================================= */

@media (max-width: 767px) {

    .rg-services-section {
        padding: 50px 0 60px;
    }

    .rg-services-heading {
        padding: 0 18px;

        margin-bottom: 25px;
    }

    .rg-services-subtitle {
        font-size: 11px;
    }

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

    .rg-services-heading p {
        font-size: 11px;
    }

    .rg-services-slider {
        padding-left: 50px !important;
        padding-right: 50px !important;

        padding-bottom: 50px !important;
    }

    .rg-service-card {
        min-height: 350px;
    }

    .rg-service-image {
        height: 200px;
    }

    .rg-service-number {
        min-width: 45px;

        padding: 9px;

        font-size: 11px;
    }

    .rg-service-icon {
        width: 58px;
        height: 58px;

        font-size: 23px;
    }

    .rg-service-content {
        padding: 12px 20px 25px;
    }

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

    .rg-service-content p {
        max-width: 280px;

        font-size: 16px;

        line-height: 1.6;
    }

    .rg-services-prev,
    .rg-services-next {
        width: 38px;
        height: 38px;

        font-size: 12px;
    }

    .rg-services-prev {
        left: 5px;
    }

    .rg-services-next {
        right: 5px;
    }

}


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

@media (max-width: 480px) {

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

    .rg-services-heading h2 {
        font-size: 24px;
    }

    .rg-services-slider {
        padding-left: 45px !important;
        padding-right: 45px !important;
    }

    .rg-service-image {
        height: 190px;
    }

    .rg-service-card {
        min-height: 335px;
    }

    .rg-services-prev,
    .rg-services-next {
        width: 34px;
        height: 34px;

        font-size: 11px;
    }

}



/* =========================================
   OUR PROJECTS SECTION
========================================= */

.rg-projects-section {
    width: 100%;
    padding: 75px 0 80px;
    background: #ffffff;
    overflow: hidden;
}


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

.rg-projects-container {
    width: 100%;
    max-width: 1400px;

    margin: 0 auto;

    padding: 0 35px;

    box-sizing: border-box;
}


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

.rg-projects-heading {
    text-align: center;
    margin-bottom: 35px;
}


.rg-projects-subtitle {
    display: block;

    margin-bottom: 6px;

    color: #f5b400;

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

    letter-spacing: 1px;

    text-transform: uppercase;
}


.rg-projects-heading h2 {
    margin: 0;

    color: #06275c;

    font-size: 32px;
    font-weight: 800;

    line-height: 1.2;

    text-transform: uppercase;
}


.rg-projects-heading h2 span {
    color: #f5b400;
}


/* YELLOW LINE */

.rg-projects-line {
    width: 45px;
    height: 3px;

    margin: 10px auto 13px;

    background: #f5b400;
}


.rg-projects-heading p {
    max-width: 720px;

    margin: 0 auto;

    color: #555555;

    font-size: 18px;

    line-height: 1.6;
}


/* =========================================
   PROJECT GRID
========================================= */

.rg-projects-grid {
    display: grid;

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

    gap: 18px;

    width: 100%;
}


/* =========================================
   PROJECT CARD
========================================= */

.rg-project-card {
    position: relative;

    width: 100%;

    background: #ffffff;

    border: 1px solid #dddddd;

    border-radius: 5px;

    overflow: hidden;

    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07);

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


.rg-project-card:hover {
    transform: translateY(-6px);

    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
}


/* =========================================
   PROJECT IMAGE
========================================= */

.rg-project-image {
    position: relative;

    width: 100%;

    height: 150px;

    overflow: hidden;
}


.rg-project-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.5s ease;
}


.rg-project-card:hover .rg-project-image img {
    transform: scale(1.08);
}


/* =========================================
   PROJECT NUMBER
========================================= */

.rg-project-number {
    position: absolute;

    top: 0;
    left: 0;

    min-width: 42px;

    padding: 9px 11px;

    background: #06275c;

    color: #ffffff;

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

    text-align: center;
}


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

.rg-project-content {
    padding: 14px 14px 17px;
}


/* PROJECT TITLE */

.rg-project-content h3 {
    margin: 0 0 8px;

    color: #06275c;

    font-size: 17px;
    font-weight: 800;

    line-height: 1.35;

    text-transform: uppercase;
}


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

.rg-project-location {
    display: flex;

    align-items: center;

    gap: 6px;

    margin-bottom: 7px;
}


.rg-project-location i {
    color: #f5b400;

    font-size: 11px;
}


.rg-project-location span {
    color: #333333;

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


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

.rg-project-content p {
    margin: 0;

    color: #666666;

    font-size: 18px;

    line-height: 1.55;
}


/* =========================================
   VIEW ALL BUTTON
========================================= */

.rg-projects-button-wrapper {
    margin-top: 30px;

    text-align: center;
}


.rg-projects-button {
    display: inline-flex;

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

    gap: 10px;

    padding: 13px 21px;

    background: #06275c;

    color: #ffffff;

    font-size: 12px;
    font-weight: 800;

    text-decoration: none;

    text-transform: uppercase;

    transition: all 0.3s ease;
}


.rg-projects-button:hover {
    background: #f5b400;

    color: #06275c;
}


.rg-projects-button i {
    transition: transform 0.3s ease;
}


.rg-projects-button:hover i {
    transform: translateX(5px);
}


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

@media (min-width: 1200px) {

    .rg-projects-container {
        max-width: 1400px;
    }

    .rg-project-image {
        height: 150px;
    }

}


/* =========================================
   LAPTOP
   992px - 1199px
========================================= */

@media (min-width: 992px) and (max-width: 1199px) {

    .rg-projects-section {
        padding: 65px 0 70px;
    }

    .rg-projects-container {
        padding-left: 25px;
        padding-right: 25px;
    }

    .rg-projects-grid {
        grid-template-columns: repeat(5, 1fr);

        gap: 12px;
    }

    .rg-project-image {
        height: 125px;
    }

    .rg-project-content {
        padding: 12px 10px 15px;
    }

    .rg-project-content h3 {
        font-size: 10px;
    }

    .rg-project-location span {
        font-size: 8px;
    }

    .rg-project-content p {
        font-size: 8px;
    }

}


/* =========================================
   TABLET
   768px - 991px
========================================= */

@media (min-width: 768px) and (max-width: 991px) {

    .rg-projects-section {
        padding: 60px 0 65px;
    }

    .rg-projects-container {
        padding-left: 25px;
        padding-right: 25px;
    }

    .rg-projects-heading {
        margin-bottom: 30px;
    }

    .rg-projects-heading h2 {
        font-size: 28px;
    }

    .rg-projects-heading p {
        font-size: 12px;

        padding: 0 15px;
    }

    /* 2 CARDS */

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

        gap: 20px;
    }

    .rg-project-image {
        height: 190px;
    }

    .rg-project-content {
        padding: 15px 16px 18px;
    }

    .rg-project-content h3 {
        font-size: 13px;
    }

    .rg-project-location span {
        font-size: 10px;
    }

    .rg-project-content p {
        font-size: 10px;

        line-height: 1.6;
    }

}


/* =========================================
   MOBILE
   BELOW 767px
========================================= */

@media (max-width: 767px) {

    .rg-projects-section {
        padding: 50px 0 60px;
    }

    .rg-projects-container {
        padding-left: 18px;
        padding-right: 18px;
    }

    .rg-projects-heading {
        margin-bottom: 25px;
    }

    .rg-projects-subtitle {
        font-size: 11px;
    }

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

    .rg-projects-heading p {
        font-size: 11px;

        line-height: 1.6;
    }

    /* 1 CARD */

    .rg-projects-grid {
        grid-template-columns: 1fr;

        gap: 20px;
    }

    .rg-project-image {
        height: 215px;
    }

    .rg-project-content {
        padding: 15px 18px 20px;
    }

    .rg-project-content h3 {
        font-size: 14px;
    }

    .rg-project-location span {
        font-size: 16px;
    }

    .rg-project-content p {
        font-size: 11px;

        line-height: 1.6;
    }

    .rg-projects-button-wrapper {
        margin-top: 25px;
    }

}


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

@media (max-width: 480px) {

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

    .rg-projects-container {
        padding-left: 15px;
        padding-right: 15px;
    }

    .rg-projects-heading h2 {
        font-size: 24px;
    }

    .rg-projects-heading p {
        font-size: 16px;
    }

    .rg-project-image {
        height: 190px;
    }

    .rg-project-content h3 {
        font-size: 16px;
    }

    .rg-project-content p {
        font-size: 16px;
    }

}


/* =========================================
   OUR CLIENTS SECTION
========================================= */

.rg-clients-section {
    width: 100%;

    padding: 10px 0 0px;

    background: #f8f9fb;

    overflow: hidden;
}


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

.rg-clients-container {
    width: 100%;

    max-width: 1400px;

    margin: 0 auto;

    padding: 0 35px;

    box-sizing: border-box;
}


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

.rg-clients-heading {
    text-align: center;

    margin-bottom: 35px;
}


.rg-clients-subtitle {
    display: block;

    margin-bottom: 6px;

    color: #f5b400;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;
}


.rg-clients-heading h2 {
    margin: 0;

    color: #06275c;

    font-size: 32px;

    font-weight: 800;

    line-height: 1.2;

    text-transform: uppercase;
}


.rg-clients-heading h2 span {
    color: #f5b400;
}


/* YELLOW LINE */

.rg-clients-line {
    width: 45px;

    height: 3px;

    margin: 10px auto 12px;

    background: #f5b400;
}


.rg-clients-heading p {
    max-width: 700px;

    margin: 0 auto;

    color: #555555;

    font-size: 18px;

    line-height: 1.6;
}


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

.rg-clients-slider-wrap {
    position: relative;

    width: 100%;

    padding: 0 55px;

    box-sizing: border-box;
}


/* =========================================
   SWIPER
========================================= */

.rg-clients-slider {
    width: 100%;

    padding: 10px 5px 50px !important;

    overflow: hidden;
}


.rg-clients-slider .swiper-wrapper {
    align-items: stretch;
}


.rg-clients-slider .swiper-slide {
    height: auto;

    display: flex;
}


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

.rg-client-card {
    width: 100%;

    min-height: 155px;

    padding: 20px 15px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    background: #ffffff;

    border: 1px solid #dddddd;

    border-radius: 5px;

    box-sizing: border-box;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);

    transition: all 0.35s ease;
}


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

    border-color: #f5b400;

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}


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

.rg-client-card img {
    width: 135px;

    height: 75px;

    display: block;

    object-fit: contain;

    margin-bottom: 12px;

    transition: transform 0.35s ease;
}


.rg-client-card:hover img {
    transform: scale(1.06);
}


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

.rg-client-card h3 {
    max-width: 190px;

    margin: 0;

    color: #06275c;

    font-size: 16px;

    font-weight: 800;

    line-height: 1.35;

    text-align: center;

    text-transform: uppercase;
}


/* =========================================
   LEFT / RIGHT ARROWS
========================================= */

.rg-clients-prev,
.rg-clients-next {
    position: absolute;

    top: 50%;

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 0;

    border: none;

    border-radius: 50%;

    background: #f5b400;

    color: #06275c;

    font-size: 13px;

    cursor: pointer;

    z-index: 20;

    transform: translateY(-50%);

    transition: all 0.3s ease;
}


/* LEFT */

.rg-clients-prev {
    left: 0;
}


/* RIGHT */

.rg-clients-next {
    right: 0;
}


/* HOVER */

.rg-clients-prev:hover,
.rg-clients-next:hover {
    background: #06275c;

    color: #ffffff;

    transform: translateY(-50%) scale(1.08);
}


/* DISABLED ARROW */

.rg-clients-prev.swiper-button-disabled,
.rg-clients-next.swiper-button-disabled {
    opacity: 0.5;

    cursor: not-allowed;
}


/* =========================================
   PAGINATION
========================================= */

.rg-clients-pagination {
    bottom: 5px !important;
}


.rg-clients-pagination
.swiper-pagination-bullet {
    width: 8px;

    height: 8px;

    margin: 0 4px !important;

    background: #06275c;

    opacity: 0.25;
}


.rg-clients-pagination
.swiper-pagination-bullet-active {
    width: 25px;

    border-radius: 20px;

    background: #f5b400;

    opacity: 1;
}


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

@media (min-width: 1200px) {

    .rg-clients-container {
        max-width: 1400px;
    }

    .rg-client-card {
        min-height: 155px;
    }

}


/* =========================================
   LAPTOP
   992px - 1199px
========================================= */

@media (min-width: 992px) and (max-width: 1199px) {

    .rg-clients-section {
        padding: 65px 0 70px;
    }

    .rg-clients-container {
        padding-left: 25px;
        padding-right: 25px;
    }

    .rg-clients-slider-wrap {
        padding: 0 50px;
    }

    .rg-client-card {
        min-height: 150px;
    }

    .rg-client-card img {
        width: 120px;

        height: 70px;
    }

}


/* =========================================
   TABLET
   768px - 991px
========================================= */

@media (min-width: 768px) and (max-width: 991px) {

    .rg-clients-section {
        padding: 60px 0 65px;
    }

    .rg-clients-container {
        padding-left: 25px;
        padding-right: 25px;
    }

    .rg-clients-heading {
        margin-bottom: 28px;
    }

    .rg-clients-heading h2 {
        font-size: 28px;
    }

    .rg-clients-heading p {
        font-size: 12px;

        padding: 0 15px;
    }

    .rg-clients-slider-wrap {
        padding: 0 48px;
    }

    .rg-client-card {
        min-height: 150px;

        padding: 18px 12px;
    }

    .rg-client-card img {
        width: 115px;

        height: 65px;
    }

    .rg-client-card h3 {
        font-size: 9px;
    }

    .rg-clients-prev,
    .rg-clients-next {
        width: 40px;

        height: 40px;

        font-size: 12px;
    }

}


/* =========================================
   MOBILE
   BELOW 767px
========================================= */

@media (max-width: 767px) {

    .rg-clients-section {
        padding: 50px 0 60px;
    }

    .rg-clients-container {
        padding-left: 15px;
        padding-right: 15px;
    }

    .rg-clients-heading {
        margin-bottom: 25px;
    }

    .rg-clients-subtitle {
        font-size: 11px;
    }

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

    .rg-clients-heading p {
        font-size: 11px;

        line-height: 1.6;
    }

    .rg-clients-slider-wrap {
        padding: 0 42px;
    }

    .rg-clients-slider {
        padding-bottom: 45px !important;
    }

    .rg-client-card {
        min-height: 145px;

        padding: 15px 8px;
    }

    .rg-client-card img {
        width: 105px;

        height: 60px;

        margin-bottom: 10px;
    }

    .rg-client-card h3 {
        max-width: 145px;

        font-size: 8px;

        line-height: 1.35;
    }

    .rg-clients-prev,
    .rg-clients-next {
        width: 35px;

        height: 35px;

        font-size: 11px;
    }

    .rg-clients-prev {
        left: 0;
    }

    .rg-clients-next {
        right: 0;
    }

}


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

@media (max-width: 480px) {

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

    .rg-clients-heading h2 {
        font-size: 24px;
    }

    .rg-clients-heading p {
        font-size: 16px;
    }

    .rg-clients-slider-wrap {
        padding: 0 38px;
    }

    .rg-client-card {
        min-height: 135px;

        padding: 12px 6px;
    }

    .rg-client-card img {
        width: 90px;

        height: 55px;
    }

    .rg-client-card h3 {
        font-size: 13px;
    }

    .rg-clients-prev,
    .rg-clients-next {
        width: 32px;

        height: 32px;

        font-size: 10px;
    }

}



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

.rg-footer {
    width: 100%;

    background: #061d42;

    color: #ffffff;

    overflow: hidden;
}


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

.rg-footer-main {
    width: 100%;

    padding: 65px 0 50px;

    background: #061d42;
}


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

.rg-footer-container {
    width: 100%;

    max-width: 1400px;

    margin: 0 auto;

    padding: 0 35px;

    box-sizing: border-box;
}


/* =========================================
   FOOTER GRID
========================================= */

.rg-footer-grid {
    display: grid;

    grid-template-columns: 1.4fr 1fr 1.3fr 1.3fr;

    gap: 55px;
}


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

.rg-footer-logo {
    display: inline-block;

    margin-bottom: 18px;
}


.rg-footer-logo img {
    width: 170px;

    height: auto;

    display: block;

    object-fit: contain;
}


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

.rg-footer-about p {
    max-width: 300px;

    margin: 0;

    color: #d4d9e2;

    font-size: 18px;

    line-height: 1.8;
}


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

.rg-footer-title {
    margin: 5px 0 8px;

    color: #ffffff;

    font-size: 16px;

    font-weight: 800;

    letter-spacing: 0.5px;

    text-transform: uppercase;
}


.rg-footer-title-line {
    width: 35px;

    height: 3px;

    margin-bottom: 20px;

    background: #f5b400;
}


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

.rg-footer-links {
    margin: 0;

    padding: 0;

    list-style: none;
}


.rg-footer-links li {
    margin-bottom: 11px;
}


.rg-footer-links li a {
    display: flex;

    align-items: center;

    gap: 8px;

    color: #d4d9e2;

    font-size: 18px;

    line-height: 1.5;

    text-decoration: none;

    transition: all 0.3s ease;
}


.rg-footer-links li a i {
    color: #f5b400;

    font-size: 9px;

    transition: transform 0.3s ease;
}


.rg-footer-links li a:hover {
    color: #f5b400;

    padding-left: 4px;
}


.rg-footer-links li a:hover i {
    transform: translateX(3px);
}


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

.rg-footer-social {
    display: flex;

    align-items: center;

    gap: 9px;

    margin-top: 22px;
}


.rg-footer-social a {
    width: 34px;

    height: 34px;

    display: flex;

    align-items: center;

    justify-content: center;

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

    border: 1px solid rgba(255, 255, 255, 0.15);

    border-radius: 50%;

    color: #ffffff;

    font-size: 13px;

    text-decoration: none;

    transition: all 0.3s ease;
}


.rg-footer-social a:hover {
    background: #f5b400;

    border-color: #f5b400;

    color: #061d42;

    transform: translateY(-3px);
}


/* =========================================
   CONTACT ITEMS
========================================= */

.rg-footer-contact-item {
    display: flex;

    align-items: flex-start;

    gap: 12px;

    margin-bottom: 20px;
}


.rg-footer-contact-icon {
    flex: 0 0 35px;

    width: 35px;

    height: 35px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #f5b400;

    color: #061d42;

    border-radius: 50%;

    font-size: 12px;
}


.rg-footer-contact-item strong {
    display: block;

    margin-bottom: 3px;

    color: #ffffff;

    font-size: 16px;

    font-weight: 700;

    text-transform: uppercase;
}


.rg-footer-contact-item p {
    max-width: 220px;

    margin: 0;

    color: #d4d9e2;

    font-size: 18px;

    line-height: 1.6;
}


.rg-footer-contact-item a {
    color: #d4d9e2;

    font-size: 18px;

    text-decoration: none;

    transition: color 0.3s ease;
}


.rg-footer-contact-item a:hover {
    color: #f5b400;
}


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

.rg-footer-bottom {
    width: 100%;

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

    background: #041631;
}


.rg-footer-bottom-container {
    width: 100%;

    max-width: 1400px;

    margin: 0 auto;

    padding: 17px 35px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 20px;

    box-sizing: border-box;
}


.rg-footer-bottom p {
    margin: 0;

    color: #aeb7c7;

    font-size: 18px;

    line-height: 1.5;
}


.rg-footer-bottom a {
    color: #f5b400;

    text-decoration: none;
}


.rg-footer-bottom a:hover {
    color: #ffffff;
}


/* =========================================
   LAPTOP
   992px - 1199px
========================================= */

@media (min-width: 992px) and (max-width: 1199px) {

    .rg-footer-main {
        padding: 60px 0 45px;
    }

    .rg-footer-container {
        padding-left: 25px;

        padding-right: 25px;
    }

    .rg-footer-grid {
        gap: 30px;
    }

    .rg-footer-about p {
        max-width: 260px;

        font-size: 11px;
    }

    .rg-footer-title {
        font-size: 13px;
    }

}


/* =========================================
   TABLET
   768px - 991px
========================================= */

@media (min-width: 768px) and (max-width: 991px) {

    .rg-footer-main {
        padding: 55px 0 40px;
    }

    .rg-footer-container {
        padding-left: 25px;

        padding-right: 25px;
    }

    /* 2 COLUMNS */

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

        gap: 40px 35px;
    }

    .rg-footer-about p {
        max-width: 350px;

        font-size: 11px;
    }

    .rg-footer-title {
        font-size: 13px;
    }

    .rg-footer-links li a {
        font-size: 10px;
    }

    .rg-footer-bottom-container {
        padding-left: 25px;

        padding-right: 25px;
    }

}


/* =========================================
   MOBILE
   BELOW 767px
========================================= */

@media (max-width: 767px) {

    .rg-footer-main {
        padding: 50px 0 35px;
    }

    .rg-footer-container {
        padding-left: 20px;

        padding-right: 20px;
    }

    /* 1 COLUMN */

    .rg-footer-grid {
        grid-template-columns: 1fr;

        gap: 35px;
    }

    .rg-footer-about p {
        max-width: 100%;

        font-size: 11px;

        line-height: 1.7;
    }

    .rg-footer-logo img {
        width: 150px;
    }

    .rg-footer-title {
        font-size: 13px;
    }

    .rg-footer-links li {
        margin-bottom: 10px;
    }

    .rg-footer-links li a {
        font-size: 10px;
    }

    .rg-footer-contact-item {
        margin-bottom: 17px;
    }

    .rg-footer-contact-item p {
        max-width: 280px;
    }

    /* FOOTER BOTTOM */

    .rg-footer-bottom-container {
        padding: 15px 20px;

        flex-direction: column;

        text-align: center;

        gap: 6px;
    }

}


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

@media (max-width: 480px) {

    .rg-footer-main {
        padding: 45px 0 30px;
    }

    .rg-footer-container {
        padding-left: 18px;

        padding-right: 18px;
    }

    .rg-footer-grid {
        gap: 30px;
    }

    .rg-footer-logo img {
        width: 140px;
    }

    .rg-footer-about p {
        font-size: 16px;
    }

    .rg-footer-title {
        font-size: 12px;
    }

    .rg-footer-links li a {
        font-size: 16px;
    }

    .rg-footer-contact-icon {
        width: 32px;

        height: 32px;

        flex-basis: 32px;
    }

    .rg-footer-contact-item p,
    .rg-footer-contact-item a {
        font-size: 16px;
    }

    .rg-footer-bottom p {
        font-size: 16px;
    }

}

.rg-header-button{
    margin-right:30px;
}

@media(max-width:600px){
    .rg-topbar{
        display:none;
    }
}



/* =========================================
   MOBILE MENU FIX
========================================= */

@media (max-width: 991px) {

    .rg-main-header {
        position: relative;
        z-index: 9999;
    }

    .rg-header-wrapper {
        position: relative;
        z-index: 10000;
    }

    .rg-mobile-menu {
        display: none;

        position: absolute;

        top: 100%;
        left: 0;

        width: 100%;

        background: #ffffff;

        z-index: 99999;

        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    }

    .rg-mobile-menu.active {
        display: block !important;
    }

    .rg-mobile-menu-inner {
        position: relative;

        width: 100%;

        background: #ffffff;

        padding: 15px 20px 25px;

        z-index: 100000;
    }

    .rg-mobile-quote {
    display:none;
}

}


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

.rg-main-header {
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 9999;
    background: #ffffff;
}


/* Keep the navigation above all sections */

.rg-main-header .container {
    position: relative;
    z-index: 10000;
}


/* Optional shadow when sticky */

.rg-main-header {
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08);
}


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

@media (max-width: 991px) {

    .rg-main-header {
        position: sticky;
        top: 0;
        z-index: 9999;
    }

    .rg-mobile-menu {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        z-index: 99999;
    }

}





/*--------------about us page styles-------------*/


/* =====================================================
   COMMON
===================================================== */

.rg-about-container {

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

    margin: 0 auto;

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

}


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

.rg-about-section-title {

    text-align: center;

    margin-bottom: 45px;

}

.rg-about-section-title span {

    display: block;

    color: #eeb000;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1.8px;

    margin-bottom: 8px;

}

.rg-about-section-title h2 {

    margin: 0;

    color: #082b61;

    font-size: 34px;

    line-height: 1.3;

    font-weight: 700;

}

.rg-title-line {

    width: 45px;

    height: 3px;

    background: #eeb000;

    margin: 15px auto 0;

    position: relative;

}

.rg-title-line::before,
.rg-title-line::after {

    content: "";

    position: absolute;

    top: 0;

    width: 8px;

    height: 3px;

    background: #eeb000;

}

.rg-title-line::before {

    left: -13px;

}

.rg-title-line::after {

    right: -13px;

}


/* =====================================================
   VISION & MISSION
===================================================== */

.rg-about-vision-mission {

    padding: 60px 0;

    background: #f7f8fa;

}


/* Wrapper */

.rg-vm-wrapper {

    position: relative;

    display: flex;

    width: 100%;

}


/* Cards */

.rg-vm-card {

    position: relative;

    width: 50%;

    min-height: 330px;

    padding: 50px 80px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    overflow: hidden;

}


/* Vision */

.rg-vision-card {

    background: #082b61;

    color: #ffffff;

}


/* Mission */

.rg-mission-card {

    background: #fff2d5;

    color: #082b61;

}


/* Icon */

.rg-vm-icon {

    width: 70px;

    height: 70px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 12px;

    font-size: 42px;

    color: #f2b000;

}

.rg-mission-card .rg-vm-icon {

    color: #082b61;

}


/* Label */

.rg-vm-label {

    display: block;

    margin-bottom: 10px;

    color: #f2b000;

    font-size: 15px;

    font-weight: 700;

    letter-spacing: 1px;

}

.rg-mission-card .rg-vm-label {

    color: #082b61;

}


/* Heading */

.rg-vm-content h3 {

    margin: 0 0 15px;

    font-size: 28px;

    font-weight: 700;

}

.rg-vision-card .rg-vm-content h3 {

    color: #ffffff;

}

.rg-mission-card .rg-vm-content h3 {

    color: #082b61;

}


/* Paragraph */

.rg-vm-content p {

    max-width: 470px;

    margin: 0;

    font-size: 18px;

    line-height: 1.2;

}

.rg-vision-card .rg-vm-content p {

    color: rgba(255,255,255,0.85);

}

.rg-mission-card .rg-vm-content p {

    color: #555555;

}


/* Background Icon */

.rg-vm-bg-icon {

    position: absolute;

    right: 20px;

    bottom: -25px;

    font-size: 130px;

    opacity: 0.06;

}

.rg-vision-card .rg-vm-bg-icon {

    color: #ffffff;

}

.rg-mission-card .rg-vm-bg-icon {

    color: #082b61;

}


/* Center */

.rg-vm-middle {

    position: absolute;

    z-index: 10;

    left: 50%;

    top: 50%;

    transform: translate(-50%, -50%);

}


/* Logo */

.rg-vm-logo {

    width: 82px;

    height: 82px;

    border-radius: 50%;

    background: #ffffff;

    display: flex;

    align-items: center;

    justify-content: center;

    box-shadow:
        0 5px 25px rgba(0,0,0,0.15);

    border: 5px solid #ffffff;

}

.rg-vm-logo span {

    font-size: 25px;

    font-weight: 800;

    font-style: italic;

    color: #082b61;

}


/* =====================================================
   TESTIMONIAL SECTION
===================================================== */

.rg-about-testimonials {

    padding: 80px 0;

    background: #ffffff;

}


/* Grid */

.rg-testimonial-wrapper {

    display: grid;

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

    gap: 25px;

}


/* Card */

.rg-testimonial-card {

    padding: 30px 25px;

    background: #ffffff;

    border: 1px solid #eeeeee;

    box-shadow:
        0 8px 30px rgba(8,43,97,0.08);

    transition: 0.3s ease;

}

.rg-testimonial-card:hover {

    transform: translateY(-5px);

    box-shadow:
        0 12px 35px rgba(8,43,97,0.13);

}


/* Quote */

.rg-quote {

    margin-bottom: 12px;

}

.rg-quote i {

    font-size: 35px;

    color: #f2b000;

}


/* Text */

.rg-testimonial-card > p {

    margin: 0;

    min-height: 110px;

    color: #555555;

    font-size: 14px;

    line-height: 1.8;

}


/* Line */

.rg-testimonial-line {

    width: 35px;

    height: 2px;

    margin: 18px 0;

    background: #f2b000;

}


/* Client */

.rg-client {

    display: flex;

    align-items: center;

    gap: 14px;

}


/* Client Image */

.rg-client-image {

    width: 55px;

    height: 55px;

    flex: 0 0 55px;

    overflow: hidden;

    border-radius: 50%;

    border: 2px solid #f2b000;

}

.rg-client-image img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

}


/* Client Info */

.rg-client-info h4 {

    margin: 0 0 3px;

    color: #082b61;

    font-size: 15px;

    font-weight: 700;

}

.rg-client-info span {

    display: block;

    color: #777777;

    font-size: 11px;

}


/* Stars */

.rg-stars {

    margin-top: 5px;

}

.rg-stars i {

    color: #f2b000;

    font-size: 11px;

    margin-right: 2px;

}


/* Dots */

.rg-testimonial-dots {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 6px;

    margin-top: 30px;

}

.rg-testimonial-dots span {

    width: 6px;

    height: 6px;

    border-radius: 50%;

    background: #cbd2db;

}

.rg-testimonial-dots span.active {

    width: 20px;

    border-radius: 5px;

    background: #f2b000;

}


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

@media (max-width: 991px) {


    .rg-about-container {

        max-width: 960px;

    }


    /* Section */

    .rg-about-vision-mission,
    .rg-about-testimonials {

        padding: 65px 0;

    }


    /* Title */

    .rg-about-section-title h2 {

        font-size: 30px;

    }


    /* Vision Mission */

    .rg-vm-card {

        min-height: 350px;

        padding: 45px 35px;

    }


    .rg-vm-content h3 {

        font-size: 20px;

    }


    .rg-vm-content p {

        font-size: 13px;

    }


    .rg-vm-middle {

        display: none;

    }


    /* Testimonials */

    .rg-testimonial-wrapper {

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

        gap: 20px;

    }


    .rg-testimonial-card {

        padding: 25px 20px;

    }


    .rg-testimonial-card:last-child {

        grid-column: 1 / -1;

        max-width: 50%;

        width: 100%;

        margin: 0 auto;

    }

}


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

/* ==========================================
   TESTIMONIAL CAROUSEL - MOBILE
========================================== */

@media (max-width: 767px) {

    .rg-about-testimonials {
        width: 100%;
        overflow: hidden;
        padding: 50px 0;
    }

    .rg-about-testimonials .rg-about-container {
        width: 100%;
        max-width: 100%;
        padding-left: 15px;
        padding-right: 15px;
        box-sizing: border-box;
    }

    /* Carousel viewport */

    .rg-testimonial-wrapper {
        display: flex;

        width: 100%;
        max-width: 100%;

        gap: 0;

        overflow: hidden;

        margin: 0;

        padding: 0;

        box-sizing: border-box;

        touch-action: pan-y;
    }

    /* Individual card */

    .rg-testimonial-card {

        flex: 0 0 100%;

        width: 100%;

        max-width: 100%;

        min-width: 100%;

        box-sizing: border-box;

        margin: 0;

        padding: 25px 20px;

        transform: translateX(0);

        transition:
            transform 0.45s ease;

    }

    /* Remove previous tablet rule */

    .rg-testimonial-card:last-child {

        grid-column: auto;

        max-width: 100%;

        width: 100%;

        margin: 0;

    }

    /* Text */

    .rg-testimonial-card > p {

        min-height: auto;

        font-size: 13px;

        line-height: 1.7;

    }

    /* Client */

    .rg-client {

        display: flex;

        align-items: center;

        gap: 12px;

    }

    /* Dots */

    .rg-testimonial-dots {

        display: flex;

        justify-content: center;

        align-items: center;

        gap: 6px;

        margin-top: 25px;

    }

    .rg-testimonial-dots span {

        width: 6px;

        height: 6px;

        padding: 0;

        border-radius: 50%;

        background: #cbd2db;

        transition: 0.3s ease;

    }

    .rg-testimonial-dots span.active {

        width: 20px;

        height: 6px;

        border-radius: 5px;

        background: #f2b000;

    }

}

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

@media (max-width: 480px) {


    .rg-about-section-title h2 {

        font-size: 22px;

    }


    .rg-vm-card {

        padding: 35px 18px;

    }


    .rg-vm-content h3 {

        font-size: 18px;

    }


    .rg-vm-content p {

        font-size: 12.5px;

    }


    .rg-testimonial-card {

        padding: 22px 18px;

    }


    .rg-client {

        align-items: flex-start;

    }

}


/*----------------breadcrumb styles-----------*/


/* ==========================================
   BREADCRUMB BANNER
========================================== */

.rg-breadcrumb-banner {

    position: relative;

    width: 100%;

    min-height: 225px;

    display: flex;

    align-items: center;

    justify-content: center;

    background-image:
        url("../images/home/breadcrumb.png");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    overflow: hidden;

}


/* Dark Overlay */

.rg-breadcrumb-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            rgba(4, 29, 65, 0.75),
            rgba(4, 29, 65, 0.75)
        );

}


/* Container */

.rg-breadcrumb-container {

    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 15px;

}


/* Content */

.rg-breadcrumb-content {

    text-align: center;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

}


/* Heading */

.rg-breadcrumb-content h1 {

    margin: 0 0 15px;

    color: #ffffff;

    font-size: 52px;

    line-height: 1.2;

    font-weight: 700;

    /* text-transform: uppercase; */

}


/* Breadcrumb */

.rg-breadcrumb {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    font-size: 18px;

    font-weight: 500;

}


/* Home */

.rg-breadcrumb a {

    color: #f5b400;

    text-decoration: none;

    transition: 0.3s ease;

}


.rg-breadcrumb a:hover {

    color: #ffffff;

}


/* Slash */

.rg-breadcrumb span {

    color: #ffffff;

}


/* Current Page */

.rg-breadcrumb span:last-child {

    color: #ffffff;

}


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

@media (max-width: 991px) {

    .rg-breadcrumb-banner {

        min-height: 280px;

    }

    .rg-breadcrumb-content h1 {

        font-size: 42px;

    }

    .rg-breadcrumb {

        font-size: 14px;

    }

}


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

@media (max-width: 767px) {

    .rg-breadcrumb-banner {

        min-height: 230px;

        background-position: center;

    }

    .rg-breadcrumb-content h1 {

        font-size: 32px;

        margin-bottom: 10px;

    }

    .rg-breadcrumb {

        gap: 7px;

        font-size: 13px;

    }

}


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

@media (max-width: 480px) {

    .rg-breadcrumb-banner {

        min-height: 200px;

    }

    .rg-breadcrumb-content h1 {

        font-size: 27px;

    }

    .rg-breadcrumb {

        font-size: 12px;

    }

}



/*-----------------Projects page style code-----------*/


/* =====================================================
   PROJECTS SECTION
===================================================== */

.rg-projects-section {

    width: 100%;

    padding: 60px 0;

    background: #ffffff;

    overflow: hidden;

}


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

.rg-projects-container {

    width: 100%;

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 15px;

    box-sizing: border-box;

}


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

.rg-projects-section-title {

    text-align: center;

    max-width: 850px;

    margin: 0 auto 45px;

}


/* Small heading */

.rg-projects-section-title span {

    display: block;

    margin-bottom: 8px;

    color: #efb000;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;

}


/* Main heading */

.rg-projects-section-title h2 {

    margin: 0;

    color: #082b61;

    font-size: 34px;

    line-height: 1.3;

    font-weight: 700;

}


/* Description */

.rg-projects-section-title p {

    max-width: 700px;

    margin: 18px auto 0;

    color: #666666;

    font-size: 18px !important;

    line-height: 1.2;

}


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

.rg-projects-title-line {

    position: relative;

    width: 45px;

    height: 3px;

    margin: 15px auto 0;

    background: #efb000;

}


.rg-projects-title-line::before,
.rg-projects-title-line::after {

    content: "";

    position: absolute;

    top: 0;

    width: 10px;

    height: 3px;

    background: #efb000;

}


.rg-projects-title-line::before {

    left: -15px;

}


.rg-projects-title-line::after {

    right: -15px;

}


/* =====================================================
   PROJECT GRID
===================================================== */

.rg-projects-grid {

    display: grid;

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

    gap: 25px;

    width: 100%;

}


/* =====================================================
   PROJECT CARD
===================================================== */

.rg-project-card {

    width: 100%;

    min-width: 0;

    background: #ffffff;

    border: 1px solid #e5e5e5;

    border-radius: 6px;

    overflow: hidden;

    box-sizing: border-box;

    box-shadow:
        0 4px 15px rgba(0, 0, 0, 0.08);

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

}


/* Hover */

.rg-project-card:hover {

    transform: translateY(-6px);

    box-shadow:
        0 12px 30px rgba(8, 43, 97, 0.15);

}


/* =====================================================
   PROJECT IMAGE
===================================================== */

.rg-project-image {

    position: relative;

    width: 100%;

    height: 210px;

    overflow: hidden;

    background: #eeeeee;

}


.rg-project-image img {

    display: block;

    width: 100%;

    height: auto;

    object-fit: cover;

    transition:
        transform 0.5s ease;

}


/* Image hover */

.rg-project-card:hover
.rg-project-image img {

    transform: scale(1.06);

}


/* =====================================================
   PROJECT NUMBER
===================================================== */

.rg-project-number {

    position: absolute;

    top: 12px;

    left: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 34px;

    height: 28px;

    background: #082b61;

    color: #ffffff;

    font-size: 11px;

    font-weight: 700;

    border-radius: 3px;

}


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

.rg-project-content {

    padding: 20px 20px 22px;

}


/* Project title */

.rg-project-content h3 {

    margin: 0 0 10px;

    color: #082b61;

    font-size: 18px;

    line-height: 1.2;

    font-weight: 700;

}


/* Project description */

.rg-project-content p {

    margin: 0;

    color: #666666;

    font-size: 18px;

    line-height: 1.2;

}


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

@media (max-width: 991px) {

    .rg-projects-section {

        padding: 65px 0;

    }


    .rg-projects-container {

        max-width: 960px;

    }


    .rg-projects-section-title {

        margin-bottom: 35px;

    }


    .rg-projects-section-title h2 {

        font-size: 30px;

    }


    .rg-projects-grid {

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

        gap: 20px;

    }


    .rg-project-image {

        height: 200px;

    }


    .rg-project-content {

        padding: 18px;

    }

}


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

@media (max-width: 767px) {

    .rg-projects-section {

        width: 100%;

        padding: 50px 0;

        overflow: hidden;

    }


    .rg-projects-container {

        width: 100%;

        max-width: 100%;

        padding: 0 15px;

        box-sizing: border-box;

    }


    /* Section heading */

    .rg-projects-section-title {

        width: 100%;

        margin-bottom: 30px;

    }


    .rg-projects-section-title span {

        font-size: 10px;

        letter-spacing: 1.5px;

    }


    .rg-projects-section-title h2 {

        font-size: 24px;

        line-height: 1.35;

    }


    .rg-projects-section-title p {

        margin-top: 15px;

        font-size: 13px;

        line-height: 1.7;

    }


    /* =================================================
       PROJECT GRID
    ================================================= */

    .rg-projects-grid {

        display: grid;

        grid-template-columns: 1fr;

        width: 100%;

        gap: 20px;

    }


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

    .rg-project-card {

        width: 100%;

        max-width: 100%;

        min-width: 0;

    }


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

    .rg-project-image {

        width: 100%;

        height: 210px;

    }


    .rg-project-content {

        padding: 18px 17px 20px;

    }


    .rg-project-content h3 {

        font-size: 14px;

        line-height: 1.4;

        margin-bottom: 8px;

    }


    .rg-project-content p {

        font-size: 12.5px;

        line-height: 1.7;

    }

}


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

@media (max-width: 480px) {

    .rg-projects-section {

        padding: 45px 0;

    }


    .rg-projects-container {

        padding: 0 12px;

    }


    .rg-projects-section-title h2 {

        font-size: 21px;

    }


    .rg-projects-section-title p {

        font-size: 12px;

    }


    .rg-projects-grid {

        gap: 18px;

    }


    .rg-project-image {

        height: 190px;

    }


    .rg-project-number {

        top: 10px;

        left: 10px;

        width: 32px;

        height: 26px;

        font-size: 10px;

    }


    .rg-project-content {

        padding: 17px 15px 19px;

    }


    .rg-project-content h3 {

        font-size: 13px;

    }


    .rg-project-content p {

        font-size: 12px;

        line-height: 1.65;

    }

}


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

@media (max-width: 360px) {

    .rg-projects-section-title h2 {

        font-size: 20px;

    }


    .rg-project-image {

        height: 175px;

    }

}





/*--------------------clients page style code-----------*/

/* =====================================================
   RG CONSTRUCTION - CLIENTS PAGE
===================================================== */

.rg-clients-page {

    width: 100%;

    background: #ffffff;

    overflow: hidden;

}


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

.rg-clients-container {

    width: 100%;

    max-width: 1200px;

    margin: 0 auto;

    padding: 60px 15px;

    box-sizing: border-box;

}


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

.rg-clients-section-title {

    max-width: 800px;

    margin: 0 auto 45px;

    text-align: center;

}


.rg-clients-section-title > span {

    display: block;

    margin-bottom: 8px;

    color: #efb000;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;

}


.rg-clients-section-title h2 {

    margin: 0;

    color: #082b61;

    font-size: 34px;

    line-height: 1.3;

    font-weight: 700;

}


.rg-clients-section-title p {

    max-width: 700px;

    margin: 18px auto 0;

    color: #555555;

    font-size: 18px;

    line-height: 1.2;

}


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

.rg-clients-title-line {

    position: relative;

    width: 45px;

    height: 3px;

    margin: 15px auto 0;

    background: #efb000;

}


.rg-clients-title-line::before,
.rg-clients-title-line::after {

    content: "";

    position: absolute;

    top: 0;

    width: 10px;

    height: 3px;

    background: #efb000;

}


.rg-clients-title-line::before {

    left: -15px;

}


.rg-clients-title-line::after {

    right: -15px;

}


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

.rg-clients-grid {

    display: grid;

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

    gap: 18px;

    width: 100%;

}


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

.rg-client-card {

    position: relative;

    min-width: 0;

    min-height: 200px;

    padding: 30px 20px 25px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    background: #ffffff;

    border: 1px solid #e3e6eb;

    border-radius: 6px;

    box-sizing: border-box;

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

}


.rg-client-card:hover {

    transform: translateY(-5px);

    border-color: #efb000;

    box-shadow:
        0 12px 30px rgba(8, 43, 97, 0.12);

}


/* =====================================================
   NUMBER
===================================================== */

.rg-client-number {

    position: absolute;

    top: 13px;

    left: 50%;

    transform: translateX(-50%);

    width: 30px;

    height: 30px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #082b61;

    color: #ffffff;

    font-size: 10px;

    font-weight: 700;

}


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

.rg-client-logo {

    width: 100%;

    height: 90px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-top: 15px;

}


.rg-client-logo img {

    display: block;

    max-width: 150px;

    max-height: 93px;

    width: auto;

    height: auto;

    object-fit: contain;

}


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

.rg-client-card h3 {

    width: 100%;

    margin: 15px 0 0;

    color: #082b61;

    font-size: 16px;

    line-height: 1.2;

    font-weight: 700;

}


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

.rg-clients-cta {

    position: relative;

    width: 100%;

    background:
        linear-gradient(
            rgba(5, 35, 79, 0.95),
            rgba(5, 35, 79, 0.95)
        );

    overflow: hidden;

}


/* Optional background image */

.rg-clients-cta::before {

    content: "";

    position: absolute;

    inset: 0;

    background-image:
        url("assets/images/construction-bg.jpg");

    background-size: cover;

    background-position: center;

    opacity: 0.12;

    pointer-events: none;

}


.rg-clients-cta-container {

    position: relative;

    z-index: 1;

    width: 100%;

    max-width: 1200px;

    min-height: 180px;

    margin: 0 auto;

    padding: 35px 15px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;

    box-sizing: border-box;

}


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

.rg-clients-cta-content {

    padding-left: 18px;

    border-left: 3px solid #efb000;

}


.rg-clients-cta-content h2 {

    margin: 0 0 8px;

    color: #ffffff;

    font-size: 28px;

    line-height: 1.3;

    font-weight: 700;

}


.rg-clients-cta-content p {

    max-width: 500px;

    margin: 0;

    color: #ffffff;

    font-size: 14px;

    line-height: 1.7;

}


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

.rg-clients-cta-button {

    flex-shrink: 0;

    min-width: 190px;

    padding: 15px 22px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 20px;

    background: #efb000;

    border: 2px solid #efb000;

    border-radius: 3px;

    color: #082b61;

    text-decoration: none;

    font-size: 12px;

    font-weight: 700;

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

}


.rg-clients-cta-button span {

    font-size: 18px;

    line-height: 1;

}


.rg-clients-cta-button:hover {

    background: transparent;

    color: #ffffff;

}


/* =====================================================
   STATISTICS
===================================================== */

.rg-client-stats {

    width: 100%;

    background: #ffffff;

}


.rg-client-stats-container {

    width: 100%;

    max-width: 1200px;

    margin: 0 auto;

    padding: 45px 15px;

    display: grid;

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

    box-sizing: border-box;

}


/* =====================================================
   STAT
===================================================== */

.rg-client-stat {

    position: relative;

    padding: 0 25px;

    text-align: center;

}


.rg-client-stat:not(:last-child)::after {

    content: "";

    position: absolute;

    top: 5px;

    right: 0;

    width: 1px;

    height: 85px;

    background: #dddddd;

}


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

.rg-client-stat-icon {

    margin-bottom: 10px;

}


.rg-client-stat-icon i {

    color: #efb000;

    font-size: 36px;

}


/* =====================================================
   STAT NUMBER
===================================================== */

.rg-client-stat h3 {

    margin: 0;

    color: #082b61;

    font-size: 32px;

    line-height: 1.2;

    font-weight: 700;

}


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

.rg-client-stat p {

    margin: 5px 0 0;

    color: #333333;

    font-size: 13px;

    line-height: 1.5;

}


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

@media (max-width: 991px) {

    .rg-clients-container {

        padding: 65px 20px;

    }


    .rg-clients-section-title {

        margin-bottom: 35px;

    }


    .rg-clients-section-title h2 {

        font-size: 30px;

    }


    /* 2 columns */

    .rg-clients-grid {

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

        gap: 20px;

    }


    .rg-client-card {

        min-height: 190px;

    }


    .rg-client-logo img {

        max-width: 140px;

        max-height: 70px;

    }


    /* CTA */

    .rg-clients-cta-container {

        padding: 35px 20px;

    }


    .rg-clients-cta-content h2 {

        font-size: 24px;

    }


    /* Statistics */

    .rg-client-stats-container {

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

        gap: 35px 0;

        padding: 40px 20px;

    }


    .rg-client-stat:nth-child(2)::after {

        display: none;

    }


    .rg-client-stat:nth-child(3)::after {

        display: block;

    }

}


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

@media (max-width: 767px) {

    .rg-clients-container {

        width: 100%;

        max-width: 100%;

        padding: 50px 15px;

        box-sizing: border-box;

    }


    /* Section heading */

    .rg-clients-section-title {

        width: 100%;

        margin-bottom: 30px;

    }


    .rg-clients-section-title > span {

        font-size: 10px;

        letter-spacing: 1.5px;

    }


    .rg-clients-section-title h2 {

        font-size: 24px;

        line-height: 1.35;

    }


    .rg-clients-section-title p {

        margin-top: 15px;

        font-size: 13px;

        line-height: 1.7;

    }


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

    .rg-clients-grid {

        width: 100%;

        grid-template-columns: 1fr;

        gap: 16px;

    }


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

    .rg-client-card {

        width: 100%;

        max-width: 100%;

        min-height: 185px;

        padding: 30px 20px 22px;

    }


    .rg-client-logo {

        height: 80px;

    }


    .rg-client-logo img {

        max-width: 160px;

        max-height: 65px;

    }


    .rg-client-card h3 {

        margin-top: 12px;

        font-size: 12px;

    }


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

    .rg-clients-cta-container {

        width: 100%;

        min-height: auto;

        padding: 40px 20px;

        display: flex;

        flex-direction: column;

        align-items: flex-start;

        justify-content: center;

        gap: 25px;

        box-sizing: border-box;

    }


    .rg-clients-cta-content {

        padding-left: 15px;

    }


    .rg-clients-cta-content h2 {

        font-size: 23px;

        line-height: 1.35;

    }


    .rg-clients-cta-content p {

        font-size: 13px;

        line-height: 1.7;

    }


    .rg-clients-cta-button {

        width: 100%;

        min-width: 0;

        box-sizing: border-box;

    }


    /* =================================================
       STATISTICS
    ================================================= */

    .rg-client-stats-container {

        width: 100%;

        max-width: 100%;

        grid-template-columns: 1fr 1fr;

        gap: 0;

        padding: 35px 10px;

        box-sizing: border-box;

    }


    .rg-client-stat {

        padding: 20px 10px;

    }


    .rg-client-stat:nth-child(1)::after,
    .rg-client-stat:nth-child(3)::after {

        display: block;

    }


    .rg-client-stat:nth-child(2)::after,
    .rg-client-stat:nth-child(4)::after {

        display: none;

    }


    .rg-client-stat:nth-child(-n+2) {

        border-bottom: 1px solid #dddddd;

    }


    .rg-client-stat-icon i {

        font-size: 30px;

    }


    .rg-client-stat h3 {

        font-size: 26px;

    }


    .rg-client-stat p {

        font-size: 11px;

    }

}


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

@media (max-width: 480px) {

    .rg-clients-container {

        padding: 45px 12px;

    }


    .rg-clients-section-title h2 {

        font-size: 21px;

    }


    .rg-clients-section-title p {

        font-size: 12px;

    }


    .rg-client-card {

        min-height: 175px;

    }


    .rg-client-logo {

        height: 75px;

    }


    .rg-client-logo img {

        max-width: 145px;

        max-height: 60px;

    }


    .rg-client-card h3 {

        font-size: 11px;

    }


    .rg-clients-cta-container {

        padding: 35px 15px;

    }


    .rg-clients-cta-content h2 {

        font-size: 21px;

    }


    .rg-client-stats-container {

        padding: 25px 5px;

    }


    .rg-client-stat {

        padding: 18px 5px;

    }


    .rg-client-stat-icon i {

        font-size: 27px;

    }


    .rg-client-stat h3 {

        font-size: 24px;

    }


    .rg-client-stat p {

        font-size: 10px;

    }

}


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

@media (max-width: 360px) {

    .rg-clients-section-title h2 {

        font-size: 20px;

    }


    .rg-client-card {

        min-height: 165px;

        padding-left: 15px;

        padding-right: 15px;

    }


    .rg-client-logo img {

        max-width: 135px;

    }


    .rg-clients-cta-content h2 {

        font-size: 20px;

    }


    .rg-client-stat h3 {

        font-size: 22px;

    }

}





/*---------------gallery page style code-------------*/


/* =====================================================
   RG CONSTRUCTION GALLERY
===================================================== */

.rg-gallery-section {

    width: 100%;

    padding: 60px 0 60px;

    background: #ffffff;

    overflow: hidden;

    box-sizing: border-box;

}


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

.rg-gallery-container {

    width: 100%;

    max-width: 1320px;

    margin: 0 auto;

    padding: 0 25px;

    box-sizing: border-box;

}


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

.rg-gallery-title {

    max-width: 850px;

    margin: 0 auto 45px;

    text-align: center;

}


.rg-gallery-title span {

    display: block;

    margin-bottom: 8px;

    color: #efb000;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;

}


.rg-gallery-title h2 {

    margin: 0;

    color: #082b61;

    font-size: 36px;

    line-height: 1.3;

    font-weight: 700;

}


.rg-gallery-title p {

    max-width: 700px;

    margin: 18px auto 0;

    color: #555555;

    font-size: 18px !important;

    line-height: 1.2;

}


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

.rg-gallery-title-line {

    position: relative;

    width: 45px;

    height: 3px;

    margin: 15px auto 0;

    background: #efb000;

}


.rg-gallery-title-line::before,
.rg-gallery-title-line::after {

    content: "";

    position: absolute;

    top: 0;

    width: 10px;

    height: 3px;

    background: #efb000;

}


.rg-gallery-title-line::before {

    left: -15px;

}


.rg-gallery-title-line::after {

    right: -15px;

}


/* =====================================================
   GALLERY GRID
===================================================== */

.rg-gallery-grid {

    display: grid;

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

    gap: 14px;

    width: 100%;

}


/* =====================================================
   GALLERY ITEM
===================================================== */

.rg-gallery-item {

    position: relative;

    width: 100%;

    height: 205px;

    overflow: hidden;

    border-radius: 6px;

    background: #eeeeee;

    cursor: pointer;

}


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

.rg-gallery-item img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition:
        transform 0.5s ease;

}


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

.rg-gallery-overlay {

    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        rgba(8, 43, 97, 0.55);

    opacity: 0;

    transition:
        opacity 0.3s ease;

}


/* =====================================================
   PLUS
===================================================== */

.rg-gallery-plus {

    width: 55px;

    height: 55px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 2px solid #ffffff;

    border-radius: 50%;

    color: #ffffff;

    font-size: 34px;

    font-weight: 300;

    line-height: 1;

    transform: scale(0.7);

    transition:
        transform 0.3s ease;

}


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

.rg-gallery-item:hover img {

    transform: scale(1.08);

}


.rg-gallery-item:hover .rg-gallery-overlay {

    opacity: 1;

}


.rg-gallery-item:hover .rg-gallery-plus {

    transform: scale(1);

}


/* =====================================================
   LIGHTBOX
===================================================== */

.rg-gallery-lightbox {

    position: fixed;

    z-index: 99999;

    inset: 0;

    display: none;

    align-items: center;

    justify-content: center;

    padding: 50px 90px;

    background:
        rgba(0, 0, 0, 0.90);

    box-sizing: border-box;

}


.rg-gallery-lightbox.active {

    display: flex;

}


/* =====================================================
   LIGHTBOX IMAGE
===================================================== */

.rg-lightbox-image-wrapper {

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

}


.rg-lightbox-image-wrapper img {

    display: block;

    max-width: 100%;

    max-height: 90vh;

    width: auto;

    height: auto;

    object-fit: contain;

    border-radius: 5px;

}


/* =====================================================
   LIGHTBOX BUTTONS
===================================================== */

.rg-lightbox-close,
.rg-lightbox-prev,
.rg-lightbox-next {

    position: absolute;

    z-index: 100001;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 2px solid #ffffff;

    background: rgba(8, 43, 97, 0.85);

    color: #ffffff;

    cursor: pointer;

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

}


.rg-lightbox-close:hover,
.rg-lightbox-prev:hover,
.rg-lightbox-next:hover {

    background: #efb000;

    color: #082b61;

}


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

.rg-lightbox-close {

    top: 25px;

    right: 30px;

    width: 48px;

    height: 48px;

    border-radius: 50%;

    font-size: 34px;

    font-weight: 300;

    line-height: 1;

}


/* =====================================================
   PREVIOUS
===================================================== */

.rg-lightbox-prev {

    left: 30px;

    top: 50%;

    transform: translateY(-50%);

    width: 50px;

    height: 50px;

    border-radius: 50%;

    font-size: 25px;

}


.rg-lightbox-prev:hover {

    transform:
        translateY(-50%)
        scale(1.05);

}


/* =====================================================
   NEXT
===================================================== */

.rg-lightbox-next {

    right: 30px;

    top: 50%;

    transform: translateY(-50%);

    width: 50px;

    height: 50px;

    border-radius: 50%;

    font-size: 25px;

}


.rg-lightbox-next:hover {

    transform:
        translateY(-50%)
        scale(1.05);

}


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

@media (max-width: 991px) {

    .rg-gallery-section {

        padding: 65px 0;

    }


    .rg-gallery-container {

        padding: 0 20px;

    }


    .rg-gallery-title {

        margin-bottom: 35px;

    }


    .rg-gallery-title h2 {

        font-size: 31px;

    }


    .rg-gallery-grid {

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

        gap: 15px;

    }


    .rg-gallery-item {

        height: 220px;

    }


    .rg-gallery-lightbox {

        padding: 45px 70px;

    }


    .rg-lightbox-prev {

        left: 15px;

    }


    .rg-lightbox-next {

        right: 15px;

    }

}


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

@media (max-width: 767px) {

    .rg-gallery-section {

        width: 100%;

        padding: 50px 0;

    }


    .rg-gallery-container {

        width: 100%;

        max-width: 100%;

        padding: 0 15px;

    }


    /* Heading */

    .rg-gallery-title {

        width: 100%;

        margin-bottom: 30px;

    }


    .rg-gallery-title span {

        font-size: 10px;

        letter-spacing: 1.5px;

    }


    .rg-gallery-title h2 {

        font-size: 25px;

        line-height: 1.35;

    }


    .rg-gallery-title p {

        margin-top: 14px;

        font-size: 12.5px;

        line-height: 1.7;

    }


    /* Gallery */

    .rg-gallery-grid {

        width: 100%;

        grid-template-columns: 1fr;

        gap: 15px;

    }


    .rg-gallery-item {

        width: 100%;

        height: 230px;

    }


    /* Always make plus visible enough on mobile */

    .rg-gallery-overlay {

        opacity: 0;

    }


    .rg-gallery-plus {

        width: 48px;

        height: 48px;

        font-size: 29px;

    }


    /* Lightbox */

    .rg-gallery-lightbox {

        padding: 70px 15px;

    }


    .rg-lightbox-image-wrapper img {

        max-width: 100%;

        max-height: 75vh;

        border-radius: 4px;

    }


    .rg-lightbox-close {

        top: 15px;

        right: 15px;

        width: 42px;

        height: 42px;

        font-size: 30px;

    }


    .rg-lightbox-prev,
    .rg-lightbox-next {

        top: auto;

        bottom: 20px;

        transform: none;

        width: 45px;

        height: 45px;

        font-size: 21px;

    }


    .rg-lightbox-prev {

        left: 25px;

    }


    .rg-lightbox-next {

        right: 25px;

    }


    .rg-lightbox-prev:hover,
    .rg-lightbox-next:hover {

        transform: scale(1.05);

    }

}


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

@media (max-width: 480px) {

    .rg-gallery-section {

        padding: 45px 0;

    }


    .rg-gallery-container {

        padding: 0 12px;

    }


    .rg-gallery-title h2 {

        font-size: 22px;

    }


    .rg-gallery-title p {

        font-size: 12px;

    }


    .rg-gallery-grid {

        gap: 12px;

    }


    .rg-gallery-item {

        height: 205px;

    }


    .rg-gallery-lightbox {

        padding-left: 10px;

        padding-right: 10px;

    }


    .rg-lightbox-prev {

        left: 15px;

    }


    .rg-lightbox-next {

        right: 15px;

    }

}


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

@media (max-width: 360px) {

    .rg-gallery-title h2 {

        font-size: 20px;

    }


    .rg-gallery-item {

        height: 185px;

    }

}



/*--------------------contact page style code-----------*/



/* =====================================================
   RG CONSTRUCTION - CONTACT PAGE
===================================================== */

.rg-contact-section,
.rg-contact-map-section,
.rg-contact-cta {

    width: 100%;

    box-sizing: border-box;

}


/* =====================================================
   MAIN CONTACT SECTION
===================================================== */

.rg-contact-section {

    padding: 60px 20px;

    background: #ffffff;

}


.rg-contact-container {

    width: 100%;

    max-width: 1200px;

    margin: 0 auto;

}


.rg-contact-grid {

    display: grid;

    grid-template-columns:
        0.9fr 1.1fr;

    gap: 45px;

    align-items: stretch;

}


/* =====================================================
   LEFT CONTACT INFORMATION
===================================================== */

.rg-contact-info {

    background: #ffffff;

    border: 1px solid #e3e7ed;

    border-radius: 5px;

    box-shadow:
        0 10px 35px rgba(0, 0, 0, 0.05);

}


.rg-contact-info-inner {

    padding: 35px;

}


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

.rg-contact-small-title {

    display: block;

    color: #e3a900;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 1.5px;

    margin-bottom: 10px;

}


/* =====================================================
   MAIN HEADINGS
===================================================== */

.rg-contact-info h2,
.rg-contact-form-box h2 {

    margin: 0;

    color: #082b63;

    font-size: 32px;

    line-height: 1.25;

    font-weight: 700;

}


.rg-contact-title-line {

    width: 52px;

    height: 3px;

    background: #fbb900;

    margin: 15px 0 25px;

}


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

.rg-contact-description {

    margin: 0 0 20px;

    color: #666666;

    font-size: 18px;

    line-height: 1.2;

}


/* =====================================================
   CONTACT ITEM
===================================================== */

.rg-contact-item {

    display: flex;

    align-items: flex-start;

    gap: 18px;

    padding: 18px 0;

    border-bottom: 1px solid #e5e7eb;

}


.rg-contact-icon {

    width: 58px;

    min-width: 58px;

    height: 58px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #082b63;

    color: #ffffff;

    border-radius: 5px;

    font-size: 21px;

}


.rg-contact-item-content {

    flex: 1;

}


.rg-contact-item-content h4 {

    margin: 0 0 7px;

    color: #082b63;

    font-size: 17px;

    font-weight: 700;

}


.rg-contact-item-content p {

    margin: 0;

    color: #666666;

    font-size: 18px;

    line-height: 1.2;

}


/* =====================================================
   WORKING HOURS
===================================================== */

.rg-working-hours {

    display: flex;

    align-items: center;

    gap: 16px;

    margin-top: 20px;

    padding: 17px;

    background: #082b63;

    border-radius: 5px;

}


.rg-working-icon {

    width: 52px;

    min-width: 52px;

    height: 52px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 2px solid #fbb900;

    border-radius: 50%;

    color: #fbb900;

    font-size: 20px;

}


.rg-working-content {

    flex: 1;

}


.rg-working-content h4 {

    margin: 0 0 5px;

    color: #fbb900;

    font-size: 15px;

    font-weight: 700;

}


.rg-working-content p {

    margin: 0;

    color: #ffffff;

    font-size: 13px;

    line-height: 1.7;

}


/* =====================================================
   RIGHT CONTACT FORM
===================================================== */

.rg-contact-form-box {

    padding: 10px 0;

}


.rg-contact-form {

    width: 100%;

}


.rg-form-row {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 15px;

}


.rg-form-group {

    width: 100%;

    margin-bottom: 15px;

}


.rg-form-group input,
.rg-form-group textarea {

    display: block;

    width: 100%;

    box-sizing: border-box;

    border: 1px solid #d9dde4;

    border-radius: 5px;

    background: #ffffff;

    color: #172b4d;

    outline: none;

    font-family: inherit;

    font-size: 15px;

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

}


.rg-form-group input {

    height: 52px;

    padding: 0 16px;

}


.rg-form-group textarea {

    min-height: 175px;

    padding: 16px;

    resize: vertical;

}


.rg-form-group input::placeholder,
.rg-form-group textarea::placeholder {

    color: #7a8494;

}


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

    border-color: #fbb900;

    box-shadow:
        0 0 0 3px rgba(251, 185, 0, 0.10);

}


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

.rg-contact-submit {

    width: 100%;

    height: 52px;

    padding: 0 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

    border: none;

    border-radius: 4px;

    background: #082b63;

    color: #ffffff;

    font-family: inherit;

    font-size: 18px;

    font-weight: 700;

    /* text-transform: uppercase; */

    cursor: pointer;

    transition: all 0.3s ease;

}


.rg-contact-submit i {

    color: #fbb900;

    transition: transform 0.3s ease;

}


.rg-contact-submit:hover {

    background: #fbb900;

    color: #082b63;

}


.rg-contact-submit:hover i {

    color: #082b63;

    transform: translateX(5px);

}


/* =====================================================
   GOOGLE MAP SECTION
===================================================== */

.rg-contact-map-section {

    padding-top: 10px;

    background: #ffffff;

}


.rg-map-heading {

    padding: 30px 20px 20px;

    text-align: center;

}


.rg-map-title-wrapper {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

}


.rg-map-title-wrapper h2 {

    display: flex;

    align-items: center;

    gap: 9px;

    margin: 0;

    color: #082b63;

    font-size: 28px;

    font-weight: 700;

}


.rg-map-title-wrapper h2 i {

    color: #fbb900;

    font-size: 23px;

}


.rg-map-line {

    width: 70px;

    height: 2px;

    background: #d6dce5;

}


.rg-map-heading p {

    margin: 10px 0 0;

    color: #667085;

    font-size: 14px;

}


.rg-map-container {

    width: 100%;

    line-height: 0;

}


.rg-map-container iframe {

    display: block;

    width: 100%;

    height: 500px;

    border: 0;

}


/* =====================================================
   BOTTOM CTA
===================================================== */

.rg-contact-cta {

    position: relative;

    overflow: hidden;

    background-image:
        url("../images/contact-cta-bg.jpg");

    background-size: cover;

    background-position: center;

}


.rg-contact-cta-overlay {

    position: absolute;

    inset: 0;

    background:
        rgba(3, 31, 72, 0.94);

}


.rg-contact-cta-container {

    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 1100px;

    margin: 0 auto;

    padding: 35px 20px;

    box-sizing: border-box;

    display: flex;

    align-items: center;

    gap: 22px;

}


.rg-contact-cta-icon {

    width: 65px;

    min-width: 65px;

    height: 65px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 2px solid #fbb900;

    border-radius: 50%;

    color: #fbb900;

    font-size: 25px;

}


.rg-contact-cta-content {

    flex: 1;

}


.rg-contact-cta-content h3 {

    margin: 0 0 5px;

    color: #ffffff;

    font-size: 22px;

    font-weight: 700;

}


.rg-contact-cta-content p {

    margin: 0;

    color: #ffffff;

    font-size: 15px;

}


.rg-contact-cta-button {

    min-width: 180px;

    height: 52px;

    padding: 0 25px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 17px;

    box-sizing: border-box;

    border-radius: 4px;

    background: #fbb900;

    color: #082b63;

    text-decoration: none;

    font-size: 13px;

    font-weight: 700;

    transition: all 0.3s ease;

}


.rg-contact-cta-button i {

    transition: transform 0.3s ease;

}


.rg-contact-cta-button:hover {

    background: #ffffff;

}


.rg-contact-cta-button:hover i {

    transform: translateX(5px);

}


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

@media (max-width: 991px) {

    .rg-contact-section {

        padding: 60px 20px;

    }


    .rg-contact-grid {

        grid-template-columns: 1fr;

        gap: 40px;

    }


    .rg-contact-form-box {

        padding: 0;

    }


    .rg-map-container iframe {

        height: 420px;

    }

}


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

@media (max-width: 767px) {

    .rg-contact-section {

        padding: 45px 15px;

    }


    .rg-contact-grid {

        gap: 30px;

    }


    .rg-contact-info-inner {

        padding: 25px 20px;

    }


    .rg-contact-info h2,
    .rg-contact-form-box h2 {

        font-size: 27px;

    }


    .rg-contact-description {

        font-size: 13px;

        line-height: 1.7;

    }


    .rg-contact-item {

        gap: 13px;

        padding: 15px 0;

    }


    .rg-contact-icon {

        width: 50px;

        min-width: 50px;

        height: 50px;

        font-size: 18px;

    }


    .rg-contact-item-content h4 {

        font-size: 16px;

    }


    .rg-contact-item-content p {

        font-size: 12.5px;

    }


    .rg-working-hours {

        padding: 15px;

        gap: 12px;

    }


    .rg-working-icon {

        width: 45px;

        min-width: 45px;

        height: 45px;

        font-size: 18px;

    }


    .rg-working-content p {

        font-size: 12px;

    }


    /* Form */

    .rg-form-row {

        grid-template-columns: 1fr;

        gap: 0;

    }


    .rg-form-group input {

        height: 50px;

    }


    .rg-form-group textarea {

        min-height: 150px;

    }


    /* Map */

    .rg-map-heading {

        padding: 28px 15px 18px;

    }


    .rg-map-title-wrapper {

        gap: 8px;

    }


    .rg-map-title-wrapper h2 {

        font-size: 23px;

    }


    .rg-map-title-wrapper h2 i {

        font-size: 19px;

    }


    .rg-map-line {

        width: 30px;

    }


    .rg-map-heading p {

        font-size: 12px;

    }


    .rg-map-container iframe {

        height: 330px;

    }


    /* CTA */

    .rg-contact-cta-container {

        flex-direction: column;

        text-align: center;

        padding: 30px 20px;

        gap: 17px;

    }


    .rg-contact-cta-content h3 {

        font-size: 20px;

    }


    .rg-contact-cta-content p {

        font-size: 13px;

    }


    .rg-contact-cta-button {

        width: 100%;

        max-width: 250px;

    }

}


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

@media (max-width: 480px) {

    .rg-contact-section {

        padding: 35px 12px;

    }


    .rg-contact-info-inner {

        padding: 22px 16px;

    }


    .rg-contact-info h2,
    .rg-contact-form-box h2 {

        font-size: 25px;

    }


    .rg-contact-small-title {

        font-size: 12px;

    }


    .rg-contact-title-line {

        margin-bottom: 20px;

    }


    .rg-contact-item-content p {

        font-size: 12px;

    }


    .rg-map-container iframe {

        height: 290px;

    }


    .rg-contact-cta-icon {

        width: 55px;

        min-width: 55px;

        height: 55px;

        font-size: 21px;

    }

}




/*-----------------service page style code--------------*/


/* =====================================================
   SERVICES SECTION
===================================================== */

.rg-services-section {
    width: 100%;
    padding: 30px 20px 0px;
    background: #ffffff;
    box-sizing: border-box;
}


.rg-services-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}


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

.rg-services-heading {
    text-align: center;
    max-width: 850px;
    margin: 0 auto 45px;
}


.rg-services-heading span {
    display: block;

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

    letter-spacing: 2px;

    color: #f5b400;

    margin-bottom: 10px;
}


.rg-services-heading h2 {
    margin: 0;

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

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

    font-weight: 700;

    color: #0b2d63;
}


.rg-services-heading-line {
    position: relative;

    width: 75px;
    height: 4px;

    margin: 18px auto 20px;

    background: #f5b400;
}


.rg-services-heading-line::before,
.rg-services-heading-line::after {
    content: "";

    position: absolute;

    top: 50%;

    width: 15px;
    height: 4px;

    transform: translateY(-50%);

    background: #f5b400;
}


.rg-services-heading-line::before {
    right: calc(100% + 7px);
}


.rg-services-heading-line::after {
    left: calc(100% + 7px);
}


.rg-services-heading p {
    max-width: 760px;

    margin: 0 auto;

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

    color: #666666;
}


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

.rg-services-grid {
    display: grid;

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

    gap: 24px;
}


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

.rg-service-card {
    position: relative;

    display: flex;
    flex-direction: column;

    background: #ffffff;

    border: 1px solid #e3e7ed;

    border-radius: 6px;

    overflow: hidden;

    box-shadow: 0 4px 15px rgba(10, 42, 86, 0.07);

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


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

    box-shadow: 0 14px 30px rgba(10, 42, 86, 0.13);
}


/* =====================================================
   CARD TOP
===================================================== */

.rg-service-card-top {
    display: flex;

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

    gap: 14px;

    /* min-height: 70px; */
    min-height:0px;

    padding: 16px 18px 12px;
}


.rg-service-number {
    flex-shrink: 0;

    width: 38px;
    height: 38px;

    display: flex;

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

    background: #0b2d63;

    color: #ffffff;

    border-radius: 5px;

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


.rg-service-card-top h3 {
    margin: 0;

    font-size: 17px;
    line-height: 1.35;

    font-weight: 700;

    color: #0b2d63;
}


/* Yellow line below title */

.rg-service-card-top h3::after {
    content: "";

    display: block;

    width: 35px;
    height: 3px;

    margin-top: 7px;

    background: #f5b400;
}


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

.rg-service-image {
    width: 100%;

    padding: 0 18px;

    box-sizing: border-box;
}


.rg-service-image img {
    display: block;

    width: 100%;
    height: 190px;

    object-fit: cover;

    border-radius: 4px;

    transition: transform 0.4s ease;
}


.rg-service-card:hover .rg-service-image img {
    transform: scale(1.03);
}


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

.rg-service-content {
    display: flex;
    flex-direction: column;

    flex: 1;

    padding: 16px 18px 20px;
}


.rg-service-content p {
    margin: 0 0 18px;

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

    color: #555f70;
}


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

.rg-service-read-more {
    display: inline-flex;

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

    gap: 10px;

    /* width: fit-content; */

    margin-top: auto;

    text-decoration: none;

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

    color: #0b2d63;

    transition: color 0.3s ease;
}


.rg-service-read-more i {
    color: #f5b400;

    font-size: 14px;

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


.rg-service-read-more:hover {
    color: #f5b400;
}


.rg-service-read-more:hover i {
    transform: translateX(5px);
    color: #0b2d63;
}


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

@media (max-width: 991px) {

    .rg-services-section {
        padding: 65px 20px 75px;
    }


    .rg-services-heading {
        margin-bottom: 35px;
    }


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


    .rg-services-heading p {
        font-size: 15px;
    }


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

        gap: 20px;
    }


    .rg-service-image img {
        height: 200px;
    }


    .rg-service-card-top h3 {
        font-size: 16px;
    }

}


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

@media (max-width: 767px) {

    .rg-services-section {
        padding: 50px 15px 60px;
    }


    .rg-services-container {
        width: 100%;
    }


    .rg-services-heading {
        margin-bottom: 30px;
    }


    .rg-services-heading span {
        font-size: 12px;

        letter-spacing: 1.5px;

        margin-bottom: 8px;
    }


    .rg-services-heading h2 {
        font-size: 28px;

        line-height: 1.3;
    }


    .rg-services-heading-line {
        width: 60px;

        margin: 14px auto 16px;
    }


    .rg-services-heading p {
        font-size: 14px;

        line-height: 1.7;
    }


    /* One card per row */

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

        gap: 20px;
    }


    .rg-service-card {
        width: 100%;
    }


    .rg-service-card-top {
        min-height: 65px;

        padding: 14px 15px 10px;

        gap: 12px;
    }


    .rg-service-number {
        width: 36px;
        height: 36px;

        font-size: 13px;
    }


    .rg-service-card-top h3 {
        font-size: 16px;

        line-height: 1.3;
    }


    .rg-service-image {
        padding: 0 15px;
    }


    .rg-service-image img {
        width: 100%;
        height: 210px;
    }


    .rg-service-content {
        padding: 15px 15px 20px;
    }


    .rg-service-content p {
        font-size: 14px;

        line-height: 1.7;

        margin-bottom: 16px;
    }


    .rg-service-read-more {
        font-size: 14px;
    }

}


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

@media (max-width: 480px) {

    .rg-services-section {
        padding: 42px 12px 50px;
    }


    .rg-services-heading h2 {
        font-size: 25px;
    }


    .rg-services-heading p {
        font-size: 13px;
    }


    .rg-service-card-top {
        padding: 13px 13px 9px;
    }


    .rg-service-number {
        width: 34px;
        height: 34px;

        font-size: 12px;
    }


    .rg-service-card-top h3 {
        font-size: 15px;
    }


    .rg-service-image {
        padding: 0 13px;
    }


    .rg-service-image img {
        height: 190px;
    }


    .rg-service-content {
        padding: 14px 13px 18px;
    }

}



.service-page-heading{
    text-transform: none !important;
}




/*---------------------ultra poly service page style code-------------*/


/* =========================================================
   ULTRA POLY PAGE
========================================================= */

.ultra-poly-page {
    --rg-navy: #092e67;
    --rg-dark-navy: #061f47;
    --rg-blue: #1456a3;
    --rg-yellow: #f5b400;
    --rg-light-yellow: #fff5d9;
    --rg-white: #ffffff;
    --rg-light: #f7f9fc;
    --rg-border: #dfe5ed;
    --rg-text: #222b38;
    --rg-muted: #5e6877;

    width: 100%;
    overflow: hidden;
    background: #ffffff;

    color: var(--rg-text);

    box-sizing: border-box;
}


.ultra-poly-page *,
.ultra-poly-page *::before,
.ultra-poly-page *::after {
    box-sizing: border-box;
}


.ultra-poly-container {
    width: 100%;
    max-width: 1364px;

    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
}


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

.ultra-poly-hero {
    position: relative;

    min-height: 470px;

    display: flex;
    align-items: center;

    background:
        linear-gradient(
            90deg,
            rgba(4, 28, 64, 0.98) 0%,
            rgba(6, 35, 76, 0.92) 38%,
            rgba(7, 39, 82, 0.50) 65%,
            rgba(5, 29, 61, 0.30) 100%
        ),
        url("../images/services/ultra-poly-hero.jpg")
        center / cover no-repeat;
}


.ultra-poly-hero-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            135deg,
            rgba(5, 30, 67, 0.35),
            transparent 50%
        );
}


.ultra-poly-hero .ultra-poly-container {
    position: relative;
    z-index: 2;
}


.ultra-poly-breadcrumb {
    position: absolute;

    top: -175px;
    left: 20px;

    display: flex;
    align-items: center;

    gap: 10px;

    color: #ffffff;

    font-size: 13px;
}


.ultra-poly-breadcrumb span {
    color: var(--rg-yellow);

    font-size: 20px;
}


.ultra-poly-breadcrumb strong {
    color: #ffffff;
}


.ultra-poly-hero-content {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;
}


.ultra-poly-hero-text {
    width: 52%;
}


.ultra-poly-small-title {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 10px;

    color: var(--rg-yellow);

    font-size: 14px;

    font-weight: 800;

    letter-spacing: 1px;
}


.ultra-poly-small-title::before {
    content: "";

    width: 8px;
    height: 8px;

    background: var(--rg-yellow);
}


.ultra-poly-hero h1 {
    margin: 0;

    color: #ffffff;

    font-size: 64px;

    line-height: 1;

    font-weight: 800;

    letter-spacing: 1px;

    position: relative;

    padding-left: 18px;
}


.ultra-poly-hero h1::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 4px;
    height: 100%;

    background: var(--rg-yellow);
}


.ultra-poly-hero h2 {
    margin: 12px 0 18px;

    color: var(--rg-yellow);

    font-size: 24px;

    font-weight: 700;
}


.ultra-poly-hero-text > p {
    max-width: 570px;

    margin: 0;

    color: rgba(255,255,255,0.92);

    font-size: 18px;

    line-height: 1.2;
}


/* Hero Features */

.ultra-poly-hero-features {
    display: grid;

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

    margin-top: 35px;
}


.ultra-poly-hero-feature {
    display: flex;

    align-items: center;

    gap: 10px;

    min-height: 55px;

    padding: 0 14px;

    border-right: 1px solid rgba(255,255,255,0.25);
}


.ultra-poly-hero-feature:first-child {
    padding-left: 0;
}


.ultra-poly-hero-feature:last-child {
    border-right: none;
}


.ultra-poly-feature-icon {
    flex-shrink: 0;

    width: 32px;
    height: 32px;

    display: flex;

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

    color: var(--rg-yellow);

    font-size: 22px;
}


.ultra-poly-hero-feature span {
    color: #ffffff;

    font-size: 15px;

    line-height: 1.2;
}


.ultra-poly-hero-product {
    width: 43%;

    align-self: stretch;

    display: flex;

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


.ultra-poly-hero-product img {
    display: block;

    width: 100%;
    /* max-width: 470px; */

    /* max-height: 420px; */
    height:auto;

    object-fit: contain;
}


/* =========================================================
   OVERVIEW
========================================================= */

.ultra-poly-overview {
    padding: 60px 0 14px;

    background: #ffffff;
}


.ultra-poly-overview-card {
    display: grid;

    grid-template-columns: 40% 60%;

    align-items: stretch;

    border: 1px solid var(--rg-border);

    border-radius: 10px;

    overflow: hidden;

    background: #ffffff;

    box-shadow: 0 5px 18px rgba(8, 37, 79, 0.06);
}


.ultra-poly-overview-image {
    min-height: 260px;
}


.ultra-poly-overview-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


.ultra-poly-overview-content {
    padding: 30px;
}


.ultra-poly-section-label {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    color: var(--rg-yellow);

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 0.8px;
}


.ultra-poly-section-label::after {
    content: "";

    width: 30px;
    height: 2px;

    background: var(--rg-yellow);
}


.ultra-poly-overview-content h2,
.ultra-poly-spec-content h2,
.ultra-poly-procedure h2 {
    margin: 7px 0 14px;

    color: var(--rg-navy);

    font-size: 28px;

    line-height: 1.25;

    font-weight: 800;
}


.ultra-poly-overview-content p {
    margin: 0;

    /* color: var(--rg-text); */
    color:#666666;

    font-size: 18px;

    line-height: 1.2;
}


.ultra-poly-overview-points {
    display: flex;

    gap: 15px;

    margin-top: 20px;
}


.ultra-poly-overview-points div {
    flex: 1;

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 10px;

    border: 1px solid var(--rg-border);

    border-radius: 5px;

    color: var(--rg-navy);

    font-size: 15px;

    font-weight: 700;
}


.ultra-poly-overview-points i {
    color: var(--rg-blue);

    font-size: 20px;
}


/* =========================================================
   SPECIFICATIONS
========================================================= */

.ultra-poly-specifications {
    padding: 30px 0;

    background: #ffffff;
}


.ultra-poly-spec-card {
    display: grid;

    grid-template-columns: 60% 40%;

    border: 1px solid var(--rg-border);

    border-radius: 10px;

    overflow: hidden;
}


.ultra-poly-spec-content {
    padding: 28px;
}


.ultra-poly-table-wrapper {
    width: 100%;

    overflow-x: auto;
}


.ultra-poly-table {
    width: 100%;

    border-collapse: collapse;

    font-size: 18px;
}


.ultra-poly-table thead th {
    padding: 10px;

    background: var(--rg-navy);

    color: #ffffff;

    text-align: left;

    font-weight: 700;
}


.ultra-poly-table tbody td {
    padding: 9px 10px;

    border: 1px solid var(--rg-border);

    color: var(--rg-text);
}


.ultra-poly-table tbody td:first-child {
    width: 50%;

    font-weight: 600;
}


.ultra-poly-table td i {
    width: 22px;

    margin-right: 7px;

    color: var(--rg-navy);
}


.ultra-poly-spec-image {
    min-height: 350px;

    background: #eef5ff;
}


.ultra-poly-spec-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


/* =========================================================
   TECHNICAL PROCEDURES
========================================================= */

.ultra-poly-procedure {
    padding: 15px 0;

    background: #ffffff;
}


.ultra-poly-procedure-card {
    padding: 30px 20px;

    border: 1px solid var(--rg-border);

    border-radius: 10px;

    background: #ffffff;

    box-shadow: 0 4px 15px rgba(8, 37, 79, 0.04);
}


.ultra-poly-centered-heading {
    text-align: center;

    margin-bottom: 25px;
}


.ultra-poly-centered-heading h2 {
    margin-bottom: 0;
}


.ultra-poly-steps {
    display: flex;

    align-items: flex-start;

    justify-content: center;

    gap: 0;

    width: 100%;
}


.ultra-poly-step {
    flex: 1;

    min-width: 0;

    text-align: center;

    padding: 0 8px;
}


.ultra-poly-step-icon {
    width: 52px;
    height: 52px;

    display: flex;

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

    margin: 0 auto 8px;

    border-radius: 50%;

    background: var(--rg-navy);

    color: #ffffff;

    font-size: 20px;

    border: 3px solid #ffffff;

    box-shadow: 0 0 0 1px var(--rg-navy);
}


.ultra-poly-step-number {
    display: block;

    color: var(--rg-yellow);

    font-size: 13px;

    font-weight: 800;
}


.ultra-poly-step h3 {
    margin: 4px 0 5px;

    color: var(--rg-navy);

    font-size: 20px;

    text-transform: capitalize;
}


.ultra-poly-step p {
    margin: 0 auto;

    max-width: 135px;

    /* color: var(--rg-muted); */
    color:#666666;

    font-size: 16px;

    line-height: 1.2;
}


.ultra-poly-step-arrow {
    flex-shrink: 0;

    padding-top: 20px;

    color: #9ba6b5;

    font-size: 22px;
}


/* Technical Table */

.ultra-poly-technical-area {
    display: grid;

    grid-template-columns: 65% 35%;

    align-items: center;

    gap: 20px;

    margin-top: 25px;
}


.ultra-poly-technical-table {
    min-width: 0;
}


.ultra-poly-technical-table table {
    width: 100%;

    border-collapse: collapse;

    font-size: 16x;
}


.ultra-poly-technical-table th {
    padding: 9px 8px;

    background: var(--rg-navy);

    color: #ffffff;

    text-align: left;
}


.ultra-poly-technical-table td {
    padding: 8px;

    border: 1px solid var(--rg-border);
}


.ultra-poly-table-note {
    padding: 8px 10px;

    border: 1px solid var(--rg-border);

    border-top: none;

    background: #f7f9fc;

    font-size: 16px;

    line-height: 1.2;

    color: var(--rg-muted);
}


.ultra-poly-technical-image {
    width: 100%;

    height: 230px;
}


.ultra-poly-technical-image img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}


/* =========================================================
   BENEFITS
========================================================= */

.ultra-poly-benefits {
    padding: 30px 0 60px;

    background: #ffffff;
}


.ultra-poly-benefits-grid {
    display: grid;

    grid-template-columns: 40% 60%;

    gap: 15px;
}


.ultra-poly-recycling-card,
.ultra-poly-advantages-card {
    padding: 25px;

    border: 1px solid var(--rg-border);

    border-radius: 10px;

    background: #ffffff;
}


.ultra-poly-benefit-item {
    display: flex;

    gap: 12px;

    margin-top: 20px;
}


.ultra-poly-benefit-icon {
    flex-shrink: 0;

    width: 38px;
    height: 38px;

    display: flex;

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

    border-radius: 50%;

    background: var(--rg-navy);

    color: #ffffff;

    font-size: 15px;
}


.ultra-poly-benefit-item h3 {
    margin: 0 0 3px;

    color: var(--rg-navy);

    font-size: 20px;
}


.ultra-poly-benefit-item p {
    margin: 0;

    /* color: var(--rg-muted); */
    color:#666666;

    font-size: 18px;

    line-height: 1.2;
}


/* Advantages */

.ultra-poly-advantages-grid {
    display: grid;

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

    gap: 18px;

    margin-top: 20px;
}


.ultra-poly-advantage {
    display: flex;

    gap: 10px;
}


.ultra-poly-advantage > i {
    flex-shrink: 0;

    width: 36px;
    height: 36px;

    display: flex;

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

    border-radius: 50%;

    background: #f1f5fa;

    color: var(--rg-navy);

    font-size: 24px;
}


.ultra-poly-advantage h3 {
    margin: 0 0 3px;

    color: var(--rg-navy);

    font-size: 20px;
}


.ultra-poly-advantage p {
    margin: 0;

    /* color: var(--rg-muted); */
    color:#666666;

    font-size: 18px;

    line-height: 1.2;
}


/* =========================================================
   SUPPORT
========================================================= */

.ultra-poly-support {
    padding: 15px 0 40px;

    background: #ffffff;
}


.ultra-poly-support-card {
    display: grid;

    grid-template-columns: 28% 50% 22%;

    align-items: stretch;

    overflow: hidden;

    border-radius: 9px;

    background: var(--rg-navy);

    color: #ffffff;
}


.ultra-poly-support-intro {
    padding: 25px;
}


.ultra-poly-support-intro .ultra-poly-section-label {
    color: var(--rg-yellow);
}


.ultra-poly-support-intro p {
    margin: 15px 0 0;

    font-size: 11px;

    line-height: 1.7;

    color: rgba(255,255,255,0.9);
}


.ultra-poly-contact-info {
    display: grid;

    grid-template-columns: 1.3fr 0.8fr 1fr;

    align-items: center;

    padding: 20px;

    background: #ffffff;

    color: var(--rg-text);
}


.ultra-poly-contact-item {
    display: flex;

    gap: 10px;

    padding: 0 14px;

    border-right: 1px solid var(--rg-border);
}


.ultra-poly-contact-item:last-child {
    border-right: none;
}


.ultra-poly-contact-icon {
    flex-shrink: 0;

    width: 34px;
    height: 34px;

    display: flex;

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

    border-radius: 50%;

    background: var(--rg-navy);

    color: #ffffff;

    font-size: 13px;
}


.ultra-poly-contact-item span {
    display: block;

    margin-bottom: 4px;

    color: var(--rg-navy);

    font-size: 10px;

    font-weight: 800;
}


.ultra-poly-contact-item p {
    margin: 0;

    color: var(--rg-text);

    font-size: 10px;

    line-height: 1.5;
}


.ultra-poly-support-type {
    display: flex;

    flex-direction: column;

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

    padding: 20px;

    background: #09285a;

    text-align: center;

    border-left: 1px solid rgba(255,255,255,0.2);
}


.ultra-poly-support-type i {
    margin-bottom: 8px;

    color: var(--rg-yellow);

    font-size: 28px;
}


.ultra-poly-support-type span {
    color: var(--rg-yellow);

    font-size: 11px;

    font-weight: 800;
}


.ultra-poly-support-type p {
    max-width: 150px;

    margin: 7px auto 0;

    color: #ffffff;

    font-size: 10px;

    line-height: 1.5;
}


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

@media (max-width: 991px) {

    .ultra-poly-hero {
        min-height: 500px;
    }


    .ultra-poly-hero h1 {
        font-size: 52px;
    }


    .ultra-poly-hero h2 {
        font-size: 20px;
    }


    .ultra-poly-hero-text {
        width: 55%;
    }


    .ultra-poly-hero-product {
        width: 42%;
    }


    .ultra-poly-hero-features {
        grid-template-columns: repeat(2, 1fr);

        row-gap: 10px;
    }


    .ultra-poly-hero-feature:nth-child(2) {
        border-right: none;
    }


    .ultra-poly-overview-card,
    .ultra-poly-spec-card {
        grid-template-columns: 1fr 1fr;
    }


    .ultra-poly-overview-content {
        padding: 22px;
    }


    .ultra-poly-overview-points {
        flex-wrap: wrap;
    }


    .ultra-poly-overview-points div {
        min-width: 130px;
    }


    .ultra-poly-steps {
        flex-wrap: wrap;

        row-gap: 25px;
    }


    .ultra-poly-step {
        flex: 0 0 30%;
    }


    .ultra-poly-step-arrow {
        display: none;
    }


    .ultra-poly-technical-area {
        grid-template-columns: 1fr;
    }


    .ultra-poly-technical-image {
        height: 180px;
    }


    .ultra-poly-benefits-grid {
        grid-template-columns: 1fr 1fr;
    }


    .ultra-poly-support-card {
        grid-template-columns: 1fr;
    }


    .ultra-poly-contact-info {
        grid-template-columns: repeat(3, 1fr);
    }


    .ultra-poly-support-type {
        min-height: 130px;

        border-left: none;

        border-top: 1px solid rgba(255,255,255,0.2);
    }

}


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

@media (max-width: 767px) {

    .ultra-poly-container {
        padding-left: 15px;
        padding-right: 15px;
    }


    /* Hero */

    .ultra-poly-hero {
        min-height: auto;

        padding: 55px 0 35px;

        background-position: center;
    }


    .ultra-poly-breadcrumb {
        position: static;

        margin-bottom: 30px;

        font-size: 11px;
    }


    .ultra-poly-hero-content {
        flex-direction: column;

        align-items: stretch;

        gap: 20px;
    }


    .ultra-poly-hero-text {
        width: 100%;
    }


    .ultra-poly-hero h1 {
        font-size: 43px;

        padding-left: 13px;
    }


    .ultra-poly-hero h2 {
        font-size: 17px;

        line-height: 1.4;
    }


    .ultra-poly-hero-text > p {
        font-size: 13px;

        line-height: 1.7;
    }


    .ultra-poly-hero-product {
        width: 100%;

        min-height: 250px;
    }


    .ultra-poly-hero-product img {
        max-height: 300px;
    }


    .ultra-poly-hero-features {
        grid-template-columns: 1fr 1fr;

        margin-top: 25px;
    }


    .ultra-poly-hero-feature {
        padding: 8px;

        border-right: 1px solid rgba(255,255,255,0.2);
    }


    .ultra-poly-hero-feature:nth-child(2),
    .ultra-poly-hero-feature:nth-child(4) {
        border-right: none;
    }


    .ultra-poly-feature-icon {
        width: 28px;
        height: 28px;

        font-size: 18px;
    }


    .ultra-poly-hero-feature span {
        font-size: 9px;
    }


    /* Overview */

    .ultra-poly-overview {
        padding: 15px 0 8px;
    }


    .ultra-poly-overview-card {
        display: flex;

        flex-direction: column;
    }


    .ultra-poly-overview-image {
        min-height: 210px;

        height: 210px;
    }


    .ultra-poly-overview-content {
        padding: 20px;
    }


    .ultra-poly-overview-content h2,
    .ultra-poly-spec-content h2,
    .ultra-poly-procedure h2 {
        font-size: 23px;
    }


    .ultra-poly-overview-content p {
        font-size: 13px;

        line-height: 1.7;
    }


    .ultra-poly-overview-points {
        flex-direction: column;

        gap: 8px;
    }


    .ultra-poly-overview-points div {
        width: 100%;
    }


    /* Specifications */

    .ultra-poly-specifications {
        padding: 8px 0;
    }


    .ultra-poly-spec-card {
        display: flex;

        flex-direction: column;
    }


    .ultra-poly-spec-content {
        padding: 20px;
    }


    .ultra-poly-table {
        min-width: 500px;

        font-size: 12px;
    }


    .ultra-poly-spec-image {
        height: 250px;

        min-height: 250px;
    }


    /* Procedure */

    .ultra-poly-procedure {
        padding: 8px 0;
    }


    .ultra-poly-procedure-card {
        padding: 22px 12px;
    }


    .ultra-poly-centered-heading {
        margin-bottom: 20px;
    }


    .ultra-poly-steps {
        display: grid;

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

        gap: 22px 10px;
    }


    .ultra-poly-step {
        width: 100%;

        padding: 0 5px;
    }


    .ultra-poly-step-icon {
        width: 48px;
        height: 48px;
    }


    .ultra-poly-step h3 {
        font-size: 12px;
    }


    .ultra-poly-step p {
        font-size: 10px;

        max-width: 150px;
    }


    .ultra-poly-technical-area {
        margin-top: 25px;
    }


    .ultra-poly-technical-table {
        width: 100%;

        overflow-x: auto;
    }


    .ultra-poly-technical-table table {
        min-width: 600px;

        font-size: 11px;
    }


    .ultra-poly-technical-image {
        height: 170px;
    }


    /* Benefits */

    .ultra-poly-benefits {
        padding: 8px 0 15px;
    }


    .ultra-poly-benefits-grid {
        grid-template-columns: 1fr;
    }


    .ultra-poly-recycling-card,
    .ultra-poly-advantages-card {
        padding: 20px;
    }


    .ultra-poly-benefit-item {
        margin-top: 17px;
    }


    .ultra-poly-advantages-grid {
        grid-template-columns: 1fr;

        gap: 18px;
    }


    /* Support */

    .ultra-poly-support {
        padding: 10px 0 25px;
    }


    .ultra-poly-support-card {
        grid-template-columns: 1fr;
    }


    .ultra-poly-support-intro {
        padding: 20px;
    }


    .ultra-poly-contact-info {
        grid-template-columns: 1fr;

        gap: 0;

        padding: 10px 15px;
    }


    .ultra-poly-contact-item {
        padding: 14px 0;

        border-right: none;

        border-bottom: 1px solid var(--rg-border);
    }


    .ultra-poly-contact-item:last-child {
        border-bottom: none;
    }


    .ultra-poly-contact-item p {
        font-size: 11px;
    }


    .ultra-poly-support-type {
        min-height: 150px;
    }

}


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

@media (max-width: 480px) {

    .ultra-poly-hero {
        padding-top: 45px;
    }


    .ultra-poly-hero h1 {
        font-size: 36px;
    }


    .ultra-poly-hero h2 {
        font-size: 15px;
    }


    .ultra-poly-hero-features {
        grid-template-columns: 1fr;
    }


    .ultra-poly-hero-feature,
    .ultra-poly-hero-feature:nth-child(2),
    .ultra-poly-hero-feature:nth-child(4) {
        border-right: none;

        border-bottom: 1px solid rgba(255,255,255,0.15);
    }


    .ultra-poly-hero-feature:last-child {
        border-bottom: none;
    }


    .ultra-poly-overview-content h2,
    .ultra-poly-spec-content h2,
    .ultra-poly-procedure h2 {
        font-size: 21px;
    }


    .ultra-poly-section-label {
        font-size: 11px;
    }


    .ultra-poly-steps {
        grid-template-columns: 1fr;
    }


    .ultra-poly-step p {
        max-width: 230px;
    }


    .ultra-poly-technical-image {
        height: 130px;
    }

}


.rg-services-page{
    padding-top:60px !important;
    padding-bottom:60px !important;
}



/*----------------active link style code------------*/


/* Desktop active menu */

.rg-desktop-menu ul li a.active {
    color: #f5b400;
    position: relative;
}


/* Active underline */




/* Mobile active link */

.rg-mobile-menu ul li a.active {
    color: #f5b400;
    font-weight: 700;
}


/* Mobile Services active */

.rg-mobile-service-title a.active {
    color: #f5b400;
}




/*-------------------------------Building Constrcution service code------------*/


/* =========================================================
   BUILDING CONSTRUCTION PAGE
========================================================= */

.building-construct-page {
    width: 100%;
    background: #ffffff;
    color: #14233f;
    overflow: hidden;
    box-sizing: border-box;
}

.building-construct-page *,
.building-construct-page *::before,
.building-construct-page *::after {
    box-sizing: border-box;
}


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

.building-construct-hero {
    width: 100%;
    background: #082653;
    overflow: hidden;
}

.building-construct-hero-container {
    width: 100%;
    max-width: 1500px;
    min-height: 355px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 48% 52%;
}


/* Hero Content */

.building-construct-hero-content {
    position: relative;
    z-index: 2;
    padding: 50px 40px 45px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #082653;
}

.building-construct-hero-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    color: #f2a900;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.building-construct-hero-label i {
    font-size: 8px;
}


.building-construct-hero-title {
    margin: 0;
    padding-left: 15px;
    border-left: 3px solid #f2a900;
    color: #ffffff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(42px, 4.2vw, 68px);
    font-weight: 700;
    line-height: 0.98;
    text-transform: uppercase;
}

.building-construct-hero-title span {
    display: block;
    color: #f2a900;
}


.building-construct-hero-subtitle {
    max-width: 600px;
    margin: 20px 0 10px;
    color: #ffffff;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.45;
}

.building-construct-hero-subtitle strong {
    display: block;
    color: #f2a900;
    font-weight: 700;
}


.building-construct-hero-description {
    max-width: 620px;
    margin: 0;
    color: #ffffff;
    font-size: 18px;
    line-height: 1.2;
}


/* Hero Highlights */

.building-construct-hero-highlights {
    display: flex;
    align-items: stretch;
    margin-top: 24px;
}

.building-construct-hero-highlight {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 43px;
    padding: 0 18px;
    border-right: 1px solid rgba(255, 255, 255, 0.25);
}

.building-construct-hero-highlight:first-child {
    padding-left: 0;
}

.building-construct-hero-highlight:last-child {
    border-right: 0;
}

.building-construct-hero-highlight-icon {
    color: #f2a900;
    font-size: 20px;
}

.building-construct-hero-highlight span {
    color: #ffffff;
    font-size: 16px;
    line-height: 1.2;
}


/* Hero Image */

.building-construct-hero-image {
    position: relative;
    min-height: 355px;
    overflow: hidden;
}

/* .building-construct-hero-image::before {
    content: "";
    position: absolute;
    z-index: 2;
    left: -35px;
    top: -10%;
    width: 75px;
    height: 120%;
    background: #f2a900;
    transform: skewX(-22deg);
}

.building-construct-hero-image::after {
    content: "";
    position: absolute;
    z-index: 3;
    left: -18px;
    top: -10%;
    width: 25px;
    height: 120%;
    background: #ffffff;
    transform: skewX(-22deg);
} */

.building-construct-hero-image img {
    width: 100%;
    height: 100%;
    min-height: 355px;
    display: block;
    object-fit: cover;
}


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

.building-construct-container {
    width: calc(100% - 80px);
    max-width: 1400px;
    margin: 0 auto;
    padding: 32px 0 55px;
}


/* =========================================================
   COMMON SECTION STYLES
========================================================= */

.building-construct-section-label {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 7px;
    color: #e39a00;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.building-construct-section-label span {
    display: inline-block;
    width: 35px;
    height: 1px;
    background: #e39a00;
}


.building-construct-section-title {
    margin: 0 0 12px;
    color: #082d68;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 23px;
    font-weight: 700;
    line-height: 1.25;
}


/* =========================================================
   OVERVIEW
========================================================= */

.building-construct-overview {
    display: grid;
    grid-template-columns: 36% 64%;
    min-height: 320px;
    margin-bottom: 24px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #dfe5ed;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(10, 35, 70, 0.06);
}


.building-construct-overview-image {
    min-height: 320px;
    overflow: hidden;
}

.building-construct-overview-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}


.building-construct-overview-content {
    padding: 28px 35px;
}

.building-construct-overview-content > p {
    margin: 0 0 8px;
    color: #666666;
    font-size: 18px;
    line-height: 1.2;
}


/* Overview Highlights */

.building-construct-overview-highlights {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 20px;
}

.building-construct-overview-item {
    display: flex;
    gap: 10px;
    padding: 0 12px;
    border-right: 1px solid #dfe4eb;
}

.building-construct-overview-item:first-child {
    padding-left: 0;
}

.building-construct-overview-item:last-child {
    padding-right: 0;
    border-right: 0;
}

.building-construct-overview-icon {
    flex: 0 0 35px;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #092f6d;
    color: #ffffff;
    font-size: 14px;
}

.building-construct-overview-item h3 {
    margin: 0 0 5px;
    color: #082d68;
    font-size: 17px;
    line-height: 1.2;
}

.building-construct-overview-item p {
    margin: 0;
    color: #666666;
    font-size: 14px;
    line-height: 1.2;
}


/* =========================================================
   SPECIFICATIONS
========================================================= */

.building-construct-specification {
    display: grid;
    grid-template-columns: 55% 45%;
    margin-bottom: 24px;
    overflow: hidden;
    border: 1px solid #dfe5ed;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 4px 15px rgba(10, 35, 70, 0.05);
}

.building-construct-specification-content {
    padding: 25px 18px;
}

.building-construct-table-wrapper {
    width: 100%;
    overflow-x: auto;
}

.building-construct-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 10px;
}

.building-construct-table th {
    padding: 7px 9px;
    color: #ffffff;
    background: #092f6d;
    text-align: left;
    font-weight: 700;
    font-size:18px;
}

.building-construct-table td {
    padding: 6px 9px;
    border: 1px solid #dfe5ed;
    color: #666666;
    line-height: 1.35;
    font-size:16px
}

.building-construct-table td:first-child {
    width: 42%;
    color: #1c3459;
    font-weight: 600;
    font-size:16px !important;
}

.building-construct-table td i {
    width: 18px;
    margin-right: 5px;
    color: #092f6d;
    text-align: center;
}


.building-construct-specification-image {
    min-height: 400px;
    overflow: hidden;
}

.building-construct-specification-image img {
    width: 100%;
    height: 100%;
    min-height: 400px;
    display: block;
    object-fit: cover;
}


/* =========================================================
   PROCESS
========================================================= */

.building-construct-process {
    margin-bottom: 24px;
    padding: 25px 18px 30px;
    background: #ffffff;
    border: 1px solid #dfe5ed;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(10, 35, 70, 0.05);
}

.building-construct-process-heading {
    text-align: center;
}

.building-construct-process-heading
.building-construct-section-label {
    justify-content: center;
}


.building-construct-process-list {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin-top: 25px;
}


.building-construct-process-item {
    position: relative;
    flex: 1;
    max-width: 190px;
    text-align: center;
}


.building-construct-process-number {
    position: absolute;
    top: -3px;
    left: calc(50% - 29px);
    z-index: 3;
    width: 17px;
    height: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #f2a900;
    background: #092f6d;
    font-size: 7px;
}


.building-construct-process-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #ffffff;
    border-radius: 50%;
    outline: 1px solid #9fb4d6;
    background: #092f6d;
    color: #ffffff;
    font-size: 18px;
}


.building-construct-process-item h3 {
    margin: 0 0 6px;
    color: #092f6d;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 19px;
    line-height: 1.25;
}

.building-construct-process-item p {
    max-width: 155px;
    margin: 0 auto;
    color: #666666;
    font-size: 17px;
    line-height: 1.2;
}


.building-construct-process-arrow {
    flex: 0 0 35px;
    padding-top: 23px;
    color: #9da9ba;
    font-size: 12px;
}


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

.building-construct-bottom {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}


/* Services + Advantages */

.building-construct-services,
.building-construct-advantages {
    padding: 20px 18px;
    border: 1px solid #dfe5ed;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 4px 15px rgba(10, 35, 70, 0.05);
}


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

.building-construct-service-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 18px;
    row-gap: 17px;
    margin-top: 17px;
}

.building-construct-service-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.building-construct-service-item > i {
    flex: 0 0 25px;
    color: #092f6d;
    font-size: 23px;
    text-align: center;
}

.building-construct-service-item h3 {
    margin: 0 0 4px;
    color: #092f6d;
    font-size: 18px;
    line-height: 1.2;
}

.building-construct-service-item p {
    margin: 0;
    color: #666666;
    font-size: 17px;
    line-height: 1.2;
}


/* =========================================================
   ADVANTAGES
========================================================= */

.building-construct-advantage-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin-top: 17px;
}

.building-construct-advantage-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.building-construct-advantage-item > i {
    flex: 0 0 27px;
    width: 27px;
    height: 27px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e4a51a;
    border-radius: 50%;
    color: #092f6d;
    font-size: 18px;
}

.building-construct-advantage-item h3 {
    margin: 0 0 4px;
    color: #092f6d;
    font-size: 18px;
    line-height: 1.2;
}

.building-construct-advantage-item p {
    margin: 0;
    color: #666666;
    font-size: 17px;
    line-height: 1.2;
}


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

@media (max-width: 1200px) {

    .building-construct-hero-content {
        padding: 40px 30px;
    }

    .building-construct-hero-title {
        font-size: 50px;
    }

    .building-construct-hero-subtitle {
        font-size: 15px;
    }

    .building-construct-container {
        width: calc(100% - 50px);
    }

    .building-construct-overview-content {
        padding: 25px;
    }

    .building-construct-overview-highlights {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 15px;
    }

    .building-construct-overview-item:nth-child(2) {
        border-right: 0;
    }

    .building-construct-overview-item:nth-child(3),
    .building-construct-overview-item:nth-child(4) {
        padding-top: 12px;
    }

}


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

@media (max-width: 991px) {

    .building-construct-hero-container {
        grid-template-columns: 50% 50%;
        min-height: 310px;
    }

    .building-construct-hero-image,
    .building-construct-hero-image img {
        min-height: 310px;
    }

    .building-construct-hero-content {
        padding: 30px 25px;
    }

    .building-construct-hero-title {
        font-size: 40px;
    }

    .building-construct-hero-subtitle {
        margin-top: 15px;
        font-size: 13px;
    }

    .building-construct-hero-description {
        font-size: 10px;
    }

    .building-construct-hero-highlights {
        margin-top: 16px;
    }

    .building-construct-hero-highlight {
        padding: 0 9px;
    }

    .building-construct-hero-highlight span {
        font-size: 8px;
    }

    .building-construct-hero-highlight-icon {
        font-size: 15px;
    }


    .building-construct-container {
        width: calc(100% - 30px);
        padding-top: 25px;
    }


    /* Overview */

    .building-construct-overview {
        grid-template-columns: 38% 62%;
    }

    .building-construct-overview-content {
        padding: 22px;
    }

    .building-construct-overview-content > p {
        font-size: 10px;
    }

    .building-construct-overview-item {
        padding: 0 8px;
    }

    .building-construct-overview-icon {
        flex-basis: 28px;
        width: 28px;
        height: 28px;
        font-size: 11px;
    }

    .building-construct-overview-item h3 {
        font-size: 10px;
    }

    .building-construct-overview-item p {
        font-size: 8px;
    }


    /* Specifications */

    .building-construct-specification {
        grid-template-columns: 60% 40%;
    }

    .building-construct-specification-content {
        padding: 20px 14px;
    }

    .building-construct-table {
        font-size: 8px;
    }

    .building-construct-table th,
    .building-construct-table td {
        padding: 5px;
    }


    /* Process */

    .building-construct-process {
        padding: 20px 10px 25px;
    }

    .building-construct-process-list {
        gap: 0;
    }

    .building-construct-process-item {
        max-width: 140px;
    }

    .building-construct-process-arrow {
        flex-basis: 20px;
        font-size: 9px;
    }

    .building-construct-process-item p {
        font-size: 8px;
        padding: 0 3px;
    }

    .building-construct-process-item h3 {
        font-size: 10px;
    }


    /* Bottom */

    .building-construct-bottom {
        grid-template-columns: 1fr;
    }

}


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

@media (max-width: 767px) {

    .building-construct-hero-container {
        display: flex;
        flex-direction: column;
    }

    .building-construct-hero-content {
        width: 100%;
        padding: 38px 20px 32px;
    }

    .building-construct-hero-title {
        font-size: 38px;
    }

    .building-construct-hero-subtitle {
        font-size: 14px;
    }

    .building-construct-hero-description {
        max-width: 100%;
        font-size: 11px;
    }


    /* Hero highlights */

    .building-construct-hero-highlights {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px 0;
    }

    .building-construct-hero-highlight {
        padding: 5px 10px;
        border-right: 1px solid rgba(255,255,255,0.2);
    }

    .building-construct-hero-highlight:nth-child(2) {
        border-right: 0;
    }

    .building-construct-hero-highlight:nth-child(3),
    .building-construct-hero-highlight:nth-child(4) {
        padding-top: 10px;
    }


    /* Hero image */

    .building-construct-hero-image {
        min-height: 260px;
        height: 260px;
    }

    .building-construct-hero-image img {
        min-height: 260px;
    }

    .building-construct-hero-image::before {
        left: -35px;
        width: 55px;
    }

    .building-construct-hero-image::after {
        left: -20px;
        width: 18px;
    }


    /* Main */

    .building-construct-container {
        width: calc(100% - 24px);
        padding-top: 20px;
        padding-bottom: 35px;
    }


    /* Overview */

    .building-construct-overview {
        display: flex;
        flex-direction: column;
    }

    .building-construct-overview-image {
        min-height: 230px;
        height: 230px;
    }

    .building-construct-overview-content {
        padding: 22px 18px;
    }

    .building-construct-section-title {
        font-size: 20px;
    }

    .building-construct-overview-content > p {
        font-size: 11px;
    }

    .building-construct-overview-highlights {
        grid-template-columns: 1fr 1fr;
        gap: 15px 0;
    }

    .building-construct-overview-item {
        padding: 0 8px;
    }

    .building-construct-overview-item:nth-child(odd) {
        padding-left: 0;
    }

    .building-construct-overview-item:nth-child(even) {
        padding-right: 0;
        border-right: 0;
    }


    /* Specifications */

    .building-construct-specification {
        display: flex;
        flex-direction: column;
    }

    .building-construct-specification-content {
        padding: 20px 14px;
    }

    .building-construct-specification-image {
        order: -1;
        height: 230px;
        min-height: 230px;
    }

    .building-construct-specification-image img {
        min-height: 230px;
    }

    .building-construct-table {
        min-width: 500px;
        font-size: 9px;
    }


    /* Process */

    .building-construct-process {
        padding: 22px 15px;
    }

    .building-construct-process-list {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0;
        margin-top: 20px;
    }

    .building-construct-process-item {
        max-width: 100%;
        display: grid;
        grid-template-columns: 60px 1fr;
        grid-template-rows: auto auto;
        column-gap: 15px;
        padding: 18px 0;
        text-align: left;
        border-bottom: 1px solid #e2e6ed;
    }

    .building-construct-process-item:last-child {
        border-bottom: 0;
    }

    .building-construct-process-number {
        top: 16px;
        left: 41px;
    }

    .building-construct-process-icon {
        grid-row: 1 / 3;
        grid-column: 1;
        width: 52px;
        height: 52px;
        margin: 0;
    }

    .building-construct-process-item h3 {
        grid-column: 2;
        grid-row: 1;
        margin: 3px 0 5px;
        font-size: 13px;
    }

    .building-construct-process-item p {
        grid-column: 2;
        grid-row: 2;
        max-width: none;
        padding: 0;
        margin: 0;
        font-size: 10px;
        line-height: 1.5;
    }

    .building-construct-process-arrow {
        display: none;
    }


    /* Bottom */

    .building-construct-bottom {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .building-construct-services,
    .building-construct-advantages {
        padding: 20px 15px;
    }

    .building-construct-service-grid,
    .building-construct-advantage-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .building-construct-service-item p,
    .building-construct-advantage-item p {
        font-size: 9px;
    }

}


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

@media (max-width: 480px) {

    .building-construct-hero-content {
        padding: 30px 16px 28px;
    }

    .building-construct-hero-title {
        font-size: 32px;
    }

    .building-construct-hero-subtitle {
        font-size: 12px;
    }

    .building-construct-hero-description {
        font-size: 10px;
    }

    .building-construct-hero-highlight-icon {
        font-size: 14px;
    }

    .building-construct-hero-highlight span {
        font-size: 7px;
    }


    .building-construct-container {
        width: calc(100% - 20px);
    }


    .building-construct-overview-highlights {
        grid-template-columns: 1fr;
    }

    .building-construct-overview-item,
    .building-construct-overview-item:nth-child(even),
    .building-construct-overview-item:nth-child(odd) {
        padding: 0 0 12px;
        border-right: 0;
        border-bottom: 1px solid #e1e5eb;
    }

    .building-construct-overview-item:last-child {
        border-bottom: 0;
        padding-bottom: 0;
    }


    .building-construct-section-title {
        font-size: 18px;
    }


    .building-construct-table {
        min-width: 470px;
        font-size: 8px;
    }


    .building-construct-service-item h3 {
        font-size: 10px;
    }

    .building-construct-service-item p {
        font-size: 8px;
    }

}



/*--------------commercial building page code---------*/

/* =========================================================
   COMMERCIAL BUILDING SERVICE PAGE
========================================================= */

.commercial-build-page {
    width: 100%;
    background: #ffffff;
    color: #172944;
    overflow: hidden;
    box-sizing: border-box;
}

.commercial-build-page *,
.commercial-build-page *::before,
.commercial-build-page *::after {
    box-sizing: border-box;
}


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

.commercial-build-page-hero {
    width: 100%;
    background: #082653;
    overflow: hidden;
}

.commercial-build-page-hero-container {
    width: 100%;
    max-width: 1500px;
    min-height: 355px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 48% 52%;
}


/* HERO CONTENT */

.commercial-build-page-hero-content {
    position: relative;
    z-index: 4;

    padding: 45px 40px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    background: #082653;
}


.commercial-build-page-hero-label {
    display: flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 12px;

    color: #f2a900;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
}


.commercial-build-page-hero-label i {
    font-size: 8px;
}


.commercial-build-page-hero-title {
    margin: 0;

    padding-left: 15px;

    border-left: 3px solid #f2a900;

    color: #ffffff;

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

    font-size: clamp(40px, 4.2vw, 65px);

    font-weight: 700;

    line-height: 0.98;

    text-transform: uppercase;
}


.commercial-build-page-hero-title span {
    display: block;

    color: #f2a900;
}


.commercial-build-page-hero-subtitle {
    max-width: 620px;

    margin: 20px 0 10px;

    color: #ffffff;

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

    line-height: 1.45;
}


.commercial-build-page-hero-subtitle strong {
    display: block;

    color: #f2a900;

    font-weight: 700;
}


.commercial-build-page-hero-description {
    max-width: 650px;

    margin: 0;

    color: #ffffff;

    font-size: 18px;

    line-height: 1.2;
}


/* =========================================================
   HERO HIGHLIGHTS
========================================================= */

.commercial-build-page-hero-highlights {
    display: flex;

    align-items: stretch;

    margin-top: 24px;
}


.commercial-build-page-hero-highlight {
    display: flex;

    align-items: center;

    gap: 9px;

    min-height: 43px;

    padding: 0 17px;

    border-right: 1px solid rgba(255,255,255,0.25);
}


.commercial-build-page-hero-highlight:first-child {
    padding-left: 0;
}


.commercial-build-page-hero-highlight:last-child {
    border-right: 0;
}


.commercial-build-page-hero-highlight-icon {
    color: #f2a900;

    font-size: 20px;
}


.commercial-build-page-hero-highlight span {
    color: #ffffff;

    font-size: 16px;

    line-height: 1.2;
}


/* =========================================================
   HERO IMAGE
========================================================= */

.commercial-build-page-hero-image {
    position: relative;

    min-height: 355px;

    overflow: hidden;
}


.commercial-build-page-hero-image img {
    width: 100%;
    height: 100%;

    min-height: 355px;

    display: block;

    object-fit: cover;
}


/* ANGLED GOLD BORDER */

/* .commercial-build-page-hero-image::before {
    content: "";

    position: absolute;

    z-index: 3;

    left: -37px;
    top: -10%;

    width: 75px;
    height: 120%;

    background: #f2a900;

    transform: skewX(-22deg);
}




.commercial-build-page-hero-image::after {
    content: "";

    position: absolute;

    z-index: 4;

    left: -18px;
    top: -10%;

    width: 23px;
    height: 120%;

    background: #ffffff;

    transform: skewX(-22deg);
} */


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

.commercial-build-page-container {
    width: calc(100% - 80px);

    max-width: 1400px;

    margin: 0 auto;

    padding: 32px 0 55px;
}


/* =========================================================
   COMMON HEADINGS
========================================================= */

.commercial-build-page-section-label {
    display: flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 7px;

    color: #e39a00;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;
}


.commercial-build-page-section-label span {
    display: inline-block;

    width: 35px;

    height: 1px;

    background: #e39a00;
}


.commercial-build-page-section-title {
    margin: 0 0 12px;

    color: #082d68;

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

    font-size: 23px;

    font-weight: 700;

    line-height: 1.25;
}


/* =========================================================
   OVERVIEW
========================================================= */

.commercial-build-page-overview {
    display: grid;

    grid-template-columns: 36% 64%;

    min-height: 330px;

    margin-bottom: 24px;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #dfe5ed;

    border-radius: 8px;

    box-shadow: 0 4px 15px rgba(10,35,70,0.06);
}


.commercial-build-page-overview-image {
    min-height: 330px;

    overflow: hidden;
}


.commercial-build-page-overview-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


.commercial-build-page-overview-content {
    padding: 28px 35px;
}


.commercial-build-page-overview-content > p {
    margin: 0 0 8px;

    color: #666666;

    font-size: 18px;

    line-height: 1.2;
}


/* =========================================================
   OVERVIEW HIGHLIGHTS
========================================================= */

.commercial-build-page-overview-highlights {
    display: grid;

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

    margin-top: 18px;
}


.commercial-build-page-overview-item {
    display: flex;

    gap: 9px;

    padding: 0 12px;

    border-right: 1px solid #dfe4eb;
}


.commercial-build-page-overview-item:first-child {
    padding-left: 0;
}


.commercial-build-page-overview-item:last-child {
    padding-right: 0;

    border-right: 0;
}


.commercial-build-page-overview-icon {
    flex: 0 0 35px;

    width: 35px;
    height: 35px;

    display: flex;

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

    border-radius: 50%;

    background: #092f6d;

    color: #ffffff;

    font-size: 14px;
}


.commercial-build-page-overview-item h3 {
    margin: 0 0 5px;

    color: #082d68;

    font-size: 17px;

    line-height: 1.2;
}


.commercial-build-page-overview-item p {
    margin: 0;

    color: #555f70;

    font-size: 16px;

    line-height: 1.2;
}


/* =========================================================
   SPECIFICATIONS
========================================================= */

.commercial-build-page-specification {
    display: grid;

    grid-template-columns: 58% 42%;

    margin-bottom: 24px;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #dfe5ed;

    border-radius: 8px;

    box-shadow: 0 4px 15px rgba(10,35,70,0.05);
}


.commercial-build-page-specification-content {
    padding: 25px 18px;
}


.commercial-build-page-table-wrapper {
    width: 100%;

    overflow-x: auto;
}


.commercial-build-page-table {
    width: 100%;

    border-collapse: collapse;

    font-size: 10px;
}


.commercial-build-page-table th {
    padding: 7px 9px;

    color: #ffffff;

    background: #092f6d;

    text-align: left;

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


.commercial-build-page-table td {
    padding: 6px 9px;

    border: 1px solid #dfe5ed;

    color: #666666;

    line-height: 1.35;
    font-size:16px;
}


.commercial-build-page-table td:first-child {
    width: 42%;

    color: #1c3459;

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


.commercial-build-page-table td i {
    width: 18px;

    margin-right: 5px;

    color: #092f6d;

    text-align: center;
}


.commercial-build-page-specification-image {
    min-height: 420px;

    overflow: hidden;
}


.commercial-build-page-specification-image img {
    width: 100%;
    height: 100%;

    min-height: 420px;

    display: block;

    object-fit: cover;
}


/* =========================================================
   PROCESS
========================================================= */

.commercial-build-page-process {
    margin-bottom: 24px;

    padding: 25px 18px 30px;

    background: #ffffff;

    border: 1px solid #dfe5ed;

    border-radius: 8px;

    box-shadow: 0 4px 15px rgba(10,35,70,0.05);
}


.commercial-build-page-process-heading {
    text-align: center;
}


.commercial-build-page-process-heading
.commercial-build-page-section-label {
    justify-content: center;
}


.commercial-build-page-process-list {
    display: flex;

    align-items: flex-start;

    justify-content: center;

    margin-top: 25px;
}


.commercial-build-page-process-item {
    position: relative;

    flex: 1;

    max-width: 190px;

    text-align: center;
}


.commercial-build-page-process-number {
    position: absolute;

    top: -3px;
    left: calc(50% - 29px);

    z-index: 3;

    width: 17px;
    height: 17px;

    display: flex;

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

    border-radius: 50%;

    background: #092f6d;

    color: #f2a900;

    font-size: 7px;
}


.commercial-build-page-process-icon {
    width: 52px;
    height: 52px;

    margin: 0 auto 9px;

    display: flex;

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

    border: 2px solid #ffffff;

    border-radius: 50%;

    outline: 1px solid #9fb4d6;

    background: #092f6d;

    color: #ffffff;

    font-size: 18px;
}


.commercial-build-page-process-item h3 {
    margin: 0 0 6px;

    color: #092f6d;

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

    font-size: 17px;

    line-height: 1.25;
}


.commercial-build-page-process-item p {
    max-width: 155px;

    margin: 0 auto;

    color: #666666;

    font-size: 16px;

    line-height: 1.2;
}


.commercial-build-page-process-arrow {
    flex: 0 0 35px;

    padding-top: 23px;

    color: #9da9ba;

    font-size: 12px;
}


/* =========================================================
   BOTTOM SECTION
========================================================= */

.commercial-build-page-bottom {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 15px;
}


.commercial-build-page-services,
.commercial-build-page-advantages {
    padding: 20px 18px;

    background: #ffffff;

    border: 1px solid #dfe5ed;

    border-radius: 8px;

    box-shadow: 0 4px 15px rgba(10,35,70,0.05);
}


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

.commercial-build-page-service-grid {
    display: grid;

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

    column-gap: 18px;

    row-gap: 17px;

    margin-top: 17px;
}


.commercial-build-page-service-item {
    display: flex;

    align-items: flex-start;

    gap: 10px;
}


.commercial-build-page-service-item > i {
    flex: 0 0 25px;

    color: #092f6d;

    font-size: 18px;

    text-align: center;
}


.commercial-build-page-service-item h3 {
    margin: 0 0 4px;

    color: #092f6d;

    font-size: 17px;

    line-height: 1.25;
}


.commercial-build-page-service-item p {
    margin: 0;

    color: #666666;

    font-size: 16px;

    line-height: 1.2;
}


/* =========================================================
   ADVANTAGES
========================================================= */

.commercial-build-page-advantage-grid {
    display: grid;

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

    gap: 18px;

    margin-top: 17px;
}


.commercial-build-page-advantage-item {
    display: flex;

    align-items: flex-start;

    gap: 10px;
}


.commercial-build-page-advantage-item > i {
    flex: 0 0 27px;

    width: 27px;
    height: 27px;

    display: flex;

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

    border: 1px solid #e4a51a;

    border-radius: 50%;

    color: #092f6d;

    font-size: 16px;
}


.commercial-build-page-advantage-item h3 {
    margin: 0 0 4px;

    color: #092f6d;

    font-size: 17px;

    line-height: 1.3;
}


.commercial-build-page-advantage-item p {
    margin: 0;

    color: #666666;

    font-size: 16px;

    line-height: 1.2;
}


/* =========================================================
   TABLET - 1200px
========================================================= */

@media (max-width: 1200px) {

    .commercial-build-page-hero-content {
        padding: 40px 30px;
    }


    .commercial-build-page-hero-title {
        font-size: 50px;
    }


    .commercial-build-page-hero-subtitle {
        font-size: 15px;
    }


    .commercial-build-page-container {
        width: calc(100% - 50px);
    }


    .commercial-build-page-overview-content {
        padding: 25px;
    }


    .commercial-build-page-overview-highlights {
        grid-template-columns: repeat(2, 1fr);

        row-gap: 15px;
    }


    .commercial-build-page-overview-item:nth-child(2) {
        border-right: 0;
    }


    .commercial-build-page-overview-item:nth-child(3),
    .commercial-build-page-overview-item:nth-child(4) {
        padding-top: 12px;
    }

}


/* =========================================================
   TABLET - 991px
========================================================= */

@media (max-width: 991px) {

    .commercial-build-page-hero-container {
        grid-template-columns: 50% 50%;

        min-height: 310px;
    }


    .commercial-build-page-hero-image,
    .commercial-build-page-hero-image img {
        min-height: 310px;
    }


    .commercial-build-page-hero-content {
        padding: 30px 25px;
    }


    .commercial-build-page-hero-title {
        font-size: 40px;
    }


    .commercial-build-page-hero-subtitle {
        margin-top: 15px;

        font-size: 13px;
    }


    .commercial-build-page-hero-description {
        font-size: 10px;
    }


    .commercial-build-page-hero-highlights {
        margin-top: 16px;
    }


    .commercial-build-page-hero-highlight {
        padding: 0 9px;
    }


    .commercial-build-page-hero-highlight span {
        font-size: 8px;
    }


    .commercial-build-page-hero-highlight-icon {
        font-size: 15px;
    }


    /* CONTAINER */

    .commercial-build-page-container {
        width: calc(100% - 30px);

        padding-top: 25px;
    }


    /* OVERVIEW */

    .commercial-build-page-overview {
        grid-template-columns: 38% 62%;
    }


    .commercial-build-page-overview-content {
        padding: 22px;
    }


    .commercial-build-page-overview-content > p {
        font-size: 10px;
    }


    .commercial-build-page-overview-item {
        padding: 0 8px;
    }


    .commercial-build-page-overview-icon {
        flex-basis: 28px;

        width: 28px;
        height: 28px;

        font-size: 11px;
    }


    .commercial-build-page-overview-item h3 {
        font-size: 10px;
    }


    .commercial-build-page-overview-item p {
        font-size: 8px;
    }


    /* SPECIFICATIONS */

    .commercial-build-page-specification {
        grid-template-columns: 60% 40%;
    }


    .commercial-build-page-specification-content {
        padding: 20px 14px;
    }


    .commercial-build-page-table {
        font-size: 8px;
    }


    .commercial-build-page-table th,
    .commercial-build-page-table td {
        padding: 5px;
    }


    /* PROCESS */

    .commercial-build-page-process {
        padding: 20px 10px 25px;
    }


    .commercial-build-page-process-list {
        gap: 0;
    }


    .commercial-build-page-process-item {
        max-width: 140px;
    }


    .commercial-build-page-process-arrow {
        flex-basis: 20px;

        font-size: 9px;
    }


    .commercial-build-page-process-item p {
        font-size: 8px;

        padding: 0 3px;
    }


    .commercial-build-page-process-item h3 {
        font-size: 10px;
    }


    /* BOTTOM */

    .commercial-build-page-bottom {
        grid-template-columns: 1fr;
    }

}


/* =========================================================
   MOBILE - 767px
========================================================= */

@media (max-width: 767px) {

    /* HERO */

    .commercial-build-page-hero-container {
        display: flex;

        flex-direction: column;
    }


    .commercial-build-page-hero-content {
        width: 100%;

        padding: 38px 20px 32px;
    }


    .commercial-build-page-hero-title {
        font-size: 38px;
    }


    .commercial-build-page-hero-subtitle {
        font-size: 14px;
    }


    .commercial-build-page-hero-description {
        max-width: 100%;

        font-size: 11px;
    }


    /* HERO HIGHLIGHTS */

    .commercial-build-page-hero-highlights {
        display: grid;

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

        gap: 12px 0;
    }


    .commercial-build-page-hero-highlight {
        padding: 5px 10px;

        border-right: 1px solid rgba(255,255,255,0.2);
    }


    .commercial-build-page-hero-highlight:nth-child(2) {
        border-right: 0;
    }


    .commercial-build-page-hero-highlight:nth-child(3),
    .commercial-build-page-hero-highlight:nth-child(4) {
        padding-top: 10px;
    }


    /* HERO IMAGE */

    .commercial-build-page-hero-image {
        min-height: 260px;

        height: 260px;
    }


    .commercial-build-page-hero-image img {
        min-height: 260px;
    }


    .commercial-build-page-hero-image::before {
        left: -35px;

        width: 55px;
    }


    .commercial-build-page-hero-image::after {
        left: -20px;

        width: 18px;
    }


    /* MAIN CONTAINER */

    .commercial-build-page-container {
        width: calc(100% - 24px);

        padding-top: 20px;

        padding-bottom: 35px;
    }


    /* OVERVIEW */

    .commercial-build-page-overview {
        display: flex;

        flex-direction: column;
    }


    .commercial-build-page-overview-image {
        min-height: 230px;

        height: 230px;
    }


    .commercial-build-page-overview-content {
        padding: 22px 18px;
    }


    .commercial-build-page-section-title {
        font-size: 20px;
    }


    .commercial-build-page-overview-content > p {
        font-size: 11px;
    }


    .commercial-build-page-overview-highlights {
        grid-template-columns: 1fr 1fr;

        gap: 15px 0;
    }


    .commercial-build-page-overview-item {
        padding: 0 8px;
    }


    .commercial-build-page-overview-item:nth-child(odd) {
        padding-left: 0;
    }


    .commercial-build-page-overview-item:nth-child(even) {
        padding-right: 0;

        border-right: 0;
    }


    /* SPECIFICATIONS */

    .commercial-build-page-specification {
        display: flex;

        flex-direction: column;
    }


    .commercial-build-page-specification-content {
        padding: 20px 14px;
    }


    .commercial-build-page-specification-image {
        order: -1;

        height: 230px;

        min-height: 230px;
    }


    .commercial-build-page-specification-image img {
        min-height: 230px;
    }


    .commercial-build-page-table {
        min-width: 550px;

        font-size: 9px;
    }


    /* PROCESS */

    .commercial-build-page-process {
        padding: 22px 15px;
    }


    .commercial-build-page-process-list {
        display: grid;

        grid-template-columns: 1fr;

        gap: 0;

        margin-top: 20px;
    }


    .commercial-build-page-process-item {
        max-width: 100%;

        display: grid;

        grid-template-columns: 60px 1fr;

        grid-template-rows: auto auto;

        column-gap: 15px;

        padding: 18px 0;

        text-align: left;

        border-bottom: 1px solid #e2e6ed;
    }


    .commercial-build-page-process-item:last-child {
        border-bottom: 0;
    }


    .commercial-build-page-process-number {
        top: 16px;

        left: 41px;
    }


    .commercial-build-page-process-icon {
        grid-row: 1 / 3;

        grid-column: 1;

        width: 52px;
        height: 52px;

        margin: 0;
    }


    .commercial-build-page-process-item h3 {
        grid-column: 2;

        grid-row: 1;

        margin: 3px 0 5px;

        font-size: 13px;
    }


    .commercial-build-page-process-item p {
        grid-column: 2;

        grid-row: 2;

        max-width: none;

        padding: 0;

        margin: 0;

        font-size: 10px;

        line-height: 1.5;
    }


    .commercial-build-page-process-arrow {
        display: none;
    }


    /* BOTTOM */

    .commercial-build-page-bottom {
        grid-template-columns: 1fr;

        gap: 15px;
    }


    .commercial-build-page-services,
    .commercial-build-page-advantages {
        padding: 20px 15px;
    }


    .commercial-build-page-service-grid,
    .commercial-build-page-advantage-grid {
        grid-template-columns: 1fr;

        gap: 18px;
    }


    .commercial-build-page-service-item p,
    .commercial-build-page-advantage-item p {
        font-size: 9px;
    }

}


/* =========================================================
   SMALL MOBILE - 480px
========================================================= */

@media (max-width: 480px) {

    .commercial-build-page-hero-content {
        padding: 30px 16px 28px;
    }


    .commercial-build-page-hero-title {
        font-size: 32px;
    }


    .commercial-build-page-hero-subtitle {
        font-size: 12px;
    }


    .commercial-build-page-hero-description {
        font-size: 10px;
    }


    .commercial-build-page-hero-highlight-icon {
        font-size: 14px;
    }


    .commercial-build-page-hero-highlight span {
        font-size: 7px;
    }


    .commercial-build-page-container {
        width: calc(100% - 20px);
    }


    .commercial-build-page-overview-highlights {
        grid-template-columns: 1fr;
    }


    .commercial-build-page-overview-item,
    .commercial-build-page-overview-item:nth-child(even),
    .commercial-build-page-overview-item:nth-child(odd) {
        padding: 0 0 12px;

        border-right: 0;

        border-bottom: 1px solid #e1e5eb;
    }


    .commercial-build-page-overview-item:last-child {
        border-bottom: 0;

        padding-bottom: 0;
    }


    .commercial-build-page-section-title {
        font-size: 18px;
    }


    .commercial-build-page-table {
        min-width: 500px;

        font-size: 8px;
    }


    .commercial-build-page-service-item h3 {
        font-size: 10px;
    }


    .commercial-build-page-service-item p {
        font-size: 8px;
    }

}




/*---------------diaphram wall contruction page code---------*/

/* =========================================================
   DIAPHRAGM WALL CONSTRUCTION SERVICE PAGE
========================================================= */

.diaphram-page {
    width: 100%;
    max-width: 100%;
    background: #ffffff;
    color: #172944;
    overflow: hidden;
    box-sizing: border-box;
}

.diaphram-page *,
.diaphram-page *::before,
.diaphram-page *::after {
    box-sizing: border-box;
}


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

.diaphram-page-hero {
    width: 100%;
    background: #082653;
    overflow: hidden;
}

.diaphram-page-hero-container {
    width: 100%;
    max-width: 1500px;
    min-height: 355px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 48% 52%;
}


/* HERO CONTENT */

.diaphram-page-hero-content {
    position: relative;
    z-index: 4;

    padding: 45px 40px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    background: #082653;
}


.diaphram-page-hero-label {
    display: flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 12px;

    color: #f2a900;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
}


.diaphram-page-hero-label i {
    font-size: 8px;
}


.diaphram-page-hero-title {
    margin: 0;
    padding-left: 15px;

    border-left: 3px solid #f2a900;

    color: #ffffff;

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

    font-size: clamp(38px, 4vw, 62px);

    font-weight: 700;
    line-height: 0.98;

    text-transform: uppercase;
}


.diaphram-page-hero-title span {
    display: block;
    color: #f2a900;
}


.diaphram-page-hero-subtitle {
    max-width: 620px;

    margin: 20px 0 10px;

    color: #ffffff;

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

    line-height: 1.45;
}


.diaphram-page-hero-subtitle strong {
    display: block;

    color: #f2a900;

    font-weight: 700;
}


.diaphram-page-hero-description {
    max-width: 650px;

    margin: 0;

    color: #ffffff;

    font-size: 18px;

    line-height: 1.2;
}


/* =========================================================
   HERO HIGHLIGHTS
========================================================= */

.diaphram-page-hero-highlights {
    display: flex;

    align-items: stretch;

    margin-top: 24px;
}


.diaphram-page-hero-highlight {
    display: flex;

    align-items: center;

    gap: 9px;

    min-height: 43px;

    padding: 0 16px;

    border-right: 1px solid rgba(255,255,255,0.25);
}


.diaphram-page-hero-highlight:first-child {
    padding-left: 0;
}


.diaphram-page-hero-highlight:last-child {
    border-right: 0;
}


.diaphram-page-hero-highlight-icon {
    color: #f2a900;

    font-size: 19px;
}


.diaphram-page-hero-highlight span {
    color: #ffffff;

    font-size: 16px;

    line-height: 1.2;
}


/* =========================================================
   HERO IMAGE
========================================================= */

.diaphram-page-hero-image {
    position: relative;

    min-height: 355px;

    overflow: hidden;
}


.diaphram-page-hero-image img {
    width: 100%;
    height: 100%;

    min-height: 355px;

    display: block;

    object-fit: cover;
}


/* ANGLED GOLD STRIP */

/* .diaphram-page-hero-image::before {
    content: "";

    position: absolute;

    z-index: 3;

    left: -38px;
    top: -10%;

    width: 76px;
    height: 120%;

    background: #f2a900;

    transform: skewX(-22deg);
}




.diaphram-page-hero-image::after {
    content: "";

    position: absolute;

    z-index: 4;

    left: -19px;
    top: -10%;

    width: 23px;
    height: 120%;

    background: #ffffff;

    transform: skewX(-22deg);
} */


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

.diaphram-page-container {
    width: calc(100% - 80px);
    max-width: 1400px;

    margin: 0 auto;

    padding: 32px 0 55px;
}


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

.diaphram-page-section-label {
    display: flex;
    align-items: center;
    gap: 9px;

    margin-bottom: 7px;

    color: #e39a00;

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

    letter-spacing: 1px;

    text-transform: uppercase;
}


.diaphram-page-section-label span {
    display: inline-block;

    width: 35px;
    height: 1px;

    background: #e39a00;
}


.diaphram-page-section-title {
    margin: 0 0 12px;

    color: #082d68;

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

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

    line-height: 1.25;
}


/* =========================================================
   OVERVIEW
========================================================= */

.diaphram-page-overview {
    display: grid;

    grid-template-columns: 36% 64%;

    min-height: 330px;

    margin-bottom: 24px;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #dfe5ed;

    border-radius: 8px;

    box-shadow: 0 4px 15px rgba(10,35,70,0.06);
}


.diaphram-page-overview-image {
    min-height: 330px;

    overflow: hidden;
}


.diaphram-page-overview-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


.diaphram-page-overview-content {
    padding: 27px 35px;
}


.diaphram-page-overview-content > p {
    margin: 0 0 8px;

    color: #666666;

    font-size: 18px;

    line-height: 1.2;
}


/* =========================================================
   OVERVIEW HIGHLIGHTS
========================================================= */

.diaphram-page-overview-highlights {
    display: grid;

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

    margin-top: 18px;
}


.diaphram-page-overview-item {
    display: flex;

    gap: 9px;

    padding: 0 12px;

    border-right: 1px solid #dfe4eb;
}


.diaphram-page-overview-item:first-child {
    padding-left: 0;
}


.diaphram-page-overview-item:last-child {
    padding-right: 0;

    border-right: 0;
}


.diaphram-page-overview-icon {
    flex: 0 0 35px;

    width: 35px;
    height: 35px;

    display: flex;

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

    border-radius: 50%;

    background: #092f6d;

    color: #ffffff;

    font-size: 14px;
}


.diaphram-page-overview-item h3 {
    margin: 0 0 5px;

    color: #082d68;

    font-size: 17px;

    line-height: 1.2;
}


.diaphram-page-overview-item p {
    margin: 0;

    color: #555f70;

    font-size: 16px;

    line-height: 1.2;
}


/* =========================================================
   SPECIFICATION
========================================================= */

.diaphram-page-specification {
    display: grid;

    grid-template-columns: 58% 42%;

    margin-bottom: 24px;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #dfe5ed;

    border-radius: 8px;

    box-shadow: 0 4px 15px rgba(10,35,70,0.05);
}


.diaphram-page-specification-content {
    padding: 25px 18px;
}


.diaphram-page-table-wrapper {
    width: 100%;

    overflow-x: auto;
}


.diaphram-page-table {
    width: 100%;

    border-collapse: collapse;

    font-size: 10px;
}


.diaphram-page-table th {
    padding: 7px 9px;

    color: #ffffff;

    background: #092f6d;

    text-align: left;

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


.diaphram-page-table td {
    padding: 6px 9px;

    border: 1px solid #dfe5ed;

    color: #666666;

    line-height: 1.35;
    font-size:17px;
}


.diaphram-page-table td:first-child {
    width: 42%;

    color: #1c3459;

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


.diaphram-page-table td i {
    width: 18px;

    margin-right: 5px;

    color: #092f6d;

    text-align: center;
}


.diaphram-page-specification-image {
    min-height: 420px;

    overflow: hidden;
}


.diaphram-page-specification-image img {
    width: 100%;
    height: 100%;

    min-height: 420px;

    display: block;

    object-fit: cover;
}


/* =========================================================
   PROCESS
========================================================= */

.diaphram-page-process {
    margin-bottom: 24px;

    padding: 25px 18px 30px;

    background: #ffffff;

    border: 1px solid #dfe5ed;

    border-radius: 8px;

    box-shadow: 0 4px 15px rgba(10,35,70,0.05);
}


.diaphram-page-process-heading {
    text-align: center;
}


.diaphram-page-process-heading
.diaphram-page-section-label {
    justify-content: center;
}


.diaphram-page-process-list {
    display: flex;

    align-items: flex-start;

    justify-content: center;

    margin-top: 25px;
}


.diaphram-page-process-item {
    position: relative;

    flex: 1;

    max-width: 190px;

    text-align: center;
}


.diaphram-page-process-number {
    position: absolute;

    top: -3px;
    left: calc(50% - 29px);

    z-index: 3;

    width: 17px;
    height: 17px;

    display: flex;

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

    border-radius: 50%;

    background: #092f6d;

    color: #f2a900;

    font-size: 7px;
}


.diaphram-page-process-icon {
    width: 52px;
    height: 52px;

    margin: 0 auto 9px;

    display: flex;

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

    border: 2px solid #ffffff;

    border-radius: 50%;

    outline: 1px solid #9fb4d6;

    background: #092f6d;

    color: #ffffff;

    font-size: 18px;
}


.diaphram-page-process-item h3 {
    margin: 0 0 6px;

    color: #092f6d;

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

    font-size: 17px;

    line-height: 1.2;
}


.diaphram-page-process-item p {
    max-width: 155px;

    margin: 0 auto;

    color: #666666;

    font-size: 16px;

    line-height: 1.2;
}


.diaphram-page-process-arrow {
    flex: 0 0 35px;

    padding-top: 23px;

    color: #9da9ba;

    font-size: 12px;
}


/* =========================================================
   APPLICATIONS
========================================================= */

.diaphram-page-applications {
    display: grid;

    grid-template-columns: 62% 38%;

    margin-bottom: 24px;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #dfe5ed;

    border-radius: 8px;

    box-shadow: 0 4px 15px rgba(10,35,70,0.05);
}


.diaphram-page-applications-content {
    padding: 25px 20px;
}


.diaphram-page-application-grid {
    display: grid;

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

    gap: 18px;

    margin-top: 18px;
}


.diaphram-page-application-item {
    display: flex;

    gap: 11px;

    align-items: flex-start;
}


.diaphram-page-application-item > i {
    flex: 0 0 30px;

    width: 30px;
    height: 30px;

    display: flex;

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

    color: #092f6d;

    font-size: 17px;
}


.diaphram-page-application-item h3 {
    margin: 0 0 4px;

    color: #092f6d;

    font-size: 17px;

    line-height: 1.2;
}


.diaphram-page-application-item p {
    margin: 0;

    color: #666666;

    font-size: 16px;

    line-height: 1.2;
}


.diaphram-page-applications-image {
    min-height: 330px;

    overflow: hidden;
}


.diaphram-page-applications-image img {
    width: 100%;
    height: 100%;

    min-height: 330px;

    display: block;

    object-fit: cover;
}


/* =========================================================
   EQUIPMENT
========================================================= */

.diaphram-page-equipment {
    margin-bottom: 24px;

    padding: 25px 20px 30px;

    background: #ffffff;

    border: 1px solid #dfe5ed;

    border-radius: 8px;

    box-shadow: 0 4px 15px rgba(10,35,70,0.05);
}


.diaphram-page-equipment-grid {
    display: grid;

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

    gap: 18px;

    margin-top: 20px;
}


.diaphram-page-equipment-item {
    padding: 18px;

    border: 1px solid #e1e6ee;

    border-radius: 6px;

    background: #ffffff;

    text-align: center;

    transition: 0.3s ease;
}


.diaphram-page-equipment-item:hover {
    transform: translateY(-3px);

    box-shadow: 0 7px 18px rgba(10,35,70,0.08);
}


.diaphram-page-equipment-icon {
    width: 48px;
    height: 48px;

    margin: 0 auto 10px;

    display: flex;

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

    border-radius: 50%;

    background: #092f6d;

    color: #ffffff;

    font-size: 18px;
}


.diaphram-page-equipment-item h3 {
    margin: 0 0 6px;

    color: #092f6d;

    font-size: 17px;
}


.diaphram-page-equipment-item p {
    margin: 0;

    color: #666666;

    font-size: 16px;

    line-height: 1.2;
}


/* =========================================================
   QUALITY
========================================================= */

.diaphram-page-quality {
    display: grid;

    grid-template-columns: 62% 38%;

    margin-bottom: 24px;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #dfe5ed;

    border-radius: 8px;

    box-shadow: 0 4px 15px rgba(10,35,70,0.05);
}


.diaphram-page-quality-content {
    padding: 25px 20px;
}


.diaphram-page-quality-intro {
    margin: 0;

    color: #666666;

    font-size: 18px;

    line-height: 1.2;
}


.diaphram-page-quality-grid {
    display: grid;

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

    gap: 17px;

    margin-top: 20px;
}


.diaphram-page-quality-item {
    display: flex;

    gap: 10px;

    align-items: flex-start;
}


.diaphram-page-quality-item > i {
    flex: 0 0 28px;

    width: 28px;
    height: 28px;

    display: flex;

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

    border-radius: 50%;

    background: #092f6d;

    color: #ffffff;

    font-size: 16px;
}


.diaphram-page-quality-item h3 {
    margin: 0 0 4px;

    color: #092f6d;

    font-size: 17px;
}


.diaphram-page-quality-item p {
    margin: 0;

    color: #596476;

    font-size: 16px;

    line-height: 1.2;
}


.diaphram-page-quality-image {
    min-height: 330px;

    overflow: hidden;
}


.diaphram-page-quality-image img {
    width: 100%;
    height: 100%;

    min-height: 330px;

    display: block;

    object-fit: cover;
}


/* =========================================================
   ADVANTAGES
========================================================= */

.diaphram-page-advantages {
    margin-bottom: 24px;

    padding: 25px 20px 30px;

    background: #ffffff;

    border: 1px solid #dfe5ed;

    border-radius: 8px;

    box-shadow: 0 4px 15px rgba(10,35,70,0.05);
}


.diaphram-page-advantage-grid {
    display: grid;

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

    gap: 20px;

    margin-top: 20px;
}


.diaphram-page-advantage-item {
    display: flex;

    gap: 10px;

    align-items: flex-start;
}


.diaphram-page-advantage-item > i {
    flex: 0 0 30px;

    width: 30px;
    height: 30px;

    display: flex;

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

    border: 1px solid #e4a51a;

    border-radius: 50%;

    color: #092f6d;

    font-size: 16px;
}


.diaphram-page-advantage-item h3 {
    margin: 0 0 4px;

    color: #092f6d;

    font-size: 17px;

    line-height: 1.2;
}


.diaphram-page-advantage-item p {
    margin: 0;

    color: #596476;

    font-size: 16px;

    line-height: 1.2;
}


/* =========================================================
   SAFETY
========================================================= */

.diaphram-page-safety {
    display: grid;

    grid-template-columns: 40% 60%;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #dfe5ed;

    border-radius: 8px;

    box-shadow: 0 4px 15px rgba(10,35,70,0.05);
}


.diaphram-page-safety-image {
    min-height: 330px;

    overflow: hidden;
}


.diaphram-page-safety-image img {
    width: 100%;
    height: 100%;

    min-height: 330px;

    display: block;

    object-fit: cover;
}


.diaphram-page-safety-content {
    padding: 30px 35px;
}


.diaphram-page-safety-content > p {
    margin: 0 0 15px;

    color: #596476;

    font-size: 18px;

    line-height: 1.2;
}


.diaphram-page-safety-list {
    display: grid;

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

    gap: 10px 25px;

    margin: 0;

    padding: 0;

    list-style: none;
}


.diaphram-page-safety-list li {
    display: flex;

    align-items: center;

    gap: 8px;

    color: #666666;

    font-size: 18px;
}


.diaphram-page-safety-list li i {
    color: #e39a00;
}


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

@media (max-width: 1200px) {

    .diaphram-page-hero-content {
        padding: 40px 30px;
    }


    .diaphram-page-hero-title {
        font-size: 48px;
    }


    .diaphram-page-hero-subtitle {
        font-size: 15px;
    }


    .diaphram-page-container {
        width: calc(100% - 50px);
    }


    .diaphram-page-overview-content {
        padding: 25px;
    }


    .diaphram-page-overview-highlights {
        grid-template-columns: repeat(2, 1fr);

        row-gap: 15px;
    }


    .diaphram-page-overview-item:nth-child(2) {
        border-right: 0;
    }


    .diaphram-page-overview-item:nth-child(3),
    .diaphram-page-overview-item:nth-child(4) {
        padding-top: 12px;
    }


    .diaphram-page-advantage-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


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

@media (max-width: 991px) {

    .diaphram-page-hero-container {
        grid-template-columns: 50% 50%;

        min-height: 310px;
    }


    .diaphram-page-hero-image,
    .diaphram-page-hero-image img {
        min-height: 310px;
    }


    .diaphram-page-hero-content {
        padding: 30px 25px;
    }


    .diaphram-page-hero-title {
        font-size: 37px;
    }


    .diaphram-page-hero-subtitle {
        margin-top: 15px;

        font-size: 13px;
    }


    .diaphram-page-hero-description {
        font-size: 10px;
    }


    .diaphram-page-hero-highlights {
        margin-top: 16px;
    }


    .diaphram-page-hero-highlight {
        padding: 0 8px;
    }


    .diaphram-page-hero-highlight span {
        font-size: 7px;
    }


    .diaphram-page-hero-highlight-icon {
        font-size: 14px;
    }


    .diaphram-page-container {
        width: calc(100% - 30px);

        padding-top: 25px;
    }


    /* OVERVIEW */

    .diaphram-page-overview {
        grid-template-columns: 38% 62%;
    }


    .diaphram-page-overview-content {
        padding: 22px;
    }


    .diaphram-page-overview-content > p {
        font-size: 10px;
    }


    .diaphram-page-overview-item {
        padding: 0 8px;
    }


    .diaphram-page-overview-icon {
        flex-basis: 28px;

        width: 28px;
        height: 28px;

        font-size: 11px;
    }


    .diaphram-page-overview-item h3 {
        font-size: 10px;
    }


    .diaphram-page-overview-item p {
        font-size: 8px;
    }


    /* SPECIFICATION */

    .diaphram-page-specification {
        grid-template-columns: 60% 40%;
    }


    .diaphram-page-specification-content {
        padding: 20px 14px;
    }


    .diaphram-page-table {
        font-size: 8px;
    }


    .diaphram-page-table th,
    .diaphram-page-table td {
        padding: 5px;
    }


    /* PROCESS */

    .diaphram-page-process {
        padding: 20px 10px 25px;
    }


    .diaphram-page-process-item {
        max-width: 140px;
    }


    .diaphram-page-process-arrow {
        flex-basis: 20px;

        font-size: 9px;
    }


    .diaphram-page-process-item p {
        font-size: 8px;
    }


    .diaphram-page-process-item h3 {
        font-size: 10px;
    }


    /* APPLICATIONS */

    .diaphram-page-applications {
        grid-template-columns: 60% 40%;
    }


    .diaphram-page-application-grid {
        gap: 14px;
    }


    /* EQUIPMENT */

    .diaphram-page-equipment-grid {
        grid-template-columns: repeat(2, 1fr);
    }


    /* QUALITY */

    .diaphram-page-quality {
        grid-template-columns: 60% 40%;
    }


    /* ADVANTAGES */

    .diaphram-page-advantage-grid {
        grid-template-columns: repeat(2, 1fr);
    }


    /* SAFETY */

    .diaphram-page-safety {
        grid-template-columns: 40% 60%;
    }


    .diaphram-page-safety-content {
        padding: 25px;
    }

}


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

@media (max-width: 767px) {

    /* HERO */

    .diaphram-page-hero-container {
        display: flex;

        flex-direction: column;
    }


    .diaphram-page-hero-content {
        width: 100%;

        padding: 38px 20px 32px;
    }


    .diaphram-page-hero-title {
        font-size: 36px;
    }


    .diaphram-page-hero-subtitle {
        font-size: 14px;
    }


    .diaphram-page-hero-description {
        max-width: 100%;

        font-size: 11px;
    }


    /* HERO HIGHLIGHTS */

    .diaphram-page-hero-highlights {
        display: grid;

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

        gap: 12px 0;
    }


    .diaphram-page-hero-highlight {
        padding: 5px 10px;

        border-right: 1px solid rgba(255,255,255,0.2);
    }


    .diaphram-page-hero-highlight:nth-child(2) {
        border-right: 0;
    }


    .diaphram-page-hero-highlight:nth-child(3),
    .diaphram-page-hero-highlight:nth-child(4) {
        padding-top: 10px;
    }


    /* HERO IMAGE */

    .diaphram-page-hero-image {
        min-height: 260px;

        height: 260px;
    }


    .diaphram-page-hero-image img {
        min-height: 260px;
    }


    .diaphram-page-hero-image::before {
        left: -35px;

        width: 55px;
    }


    .diaphram-page-hero-image::after {
        left: -20px;

        width: 18px;
    }


    /* CONTAINER */

    .diaphram-page-container {
        width: calc(100% - 24px);

        padding-top: 20px;

        padding-bottom: 35px;
    }


    /* OVERVIEW */

    .diaphram-page-overview {
        display: flex;

        flex-direction: column;
    }


    .diaphram-page-overview-image {
        min-height: 230px;

        height: 230px;
    }


    .diaphram-page-overview-content {
        padding: 22px 18px;
    }


    .diaphram-page-section-title {
        font-size: 20px;
    }


    .diaphram-page-overview-content > p {
        font-size: 11px;
    }


    .diaphram-page-overview-highlights {
        grid-template-columns: 1fr 1fr;

        gap: 15px 0;
    }


    .diaphram-page-overview-item {
        padding: 0 8px;
    }


    .diaphram-page-overview-item:nth-child(odd) {
        padding-left: 0;
    }


    .diaphram-page-overview-item:nth-child(even) {
        padding-right: 0;

        border-right: 0;
    }


    /* SPECIFICATION */

    .diaphram-page-specification {
        display: flex;

        flex-direction: column;
    }


    .diaphram-page-specification-content {
        padding: 20px 14px;
    }


    .diaphram-page-specification-image {
        order: -1;

        height: 230px;

        min-height: 230px;
    }


    .diaphram-page-specification-image img {
        min-height: 230px;
    }


    .diaphram-page-table {
        min-width: 560px;

        font-size: 9px;
    }


    /* PROCESS */

    .diaphram-page-process {
        padding: 22px 15px;
    }


    .diaphram-page-process-list {
        display: grid;

        grid-template-columns: 1fr;

        gap: 0;

        margin-top: 20px;
    }


    .diaphram-page-process-item {
        max-width: 100%;

        display: grid;

        grid-template-columns: 60px 1fr;

        grid-template-rows: auto auto;

        column-gap: 15px;

        padding: 18px 0;

        text-align: left;

        border-bottom: 1px solid #e2e6ed;
    }


    .diaphram-page-process-item:last-child {
        border-bottom: 0;
    }


    .diaphram-page-process-number {
        top: 16px;

        left: 41px;
    }


    .diaphram-page-process-icon {
        grid-row: 1 / 3;

        grid-column: 1;

        width: 52px;
        height: 52px;

        margin: 0;
    }


    .diaphram-page-process-item h3 {
        grid-column: 2;

        grid-row: 1;

        margin: 3px 0 5px;

        font-size: 13px;
    }


    .diaphram-page-process-item p {
        grid-column: 2;

        grid-row: 2;

        max-width: none;

        padding: 0;

        margin: 0;

        font-size: 10px;

        line-height: 1.5;
    }


    .diaphram-page-process-arrow {
        display: none;
    }


    /* APPLICATIONS */

    .diaphram-page-applications {
        display: flex;

        flex-direction: column;
    }


    .diaphram-page-applications-image {
        order: -1;

        height: 230px;

        min-height: 230px;
    }


    .diaphram-page-applications-image img {
        min-height: 230px;
    }


    .diaphram-page-applications-content {
        padding: 22px 18px;
    }


    .diaphram-page-application-grid {
        grid-template-columns: 1fr;

        gap: 18px;
    }


    /* EQUIPMENT */

    .diaphram-page-equipment {
        padding: 22px 15px;
    }


    .diaphram-page-equipment-grid {
        grid-template-columns: 1fr;

        gap: 15px;
    }


    .diaphram-page-equipment-item {
        display: grid;

        grid-template-columns: 55px 1fr;

        grid-template-rows: auto auto;

        column-gap: 12px;

        text-align: left;

        padding: 15px;
    }


    .diaphram-page-equipment-icon {
        grid-row: 1 / 3;

        grid-column: 1;

        margin: 0;

        width: 45px;
        height: 45px;
    }


    .diaphram-page-equipment-item h3 {
        grid-column: 2;

        grid-row: 1;

        margin: 3px 0 4px;
    }


    .diaphram-page-equipment-item p {
        grid-column: 2;

        grid-row: 2;
    }


    /* QUALITY */

    .diaphram-page-quality {
        display: flex;

        flex-direction: column;
    }


    .diaphram-page-quality-image {
        order: -1;

        height: 230px;

        min-height: 230px;
    }


    .diaphram-page-quality-image img {
        min-height: 230px;
    }


    .diaphram-page-quality-content {
        padding: 22px 18px;
    }


    .diaphram-page-quality-grid {
        grid-template-columns: 1fr;

        gap: 17px;
    }


    /* ADVANTAGES */

    .diaphram-page-advantages {
        padding: 22px 15px;
    }


    .diaphram-page-advantage-grid {
        grid-template-columns: 1fr;

        gap: 17px;
    }


    /* SAFETY */

    .diaphram-page-safety {
        display: flex;

        flex-direction: column;
    }


    .diaphram-page-safety-image {
        height: 230px;

        min-height: 230px;
    }


    .diaphram-page-safety-image img {
        min-height: 230px;
    }


    .diaphram-page-safety-content {
        padding: 22px 18px;
    }


    .diaphram-page-safety-list {
        grid-template-columns: 1fr;

        gap: 10px;
    }

}


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

@media (max-width: 480px) {

    .diaphram-page-hero-content {
        padding: 30px 16px 28px;
    }


    .diaphram-page-hero-title {
        font-size: 31px;
    }


    .diaphram-page-hero-subtitle {
        font-size: 12px;
    }


    .diaphram-page-hero-description {
        font-size: 10px;
    }


    .diaphram-page-hero-highlight-icon {
        font-size: 14px;
    }


    .diaphram-page-hero-highlight span {
        font-size: 7px;
    }


    .diaphram-page-container {
        width: calc(100% - 20px);
    }


    .diaphram-page-overview-highlights {
        grid-template-columns: 1fr;
    }


    .diaphram-page-overview-item,
    .diaphram-page-overview-item:nth-child(even),
    .diaphram-page-overview-item:nth-child(odd) {

        padding: 0 0 12px;

        border-right: 0;

        border-bottom: 1px solid #e1e5eb;
    }


    .diaphram-page-overview-item:last-child {

        border-bottom: 0;

        padding-bottom: 0;
    }


    .diaphram-page-section-title {
        font-size: 18px;
    }


    .diaphram-page-table {
        min-width: 520px;

        font-size: 8px;
    }


    .diaphram-page-application-item h3 {
        font-size: 11px;
    }


    .diaphram-page-application-item p {
        font-size: 9px;
    }

}



/* =========================================================
   PILLING CONSTRUCTION PAGE
========================================================= */

.pilling-construct-page {
    --pilling-construct-blue: #062653;
    --pilling-construct-dark-blue: #031a3a;
    --pilling-construct-light-blue: #eef5ff;
    --pilling-construct-gold: #f2aa00;
    --pilling-construct-text: #17253d;
    --pilling-construct-white: #ffffff;
    --pilling-construct-border: #dfe6ef;
    --pilling-construct-shadow: 0 8px 25px rgba(3, 26, 58, 0.08);

    font-family: "Poppins", sans-serif;
    color: var(--pilling-construct-text);
    background: #ffffff;
    overflow: hidden;
}

.pilling-construct-page *,
.pilling-construct-page *::before,
.pilling-construct-page *::after {
    box-sizing: border-box;
}

.pilling-construct-container {
    width: min(1200px, calc(100% - 40px));
    margin: 0 auto;
}


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

.pilling-construct-hero {
    background: linear-gradient(
        110deg,
        #031a3a 0%,
        #082b59 52%,
        #7890aa 100%
    );
    position: relative;
    overflow: hidden;
}

.pilling-construct-hero-container {
    max-width: 1500px;
    min-height: 440px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 48% 52%;
    align-items: stretch;
}

.pilling-construct-hero-content {
    padding: 55px 50px 45px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.pilling-construct-service-label {
    color: var(--pilling-construct-gold);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 15px;
}

.pilling-construct-service-label span {
    width: 7px;
    height: 7px;
    background: var(--pilling-construct-gold);
    display: block;
}

.pilling-construct-hero-title {
    color: #ffffff;
    font-size: clamp(42px, 4.5vw, 68px);
    line-height: 0.98;
    font-weight: 700;
    margin: 0 0 22px;
    letter-spacing: -1px;
    border-left: 4px solid var(--pilling-construct-gold);
    padding-left: 16px;
}

.pilling-construct-hero-title strong {
    display: block;
    color: var(--pilling-construct-gold);
    font-weight: 700;
}

.pilling-construct-hero-subtitle {
    color: #ffffff;
    font-size: 20px;
    line-height: 1.4;
    margin: 0 0 15px;
}

.pilling-construct-hero-subtitle span {
    color: var(--pilling-construct-gold);
    font-weight: 700;
}

.pilling-construct-hero-description {
    max-width: 650px;
    color: #edf4ff;
    font-size: 18px;
    line-height: 1.2;
    margin: 0 0 28px;
}

.pilling-construct-hero-features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}

.pilling-construct-hero-feature {
    min-height: 58px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-right: 1px solid rgba(255,255,255,0.3);
    color: #ffffff;
}

.pilling-construct-hero-feature:first-child {
    padding-left: 0;
}

.pilling-construct-hero-feature:last-child {
    border-right: none;
}

.pilling-construct-hero-feature i {
    color: var(--pilling-construct-gold);
    font-size: 24px;
    flex-shrink: 0;
}

.pilling-construct-hero-feature span {
    font-size: 16px;
    line-height: 1.35;
    font-weight: 600;
}

.pilling-construct-hero-image {
    min-height: 440px;
    position: relative;
    overflow: hidden;
}

/* .pilling-construct-hero-image::before {
    content: "";
    position: absolute;
    left: -65px;
    top: 0;
    width: 130px;
    height: 100%;
    background: var(--pilling-construct-gold);
    clip-path: polygon(80% 0, 100% 0, 35% 50%, 100% 100%, 80% 100%, 0 50%);
    z-index: 2;
} */

.pilling-construct-hero-image img {
    width: 100%;
    height: 100%;
    min-height: 440px;
    object-fit: cover;
    display: block;
}


/* =========================================================
   OVERVIEW
========================================================= */

.pilling-construct-overview-section {
    padding: 45px 0 25px;
    background: #ffffff;
}

.pilling-construct-overview-card {
    display: grid;
    grid-template-columns: 40% 60%;
    background: #ffffff;
    border: 1px solid var(--pilling-construct-border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--pilling-construct-shadow);
}

.pilling-construct-overview-image {
    min-height: 400px;
    position: relative;
    overflow: hidden;
}

.pilling-construct-overview-image::after {
    content: "";
    position: absolute;
    right: -45px;
    top: 0;
    width: 90px;
    height: 100%;
    background: #ffffff;
    clip-path: polygon(100% 0, 100% 100%, 0 50%);
}

.pilling-construct-overview-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pilling-construct-overview-content {
    padding: 35px 45px 30px;
}

.pilling-construct-small-title {
    color: var(--pilling-construct-gold);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 7px;
}

.pilling-construct-small-title span {
    width: 28px;
    height: 2px;
    background: var(--pilling-construct-gold);
    display: inline-block;
}

.pilling-construct-overview-content h2,
.pilling-construct-specification-content h2,
.pilling-construct-service-card h2,
.pilling-construct-advantages-card h2,
.pilling-construct-quality-content h2,
.pilling-construct-safety-content h2 {
    color: var(--pilling-construct-blue);
    font-size: 25px;
    line-height: 1.25;
    margin: 0 0 12px;
    font-weight: 700;
}

.pilling-construct-overview-content > p {
    font-size: 17px;
    line-height: 1.2;
    color: #666666;
    margin: 0 0 9px;
}

.pilling-construct-overview-features {
    margin-top: 22px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.pilling-construct-overview-feature {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 0 15px;
    border-right: 1px solid var(--pilling-construct-border);
}

.pilling-construct-overview-feature:first-child {
    padding-left: 0;
}

.pilling-construct-overview-feature:last-child {
    border-right: none;
}

.pilling-construct-feature-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--pilling-construct-blue);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.pilling-construct-overview-feature h4 {
    color: var(--pilling-construct-blue);
    font-size: 16px;
    margin: 0;
}

.pilling-construct-overview-feature p {
    color: #5d6674;
    font-size: 15px;
    line-height: 1.2;
    margin: 0;
}


/* =========================================================
   SPECIFICATIONS
========================================================= */

.pilling-construct-specification-section {
    padding: 20px 0 25px;
}

.pilling-construct-specification-card {
    display: grid;
    grid-template-columns: 55% 45%;
    border: 1px solid var(--pilling-construct-border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--pilling-construct-shadow);
}

.pilling-construct-specification-content {
    padding: 28px 30px;
}

.pilling-construct-table-wrapper {
    overflow-x: auto;
}

.pilling-construct-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}

.pilling-construct-table th {
    background: var(--pilling-construct-blue);
    color: #ffffff;
    text-align: left;
    padding: 9px 10px;
    font-weight: 600;
}

.pilling-construct-table td {
    border: 1px solid #dce3eb;
    padding: 7px 9px;
    line-height: 1.3;
    font-size:16px;
}

.pilling-construct-table td:first-child {
    width: 42%;
    color: var(--pilling-construct-blue);
    font-weight: 600;
    font-size:16px;
}

.pilling-construct-table td i {
    width: 18px;
    margin-right: 5px;
    color: var(--pilling-construct-blue);
}

.pilling-construct-specification-image {
    min-height: 550px;
}

.pilling-construct-specification-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* =========================================================
   PROCESS
========================================================= */

.pilling-construct-process-section {
    padding: 10px 0 30px;
}

.pilling-construct-process-card {
    border: 1px solid var(--pilling-construct-border);
    border-radius: 12px;
    box-shadow: var(--pilling-construct-shadow);
    padding: 28px 25px 35px;
    background: #ffffff;
}

.pilling-construct-section-heading {
    text-align: center;
    margin-bottom: 30px;
}

.pilling-construct-section-heading
.pilling-construct-small-title {
    justify-content: center;
}

.pilling-construct-process-list {
    display: grid;
    grid-template-columns: 1fr 35px 1fr 35px 1fr 35px 1fr 35px 1fr 35px 1fr;
    align-items: start;
}

.pilling-construct-process-item {
    text-align: center;
    position: relative;
}

.pilling-construct-process-number {
    color: var(--pilling-construct-gold);
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 4px;
}

.pilling-construct-process-icon {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--pilling-construct-blue);
    border: 3px solid #e7edf6;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    font-size: 19px;
}

.pilling-construct-process-item h3 {
    color: var(--pilling-construct-blue);
    font-size: 16px;
    line-height: 1.3;
    margin: 0 0 7px;
}

.pilling-construct-process-item p {
    color: #666666;
    font-size: 15px;
    line-height: 1.2;
    margin: 0;
}

.pilling-construct-process-arrow {
    color: #9ba8b8;
    font-size: 14px;
    padding-top: 70px;
    text-align: center;
}


/* =========================================================
   SERVICES + ADVANTAGES
========================================================= */

.pilling-construct-services-section {
    padding: 0 0 30px;
}

.pilling-construct-two-column {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 15px;
}

.pilling-construct-service-card,
.pilling-construct-advantages-card {
    border: 1px solid var(--pilling-construct-border);
    border-radius: 12px;
    padding: 25px;
    box-shadow: var(--pilling-construct-shadow);
    background: #ffffff;
}

.pilling-construct-service-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 20px;
    margin-top: 20px;
}

.pilling-construct-service-item {
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 10px;
    align-items: start;
}

.pilling-construct-service-item > i {
    color: var(--pilling-construct-blue);
    font-size: 22px;
    margin-top: 3px;
}

.pilling-construct-service-item h3,
.pilling-construct-advantage-item h3 {
    color: var(--pilling-construct-blue);
    font-size: 16px;
    margin: 0 0 4px;
}

.pilling-construct-service-item p,
.pilling-construct-advantage-item p {
    color: #666666;
    font-size: 16px;
    line-height: 1.2;
    margin: 0;
}

.pilling-construct-advantage-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 15px;
    margin-top: 20px;
}

.pilling-construct-advantage-item {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 9px;
}

.pilling-construct-advantage-item > i {
    width: 34px;
    height: 34px;
    border: 1px solid var(--pilling-construct-gold);
    color: var(--pilling-construct-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}


/* =========================================================
   QUALITY
========================================================= */

.pilling-construct-quality-section {
    padding-bottom: 30px;
}

.pilling-construct-quality-card {
    display: grid;
    grid-template-columns: 58% 42%;
    border: 1px solid var(--pilling-construct-border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--pilling-construct-shadow);
    background: #ffffff;
}

.pilling-construct-quality-content {
    padding: 30px;
}

.pilling-construct-quality-content > p {
    font-size: 16px;
    line-height: 1.2;
    color: #666666;
    margin: 0 0 18px;
}

.pilling-construct-quality-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.pilling-construct-quality-list div {
    font-size: 16px;
    color: var(--pilling-construct-blue);
    font-weight: 600;
}

.pilling-construct-quality-list i {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--pilling-construct-blue);
    color: #ffffff;
    font-size: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 6px;
}

.pilling-construct-quality-image {
    min-height: 330px;
}

.pilling-construct-quality-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* =========================================================
   SAFETY
========================================================= */

.pilling-construct-safety-section {
    padding-bottom: 30px;
}

.pilling-construct-safety-card {
    background: var(--pilling-construct-light-blue);
    border: 1px solid #d8e5f7;
    border-radius: 12px;
    padding: 30px;
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 25px;
    align-items: start;
}

.pilling-construct-safety-icon {
    width: 65px;
    height: 65px;
    background: var(--pilling-construct-blue);
    color: var(--pilling-construct-gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 27px;
}

.pilling-construct-safety-content p {
    color: #5a6676;
    font-size: 16px;
    line-height: 1.2;
    margin: 0 0 18px;
}

.pilling-construct-safety-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 25px;
}

.pilling-construct-safety-list span {
    font-size: 16px;
    color: var(--pilling-construct-blue);
    font-weight: 600;
}

.pilling-construct-safety-list i {
    color: var(--pilling-construct-gold);
    margin-right: 5px;
}


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

.pilling-construct-cta-section {
    background:
        linear-gradient(
            90deg,
            rgba(3,26,58,0.98),
            rgba(6,38,83,0.92)
        );
    padding: 40px 0;
}

.pilling-construct-cta-container {
    width: min(1200px, calc(100% - 40px));
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.pilling-construct-cta-small {
    color: var(--pilling-construct-gold);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 7px;
}

.pilling-construct-cta-content h2 {
    color: #ffffff;
    font-size: 30px;
    margin: 0 0 10px;
}

.pilling-construct-cta-content h2 span {
    color: var(--pilling-construct-gold);
}

.pilling-construct-cta-content p {
    color: #dbe5f3;
    max-width: 700px;
    font-size: 12px;
    line-height: 1.65;
    margin: 0;
}

.pilling-construct-cta-button {
    flex-shrink: 0;
    background: var(--pilling-construct-gold);
    color: #ffffff;
    text-decoration: none;
    padding: 14px 24px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    transition: 0.3s ease;
}

.pilling-construct-cta-button:hover {
    background: #d99300;
    color: #ffffff;
    transform: translateY(-2px);
}


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

@media (max-width: 991px) {

    .pilling-construct-container {
        width: min(94%, 760px);
    }

    /* HERO */

    .pilling-construct-hero-container {
        grid-template-columns: 1fr;
    }

    .pilling-construct-hero-content {
        padding: 50px 35px;
    }

    .pilling-construct-hero-image {
        height: 430px;
        min-height: 430px;
    }

    .pilling-construct-hero-image img {
        min-height: 430px;
    }

    .pilling-construct-hero-image::before {
        left: 0;
        top: -35px;
        width: 100%;
        height: 70px;
        clip-path: polygon(0 100%, 50% 0, 100% 100%);
    }

    /* OVERVIEW */

    .pilling-construct-overview-card {
        grid-template-columns: 1fr;
    }

    .pilling-construct-overview-image {
        height: 350px;
        min-height: 350px;
    }

    .pilling-construct-overview-image::after {
        display: none;
    }

    .pilling-construct-overview-features {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px 0;
    }

    .pilling-construct-overview-feature:nth-child(2) {
        border-right: none;
    }

    /* SPECIFICATION */

    .pilling-construct-specification-card {
        grid-template-columns: 1fr;
    }

    .pilling-construct-specification-image {
        height: 350px;
        min-height: 350px;
    }

    /* PROCESS */

    .pilling-construct-process-list {
        grid-template-columns: repeat(3, 1fr);
        gap: 35px 20px;
    }

    .pilling-construct-process-arrow {
        display: none;
    }

    /* SERVICES */

    .pilling-construct-two-column {
        grid-template-columns: 1fr;
    }

    /* QUALITY */

    .pilling-construct-quality-card {
        grid-template-columns: 1fr;
    }

    .pilling-construct-quality-image {
        height: 350px;
        min-height: 350px;
    }

    /* CTA */

    .pilling-construct-cta-container {
        width: min(94%, 760px);
    }

}


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

@media (max-width: 600px) {

    .pilling-construct-container {
        width: calc(100% - 24px);
    }

    /* HERO */

    .pilling-construct-hero-content {
        padding: 38px 20px;
    }

    .pilling-construct-hero-title {
        font-size: 40px;
        padding-left: 12px;
    }

    .pilling-construct-hero-subtitle {
        font-size: 17px;
    }

    .pilling-construct-hero-description {
        font-size: 12px;
    }

    .pilling-construct-hero-features {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px 0;
    }

    .pilling-construct-hero-feature {
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.2);
        padding: 10px 8px;
    }

    .pilling-construct-hero-feature:nth-child(odd) {
        padding-left: 0;
    }

    .pilling-construct-hero-feature i {
        font-size: 20px;
    }

    .pilling-construct-hero-image {
        height: 300px;
        min-height: 300px;
    }

    .pilling-construct-hero-image img {
        min-height: 300px;
    }

    /* OVERVIEW */

    .pilling-construct-overview-section {
        padding-top: 25px;
    }

    .pilling-construct-overview-content {
        padding: 25px 18px;
    }

    .pilling-construct-overview-content h2,
    .pilling-construct-specification-content h2,
    .pilling-construct-service-card h2,
    .pilling-construct-advantages-card h2,
    .pilling-construct-quality-content h2,
    .pilling-construct-safety-content h2 {
        font-size: 21px;
    }

    .pilling-construct-overview-image {
        height: 250px;
        min-height: 250px;
    }

    .pilling-construct-overview-features {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .pilling-construct-overview-feature,
    .pilling-construct-overview-feature:first-child {
        padding: 0 0 15px;
        border-right: none;
        border-bottom: 1px solid var(--pilling-construct-border);
        flex-direction: row;
        align-items: center;
    }

    .pilling-construct-overview-feature:last-child {
        border-bottom: none;
    }

    /* SPECIFICATION */

    .pilling-construct-specification-content {
        padding: 22px 15px;
    }

    .pilling-construct-table {
        min-width: 600px;
        font-size: 10px;
    }

    .pilling-construct-specification-image {
        height: 250px;
        min-height: 250px;
    }

    /* PROCESS */

    .pilling-construct-process-card {
        padding: 22px 15px;
    }

    .pilling-construct-process-list {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .pilling-construct-process-item {
        max-width: 330px;
        margin: auto;
    }

    /* SERVICES */

    .pilling-construct-service-card,
    .pilling-construct-advantages-card {
        padding: 22px 16px;
    }

    .pilling-construct-service-grid,
    .pilling-construct-advantage-list {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    /* QUALITY */

    .pilling-construct-quality-content {
        padding: 25px 18px;
    }

    .pilling-construct-quality-list {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .pilling-construct-quality-image {
        height: 250px;
        min-height: 250px;
    }

    /* SAFETY */

    .pilling-construct-safety-card {
        grid-template-columns: 1fr;
        padding: 25px 18px;
        gap: 15px;
    }

    .pilling-construct-safety-icon {
        width: 55px;
        height: 55px;
        font-size: 22px;
    }

    .pilling-construct-safety-list {
        display: grid;
        grid-template-columns: 1fr;
        gap: 9px;
    }

    /* CTA */

    .pilling-construct-cta-container {
        width: calc(100% - 24px);
        flex-direction: column;
        align-items: flex-start;
    }

    .pilling-construct-cta-content h2 {
        font-size: 24px;
    }

    .pilling-construct-cta-button {
        width: 100%;
        justify-content: center;
    }

}




/* =========================================================
   METRO RAIL PROJECT PAGE
========================================================= */

.mtro-rail-page {
    --mtro-rail-page-blue: #062653;
    --mtro-rail-page-dark: #031a3a;
    --mtro-rail-page-gold: #f2aa00;
    --mtro-rail-page-light: #eef5ff;
    --mtro-rail-page-text: #17253d;
    --mtro-rail-page-muted: #5c6878;
    --mtro-rail-page-border: #dfe6ef;
    --mtro-rail-page-white: #ffffff;

    width: 100%;
    background: #ffffff;
    color: var(--mtro-rail-page-text);
    overflow: hidden;
}

.mtro-rail-page *,
.mtro-rail-page *::before,
.mtro-rail-page *::after {
    box-sizing: border-box;
}


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

.mtro-rail-page-hero {
    width: 100%;
    background: var(--mtro-rail-page-dark);
    overflow: hidden;
}

.mtro-rail-page-hero-container {
    width: 100%;
    max-width: 1500px;
    min-height: 440px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 48% 52%;
}


/* HERO CONTENT */

.mtro-rail-page-hero-content {
    padding: 50px 45px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    position: relative;
    z-index: 2;

    background:
        linear-gradient(
            135deg,
            #031a3a,
            #082d61
        );
}


.mtro-rail-page-service-label {
    display: flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 13px;

    color: var(--mtro-rail-page-gold);

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

    letter-spacing: 1px;
}


.mtro-rail-page-service-label span {
    width: 7px;
    height: 7px;

    display: block;

    background: var(--mtro-rail-page-gold);
}


.mtro-rail-page-hero-title {
    margin: 0 0 20px;
    padding-left: 16px;

    border-left: 4px solid var(--mtro-rail-page-gold);

    color: #ffffff;

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

    font-size: clamp(43px, 4.5vw, 67px);

    line-height: 0.98;
    font-weight: 700;
}


.mtro-rail-page-hero-title strong {
    display: block;

    color: var(--mtro-rail-page-gold);
}


.mtro-rail-page-hero-subtitle {
    max-width: 650px;

    margin: 0 0 13px;

    color: #ffffff;

    font-size: 19px;

    line-height: 1.45;
}


.mtro-rail-page-hero-subtitle span {
    display: block;

    color: var(--mtro-rail-page-gold);

    font-weight: 700;
}


.mtro-rail-page-hero-description {
    max-width: 680px;

    margin: 0 0 26px;

    color: #e5edf8;

    font-size: 18px;

    line-height: 1.2;
}


/* HERO FEATURES */

.mtro-rail-page-hero-features {
    display: grid;

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


.mtro-rail-page-hero-feature {
    min-height: 55px;

    display: flex;
    align-items: center;

    gap: 8px;

    padding: 0 12px;

    border-right: 1px solid rgba(255,255,255,0.25);
}


.mtro-rail-page-hero-feature:first-child {
    padding-left: 0;
}


.mtro-rail-page-hero-feature:last-child {
    border-right: 0;
}


.mtro-rail-page-hero-feature i {
    flex-shrink: 0;

    color: var(--mtro-rail-page-gold);

    font-size: 18px;
}


.mtro-rail-page-hero-feature span {
    color: #ffffff;

    font-size: 17px;

    line-height: 1.2;

    font-weight: 600;
}


/* HERO IMAGE */

.mtro-rail-page-hero-image {
    position: relative;

    min-height: 440px;

    overflow: hidden;
}


.mtro-rail-page-hero-image img {
    width: 100%;
    height: 100%;

    min-height: 440px;

    display: block;

    object-fit: cover;
}


/* ANGLED DIVIDER */

/* .mtro-rail-page-hero-image::before {
    content: "";

    position: absolute;

    z-index: 3;

    left: -60px;
    top: -5%;

    width: 100px;
    height: 110%;

    background: var(--mtro-rail-page-gold);

    transform: skewX(-20deg);
}


.mtro-rail-page-hero-image::after {
    content: "";

    position: absolute;

    z-index: 4;

    left: -28px;
    top: -5%;

    width: 25px;
    height: 110%;

    background: #ffffff;

    transform: skewX(-20deg);
} */


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

.mtro-rail-page-container {
    width: min(1250px, calc(100% - 50px));

    margin: 0 auto;

    padding: 35px 0 50px;
}


/* =========================================================
   COMMON SECTION HEADING
========================================================= */

.mtro-rail-page-section-label {
    display: flex;
    align-items: center;
    gap: 9px;

    margin-bottom: 7px;

    color: #df9900;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1px;
}


.mtro-rail-page-section-label span {
    width: 30px;
    height: 2px;

    display: inline-block;

    background: #df9900;
}


.mtro-rail-page-section-title {
    margin: 0 0 13px;

    color: var(--mtro-rail-page-blue);

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

    font-size: 24px;

    line-height: 1.25;
}


/* =========================================================
   OVERVIEW
========================================================= */

.mtro-rail-page-overview {
    display: grid;

    grid-template-columns: 38% 62%;

    margin-bottom: 25px;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid var(--mtro-rail-page-border);

    border-radius: 10px;

    box-shadow: 0 6px 20px rgba(3,26,58,0.07);
}


.mtro-rail-page-overview-image {
    min-height: 390px;

    overflow: hidden;
}


.mtro-rail-page-overview-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


.mtro-rail-page-overview-content {
    padding: 28px 32px;
}


.mtro-rail-page-overview-content > p {
    margin: 0 0 9px;

    color: #666666;

    font-size: 18px;

    line-height: 1.2;
}


/* OVERVIEW FEATURES */

.mtro-rail-page-overview-features {
    display: grid;

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

    margin-top: 20px;
}


.mtro-rail-page-overview-feature {
    display: flex;
    flex-direction: column;

    gap: 8px;

    padding: 0 12px;

    border-right: 1px solid var(--mtro-rail-page-border);
}


.mtro-rail-page-overview-feature:first-child {
    padding-left: 0;
}


.mtro-rail-page-overview-feature:last-child {
    padding-right: 0;

    border-right: 0;
}


.mtro-rail-page-feature-icon {
    width: 36px;
    height: 36px;

    display: flex;

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

    border-radius: 50%;

    background: var(--mtro-rail-page-blue);

    color: #ffffff;

    font-size: 14px;
}


.mtro-rail-page-overview-feature h3 {
    margin: 0 0 3px;

    color: var(--mtro-rail-page-blue);

    font-size: 17px;

    line-height: 1.2;
}


.mtro-rail-page-overview-feature p {
    margin: 0;

    color: #666666;

    font-size: 16px;

    line-height: 1.2;
}


/* =========================================================
   SPECIFICATIONS
========================================================= */

.mtro-rail-page-specification {
    display: grid;

    grid-template-columns: 58% 42%;

    margin-bottom: 25px;

    overflow: hidden;

    border: 1px solid var(--mtro-rail-page-border);

    border-radius: 10px;

    box-shadow: 0 6px 20px rgba(3,26,58,0.06);
}


.mtro-rail-page-specification-content {
    padding: 25px 18px;
}


.mtro-rail-page-table-wrapper {
    width: 100%;

    overflow-x: auto;
}


.mtro-rail-page-table {
    width: 100%;

    border-collapse: collapse;

    font-size: 9px;
}


.mtro-rail-page-table th {
    padding: 7px 9px;

    background: var(--mtro-rail-page-blue);

    color: #ffffff;

    text-align: left;
    font-size:17px;
}


.mtro-rail-page-table td {
    padding: 6px 8px;

    border: 1px solid var(--mtro-rail-page-border);

    color: #666666;

    line-height: 1.35;
    font-size:16px;
}


.mtro-rail-page-table td:first-child {
    width: 42%;

    color: var(--mtro-rail-page-blue);

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


.mtro-rail-page-table td i {
    width: 18px;

    margin-right: 5px;

    color: var(--mtro-rail-page-blue);
}


.mtro-rail-page-specification-image {
    min-height: 480px;

    overflow: hidden;
}


.mtro-rail-page-specification-image img {
    width: 100%;
    height: 100%;

    min-height: 480px;

    display: block;

    object-fit: cover;
}


/* =========================================================
   PROCESS
========================================================= */

.mtro-rail-page-process {
    margin-bottom: 25px;

    padding: 27px 20px 30px;

    border: 1px solid var(--mtro-rail-page-border);

    border-radius: 10px;

    box-shadow: 0 6px 20px rgba(3,26,58,0.06);
}


.mtro-rail-page-process-heading {
    text-align: center;
}


.mtro-rail-page-process-heading
.mtro-rail-page-section-label {
    justify-content: center;
}


.mtro-rail-page-process-list {
    display: flex;

    align-items: flex-start;

    margin-top: 25px;
}


.mtro-rail-page-process-item {
    flex: 1;

    max-width: 180px;

    text-align: center;
}


.mtro-rail-page-process-number {
    margin-bottom: 5px;

    color: var(--mtro-rail-page-gold);

    font-size: 10px;

    font-weight: 700;
}


.mtro-rail-page-process-icon {
    width: 52px;
    height: 52px;

    margin: 0 auto 9px;

    display: flex;

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

    border-radius: 50%;

    background: var(--mtro-rail-page-blue);

    color: #ffffff;

    font-size: 17px;
}


.mtro-rail-page-process-item h3 {
    margin: 0 0 6px;

    color: var(--mtro-rail-page-blue);

    font-size: 17px;
}


.mtro-rail-page-process-item p {
    margin: 0;

    color: #666666;

    font-size: 16px;

    line-height: 1.2;
}


.mtro-rail-page-process-arrow {
    flex: 0 0 28px;

    padding-top: 57px;

    color: #a1acba;

    font-size: 10px;

    text-align: center;
}


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

.mtro-rail-page-services {
    display: grid;

    grid-template-columns: 62% 38%;

    margin-bottom: 25px;

    overflow: hidden;

    border: 1px solid var(--mtro-rail-page-border);

    border-radius: 10px;

    box-shadow: 0 6px 20px rgba(3,26,58,0.06);
}


.mtro-rail-page-services-content {
    padding: 26px 22px;
}


.mtro-rail-page-service-grid {
    display: grid;

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

    gap: 18px;

    margin-top: 20px;
}


.mtro-rail-page-service-item {
    display: flex;

    align-items: flex-start;

    gap: 10px;
}


.mtro-rail-page-service-item > i {
    flex: 0 0 31px;

    width: 31px;
    height: 31px;

    display: flex;

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

    color: var(--mtro-rail-page-blue);

    font-size: 17px;
}


.mtro-rail-page-service-item h3 {
    margin: 0 0 4px;

    color: var(--mtro-rail-page-blue);

    font-size: 17px;
}


.mtro-rail-page-service-item p {
    margin: 0;

    color: #606b7b;

    font-size: 16px;

    line-height: 1.2;
}


.mtro-rail-page-services-image {
    min-height: 330px;

    overflow: hidden;
}


.mtro-rail-page-services-image img {
    width: 100%;
    height: 100%;

    min-height: 330px;

    display: block;

    object-fit: cover;
}


/* =========================================================
   APPLICATIONS
========================================================= */

.mtro-rail-page-applications {
    margin-bottom: 25px;

    padding: 27px 20px 30px;

    border: 1px solid var(--mtro-rail-page-border);

    border-radius: 10px;

    box-shadow: 0 6px 20px rgba(3,26,58,0.06);
}


.mtro-rail-page-application-grid {
    display: grid;

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

    gap: 17px;

    margin-top: 20px;
}


.mtro-rail-page-application-card {
    padding: 18px;

    border: 1px solid var(--mtro-rail-page-border);

    border-radius: 7px;

    text-align: center;

    transition: 0.3s ease;
}


.mtro-rail-page-application-card:hover {
    transform: translateY(-4px);

    box-shadow: 0 8px 18px rgba(3,26,58,0.08);
}


.mtro-rail-page-application-icon {
    width: 45px;
    height: 45px;

    margin: 0 auto 9px;

    display: flex;

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

    border-radius: 50%;

    background: var(--mtro-rail-page-blue);

    color: #ffffff;

    font-size: 17px;
}


.mtro-rail-page-application-card h3 {
    margin: 0 0 5px;

    color: var(--mtro-rail-page-blue);

    font-size: 17px;
}


.mtro-rail-page-application-card p {
    margin: 0;

    color: #666666;

    font-size: 16px;

    line-height: 1.2;
}


/* =========================================================
   QUALITY
========================================================= */

.mtro-rail-page-quality {
    display: grid;

    grid-template-columns: 62% 38%;

    margin-bottom: 25px;

    overflow: hidden;

    border: 1px solid var(--mtro-rail-page-border);

    border-radius: 10px;

    box-shadow: 0 6px 20px rgba(3,26,58,0.06);
}


.mtro-rail-page-quality-content {
    padding: 27px 22px;
}


.mtro-rail-page-quality-content > p {
    margin: 0;

    color: #5c6878;

    font-size: 17px;

    line-height: 1.2;
}


.mtro-rail-page-quality-grid {
    display: grid;

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

    gap: 17px;

    margin-top: 20px;
}


.mtro-rail-page-quality-item {
    display: flex;

    align-items: flex-start;

    gap: 9px;
}


.mtro-rail-page-quality-item > i {
    flex: 0 0 28px;

    width: 28px;
    height: 28px;

    display: flex;

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

    border-radius: 50%;

    background: var(--mtro-rail-page-blue);

    color: #ffffff;

    font-size: 17px;
}


.mtro-rail-page-quality-item h3 {
    margin: 2px 0 3px;

    color: var(--mtro-rail-page-blue);

    font-size: 17px;
}


.mtro-rail-page-quality-item p {
    margin: 0;

    color: #666666;

    font-size: 16px;

    line-height: 1.2;
}


.mtro-rail-page-quality-image {
    min-height: 330px;

    overflow: hidden;
}


.mtro-rail-page-quality-image img {
    width: 100%;
    height: 100%;

    min-height: 330px;

    display: block;

    object-fit: cover;
}


/* =========================================================
   SAFETY
========================================================= */

.mtro-rail-page-safety {
    display: grid;

    grid-template-columns: 40% 60%;

    margin-bottom: 25px;

    overflow: hidden;

    border: 1px solid var(--mtro-rail-page-border);

    border-radius: 10px;

    box-shadow: 0 6px 20px rgba(3,26,58,0.06);
}


.mtro-rail-page-safety-image {
    min-height: 340px;

    overflow: hidden;
}


.mtro-rail-page-safety-image img {
    width: 100%;
    height: 100%;

    min-height: 340px;

    display: block;

    object-fit: cover;
}


.mtro-rail-page-safety-content {
    padding: 28px 32px;
}


.mtro-rail-page-safety-content > p {
    margin: 0 0 18px;

    color: #5c6878;

    font-size: 10px;

    line-height: 1.65;
}


.mtro-rail-page-safety-list {
    display: grid;

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

    gap: 12px 20px;
}


.mtro-rail-page-safety-list div {
    color: #35445a;

    font-size: 9px;

    line-height: 1.4;
}


.mtro-rail-page-safety-list i {
    margin-right: 6px;

    color: var(--mtro-rail-page-gold);
}


/* =========================================================
   ADVANTAGES
========================================================= */

.mtro-rail-page-advantages {
    margin-bottom: 25px;

    padding: 27px 20px 30px;

    border: 1px solid var(--mtro-rail-page-border);

    border-radius: 10px;

    box-shadow: 0 6px 20px rgba(3,26,58,0.06);
}


.mtro-rail-page-advantage-grid {
    display: grid;

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

    gap: 20px;

    margin-top: 20px;
}


.mtro-rail-page-advantage-item {
    display: flex;

    align-items: flex-start;

    gap: 9px;
}


.mtro-rail-page-advantage-item > i {
    flex: 0 0 30px;

    width: 30px;
    height: 30px;

    display: flex;

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

    border: 1px solid var(--mtro-rail-page-gold);

    border-radius: 50%;

    color: var(--mtro-rail-page-blue);

    font-size: 12px;
}


.mtro-rail-page-advantage-item h3 {
    margin: 2px 0 4px;

    color: var(--mtro-rail-page-blue);

    font-size: 10px;

    line-height: 1.3;
}


.mtro-rail-page-advantage-item p {
    margin: 0;

    color: #606b7a;

    font-size: 8px;

    line-height: 1.45;
}


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

.mtro-rail-page-cta {
    display: flex;

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

    gap: 25px;

    padding: 35px 40px;

    background:
        linear-gradient(
            120deg,
            #031a3a,
            #082d61
        );

    border-radius: 10px;
}


.mtro-rail-page-cta-label {
    margin-bottom: 6px;

    color: var(--mtro-rail-page-gold);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1px;
}


.mtro-rail-page-cta h2 {
    margin: 0 0 8px;

    color: #ffffff;

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

    font-size: 28px;
}


.mtro-rail-page-cta h2 span {
    color: var(--mtro-rail-page-gold);
}


.mtro-rail-page-cta p {
    max-width: 700px;

    margin: 0;

    color: #dce6f3;

    font-size: 10px;

    line-height: 1.6;
}


.mtro-rail-page-cta-button {
    flex-shrink: 0;

    display: inline-flex;

    align-items: center;
    gap: 10px;

    padding: 13px 22px;

    background: var(--mtro-rail-page-gold);

    border-radius: 5px;

    color: #ffffff;

    text-decoration: none;

    font-size: 10px;

    font-weight: 700;

    transition: 0.3s ease;
}


.mtro-rail-page-cta-button:hover {
    background: #d99200;

    color: #ffffff;

    transform: translateY(-2px);
}


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

@media (max-width: 991px) {

    .mtro-rail-page-container {
        width: calc(100% - 30px);

        padding-top: 25px;
    }


    /* HERO */

    .mtro-rail-page-hero-container {
        grid-template-columns: 1fr;
    }


    .mtro-rail-page-hero-content {
        padding: 45px 35px;
    }


    .mtro-rail-page-hero-image {
        height: 380px;

        min-height: 380px;
    }


    .mtro-rail-page-hero-image img {
        min-height: 380px;
    }


    .mtro-rail-page-hero-image::before {
        left: 0;
        top: -35px;

        width: 100%;
        height: 70px;

        transform: none;

        clip-path: polygon(
            0 100%,
            50% 0,
            100% 100%
        );
    }


    .mtro-rail-page-hero-image::after {
        display: none;
    }


    /* OVERVIEW */

    .mtro-rail-page-overview {
        grid-template-columns: 1fr;
    }


    .mtro-rail-page-overview-image {
        height: 330px;

        min-height: 330px;
    }


    .mtro-rail-page-overview-features {
        grid-template-columns: repeat(2, 1fr);

        row-gap: 18px;
    }


    .mtro-rail-page-overview-feature:nth-child(2) {
        border-right: 0;
    }


    /* SPECIFICATION */

    .mtro-rail-page-specification {
        grid-template-columns: 1fr;
    }


    .mtro-rail-page-specification-image {
        height: 330px;

        min-height: 330px;

        order: -1;
    }


    .mtro-rail-page-specification-image img {
        min-height: 330px;
    }


    /* PROCESS */

    .mtro-rail-page-process-list {
        display: grid;

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

        gap: 30px 15px;
    }


    .mtro-rail-page-process-arrow {
        display: none;
    }


    .mtro-rail-page-process-item {
        max-width: none;
    }


    /* SERVICES */

    .mtro-rail-page-services {
        grid-template-columns: 1fr;
    }


    .mtro-rail-page-services-image {
        height: 320px;

        min-height: 320px;

        order: -1;
    }


    /* APPLICATIONS */

    .mtro-rail-page-application-grid {
        grid-template-columns: repeat(2, 1fr);
    }


    /* QUALITY */

    .mtro-rail-page-quality {
        grid-template-columns: 1fr;
    }


    .mtro-rail-page-quality-image {
        height: 330px;

        min-height: 330px;

        order: -1;
    }


    /* SAFETY */

    .mtro-rail-page-safety {
        grid-template-columns: 1fr;
    }


    .mtro-rail-page-safety-image {
        height: 320px;

        min-height: 320px;
    }


    /* ADVANTAGES */

    .mtro-rail-page-advantage-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


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

@media (max-width: 767px) {

    .mtro-rail-page-container {
        width: calc(100% - 20px);

        padding-top: 20px;
    }


    /* HERO */

    .mtro-rail-page-hero-content {
        padding: 38px 20px 32px;
    }


    .mtro-rail-page-hero-title {
        font-size: 39px;

        padding-left: 12px;
    }


    .mtro-rail-page-hero-subtitle {
        font-size: 16px;
    }


    .mtro-rail-page-hero-description {
        font-size: 11px;

        line-height: 1.65;
    }


    .mtro-rail-page-hero-features {
        grid-template-columns: repeat(2, 1fr);

        gap: 10px 0;
    }


    .mtro-rail-page-hero-feature {
        min-height: 48px;

        padding: 7px 10px;

        border-right: 0;

        border-bottom: 1px solid rgba(255,255,255,0.2);
    }


    .mtro-rail-page-hero-feature:nth-child(odd) {
        padding-left: 0;
    }


    .mtro-rail-page-hero-feature i {
        font-size: 17px;
    }


    .mtro-rail-page-hero-feature span {
        font-size: 8px;
    }


    .mtro-rail-page-hero-image {
        height: 280px;

        min-height: 280px;
    }


    .mtro-rail-page-hero-image img {
        min-height: 280px;
    }


    /* COMMON */

    .mtro-rail-page-section-title {
        font-size: 20px;
    }


    /* OVERVIEW */

    .mtro-rail-page-overview-content {
        padding: 23px 17px;
    }


    .mtro-rail-page-overview-image {
        height: 240px;

        min-height: 240px;
    }


    .mtro-rail-page-overview-content > p {
        font-size: 10px;
    }


    .mtro-rail-page-overview-features {
        grid-template-columns: 1fr;

        gap: 14px;
    }


    .mtro-rail-page-overview-feature {

        padding: 0 0 14px;

        border-right: 0;

        border-bottom: 1px solid var(--mtro-rail-page-border);

        flex-direction: row;

        align-items: center;
    }


    .mtro-rail-page-overview-feature:last-child {
        padding-bottom: 0;

        border-bottom: 0;
    }


    /* SPECIFICATION */

    .mtro-rail-page-specification-content {
        padding: 22px 13px;
    }


    .mtro-rail-page-table {
        min-width: 570px;

        font-size: 9px;
    }


    .mtro-rail-page-specification-image {
        height: 240px;

        min-height: 240px;
    }


    .mtro-rail-page-specification-image img {
        min-height: 240px;
    }


    /* PROCESS */

    .mtro-rail-page-process {
        padding: 22px 14px 25px;
    }


    .mtro-rail-page-process-list {
        grid-template-columns: 1fr;

        gap: 22px;
    }


    .mtro-rail-page-process-item {
        display: grid;

        grid-template-columns: 55px 1fr;

        grid-template-rows: auto auto;

        column-gap: 13px;

        text-align: left;

        max-width: 100%;

        padding-bottom: 18px;

        border-bottom: 1px solid var(--mtro-rail-page-border);
    }


    .mtro-rail-page-process-item:last-child {
        padding-bottom: 0;

        border-bottom: 0;
    }


    .mtro-rail-page-process-number {
        grid-column: 1;

        grid-row: 1 / 3;

        margin-top: 5px;

        text-align: center;
    }


    .mtro-rail-page-process-icon {
        grid-column: 1;

        grid-row: 1 / 3;

        width: 48px;
        height: 48px;

        margin: 25px 0 0;

        font-size: 16px;
    }


    .mtro-rail-page-process-item h3 {
        grid-column: 2;

        grid-row: 1;

        margin: 2px 0 5px;

        font-size: 12px;
    }


    .mtro-rail-page-process-item p {
        grid-column: 2;

        grid-row: 2;

        font-size: 9px;
    }


    /* SERVICES */

    .mtro-rail-page-services-content {
        padding: 22px 17px;
    }


    .mtro-rail-page-service-grid {
        grid-template-columns: 1fr;

        gap: 17px;
    }


    .mtro-rail-page-services-image {
        height: 240px;

        min-height: 240px;
    }


    /* APPLICATIONS */

    .mtro-rail-page-applications {
        padding: 23px 15px;
    }


    .mtro-rail-page-application-grid {
        grid-template-columns: 1fr;

        gap: 14px;
    }


    .mtro-rail-page-application-card {
        display: grid;

        grid-template-columns: 50px 1fr;

        grid-template-rows: auto auto;

        text-align: left;

        column-gap: 12px;
    }


    .mtro-rail-page-application-icon {
        grid-column: 1;

        grid-row: 1 / 3;

        margin: 0;
    }


    .mtro-rail-page-application-card h3 {
        grid-column: 2;

        grid-row: 1;

        margin-top: 3px;
    }


    .mtro-rail-page-application-card p {
        grid-column: 2;

        grid-row: 2;
    }


    /* QUALITY */

    .mtro-rail-page-quality-content {
        padding: 23px 17px;
    }


    .mtro-rail-page-quality-grid {
        grid-template-columns: 1fr;

        gap: 15px;
    }


    .mtro-rail-page-quality-image {
        height: 240px;

        min-height: 240px;
    }


    .mtro-rail-page-quality-image img {
        min-height: 240px;
    }


    /* SAFETY */

    .mtro-rail-page-safety-image {
        height: 240px;

        min-height: 240px;
    }


    .mtro-rail-page-safety-content {
        padding: 23px 17px;
    }


    .mtro-rail-page-safety-list {
        grid-template-columns: 1fr;

        gap: 10px;
    }


    /* ADVANTAGES */

    .mtro-rail-page-advantages {
        padding: 23px 15px;
    }


    .mtro-rail-page-advantage-grid {
        grid-template-columns: 1fr;

        gap: 16px;
    }


    /* CTA */

    .mtro-rail-page-cta {
        flex-direction: column;

        align-items: flex-start;

        padding: 28px 20px;
    }


    .mtro-rail-page-cta h2 {
        font-size: 23px;
    }


    .mtro-rail-page-cta p {
        font-size: 9px;
    }


    .mtro-rail-page-cta-button {
        width: 100%;

        justify-content: center;
    }

}


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

@media (max-width: 480px) {

    .mtro-rail-page-container {
        width: calc(100% - 16px);
    }


    .mtro-rail-page-hero-content {
        padding: 30px 16px;
    }


    .mtro-rail-page-hero-title {
        font-size: 32px;
    }


    .mtro-rail-page-hero-subtitle {
        font-size: 14px;
    }


    .mtro-rail-page-hero-description {
        font-size: 10px;
    }


    .mtro-rail-page-hero-image {
        height: 220px;

        min-height: 220px;
    }


    .mtro-rail-page-hero-image img {
        min-height: 220px;
    }


    .mtro-rail-page-section-title {
        font-size: 18px;
    }


    .mtro-rail-page-overview-image,
    .mtro-rail-page-services-image,
    .mtro-rail-page-quality-image,
    .mtro-rail-page-safety-image {
        height: 210px;

        min-height: 210px;
    }


    .mtro-rail-page-specification-image {
        height: 210px;

        min-height: 210px;
    }


    .mtro-rail-page-table {
        min-width: 550px;
    }

}