@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');

:root {
    --white: #fff;
    --navy: #0c2f50;
}

* {
    box-sizing: border-box;
    margin: 0;
    font-family: "Figtree", sans-serif;
}

h1 {
    font-size: 40px;
    padding: 25px 10px;
}

h2 {
    font-size: 40px;
    padding: 25px 10px;
}

h3 {
    font-size: 30px;
    padding: 20px;
}

body {
    font-size: clamp(1em, 3vw, 22px);
}

p {
    padding: 20px;
}

section {
    padding: 20px;
    margin: 0;
}

#container {
    max-width: 1400px;
    margin: 0 auto;
    overflow-x: hidden;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translate(-150px, 0px);
    }

    100% {
        opacity: 1;
        transform: translate(0px, 0px);
    }
}

#top {
    width: 100%;
    display: grid;

    & h1 {
        padding: 25px 25px;
        animation: fadeIn 1s;
        align-content: center;
    }

    & aside {
        color: #fff;
        padding: 25px 25px;
        animation: fadeIn 1.5s;
        font-size: 30px;
        padding: 20px;
    }

    & #main-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
}

#expertise {
    align-content: center;
    display: grid;
    & h2 {
        grid-area: heading;
        padding: 0;
        animation: fadeIn 1.5s;
    }

    & p {
        grid-area: text;
        padding: 10%;
    }
}

#windclean {
    height: 400px;
    width: 100%;
    object-fit: cover;
    object-position: center 27%;
    margin: 0;
}


#logo-small {
    grid-area: 1 / 1 / 1 / 1;
    width: 150px;
    height: 150px;
}

.headingbluebg {
    background-color: #0c2f50;
    color: white;
}

.whtbg {
    color: var(--navy);
    background-color: var(--white);
}

.nvybg {
    color: var(--white);
    background-color: var(--navy);
}

.smallcircleimg {
    height: 175px;
    width: 175px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
}

#services {
    display: grid;

    row-gap: 15px;
    justify-content: space-around;
    justify-items: center;
    align-items: center;

}

#contact-us {
    background-image: url("../images/contact-us-bg.jpg");
    background-position: right 75%;
    height: 500px;
}

.mediumimg {
    height: 300px;
    width: auto;
}

@media (min-width: 500px) {
    #top {
        grid-template-columns: 150px 1.5fr 2fr;
        grid-template-rows: 150px 1fr 1fr 1fr 1fr;

        & h1 {
            grid-area: 3 / 2 / span 1 / span 1;
            z-index: 2;
            min-width: 400px;
        }

        & aside {
            grid-area: 4 / 2 / span 1 / span 1;
            z-index: 2;
        }

        & #main-img {
            grid-area: 1 / 2 / span 5 / span 2;
            z-index: 1;
        }
    }
    #expertise {
        grid-template-rows: repeat(3, 1fr);
        grid-template-columns: 0.5fr 1fr 0.5fr 1fr 1fr 1fr;
        grid-template-areas:
            ". . . text text text"
            ". heading . text text text"
            ". . . text text text";
    }

    #services {
        grid-template-columns: 30% 65%;

        & h2 {
            grid-column: 1 / span 2;
            justify-self: start;
        }

        & p {
            grid-column: 1 / span 2;
            justify-self: start;
        }

        & img {
            grid-column: 1;
        }

        & article {
            grid-column: 2;
        }
    }
    #about-us {
        display: grid;
        grid-template-columns: 55% 40%;
        grid-template-rows: auto;
        & h2 {
            grid-column: 1 / span 2;
        }
        & img {
            grid-column: 2 / 2;
            grid-row-end: span 3;
            justify-self: center;
        }
        & p {
            grid-column: 1 / 1;
        }
    }
}

@media (max-width: 499px) {
    #top {
        grid-template-columns: 98%;
        grid-template-rows: 150px 100px 1fr 1fr 1fr;
        & #logo-small {
            z-index: 2;
            grid-area: 1 / 1 / 1 / 1;
            justify-self: center;
        }
        & h1 {
            grid-area: 3 / 1 / span 1 / span 1;
            z-index: 2;
        }

        & aside {
            grid-area: 4 / 1 / span 1 / span 1;
            z-index: 2;
            background-color: rgba(0, 0, 0, 0.6);
        }

        & #main-img {
            grid-area: 1 / 1 / span 5 / span 1;
            z-index: 1;
        }
    }
    #expertise {
        grid-template-rows: auto;
        grid-template-columns: 98%;
        grid-template-areas:
            "heading"
            "text";
    }

    #services {
        grid-template-columns: 95%;

        & p {
            grid-column: 1 / span 1;
            justify-self: start;
        }

        & img {
            grid-column: 1;
        }

        & article {
            grid-column: 1;
        }
    }
    #about-us {
        justify-items: center;
    }
}