@import "compass/css3";

/*this code helped to make all sub div within the main div*/
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.main-container {
    width: 100vw;
}

.header {
    display: flex;
    flex-direction: row;
    background-color: rgba(62, 191, 255, 255);
    justify-content: space-between;
}

.topnav {
    overflow: hidden;
}

.topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    text-transform: uppercase;
}

.topnav a:hover {
    background-color: #f9bf00;
}

.topnav .icon {
    display: none;
}


.logo {
    background-image: url("../images/logo/logo.svg");
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    width: 20%;
}

.header-image {
    /* border: 5px solid rgb(0, 255, 4); */
    background-image: url('../images/desktop/image-header.jpg');
    background-size: cover;
    background-position: center;
    height: 80vh;
}

.header-title {
    text-align: center;
    padding-top: 6%;
}


/*
------------------------------------
BOUNCING ARROW
------------------------------------
 */

.arrow {
    white-space: nowrap;
    color: #a5a2a2;
    position: fixed;
    right: 0;
    bottom: 60px;
    left: 0;
    margin: auto;
    width: 40px;
    height: 40px;
    transform: translateY(0);
    -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 750ms ease-in-out;
    -ms-transition: all 750ms ease-in-out;
    -o-transition: all 750ms ease-in-out;
    transition: all 750ms ease-in-out;
}

.lift {
    transform: translateY(19px);
}


/*
------------------------------------
SERVICE GRID
------------------------------------
 */
.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, 1fr);
    gap: 0px;
}

.item {
    background-color: #ddd;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    /* Make the container a reference for absolutely positioned elements */
}

.item img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.item h2 {
    margin-bottom: 1em;
}

.item p {
    margin: 1em;
    text-align: center;
    padding: 1em;
}

.item-5 {
    background-image: url("../images/desktop/image-graphic-design.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.item-6 {
    background-image: url("../images/desktop/image-photography.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

/*
------------------------------------
TESTIMONIAL SECTION
------------------------------------
 */
.testimonial-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 2fr 2fr 0.5fr;
    grid-template-areas:
        "testimonial-item-1 testimonial-item-2 testimonial-item-3"
        "testimonial-item-4 testimonial-item-5 testimonial-item-6"
        "testimonial-item-7 testimonial-item-8 testimonial-item-9"

}


.testimonial-item-7,
.testimonial-item-8,
.testimonial-item-9 {
    padding-bottom: 2em;
}

.testimonial-item-1 {
    grid-area: testimonial-item-1;
}

.testimonial-item-2 {
    grid-area: testimonial-item-2;
}

.testimonial-item-3 {
    grid-area: testimonial-item-3;
}

.testimonial-item-4 {
    grid-area: testimonial-item-4;
}

.testimonial-item-5 {
    grid-area: testimonial-item-5;
}

.testimonial-item-6 {
    grid-area: testimonial-item-6;
}

.testimonial-item-7 {
    grid-area: testimonial-item-7;
}

.testimonial-item-8 {
    grid-area: testimonial-item-8;
}

.testimonial-item-9 {
    grid-area: testimonial-item-9;
}

.t-item {
    background-color: antiquewhite;
    text-align: center;
}

.t-item p {
    padding-top: 2em;
    padding-left: 2em;
    padding-right: 2em;
}

.t-item img {
    margin-top: 2.5em;
    border-radius: 50%;
}

.testimonial-item-4,
.testimonial-item-5,
.testimonial-item-6 {
    margin-bottom: 0px;
    padding-bottom: 0px;
}



/*
------------------------------------
PROJECTS SECTION
------------------------------------
 */

.projects {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
}

.projects img {
    width: 25%;
}

.footer {
    align-items: center;
    background-color: #90d4c5;
    display: flex;
    flex-direction: column;
    gap: 10%;
    height: 50vh;
    justify-content: space-evenly;
    width: 100%;
}

.copyright {
    text-align: center;
}

.footer-navbar {
    vertical-align: middle;
    height: 4.5em;
    display: flex;
    align-items: center;
}

.footer-navbar li {
    display: inline-block;
    text-transform: uppercase;
    margin: 0 0.5em;
    color: #448879;
    cursor: pointer;
    transition: all .4s ease;
    font-weight: 900;
}

.company-logo {
    margin-top: 1em;
    background-image: url("../images/logo/logo.svg");
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    height: 4.5em;
    width: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (max-width: 766px) {
    .topnav.responsive {
        position: relative;
    }

    .topnav.responsive .icon {
        position: absolute;
        right: 0;
        top: 0;
    }

    .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
    }

    .grid-container {
        display: grid;
        grid-template-columns: 1fr;
        /* grid-template-rows: repeat(3, 1fr); */
        gap: 0px;
    }

    .item-5,
    .item-6 {
        min-height: 46vh;
    }

    .testimonial-grid {
        display: grid;
        grid-template-columns: 1fr;
        column-gap: 10px;
        grid-template-areas:
            "testimonial-item-1"
            "testimonial-item-4"
            "testimonial-item-7"
            "testimonial-item-2"
            "testimonial-item-5"
            "testimonial-item-8"
            "testimonial-item-3"
            "testimonial-item-6"
            "testimonial-item-9"
    }

    .topnav a {
        display: none;
    }

    .topnav a.icon {
        float: right;
        display: block;
    }

    .projects {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        width: 100%;
    }

    .projects img {
        width: 100%;
    }
}


/*FOR TABLETS*/
@media (min-width: 767px) and (max-width: 1199px) {

    .testimonial-grid {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 0.5fr 1fr 0.25fr;
        column-gap: 2px;
        padding: 1px;
    }
}