@import url("../fonts/stylesheet.css");

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Red Hat Display';
    margin: 0px;
}

#container {
    position: relative;
}

/* Menu */
a:visited {
    color: #404041;
    text-decoration: none;
}

a:hover {
    color: darkgray;
    text-decoration: none;
}

.navigation {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: relative;
    top: 10px;
}

.navigation li {
    float: left;
    margin-right: 40px;
}

.fixed-menu {
    position: fixed;
    height: 60px;
    top: 0px;
    width: 100vw;
    background: white;
    z-index: 1;
    visibility: hidden;
}

.center-h {
    display: table;
    margin: 0 auto;
}

.center-v {
    margin: 0;
    position: relative;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.img-carousel {
    object-fit: cover;
}

table.service-table td {
    padding: 0 40px 0 0;
}

.service-item {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 20px 40px;
}

.service-table {
    margin-bottom: 10px;
}

#services {
    background-color: #05CEA7;
}

#service-carousel > .carousel-indicators li {
    border: 1px solid #666;
}

/*-------------------------------Mobile Version-----------------------------*/
@media only screen and (min-width:0px) and (max-width:1024px) {

    a {
        display: inline;
        color: #404041;
        font-weight: bold;
        text-decoration: none;
        font-size: 20px;
    }

    td.block {
        display: block;
        margin: 0 0 16px 0;
    }

    /*Home*/
    #homeCarouselItem1 {
        content: url(../images/img_1_m.jpg);
    }

    #homeCarouselItem2 {
        content: url(../images/img_2_m.png);
    }

    #homeCarouselItem3 {
        content: url(../images/img_3_m.png);
    }

    /*About*/
    .super-title {
        font-family: 'Red Hat Display';
        font-size: 120px;
        color: #24DBE0;
        position: relative;
        top: 30vh;
    }

    #about {
        background: #8052E0;
        padding: 0 28px;
    }

    #about-text {
        font-size: 60px;
        font-weight: 400;
        position: relative;
        top: 30vh;
    }

    /*Services*/
    #services-container {
        background-color: #05CEA7;
        height: 100%;
        margin-top: -20px;
        padding: 90px 28px 22px 28px;
    }

    .service-main-title {
        font-size: 30px;
        font-weight: bold;
        color: #EEF7FF;
        position: relative;
        margin-left: 60px;
    }

    #service-carousel {
        height: 90%;
    }



    /* Classes Style */
    .home-title {
        height: 10%;
    }

    .slide {
        height: 80%;
    }

    .item {
        height: 100%
    }

    .navigation {
        top: 20px;
    }

    .mainDiv {
        width: 100%;
        height: 100vh;
        overflow: auto;
    }

    .active-menu {
        width: 14px;
        border-bottom: 2px solid #42C1D8;
        visibility: hidden;
    }

    .icon {
        width: auto;
        height: 48px;
        color: #FC4D44;
        margin: 0 8px 0 0;
    }

    .text {
        font-family: 'Red Hat Display';
        font-weight: 100;
        font-size: 24px;
        font-style: normal;
        color: #EEF7FF;
        margin: 0px;
    }

    .info {
        display: inline;
        margin-left: 32px;
        font-size: 48px;
    }



    .service-box {
        background-color: white;
        width: 100%;
        height: 100%;
        padding: 16px 50px 30px 50px;
    }

    .service-image {
        width: 100%;
        height: 85%;
        object-fit: cover;
    }

    .grid-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        height: 95%;
    }

    img.work {
        width: 100%;
        height: 300px;
        filter: grayscale();
        transition: 0.3s;
        object-fit: cover;
    }

    img.work:hover {
        filter: none;
        transform: scale(1.2);
        z-index: 1;
        cursor: pointer;
    }

    .client-grid {
        display: grid;
        grid: auto auto auto/auto auto auto auto;
        width: 100%;
        margin-top: 60px;
        grid-row-gap: 40px;
        grid-column-gap: 60px;
        padding: 16px;
    }

    .call-title {
        color: #FC4D44;
        font-size: 36px;
        font-weight: bold;
        margin-left: 26px;
        margin-top: 100px;
    }

    img.client {
        width: 100%;
        height: 100%;
        filter: grayscale();
        transition: 0.3s;
    }

    img.client:hover {
        filter: none;
        transform: scale(1.2);
        z-index: 1;
        cursor: pointer;
    }

    /* ID Style */
    #navMenu {
        position: absolute;
        z-index: 1;
        right: 22px;
        top: 30px;
    }

    #carousel {
        width: 100%;
        height: 600px;
        object-fit: cover;
    }

    #logo {
        height: 142px;
    }

    #img-logo {
        margin: 30px 0 0 24px;
        width: 150px;
    }

    #mainTitle {
        font-size: 70px;
        font-weight: bold;
        text-align: center;
        display: block;
    }

    #caption {
        font-size: 36px;
        font-weight: 100;
        display: block;
    }

    #call-footer {
        width: 100%;
        height: 510px;
        background-color: #FC4D44;
        position: absolute;
        bottom: 0px;
    }

    #call-info {
        margin-top: 10vh;
    }


    #mobileTable {
        width: 100%;
        height: 100%;
        padding: 65px 32px 48px 32px;
        border-spacing: 8px;
        border-collapse: inherit;
    }

    .tableDiv {
        background-color: #EEF7FF;
        height: 100%;
        font-size: 10px;
        font-weight: bold;
        overflow: auto;
    }

    tr.myRow {
        height: 240px;
    }
}


/*------------------------------------Desktop--------------------------------*/

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

    #navMenu {
        position: absolute;
        right: 176px;
        top: 146px;
    }

    #fixedMenu {
        visibility: hidden;
    }

    /*--------Home--------*/

    #carousel {
        width: 100%;
        height: 54%;
    }

    #homeCarouselItem1 {
        content: url(../images/img_1.jpg);
    }

    #homeCarouselItem2 {
        content: url(../images/img_2.jpg);
    }

    #homeCarouselItem3 {
        content: url(../images/img_3.jpg);
    }

    #logo {
        height: 26%;
    }

    #img-logo {
        margin: 60px 0 0 60px;
        width: 300px;
    }

    #mainTitle {
        font-size: 30px;
        font-weight: bold
    }

    #caption {
        font-size: 30px;
        font-weight: 100
    }

    /*--------About--------*/
    #about-text {
        margin-left: 100px;
        margin-right: 126px;
    }

    .home-title {
        height: 18%;
    }

    /*--------Call--------*/
    #call-footer {
        width: 100%;
        height: 330px;
        background-color: #FC4D44;
        position: absolute;
        bottom: 0px;
    }

    #about {
        background: #8052E0;
    }

    /*--------Services--------*/
    #services-container {
        background-color: #05CEA7;
        height: 900px;
        margin-top: 90px;
    }

    #mobileTable {
        visibility: collapse;
    }

    .service-box {
        background-color: white;
        width: 100%;
        height: 774px;
        padding: 16px 50px 30px 50px;
    }

    .service-image {
        width: 100%;
        height: 550px;
        object-fit: cover;
        object-position: 0px 10px;
    }

    .service-main-title {
        font-size: 56px;
        font-weight: bold;
        color: #EEF7FF;
        position: relative;
        margin-left: 90px;
        top: 10px;
    }

    .tableDiv {
        background-color: #EEF7FF;
        height: 100%;
        font-size: 30px;
        font-weight: bold;
        overflow: auto;
    }

    .active-menu {
        width: 40px;
        border-bottom: 2px solid #42C1D8;
        visibility: hidden;
    }

    a {
        display: inline;
        color: #404041;
        font-weight: bold;
        text-decoration: none;
        font-size: 26px;
    }

    .mainDiv {
        width: 100%;
        height: 1080px;
        overflow: auto;
        background-color: #EEF7FF;
    }

    .super-title {
        font-family: 'Red Hat Display';
        font-size: 124px;
        color: #24DBE0;
        margin: 340px 0px 0px 90px;
    }

    .text {
        font-family: 'Red Hat Display';
        font-weight: 100;
        font-size: 36px;
        font-style: normal;
        color: #EEF7FF;
        margin: 0px;
    }

    .icon {
        width: auto;
        height: 24px;
        color: #FC4D44;
        margin: 0 8px 14px 0;
    }

    .info {
        display: inline;
        color: white;
        font-weight: 200;
    }

    #serviceImage3 {
        object-position: 0px -590px;
    }

    /*----------------------Our Works---------------------------*/
    .grid-container {
        display: flex;
        flex-flow: row;
        flex-wrap: wrap;
        padding: 0;
        width: 1760px;
        height: 800px;
    }

    img.work {
        width: 160px;
        height: 200px;
        filter: grayscale();
        transition: 0.3s;
    }

    img.work:hover {
        filter: none;
        transform: scale(1.2);
        z-index: 1;
        cursor: pointer;
    }

    img.client {
        width: 160px;
        height: 200px;
        filter: grayscale();
        transition: 0.3s;
    }

    img.client:hover {
        filter: none;
        transform: scale(1.2);
        z-index: 1;
        cursor: pointer;
    }

    /*-------------------------Contact Us------------------------*/
    .grid {
        display: grid;
        grid: auto/ auto auto auto;
    }

    .client-grid {
        display: grid;
        grid: auto auto/auto auto auto auto auto auto;
        width: 1700px;
        margin-top: 300px;
    }

    .call-title {
        color: #FC4D44;
        font-size: 36px;
        font-weight: bold;
        margin-left: 100px;
        position: absolute;
        top: 200px;
    }
}