body{
    margin: 0;
    font-size: 100%;
    font-family:"proxima-nova";
}
a{
    color: #C0533D;
    text-decoration: none;
}
a:hover{
    color: #5ab2f0;
}
.navbar{
    padding: 60px 0;
}
.nav-link{
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 180%;
    text-align: right;
    padding: 3px 0 !important;
    text-decoration-line: underline;
    color: #23434B;
    display: inline-block;
    font-family: 'aktiv-grotesk';
}
.nav-link:focus, .nav-link:hover{
    text-decoration-line: none;
    color: #23434B;
}
.navbar-toggler-icon i{
    color: #fff;
}
.color-primary{
    color: #fff !important;
}
.color-secondary{
    color: #647631 !important;
}
/* buttons */
.btn-primary{
    font-size: 16px;
    font-family: 'aktiv-grotesk';
    text-transform: uppercase;
    min-width: 200px;
    font-weight: normal;
    border: none;
    background: #5AB2F0;
    border-radius: 12px;
    margin-top: 35px;
    padding: 16px 36px;
    margin-right: 15px;
}
.btn-primary:hover{
    background: #53a1da;
}
.btn-primary:active,.btn-primary:focus{
    background: #53a1da;
}
.btn-primary:focus{
    box-shadow: 0 0 0 0.25rem #d2eafc;
}
.navbar-expand-lg .navbar-nav {
    flex-direction: column;
    text-align: right;
}
.banner{
    background: url(../images/banner.png);
    height: 680px;
    background-size: cover;
    position: relative;
    display: flex;
    background-position: center;
    align-items: center;
    text-align: center;
    color: #fff;
}
.banner h1{
    font-style: normal;
    font-weight: 400;
    font-size: 44px;
    line-height: 52.81px;
    font-family: 'rockwell';
    text-align: center;
    text-shadow: 0px 0px 4px rgb(0 0 0 / 25%);
}
.banner h2{
    font-style: normal;
    font-weight: 400;
    font-size: 64px;
    line-height: 76.81px;
    font-family: 'rockwell';
    text-align: center;
    text-shadow: 0px 0px 4px rgb(0 0 0 / 25%);
}
.section-info{
    background-color: #cee8fb;
    padding: 120px 0 100px;
    margin-top: -97px;
}
.section-info p{
    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    line-height: 150%;
    font-family: 'aktiv-grotesk';
    color: #23434B;
}
.banner h1{
    margin-top: -10%;
}
.books{
    background: #23434B;
    color: #fff;
    padding: 100px 0;
    border-top: 9px solid #fff;
}
.books h3{
    font-style: normal;
    font-weight: 400;
    font-size: 36px;
    line-height: 43px;
    font-family: "rockwell",sans-serif;
}
.books p{
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    font-family: "aktiv-grotesk",sans-serif;
}
.books .book-item{
    grid-template-columns: 1fr 400px;
    display: grid;
    gap: 5rem;
}
footer{
    padding: 75px 0;
    background-color: #555;
    color: #fff;
    border-top: 9px solid #fff;
}
footer p{
    font-style: normal;
    font-weight: 300;
    font-size: 18px;
    font-family: proxima;
    line-height: 150%;
    font-family: proxima-nova,sans-serif;
    margin: 5px;
}
footer p strong{
    font-weight: 700;
    margin: 30px 0;
    display: block;
}
footer p a{
    color: #fff;
    text-decoration: underline;
    margin: 0 5px;
    display: inline-block;
}
.navbar-toggler{
    padding: 0;
}
.navbar-toggler:focus{
    outline: none;
    box-shadow: none;
}
@media (min-width: 1400px){
    .container{
        width: 1220px;
    }
    .section-info p{
        max-width: 1016px;
    }
    .section-info .container,.books .container{
        width: 1117px;
    }
}
@media (max-width: 1024px){
    .books .book-item {
        grid-template-columns: 1fr 249px;
        display: grid;
        gap: 2rem;
    }
    .books h3{
        font-size: 30px;
    }
    .books p{
        font-size: 12px;
    }
    .btn-primary {
        font-size: 12px;
        margin:15px 5px 0 0;

    }
    .book-img img{
        width: 100%;
    }
}
@media (max-width: 767px){
    .books .book-item {
        grid-template-columns: 1fr;
        display: grid;
        gap: 2rem;
        display: flex;
        flex-direction: column;
        flex-direction: column-reverse;
    }
    footer p{
        font-size: 14px;
    }
    .books h3 {
        font-size: 24px;
        line-height: 29px;
    }
    .btn-primary{
        margin-top: 20px;
    }
    .books {
        padding: 50px 0;
    }
    .books .container{
        padding: 0 30px;
    }
    .banner{
        height: 208px;
    }
    .section-info{
        padding: 120px 0 30px;
    }
    .section-info p{
        font-size: 16px;
    }
    .banner h1{
        font-size: 24px;
        line-height: 28.8px;
    }
    .banner h2{
        font-size: 40px;
        line-height: 48.01px;
    }
    .d-flex{
        display: inherit !important;
    }
    .navbar-brand img{
        width: 232px;
    }
    .books,footer{
        border-top: 19px solid #fff;
    }
}