@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Twinkle+Star&display=swap');

* {
    padding: 0;
    margin: 0;
}

@font-face {
    font-family: Halimun;
    src: url(./font/Halimun.ttf);
}

/* HEADER START */

.logo_brand {
    width: 100px;
    height: 100px;
}

.header_container {
    background-color: #FAFAD2;
}

.header_container h1 {
    font-family: Halimun;
}

.logo-header {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 20vh;
    margin-top: 2vh;
}

.navbar_info {
    margin-left: 20px;
}

.navbar_info h1 {
    font-weight: 500;
    margin-top: 10px;
}

.navbar_info p {
    font-family: Halimun;
    font-weight: 600;
    margin-left: 50px;
}

.info_box {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -13vh;
    margin-right: 8vh;
    font-family: 'Montserrat', sans-serif;
    color: #886e36;
}

.info_box p {
    margin: 0;
}

.fa-whatsapp {
    font-size: 34px;
    padding: 15px 5px 0 0;
}

.fa-phone {
    padding: 18px 16px 0 27px;
    border-right: 1px solid #886e36;
    margin-left: -20px;
    font-size: 15px;
    font-weight: 600;
}

.fa-phone::before {
    content: none;
}

.fa-phone a {
    text-decoration: none;
    color: #886e36;
    transition: .4s;
}

.fa-phone a:hover {
    color: #DC143C;
}

.fa-location-dot {
    font-size: 34px;
    padding: 15px 5px 0 15px;
}

.fa-map {
    padding: 18px 16px 0 27px;
    margin-left: -17px;
    font-size: 15px;
    font-weight: 600;
}

.fa-map::before {
    content: none;
}

/* HEADER END */

/* NAV START */

.navbar {
    padding: 0;
}

.container-fluid {
    background-color: #e7931a;
}

.nav-item {
    padding: 5px;
}

.nav-link {
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
}

.nav-link:hover {
    color: #ffffff;
    transition: .3s;
}

/* NAV END */

/* SECTION 1 START */

#carousel1 {
    background-image: url(./src/banner1.jpg);
    height: 506px;
}

#carousel1 h1 {
    margin-top: 14vh;
    margin-left: 31vh;
    font-size: 65px;
    font-weight: 800;
    color: #ffffff;
    font-style: italic;
}

#carousel2 {
    background-image: url(./src/banner2.jpg);
    height: 506px;
}

#carousel2 h1 {
    margin-top: 14vh;
    margin-left: 31vh;
    font-size: 65px;
    font-weight: 800;
    color: #ffffff;
    font-style: italic;
}

#carousel3 {
    background-image: url(./src/banner3.jpg);
    height: 506px;
}

#carousel3 h1 {
    margin-top: 14vh;
    margin-left: 31vh;
    font-size: 65px;
    font-weight: 800;
    color: #ffffff;
    font-style: italic;
}

/* SECTION 1 END */

/* SECTION 2 START */

.products-container {
    background-color: navajowhite;
}

.col {
    padding-top: 113px;
    padding-bottom: 107px;
}

.col h5 {
    background-color: #e7931a;
    font-weight: 700;
    margin: 15px;
    color: #ffffff;
}

.col h6 {
    font-weight: 700;
}

/* SECTION 2 END */

/* SECTION 3 START */

.welcome-container {
    background-color: #FAFAD2;
}

.wel-bakery {
    padding-top: 56px;
    padding-bottom: 68px;
}

.wel-bakery h2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-style: italic;
    color: #e7931a;
}

.logo-wel {
    width: 150px;
    height: 150px;
    margin-top: 13px;
}

/* SECTION 3 END */

/* SECTION 4 START */

.misson-container {
    background-color: navajowhite;
}

.misson1 h3 {
    font-weight: 700;
    font-style: italic;
    font-family: 'Montserrat', sans-serif;
    margin-top: 2vh;
}

.lh-sm {
    font-style: italic;
    font-size: 20px;
}

/* SECTION 4 END */

/* SECTION 5 START */

.valores-container {
    background-image: url(./src/value.jpg);
    background-color: inherit;
}

.ingredients-bakery {
    color: #ffffff;
}

.ingredients-bakery h2 {
    font-weight: 800;
    font-style: italic;
}

.ingredients-bakery p {
    font-weight: 700;
}

/* SECTION 5 END */

/* SECTION 6 START */

.form-bakery h2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-style: italic;
    color: #e7931a;
}

.form-bakery p {
    font-size: 19px;
}

/* SECTION 5 END */

/* SECTION 7 START */

.info-container {
    background-color: #FAFAD2;
}

.info-container h2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-style: italic;
    color: #e7931a;
}

.info-container p {
    font-size: 19px;
}

/* SECTION 7 END */

/* SECTION 8 START */

.s8-container {
    background-image: url(./src/section8.jpg);
    height: 500px;
}

.s8-container h2 {
    font-weight: 400;
    color: #ffffff;
    font-style: italic;
    font-size: 60px;
    margin-top: 17vh;
}

/* SECTION 8 END */

/* SECTION 9 START */

.info2-container {
    background-color: #e7931a;
}

.pack-center {
    padding-top: 35px;
    padding-bottom: 25px;
}

.pack-center h3 {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
}

.pack-center p {
    font-size: 15px;
    color: #ffffff;
}

.pack-icon {
    font-size: 35px;
    margin-bottom: 23px;
}


/* SECTION 9 START */

/* FOOTER START */

.logo-footer {
    width: 150px;
    height: 150px;
    margin-top: 20vh;
}

.footer-map {
    padding-top: 2vh;
}

.footer-map h3 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    padding-bottom: 2vh;
}

.maps {
    width: 100%;
    height: 50vh;
}

/* FOOTER END */

@media (max-width: 1030px) {

    .col {
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .missons {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    .s8-container h2 {
        margin-left: 30px;
    }

}


@media (max-width: 770px) {

    .header_container {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    .logo-header {
        margin-left: 13px;
    }

    .info_box {
        padding-top: 12vh;
        margin-left: 20vh;
    }

    #carousel1 h1 {
        margin-left: 10px;
    }

    .form-bakery img {
        width: 60vh;
    }

    .s8-container h2 {
        font-size: 35px;
        margin-left: 30px;
    }

}

@media (max-width: 430px) {

    .header_container {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    .fa-phone {
        border: none;
    }

    .p-2 {
        margin-left: -10vh;
    }

    .info_box {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    #carousel2 h1 {
        margin-left: 20px;
    }

    #carousel3 h1 {
        margin-left: 20px;
    }

    .col {
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .form-container img {
        width: 350px;
    }

    .info-container img {
        width: 350px;
    }

    .misson1 {
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .valores {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    .ingredients-bakery {
        padding-top: 12px;
        padding-bottom: 12px;
    }

}

@media (max-width: 380px) {

    .header_container {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    .fa-phone {
        border: none;
    }

    .p-2 {
        margin-left: -10vh;
    }

    .info_box {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    #carousel2 h1 {
        margin-left: 20px;
    }

    #carousel3 h1 {
        margin-left: 20px;
    }

    .form-container img {
        width: 350px;
    }

    .info-container img {
        width: 350px;
    }

    .missons {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    .misson-container img {
        width: 100%;
    }

    .col {
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .valores {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
}

@media (max-width: 330px) {

    .logo-header {
        margin-left: 10px;
    }

    #carousel1 h1 {
        font-size: 45px;
    }
    
    #carousel2 h1 {
        font-size: 45px;
    }

    #carousel3 h1 {
        font-size: 45px;
    }

    .form-container img {
        width: 20vh;
    }

    .info-container img {
        width: 20vh;
    }

}