/* CUSTOM */
:root {
    --light-azure: rgb(86, 178, 244);
    --orange: rgb(255, 165, 0);
    --light-gray: rgb(220, 220, 220);
    --white: rgb(255, 255, 255);
    --green-grass: rgb(14, 147, 30);
    --dark-gray: rgb(45, 46, 46);
    --pink: rgb(245, 119, 245);
    --header-blue: rgb(42, 94, 232);
    --black: rgb(0, 0, 0);
}

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

body {
    font-family: Arial, Helvetica, sans-serif;
}

img {
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

ul {
    list-style: none;
}

/* COMMON */
/* Layout */
.container {
    width: 80%;
    max-width: 900px;
    margin: 0 auto;

    /* DEBUG */
    /* border: 2px solid black; */
}

.hero-container {
    width: 60%;
    max-width: 900px;
    margin: 0 auto;
    padding: 60px 0 60px 0;
    /* DEBUG */
    /* border: 2px solid black; */
}

/* DEBUG EXTRA */
.hero-container>* {

    text-align: center;
    padding: 20px;

    /* DEBUG */
    /* border: 2px solid purple; */
}

.flex {
    display: flex;
}

.btn-1rem {
    border-radius: 20px;
    padding: 7px 14px;
    border: none;
    font-size: 0.9rem;
}

.btn-2rem {
    border-radius: 25px;
    padding: 12px 16px;
    border: none;
    /* font-size: 1.2rem; */
}


/* HEADER */

.header {
    height: 80px;
    align-items: center;
}

.header-nav {
    align-items: center;
}

.nav-img {
    width: 20%;
}

.nav-menu {
    width: 60%;
    justify-content: center;
    align-items: center;
    gap: 15px;
    /* in alternativa usare MARGIN, che lavora anche senza flex*/

}

.nav-btn {
    width: 20%;
    text-align: right;
}

/* HERO */
.hero {
    background-image: url(../img/jumbo.png);
    background-size: cover;

    /* DEBUG */
    /* border: 2px solid red; */
}

/* CONTENT BLOCK */
.content-block-img {
    width: 60%;

    /* DEBUG */
    /* background-color: dodgerblue; */
}

.content-block-txt {
    width: 40%;
    padding: 30px;
    /* DEBUG */
    /* background-color: pink; */
}

/* FOOTER */
.footer-top {
    /* justify-content: space-between; */
    align-items: center;

    /* debug */
    /* min-height: 40px; */
}

.col-30 {
    width: 30%;
}

.col-70 {
    width: 70%;
}

.col-25 {
    width: 25%;
}

.footer-bottom {
    /* height: 40px; */
    justify-content: space-between;
    align-items: center;
}

/* Utilities */
.row-reverse {
    flex-direction: row-reverse;
}

.column {
    flex-direction: column;
}

.justify-content-center {
    justify-content: center;

}

.border {
    border: 1px dashed black;
}

.my-20 {
    margin-top: 20px;
    margin-bottom: 20px;
}

.py-5 {
    padding-top: 5px;
    padding-bottom: 5px;
}

.px-5 {
    padding-left: 5px;
    padding-right: 5px;
}

.py-10 {
    padding-top: 10px;
    padding-bottom: 10px;
}

.px-10 {
    padding-left: 10px;
    padding-right: 10px;
}

.py-20 {
    padding-top: 20px;
    padding-bottom: 20px;
}

.px-20 {
    padding-left: 20px;
    padding-right: 20px;
}

.py-40 {
    padding-top: 40px;
    padding-bottom: 40px;
}

.bg-light-azure {
    background-color: var(--light-azure);
}

.bg-orange {
    background-color: var(--orange)
}

.bg-light-gray {
    background-color: var(--light-gray);
}

.bg-white {
    background-color: var(--white)
}

.bg-black {
    background-color: var(--black)
}

.bg-green-grass {
    background-color: var(--green-grass)
}

.bg-dark-gray {
    background-color: var(--dark-gray)
}

.bg-pink {
    background-color: var(--pink);
}

.bg-header-blue {
    background-color: var(--header-blue);
}

.txt-white {
    color: rgb(255, 255, 255);
}

.txt-black {
    color: rgb(0, 0, 0);
}

.txt-size-s {
    font-size: 0.8rem;
}

.txt-size-xl {
    font-size: 1.8rem;
}