/* Reset default margins and paddings */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 📌 Mobile-first base sizes */
body {
    font-size: 18px; /* Default for paragraphs */
}

/* Headings */
h1 {
    font-size: 26px !important;
}

h2 {
    font-size: 24px!important;
}

h3 {
    font-size: 22px !important;
}

p,
a,
button {
    font-size: 18px !important;
    line-height: 1.6; /* Improves readability */
    color:#222;
}

/* 📌 Tablets (768px and up) */
@media (min-width: 768px) {
    h1 { font-size: 30px !important; }
    h2 { font-size: 28px !important; }
    h3 { font-size: 24px !important; }
    p, button, a{ font-size: 19px !important; }
    .nav-link { font-size:22px !important; }

}

/* 📌 Laptops (1024px and up) */
@media (min-width: 1024px) {
    h1 { font-size: 34px !important; }
    h2 { font-size: 30px !important; }
    h3 { font-size: 26px !important; }
    p, button, a { font-size: 20px !important; }
    .nav-link {font-size: 23px !important;}
}

/* 📌 Desktops (1440px and up) */
@media (min-width: 1440px) {
    h1 { font-size: 38px !important; }
    h2 { font-size: 32px !important; }
    h3 { font-size: 28px !important; }
    p, button, a { font-size: 21px !important; }
    .nav-link { font-size:24px !important;}
}

/* 📌 4K Screens (2560px and up) */
@media (min-width: 2560px) {
    h1 { font-size: 48px !important; }
    h2 { font-size: 42px !important; }
    h3 { font-size: 36px !important; }
    p, button, a { font-size: 24px !important; }
    .nav-link { font-size: 27px !important; }
}

/* Navbar Styling */
.navbar {
    padding: 15px 0;
    border-bottom: 1px solid #e0e0e0;
    background: #f1f1f1;
}


/* Navbar Links */
.navbar-nav .nav-link {
    color: #333;
}

/* Navbar Links Hover Effect */
.navbar-nav .nav-link:hover {
    color: #007bff;
}

/* Center Navbar Links */
.navbar-nav {
    text-align: center;
}

/* Ensure Navbar is Full Width */
@media (min-width: 768px) {
    .navbar-nav {
        display: flex;
        justify-content: center;
        width: 100%;
    }
}
@media (min-width: 1400px) {
.navbar-brand {
    width:60% !important;
}
}

@media (min-width: 2000px) {
    .navbar-brand {
        width:40% !important;
    }
}

#intro {
    background-color: #D7E6FA;
}

@media (min-width: 768px) {
    #intro, #course {
        padding-top: 30px !important;
        padding-bottom:30px !important;
    }
}

@media (min-width: 992px) {
    #intro h1,
    #intro p {
        max-width:80%;
        margin:0 auto;
    }
    #intro, #course {
    padding-top:40px !important;
    padding-bottom:40px !important;
}
}

@media (min-width:1200px) {
    #intro, #course {
        padding-top:60px !important;
        padding-bottom:60px !important;
    }
}

@media (min-width: 1400px) {
    #intro h1,
    #intro p {
        max-width:80%;
        margin:0 auto;
    }
    #intro {
        padding-top:70px !important;
        padding-bottom:80px !important;
    }
    #course {
        padding-top:40px !important;
        padding-bottom:50px !important;
    }
}
.mission-title {
    position: relative;
    display: inline-block;
    padding-bottom: 10px;
}

.mission-title::after {
    content: "";
    display: block;
    width: 50px;
    height: 3px;
    background: #555;
    margin: 8px auto 0;
    border-radius: 5px;
}

.mission-container {

    padding: 30px;
    border-radius: 8px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
    max-width: 800px;
    margin: 0 auto; /* Center it */
    text-align: center;
}

.mission-container p {
    line-height:1.6;
}

#course {
    background-color: #f6d9c7;
}

.course-card {
    background: #f8ddd0;
    border-radius:8px;
    padding:25px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
    max-width:800px;
    color:#000;
    transition:transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.course-card:hover {
    transform: translateY(-3px); /* Lifts the card slightly */
    box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.15); /* Slightly stronger shadow */
    transition: all 0.3s ease-in-out;
}

.course-link {
    text-decoration:none;
    color:#000;
}

.checklist {
    list-style-type: none; /* Remove default bullets */
    padding-left: 0;
    display: flex; /* Use flexbox for horizontal centering */
    flex-direction: column; /* Keep items stacked vertically */
    align-items: center; /* Center items horizontally */
}

.checklist li {
    display: flex; /* Align checkmark with text */
    align-items: center; /* Keep checkmark and text on the same line */
    gap: 10px; /* Space between checkmark and text */
}


.checklist li::before {
    content: '\2713'; /* Unicode checkmark (✔) */
    color: #28a745; /* Green color */
    font-size: 20px;
}

.btn-primary {
    background-color: #708E55 !important;
    border-radius: 25px;
}

#subscription-form {
    background-color: #383938;
    padding: 40px 20px;
    color: white;
}

#subscription-form h2 {
    margin-bottom: 20px;
    color: #fff;
}

.form-control {
    border-radius: 25px;
    max-width:400px;
}

.btn-success {
    border-radius: 25px;
    background-color: #708E55 !important;
}

/*Course styling*/
.course-container {
    padding:50px;
    background: linear-gradient(to right, #f7f7f7, #ffffff);
    background-image: url('https://www.transparenttextures.com/patterns/white-diamond.png'); /* Subtle pattern */
}

.course-image {
    width:80%;
    border-radius:10px;
    margin-bottom:40px;
}

@media screen and (min-width: 992px) {
    .course-container {
        padding: 50px 60px 60px 50px !important;
    }  
    .course-image {
        width:100%;
        border-radius:20px;
        margin-bottom:0;
    }
}

@media screen and (min-width: 1200px) {
    .course-container {
        padding: 70px 40px 50px 40px !important;
    }  
    .course-image {
        border-radius:30px;
    }
}
@media screen and (min-width: 1400px) {
    .course-container {
        padding: 80px 80px 60px 80px !important;
    }  
}
@media screen and (min-width: 1400px) {
    .course-container {
        padding: 80px 120px 60px 120px !important;
    }  
    .course-image {
        border-radius:30px;
        width:70%;
    }
}

.moveable-container {
    position: relative;  /* Allows absolute positioning of child elements */
    display: flex;       /* Keeps the books in a row */
    justify-content: center;  /* Centers the flex items */
    align-items: center; /* Center align the content (if needed) */
    width: 100%;         /* Ensures the container takes up the full width */
    height: auto;        /* Adjust as needed for proper layout */
}

.mouse-image {
    width: 15%;
    position: absolute;  /* Removes the image from the flex layout */
    top:35%;            /* Center it vertically */
    right: 10%;          /* Adjust as necessary to position it correctly */
    transform: translateY(-50%); /* Ensures the image is vertically centered */
    z-index: 99;         /* Ensure it stays on top of other elements */
}

@media screen and (max-width:1399px) {
@keyframes moveUp {
    0% { transform: translateY(30px); opacity: 0; } /* Start lower */
    100% { transform: translateY(0); opacity: 1; }  /* Move up */
}

@keyframes moveLeftRight {
    0% { transform: translateX(0); }
    50% { transform: translateX(-50px); }
    100% { transform: translateX(0); }
}

@keyframes moveDown {
    0% { transform: translateY(0px); opacity: 1; }
    100% { transform: translateY(30px); opacity: 0; }
}
}

@media screen and (min-width:1400px) {
    .mouse-image {
        display:none;
    }
}

.books-container {
    display: flex;
    position:relative;
    overflow-x: auto;
    white-space: nowrap;
    gap: 15px;
    scrollbar-width: thin;
    padding: 10px 0;
    width: 100%;
}



.book-item {
    flex: 0 0 calc(100% / 7 - 10px) !important; /* Adjust for 7 books */
    text-align: center;
    margin: 10px;
    font-family: "Inter", serif;
}

.book-item:first-child {
    margin-left: 0;
}

.book-item img {
   max-width: 100%;
   height: auto;
}

.book-title {
    display: block;                /* Allow block display for normal flow */
    overflow: hidden;              /* Hide overflowed text */
    text-overflow: ellipsis;       /* Show ellipses for overflow text */
    width: 200px;                  /* Width constraint */
    font-size: 20px;               /* Font size */
    line-height: 1.5;              /* Line height */
    margin: 10px auto;             /* Center alignment */
    color: #333;                   /* Text color */
    white-space: normal;           /* Allow text to wrap */
    height: 3em;                   /* Restrict height to 2 lines */
    display: -webkit-box;          /* Webkit box for line clamp */
    -webkit-box-orient: vertical;  /* Vertical box orientation */
    -webkit-line-clamp: 2;         /* Clamp to 2 lines */
}

/* For screens smaller than 768px */
@media screen and (max-width: 768px) {

    .book-item img {
        max-width: 80%;
    }
}

/* For larger screens like 1200px and above */
@media screen and (max-width: 1399px) {
    .books-container {
        overflow-x: auto; /* Enable horizontal scrolling */
        justify-content: flex-start; /* Align books to the start */
        flex-wrap: nowrap; /* Prevent wrapping of items */
        width: 100%; /* Ensure container takes full width */
    }

    .book-item {
        flex: 0 0 calc(100% / 7 - 10px) !important; /* Adjust for 7 books */
        margin: 0 10px; /* Adjust the margins */
    }
}

/* For extra large screens (1400px and above) */
@media screen and (min-width: 1920px) {
    .books-container {
        overflow-x: hidden; /* Keep horizontal scrolling */
    }

    .book-item {
        flex: 0 0 calc(100% / 7 - 50px) !important; /* Adjust for 7 books */
        margin: 0 20px; /* Adjust margins as needed */
    }
}

/*About Me*/

.about-container {
    display: flex;
    flex-direction: column; /* Default: Stacked layout */
    align-items: center; /* Center content */
    text-align: center;
    padding: 20px;
    min-height: calc(100vh - 70px);
    background: linear-gradient(to right, #f7f7f7, #ffffff);
    background-image: url('https://www.transparenttextures.com/patterns/white-diamond.png'); /* Subtle pattern */
}

.about-image img {
    width: 80%; /* Adjust as needed */
    max-width: 400px;
    border-radius: 10px; /* Soft rounded corners */
    margin-top: 20px;
}

.about-text {
    padding:0 20px;
}

@media screen and (min-width:992px) and (max-width:1199px) {
    .about-text {
        padding:0 40px;
    }

}
/* For larger screens, switch layout */
@media screen and (min-width: 1200px) {
    .about-container {
        flex-direction: row; /* Side-by-side layout */
        align-items: center;
        text-align: left;
        min-height:calc(100vh - 150px);
    }

    .about-text {
        flex: 1;
        padding-right: 20px; /* Adds spacing between text and image */
    }

    .about-image {
        flex: 0 0 40%;
        max-width:40%;
        display: flex;
        justify-content: center;
    }

    .about-image img {
        width: 100%;
        max-width: 400px;
    }
}

@media screen and (min-width:1920px) {
    .about-image {
        flex:0 0 30%;
        max-width:30%;
    }
.about-image img {
    max-width:500px;
}

.about-text {
    text-align: center;
    padding:0 80px;
}
}


.contact-section {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    padding: 50px;
    background: linear-gradient(to right, #f7f7f7, #ffffff);
    background-image: url('https://www.transparenttextures.com/patterns/white-diamond.png'); /* Subtle pattern */
    color: #333;
}

.contact-container {
    background: white;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    max-width: 500px;
    width: 100%;
    text-align: center;
}

.contact-container h2 {
    color: #d5b17b;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 20px;
}

.contact-container p {
    color: #555;
    font-size: 1.1rem;
    margin-bottom: 20px;
}

.contact-container a {
    color: #007bff;
    text-decoration: none;
    font-weight: 600;
}

.contact-container a:hover {
    text-decoration: underline;
}

/* Form */
.contact-form {
    display: flex;
    flex-direction: column;
}

.contact-form label {
    text-align: left;
    font-weight: 600;
    margin-top: 10px;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 12px;
    margin-top: 5px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color 0.3s;
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: #d5b17b;
    outline: none;
}

/* Button */
.contact-form button {
    background-color: #d5b17b;
    color: white;
    border: none;
    padding: 12px;
    font-size: 1.2rem;
    cursor: pointer;
    border-radius: 8px;
    margin-top: 15px;
    transition: background-color 0.3s, transform 0.2s;
}

.contact-form button:hover {
    background-color: #b99666;
    transform: scale(1.05);
}

@media (max-width: 768px) {
    .contact-container {
        padding: 30px;
    }
}