.body-scroll::-webkit-scrollbar {
        width: 12px;
    }
    
    .body-scroll::-webkit-scrollbar-track {
        border-radius: 50px !important;
        background: #dff5ff8a !important;
    }
    
    .body-scroll::-webkit-scrollbar-thumb {
        border-radius: 50px !important;
        background: #a67c00 !important;
    }
    
    .body-scroll::-webkit-scrollbar-thumb:hover {
        background: #000000 !important;
    }
    
     :root {
        --color-1: #a67c00;
        --white: #ffffff;
        ---all-container-color: linear-gradient(to bottom, var(--color-1) 0%, #000 100%);
    }
    
    .all-container-color {
        background: var(---all-container-color);
    }
    
    h2 {
        text-transform: capitalize;
    }
    /* line-color */
    
    .next-line .text-line::before {
        background-color: rgb(36 36 36 / 51%) !important;
    }
    
    * {
        text-decoration: none !important;
        list-style: none !important;
    }
    
    p {
        color: #f7f7f7e8;
        font-weight: 400;
    }
    
    .light-p {
        color: #242424;
        font-weight: 400;
    }
    
    .miner-heading {
        font-weight: 900;
        color: #ffdc73;
        font-family: 'Montserrat', 'Helvetica', 'Arial', sans-serif;
    }
    
    .s3D-heading {
        /* font-size: calc(35px + (100 - 35) * (100vw - 270px) / (1920 - 270)); */
        font-size: calc(26px + (80 - 26) * (100vw - 270px) / (1920 - 270));
        color: #ffc903 !important;
    }
    
    .p-special {
        font-size: 20px;
        text-align: justify;
        line-height: 32px;
    }
    
    .heading-1 {
        font-size: calc(22px + (40 - 22) * (100vw - 270px) / (1920 - 270));
    }
    
    .special-heading {
        font-size: calc(26px + (42 - 26) * (100vw - 270px) / (1920 - 270));
    }
    
    .h1-heading {
        font-size: calc(36px + (55 - 36) * (100vw - 270px) / (1920 - 270));
    }
    
    .h2-heading {
        font-size: calc(25px + (40 - 25) * (100vw - 270px) / (1920 - 270));
    }
    
    .h2-main-heading {
        /* font-size: calc(20px + (32 - 20) * (100vw - 270px) / (1920 - 270)); */
        font-size: calc(20px + (45 - 20) * (100vw - 270px) / (1920 - 270));
    }
    
    .sub-heading {
        font-size: calc(35px + (45 - 35) * (100vw - 270px) / (1920 - 270));
        font-weight: 700;
    }
    
    .text-height {
        line-height: 34px;
        font-size: calc(18px + (20 - 18) * (100vw - 270px) / (1920 - 270));
    }
    /*---------------------- Buttun Design------------------- */
    
    .slide-to-btn {
        /* border-radius: 10px; */
        background-color: rgb(14 14 14 / 31%);
        backdrop-filter: blur(3px);
        border: 1px solid #fff !important;
        color: white !important;
        transition: 0.2s linear;
    }
    
    .slide-to-btn:hover {
        background-color: #a67c00;
        border: 1px solid transparent !important;
        color: white;
    }
    
    .slide-btn-2 {
        background-color: #a67c00;
        border: 1px solid transparent;
        color: white;
        transition: 0.2s linear;
    }
    
    .slide-btn-2:hover {
        border-color: #000;
        color: #000;
        background-color: transparent;
    }
    
    .close-you {
        border-radius: 50px;
        width: 50px;
        height: 50px;
        background-color: #953939;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .first-btn {
        color: #fff;
        background-color: #a67c00;
        border: 2px solid #a67c00;
        min-width: 255px !important;
        transition: all .5s ease;
        font-weight: 700;
        border-radius: 10px;
    }
    
    .first-btn:hover {
        color: #a67c00;
        background-color: transparent;
    }
    
    .bounce-effect {
        animation: bouncing 2s linear infinite;
    }
    
    @media screen and (min-width:575.98px) {
        .border-md {
            border-right: 1px solid #fff !important;
        }
    }
    /* ------------------text-color---------------- */
    
    .one-color {
        color: #f7d08a;
    }
    
    .two-color {
        color: #fff;
    }
    
    .three-color {
        color: #0a0a0a;
    }
    
    .four-color {
    color: #a67c00;
	}
    
    .p-white {
        color: #1d1d1d;
    }
    /* Header-top-btn */
    
    .tel-btn {
        background-color: #a67c00;
        color: white;
        border: 1px solid #000;
        transition: 0.2s linear;
    }
    
    .tel-btn:hover {
        background-color: transparent;
        border: 1px solid #fff;
        color: #a67c00;
    }
    
    .tel-btn:nth-child(1) {
        border-radius: 30px 0px 0px 30px;
    }
    
    .tel-btn:nth-child(3) {
        border-radius: 0px 30px 30px 0px;
    }
    /* ul-design line */
    
    .ul-line a {
        position: relative;
    }
    
    .ul-line a:before {
        content: "";
        position: absolute;
        width: 0%;
        height: 5px;
        background-color: #67c6e3;
        bottom: -9px;
        border-radius: 5px;
        transition: transform 0.2s linear;
        transform: scale(0);
    }
    
    .ul-line li a:hover::before {
        width: 100%;
        transform: scale(1);
        width: 100%;
    }
    
    .ul-line .dropdown-item:hover::before {
        width: 100%;
        transform: scale(0);
        width: 100%;
    }
    /*----------------- Header Style ------------------*/
    
    header {
        position: fixed;
        width: 100%;
        background-color: transparent;
        z-index: 20;
        /* height: 100px; */
        display: flex;
        align-items: center;
        top: 0px;
        background-color: #00225524;
    }
    
    .menu-ll {
        width: max-content;
        position: absolute !important;
        left: 0x !important;
        background-color: rgb(48 43 43 / 70%);
        box-shadow: -1px 9px 8px 1px #999 !important;
        margin-top: 42px;
        backdrop-filter: blur(1px);
    }
    
    @media screen and (max-width:1920px) {
        .menu-ll {
            margin-top: 58px;
        }
    }
    
    @media screen and (max-width:1518px) {
        .menu-ll {
            margin-top: 39px;
        }
    }
    
    .desktop-nav .ul-design a {
        color: #fff;
        margin: 0px;
        font-weight: 500;
        position: relative;
        padding: 10px 0px;
        text-transform: capitalize;
        transition: 0.2s;
    }
    
    .ul-design .fa-phone {
        color: #f8fae5;
    }
    
    .ul-design a:hover {
        color: #f7d08a !important;
    }
    
    .ul-design a:before {
        content: "";
        position: absolute;
        width: 0;
        height: 3px;
        bottom: -2px;
        border-radius: 50px;
        background-color: #f8fae5;
        transform: scale(0);
        transition: transform 0.2s linear;
    }
    
    .ul-design a:hover:before {
        transform: scale(1);
        width: 100%;
    }
    
    .ul-design .active-nline:before {
        transform: scale(1) !important;
        width: 100% !important;
    }
    
    .toggle-design {
        outline: 0;
        border: 0;
        background: transparent;
        i {
            font-size: 40px;
            color: #000000;
        }
    }
    
    .nav-book {
        transition: 0.2s;
    }
    
    .nav-active {
        background-color: rgb(25 33 46) !important;
        box-shadow: 1px 2px 6px 1px #e1e0e0;
        top: 0px;
    }
    
    .designpersone {
        transition: 0.2s;
        position: fixed;
        top: 0px;
        z-index: 3;
        width: 100%;
    }
    /* --------------------------Mobile View-------------------------- */
    
    @media only screen and (max-width: 767.98px) {
        .mobile-navigation {
            background-color: rgb(0 0 0 / 54%);
            .dropdown-menu {
                padding: 0px 8px;
                box-shadow: 1px -1px 8px #999;
                margin-top: 10px;
            }
            .dropdown-menu li a {
                padding: 10px 0px !important;
                color: white;
            }
            .dropdown-item {
                line-height: 20px;
            }
        }
        .ul-border {
            border: 1px solid #b194701a;
        }
        .mobile-navigation ul li a {
            line-height: 50px;
            padding: 10px 20px !important;
            position: relative;
            color: white !important;
        }
    }
    
.mob-toggle {
    right: 64px;
    position: absolute;
    top: 56px;
}
    .side-nav {
        width: 70%;
        height: 100%;
        position: fixed;
        z-index: 100;
        transition: 1s;
        overflow: hidden;
        -webkit-transition: all 0.6s ease-in-out;
        overflow-y: scroll;
        top: 0;
    }
    
    .overlayb {
        display: none;
        background-color: rgba(0, 0, 0, 0.5);
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
    }
    
    .navcloss-btn {
        color: #f8fae5;
        font-size: 28px;
        background: #00466d;
        border-radius: 48%;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: ease-in 0.2s;
    }
    
    .navcloss-btn:hover {
        transform: scale(1.1);
    }
    /* end */
    
    @media screen and (max-width: 450px) {
        .m-Topbar-dsk {
            display: none !important;
        }
    }
    /* header {
        position: fixed;
        width: 100%;
        z-index: 1111;
    }
    
    .h-navbar li a {
        padding: 0px;
        line-height: 80px;
        color: #fff !important;
        font-weight: 600;
    }
    
    .h-navbar li a {
        border-bottom: 2px solid transparent;
    }
    
    .h-navbar li a:hover {
        border-bottom: 2px solid #ffba9b;
        background-color: #f7d08a42;
        color: #f7d08a !important;
        font-weight: 600;
    }
    
    .dropdown-menu li a {
        padding: 0px 8px;
        line-height: 30px;
    }
    
    .nav-active {
        background: linear-gradient(90deg, rgba(15, 15, 15, 0.4906337535014006) 0%, rgba(0, 0, 0, 0.39539565826330536) 100%);
        transition: ease-in-out 0.8s;
    } */
    /* -------dropdown-menu -------*/
    
    .menu-ll {
        width: max-content;
        position: absolute !important;
        left: 0px !important;
        background-color: rgb(48 43 43 / 70%);
        box-shadow: -1px 9px 8px 1px #999 !important;
        backdrop-filter: blur(1px);
    }
    
    .menu-ll-dis {
        display: flex;
        justify-content: center;
    }
    
    .menu-ll-dis h5 {
        font-weight: 700;
        border-left: 2px solid #4e3687;
        margin: 0;
        color: #4e3687 !important;
    }
    
    .menu-ll-dis ul li {
        padding: 3px 10px;
        color: white !important;
    }
    
    .menu-list-2,
    .menu-list-3,
    .menu-list-4 {
        border-left: 1px solid #af5d5d54;
        border-radius: 8px;
        padding-left: 14px;
    }
    
    .menu-list-1,
    .menu-list-2,
    .menu-list-3,
    .menu-list-4 {
        padding: 20px;
    }
    
    @media screen and (max-width: 1920px) {
        .menu-ll ul li a {
            font-size: calc(14px + (16 - 14) * (100vw - 320px) / (1920 - 992)) !important;
        }
    }
    /* ----end---- */
    
    .mobile-navbar {
        padding: 0px 10px;
    }
    
    .mobile-service {
        background: rgb(32 32 32 / 62%);
        backdrop-filter: blur(1px);
    }
    
    .mobile-service li a:hover {
        background-color: transparent !important;
        color: #eb0002 !important;
    }
    
    .mobile-navbar li a {
        padding: 0px 10px;
        color: #ffffff !important;
        font-weight: 500;
    }
    
    .navbar-toggler:focus {
        outline: 0 !important;
        box-shadow: none !important;
    }
    
    .navbar-toggler-icon {
        background-image: url(./images/icon/navbar-togler.svg) !important;
    }
    /* @media screen and (min-width: 992px) {
        .dest-nav {
            display: block !important;
        }
        .mob-nav {
            display: none !important;
        }
    }
    
    @media screen and (max-width: 992px) {
        .dest-nav {
            display: none !important;
        }
        .mob-nav {
            display: block !important;
        }
        .mob-nav h5 {
            border-left: 2px solid #4e3687;
            padding: 5px 5px;
            color: #4e3687;
            margin-left: 5px;
            font-weight: 600;
        }
        .mob-nav-icon {
            color: #4e3687;
            padding: 10px 10px;
            font-weight: 500;
        }
        .mob-nav .sr-mob li {
            border-top: 1px solid #a6a4aa42;
        }
        .mob-nav .dropdown-menu {
            border: 1px solid #4e368780;
            border-radius: 20px;
            transform: translateY(-10px);
        }
        .sr-mob li a {
            padding: 3px 10px;
        }
    } */
    /* Header-top-btn */
    
    .tel-btn {
        background-color: #a67c00;
        color: white;
        border: 1px solid #000;
        transition: 0.2s linear;
    }
    
    .mob-nav-icon {
        padding: 8px !important;
    }
    
    .tel-btn:hover {
        background-color: transparent;
        border: 1px solid #f7d08a;
        color: #f7d08a;
    }
    
    .tel-btn:nth-child(1) {
        border-radius: 30px 0px 0px 30px;
    }
    
    .tel-btn:nth-child(3) {
        border-radius: 0px 30px 30px 0px;
    }
    /* ----------------------------section-1-------------------------- */
    
    .Superior-Quality-slider img {
        min-height: 500px;
        max-height: 100%;
    }
    
    .next-preview {
        position: absolute;
        right: 0;
        bottom: 25px;
        cursor: pointer;
        font-weight: 700;
        color: #ac8610;
    }
    
    .text-slide {
        height: 100px;
        width: 100%;
        background-color: #e9e9e966;
        position: absolute;
        z-index: 10;
        bottom: 0;
    }
    
    .banner-overlay::before {
        position: absolute;
        content: "";
        width: 100%;
        height: 100%;
        background-color: rgb(4 4 4 / 40%);
        z-index: 10;
    }
    
    .box-rslise {
        width: 100%;
        /* height: 150px; */
        backdrop-filter: blur(3px);
        position: absolute;
        background-color: rgb(14 14 14 / 12%);
        bottom: 3px;
        /* position: relative; */
        z-index: 12;
    }
    
    .process-bar {
        width: 100%;
        height: 3px;
        background-color: black;
        position: relative;
    }
    
    .process-bar::before {
        content: "";
        position: absolute;
        width: 100%;
        transform: scale(1);
        height: 3px;
        background-color: rgb(110, 68, 68);
        left: 0;
        top: 0px;
    }
    
    .process-bar1:before {
        animation: mymove 1;
        animation-duration: 5s;
    }
    
    .process-bar2:before {
        animation: mymove2 1;
        animation-duration: 15s;
    }
    
    @keyframes mymove {
        0% {
            width: 10px;
            transform: scale(1);
        }
        100% {
            width: 100%;
            transform: scale(1);
        }
    }
    
    @keyframes mymove2 {
        0% {
            width: 10px;
            transform: scale(1);
        }
        100% {
            width: 100%;
            transform: scale(1);
        }
    }
    
    .section-1 img {
        /* width: 100%; */
        /* height: 700px; */
    }
    
    @media screen and (max-width:700px) {
        .section-1 img {
            /* width: 100%; */
            height: 400px;
        }
    }
    /* -------------------------------section 2------------------------------------- */
    
    .section-2 {
        padding: 100px 0px;
        background: var(--color-1);
        background: linear-gradient(to bottom, var(--color-1) 0%, #000 100%);
    }
    /* .text-line {
        position: relative;
    }
    
    .text-line::before {
        position: absolute;
        content: "";
        width: 20%;
        height: 7px;
        background-color: rgb(247 208 138 / 18%);
        bottom: -13px;
    }
     */
    
    .video-scale {
        overflow: hidden;
        position: relative;
        transition: 0.2s linear;
        cursor: pointer;
    }
    
    .video-scale:hover {
        img {
            transform: scale(1.1);
        }
    }
    
    .youtub-icon {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0px;
        display: flex;
        justify-content: center;
        align-items: center;
        /* background: #F58840; */
    }
    
    .icon-you {
        width: 100px;
        height: 100px;
        background-color: #f5884082;
        border-radius: 100px;
        color: #fff;
    }
    /* end */
    
    .overlay-video {
        display: none;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        opacity: 0;
        -ms-transition: opacity 600ms ease-in;
        transition: opacity 600ms ease-in;
        -ms-transition: opacity .6s;
        transition: opacity .6s;
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background: rgba(0, 0, 0, .7);
        /* z-index: 999999; */
    }
    
    .o1 {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        opacity: 1;
        -ms-transition: opacity 600ms ease-out;
        transition: opacity 600ms ease-out;
        -ms-transition: opacity .6s;
        transition: opacity .6s;
    }
    
    .videoWrapperExt {
        position: relative;
        top: 50%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        max-width: 982px;
        padding: 0 20px;
    }
    
    .videoWrapper {
        position: relative;
        padding-bottom: 56.25%;
        /* 16:9 */
        height: 0;
    }
    
    .videoWrapper iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    
    .close-you {
        background-image: url(http://djit.ac/images/news/mark.png);
        position: absolute;
        top: -50px;
        right: 0px;
        cursor: pointer;
        z-index: 9999;
        height: 40px;
        width: 40px;
        background-size: 40px;
        @media (max-width: 767px) and (orientation: landscape) {
            display: none;
        }
    }
    /* ----------------------------------section-4-------------------------------------- */
    
    .section-4 {
        padding: 70px 0px;
        overflow: hidden;
        position: relative;
    }
    
    .service-box {
        /* height: 450px; */
        background-color: transparent;
        box-shadow: 1px 3px 6px #ddd;
        transition: 0.3s linear;
        cursor: pointer;
        padding: 18px;
        display: flex;
        flex-direction: column;
        /* justify-content: center; */
        img {
            width: 100px;
        }
        h4 {
            color: #e9e9e9;
        }
        a {
            color: white;
            font-weight: 500;
            font-size: 20px;
            transition: 0.2s linear;
        }
    }
    
    .item_icon {
        display: flex;
        justify-content: center;
    }
    
    .service-box:hover {
        background-color: rgb(0 0 0 / 20%);
        box-shadow: none;
        h4 {
            color: white;
        }
    }
    
    .service-box a:hover {
        color: #fff;
    }
    
    .serviceanimat {
        position: relative;
    }
    /*--------------------------- section-5----------------------------------- */
    
    .section-5 {
        padding: 70px 0px;
        overflow-x: hidden;
    }
    
    .box-project {
        position: relative;
        img {
            width: 100%;
            height: 100%;
        }
        h3 {
            font-size: larger;
        }
    }
    
    .overlay-project {
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: 0;
        transition: 0.2s;
        bottom: 0;
        display: flex;
        align-items: end;
        justify-content: center;
        /* padding: 19px; */
        /* background: #316593; */
        margin: 0;
    }
    
    .box-project:hover .overlay-project {
        opacity: 1;
        background-color: rgb(53 40 0 / 62%);
    }
    /* -------------------------section-6---------------------------------- */
    
    .section-6 {
        padding: 100px 0px;
        background-image: url(./images/consultonfinal.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }
    
    .section-6 form {}
    
    .form-design input,
    textarea {
        width: 100%;
        border: none;
        border-bottom: 1px solid #fff;
        padding: 10px;
        background-color: transparent;
    }
    
    .form-design ::placeholder {
        color: #fff;
    }
    
    .form-design input:focus {
        outline: none;
        border-color: #a67c00 !important;
    }
    
    .form-design textarea:focus {
        outline: none;
        border-color: #a67c00 !important;
    }
    /* ads-1 */
    
    .ads-1 {
        padding: 70px 0px;
        background-image: url(./images/bg-group-heading.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        position: relative;
    }
    
    .overlay-ads::before {
        position: absolute;
        content: "";
        width: 100%;
        height: 100%;
        top: 0px;
        z-index: -0;
        background: rgb(0 0 0 / 46%) !important;
    }
    /* ---------------------section-s-7 ----------------------*/
    
    .section-s-7 {
        padding: 70px 0px;
        background: url(./images/VR-body-image.jpg) no-repeat center;
        background-size: cover;
        position: relative;
    }
    
    .threeD-Virtual-banner {
        background: url(./images/3D-Virtual\ Virtuosity\ Portal.webp) no-repeat center !important;
    }
    
    .bg-Digitally {
        background: url(./images/Digitally\ Enhanced\ Project\ Visualization.webp) no-repeat center !important;
        background-size: cover !important;
    }
    
    .bg-Ideas {
        background: url(./images/Ideas\ Come\ To\ Life\ In\ 3D.webp) no-repeat center !important;
        background-size: cover !important;
    }
    
    .photorealistic-3d-views-banner {
        background: url(./images/photorealistic-3d-views-banner.webp) no-repeat center !important;
    }
    
    .visual-design-banner {
        background: url(./images/visual-design-banner.webp) no-repeat center !important;
    }
    
    .Celebration-bg {
        background: url(./images/Create\ a\ Celebration-banner.webp) no-repeat center !important;
    }
    
    .Virtual-Reality-banner {
        background: url(./images/Virtual\ Reality\ banner.webp) no-repeat center !important;
    }
    
    .Virtual-Reality-bg {
        background-image: url(./images/2d-floor-Developing.webp) !important;
        /* background: url(./images/Virtual\ Reality\ Development.webp) no-repeat center !important; */
    }
    
    .Advertising-Power-banner {
        background: url(./images/Real\ \ Estate\ \ Advertising.webp) no-repeat center !important;
    }
    
    .Advertising-Power-bg {
        background: url(./images/Advertising\ Power.webp) no-repeat center !important;
    }
    
    .Digital-Compositing-banner {
        background: url(./images/Digital\ Compositing\ banner.webp) no-repeat center !important;
    }
    
    .Digital-Compositing-bg {
        background: url(./images/Digitally\ Enhanced\ Project\ Visualization-1.webp) no-repeat center !important;
    }
    
    .under-line-b {
        width: 150px;
        height: 5px;
        margin: 0px auto 0px;
        background-color: #a67c00;
    }
    
    .achive-box {
        background-color: #000000b9;
    }
    
    .box-sub-achive {
        border: 1px solid transparent;
        border-radius: 10px;
        transition: 0.2s linear;
        cursor: pointer;
    }
    
    .box-sub-achive:hover {
        border: 1px solid #fff;
        background-color: #a67d0031;
    }
    
    @media screen and (min-width:991.98px) {
        .border-my {
            border-right: 2px solid #cba171;
        }
    }
    /* -------------2d-design page -----------------*/
    
    .twod-bannner {
        background-image: url(./images/3d-2d-floor-plan-banner.webp);
    }
    
    .two-d-floor-banner {
        background-image: url(./images/3d-2d-floor-plan-banner.webp);
    }
    
    .contact-banner {
        background-image: url(./images/contact-banner.webp);
    }
    
    .augmented-reality-banner {
        background-image: url(./images/Augmented\ Reality\ banner.webp);
    }
    
    .about-banner {
        background-image: url(./images/about-banner.webp);
    }
    
    .about-sec-2 {
        padding: 70px 0px;
        background-image: url(./images/our-approch.webp);
    }
    /*  ABOUT-PAGE  */
    
   
    
    .contact-line::after {
        width: 138px;
        height: 10px;
        position: absolute;
        content: "";
        background-color: bisque;
        left: 113px;
        top: 46%;
    }

 .contact-line::before {
        width: 138px;
        height: 10px;
        position: absolute;
        content: "";
        background-color: bisque;
        right: 113px;
        top: 46%;
    }
    
    @media screen and (max-width:991.98px) {
        .contact-line::after {
            left: 80px;
        }
        .contact-line::before {
            right: 80px;
        }
    }
    
    @media screen and (max-width:767.98px) {
        .contact-line::after,
        .contact-line::before {
            width: 0px;
            height: 0px;
        }
    }
    
    .developing-2d-floor {
        /* background-image: url(./images/2d-floor-Developing.webp) !important; */
        background-image: url(./images/two-d-floor-banner.webp) !important;
    }
    /* project-banner {} */
    
    .Maxon-Street-UK-banner {
        background-image: url(./images/project/Maxon\ Street\ UK/p-1.webp) !important;
    }
    
    .One-Hyde-Park-London-UK-banner {
        background-image: url(./images/project/One\ Hyde\ Park\ London\ UK/p-1.webp) !important;
    }
    
    .West-Hampstead-UK-banner {
        background-image: url(./images/project/West\ Hampstead\ UK/p-1.webp);
    }
    
    .farmouns-germoney-bannner {
        background-image: url(./images/project/FARMHOUSE\ GERMONEY/p-1.webp) !important;
    }
    
    .Luxury-hills-grove-bannner {
        background-image: url(./images/project/Luxury\ Mansion\ Villa\ Dubai/p-1.webp) !important;
    }
    
    .dubai-hills-grove-bannner {
        background-image: url(./images/project/Dubai\ Hills\ Grove\ Villa/p-2.webp) !important;
    }
    
    .Jumeirah-hills-grove-bannner {
        background-image: url(./images/project/Jumeirah\ Bay\ Island\ Villas/p-2.webp) !important;
    }
    
    .jn-grounp-banner {
        background-image: url(./images/project/JN\ GROUPS\ FACTORY\ EXTERIOR\ DESIGN/p-1.webp) !important;
    }
    
    .ahmed-residence-bannner {
        background-image: url(./images/project/AHMED\ RESIDENCE/p-1.webp);
    }
    
    .Alfiza-town-banner {
        background-image: url(./images/project/ALFIZA\ TOWER\ BHARIA\ KARACHI/p-1.webp);
    }
    
    .bin-saleem-qatar-residence-interior-banner {
        background-image: url(./images/project/BIN\ SALEEM\ QATAR\ RESIDENCE\ INTERIOR/-1.webp);
    }
    
    .boutique-render-banner {
        background-image: url(./images/project/bou/p-1.webpp-1.webp);
    }
    
    .Café-interior-bannner {
        background-image: url(./images/project/CAFE\ INTERIOR/p-1.webp);
    }
    
    .commercial-building-bannner {
        background-image: url(./images/project/COMERCIAL\ BUILDING/p-1.webp);
    }
    
    .golf-course-dragon-fly-london-banner {
        background-image: url(./images/project/GOLF\ COURSE\ DRAGON\ FLY\ LONDON/p-1.webp);
    }
    
    .gulshan-karachi-banner {
        background-image: url(./images/project/GULSHAN\ KARACHI/p-1.webp);
    }
    
    .jokio-residence-banner {
        background-image: url(./images/project/JOKIO\ RESIDENCE/p-1.webp);
    }
    
    .kitchan-banner {
        background-image: url(./images/project/KITCHEN/p-1.webp);
    }
    
    .luis-residence-dubai-banner {
        background-image: url(./images/project/LUIS\ RESIDENCE\ DUBAI/p-1.webp);
    }
    
    .office-interior-dubai-banner {
        background-image: url(./images/project/OFFICE\ INTERIOR\ DUBAI/p-1.webp);
    }
    
    .office-interior-riyadh {
        background-image: url(./images/project/OFFICE\ INTERIOR\ RIYADH/p-1.webp);
    }
    
    .orhan-mosque-banner {
        background-image: url(./images/project/ORHAN\ CITY\ MOSQUE/p-1.webp);
    }
    
    .park-society-islamabad-banner {
        background-image: url(./images/project/PARK\ SOCIETY\ ISLAMABAD/p-1.webp);
    }
    
    .platino-arcade-islamabad-banner {
        background-image: url(./images/project/PLATINO\ ARCADE\ ISLAMABAD/p-1.webp);
    }
    
    .resturant-abu-dhabi-banner {
        background-image: url(./images/project/RESTURANT\ ABU\ DHABI/p-1.webp);
    }
	/*.jackson-residence-uk-banner{
		background-image: url(.images/project/jacksonResidenceUK/jackson-residence-uk.jpg);
	}*/
    
    .main-banner-style {
        background-repeat: no-repeat;
        background-size: cover !important;
        background-position: center;
        padding: 250px 0px 97px 0px;
    }
    /* Project-pages-css */
    
    .project-sec-1 {
        padding: 70px 0px;
    }
    
    .intro-banner-box {
        overflow: hidden !important;
        position: relative !important;
        img {
            transition: 0.2s ease-in;
        }
    }
    
    .intro-overlay {
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: rgb(53 40 0 / 62%);
        top: 0px;
        opacity: 0;
        z-index: 10;
        transition: 0.2s linear;
    }
    
    .intro-banner-box:hover {
        .intro-overlay {
            opacity: 1;
        }
        img {
            transform: scale(1.1);
        }
    }
    /*-------------------- services pages------------------ */
    
    .banner-virtual-walk video {
        min-width: 100% !important;
        min-height: 100vh;
        z-index: 1;
        overflow: hidden;
        position: relative !important;
    }
    
    .video-overlay::after {
        position: absolute !important;
        content: "";
        width: 100% !important;
        height: 100% !important;
        top: 0px;
        z-index: 10;
        background: rgb(64 62 59 / 63%);
    }
    
    .video-text {
        position: absolute;
        top: 50%;
        width: 100%;
        text-align: center;
        z-index: 63;
        color: white;
        font-weight: 700;
    }
    /* Responsive */
    
    @media screen and (min-width: 767.98px) {
        .service-box {
            height: 400px;
        }
        .mobile-navigation {
            background-color: rgb(0 0 0 / 40%);
            backdrop-filter: blur(2px);
            ul li {
                padding: 10px;
                border: 1px 0px 1px 0px solid #953939;
                border-top: 1px solid #c5a5a53b;
                border-bottom: 1px solid #c5a5a53b;
                a {
                    color: #fdefef;
                }
            }
        }
        .trans-form {
            padding: 20px;
        }
    }
    /*------------------- popup-form--------------- */
    
    .pop-bg {
        background: transparent !important;
    }
    
    .btn-pop-closs {
        button {
            outline: 0px;
            background-color: #e10000;
            color: white;
            right: -100%;
            position: relative;
            top: -65px;
            width: 30px;
            height: 30px;
            border: 1px solid #fff;
            border-radius: 20px;
        }
    }
    
    .pop-btn {
        color: white;
        border: 1px solid #fff;
        font-weight: 700;
        transition: 0.2s linear;
        background: transparent;
    }
    
    .pop-btn:hover {
        color: #a67c00;
        border: 1px solid #a67c00;
    }
    
    .form-design-h {
        background: rgb(0 0 0 / 60%);
        backdrop-filter: blur(104);
        backdrop-filter: blur(1px);
        padding: 35px;
        border-radius: 10px;
    }
    
    .form-design-h input {
        width: 100%;
        border-radius: 50px;
        padding: 5px 10px;
        background: transparent;
        border-color: #ffda7861;
        color: #cbc4c4c4;
    }
    
    .form-design-h textarea {
        width: 100%;
        border-radius: 50px;
        padding: 5px 10px;
        background: transparent;
        border-bottom: 1px solid #786a44 !important;
        color: #cbc4c4c4;
    }
    
    .textarea::placeholder {
        color: #cbc4c4c4 !important;
    }
    
    .form-design-h input::placeholder {
        color: #cbc4c4c4 !important;
    }
    
    .form-design-h option {
        color: #000
    }
    
    .total_prices {
        background-color: #34608d8f;
        padding: 15px 23px;
        color: white;
        font-size: 24px;
        transition: 0.2s;
    }
    
    .border-btm {
        border-bottom-left-radius: 6px;
        border-bottom-right-radius: 6px;
    }
    /* ------------------footer ---------------*/
    
    footer {
        /* padding: 30px 0px 70px; */
        background-color: rgb(241, 239, 239);
        hr {
            border-top: 1px solid #ddd7d78f;
            margin: 0;
        }
        p {
            color: black !important;
        }
    }
    
    .h-line {
        border-bottom: 1px solid #99999954;
        padding: 10px 0px;
    }
    
    .h-line:before {
        content: "";
        position: absolute;
        width: 41px;
        height: 4px;
        background: #a67c00;
        left: 50px;
        bottom: -2px;
    }
    
    .ft-style {
        ul li {
            list-style: none;
            a {
                color: #000000f3;
            }
        }
    }
    
    .ft-style ul li a:hover {
        color: #f7d08a;
    }
    
    .ft-form {
        input {
            width: 100%;
            padding: 10px;
            border-radius: 10px;
        }
    }
    
    .copy {
        background-color: #eeeeee;
    }
/* Uniform gallery image and border fix for all tabs */
.project-box-hvr {
  display: block;
  position: relative;
}

.box-project {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1; /* keeps equal height and width */
  overflow: hidden;
  border: 4px solid #8c6023; /* adjust border thickness to match Pakistan tab */
  border-radius: 6px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.box-project img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* ensures equal scaling for all */
  display: block;
}

.box-project:hover {
  transform: scale(1.02);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}

.overlay-project {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box-project:hover .overlay-project {
  opacity: 1;
}

.overlay-project h3 {
  color: #fff7dc;
  font-size: 1rem;
  text-align: center;
  margin: 0;
}
/* --- Dropdown fixed position for Services menu --- */
.nav-item.dropdown {
  position: relative !important;
}

.nav-item.dropdown .dropdown-menu {
  display: none !important;
  position: absolute !important;
  top: 100% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin-top: 12px !important;
  z-index: 9999 !important;
  width: max-content;
  min-width: 620px; /* adjust as needed */
}

/* Show dropdown on hover */
.nav-item.dropdown:hover .dropdown-menu {
  display: block !important;
}

/* Optional styling (smooth fade) */
.nav-item.dropdown .dropdown-menu {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.nav-item.dropdown:hover .dropdown-menu,
.nav-item.dropdown.show .dropdown-menu {
  display: block !important;
  opacity: 1;
  visibility: visible;
}

/* BIM section images */
.bim-model-section img,
.img-fluid {
  border-radius: 8px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.bim-model-section img:hover,
.img-fluid:hover {
  transform: scale(1.03);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}