/* ====== GOOGLE FONTS ====== */
    @import url("https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600&family=Montserrat:wght@100..900&display=swap");

    /*=============== VARIABLES CSS ===============*/

    :root {
        --header-height: 3.5rem;

        /*========== Colors ==========*/
        --title-color: hsl(220, 8%, 10%);
        --text-color: hsl(220, 8%, 40%);
        --white-color: hsl(0, 0%, 100%);
        --black-color: hsl(220, 8%, 6%);
        --body-color: hsl(240, 95%, 29%);

        /*========== Font and typography ==========*/
        --body-font: "Montserrat", sans-serif;

        /*========== Font weight ==========*/
        --font-regular: 400;
        --font-medium: 500;
        --font-semi-bold: 600;
        --font-bold: 700;

        /*========== z index ==========*/
        --z-tooltip: 10;
        --z-fixed: 100;
    }

    /*=============== BASE ===============*/
    * {
        margin: 0%;
        padding: 0%;
        box-sizing: border-box;
    }

    html {
        scroll-behavior: smooth;
    }

    input,
    button,
    body {
        font-family: var(--body-font);
        font-size: var(--normal-font-size);
    }

    body {
        /* background-color: var(--body-color); */
        color: var(--text-color);
        transition: background-color .4s;
    }


    button {
        outline: none;
        border: none;
    }

    h1,
    h2,
    h3,
    h4 {
        font-weight: var(--font-semi-bold);
    }

    ul {
        list-style: none;
    }

    a {
        text-decoration: none;
    }

    img {
        display: block;
        max-width: 100%;
        height: auto;
    }

    .container {
        max-width: 1120px;
        margin-inline: 1.5rem;
    }

    .grid {
        display: grid;
        gap: 1.5rem;
    }

    .title {
        font-size: 900;
        font-size: 2rem;
    }

    .main {
        overflow: hidden;
    }


    .contac {
        display: flex;
        text-align: center;
        justify-content: center;
        row-gap: 2rem;
        padding-top: 2rem;
        padding-bottom: 2rem;
        background-color: var(--body-color);
        color: var(--white-color);
    }

    .contac span {
        font-size: 16px;
        margin-right: 10px;
        margin-left: 10px;
    }



    /*=============== HEADER & NAV ===============*/
    .header {
        position: fixed;
        width: 100%;
        top: 0;
        left: 0%;
        z-index: var(--z-fixed);
        transition: background-color .4s, box-shadow .4s;
        color: blue;
        background-color: rgb(4, 4, 103);
    }

    .nav {
        position: relative;
        height: var(--header-height);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .nav__logo {
        display: flex;
        align-items: center;
        column-gap: .25rem;
        color: var(--white-color);
        font-weight: var(--font-semi-bold);
        transition: color .4s;
    }

    .nav__logo img {
        transition: filter .4s;
    }

    .nav__toggle,
    .nav__close,
    .nav__theme {
        display: inline-flex;
        font-size: 1.5rem;
        cursor: pointer;
        color: var(--white-color);
        transition: color .4s;
    }

    .nav__button {
        display: flex;
        align-items: center;
        column-gap: 1rem;
    }


    .nav__list {
        text-align: center;
        display: flex;
        flex-direction: column;
        row-gap: 2rem;
    }

    .nav__link {
        position: relative;
        font-weight: var(--font-semi-bold);
        color: var(--title-color);
        transition: color .4s;
    }

    /* .nav__link:hover {
        color: var(--body-color);
    } */

    .nav__close {
        color: black;
        position: absolute;
        top: 1rem;
        right: 1.5rem;
    }



    /*=============== HOME ===============*/
    .home {
        position: relative;
    }

    .home__container {
        margin-top: 50px;
    }

    .hoem {
        background-color: rgb(4, 4, 103);
        color: var(--white-color);
        height: 100vh;
    }


    .home__img img {
        height: 500px;
    }

    .bg {
        background-color: rgb(7, 7, 128);
        color: var(--white-color);
        height: 350px;
    }


    .give__space {
        margin-top: 80px;
    }

    .connect p {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .connect__box {
        background-color: var(--white-color);
        margin-top: 10px;
        color: var(--black-color);
        font-size: 15px;
        padding-top: 10px;
        height: 230px;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .contae {
        padding-top: 20px;
        height: 200px;
    }

    .connect__box .conn {
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .connect__box h4 {
        margin-top: 30px;
        font-size: 18px;
    }

    .connect__box p {
        font-size: 14px;
    }

    .bg__dark {
        background-color: var(--body-color);
        color: var(--white-color);
        justify-content: center;
        align-items: center;
        text-align: center;
        height: 250px;
    }


    .contactbox__data {
        align-items: center;
        justify-content: center;
        display: flexbox;
    }


    .contactbox__data h1 {
        margin-top: 30px;
    }

    .upper__line {
        width: 200px;
        height: 10px;
        border: 2px solid red;
        justify-content: center;
        align-items: center;
        display: flex;
        text-align: center;
    }

    .contactbox {
        color: var(--white-color);
        /* width: 360px; */
        padding: 20px;
        font-size: 20px;
        font-size: 500;
        /* height: 20px; */
        background-color: red;
        border: 3px solid orange;
        text-decoration: none;
        margin-top: 30px;
    }

    .other__services {
        grid-template-columns: repeat(3, max-content);
        gap: 10rem;
    }

    .row1 span {
        padding-right: 180px;
    }

    .row2 span {
        margin-right: 167px;
    }

    .move {
        padding-right: 30px;
    }

    .row3 span {
        padding-right: 170px;

    }

    .move2 {
        padding-right: 30px;
    }

    .row4 span {
        margin-right: 167px;
    }

    .conn__data .conn__img {
        display: flex;
        align-items: center;
        width: 80px;
        margin-left: 70px;
        /* height: 300px; */
        margin-block: -1rem;
    }

    .conn {
        font-size: 900;
    }

    .conn__data {
        align-items: center;
        justify-content: center;
    }

    .contact__card {
        border: 2px solid black;
        width: 280px;
        height: 200px;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding-top: 30px;
        font-size: 20px;
    }

    /*=============== CONTACT ===============*/
    .contact__container {
        row-gap: 3rem;
        padding-block: 1.5rem 3rem;
    }

    .contact__img {
        width: 320px;
        justify-self: center;
    }

    .contact__data {
        grid-template-columns: 230px;
        justify-content: center;
        row-gap: 1.5rem;
    }

    .contact__card {
        bottom: var(--container-color);
        border: 2px solid gray;
        padding: 1.5rem 2rem;
        text-align: center;
        transition: border-color .4s;
    }

    .contact__card:hover {
        border-color: var(--body-color);
    }

    .contact__icon {
        width: 48px;
        height: 48px;
        background-color: var(--black-color);
        color: var(--white-color);
        border-radius: 50%;
        display: grid;
        place-items: center;
        font-size: 2rem;
        margin: 0 auto 1.5rem;
    }

    .contact__title {
        font-size: var(--h2-font-size);
        margin-bottom: .5rem;
    }

    .contact__info {
        font-style: normal;
    }

    .contact__social {
        display: flex;
        justify-content: center;
        column-gap: 1rem;
    }

    .contact__social-link {
        font-size: 1.5rem;
        color: var(--body-color);
        text-decoration: none;
        transition: transform .4s;
    }

    .contact__social-link:hover {
        transform: translateY(-.25rem);
    }


    /*=============== FOOTER ===============*/
    .footer {
        background-color: var(--black-color);
        padding-block: 4rem 2rem;
    }

    .footer__container {
        row-gap: 3rem;
    }

    .footer__logo {
        display: inline-flex;
        align-items: center;
        column-gap: .25rem;
        justify-self: flex-start;
        color: var(--white-color);
        font-size: var(--h3-font-size);
        font-weight: var(--font-semi-bold);
    }

    .footer__content {
        grid-template-columns: repeat(2, max-content);
        gap: 3rem;
    }

    .footer__title {
        color: var(--white-color);
        font-size: var(--h3-font-size);
        margin-bottom: 1rem;
    }

    .footer__links {
        display: grid;
        row-gap: .75rem;
    }

    .footer__link {
        color: var(--white-color);
    }

    .footer__socials {
        display: flex;
        column-gap: 1rem;
    }

    .footer__links a {
        text-decoration: none;
    }

    .footer__socials a {
        text-decoration: none;
    }

    .footer__social-link {
        color: var(--white-color);
        font-size: 1.5rem;
        transition: transform .4s;
    }

    .footer__social-link:hover {
        transform: translateY(-.25rem);
    }

    .footer__copy {
        display: block;
        margin-top: 4rem;
        color: var(--white-color);
        text-align: center;
        font-size: var(--small-font-size);
    }


    /* Navigation for mobile devices */
    @media screen and (max-width: 1150px) {
        .nav__menu {
            position: fixed;
            top: -120%;
            left: 0%;
            background-color: var(--white-color);
            width: 100%;
            padding-block: 4rem;
            box-shadow: 0 8px 16px hsla(0, 0%, 0%, .1);
            transition: top .4s;
        }

        .home__img img {
            border-radius: 50px;
            width: 480px;
            padding-top: 50px;
            object-fit: cover;
            margin-bottom: 30px;
            height: 400px;
        }

        .nav__logo {
            padding-left: 20px;
        }

        .connect__box {
            margin: 0%;
            padding: 0;
        }


        .connect__box {
            width: 300px;
            justify-self: center;
            align-items: center;
            display: flex;
            margin-left: 10px;
        }

        .about__info {
            margin-top: 100px;
        }

        .upper__line {
            margin-left: 60px;
            margin-top: 80px;
            background-color: rgb(95, 7, 7);
            border: none;
        }

        .home__data {
            padding-top: 50px;
        }

        input {
            padding-left: 10px;
            height: 50px;
        }


        .Name input {
            width: 295px;
        }

        .box__shadow .company input {
            width: 295px;
        }

        .message textarea {
            width: 295px;
            height: 180px;
            margin-bottom: 20px;
            padding-left: 10px;
        }

        .conn__data .conn__img {
            display: flex;
            align-items: center;
            width: 80px;
            margin-left: 110px;
            /* height: 300px; */
            margin-block: -1rem;
        }

        .contae {
            margin-bottom: 40px;
        }

        .bg {
            height: 65rem;
        }

        .contact__card {
            margin-left: -16px;
        }
    }


    .show-menu {
        top: 0%;
    }


    /* Large screen */

    @media screen and (min-width: 1150px) {
        .container {
            margin-inline: auto;
        }

        .section {
            padding-bottom: 7rem 2rem;
        }

        .section__title {
            margin-bottom: 4rem;
        }

        .nav {
            height: calc(var(--header-height) + 1rem);
            column-gap: 4rem;
        }

        .nav__toggle,
        .nav__close {
            display: none;
        }

        .nav__menu {
            margin-left: auto;
        }

        .nav__list {
            flex-direction: row;
            column-gap: 4rem;
            margin-right: 100px;
        }

        .nav__link {
            color: var(--white-color);
        }

        .home__data {
            width: 600px;
        }

        .home__data p {
            width: 500px;
        }

        .home__container {
            grid-template-columns: repeat(2, max-content);
        }

        .home__data {
            padding-top: 160px;
        }

        .home__img img {
            border-radius: 50px;
            width: 480px;
            padding-top: 100px;
            object-fit: cover;
            margin-bottom: 30px;
        }

        .about__img img {
            padding-top: 50px;
            height: 400px;
            object-position: center;
            object-fit: cover;
        }

        .content {
            grid-template-columns: repeat(4, max-content);
        }

        .connect__box .conn__data {
            width: 250px;
            padding-left: 20px;
        }

        .contae {
            padding-top: 50px;
            height: 280px;
        }

        .upper__line {
            margin-left: 430px;
            margin-top: 80px;
            background-color: rgb(95, 7, 7);
            border: none;
        }


        input {
            padding-left: 10px;
            height: 55px;
        }

        .Name {
            width: 620px;
        }

        .Name input {
            margin-right: 10px;
            width: 295px;
        }

        .box__shadow .company input {
            width: 604px;
        }

        .message textarea {
            width: 604px;
            height: 180px;
            margin-bottom: 20px;
            padding-left: 10px;
        }



        .contact :is(.section__title, .section__subtitle) {
            text-align: initial;
        }

        .contact__container {
            grid-template-columns: 530px 515px;
            justify-content: initial;
            align-items: flex-start;
            column-gap: 3.5rem;
            padding-block: 3.5rem 4rem;
        }

        .contact__img {
            width: 530px;
        }

        .contact__data {
            gap: 2rem;
        }

        .contact__card {
            border-width: 3px;
            /* margin: 10px; */
        }

        .contact__title {
            font-size: var(--h3-font-size);
        }

        .footer {
            padding-top: 4.5rem;
        }

        .footer__container {
            grid-template-columns: repeat(2, max-content);
            justify-content: space-between;
            align-items: center;
            display: flex;
        }

        .footer__logo {
            justify-self: flex-start;
        }

        .footer__content {
            column-gap: 4.5rem;
        }

        .footer__title {
            margin-bottom: 1.5rem;
        }

        .scrollup {
            right: 3rem;
        }

        .footer__links {
            flex-direction: row;
        }


    }


    @media screen and (min-width: 760px) {

        .footer__content {
            grid-template-columns: repeat(4, max-content);
        }

    }


    /* For medium devices */
    @media screen and (min-width: 576px) {

        .home__swiper {
            max-width: 400px;
        }

        .testimonial__img {
            width: 400px;
        }

        .testimonial__swiper {
            max-width: 400px;
        }

        .join__container {
            grid-template-columns: 380px;
            justify-content: center;
        }

        .join__img {
            width: 380px;
        }

        .footer__content {
            grid-template-columns: repeat(3, max-content);
        }
    }