/*
Theme Name: ST Builders
Theme URI: https://stbuilders.com.np/
Author: Mega Web Link
Author URI: https://megaweblink.com.np/
Description: A custom wordPress theme for a ST Builders website.
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: ST Builder
*/



/* CUSTOM CSS */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');


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


:root {
    /* colors  */
    --Primary-Color: #2164A6;
    --primary-dark: #195086;
    --white-ff: #FFFFFF;
    --White: #FCFCFC;
    --Gray-1: #363636;
    --Gray-2: #5D5D5D;
    --Gray-3: #D2D2D2;
    --Black: #000;
    --Black-1: #141414;
    --Black-1-light: #282828;
    --Black-3: #212121;
    --bg25: #252525;
    --bgE9: #E9EEF4;
    /* --bgE9: #eef1f2; */

    --manrope: "Manrope", sans-serif;
    --transtion: all .5s ease-in-out;
}

body {
    color: var(--text-dark2);
    font-family: var(--manrope);
    font-weight: 400;
    font-size: 1rem;
    background-color: var(--White);
}

/* Heading font sizes */
/* h1 current font-size: 1.7rem */
h1 {
    font-size: 1.7rem;
}

/* h2 current font-size: 1.6rem */
h2 {
    font-size: 1.6rem;
}

/* h3 current font-size: 1.5rem */
h3 {
    font-size: 1.5rem;
}

/* h4 current font-size: 1.4rem */
h4 {
    font-size: 1.4rem;
}

/* h5 current font-size: 1.3rem */
h5 {
    font-size: 1.3rem;
}



/* without scroll bar button  */
body.fancy-scrollbar::-webkit-scrollbar-track {
    background-color: var(--bgE9);
}

body.fancy-scrollbar::-webkit-scrollbar {
    width: 5px;
    background-color: var(--primary-dark);
}

body.fancy-scrollbar::-webkit-scrollbar-thumb {
    background: var(--Primary-Color);
}

/* without scroll bar button  */
/* Extend Bootstrap container width */
@media (min-width: 1600px) {
    .container {
        max-width: 1500px;
    }
}

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

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

img {
    width: 100%;
}

.p84 {
    padding: 84px 0;
}

.common_heading p {
    /* color: var(--Gray-2, #5D5D5D); */
    text-align: center;
    /* font-size: 14px; */
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--primary-dark);
    position: relative;
    width: max-content;
    margin: auto;
    margin-bottom: 10px;
    padding-bottom: 7px;
}

.common_heading p::before {
  display: none
}

/* .secont_common_heading h3 {
  position: relative;
  padding-bottom: 10px;
  display: inline-block;
} */
.common_heading p::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #1e5790, #5b8fc0, transparent);
  border-radius: 2px;
}
/* .common_heading p::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 50%;
    height: 2px;
    border-radius: 5px;
    background: var(--primary-dark);
    transform: translateX(-50%);
}

.common_heading p span.dot {
    position: absolute;
    bottom: -2px;
    display: block;
    flex-shrink: 0;
    left: 50%;
    width: 6px;
    height: 6px;
    background: var(--primary-dark);
    border-radius: 50%;
    transform: translateX(-50%);
    animation: dotMove 6s ease-in-out infinite;
}


@keyframes dotMove {
    0% {
        transform: translateX(-20px);
    }

    50% {
        transform: translateX(20px);
    }

    100% {
        transform: translateX(-20px);
    }
} */


.common_heading h3 {
    color: var(--Black);
    font-size: clamp(1.5rem, 3vw, 36px);
    font-weight: 700;
    text-align: center;
}

.secont_common_heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.secont_common_heading h3 {
	color: var(--primary-dark);
	font-weight: 600;
	font-size: 1.5rem;
/*     font-size: 26px;
    font-weight: 700;
    color: var(--Black-3); */
    margin: 0;
}


.secont_common_heading {
    position: relative;
}

.secont_common_heading h3::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -36px;
    width: 26px;
    height: 1.5px;
/* 	background-color: #000; */
    background-color: var(--primary-dark);
    transform: translateY(-50%);
}



.secont_common_heading p {
    max-width: 400px;
    color: var(--Gray-2, #5D5D5D);
    font-size: 16px;
    margin: 0;
    font-weight: 400;
}

.common_primary_btn {
    border-radius: 6px;
    background: var(--Primary-Color, #2164A6);
    padding: 0.625rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    color: var(--White);
    font-size: 14px;
    z-index: 1;
    position: relative;
    overflow: hidden;
    transition: var(--transtion);
	margin-bottom: 15px;
}

.common_primary_btn::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 0%;
    width: 100%;
    z-index: -1;
    transition: var(--transtion);
    background: var(--primary-dark);
    border-radius: 10px;
}

.common_primary_btn:hover::before {
    height: 100%;
}

.common_black_btn {
    font-size: 14px;
    color: var(--White, #FCFCFC);
    padding: 10px 24px;
    background: #034774;
    /* background: var(--Black-1); */
    border-radius: 6px;
    z-index: 1;
    transition: var(--transtion);
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    justify-content: center;
}

.common_black_btn::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 0%;
    width: 0%;
    z-index: -1;
    transition: var(--transtion);
    /* background: var(--Black-1-light); */
    background: var(--primary-dark);
    border-radius: 10px;
}

.common_black_btn::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    height: 0%;
    width: 0%;
    z-index: -1;
    transition: var(--transtion);
    /* background: var(--Black-1-light); */
    background: var(--primary-dark);
    border-radius: 10px;
}

.common_black_btn:hover::before,
.common_black_btn:hover::after {
    height: 100%;
    width: 100%;
}

/* **************** HEADER CSS STARTS ********************** */
@media (min-width: 992px) {
    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 0;
        padding-left: 0;
    }
}

header {
    position: absolute;
    top: 10px;
    width: 100%;
    left: 0;
    z-index: 499;
    transition: var(--transtion);
}



/* #main-header {
    transition: var(--transtion);
    background-color: transparent;
    backdrop-filter: blur(10px) saturate(100%);
    -webkit-backdrop-filter: blur(10px) saturate(100%);
}

#main-header.active .navbar {
    border-bottom: 0;
} */

/* deleted this  */
header nav>.container {
    transition: var(--transtion);
    background-color: #FFFFFF1A;
    backdrop-filter: blur(30px) saturate(100%);
    -webkit-backdrop-filter: blur(30px) saturate(100%);
    border-radius: 16px;
    padding: 10px 24px;
}

.custom-toggler {
    border: none;
    background: none;
    font-size: 32px;
    color: var(--white-ff);
    box-shadow: none;
}

.custom-toggler:focus {
    outline: none;
    box-shadow: none;
}

/* header.scrolled {
    background: rgba(97, 97, 97, 0.5) !important;
    transform: translateY(-20px);
    animation: slideDown 0.8s forwards;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(20px) saturate(100%);
    -webkit-backdrop-filter: blur(20px) saturate(100%);
} */
header.scrolled nav>.container {
    background: rgba(97, 97, 97, 0.5) !important;
    transform: translateY(-20px);
    animation: slideDown 0.8s forwards;
    /* box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); */
    backdrop-filter: blur(20px) saturate(100%);
    -webkit-backdrop-filter: blur(20px) saturate(100%);
}

header.scrolled .nav-link {
    color: var(--White);
}

header.scrolled .nav-link.active {
    color: var(--white-ff);
}

header.scrolled .navbar {
    border-bottom: 0;
}

/* Keyframes for slide-down effect */
@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }
}


.navbar {
    /* border-bottom: 1px solid #7F7F7F; */
    /* padding: 20px 0; */
    /* padding: 14px 0; */
    padding: 0;
}

.gap36 {
    gap: 36px;
}

.navbar-brand {
    display: block;
    width: 100px;
}

.navbar .nav-item .nav-link {
    font-size: 14px;
    font-weight: 400;
    color: var(--White);
    transition: var(--transtion);
}

.navbar .nav-item .nav-link.active {
    color: var(--white-ff);
}



header.scrolled .navbar .nav-item .nav-link:hover {
    color: var(--Black-1);
}

/* nav drop down  */
.custom-dropdown {
    position: relative;
}

/* Desktop hover */
@media (max-width: 992px) {

    /* Dropdown menu */
    .custom-dropdown-menu {
        opacity: 0;
        visibility: hidden;
        max-height: 0;
        overflow: hidden;
        transition: all 0.5s ease-in-out;
        border: none;
        width: max-content;
        border-radius: 8px;
        overflow: hidden;
        color: var(--white-ff);
        font-weight: 500;
        background-color: transparent;
    }

    .custom-dropdown .custom-dropdown-menu.show {
        opacity: 1;
        visibility: visible;
        max-height: 320px;
        overflow: visible;
    }

    .custom-dropdown .dropdown-icon.rotate {
        transform: rotate(180deg);
    }
}

@media (min-width: 992px) {
    .navbar .nav-item .nav-link:hover {
        font-weight: 500;
        /* color: var(--Primary-Color); */
        color: var(--Black-1);

    }

    .custom-dropdown-menu {
        opacity: 0;
        visibility: hidden;
        transform: translateY(15px);
        transition: all 0.5s ease-in-out;
        border: none;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
        border-radius: 8px;
        overflow: hidden;
        color: var(--Black);
        font-weight: 500;
        background-color: var(--white-ff);
        position: absolute;
        top: 24px;
        left: 0;
    }

    .custom-dropdown:hover .custom-dropdown-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(20px);
    }

    .custom-dropdown:hover .dropdown-icon {
        transform: rotate(180deg);
    }

    .navbar .nav-item .nav-link {
        padding: 10px 0;
    }

    .custom-dropdown-menu .dropdown-item:hover {
        background-color: var(--bgE9);
    }
}

/* Dropdown items */
.custom-dropdown-menu .dropdown-item {
    padding: 10px 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
}


/* Icon animation */
.dropdown-icon {
    transition: all 0.5s ease-in-out;
}

/* **************** HEADER CSS ENDS ********************** */

/* +++++++++++++++ HOME HERO SECTION STARTS FORM HERE +++++++++++ */
.home_hero_section {
    /* height: 900px;  */
    height: 100vh;
    position: relative;
    overflow: hidden;
}

.home_hero_section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.3);
    height: 100%;
    width: 100%;
}

.home_hero_section .home_gif iframe.bg-video {
    position: absolute;
    top: 50%;
    left: 50%;

    width: 100vw;
    height: 56.25vw;
    /* 16:9 */

    min-width: 177.78vh;
    min-height: 100vh;

    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: -1;
}

.home_hero_content {
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
    /* width: 100%; */
    text-align: center;
}

.home_hero_content .content {
    max-width: 800px;
    width: 100%;
}

.home_hero_content .content a {
    width: max-content;
    margin-top: 80px;
    font-size: 14px;
    font-weight: 400;
}

.home_hero_content .content h3 {
    font-size: clamp(28px, 5vw, 52px);
    color: var(--White, #FCFCFC);
    font-weight: 800;
    margin-bottom: 24px;
}

.home_hero_content .content p {
    /* max-width: 750px; */
    width: 100%;
    /* color: var(--Gray-3, #D2D2D2); */
    color: var(--White, #FCFCFC);
    font-size: 16px;
    font-weight: 400;
}

/* +++++++++++++++ HOME HERO SECTION STARTS  ENDS+++++++++++ */

/* home about us section css  */
.home_about_us {
    background: #e9eef4;
    /* background: var(--Black-1, #141414); */
    /* background-color: var(--bgE9); */
}

.home_about_us .left_slider {
    height: 40rem;
    overflow: hidden;
    border-radius: 16px;
}

.home_about_us .left_slider img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.mySwiperHomeAbout .swiper-button-next::after,
.mySwiperHomeAbout .swiper-button-prev::after {
    display: none;
}

.mySwiperHomeAbout .swiper-button-next,
.mySwiperHomeAbout .swiper-button-prev {
    display: flex;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0.625rem;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    flex-shrink: 0;
    border-radius: 0.375rem;
    /* background: var(--White, #FCFCFC); */
}

.mySwiperHomeAbout .swiper-button-next:hover,
.mySwiperHomeAbout .swiper-button-prev:hover {
    background: #eaeaea;
}

/* Default bullets */
.mySwiperHomeAbout .swiper-pagination-bullet {
    background-color: var(--Gray-2);
}

/* Active bullet */
.mySwiperHomeAbout .swiper-pagination-bullet-active {
    background-color: var(--White);
}

.home_about_right .home_about_description p {
/*     color: var(--Gray-3, #D2D2D2); */
	color: #034774;
    font-size: 1rem;
}


.about_left_div {
    height: 100%;
    position: relative;
}

.about_left_div .exp_tag {

    padding: clamp(32px, 4vw, 44px) clamp(32px, 5vw, 64px);
    position: absolute;
    left: 24px;
    bottom: 24px;
    display: flex;
    flex-direction: column;
    text-align: center;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    color: var(--white-ff);
}

.about_left_div .exp_tag h4 {
    font-size: 64px;
    font-weight: 800;
    margin: 0;
}

.about_left_div .exp_tag h5 {
    font-size: 24px;
    font-weight: 600;
    margin: 0;
}

.about_left_div img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* keeps image proportional */
    display: block;
}

.home_about_right h6 {
    font-size: 1.3rem;
    /* color: var(--Gray-2, #5D5D5D); */
    color: #034774;
    /* color: var(--Primary-Color); */
}

.home_about_right h3 {
    font-size: clamp(1.8rem, 3vw, 2.625rem);
	color: #034774;
/*     color: var(--White, #FCFCFC); */
    margin-bottom: 1.5rem;
    font-weight: 700;
}

.home_about_right a {
    display: flex;
    border-radius: 0.375rem;
    border: 1px solid #034774;
    height: 2.75rem;
    padding: 0.625rem 1.5rem;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    flex-shrink: 0;
	color: #034774;
/*     color: var(--White); */
    width: max-content;
    position: relative;
    background-color: transparent;
    /* background-color: var(--Primary-Color); */
    transition: var(--transtion);
    z-index: 1;
    font-size: 14px;
    /* margin-top: 20px; */
}

.home_about_right a::before {
/*     background: var(--White); */
    background-color: var(--primary-dark);
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    border-radius: 0.375rem;
    z-index: -1;
    transition: var(--transtion);
}

.home_about_right a:hover::before {
    width: 100%;
}


.home_about_right a:hover {
   color: var(--White);
}



.home_why_Choose .left_text {
    color: var(--Gray-1, #363636);
}

.home_why_Choose .left_text ul {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 44px;
    margin-top: 32px;
}

.home_why_Choose .left_text ul li,
.whatwedo_content ul li {
    position: relative;
    padding-left: 32px;
}

.home_why_Choose .left_text ul li::before,
.whatwedo_content ul li::before {
    content: "\eb7b";
    font-family: 'remixicon';
    position: absolute;
    display: flex;
    width: 20px;
    height: 20px;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: var(--Primary-Color, #2164A6);
    color: var(--White);
    font-size: 14px;
    left: 0;
    top: 3px;
}

.home_why_Choose .counter_animation_container .counter_aimation_content {
    border-bottom: 1px solid var(--Primary-Color, #2164A6);
    padding-bottom: 32px;
    margin-bottom: 32px;
}

.home_why_Choose .counter_animation_container .counter_aimation_content p,
.home_about_center_container .customer_Tag .inner_border p {
    font-size: 14px;
    color: var(--Gray-2, #5D5D5D);
    margin: 0;
}

.home_why_Choose .counter_animation_container .counter_aimation_content h3,
.home_about_center_container .customer_Tag .inner_border h3 {
    color: var(--Primary-Color, #2164A6);
    font-size: 36px;
    font-weight: 700;
}

.home_about_center_container .left_imag {
    height: 480px;
    overflow: hidden;
    clip-path: polygon(14% 0, 89% 0, 75% 100%, 0% 100%);
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.25));
    margin-left: -20px;
    transform: translateY(-50px);
}

.home_about_center_container .righ_img {
    height: 480px;
    overflow: hidden;
    clip-path: polygon(14% 0, 89% 0, 75% 100%, 0% 100%);
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.25));
    transform: translateY(50px);
    margin-left: -44px;
}

.home_about_center_container .left_imag img,
.home_about_center_container .righ_img img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.home_about_center_container {
    position: relative;
}

.home_about_center_container .customer_Tag {
    position: absolute;
    top: 50%;
    z-index: 2;
    left: 45%;
    transform: translate(-50%, -50%);
    background-color: var(--White);
    height: 160px;
    width: 160px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.home_about_center_container .customer_Tag .inner_border {
    height: 140px;
    width: 140px;
    border-radius: 50%;
    background-color: transparent;
    border: 1px solid var(--Primary-Color, #2164A6);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

/* home about us section css ends */


/* home what we do section css starts  */
.what_we_do_Section {
    background: var(--bgE9);
}

.whatwedo_content h6 {
    font-size: 14px;
    margin-bottom: 12px;
    font-weight: 400;
    color: var(--Gray-2, #5D5D5D);
    text-transform: uppercase;
    font-weight: 600;
    color: var(--primary-dark);
    position: relative;
    width: max-content;
    padding-left: 28px;
}

.whatwedo_content h6::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0px;
    width: 20px;
    height: 1px;
    transform: translateY(-50%);
    background-color: var(--primary-dark);
}

.whatwedo_content h3 {
    font-size: clamp(1.5rem, 3vw, 36px);
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--Black);
}

.whatwedo_content p {
    font-size: 16px;
    font-weight: 400;
    color: var(--Gray-1, #363636);
    margin: 0;
    max-width: 380px;
    width: 100%;
}

.whatwedo_content ul {
    margin: 32px 0;
    font-size: 16px;
    font-weight: 400;
    color: var(--Gray-1, #363636);
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.what_we_do_gif {
    height: 480px;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 5px 2px 15px 0px rgba(0, 0, 0, 0.2);
    position: relative;
}

.what_we_do_gif img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.what_we_do_gif iframe {
    position: absolute;
    top: 50%;
    left: 50%;

    width: 100%;
    height: 56.25vw;
    /* 16:9 */

    min-width: 177.78vh;
    min-height: 100%;

    transform: translate(-50%, -50%);
    pointer-events: none;
}

.what_we_do_filter_btns {
    margin-top: clamp(44px, 6vw, 84px);
}

/* home what we do section css ends */


/* home building image section css  */
.building .building_heading h3 {
    font-size: clamp(1.5rem, 3vw, 36px);
    margin-bottom: 1.5rem;
    font-weight: 700;
}


.building .building_heading p {
    color: var(--Gray-2, #5D5D5D);
    font-size: 16px;
    font-weight: 400;
}

.building .building_heading a {
    /* margin-top: 124px; */
    margin-top: 32px;
}

/* home building image section ends */



/* ====== HOME CLIENT SUCCESS STORIES SECTION CSS STARTS ==== */
.home_client_succestoreis_bg {
    background: url('assets/images/home/homeclient_bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    overflow: hidden;
    position: relative;
}

.success_heading {
    max-width: 400px;
    width: 100%;
    position: relative;
}

.arrow_img_success {
    position: absolute;
    bottom: -120px;
    left: 130px;
    width: 70%;
}

.home_client_succestoreis_bg>.container {
    padding: 115px 0;
}

.success_heading p {
    color: var(--Gray-3, #D2D2D2);
    font-size: 16px;
    font-weight: 400;
}

.success_heading h3 {
    font-size: clamp(1.5rem, 4vw, 36px);
    color: var(--white-ff);
    font-weight: 700;
    margin-bottom: 24px;
}

.success_bg_two {
    background-color: var(--bg25);
    padding: 94px 0;
    border-radius: 24px 0 0 24px;
    position: relative;
    height: 100%;
}

.scuccess_slider_wrapper {
    position: absolute;
    top: 50%;
    left: -44px;
    transform: translateY(-50%);
}

.suucess_bg_two_wrapper {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    width: 50%;
    height: 85%;

}

.success_storey_content_bg {
    background-color: var(--White);
    border-radius: 16px;
    padding: clamp(16px, 3vw, 32px);
    max-width: 520px;
    width: 100%;
}

.success_storey_content_bg .profile {
    height: 80px;
    width: 80px;
    overflow: hidden;
    border-radius: 50%;
    flex-shrink: 0;
}

.success_storey_content_bg .profile img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.success_storey_content_bg p {
    color: var(--Gray-2);
    font-size: 14px;
    margin: 0;
}

.success_storey_content_bg>p {
    font-size: 16px;
    font-weight: 400;
    color: var(--Gray-1);
}

.success_storey_content_bg h4 {
    font-size: 18px;
    font-weight: 700;
    color: var(--Gray-1);
}

.mySwiperHomesuccess {
    width: 100% !important;
}

.mySwiperHomesuccess .swiper-wrapper {
    width: auto !important;
}

.mySwiperHomesuccess .swiper-slide {
    width: auto !important;
}

.success_slider_btns .swiper-button-next::after,
.success_slider_btns .swiper-button-prev::after {
    display: none;
}

.success_slider_btns .swiper-button-next,
.success_slider_btns .swiper-button-prev {
    position: static;
    display: flex;
    width: 36px;
    height: 36px;
    padding: 10px;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
    border: 1px solid var(--White, #FCFCFC);
}

.success_slider_btns {
    margin-top: 214px;
}

/* ====== HOME CLIENT SUCCESS STORIES SECTION CSS ENDS ==== */
.logo_card {
    transition: all 0.3s ease;
}

.logo_card {
    transition: all 0.3s ease;
}

/* Blur all cards except the hovered one */
.client_logo_card_container .row:has(.logo_card:hover) .logo_card:not(:hover) {
    filter: blur(4px);
    opacity: 0.6;
    transition: var(--transtion);
}

/* Hovered card stays normal */
.logo_card:hover {
    filter: none;
    opacity: 1;
    transform: scale(1.05);
    z-index: 2;
    transition: var(--transtion);
}


/* ++++++ home client review section css starts ++++++ */
.home_client_review_section {
    background: var(--bgE9);
	padding: 65px;
}

.home_client_review_wrapper {
    margin-top: 32px;
}

.client_detail_wrapper {
    height: 400px;
    overflow: hidden;
    border-radius: 16px;
    position: relative;

}

.client_detail_wrapper img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.youtube-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.youtube-icon img {
    animation: float 5s ease-in-out infinite;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

.home_client_review_wrapper .swiper-button-next::after,
.home_client_review_wrapper .swiper-button-prev::after {
    display: none;
}

.home_client_review_wrapper .swiper-button-next,
.home_client_review_wrapper .swiper-button-prev {
    display: flex;
    width: 36px;
    height: 36px;
    padding: 10px;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--Primary-Color);
    border-radius: 6px;
}

.home_client_review_wrapper .swiper-button-next {
    right: -50px;
}

.home_client_review_wrapper .swiper-button-prev {
    left: -50px;
}

/* ++++++ home client review section css ends ++++++ */


/* home services section css starts  */
.service_show_Case_wrapper {
    margin-top: 32px;
}

.our_services_section_container {
    padding-top: 84px;
}

@media (min-width: 1300px) {
    .service_show_Case_wrapper {
        height: 720px;
        display: flex;
        overflow: hidden;
    }

    .client_review_card {
        min-height: 300px;
    }
}

@media (min-width: 992px) {
    .service_show_Case_wrapper {
        display: flex;
        height: 600px;
        overflow: hidden;
    }


    .service_show_Case_wrapper .service_one {
        width: 50%;
        position: relative;
    }

    .service_show_Case_wrapper .service_second,
    .service_show_Case_wrapper .service_third {
        width: 25%;
        position: relative;
    }

    .service_show_Case_wrapper .service_one .content p,
    .service_show_Case_wrapper .service_one .content a {
        opacity: 1;
        transform: translateY(0);
        transition: all 0.5s ease;
    }

    .service_show_Case_wrapper .service_second .content p,
    .service_show_Case_wrapper .service_second .content a,
    .service_show_Case_wrapper .service_third .content p,
    .service_show_Case_wrapper .service_third .content a {
        opacity: 0;
        transform: translateY(20px);
        transition: all 0.5s ease;
    }

    .service_show_Case_wrapper .service_one,
    .service_show_Case_wrapper .service_second,
    .service_show_Case_wrapper .service_third {
        transition: width 0.5s ease;
    }

    .service_show_Case_wrapper>div:hover {
        width: 50%;
    }

    .service_show_Case_wrapper:hover>div:not(:hover) {
        width: 25%;
    }

    .service_show_Case_wrapper>div:hover .content p,
    .service_show_Case_wrapper>div:hover .content a {
        opacity: 1;
        transform: translateY(0);
    }

    .service_show_Case_wrapper:hover>div:not(:hover) .content p,
    .service_show_Case_wrapper:hover>div:not(:hover) .content a {
        opacity: 0;
        transform: translateY(20px);
    }
}

.service_show_Case_wrapper .service_one>img,
.service_show_Case_wrapper .service_second>img,
.service_show_Case_wrapper .service_third>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.service_show_Case_wrapper .service_content {
    background: linear-gradient(270deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.50) 75%);
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}


.service_show_Case_wrapper .service_content .content {
    max-width: 400px;
    position: absolute;
    top: 84px;
    left: 64px;
    display: flex;
    flex-direction: column;
}

.service_show_Case_wrapper .service_content .content a {
    margin-top: 220px;
    width: max-content;
}

.service_show_Case_wrapper .service_content .content h3 {
    font-size: 26px;
    font-weight: 700;
    color: var(--white-ff);
    margin-bottom: 24px;
}

.service_show_Case_wrapper .service_content .content p {
    color: var(--White);
    font-size: 18px;
    font-weight: 400;
}


/* home services section css ends */


/* company project showcase section starts  */
.company_project_img {
    height: 440px;
    overflow: hidden;
    /* border-radius: 12px; */
    position: relative;
}

.company_project_img::before {
    background-color: rgba(0, 0, 0, 0.3);
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}
.company_project_img.gallery_box::before{
    display: none;
}
.company_project_img .c_p_details_wrapper {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 24px;
    color: var(--White);
    background-color: rgba(0, 0, 0, 0.7);
    /* backdrop-filter: blur(20px); */
    z-index: 1;
}

.company_project_img .c_p_details_wrapper h4 {
    position: relative;
    /* padding-bottom: 5px; */
    margin-bottom: 10px;
    font-size: 20px;
    font-weight: 700;
}

/* .company_project_img .c_p_details_wrapper h4::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50%;
    height: 1px;
    border-radius: 20px;
    background-color: var(--white-ff);
} */

.company_project_img .c_p_details_wrapper p {
    color: var(--Gray-3);
    font-size: 0.95rem;
    margin: 0;
}

@media (min-width: 1300px) {
    .company_project_img {
        height: 540px;
    }
}

.overlay_project_show {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 0%;
    width: 100%;
    visibility: hidden;
    opacity: 0;
    background: linear-gradient(to top,
            rgba(0, 0, 0, 1),
            rgba(0, 0, 0, 0.2),
            rgba(0, 0, 0, 0));
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transtion);
}

.overlay_project_show h3 {
    position: absolute;
    bottom: 10px;
    color: var(--White);
    left: 20px;
    width: 95%;
    font-size: 18px;
    font-weight: 700;
}

.company_project_img:hover .overlay_project_show {
    height: 100%;
    visibility: visible;
    opacity: 1;
}

.company_project_img>img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.company_project_show_container {
    margin-top: 32px;
}

.company_project_show_container .swiper-button-next {
    display: flex;
    width: 36px;
    height: 36px;
    padding: 10px;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--primary-dark);
    border-radius: 5px;
}

.what_we_do_Section .swiper-button-next {
    display: flex;
    width: 36px;
    height: 36px;
    padding: 10px;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--primary-dark);
    background-color: var(--primary-dark);
    border-radius: 5px;
}

.what_we_do_Section .swiper-button-next {
    top: 50%;
    transform: translateY(-50%);
    right: -50px;
}

.company_project_show_container .swiper-button-next::after,
.what_we_do_Section .swiper-button-next::after {
    display: none;
}

.company_project_show_container .swiper-button-next {
    top: 50%;
    right: -50px;
}



.company_project_show_container .swiper-button-next:hover,
.what_we_do_Section .swiper-button-next:hover {
    background: var(--Primary-Color);
}

.company_project_show_container .swiper-button-next:hover svg path,
.what_we_do_Section .swiper-button-next:hover svg path {
    stroke: var(--White);
}

.company_project_filter_btns {
    margin-top: 64px;
}

.company_project_filter_btns button,
.what_we_do_filter_btns button {
    background-color: rgba(0, 0, 0, 0.05);
    border: none;
    font-size: 16px;
    color: var(--Gray-2, #5D5D5D);
    position: relative;
}




/* .company_project_filter_btns button.active,
.what_we_do_filter_btns button.active {
    color: var(--Primary-Color);
}

.company_project_filter_btns button::before,
.what_we_do_filter_btns button::before {
    width: 0%;
    position: absolute;
    content: '';
    bottom: -5px;
    background-color: var(--Primary-Color);
    height: 1px;
}

.company_project_filter_btns button.active::before,
.what_we_do_filter_btns button.active::before {
    width: 100%;
} */


.mySwiperCompanyProject .swiper-slide {
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

.mySwiperCompanyProject .swiper-slide.fade-out {
    opacity: 0;
    transform: scale(0.95);
}

.mySwiperCompanyProject .swiper-slide.fade-in {
    opacity: 0;
    transform: scale(0.95);
}

.mySwiperCompanyProject .swiper-slide.fade-in.show {
    opacity: 1;
    transform: scale(1);
}

/* company button  */
.company_project_filter_btns button,
.what_we_do_filter_btns button {
    padding: 5px 16px;
    border: 1px solid var(--bgE9);
    border-radius: 2px;
    transition: all .5s ease-in-out;
}

.what_we_do_filter_btns button {
    border: 1px solid var(--white-ff);
    box-shadow: 0px 0px 20px 0px rgba(255, 255, 255, 0.5);
}

.company_project_filter_btns button:hover,
.what_we_do_filter_btns button:hover,
.company_project_filter_btns button.active,
.what_we_do_filter_btns button.active {
    background-color: var(--Primary-Color);
    color: var(--White);
}
.what_we_do_filter_btns button:hover,
.what_we_do_filter_btns button.active {
    /* background-color: var(--Black-1); */
    background-color: var(--white-ff);
    color: var(--primary-dark);
}

/* company project showcase section ends */

/* client logos section css starts  */
.client_logo_container {
/*     background-color: var(--bgE9); */
	background-color: #f2f7ff;
}

.client_logo_card_container .logo_card {
    /* width: 280px; */
    height: 240px;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
}

.client_logo_card_container .logo_card .card_company_logo {
    background-color: var(--White);
    height: 100%;
    width: 100%;
    position: absolute;
    bottom: -100%;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transtion);
}

.client_logo_card_container .logo_card:hover .card_company_logo {
    bottom: 0;
}

.client_logo_card_container .logo_card>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.client_logo_card_container {
    margin-top: 32px;
}

.client_logo_card_container .logo_card .card_company_logo img {
    aspect-ratio: 3;
    object-fit: contain;
}

/* client logos section css ends  */



/* hoem insight css starts  */
.blog_card_wrapper .blog_img {
    height: 280px;
    border-radius: 12px;
    overflow: hidden;
}

@media (min-width: 1300px) {
    .blog_card_wrapper .blog_img {
        height: 360px;
    }
}


.blog_card_wrapper .blog_img img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    transition: transform 0.6s ease-in-out, filter 0.6s ease-in-out;
}

.blog_card_wrapper {
    transition: var(--transtion);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.blog_card_wrapper:hover {
    transform: translateY(-6px);
}

.blog_card_wrapper:hover .blog_img img {
    transform: scale(1.08);
    filter: brightness(1.05) contrast(1.05);
}

.blog_card_wrapper p {
    color: var(--Gray-2, #5D5D5D);
    font-size: 16px;
    font-weight: 400;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.blog_card_wrapper h4 {
    font-size: 18px;
    color: var(--Gray-1, #363636);
    font-weight: 700;
    margin-top: 24px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 12px;
}

.blog_card_wrapper a {
    font-size: 16px;
    display: flex;
    align-items: center;
    width: max-content;
    gap: 10px;
    transition: var(--transtion);
    color: var(--Primary-Color, #2164A6);
    margin-top: auto;
    font-weight: 500;
}

.blog_card_wrapper:hover a {
    transform: translateX(16px);
}

.blog_card_wrapper a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -4px;
    width: 0;
    height: 1px;
    background-color: currentColor;
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.blog_card_wrapper a:hover::after {
    width: 100%;
}


/* hoem insight css ends */

/* last banner css stars  */
.last_banner_bg {
    background: var(--bgE9);
    margin-bottom: 84px;
    /* height: 420px; */
    padding: 44px 0;
    border-radius: 24px;
    position: relative;
    margin-top: 160px;
}

.lbanner_image {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 45%;
}

.l_banner_content {
    margin-left: auto;
    width: 50%;
    padding-right: clamp(24px, 6vw, 94px);


}

.l_banner_content p {
    color: var(--Gray-1, #363636);
    font-size: 16px;
    font-weight: 400;
}

.l_banner_content h3 {
    font-size: clamp(24px, 3vw, 36px);
    margin-bottom: 12px;
    font-weight: 700;
}

.l_banner_content h3 span {
    color: var(--primary-dark);
}

.l_banner_content a {
    margin-top: 24px;
}

.c_input input {
    height: 40px;
    width: 100%;
    background-color: transparent;
    color: var(--Black-1);
    font-size: 1rem;
    padding: 10px 16px;
    border: 1px solid var(--Gray-3);
    border-radius: 5px;
    outline: none;
    border: 1px solid #CBD5E1;
    font-size: 0.9rem;
}

.c_input textarea {
    color: var(--Black-1);
    background-color: transparent;
    padding: 10px 16px;
    border: 1px solid var(--Gray-3);
    min-height: 120px;
    max-height: 200px;
    border-radius: 5px;
    outline: none;
    width: 100%;
    border: 1px solid #CBD5E1;
    font-size: 0.9rem;
}

.c_input label {
    font-size: 0.8rem;
    font-weight: 500;
    margin-bottom: 5px;
    color: var(--primary-dark);
}
.c_input label span{
    color: red;
}
.l_banner_form {
    background-color: var(--white-ff);
    padding: clamp(16px, 3vw, 24px);

    border: 1px solid #CBD5E1;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.l_banner_form .submit {
    border: 1px solid var(--Primary-Color);
    font-size: 1rem;
    padding: 6px 24px;
    border-radius: 5px;
    background-color: var(--Primary-Color);
    color: var(--white-ff);
    transition: all .5s ease-in-out;
    margin-top: 12px;
}

.l_banner_form .submit:hover {
    color: var(--primary-dark);
    background-color: transparent;
}
/* Error and success states */
.c_input input.error,
.c_input textarea.error,
.c_input_f input.error,
.c_input_f textarea.error {
    border-color: #dc3545;
    background-color: #fff5f5;
}

.c_input input.valid,
.c_input textarea.valid,
.c_input_f input.valid,
.c_input_f textarea.valid {
    border-color: #28a745;
    background: #f0fff4;
}

.error-message {
    display: none;
    /* Hidden by default */
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

/* Show error message only when it has content */
.error-message:not(:empty) {
    display: block;
}

/* Disable button when submitting */
button[type="submit"]:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
#contactForm .error-message{
    padding-left: 24px;
}
/* last banner css ends */

/* footer css starts  */
footer {
    /* background: var(--Black-1, #141414); */
    background: #134261;
    padding: 50px 0 32px 0;
    color: var(--White, #FCFCFC);
    overflow: hidden;
}

.links_heading_wrapper h3,
.footer_contact h3 {
    color: var(--White, #FCFCFC);
    font-size: 18px;
    margin-bottom: 32px;
    font-weight: 700;
}

.links_heading_wrapper ul,
.footer_contact ul {
    display: flex;
    flex-direction: column;
    gap: 16px;
    font-size: 16px;
    font-weight: 400;
    color: var(--Gray-3, #D2D2D2);
}

.links_heading_wrapper ul li a:hover {
    color: #fff;
}

.footer_contact ul a {
    display: flex;
    gap: 10px;
    align-items: center;
}

.footer_contact ul a:hover {
    color: #fff;
}

.footer_map_link iframe {
    width: 100%;
    height: 220px;
    border-radius: 12px;
}

.copy_right {
    color: var(--White);
    font-size: 14px;
    text-align: center;
    padding: 20px 0;
    background-color: #0d354f;
	margin-bottom: -30px;
	margin-top: 20px;
}

.footer_social_links ul li a {
    display: flex;
    width: 32px;
    height: 32px;
    /* color: var(--Black-1, #141414); */
    color: #134261;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
    background: var(--Gray-3, #D2D2D2);
    flex-shrink: 0;
    font-size: 16px;
}

.footer_social_links ul li a:hover {
    background: var(--White);
}

.footer_social_links ul {
    display: flex;
    align-items: center;
    gap: 10px;

}

.footer_logo {
    width: 167px;
}

.footer_logo img {
    width: 100%;
    object-fit: contain;
}

.footer_Second_row {
    margin-top: 65px;
}

.footer_news_subscribe h5 {
    font-size: 16px;
    font-weight: 400;
    color: var(--white-ff);
    margin-bottom: 8px;
}

.footer_news_subscribe p {
    color: var(--Gray-3, #D2D2D2);
    font-size: 14px;
    margin-bottom: 8px;
}

.footer_news_subscribe .sub_input input {
    width: 100%;
    padding: 18px;
    border-radius: 8px;
    /* background: var(--Gray-1, #363636); */
    background: #034774;
    border: none;
    outline: none;
    color: var(--white-ff);
}

.footer_news_subscribe .sub_input input::placeholder {
    color: var(--Gray-3, #D2D2D2);
    font-size: 14px;
    font-weight: 400;
}

.footer_news_subscribe .sub_input button {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    border-radius: 6px;
    background: var(--White, #FCFCFC);
    display: flex;
    padding: 10px 16px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    border: none;
    font-size: 14px;
    color: var(--Gray-2, #5d5d5d);
}

.footer_news_subscribe .sub_input button:hover {
    background-color: var(--Gray-3);
    color: var(--white-ff);
}

/* footer css ends */




/* ==================== ABOUT PAGE CSS ======================== */
.common_hero_banner_img {
    min-height: 320px;
    height: 40vh;
    max-height: 700px;
    padding-top: 80px;
    background: url('assets/images/bgs/bannberbg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--white-ff, #fff);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.common_hero_banner_img .common_hero_banner_overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.4);
}

.breadcrumb {
    display: flex;
    align-items: center;
    justify-content: center;
    /* width: max-content; */
    text-align: center;
    /* margin-top: 16px; */
    gap: clamp(5px, 1vw, 10px);
}

.common_hero_banner_img .c_hero_title h1 {
    font-size: clamp(1.7rem, 5vw, 45px);
    text-align: center;
/*     font-weight: 650; */
	font-size: 1.7rem;
	    font-weight: 450;
    font-family: "Playfair Display", serif;
    font-style: italic;
}

.breadcrumb span {
    font-size: 18px;
    margin-top: 2px;
}

.breadcrumb p {
    margin: 0;
    padding: 0;
    /* color: var(--Gray-3); */
}

.breadcrumb a {
    transition: all .5s ease-in-out;
}

.breadcrumb a:hover {
    color: var(--Primary-Color);
}

.about_page_about_section {
    background-color: transparent;
    padding: clamp(44px, 6vw, 104px) 0;
}

.about_page_about_section .home_about_right h6 {
    color: var(--primary-dark);
}

.about_page_about_section .home_about_right h3 {
    color: var(--Black-1-light);
    /* margin-top: 26px; */
    margin-bottom: 10px;
}

.about_page_about_section .home_about_right h3 span {
    padding: 0px 24px;
    background-color: var(--Primary-Color);
    color: var(--white-ff);
    width: max-content;
    clip-path: polygon(20% 0, 100% 0%, 80% 100%, 0% 100%);
    font-weight: 700;
    display: inline-block;
}

.about_page_about_section .home_about_right .home_about_description p {
    color: var(--Gray-2);
}


.about_service_tabs button {
    padding: 5px 16px;
    border: 1px solid var(--Primary-Color);
    background: transparent;
    font-weight: 600;
    border-radius: 30px;
    cursor: pointer;
    transition: all .5s ease-in-out;
    font-size: 14px;
}

.about_service_tabs button:hover,
.about_service_tabs button.active {
    background: var(--Primary-Color);
    color: var(--white-ff);
}

.service_item {
    display: none;
}

.service_item.active {
    display: block;
}

.about_service_content .service_item img {
    height: 270px;
    object-fit: cover;
    border-radius: 10px;
}

.about_service_content .service_item ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: var(--Black);
}

.about_service_content .service_item p {
    color: var(--Gray-2);
}

.about_service_content .service_item ul li {
    position: relative;
    padding-left: 28px;
    font-size: 15px;
    font-weight: 500;
}

.about_service_content .service_item ul li::before {
    content: "\eb7b";
    font-family: 'remixicon';
    position: absolute;
    display: flex;
    width: 18px;
    height: 18px;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: var(--Primary-Color, #2164A6);
    color: var(--White);
    font-size: 14px;
    left: 0;
    top: 5px;
}

.about_page_about_section {
    position: relative;
    overflow: hidden;
}

/* .about_page_about_section::before {
    background: url('assets/images/bgs/buildingbg.png');
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    height: 100%;
    width: 80%;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.05;
    z-index: 0;
} */

.about_vision_section {
    position: relative;
    padding: clamp(44px, 6vw, 104px) 0;
    overflow: hidden;
}

.about_vision_section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url('assets/images/bgs/patternbg.webp') center / cover no-repeat;
    opacity: 0.15;
    z-index: 0;
}

.about_vision_section>* {
    position: relative;
    z-index: 1;
}

.about_vison_bx_wrapper {
    /* background-color: var(--White); */
    padding: clamp(32px, 5vw, 64px) clamp(24px, 3vw, 32px);
    border-radius: 16px;
    position: relative;
    overflow: hidden;
}

/* 
.about_vison_bx_wrapper::before {
    height: 40%;
    width: 100%;
    background: url('assets/images/bgs/buildingbg.png');
    content: '';
    position: absolute;
    bottom: 0;
    right: -20%;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.1;
} */

.about_vison_bx_wrapper .about_points {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.about_vison_bx_wrapper .about_points ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.about_vison_bx_wrapper .about_points ul li {
    position: relative;
    padding-left: 28px;
    font-weight: 500;
}

.about_vison_bx_wrapper .about_points ul li::before {
    content: "\eb7b";
    font-family: 'remixicon';
    position: absolute;
    display: flex;
    width: 18px;
    height: 18px;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: var(--Primary-Color, #2164A6);
    color: var(--White);
    font-size: 14px;
    left: 0;
    top: 4px;
}

.about_vision_section .d-img {
    position: absolute;
    left: 0;
    transform: translateY(-50%);
    top: 50%;
    /* height: 80%; */
    width: 50%;
    aspect-ratio: 3/2;
}

.about_vison_bx_wrapper .tag {
    font-size: clamp(18px, 2vw, 20px);
    font-weight: 600;
    color: var(--primary-dark);
    margin-bottom: 5px;
    text-transform: uppercase;
}

.about_vison_bx_wrapper h3 {
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--Black-1-light);
}

.about_vison_bx_wrapper p {
    color: var(--Gray-2);
}

/* company status  */
.company_stats {
    background: var(--White);
    position: relative;
    overflow: hidden;
}

.company_stats::before {
    height: 100%;
    width: 100%;
    background: url('assets/images/bgs/buildingbg.png');
    content: '';
    position: absolute;
    bottom: 0;
    right: 0%;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0.1;
}

.stat_card {
    background: var(--white-ff);
    padding: 40px 20px;
    border-radius: 12px;
    border-bottom: 4px solid var(--Primary-Color);
    transition: all 0.3s ease;
    height: 100%;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.stat_card h2 {
	font-size: 1.6rem;
/*     font-size: 46px; */
    font-weight: 800;
    color: var(--Primary-Color);
    margin-bottom: 10px;
	font-size: 1.6rem;
}

/* .stat_card h2 span {
    font-size: 24px;
    font-weight: 700;
} */

.stat_card p {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--Gray-2);
}

.stat_card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

.stat_card.highlight h2,
.stat_card.highlight p {
    color: var(--white-ff);
	font-size: 1.6rem;
}




/* company status  */
/* ==================== ABOUT PAGE CSS ======================== */



/* *************************
SERVICE PAGE CSS 
************************* */
/* .service_card_section {
    margin-bottom: 240px;
} */

.service_card {
    background: #eee;
    padding: clamp(24px, 3vw, 32px);
    border: 1px solid #e7e7e7;
    border-radius: 10px;
    transition: all .5s ease-in-out;
    height: 100%;
}

.service_card:hover {
    /* border: 1px solid var(--Primary-Color); */
    transform: translateY(-6px);
}

.service_card .service_header {
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: space-between;
}

.service_card .service_no {
    font-size: 44px;
    font-weight: 700;
    /* color: #ccc; */
    color: var(--primary-dark);
}

.service_card .service_title {
    font-size: 24px;
    transition: all .5s ease-in-out;
    font-weight: 600;
}

.service_card:hover .service_title {
    transform: translateX(6px);
    color: var(--Primary-Color);
}

.service_card .service_desc {
    /* margin: 15px 0 20px; */
    color: #555;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.service_card .service_desc p{
    margin: 0;
}
/* IMAGE AREA */
.service_card .service_img {
    position: relative;
    overflow: hidden;
    height: 220px;
    border-radius: 10px;
    margin-top: 10px;
    margin-bottom: 20px;
}

.service_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.service_card .service_img .icon {
    position: absolute;
    height: 0px;
    width: 0px;
    opacity: 0;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--primary-dark);
    color: var(--white-ff);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    transition: all .5s ease-in-out;
}

.service_card .service_img .icon:hover {
    background-color: var(--Primary-Color);
    color: var(--White);
    transform: translate(-50%, -50%) rotate(45deg);
    transform-origin: center;
}

.service_card:hover .service_img .icon {
    height: 50px;
    width: 50px;
    opacity: 1;
}

/* Shiny overlay */
.service_card .service_img::after {
    content: "";
    position: absolute;
    width: 200%;
    height: 0%;
    left: -100%;
    top: 0%;
    background: rgba(255, 255, 255, 0.35);
    transform: rotate(-45deg);
    transition: all 0.8s ease-in-out;
    z-index: 2;
}

/* Hover effect */
.service_card:hover .service_img::after {
    height: 250%;
    left: 150%;
}

/* ----------- paginatin ------  */
.pagination-wrap {
    display: flex;
    justify-content: center;
    margin: 20px;
}

.pagination {
    display: flex;
    gap: 10px;
    list-style: none;
    padding: 0;
}

.page-link {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 15px;
    color: var(--Gray-2);
    background-color: var(--White);
    border: 1px solid var(--Gray-3);
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.35s ease;
}

/* Hover */
.page-link:hover {
    color: var(--white-ff);
    background-color: var(--Primary-Color);
    border-color: var(--Primary-Color);
}

/* Active */
.page-item.active .page-link {
    color: var(--white-ff);
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
}

/* Disabled */
.page-item.disabled .page-link {
    opacity: 0.4;
    pointer-events: none;
}

/* Focus (Accessibility) */
.page-link:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(33, 100, 166, 0.25);
}

/* ----------- paginatin ------  */


/* ************ individual service ************ */
.indi_Ser_left_div,
.individual_blog_content_section .left_div_wrapper,
.succ_fix_div {
    position: sticky;
    top: 120px;
    left: 0;
}

.expore_more_Service_wrapper {
    border-radius: 10px;
    border: 1px solid #eee;
    background-color: var(--White);
    overflow: hidden;
}

.expore_more_Service_wrapper h3 {
    font-size: 20px;
    font-weight: 600;
    color: var(--white-ff);
    background-color: var(--Primary-Color);
    padding: 16px 24px;
    margin: 0;
}

.expore_more_Service_wrapper ul {
    display: flex;
    flex-direction: column;
    padding: 16px 24px;
    /* background-color: var(--bgE9); */
}

.expore_more_Service_wrapper ul li a {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
    font-size: 1rem;
    font-weight: 500;
    color: var(--Black);
    transition: all .5s ease-in-out;
    border-bottom: 1px solid var(--bgE9);
    padding: 12px 0;
}

.expore_more_Service_wrapper ul li:last-child a {
    border-bottom: none;
    padding: 0;
    padding-top: 12px;
}

.expore_more_Service_wrapper ul li a i {
    font-size: 1.2rem;
    transition: all .5s ease-in-out;
    display: inline-block;
}

.expore_more_Service_wrapper ul li a:hover {
    color: var(--primary-dark);
}

.expore_more_Service_wrapper ul li a:hover i {
    transform: rotate(45deg);
}

.need_help_div_wrapper {
    margin-top: 32px;
    border-radius: 10px;
    border: 1px solid #eee;
    background-color: var(--White);
    background-color: var(--bgE9);
    overflow: hidden;
}

.need_help_div_wrapper h3 {
    font-size: 20px;
    font-weight: 600;
    color: var(--white-ff);
    background-color: var(--Black-1-light);
    padding: 16px 24px;
    margin: 0;
}

.need_help_div_wrapper .content {
    padding: 24px;
}

.need_help_div_wrapper .content p {
    color: var(--Gray-2);
    margin-bottom: 16px;
}

.need_help_div_wrapper>img {
    width: 50%;
    object-fit: contain;
    display: block;
    margin-left: auto;
    margin-top: 16px;
}

.need_help_div_wrapper ul li a {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 1.2rem;
}

.need_help_div_wrapper ul li a span {
    font-weight: 600;
}

.need_help_div_wrapper ul li a i {
    font-size: 1.5rem;
}

.need_help_div_wrapper ul {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.indi_ser_right_Div .imag_tag_ser {
    height: 460px;
    overflow: hidden;
    border-radius: 10px;
    margin-bottom: 24px;
}

.indi_ser_right_Div .imag_tag_ser img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.indi_ser_right_Div .imag_tag_ser .page_tag {
    background-color: var(--white-ff);
    position: absolute;
    bottom: 16px;
    right: 32px;
    padding: 8px 16px;
    border-radius: 32px;
    padding-bottom: 10px;
    font-weight: 600;
    color: var(--primary-dark);
}

.indi_ser_right_Div>p {
    color: var(--Gray-2);
}

.indi_ser_right_Div h2,
.indi_ser_right_Div h4,
.indi_ser_right_Div h3 {
    font-weight: 600;
    margin-bottom: 16px;
	font-size: 1.6rem;
}

.image_div img {
    height: 420px;
    border-radius: 20px;
    width: 100%;
    object-fit: cover;
}

.copy_right a {
    text-decoration: underline;
}

/* ************ individual service ************ */
/*
*************************
SERVICE PAGE CSS 
************************* */


/* ========== individual blog page ================= */
.recent_post_tag {
    background-color: var(--White);
    padding: clamp(16px, 3vw, 28px);
    border-radius: 24px;
    margin-bottom: 32px;
    box-shadow: 0 0px 10px 0px rgba(74, 74, 74, 0.05);
}

.recent_post_tag h4 {
    font-weight: 600;
    margin-bottom: 18px;
}

.recent_post_tag ul {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.recent_post_tag ul li {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 16px;
    font-weight: 500;
    align-items: center;
}

.recent_post_tag ul li .img {
    height: 120px;
    border-radius: 10px;
    overflow: hidden;
}

.recent_post_tag ul li .img img {
    width: 100%;
    height: 100%;
    transition: all .5s ease-in-out;
    object-fit: cover;
}

.c_date {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--Gray-2);
    font-weight: 500;
}

.c_date i {
    color: var(--Primary-Color);
}

.recent_post_tag ul li a {
    color: var(--Black);
    margin-top: 5px;
    display: inline-block;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all .5s ease-in-out;
    font-weight: 600;
}

.recent_post_tag ul li:hover a {
    color: var(--primary-dark);
}

.recent_post_tag ul li:hover img {
    transform: scale(1.1);
}

.individual_blog_content_section .right_div_wrapper .imag_tag_ser {
    height: 620px;
    overflow: hidden;
    border-radius: 16px;
    margin-bottom: 24px;
}

.individual_blog_content_section .right_div_wrapper .imag_tag_ser img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.individual_blog_content_section .right_div_wrapper .imag_tag_ser .page_tag {
    background-color: var(--white-ff);
    position: absolute;
    bottom: 16px;
    right: 32px;
    padding: 8px 16px;
    border-radius: 32px;
    padding-bottom: 10px;
    font-weight: 600;
    color: var(--primary-dark);
}

.individual_blog_content_section .right_div_wrapper>p {
    color: var(--Gray-2);
}

.individual_blog_content_section .right_div_wrapper h5,
.individual_blog_content_section .right_div_wrapper h3,
.individual_blog_content_section .right_div_wrapper h4 {
    font-weight: 600;
    margin-bottom: 16px;
}

.right_div_wrapper blockquote {
    background-color: #f5f5f5;
    padding: clamp(16px, 4vw, 44px);
    font-size: clamp(16px, 1.5vw, 18px);
    color: var(--Gray-2);
    font-weight: 500;
    position: relative;
}

.right_div_wrapper blockquote::before {
    content: '';
    position: absolute;
    right:clamp(16px, 4vw, 44px)  ;
    background: url('assets/images/bgs/quote.png');
    height: 60px;
    bottom: clamp(16px, 4vw, 44px);
    width: 60px;
    background-size: contain;
    background-repeat: no-repeat;
}

.right_div_wrapper blockquote h4 {
    margin: 0;
    margin-top: 32px;
    color: var(--Black-1);
    padding-left: 42px;
    position: relative;
    font-weight: 600;
}

.right_div_wrapper blockquote h4::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 32px;
    background-color: var(--primary-dark);
    height: 2px;
    border-radius: 10px;
}

.recent_post_tag .inner_list {
    gap: 10px;
}

.recent_post_tag .inner_list li {
    all: unset;
    border-bottom: 1px solid var(--Gray-3);
    padding-bottom: 16px;
}

.recent_post_tag .inner_list li:last-child {
    border-bottom: 0;
    padding: 0;
}

.recent_post_tag .inner_list li a {
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: space-between;
    color: var(--Gray-2);
}

/* ========== individual blog page ================= */


/* ========== contact page ================= */
.contact_us_form_section{
    padding-top: 84px;
}


.contact_us_section .c_data_bx {
    background-color: var(--White);
    padding: clamp(24px, 3vw, 28px);
    border-radius: 32px;
    box-shadow: 0px 0px 50px 5px rgba(187, 187, 187, 0.15);
    height: 100%;
}

.contact_us_section .c_data_bx .first {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--Gray-3);
    margin-bottom: 24px;
}

.contact_us_section .c_data_bx .icon {
    /* background-color: var(--Gray-2); */
    background-color: var(--Primary-Color);
    height: 60px;
    width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 40px;
    color: var(--White);
    transition: all .5s ease-in-out;
    flex-shrink: 0;
}

.contact_us_section .c_data_bx:hover .icon {
    background-color: var(--Primary-Color);
}

.contact_us_section .c_data_bx p {
    color: var(--Gray-2);
    margin: 0;
}

.contact_us_section .c_data_bx .c_text h4 {
    font-weight: 600;
    margin: 0;
    margin-bottom: 2px;
    font-size: 22px;
    color: var(--Black-1-light);
}

.contact_us_section .c_data_bx .c_text a {
    color: var(--Gray-2);
    font-weight: 500;
    /* word-break: break-all; */
    font-size: 14px;
}

.contact_left_Div h5,
.contact_us_form h5 {
    color: var(--Primary-Color);
    font-weight: 600;
    margin-bottom: 10px;
    font-size: 1rem;
}

.contact_left_Div h2,
.contact_us_form h2 {
    font-weight: 700;
    font-size: clamp(26px, 3vw, 44px);
    margin-bottom: 24px;
	font-size: 1.6rem;
}

.contact_left_Div p {
    color: var(--Gray-2);
}

.contact_us_form {
    background-color: var(--White);
    padding: clamp(24px, 4vw, 44px);
    box-shadow: 0px 0px 50px 5px rgba(187, 187, 187, 0.15);
    border-radius: 32px;
}

.c_input_f input {
    height: 60px;
    padding: 10px 24px;
    border: 1px solid var(--Gray-3);
    border-radius: 50px;
    width: 100%;
    outline: none;
}

.c_input_f textarea {
    padding: 10px 24px;
    border: 1px solid var(--Gray-3);
    border-radius: 16px;
    width: 100%;
    outline: none;
    height: 170px;
}

.contact_us_form .submit_btn {
    background-color: var(--Primary-Color);
    padding: 10px 24px;
    border-radius: 40px;
    color: var(--white-ff);
    font-weight: 500;
    border: 1px solid var(--Primary-Color);
}

.contact_us_form .submit_btn:hover {
    background-color: var(--primary-dark);
}

/* ========== contact page ================= */


/* ------------ faq css ---------------- */
.faq_section {
    position: relative;
    overflow: hidden;
}

.faq_section::before {
    content: '';
    position: absolute;
    background: url('assets/images/bgs/buliding2.png');
    left: 0;
    height: 100%;
    width: 80%;
    bottom: 0;
    background-size: contain;
    background-repeat: no-repeat;

}

.faq_section.bg_none::before {
    display: none;
}

.left_faq_div h6 {
    font-size: 1rem;
    color: var(--primary-dark);
    font-weight: 600;
}

.left_faq_div h3 {
    font-size: clamp(1.7rem, 3vw, 44px);
    font-weight: 800;
    margin-bottom: 16px;
}
.left_faq_div p {
    color: var(--Gray-2);
}

.faq_accordion_wrapper {
    background-color: #f5f5f5;
    padding: clamp(16px, 3vw, 32px);
    border-radius: 20px;
}

/* Remove accordion box-shadow, borders, background */
.faq_accordion_wrapper .accordion-item {
    border: none;
    box-shadow: none;
    background-color: var(--white-ff);
}

.faq_accordion_wrapper .accordion-button {
    box-shadow: none;
}

/* Remove active / focus styles */
.faq_accordion_wrapper .accordion-button:focus {
    box-shadow: none;
    border-color: transparent;
}

/* Remove expanded background */
.faq_accordion_wrapper .accordion-button:not(.collapsed) {
    background: transparent;
    box-shadow: none;
    color: inherit;
}


.faq_accordion_wrapper .accordion-button {
    font-weight: 700;
}

.faq_accordion_wrapper .accordion-button:not(.collapsed) {
    background-color: var(--bgE9);
    color: var(--primary-dark);
}

.faq_accordion_wrapper .accordion-item {
    border: 1px solid #e5e5e5;
    margin-bottom: 24px;
    border-radius: 6px;
    overflow: hidden;
}

.faq_accordion_wrapper .accordion-body {
    color: var(--Gray-2);
    font-weight: 500;
}

/* Remove default arrow */
.faq_accordion_wrapper .accordion-button::after {
    display: none;
}

/* Add custom + / - icon */
.faq_accordion_wrapper .accordion-button {
    position: relative;
    padding-right: 40px;
    font-weight: 600;
}

.faq_accordion_wrapper .accordion-button::before {
    content: '+';
    position: absolute;
    right: 16px;
    font-size: 28px;
    font-weight: 700;
    transition: transform 0.3s ease;
}

/* Change to minus when open */
.faq_accordion_wrapper .accordion-button:not(.collapsed)::before {
    content: '−';
}

/* ------------ faq css ---------------- */


/* ========== photo gallary ============ */
.photo_gallery_Section .gallery_img {
    height: 360px;
    overflow: hidden;
    border-radius: 20px;
    position: relative;
}
.gallery_img .youtube_icon{
    height: 80px;
    width: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.photo_gallery_Section .gallery_img img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}
.gallery_img .youtube_icon img {
    height: 100%;
    width: 100%;
    object-fit: contain;
}
/* Shiny overlay */
.project_filter_Wrapper .gallery_img::after,
.photo_gallery_Section .gallery_img::after {
    content: "";
    position: absolute;
    width: 250%;
    height: 0%;
    left: -200%;
    top: 0%;
    background: rgba(255, 255, 255, 0.35);
    transform: rotate(-45deg);
    transition: all 0.8s ease-in-out;
    z-index: 2;
}

/* Hover effect */
.project_filter_Wrapper .gallery_img:hover:after,
.photo_gallery_Section .gallery_img:hover:after {
    height: 250%;
    left: 170%;
}
.project_filter_Wrapper .gallery_img.company_project_img::after{
    z-index: 1;
}
.cursor-view {
    position: absolute;
    width: 90px;
    height: 90px;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.7);
    transition: opacity 0.25s ease, transform 0.25s ease;
    z-index: 10;
}

.cursor-view.active {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* ========== photo gallary ============ */

/* ---------- project page ------------- */
/* .project_card_Section {
    padding-bottom: 180px;
} */

.project_filter_btns button {
    background-color: transparent;
    border: 1px solid var(--bgE9);
    padding: 4px 20px;
    transition: all .5s ease-in-out;
    color: var(--Gray-2);
    border-radius: 2px;
}

.project_filter_btns button.active,
.project_filter_btns button:hover {
    background-color: var(--Primary-Color);
    color: var(--white-ff);
}

.project_filter_Wrapper .gallery_img {
    position: relative;
    height: 420px;
    overflow: hidden;
}

.project_filter_Wrapper .gallery_img img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.expore_more_Service_wrapper.second ul li a>span:last-child {
    color: var(--Gray-2);
    text-align: end;
}

.expore_more_Service_wrapper.second ul li a .icon_bx {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
}

.expore_more_Service_wrapper.second ul li a .icon_bx .bx {
    height: 28px;
    width: 28px;
    color: var(--white-ff);
    border-radius: 5px;
    background-color: var(--Primary-Color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
}

.expore_more_Service_wrapper.second ul li a:hover {
    color: var(--Black);
}

.expore_more_Service_wrapper.second ul li a:hover i {
    transform: rotate(0);
}

.faq_accordion_wrapper .accordion-header {
    margin-bottom: 0 !important;
}

.project_dev_process ul {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.project_dev_process ul li {
    background-color: #f5f5f5;
    border-radius: 10px;
    padding: 16px clamp(16px, 2vw, 24px);
    display: flex;
    align-items: center;
    gap: 16px;
}

.req_num_bx {
    height: 60px;
    width: 60px;
    border-radius: 10px;
    background-color: var(--Primary-Color);
    color: var(--white-ff);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: 700;
    flex-shrink: 0;
}

.req_numtext h5 {
    font-weight: 600;
    margin: 0;
    margin-bottom: 4px;
}

.req_numtext p {
    margin: 0;
    color: var(--Gray-2);
}

.key_feat__bx {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    text-align: center;
    flex-direction: column;
    background-color: #f5f5f5;
    padding: 24px;
    border-radius: 16px;
}

.key_feat__bx .icon_bx {
    height: 50px;
    width: 50px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--Primary-Color);
    font-size: 24px;
    color: var(--white-ff);
}

.key_feat__bx h5 {
    margin: 0;
    font-weight: 600;
}

.key_feat__bx p {
    margin: 0;
    color: var(--Gray-2);
}

.key_feat_wrap_bx {
    background-color: #f5f5f5;
}

.key_feat_wrap_bx img {
    -webkit-mask-image: url('assets/images/bgs/project-feature-image-shape.svg');
    -webkit-mask-size: cover;
    -webkit-mask-position: center center;
    object-fit: cover;
    height: 160px;
}

/* ---------- project page ------------- */


/* ------------ client review page -------------- */
.client_success_sec_wrapper {
    background-color: #f5f5f5;
    position: relative;
}

.client_success_sec_wrapper::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 70%;
    width: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url('assets/images/bgs/testimonials-bg-shape-gold.png');

}

.right_client_card_wrapper {
    background-color: var(--white-ff);
    border-radius: 16px;
    padding: 16px;
}


.client_review_card {
    background-color: #f5f5f5;
    padding: clamp(24px, 3vw, 32px);
    border-radius: 16px;
    min-height: 360px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    justify-content: space-between;
    height: 100%;
}

.client_review_card .reviwer_profile {
    padding-top: 24px;
    border-top: 1px solid var(--Gray-3);
}

.client_review_card .r_des_div p {
    margin: 0;
    color: var(--Gray-2);
}

.client_review_card .r_des_div .rating {
    color: #FED403;
    color: var(--Primary-Color);
    font-size: 20px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.reviwer_profile .image img {
    height: 60px;
    width: 60px;
    border: 1px solid var(--bgE9);
    border-radius: 50%;
    object-fit: cover;
    display: inline-block;
}

.reviwer_profile .personal_detail h4 {
    font-size: 20px;
    margin: 0;
    margin-bottom: 5px;
    font-weight: 600;
}

.reviwer_profile .personal_detail p {
    margin: 0;
    color: var(--Gray-2);
}

.reviwer_profile .quote_icon svg {
    fill: var(--Primary-Color);
}

/* ------------ client review page -------------- */

/* Proejct Contact serction  */
.project_contact {
    background: url('assets/images/bgs/abg.webp');
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center;
    padding: clamp(44px, 6vw, 104px) 0;
    position: relative;
}

.project_contact::before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.4);
}

.project_contact h4 {
    font-size: clamp(32px, 5vw, 62px);
    font-weight: 800;
    color: var(--white-ff);
}

/* Project Contact section  */

/* media queries*/
@media (min-width: 1300px) {

    .client_review_card {
        min-height: 300px;
    }

    .service_card .service_img {
        height: 300px;
    }

    .footer_map_link iframe {
        width: 100%;
        height: 250px;
        border-radius: 12px;
    }

    .project_filter_Wrapper .gallery_img {
        height: 540px;
    }

    .photo_gallery_Section .gallery_img {
        height: 460px;
    }
}

@media (max-width: 1400px) {
    .home_about_us .left_slider {
        height: 43rem;
        overflow: hidden;
        border-radius: 16px;
    }

    /* .about_page_about_section .left_slider {
        height: 38rem;
    } */
/*     .project_card_Section {
        padding-bottom: 60px;
    }
 */
    .home_hero_content {
        top: 50%;
    }
}

@media (max-width: 1200px) {
    .what_we_do_Section .swiper-button-next {
        top: 50%;
        transform: translateY(-50%);
        right: 10px;
    }

    .home_client_review_wrapper .swiper-button-next {
        right: 5px;
    }

    .home_client_review_wrapper .swiper-button-prev {
        left: 5px;
    }

    .company_project_show_container .swiper-button-next {
        right: 0;
    }

/*     .service_card_section {
        margin-bottom: 30px;
    } */

    .home_hero_content {
        top: 60%;
        transform: translate(-50%, -50%);
        width: 100%;
    }

    .home_hero_content .content {
        max-width: 90%;
        width: 100%;
    }

}

@media (max-width: 992px) {
    .home_hero_content {
        top: 50%;
    }
    .home_hero_content .content {
        max-width: 100%;
        width: 100%;
    }
	 .gap36 {
        gap: 0px;
    }

    /* .home_hero_section .home_gif iframe.bg-video {
        width: 150%;
    } */

   

    .building .building_heading a {
        margin-top: 44px;
    }

    .home_about_us .left_slider {
        height: 460px;
    }

    .navbar-nav {
        padding-top: 16px;
    }

    .navbar .common_black_btn {
        width: max-content;
    }

    .home_about_center_container .left_imag,
    .home_about_center_container .righ_img {
        transform: translate(0);
        margin-left: 0;
        height: 320px;
    }

    .home_about_center_container .customer_Tag {
        left: 50%;
    }

    .l_banner_content a {
        margin-top: 24px;
    }

    .last_banner_bg {
        /* height: 300px; */
        margin-bottom: 44px;
        margin-top: 44px;
    }

    .service_show_Case_wrapper .service_one,
    .service_show_Case_wrapper .service_second,
    .service_show_Case_wrapper .service_third {
        position: relative;
        height: 480px;
    }

    .service_show_Case_wrapper .service_content .content a {
        margin-top: 24px;
    }

    .what_we_do_Section .swiper-button-next {
        top: auto;
        right: 20px;
        bottom: 50px;
    }

    .home_client_review_wrapper .swiper-button-next {
        right: -50px;
    }

    .home_client_review_wrapper .swiper-button-prev {
        left: -50px;
    }

    .mySwiperClientHome {
        padding-bottom: 44px;
    }

    .home_hero_section {
        height: 700px;
    }

    .success_slider_btns {
        margin-top: 44px;
    }

    .home_client_succestoreis_bg>.container {
        padding: 84px 0;
    }
}

@media (max-width: 768px) {
	.home_hero_section{
		padding: 380px 0;
	}
/*     .home_hero_section .home_gif iframe.bg-video {
        width: 170%;
    } */

    .home_about_us .left_slider {
        height: 420px;
    }

    .copy_right {
        padding-top: 44px;
    }

    .home_about_center_container .righ_img,
    .home_about_center_container .left_imag {
        clip-path: none;
        width: 100%;

    }

    .p84 {
        padding: 44px 0;
    }

    .our_services_section_container {
        padding-top: 44px;
    }

    .home_why_Choose .left_text ul {
        margin-bottom: 44px;
    }

    .lbanner_image {
        display: none;
    }

    .l_banner_content {
        width: 100%;
        padding: 44px 24px;
    }

    .last_banner_bg {
        height: auto;
        margin-top: 0;
    }

    .company_project_show_container .swiper-button-next {
        right: 0;
    }

    .company_project_img {
        height: 320px;
    }

    .service_show_Case_wrapper .service_content .content {
        left: 24px;
        width: 88%;
    }

    .client_detail_wrapper {
        height: 420px;
    }

    .home_hero_content .content a {
        margin-top: 44px;
    }

    .success_story_review_wrapper {
        padding: 0 20px;
    }

    .home_client_succestoreis_bg>.container {
        padding: 44px 0;
    }

    .whatwedo_content ul {
        margin: 0;
    }

    .whatwedo_content .row {
        margin: 24px 0;
    }

    .about_left_div {
        height: 420px;
    }

}

@media (max-width: 576px) {
    .home_hero_section {
        height: 500px !important;
    }

    .last_banner_bg {
        padding: 16px 0;
    }

    .l_banner_content {
        padding: 16px;
    }

    /* .home_hero_section .home_gif iframe.bg-video {
        width: 200%;
    } */

    .home_hero_content {
        top: 55%;
    }

    .home_hero_content .content a {
        margin-top: 24px;
    }

    .home_hero_content .content h3 {
        margin-top: 24px;
        margin-top: 16px;
        margin-bottom: 16px;
    }

    .home_hero_content .content p {
        font-size: 14px;
    }

    /* 
    .home_hero_section .home_gif iframe.bg-video {
        top: 60%;
    } */

    .footer_logo {
        width: 140px;
    }

    .about_vison_bx_wrapper .about_points {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .indi_ser_right_Div>img,
    .individual_blog_content_section .right_div_wrapper .imag_tag_ser,
    .indi_ser_right_Div .imag_tag_ser {
        height: 320px;
    }

    header nav>.container {
        border-radius: 0;
    }

    header {
        top: 0;
    }
        .image_div img{
            height: 320px;
        }
}




/* =============================================
   HERO SECTION — LAYOUT & CENTERING
   ============================================= */
.home_hero_section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Full-cover video background */
.home_hero_section .home_gif {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.home_hero_section .home_gif .bg-video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 56.25vw;    /* 16:9 ratio */
    min-height: 100vh;
    min-width: 177.78vh; /* 16:9 ratio */
    transform: translate(-50%, -50%);
    border: none;
    pointer-events: none;
}

/* Dark overlay over video */
.home_hero_section::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.45) 0%,
        rgba(0, 0, 0, 0.60) 60%,
        rgba(0, 0, 0, 0.72) 100%
    );
    z-index: 1;
}

/* Hero content sits above the overlay */
.home_hero_content {
    /* position: relative; */
    z-index: 2;
    width: 100%;
/*     padding: 120px 0 80px; */
	padding: 210px 0 80px;
}

.home_hero_content .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 80px;
}

/* Heading & paragraph */
.home_hero_content .content {
    max-width: 780px;
}

.home_hero_content .content h3 {
    font-size: clamp(1.7rem, 4.5vw, 3.2rem);
    font-weight: 700;
    color: #ffffff;
    line-height: 1.25;
    letter-spacing: -0.02em;
    margin: 0 0 20px;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
}

.home_hero_content .content p {
    font-size: clamp(0.95rem, 1.6vw, 1.1rem);
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.75;
    margin: 0;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
}






/* =============================================
   HERO SEARCH BAR
   ============================================= */

.hero_search_form {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
    max-width: 980px;
    margin: 30px auto 0;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35), 
                0 4px 16px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    color: #FCFCFC;
}

/* Text Input Field */
.search_input {
    flex: 2 1 50px;
    min-width: 0;
    position: relative;
}

.search_input input[type="text"],
.search_input input[type="search"] {
    width: 100%;
    height: 58px;
    border: none;
    outline: none;
    padding: 0 48px 0 20px;
    font-size: 0.95rem;
    color: #FCFCFC;
    background: transparent;
    font-family: inherit;
}

.search_input input::placeholder {
    color: #FCFCFC;
    opacity: 0.85;
}

.search_input .form__icon {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: #FCFCFC;
    pointer-events: none;
    font-size: 1.1rem;
}


/* Select Dropdowns */
.search_field {
    /* flex: 1 1 160px; */
    min-width: 0;
    position: relative;
    display: flex;
    align-items: center;
}

.search_field select {
    width: 100%;
    height: 58px;
    border: none;
    outline: none;
    background: transparent;
    appearance: none;
    -webkit-appearance: none;
    padding: 0 38px 0 18px;
    font-size: 0.92rem;
    color: #FCFCFC;
    cursor: pointer;
    font-family: inherit;
}

.search_field select option {
    color: #1a1a2e;
    background: #ffffff;
}

/* Dropdown Arrow */
.search_field::after {
    content: '▼';
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.65rem;
    color: #FCFCFC;
    pointer-events: none;
    z-index: 2;
}

/* Search Button */
.search_btn {
    flex: 0 0 auto;
    height: 58px;
    padding: 0 32px;
    background: #134261;
    color: #FCFCFC;
    border: none;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background 0.25s ease, transform 0.2s ease;
    white-space: nowrap;
}

.search_btn:hover {
    background: #1e5a85;
    transform: translateY(-1px);
}

.search_btn svg {
    font-size: 1.05rem;
}

/* =============================================
   RESPONSIVE
   ============================================= */

@media (max-width: 900px) {
    .hero_search_form {
        flex-direction: column;
        border-radius: 12px;
    }

    .search_input,
    .search_field {
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    }

    .search_btn {
        width: 100%;
        height: 54px;
        justify-content: center;
        border-radius: 0 0 12px 12px;
    }
}

@media (max-width: 600px) {
    .hero_search_form {
        margin: 10px 16px 60px 16px;
        max-width: 100%;
    }

    .home_hero_content {
        padding: 100px 0 60px;
    }
}




/* projects cards details */
 /* Force 5 Items in One Row - Minimal & Clean */
.sc-gfa-DSH.betroq {
    display: flex;
    align-items: stretch;
    gap: 16px;
    padding: 20px 0;
    overflow-x: auto;           /* Allows horizontal scroll on very small screens */
    scrollbar-width: none;      /* Hide scrollbar in Firefox */
}

.sc-gfa-DSH.betroq::-webkit-scrollbar {
    display: none;              /* Hide scrollbar in Chrome/Safari */
}

/* Each Item */
.category__item {
    flex: 1 1 0;                /* Equal width for all 5 items */
    min-width: 160px;           /* Minimum width */
}

/* Details Box */
.project-details__details-box {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 16px 18px;
    height: 100%;
    transition: all 0.3s ease;
}

.project-details__details-box:hover {
    border-color: #cbd5e1;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
}

/* Label Text */
.project-details__client {
    margin: 0 0 8px 0;
    font-size: 13.5px;
    font-weight: 500;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* Main Value */
.project-details__name {
    margin: 0;
    font-size: 16.5px;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.4;
}

/* Responsive */
@media (max-width: 1200px) {
    .category__item {
        min-width: 150px;
    }
}

@media (max-width: 768px) {
    .sc-gfa-DSH.betroq {
        gap: 12px;
        padding: 16px 0;
    }
    
    .category__item {
        min-width: 140px;
    }
}

/* On very small screens, allow horizontal scroll instead of wrapping */
@media (max-width: 480px) {
    .sc-gfa-DSH.betroq {
        flex-wrap: nowrap;     /* Force single row even on mobile */
    }
}



.home_insight_wrapper{
    padding-top: 84px;
}



/* SCROLL BUTTON */
 #scrollTopBtn {
    background: #132c5a;
    font-size: 22px; /* slightly smaller for better scaling */
    color: #FCFCFC;
    position: fixed;
    bottom: 145px;   /* better than 400px for responsiveness */
    right: 65px;
    border: none;
    padding: 5px;
    border-radius: 50%;
    height: 30px;
    width: 30px;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 100;
    transition: all .3s ease-in-out;
    cursor: pointer;
}

#scrollTopBtn.show {
    display: flex;
}

#scrollTopBtn:hover {
    border: 2px solid #2164A6;
    background: #2164A6;
    color: #fff; /* fixed invalid var(---color) */
}

/*  Tablet */
@media (max-width: 992px) {
    #scrollTopBtn {
        bottom: 30px;
        right: 15px;
        height: 45px;
        width: 45px;
        font-size: 20px;
    }
}

/*  Mobile (hide button) */
@media (max-width: 768px) {
    #scrollTopBtn {
        display: none !important;
    }
}



/* serive swiper  */
/* .service_btns {
  position: relative;
}

.service_btns .swiper-button-next,
.service_btns .swiper-button-prev {
  height: 30px;
  width: 30px;
  border-radius: 50%;
  border: 1px solid var(--primary-color);
  right: 0;
  left: auto;
}

.service_btns .swiper-pagination-progressbar-fill {
  background-color: red;
}

.service_btns .swiper-pagination-progressbar {
  background-color: #fff;
}

.service_btns .swiper-pagination {
  width: 88%;
  margin-top: -9px;
  height: 6px;
}

.service_btns .swiper-button-prev {
  left: auto;
  right: 40px;
  z-index: 2;
} */

.service_btns svg {
  width: 16px;
  height: 16px;
  fill: red;
  color: #fff;
}

.service_card_wrapper {
  display: block;
  height: 360px;
  position: relative;
  overflow: hidden;
}

.service_card_wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.3),
    rgba(0, 0, 0, 0.8)
  );
}

.service_card_wrapper img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.service_card_wrapper h3 {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  width: 90%;
/*   font-size: 20px; */
	font-size: 1.5rem;
}

.service_card_wrapper h3::before {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 30px;
  height: 2px;
  border-radius: 4px;
  background-color: #fff;
	font-size: 1.5rem;
}

@media (max-width: 768px) {
    .faq_section{
        padding-bottom: 0px;
    }
}



/* heading front dash line  */
/* Remove old lines */
.secont_common_heading h3::before {
    display: none;
}


.secont_common_heading h3::before {
    display: none;
}
.secont_common_heading h3 {
  position: relative;
  padding-bottom: 10px;
  display: inline-block;
}
.secont_common_heading h3::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #1e5790 0%, #5b8fc0 40%, transparent 100%);
  border-radius: 999px;
  clip-path: polygon(0 0, 100% 40%, 100% 60%, 0 100%);
}