/* ====== 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 {
        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;
    }


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

    .home__container {
        margin-top: 50px;
    }

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


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

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

    

    .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: 55px;
        height: 55px;
        background-color: var(--black-color);
        color: var(--white-color);
        border-radius: 50%;
        display: grid;
        place-items: center;
        font-size: 2.4rem;
        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);
    }

 .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;
    }

        /*=============== 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;
        }

         .home__data {
            padding-top: 50px;
        }
    }

     .show-menu {
        top: 0%;
    }


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

        .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;
        }

        .contact__data {
        grid-template-columns: 230px;
        justify-content: space-between;
        display: flex;
        row-gap: 1.5rem;
    }

       .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;
        }
    }


    
    /* For medium devices */
    @media screen and (min-width: 576px) {
        .footer__content {
            grid-template-columns: repeat(3, max-content);
        }
    }