body {
            font-family: Arial, Helvetica, sans-serif;
            padding-top: 68px;
        }

        /* Navbar */

        .navbar {
            background: #fff;
            box-shadow: 0 5px 20px rgba(0, 0, 0, .08);
        }

        .mobile-logo img {
            width: 100%;
            height: 100%;
        }

        .navbar-brand img {
            width: 162px;
            height: 100%;
        }

        .navbar-brand {
            font-size: 28px;
            font-weight: 700;
            letter-spacing: 2px;
        }

        .nav-link {
            font-size: 16px;
            font-weight: 500;
            color: #222;
            transition: .3s;
        }

        .nav-link:hover {
            color: #000;
            padding-left: 8px;
        }

        .btn-dark {
            border-radius: 0;
            padding: 10px 25px;
        }

        /* Mobile Menu */

        .offcanvas {
            width: 320px;
        }

        .offcanvas-header {
            border-bottom: 1px solid #eee;
        }

        .offcanvas-body .nav-link {
            padding: 15px 0;
            font-size: 18px;
        }

        .navbar .dropdown:hover>.dropdown-menu {
            display: block;
        }

        .navbar-toggler {
            border: none;
        }

        .navbar-toggler:focus {
            box-shadow: none;
        }

        /* Desktop Dropdown */
        .dropdown-menu {
            margin-top: 0;
            border: none;
            border-radius: 0;
            min-width: 240px;
            padding: 10px 0;
            box-shadow: 0 10px 35px rgba(0, 0, 0, .08);
        }

        .dropdown-item {
            padding: 10px 22px;
            font-size: 15px;
            transition: .3s;
        }

        .dropdown-item:hover {
            background: #111;
            color: #fff;
            padding-left: 30px;
        }

        /* Show dropdown on hover (Desktop only) */
        @media (min-width:992px) {

            .navbar .dropdown:hover>.dropdown-menu {
                display: block;
                animation: fadeDown .25s ease;
            }

            .navbar .dropdown-toggle::after {
                vertical-align: middle;
                margin-left: 6px;
            }
        }

        @keyframes fadeDown {

            from {
                opacity: 0;
                transform: translateY(10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }

        }

        /* Mobile submenu */
        .offcanvas .collapse .nav-link {
            font-size: 16px;
            color: #666;
            padding-left: 12px;
        }

        .offcanvas .collapse .nav-link:hover {
            color: #000;
        }

        /* Hero */

        .hero {
            position: relative;
            min-height: 90vh;
            display: flex;
            align-items: center;
            overflow: hidden;

            background: url("../../assets/img/banner.png") center center/cover no-repeat;
        }

        /* White cloud/fog effect */
        .hero::before {
            content: "";
            position: absolute;
            top: -20%;
            left: -15%;
            width: 65%;
            height: 140%;
            background:
                radial-gradient(circle at 20% 50%,
                    rgba(255, 255, 255, 1) 0%,
                    rgba(255, 255, 255, .95) 25%,
                    rgba(255, 255, 255, .8) 45%,
                    rgba(255, 255, 255, .4) 65%,
                    rgba(255, 255, 255, 0) 100%);
            filter: blur(40px);
            z-index: 1;
        }

        /* Extra cloud */
        .hero::after {
            content: "";
            position: absolute;
            bottom: -80px;
            left: 10%;
            width: 500px;
            height: 220px;
            background: radial-gradient(circle,
                    rgba(255, 255, 255, .9) 10%,
                    rgba(255, 255, 255, .5) 60%,
                    transparent 100%);
            filter: blur(45px);
            z-index: 1;
        }

        .hero-content {
            position: relative;
            z-index: 2;
        }

        .hero h1 {
            font-size: 70px;
            font-weight: 300;
            line-height: 1;
            color: #111;
        }

        .hero p {
            max-width: 420px;
            margin: 25px 0;
            color: #666;
        }

        .btn-dark {
            padding: 14px 35px;
            border-radius: 0;
        }


        /* COUNTER */
        .stats-section {
            padding: 60px 0;
            border-top: 1px solid rgba(0, 0, 0, 0.08);
            border-bottom: 1px solid rgba(0, 0, 0, 0.08);
            background-color: #f5f5f5;
        }

        .stat-item {
            text-align: center;
        }

        .stat-number {
            font-size: 3.5rem;
            font-weight: 700;
            color: #121212;
            margin-bottom: 5px;
            font-family: var(--display-font);
        }

        .stat-number span {
            color: #b59469;
        }

        .stat-label {
            font-size: 0.8rem;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.15em;
            font-family: var(--display-font);
        }

        /* COUNTER CLOSE */



        .hero h1 {
            font-size: 60px;
            font-weight: 700;
            line-height: 1.1;
        }

        .hero p {
            margin: 30px 0;
            color: #666;
        }

        .hero img {
            width: 100%;
            border-radius: 8px;
        }


        /* services  */
        .services {
            padding: 100px 0;
            position: relative;
            /* background: url(assets/img/service-bg.png); */
        }

        .services::before {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            background: url(../../assets/img/service-bg.png);
            z-index: -1;
            opacity: 0.3;
        }

        .section-title {
            font-size: 50px;
            font-weight: 300;
            margin-bottom: 70px;
        }

        .section-title span {
            color: #b98b55;
        }

        .service-box {
            position: relative;
            background: #fff;
            padding: 50px 40px;
            border: 1px solid #e5e5e5;
            transition: .4s;
            overflow: hidden;
            height: 100%;
        }

        .service-box:hover {
            background: #111;
            color: #fff;
            transform: translateY(-10px);
        }

        .service-box::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 6px;
            height: 0;
            background: #b98b55;
            transition: .4s;
        }

        .service-box:hover::before {
            height: 100%;
        }

        .number {
            position: absolute;
            right: 20px;
            top: 15px;
            font-size: 90px;
            font-weight: 800;
            color: rgba(0, 0, 0, .05);
            line-height: 1;
        }

        .service-box:hover .number {
            color: rgba(255, 255, 255, .08);
        }

        .icon {
            width: 80px;
            height: 80px;
            border: 2px solid #b98b55;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 34px;
            color: #b98b55;
            margin-bottom: 35px;
            transition: .4s;
        }

        .service-box:hover .icon {
            background: #b98b55;
            color: #fff;
            transform: rotate(45deg);
        }

        .service-box:hover .icon i {
            transform: rotate(-45deg);
        }

        .icon i {
            transition: .4s;
        }

        h3 {
            margin-bottom: 20px;
            font-weight: 600;
        }

        p {
            color: #777;
            line-height: 1.8;
        }

        .service-box:hover p {
            color: #ddd;
        }

        .line {
            width: 60px;
            height: 2px;
            background: #b98b55;
            margin: 30px 0;
            transition: .4s;
        }

        .service-box:hover .line {
            width: 120px;
        }

        .read {
            text-decoration: none;
            color: inherit;
            font-weight: 600;
            letter-spacing: 1px;
        }

        .read i {
            transition: .3s;
        }

        .read:hover i {
            margin-left: 8px;
        }

        /* services  close*/
        /* lets connect */
        .lets-connect {
            background: #f5f5f5;
            padding: 29px 0;
        }

        .connect-btn .btn {
            /* background: red; */
            padding: 10px 26px;
            border: 1px solid #000;
        }

        .btn.strat-project:hover {
            background: #ffff;
            color: #000;
            transition: 0.5s;
        }

        .btn.strat-project {
            background: #000;
            color: #fff;
        }


        .btn.view-prot:hover {
            background: #000;
            color: #fff;
            transition: 0.5s;
        }

        .btn.view-prot {
            background: #fff;
            color: #000;
        }


        /* lets connect close */

        /* our protfolio */
        .protfolio-img img {
            width: 100%;
            height: 100%;
        }

        .protfolio-card {
            background: none;
        }

        .protfolio-card .protfolio-details {
            margin-top: 10px;
            text-transform: capitalize;
        }

        /* our protfolio close*/

        .whatsaap-section {
            position: fixed;
            bottom: 7%;
            right: 4%;
            width: 100%;
            max-width: 60px;
            z-index: 1;
        }

        .whatsaap-section a img {
            max-width: 100%;
        }

        /* footer */
        .footer-section {
            background: #111111;
            color: #bfbfbf;
        }

        .footer-logo img {
            max-width: 180px;
        }

        .footer-text {
            line-height: 30px;
            font-size: 15px;
        }

        .footer-section h5 {
            color: #fff;
            margin-bottom: 25px;
            font-weight: 600;
            position: relative;
        }

        .footer-section h5::after {
            content: '';
            width: 45px;
            height: 2px;
            background: #c8a97e;
            position: absolute;
            left: 0;
            bottom: -10px;
        }

        .footer-links {
            list-style: none;
            padding: 0;
            margin: 0;
        }

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

        .footer-links a {
            color: #bfbfbf;
            text-decoration: none;
            transition: .3s;
        }

        .footer-links a:hover {
            color: #c8a97e;
            padding-left: 6px;
        }

        .contact-item {
            display: flex;
            align-items: flex-start;
            margin-bottom: 18px;
        }

        .contact-item i {
            color: #c8a97e;
            margin-right: 15px;
            font-size: 20px;
        }

        .social-icons a {
            width: 42px;
            height: 42px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(255, 255, 255, .15);
            border-radius: 50%;
            margin-right: 10px;
            color: #fff;
            text-decoration: none;
            transition: .3s;
        }

        .social-icons a:hover {
            background: #c8a97e;
            color: #fff;
            border-color: #c8a97e;
            transform: translateY(-4px);
        }

        .footer-line {
            border-color: rgba(255, 255, 255, .1);
            margin: 45px 0 25px;
        }



        @media(max-width:767px) {
            .stat-label {
                font-size: 0.5rem;
            }

            .stat-number {
                font-size: 2.5rem;
            }

            .stats-section {
                padding: 36px 0;
            }

            .footer-section {
                text-align: center;
            }

            .footer-section h5::after {
                left: 50%;
                transform: translateX(-50%);
            }

            .contact-item {
                justify-content: center;
            }

            .social-icons {
                justify-content: center;
            }
        }

        @media(max-width:991px) {

            .hero {
                min-height: 700px;
                background-position: right center;
            }

            .hero::before {
                width: 100%;
                left: -30%;
                filter: blur(30px);
            }

            .hero {
                text-align: center;
                padding: 60px 0;
            }

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

            .hero img {
                margin-top: 40px;
            }

        }
    
    
    
    
    /*contact us page*/
    .page-header{
            background:linear-gradient(rgba(0,0,0,.65),rgba(0,0,0,.65)),
            url('https://images.unsplash.com/photo-1511818966892-d7d671e672a2?q=80&w=1600');
            background-size:cover;
            background-position:center;
            padding:110px 0;
            color:#fff;
        }

        .page-header h1{
            font-weight:700;
            font-size:55px;
        }

        .contact-card{
            background:#fff;
            border:none;
            border-radius:18px;
            padding:35px;
            transition:.35s;
            box-shadow:0 10px 30px rgba(0,0,0,.07);
            height:100%;
        }

        .contact-card:hover{
            transform:translateY(-8px);
            box-shadow:0 20px 40px rgba(0,0,0,.12);
        }

        .icon-box{
            width:70px;
            height:70px;
            border-radius:50%;
            background:#111;
            color:#fff;
            display:flex;
            align-items:center;
            justify-content:center;
            font-size:30px;
            margin-bottom:20px;
        }

        .contact-form{
            background:#fff;
            border-radius:20px;
            padding:45px;
            box-shadow:0 15px 35px rgba(0,0,0,.08);
        }

        .form-control{
            height:55px;
            border-radius:10px;
        }

        textarea.form-control{
            height:160px;
        }

        .btn-send{
            background:#111;
            color:#fff;
            padding:14px 35px;
            border-radius:50px;
            transition:.3s;
        }

        .btn-send:hover{
            background:#d6a354;
            color:#fff;
        }

        .map{
            border-radius:20px;
            overflow:hidden;
            box-shadow:0 15px 35px rgba(0,0,0,.08);
        }

        iframe{
            width:100%;
            height:500px;
            border:0;
        }

        .section-title{
            font-size:40px;
            font-weight:700;
        }

        .text-gold{
            color:#d6a354;
        }