:root{
    --beige:#c8b7a7;
    --maroon:#3b102b;
    --ivory:#fffcf0;
    --dark-maroon:#421432;
}

/* =====================================================
   GLOBAL
===================================================== */

body{
    background:var(--ivory);
    color:var(--dark-maroon);
}

a{
    color:var(--maroon);
}

a:hover{
    color:var(--dark-maroon);
}

/* =====================================================
   TOP BAR
===================================================== */

.public-top{
    background:var(--maroon);
    color:var(--ivory);
    padding:10px 0;
    font-size:14px;
}

.public-top a,
.public-top i{
    color:var(--ivory);
}

/* =====================================================
   NAVBAR
===================================================== */

.public-nav{
    background:var(--ivory);
    border-bottom:1px solid var(--beige);
    box-shadow:0 4px 20px rgba(59,16,43,.08);
}

.public-nav .navbar-brand img{
    max-height:64px;
    width:auto;
}

.public-nav .nav-link{
    font-weight:600;
    color:var(--dark-maroon);
}

.public-nav .nav-link:hover{
    color:var(--maroon);
}

/* =====================================================
   HERO
===================================================== */

.public-hero{
    background:
        linear-gradient(
            135deg,
            rgba(255,252,240,.96),
            rgba(200,183,167,.35)
        );
    padding:72px 0;
}

.public-hero h1{
    font-size:clamp(34px,5vw,58px);
    font-weight:800;
    color:var(--dark-maroon);
}

.public-hero p{
    color:var(--maroon);
}

/* =====================================================
   SECTION
===================================================== */

.public-section{
    padding:70px 0;
    background: #fff;
}

.section-title{
    color:var(--dark-maroon);
}

.section-subtitle{
    color:var(--maroon);
}

/* =====================================================
   BUTTON
===================================================== */

.btn-public{
    background:var(--maroon);
    border-color:var(--maroon);
    color:var(--ivory);
    border-radius:50px;
}

.btn-public:hover{
    background:var(--dark-maroon);
    border-color:var(--dark-maroon);
    color:var(--ivory);
}

.btn-outline-public{
    background:transparent;
    border:1px solid var(--maroon);
    color:var(--maroon);
    border-radius:50px;
}

.btn-outline-public:hover{
    background:var(--maroon);
    color:var(--ivory);
}

/* =====================================================
   CARDS
===================================================== */

.public-card{
    height:100%;
    border:1px solid var(--beige);
    border-radius:18px;
    background:var(--ivory);
    overflow:hidden;
    box-shadow:0 8px 30px rgba(59,16,43,.08);
}

.public-card .inner{
    padding:24px;
}

.public-card h3,
.public-card h4,
.public-card h5{
    color:var(--dark-maroon);
}

.public-card p{
    color:var(--maroon);
}

/* =====================================================
   BOOK IMAGE
===================================================== */

.book-cover{
    height:250px;
    object-fit:cover;
    width:100%;
    background:var(--beige);
}

/* =====================================================
   COURSE HERO
===================================================== */

.course-hero-card{
    border-radius:24px;
    background:var(--maroon);
    color:var(--ivory);
    padding:34px;
}

.course-hero-card h1,
.course-hero-card h2,
.course-hero-card h3{
    color:var(--ivory);
}

/* =====================================================
   CHIP
===================================================== */

.info-chip{
    display:inline-block;
    padding:6px 10px;
    border-radius:999px;
    background:var(--beige);
    color:var(--dark-maroon);
    font-size:13px;
    font-weight:700;
}

/* =====================================================
   FOOTER
===================================================== */

.public-footer{
    background:var(--dark-maroon);
    color:var(--ivory);
    padding:50px 0 20px;
}

.public-footer h1,
.public-footer h2,
.public-footer h3,
.public-footer h4,
.public-footer h5{
    color:var(--ivory);
}

.public-footer a{
    color:var(--ivory);
    text-decoration:none;
}

.public-footer a:hover{
    color:var(--beige);
}

/* =====================================================
   FORM
===================================================== */

.form-control,
.form-select{
    background:var(--ivory);
    border:1px solid var(--beige);
    color:var(--dark-maroon);
}

.form-control:focus,
.form-select:focus{
    border-color:var(--maroon);
    box-shadow:0 0 0 .2rem rgba(59,16,43,.15);
}

/* =====================================================
   ACCORDION
===================================================== */

.accordion-button{
    background:var(--ivory);
    color:var(--dark-maroon);
}

.accordion-button:not(.collapsed){
    background:var(--beige);
    color:var(--dark-maroon);
}

.accordion-body{
    background:var(--ivory);
}

/* =====================================================
   BADGES
===================================================== */

.badge,
.course-badge{
    background:var(--maroon);
    color:var(--ivory);
}

/* =====================================================
   ICONS
===================================================== */

.icon-circle{
    width:55px;
    height:55px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--maroon);
    color:var(--ivory);
}

.icon-circle.light{
    background:var(--beige);
    color:var(--dark-maroon);
}

/* =====================================================
   WHY CHOOSE US
===================================================== */

.why-section{
    background:var(--dark-maroon);
    color:var(--ivory);
}

.why-section .card{
    background:var(--ivory);
    border:none;
    border-radius:18px;
}

.why-section .card h3{
    color:var(--dark-maroon);
}

.why-section .card p{
    color:var(--maroon);
}

/* =====================================================
   BOOKS
===================================================== */

.book-card{
    background:var(--ivory);
    border:2px solid var(--maroon);
    border-radius:0 0 35px 35px;
}

.book-card .book-footer{
    background:var(--beige);
    color:var(--dark-maroon);
}

/* =====================================================
   COURSE CARD
===================================================== */

.course-card{
    background:var(--ivory);
    border:1px solid var(--beige);
    border-radius:20px;
}

.course-card .price{
    background:var(--beige);
    color:var(--dark-maroon);
    border-radius:30px;
    font-weight:700;
}

.course-card .rating{
    color:#d98a00;
}

.course-card .btn-register{
    background:var(--maroon);
    color:var(--ivory);
    border-radius:30px;
}

.course-card .btn-register:hover{
    background:var(--dark-maroon);
}

/* =====================================================
   TEXT COLORS
===================================================== */

.text-maroon{
    color:var(--maroon)!important;
}

.text-dark-maroon{
    color:var(--dark-maroon)!important;
}

.text-beige{
    color:var(--beige)!important;
}

.bg-maroon{
    background:var(--maroon)!important;
}

.bg-dark-maroon{
    background:var(--dark-maroon)!important;
}

.bg-beige{
    background:var(--beige)!important;
}

.bg-ivory{
    background:var(--ivory)!important;
}

/* =====================================================
   SCROLL TO TOP
===================================================== */

.scroll-top{
    width:50px;
    height:50px;
    border-radius:50%;
    border:1px solid var(--beige);
    background:var(--ivory);
    color:var(--maroon);
}

.scroll-top:hover{
    background:var(--maroon);
    color:var(--ivory);
}

/* =====================================================
   DROPDOWN
===================================================== */

.dropdown-menu{
    background:var(--ivory);
    border:1px solid var(--beige);
}

.dropdown-item{
    color:var(--dark-maroon);
}

.dropdown-item:hover{
    background:var(--beige);
    color:var(--dark-maroon);
}

/* =====================================================
   TABLE
===================================================== */

.table{
    background:var(--ivory);
    color:var(--dark-maroon);
}

.table thead{
    background:var(--maroon);
    color:var(--ivory);
}

.table tbody tr:hover{
    background:rgba(200,183,167,.25);
}

/* =====================================================
   BREADCRUMB
===================================================== */

.breadcrumb{
    background:transparent;
}

.breadcrumb-item a{
    color:var(--maroon);
}

.breadcrumb-item.active{
    color:var(--beige);
}

/* =====================================================
   PAGINATION
===================================================== */

.page-link{
    color:var(--maroon);
    border-color:var(--beige);
    background:var(--ivory);
}

.page-item.active .page-link{
    background:var(--maroon);
    border-color:var(--maroon);
    color:var(--ivory);
}

/* =====================================================
   SELECTION
===================================================== */

::selection{
    background:var(--maroon);
    color:var(--ivory);
}