:root {
    --light-aqua: #e3efef;
    --aqua: #B4DFE6;
    --mid-aqua: #83CDCC;
    --dark-aqua: #32AEB6;
    --darkest-aqua: #004F52;
    --dark-blue: #055d79;
    --orange: #fe9d57;
    --light-orange: #feb784;
    --light-grey: #c1c1c1;
}

@font-face {
    font-family: 'Quicksand';
    src: url('vendor/Quicksand/Quicksand-VariableFont_wght.ttf') format('truetype');
}

body {
    font-family: 'Quicksand';
}

/* <!-- ======= Header ======= --> */

header {
    background-color: white;
    box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
}

header .logo {
    font-weight: 600;
}

header img {
    max-height: 60px;
    margin-right: 6px;
}


/* <!-- ======= Content ======= --> */

h1 {
    color: var(--dark-aqua);
}

.card-title {
    color: var(--dark-aqua);
}

.btn-buy {
    background-color: var(--orange);
    border-color: var(--orange);
    color: white;
}

.btn-buy:hover {
    background-color: var(--light-orange);
    color: white;
}

.btn-eligible {
    border-color: var(--orange);
    border-width: medium;
    color: var(--orange);
    font-weight: bold;
}

.btn-eligible:hover {
    background-color: var(--orange);
    color: white;
}

/* <!-- ======= Banniere ======= --> */

#banniere {
    background: url("img/banniere-v3.png") top left;
    background-size: cover;
    background-position: center;
    position: relative;
}

#banniere h1 {
    color: var(--orange);
}

#banniere h2 {
    color: var(--dark-aqua);
}

#banniere .card {
    border: none;
    border-radius: 5%;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
}


/* <!-- ======= Explain ======= --> */

#explain .card {
    /* border-color: var(--light-aqua); */
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
    border-radius: 5%;
    border: none;
}

#explain .card-title {
    padding-top: 2%;
    padding-bottom: 2%;
}

#explain i,
#explain ul li::marker {
    color: var(--orange);
}

/* <!-- ======= Slider ======= --> */

#slider-mockup {
    background-color: var(--light-aqua);
}

#slider-mockup h1 {
    color: var(--orange);
}

#slider-mockup .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
}

#slider-mockup img {
    max-width: 100%;
    max-height: 100%;
}

#slider-mockup .swiper-wrapper {
    width: 600px;
    height: 400px;
}

#slider-mockup .swiper .swiper-pagination-bullet-active {
    background-color: var(--orange);
}

#slider-mockup .swiper .swiper-button-next,
#slider-mockup .swiper .swiper-button-prev {
    color: var(--orange);
}

/* <!-- ======= Buy ======= --> */

#buy {
    background: url("img/banniere-buy.png") top left;
    background-size: cover;
    background-position: center;
    position: relative;
}

/* <!-- ======= Price ======= --> */

#price {
    background-color: var(--light-aqua);
}

#price h2 {
    margin-bottom: 5px;
    font-size: 36px;
}

#price h3 {
    font-size: 48px;
    font-weight: 400;
    color: var(--orange);
}

#price .pricing-item {
    background-color: white;
    padding: 60px 40px;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
    height: 100%;
    border-radius: 5%;
    border: 4px solid white;
}

#price .advanced {
    position: absolute;
    width: 100%;
    text-align: center;
    color: white;
}

#price .advanced span {
    padding: 1rem;
    background-color: var(--orange);
    font-size: 1.25rem;
}

#price .pricing-header {
    text-align: center;
}

#price ul {
    list-style: none;
}

#price .price-premium {
    border-color: var(--orange);
}

#price .not-include {
    color: var(--light-grey);
}

#price .fa-circle-check {
    color: green;
}

/* <!-- ======= Footer ======= --> */

footer {
    background-color: var(--aqua);
    color: var(--darkest-aqua);
}

footer ul {
    list-style: none;
}

footer img {
    max-height: 40px;
}

footer a {
    color: var(--darkest-aqua);
    text-decoration: none;
}

footer .website-creator {
    text-align: center;
    font-size: small;
}