/* General Styles */
body{background-color:#f8f2e7;font-family:'Roboto',sans-serif;color:#800000;text-align:center;margin:0}h1{font-size:2.5em;margin-bottom:20px;color:#800000}

/* Header Styles */
header{background-color:#fff;border-bottom:1px solid #eee5d4;padding:10px 0;display:flex;justify-content:center;align-items:center;position:fixed;top:0;width:100%;z-index:1000;box-shadow:0 2px 10px rgba(0,0,0,0.1)}
.header-content{display:flex;justify-content:space-between;align-items:center;width:100%;max-width:1200px;padding:0 20px}
.logo img{height:95px;width:320px;transition:transform 0.3s ease}
.logo img:hover{transform:scale(1.05)}
.menu{display:flex;gap:30px}
.menu a{text-decoration:none;color:#800000;font-size:1.1em;font-weight:600;padding:10px 0;position:relative;transition:color 0.3s ease}
.menu a::after{content:'';position:absolute;bottom:0;left:0;width:100%;height:2px;background-color:#FF6B00;transform:scaleX(0);transform-origin:right;transition:transform 0.3s ease}
.menu a:hover{color:#FF6B00}
.menu a:hover::after{transform:scaleX(1);transform-origin:left}

/* Hamburger Menu Styles */
.hamburger{display:none;flex-direction:column;gap:5px;background:#ff6b00;border:none;cursor:pointer;padding:10px;border-radius:5px}
.hamburger-line{width:25px;height:3px;background-color:#fff;transition:transform 0.3s ease,opacity 0.3s ease}

/* Hero Section Styles */
.hero-section{background:url("images/hero-bgn.jpg") no-repeat right -25px;padding:55px 20px 110px;background-color:#f8f2e7;display:flex;justify-content:space-between;align-items:flex-start;max-width:1200px;margin: 155px auto 10px}
.hero-content{flex:1;text-align:left;max-width:45%}
.hero-title{font-family:'Plus Jakarta Sans',sans-serif;font-size:250%;color:#800000;margin-top:20px;margin-bottom:20px;letter-spacing:-1px;line-height:1.3em}
.hero-title em{font-size:150%;color:#FF6B00;font-style:normal}
.hero-description{font-size:1em;color:#757171;line-height:1.8}
.hero-button{background-color:#800000;color:#f8f2e7;padding:15px 30px;border:none;border-radius:5px;font-size:1.1em;cursor:pointer;transition:background-color 0.3s ease;margin-top:20px}
.hero-button:hover{background-color:#600000}

/* Courses Section Styles */
.courses-section{background:linear-gradient(to bottom,#eee5d2,#f8f2e7);padding:60px 20px;border-top:1px solid #e1d8c0}
.courses-title{font-family:'Plus Jakarta Sans',sans-serif;font-size:250%;color:#800000;margin-bottom:20px}
.courses-description{font-size:1em;color:#757171;max-width:800px;margin:0 auto 40px;line-height:1.8}
.course-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;max-width:1200px;margin:0 auto;padding:20px}
.course-card{background-color:#fff;color:#757171;padding:20px;border-radius:10px;box-shadow:0 4px 8px rgba(0,0,0,0.2);text-align:center;transition:transform 0.3s ease,box-shadow 0.3s ease}
.course-card:hover{transform:translateY(-10px);box-shadow:0 8px 16px rgba(0,0,0,0.3)}
.course-card img{width:100%;height:200px;object-fit:cover;border-radius:5px}
.course-card h2{font-size:1.5em;margin:15px 0;color:#800000}
.course-card p{font-size:1em;margin:10px 0;color:#757171}
.course-card .price{font-size:1.2em;font-weight:bold;color:#800000}
.buy-button{display:block;background-color:#800000;color:#f8f2e7;padding:15px 30px;border:none;border-radius:5px;font-size:1.2em;cursor:pointer;width:70%;text-align:center;transition:background-color 0.3s ease;margin:20px auto}
.buy-button:hover{background-color:#600000}

/* Popup Styles */
.popup{display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;color:#800000;padding:30px;border-radius:10px;box-shadow:0 8px 16px rgba(0,0,0,0.3);width:700px;max-width:90%;text-align:left;z-index:1000}
.popup-content{gap:20px}
.popup-image{flex:1}
.popup-image img{width:100%;height:auto;border-radius:10px}
.popup-details{flex:1}
.popup-details h2{font-size:1.8em;margin-bottom:10px;color:#800000}
.popup-details p{font-size:1em;color:#757171;margin-bottom:20px}
.popup-details .price{font-size:1.5em;font-weight:bold;color:#800000;margin-bottom:20px}
.popup input,.popup textarea{background:#fffaf2;display:block;width:95%;margin:10px 0;padding:15px;border:1px solid #e7dfd0;border-radius:5px;font-family:'Roboto',sans-serif;font-size:1em}
.popup textarea{resize:vertical;height:100px}
.popup button[type="submit"]{background-color:#800000;color:#f8f2e7;padding:15px;border:none;border-radius:5px;cursor:pointer;width:100%;font-size:120%;transition:background-color 0.3s ease}
.popup button[type="submit"]:hover{background-color:#600000}
.close-button{margin-top:20px;background-color:transparent;color:#800000;border:1px solid #800000;padding:5px 10px;border-radius:5px;cursor:pointer;transition:background-color 0.3s ease,color 0.3s ease}
.close-button:hover{background-color:#800000;color:#f8f2e7}
.overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:999}
.confirmation{display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;color:#008000;padding:30px;border-radius:10px;box-shadow:0 8px 16px rgba(0,0,0,0.3);width:300px;text-align:center;z-index:1000}

/* Footer Styles */
footer{background-color:#fff;color:#757171;padding:20px 0;text-align:center;border-top:1px solid #eee5d4}
.footer-content{max-width:1200px;margin:0 auto;padding:0 20px}

/* Mobile Styles */
@media (max-width:768px){
.hamburger{display:flex}
.menu{display:none;flex-direction:column;position:absolute;top:100%;left:0;width:100%;border-bottom: 1px solid #eee5d4;gap: 0;background-color: #ffffffde;}
.menu.active{display:flex}
.menu a{padding:15px 20px;text-align:center;border-bottom: 1px solid #e6e2d7;border-top: 1px solid #ffffff;}
.menu a::after{display:none}
.header-content{padding:10px}
.logo img{height:70px;width:auto}
.hero-section{background-position:top;background-size:contain;flex-direction:column;align-items:center;padding:70% 20px 20px}
.hero-content{max-width:100%;text-align:center}
.hero-title{font-size:2em}
.hero-description{font-size:0.9em}
.buy-button{width:90%;padding:20px 30px;font-size:1.3em}
.courses-title, .courses-description{display:none}
.courses-section{padding:30px 20px}
}