@import url(https://db.onlinewebfonts.com/c/0b5daaee28ed20474e5b2f204add18f0?family=Narkisim);
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zilla+Slab:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display+SC:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&display=swap');

/* font-family: "Zilla Slab", serif; */
/* font-family: "Playfair Display SC", serif; */

* {
    transition: 0.5s !important;
    scroll-behavior: smooth;
    font-family: 'Inter', sans-serif;
}

#scrollTopBtn {
    display: none;
    /* Hidden by default */
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 100;
    font-size: 24px;
    border: none;
    outline: none;
    background-color: #009CFF;
    /* Henimal Tech blue */
    color: white;
    cursor: pointer;
    padding: 14px 16px;
    border-radius: 50%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    transition: background-color 0.5s;
}

#scrollTopBtn:hover {
    background-color: #FFF;
    color: #009CFF;
}



/* ========== NAVBAR CSS ================ */

.navbar {
    background-color: #2c2c2c;
}

.mian_navbar {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
}

.mian_navbar.scrolled {
    .navbar {
        background-color: transparent;
        box-shadow: inset 0px 70px 10px 0px #1a1a1a;
    }
}

.navbar-brand {
    font-weight: lighter;
    font-size: 1.5rem;
    color: #FFF !important;
    margin-top: 5px;
}

.navbar-toggler {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.nav-link {
    color: white !important;
    font-family: 'Inter', sans-serif;
    text-transform: uppercase;
    font-size: 0.8rem;
    /* font-family: "Zilla Slab", serif; */
}

.nav-link:focus,
.nav-link:hover {
    color: #009CFF !important;
}

.nav-item {
    position: relative;
    display: inline-block;
    /* padding: 8px 12px; */
}

.nav-item::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background: #009CFF;
    transition: width 0.4s ease-in-out;
}

.nav-item:hover::after {
    width: 100%;
}

.navbar-nav {
    align-items: center;
}

@media (max-width: 1000px) {
    .nav-item::after {
        display: none;
    }

    .navbar-nav {
        align-items: start;
    }

    .mian_navbar.scrolled {
        .navbar {
            background-color: transparent;
            box-shadow: inset 200px 250px 100px 0px #1a1a1a;
        }
    }
}

.dropdown-menu {
    animation: zoomIn 0.5s ease-in;
}

@keyframes zoomIn {
    from {
        transform: scale(0);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }

}

.dropdown-item {
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
}

.dropdown-item:hover {
    background-color: #717171;
    color: white !important;
}

.gap_5 {
    gap: 5px !important;
}

@media screen and (max-width: 800px) {
    .navbar-brand {
        font-size: 1rem;
    }

    .gap_5 {
        gap: 20px !important;
    }
}



/* ================= HERO SECTION CSS ================ */

.hero_section {
    padding: 100px 0px;
    background: linear-gradient(180deg, #494949 0%, #000000 80%);
}

@media screen and (max-width: 800px) {
    .hero_section {
        padding: 50px 0px;
    }
}

.sec1_img {
    width: 100%;
    filter: drop-shadow(-40px 40px 50px #000000);
}

.hero_text {
    padding: 100px 25px;
}

@media screen and (max-width: 800px) {
    .hero_text {
        padding: 25px 0px 0px 0px;
        text-align: center;
    }

    .sec1_img {
        width: 80%;
        filter: drop-shadow(-40px 40px 50px #000000);
    }
}

.upper_txt {
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    letter-spacing: 2px;
    color: #EEEEEE;
    font-weight: 500;
    text-transform: uppercase;
    opacity: 0.7;
}

.tagline {
    font-size: 36px;
    font-family: "Zilla Slab", serif;
    border-right: 2px solid black;
    white-space: nowrap;
    overflow: hidden;
    width: 0;
    animation: typing 8s steps(40, end) infinite, blink 0.7s step-end infinite;
}

.desc {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    color: #717171;
    margin-top: 30px;
}

@keyframes typing {
    0% {
        width: 0;
    }

    40% {
        width: 100%;
    }

    60% {
        width: 100%;
    }

    100% {
        width: 0;
    }
}

@keyframes blink {

    from,
    to {
        border-color: transparent;
    }

    50% {
        border-color: #ffffff;
    }
}

@media screen and (max-width: 800px) {
    .tagline {
        font-size: 22px;
    }

    .desc {
        font-size: 14px;
    }

    .upper_txt {
        font-size: 12px;
        letter-spacing: 1px;
    }

    @keyframes typing {
        0% {
            width: 0;
        }

        40% {
            width: 100%;
        }

        60% {
            width: 100%;
        }

        100% {
            width: 0;
        }
    }
}



/* ===================== section 2 About Css ======================= */
.about_section {
    .sec2_heading {
        font-family: "inter", serif;
        font-size: 2rem;
        font-weight: 900;
        color: #2C2C2C;
        text-align: center;
        margin-top: 50px;
        text-transform: uppercase;
    }

    .sec2_dec {
        font-family: 'Inter', sans-serif;
        font-size: 1rem;
        color: #717171;
        text-align: center;
        margin-bottom: 30px;
    }

    @media screen and (max-width:800px) {
        .sec2_heading {
            font-size: 1.5rem;
        }

        .sec2_dec {
            font-size: 0.8rem;
            margin-bottom: 25px;
        }
    }

    .about_img {
        width: 100%;
        padding: 10px 20px 20px 20px;
    }

    .inner_right {
        padding: 10px;

        h1 {
            font-family: "Zilla Slab", serif;
            margin-bottom: 20px;
            font-weight: 700;
        }

        h4 {
            font-family: 'Inter', sans-serif;
            font-size: 1.5rem;
            font-weight: 600;
        }

        p {
            font-family: 'Inter', sans-serif;
            font-size: 0.9rem;
            color: #717171;
        }

        li {
            font-family: 'Inter', sans-serif;
            font-size: 0.9rem;
            color: #717171;
        }

        .btn {
            border: 1px solid #d3d3d3;
            font-size: 1rem;
        }

    }

    @media screen and (max-width:800px) {
        .inner_right {
            padding: 10px 0px 0px 0px;

            h4 {
                font-size: 1.2rem;
            }

            p {
                font-size: 0.8rem;
            }

            li {
                font-size: 0.8rem;
            }
        }

        .btn_m {
            display: flex;
            justify-content: center;
        }
    }

}


/* ===================== section 3 Services Css ======================= */
.services_section {

    .sec3_heading {
        font-family: "inter", serif;
        font-size: 2rem;
        font-weight: 900;
        color: #2C2C2C;
        text-align: center;
        /* margin-bottom: 10px; */
        margin-top: 50px;
        text-transform: uppercase;
    }

    .sec3_dec {
        font-family: 'Inter', sans-serif;
        font-size: 1rem;
        color: #717171;
        text-align: center;
        margin-bottom: 30px;
    }

    @media screen and (max-width:800px) {
        .sec3_heading {
            font-size: 1.5rem;
        }

        .sec3_dec {
            font-size: 0.8rem;
            margin-bottom: 25px;
        }
    }



    .inner_card {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 20px;
    }

    .card {
        text-align: center;
        padding: 20px;
        width: 24rem;
        height: 14rem;
        border-radius: 14px !important;
        border: 1px solid #dfdfdf;
        background: transparent;

        i {
            font-size: 40px;
        }

        h3 {
            font-family: "Zilla Slab", serif;
            font-size: 1.5rem;
            margin-top: 15px;
            margin-bottom: 10px;
        }

        p {
            font-family: 'Inter', sans-serif;
            font-size: 1rem;
            color: #717171;
        }
    }

    @media screen and (max-width:1024px) {
        .card {
            width: 100%;
            height: auto;
        }
    }

    @media screen and (max-width:800px) {
        .card {
            width: 24rem;
            height: 12rem;

            i {
                font-size: 34px;
            }

            h3 {
                font-family: "Zilla Slab", serif;
                font-size: 1.3rem;
                margin-top: 15px;
                margin-bottom: 10px;
            }

            p {
                font-family: 'Inter', sans-serif;
                font-size: 0.9rem;
                color: #717171;
            }
        }

    }

    .card:hover {
        box-shadow: 0px 10px 20px 0px #d4d4d4;
        /* transform: translateY(-5px); */
        border: transparent;
        /* background: linear-gradient(0deg, #ffffff, #f5f5f5); */
    }

}


/* ====================== section 4 our workflow css ========================= */
.workflow_section {

    .sec4_heading {
        font-family: "inter", serif;
        font-size: 2rem;
        font-weight: 900;
        color: #2C2C2C;
        text-align: center;
        margin-top: 50px;
        text-transform: uppercase;
    }

    .sec4_dec {
        font-family: 'Inter', sans-serif;
        font-size: 1rem;
        color: #717171;
        text-align: center;
        margin-bottom: 30px;
    }

    @media screen and (max-width:800px) {
        .sec4_heading {
            font-size: 1.5rem;
        }

        .sec4_dec {
            font-size: 0.8rem;
            margin-bottom: 0px;
        }
    }

    .workflow_img {
        border-radius: 50%;
        box-shadow: 0px 0px 0px 10px #2C2C2C;
        width: 75%;
    }

    .work_title {
        font-family: "Zilla Slab", serif;
        font-size: 1rem;
        margin-top: 15px;
        margin-bottom: 10px;
        text-align: start;
    }

    .work_desc {
        font-family: 'Inter', sans-serif;
        font-size: 0.8rem;
        color: #717171;
        text-align: start;
    }

    .icon_size {
        font-size: 2rem;
        color: #717171;
        position: absolute;
        right: 0;
    }

    .mt_5 {
        margin-top: 100px;
    }

    @media screen and (max-width:1024px) {

        .m_position {
            display: flex;
            justify-content: center;
        }

        .workflow_img {
            border-radius: 50%;
            /* box-shadow: 0px 0px 7px 5px #009CFF; */
            box-shadow: 0px 0px 0px 10px #2C2C2C;
            width: 50%;
        }

        .work_title {
            font-family: "Zilla Slab", serif;
            font-size: 1rem;
            margin-top: 15px;
            margin-bottom: 10px;
            text-align: center;
        }

        .work_desc {
            font-family: 'Inter', sans-serif;
            font-size: 0.8rem;
            color: #717171;
            text-align: center;
            margin-bottom: 30px;
        }

        .icon_size {
            display: none;
        }

        .mt_5 {
            margin-top: 0;
        }
    }
}




/* ========================= Section 5 Counter css ===========================*/
.counter_sec5 {
    background-color: #202020;

    .inner_counter {
        padding: 50px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
    }

    .m_size {
        h2 {
            font-size: 1.5rem;
        }

        h5 {
            font-size: 1.2rem;
        }
    }

    @media screen and (max-width:800px) {
        .m_size {
            margin-top: 20px;

            h2 {
                font-size: 1rem;
            }

            h5 {
                font-size: 1rem;
            }

        }

        .inner_counter {
            padding: 20px 10px;
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            align-items: center;
        }

        @media screen and (max-width:800px) {
            .inner_counter {
                padding: 20px 10px;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                align-items: center;
            }
        }
    }
}


/* ============================ Section 6 Our work =========================*/
.ourWork_sec6 {
    .sec6_heading {
        font-family: "inter", serif;
        font-size: 2rem;
        font-weight: 900;
        color: #2C2C2C;
        text-align: center;
        margin-top: 50px;
        text-transform: uppercase;
    }

    .sec6_dec {
        font-family: 'Inter', sans-serif;
        font-size: 1rem;
        color: #717171;
        text-align: center;
        margin-bottom: 30px;
    }

    @media screen and (max-width:800px) {
        .sec6_heading {
            font-size: 1.5rem;
        }

        .sec6_dec {
            font-size: 0.8rem;
            margin-bottom: 20px;
        }
    }

    .workScroll_main {

        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        gap: 10px;

        h3 {
            font-size: 1.5rem;
            color: #2C2C2C;
            font-family: "Zilla Slab", serif;
            width: 50%;
        }

        p {
            color: #717171;
            font-size: 1rem;
        }

        .inner_card {
            border: 1px solid #dddddd;
            padding: 20px;
            border-radius: 20px;
            height: 200px;
            width: 15%;

            img {
                display: none;
            }
        }

        .inner_card:hover {
            width: 50%;
            height: 450px;
            box-shadow: 0px 20px 10px #717171;

            img {
                display: block;
            }
        }

    }

    @media screen and (max-width:800px) {
        .workScroll_main {
            flex-direction: column;

            h3 {
                font-size: 1.2rem;
            }

            p {
                font-size: 0.8rem;
            }


            .inner_card {
                border: 1px solid #2C2C2C;
                padding: 20px;
                border-radius: 20px;
                height: 100px;
                width: 100%;
            }

            .inner_card:hover {
                transition: 0.4s !important;
                width: 100%;
                height: auto;
                box-shadow: none;
            }
        }
    }
}


/* ========================= section 7 Testimonial =================================== */
.Testimonial_sec7 {
    .sec7_heading {
        font-family: "inter", serif;
        font-size: 2rem;
        font-weight: 900;
        color: #2C2C2C;
        text-align: center;
        margin-top: 50px;
        text-transform: uppercase;
    }

    .sec7_dec {
        font-family: 'Inter', sans-serif;
        font-size: 1rem;
        color: #717171;
        text-align: center;
        margin-bottom: 30px;
        letter-spacing: 2px;
    }

    @media screen and (max-width:800px) {
        .sec7_heading {
            font-size: 1.5rem;
        }

        .sec7_dec {
            font-size: 0.8rem;
            margin-bottom: 20px;
        }
    }

    .arrow_img {
        font-size: 44px;
        position: absolute;
        right: 5%;
        top: 10%;
    }

    .card {
        height: 250px;
        overflow: hidden;
    }

    .w_m {
        width: 75%;
    }

    .date_time {
        font-size: 0.7rem;
        display: flex;
        flex-direction: column;
    }

    .card-title {
        font-family: "Zilla Slab", serif;
    }

    .card-text {
        font-family: 'Inter', sans-serif;
    }



    @media screen and (max-width:800px) {
        .arrow_img {
            display: none;
        }

        .card {
            height: 450px;
            overflow: hidden;
        }

        .w_m {
            width: 100%;
        }

        .carousel-control-prev {
            display: none;
        }

        .carousel-control-next {
            display: none;
        }

        .date_time {
            font-size: 0.8rem;
            display: flex;
            flex-direction: row;
            gap: 10px;
        }
    }


}


/* ======================== section 8 get in touch ==================================== */
.Getintouch_sec8 {
    /* background: #2C2C2C; */
    background: linear-gradient(180deg, #000 20%, #1d1d1d 80%);
    padding: 30px 0px 20px 0px;

    .sec8_heading {
        /* font-family: "inter", serif; */
        font-family: "Zilla Slab", serif;
        font-size: 1.6rem;
        font-weight: 900;
        color: #ffffff;
        text-align: start;
        text-transform: uppercase;
    }

    .sec8_dec {
        font-family: 'Inter', sans-serif;
        font-size: 0.8rem;
        color: #717171;
        text-align: start;
        letter-spacing: 5px;
    }

    .btn {
        border: 1px solid #FFF;
        font-size: 1rem;
        color: #FFF;
    }

    .btn:hover {
        transform: scale(1.1);
        color: white !important;
    }

    @media screen and (max-width:800px) {
        .sec8_heading {
            font-size: 1.4rem;
        }

        .sec8_dec {
            font-size: 0.6rem;
            letter-spacing: 1.5px;
        }

        .btn_m {
            display: flex;
            justify-content: center;
        }
    }

}


/* ========================= Section 9 Footer ============================== */
.footer {
    padding: 20px;

    .footer_head {
        text-decoration: underline;
        font-family: "Zilla Slab", serif;
    }

    li {
        list-style: none;
        color: #dadada;
        text-decoration: none;
        margin-left: -30px;
        font-family: 'Inter', sans-serif;
        font-weight: 200;
        line-height: 30px;

        a {
            color: #dadada;
            text-decoration: none;
            font-family: 'Inter', sans-serif;
            font-weight: 200;
            line-height: 30px;
        }

        a:hover {
            color: #009CFF;
        }
    }

}


/* 5. Blog or News (Pending) */