@font-face {
    font-family: "Montserrat";
    src: url('../fonts/montserrat-variablefont_wght-webfont.woff2');
    src: url('../fonts/montserrat-variablefont_wght-webfont.woff');
    src: url('../fonts/Montserrat-VariableFont_wght.ttf');
}

:root {
    --primary-color: #fbe62e;
    --secondary-color: #fbe62edc;
    --main-duration: 0.3s;
    --after-duration: 0.8s;
    --secondary-duration:0.15s;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    font-family: 'Montserrat';
    scroll-behavior: smooth;
}

.container {
    margin-left: 15px;
    margin-right: 15px;
}

.btn {
    font-size: 1rem;
    font-weight: 500;
    padding: 12px 25px;
    background-color: var(--primary-color);
    text-decoration: none;
    color: #000;
    text-transform: uppercase;
    border-radius: 5px;
    transition: var(--main-duration);
}

.btn:hover {
    background-color: #000;
    color: var(--primary-color);
    cursor: pointer;
}

/* Start Sec-1 */
#sec-1 {padding-bottom: 100px;}
#sec-1 .container ul {display: none;}
#sec-1 .container header {display: flex; justify-content: space-between; align-items: center; padding: 15px 0;}
#sec-1 .container header img {width: 50px;}
#sec-1 .container header i {font-size: 1.6rem; transition: var(--secondary-duration);}
#sec-1 .container header i:hover {color: var(--primary-color); cursor: pointer;}
#sec-1 .container .content {display: flex; justify-content: center; align-items: center; flex-wrap: wrap; height: calc(100vh - 150px);}
#sec-1 .container .txt h1,
#sec-1 .container .txt p {
    width: 100%;
    text-align: center;
    font-size: 2.2rem;
    padding-bottom: 35px;
}
#sec-1 .container .txt p {font-size: 0.8rem; }
#sec-1 .container .txt {display: flex; justify-content: center; align-items: center; flex-wrap: wrap; padding-top: 30px;}
#sec-1 .container img:last-child {
    max-width: 100%;
    padding-top: 35px;
}
/* End Sec-1 */

/* Start Sec-2 */
#sec-2 {padding-top: 80px;}
#sec-2 .container h1 {text-align: center; font-size: 2.2rem; text-transform: uppercase; padding-bottom: 25px;}
#sec-2 .container .sm-nav {display: flex; justify-content: center; align-items: center; flex-wrap: wrap; padding-bottom: 15px;}
#sec-2 .container .links a:first-child {background-color: var(--primary-color);}
#sec-2 .container .links a { 
    text-decoration: none;
    color: #000;
    text-transform: uppercase;
    padding: 5px 8px;
    transition: var(--secondary-duration);
    border-radius: 3px;
    margin-right: 5px;
    font-weight: 500;
}
#sec-2 .container .links a:hover {background-color: var(--primary-color);}
#sec-2 .container .links {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
}
#sec-2 select {border: none; outline: none; text-transform: uppercase; font-weight: 600; padding-bottom: 10px;}
#sec-2 select:hover {cursor: pointer;}
#sec-2 .container .imgs img {max-width: 100%;}
#sec-2 .container .imgs div {
    position: relative;
    overflow: hidden;
    margin-bottom: 10px;
    
}
#sec-2 .container .imgs div:hover::after{bottom: 0;}
#sec-2 .container .imgs div::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -100%;
    width: 100%;
    height: 100%;
    background-color: var(--secondary-color);
    transition: var(--after-duration);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.9rem;
    font-weight: bold;
}
#sec-2 .container .imgs div:first-child::after,
#sec-2 .container .imgs div:nth-child(3)::after,
#sec-2 .container .imgs div:nth-child(5)::after  {content: 'ArtWork';}
#sec-2 .container .imgs div:last-child::after,
#sec-2 .container .imgs div:nth-child(2)::after,
#sec-2 .container .imgs div:nth-child(4)::after {content: 'Branding';}
#sec-2 .container .link {display: flex; justify-content: center; align-items: center; padding: 20px 0;}
/* End Sec-2 */

/* Start Sec-3 */
#sec-3 .container {display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; padding:110px 0;}
#sec-3 .container img {width: 100px; opacity: 0.7; scale: 0.9;}
/* End Sec-3 */

/* Start Sec-4 */
#sec-4 {padding: 50px 0;}
#sec-4 .container .txt h1 {text-transform: uppercase; font-weight: bold; font-size: 2.2rem; text-align: center; padding-bottom: 15px;}
#sec-4 .container p {padding: 15px 0; font-weight: 600; font-size: 0.8rem; text-align: center;}
#sec-4 .container .little img {max-width: 100%; margin-bottom: 10px;}
#sec-4 .container .little h3 {text-transform: capitalize; }
#sec-4 .container p:nth-child(4) {text-align: left; padding: 30px 0;}
#sec-4 .container .little a {text-decoration: none; color: #000; font-size: 0.8rem; font-weight: 600; padding-bottom: 25px;}
#sec-4 .container .little a:hover {color: var(--primary-color);}
#sec-4 .container .little .img {position: relative;}
#sec-4 .container .little div:last-child p {text-align: left;}
#sec-4 .container .little .img .txt p {padding: 10px; font-size: 0.65rem; color: #fff;}
#sec-4 .container .little .img .txt p strong {font-size: 0.8rem; color: #000;}
#sec-4 .container .little .img .txt {
    position: absolute;
    width: 75%;
    height: 18%;
    bottom: 13px;
    left: 0;
    background-color: var(--secondary-color);
}
/* End Sec-4 */

/* Start Sec-5 */
#sec-5 {padding-top: 80px; padding-bottom: 50px;}
#sec-5 .container .txt h1 {text-transform: uppercase; font-size: 2.2rem; text-align: center; padding-bottom: 30px;}
#sec-5 .container .txt p {font-size: 0.8rem; text-align: center; padding-bottom: 35px; line-height: 2; font-weight: 600;}
#sec-5 .container .content {display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;}
#sec-5 .container .content figure img {max-width: 100%;}
#sec-5 .container .content figure div {position: relative; overflow: hidden;}
#sec-5 .container .content figure a {color: #000;}
#sec-5 .container .content figure div::after {
    content: 'Read More';
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.2rem;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--secondary-color);
    left: 0;
    bottom: -100%;
    transition: var(--after-duration);
}
#sec-5 .container .content figure div:hover::after {bottom: 0;}
#sec-5 .container .content figure figcaption {padding: 30px 20px;}
#sec-5 .container .content figure figcaption h4 {text-transform: uppercase; font-weight: bold; padding-bottom: 15px;}
#sec-5 .container .content figure figcaption p {padding-bottom: 30px; line-height: 2; font-size: 0.8rem; font-weight: 600;}
/* End Sec-5 */

/* Start Sec-6 */
#sec-6 {padding-bottom: 50px;}
#sec-6 .container .txt h1 {text-transform: uppercase; font-size: 2.2rem; text-align: center; padding-bottom: 30px;}
#sec-6 .container .txt p {font-size: 0.8rem; text-align: center; padding-bottom: 35px; line-height: 2; font-weight: 600;}
#sec-6 .container .content form h2 {text-transform: capitalize; font-size: 1.7rem; text-align: center; padding-bottom: 15px;}
#sec-6 .container .content form div label input,
#sec-6 .container .content form div textarea {border: none; outline: none; background-color: #eeeeee4d;}
#sec-6 .container .content form div label,
#sec-6 .container .content form div {background-color: #eeeeee4d;}
#sec-6 .container .content form div {padding: 10px; margin-bottom: 5px; border-radius: 5px; font-weight: 600;}
#sec-6 .container .content form div textarea {vertical-align: top;}
#sec-6 .container .content form button {border: none; outline: none; font-weight: 500; font-size: 0.9rem; margin-top: 10px;}
#sec-6 .container .content img {max-width: 100%;}
#sec-6 .container .content {display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;}
/* End Sec-6 */

/* Start Sec-7 */
#sec-7 {padding-bottom: 50px;}
#sec-7 .container div:first-child,
#sec-7 .container div:last-child {display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
#sec-7 .container div:first-child p i {color: var(--primary-color); font-size: 1.8rem; margin-bottom: 10px;}
#sec-7 .container div:first-child p {text-align: center; padding: 10px 25px; font-size: 0.8rem;}
#sec-7 .container div:last-child a {color: #282828; font-size: 1.8rem; padding: 10px 25px;}
/* End Sec-7 */

/* Start Footer */
footer {background-color: #282828; padding: 50px 0;}
footer .container {display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
footer .container div {display: flex; justify-content: space-between; align-items: center;}
footer .container div img {filter: invert(); width: 80px; padding-right: 15px;}
footer p,
footer a {font-size: 0.75rem; color: #FFF;}
footer a { display: inline-block; width: 100%; text-align: center; text-decoration: none;}
/* End Footer */

@media (min-width:576px) {
    
}

/* Mediumdevices(tablets,768pxandup) */
@media (min-width:768px) {
    .container {
        margin-left: auto; margin-right: auto;
        width: 720px;
    }
    
    /* Start Sec-1 */
    #sec-1 .container ul {
        display: flex;
        justify-content: space-between;
        align-items: center;
        list-style-type: none;
        width: 40%;
        text-transform: uppercase;
    }
    #sec-1 .container ul li a {text-decoration: none; color: #000; font-weight: 600; transition: 0.15s;}
    #sec-1 .container ul li a:hover {color: var(--primary-color);}
    #sec-1 .container header i {display: none;}
    #sec-1 .container .content {justify-content: space-between;}
    #sec-1 .container .content .txt {width: 49%;}
    #sec-1 .container img:last-child {max-width: 50%;}
    #sec-1 .container .txt h1,
    #sec-1 .container .txt p {text-align: left;} 
    #sec-1 .container .txt h1 {font-size: 2.5rem;}
    #sec-1 .container .txt {justify-content: flex-start;}
    .btn {font-size: 1.1rem;}
    #sec-1 .container .txt p {font-size: 0.9rem;}
    /* End Sec-1 */

    /* Start Sec-2 */
    #sec-2 .container h1 {text-align: left; font-size: 2.8rem; font-weight: 800;}
    #sec-2 .container .imgs div img {padding-bottom: 0;}
    #sec-2 .container .imgs div {margin-bottom: 0;}
    #sec-2 .container .imgs div:first-child {grid-area: one;}
    #sec-2 .container .imgs div:nth-child(2) {grid-area: two;}
    #sec-2 .container .imgs div:nth-child(3) {grid-area: three;}
    #sec-2 .container .imgs div:nth-child(4) {grid-area: four; padding-top: 10px;}
    #sec-2 .container .imgs div:nth-child(5) {grid-area: five;}
    #sec-2 .container .imgs div:last-child {grid-area: six;}
    #sec-2 .container .imgs {
        display: grid;
        grid-template-areas: 
        'one two three'
        'four two six'
        'four five six';
        column-gap: 10px;
        row-gap: 10px;
        margin-top: 40px;
        padding-bottom: 60px;
    }
    #sec-2 .container div:first-of-type {justify-content: space-between;}
    /* End Sec-2 */

    /* Start Sec-4 */
    #sec-4 .container .txt h1,
    #sec-4 .container p {text-align: left;}
    #sec-4 .container p,
    #sec-4 .container .little a  {font-size: 1rem;}
    #sec-4 .container .txt p {padding: 50px 0;}
    #sec-4 .container .txt h1 {font-size: 2.8rem;}
    #sec-4 .container .little h3 {font-size: 1.8rem;}
    #sec-4 .container .little div {width: calc(50% - 10px);}
    #sec-4 .container .little .about {width: 100%; padding: 35px 0;}
    #sec-4 .container .little {display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;}
    /* End Sec-4 */

    /* Start Sec-5 */
    #sec-5 .container .txt h1 {font-size: 2.8rem;}
    #sec-5 .container .txt h1,
    #sec-5 .container .txt p {text-align: left;}
    #sec-5 .container .txt p {width: 60%; font-size: 0.9rem;}
    #sec-5 .container .content figure {width: calc(33.33% - 15px);}
    /* End Sec-5 */

    /* Start Sec-6 */
    #sec-6 .container .content form, #sec-6 .container .content img {width: 45%;}
    #sec-6 .container .content form h2,
    #sec-6 .container .txt h1,
    #sec-6 .container .txt p {text-align: left;}
    #sec-6 .container .txt p {width: 60%; font-size: 1rem;}
    #sec-6 .container .txt h1 {font-size: 2.8rem;}
    #sec-6 .container .content form button {font-size: 1.1rem;}
    /* End Sec-6 */

    /* Start Sec-7 */
    #sec-7 .container div:first-child p {padding: 25px 50px; font-size: 1rem;}
    #sec-7 .container div:last-child a {font-size: 1.9rem; padding: 25px 50px;}
    /* End Sec-7 */

    /* Start Footer */
    footer .container {justify-content: space-between;}
    footer .container div {width: 50%; justify-content: flex-start;}
    footer .container a {width: 20%;}
}

/* Largedevices(desktops,992pxandup) */
@media (min-width:992px) {
    .container {
        width: 930px;
    }

    /* Start Sec-1 */
    #sec-1 .container .txt h1 {font-size: 2.8rem;}
    #sec-1 .container .txt p {font-size: 1rem;}
    /* End Sec-1 */

    /* Start Sec-4 */
    #sec-4 .container .little div {width: calc(33.33% - 15px);}
    #sec-4 .container .little .about {width: 33.33%; padding: 55px;}
    #sec-4 .container .little h3 {font-size: 1.2rem;}
    #sec-4 .container .little .about p,
    #sec-4 .container .little .about a {font-size: 0.8rem; line-height: 2.3;}
    #sec-4 .container .little {display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;}
    /* End Sec-4 */
}

/* Extralargedevices(largedesktops,1200pxandup) */
@media (min-width:1200px) {
    .container {
        width: 1140px;
    }

    /* Start Sec-1 */
    #sec-1 .container .txt h1 {font-size: 3.5rem;}
    /* End Sec-1 */
}