/**** Fonts ****/
@font-face {
    font-family: 'Bebas Neue';
    src: url('../fonts/BebasNeue Light.otf');
}

@font-face {
    font-family: 'Bebas Neue Bold';
    src: url('../fonts/BebasNeue Bold.otf');
}

@font-face {
    font-family: 'Roboto Thin';
    src: url(../fonts/Roboto-Thin.ttf);
}

/**** General Styles ****/
::selection {
    background: #FDB265;
    color: white;
}

.hidden-break {
    display: none;
}

/**** Navbar Styles ****/
header {
    background-image: linear-gradient(to right, #FDB265, #FA966E, #F58174);
}

.nav_container {
    padding: 20px 25px;
}

.logo {
    max-width: 250px;
}

/**** Main Page Styles ****/
.main-div {
    font-family: 'Bebas Neue';
}

.freedom-to-grow-section {
    text-align: center;
    background: url(../images/shape_1.png) no-repeat bottom;
    padding: 0px 15px;
}

    .freedom-to-grow-section h1 {
        background-image: -webkit-linear-gradient(to right, #FDB265, #FA966E, #F58174); /* For Chrome and Safari */
        background-image: -moz-linear-gradient(to right, #FDB265, #FA966E, #F58174); /* For old Fx (3.6 to 15) */
        background-image: -ms-linear-gradient(to right, #FDB265, #FA966E, #F58174); /* For pre-releases of IE 10*/
        background-image: -o-linear-gradient(to right, #FDB265, #FA966E, #F58174); /* For old Opera (11.1 to 12.0) */
        background-image: linear-gradient(to right, #FDB265, #FA966E, #F58174); /* Standard syntax; must be last */
        color: transparent;
        -webkit-background-clip: text;
        background-clip: text;
        font-size: 118pt;
        font-family: 'Bebas Neue Bold';
        letter-spacing: 10px;
        margin: 0;
    }

    .freedom-to-grow-section h2 {
        font-size: 30pt;
        margin: 0;
        letter-spacing: 2px;
    }

    .freedom-to-grow-section h3 {
        background-image: -webkit-linear-gradient(to right, #f5912b, #c36268, #000000); /* For Chrome and Safari */
        background-image: -moz-linear-gradient(to right, #f5912b, #c36268, #000000); /* For old Fx (3.6 to 15) */
        background-image: -ms-linear-gradient(to right, #f5912b, #c36268, #000000); /* For pre-releases of IE 10*/
        background-image: -o-linear-gradient(to right, #f5912b, #c36268, #000000); /* For old Opera (11.1 to 12.0) */
        background-image: linear-gradient(to right, #f5912b, #c36268, #000000); /* Standard syntax; must be last */
        color: transparent;
        -webkit-background-clip: text;
        background-clip: text;
        font-size: 30pt;
        font-family: 'Bebas Neue Bold';
        letter-spacing: 5px;
        word-spacing: 10px;
    }

        .freedom-to-grow-section h3.mobile {
            background-image: -webkit-linear-gradient(to bottom, #f5912b, #c36268, #791b1b); /* For Chrome and Safari */
            background-image: -moz-linear-gradient(to bottom, #f5912b, #c36268, #791b1b); /* For old Fx (3.6 to 15) */
            background-image: -ms-linear-gradient(to bottom, #f5912b, #c36268, #791b1b); /* For pre-releases of IE 10*/
            background-image: -o-linear-gradient(to bottom, #f5912b, #c36268, #791b1b); /* For old Opera (11.1 to 12.0) */
            background-image: linear-gradient(to bottom, #f5912b, #c36268, #791b1b); /* Standard syntax; must be last */
            display: none;
        }

.laptop-section img {
    max-width: 800px;
    width: 100%;
}

.designs-section {
    font-family: 'Roboto Thin';
    margin-top: 70px;
    background: url(../images/shape_2.png) no-repeat bottom;
    background-size: cover;
    background-position-y: 367px;
    padding-bottom: 50px;
}

    .designs-section h2 {
        letter-spacing: 3px;
        text-align: center;
        font-size: 33px;
        margin-bottom: 15px;
        padding: 0px 15px;
    }

.designs-container {
    width: 85%;
    margin: auto;
}

    .designs-container .design-box {
        width: calc(24% - 30px);
        display: inline-block;
        margin: 0px 15px;
        margin-top: 50px;
    }

        .designs-container .design-box .design-name {
            text-align: center;
            font-size: 17px;
            padding-top: 20px;
        }

        .designs-container .design-box img {
            width: 100%;
            object-fit: cover;
            object-position: top;
            box-shadow: 0px 0px 13px #7d7a86;
            transition: 0.5s all;
        }

        .designs-container .design-box a {
            text-decoration: none;
            color: inherit;
        }

            .designs-container .design-box a:hover img {
                transform: scale(1.15);
            }

/**** Media Queries ****/
@media screen and (max-width: 1150px) {
    .freedom-to-grow-section {
        background-size: 200%;
    }

        .freedom-to-grow-section h1 {
            font-size: 70pt;
            margin-top: 15px;
        }

        .freedom-to-grow-section h2, .freedom-to-grow-section h3 {
            font-size: 19pt;
        }
}

@media screen and (max-width: 1000px) {
    .designs-container .design-box {
        width: calc(49% - 30px);
    }

    .designs-section {
        background-size: 200%;
        background-position-y: bottom;
    }
}

@media screen and (max-width: 750px) {
    .freedom-to-grow-section h1 {
        font-size: 50pt;
    }

    .freedom-to-grow-section h2, .freedom-to-grow-section h3 {
        font-size: 15pt;
    }
}

@media screen and (max-width: 600px) {
    .designs-container .design-box {
        width: 100%;
        margin: 0px;
        margin-bottom: 40px;
    }

        .designs-container .design-box a:hover img {
            transform: scale(1.08);
        }
}

@media screen and (max-width: 575px) {
    .freedom-to-grow-section h1, .freedom-to-grow-section h2 {
        margin-bottom: 15px;
    }
}

@media screen and (max-width: 425px) {
    .freedom-to-grow-section h3.desktop {
        display: none;
    }

    .freedom-to-grow-section h3.mobile {
        display: block;
    }
}