body{
font-family: 'Poppins', sans-serif;
background:#f5f7fb;
}

/* HERO */

.course-hero{

background:white;
color:rgb(0, 0, 0);
padding:80px 0;

}

.hero-img{

width:100%;
border-radius:12px;

}

.subtitle{

font-size:18px;
opacity:.9;

}

.course-info{

margin-top:20px;
display:flex;
gap:25px;
flex-wrap:wrap;

}

.course-info span{

font-size:16px;

}

.enroll-btn{

background:#1e73be;
border:none;
color:white;
padding:12px 28px;
border-radius:6px;
margin-top:20px;
font-weight:600;

}
@media(max-width:576px){

.course-hero{
padding:40px 15px;
text-align:center;
}

.hero-img{
margin-bottom:20px;
}

.course-hero h1{
font-size:26px;
}

.subtitle{
font-size:15px;
}

.course-info{
flex-direction:column;
gap:10px;
align-items:center;
}

.enroll-btn{
width:100%;
}

}


/* TABLET */
@media(min-width:577px) and (max-width:991px){

.course-hero{
padding:60px 20px;
}

.course-hero h1{
font-size:32px;
}

.subtitle{
font-size:16px;
}

.course-info{
gap:15px;
}

}
/* SECTION */

.course-section{

padding:70px 0;

}

.tech-section{
padding:80px 0;
background:#f8f9fa;
}

.section-title{
font-size:36px;
font-weight:700;
}

.tech-box{
background:white;
padding:25px;
border-radius:10px;
box-shadow:0 4px 10px rgba(0,0,0,0.08);
transition:0.3s;
}

.tech-box i{
font-size:32px;
color:#1e73be;
margin-bottom:10px;
}

.tech-box:hover{
transform:translateY(-5px);
}

/* MOBILE */
@media(max-width:576px){

.section-title{
font-size:26px;
}

.tech-box{
padding:20px;
}

.tech-box i{
font-size:24px;
}

}

/* FEATURES */

.feature-section{

padding:60px 0;
background:#f0f3f8;

}

.feature-card{

background:white;
padding:25px;
border-radius:10px;
margin-top:20px;

}

.feature-card i{

font-size:32px;
color:#1e73be;

}

/* CTA */

.cta{

padding:60px 0;
text-align:center;

}
/* COURSE SECTION */
.course-section{
    padding:70px 0;
    background:#f4f6fb;
}

/* card */
.curriculum-box{
    background:#f9fafc; /* light color */
    padding:30px 25px;
    border-radius:14px;
    box-shadow:0 6px 18px rgba(0,0,0,0.06); /* softer shadow */
    transition:0.35s;
    height:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
}

/* card hover effect */
.curriculum-box:hover{
    transform:translateY(-6px);
    box-shadow:0 14px 30px rgba(0,0,0,0.12);
}

/* icon circle */
.curriculum-icon{
    width:60px;
    height:60px;
    margin-bottom:15px;
    border-radius:50%;
    background:#e0e7ff; /* soft light color */
    display:flex;
    align-items:center;
    justify-content:center;
    transition:0.3s;
}

/* icon hover animation */
.curriculum-box:hover .curriculum-icon{
    background:#c7d2fe; 
    transform:scale(1.1);
}

.curriculum-icon i{
    font-size:24px;
    color:#3b3b3b; 
    transition:0.3s;
}

.curriculum-box:hover .curriculum-icon i{
    color:#4f46e5; /* icon color change on hover */
}

/* text inside card */
.curriculum-box p{
    font-size:15px;
    font-weight:500;
    color:#333;
    margin:0;
    text-align:center;
}
/* INSTRUCTOR SECTION */

.instructor-section{
padding:80px 0;
background:linear-gradient(135deg,#f8f9fc,#eef2ff);
}

/* title */

.section-title{
font-weight:700;
margin-bottom:45px;
color:#1e293b;
font-size:40px;
}

/* card */

.instructor-card{
background:#ffffff;
padding:40px 25px;
border-radius:18px;
box-shadow:0 15px 35px rgba(0,0,0,0.08);
transition:all 0.35s ease;
position:relative;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
}

.instructor-card:hover{
transform:translateY(-8px);
box-shadow:0 25px 50px rgba(0,0,0,0.15);
}

/* icon */

.instructor-icon{
width:100px;
height:100px;
margin:0 auto 20px auto;
border-radius:50%;
background:linear-gradient(135deg,rgb(0, 0, 64),#6366f1);
display:flex;
align-items:center;
justify-content:center;
box-shadow:0 8px 20px rgba(79,70,229,0.3);
overflow: hidden;
}

.instructor-icon i{
font-size:32px;
color:white;
}

/* name */

.instructor-name{
font-size:24px;
font-weight:700;
color:#111827;
margin-bottom:10px;
}

/* experience */

.instructor-exp{
font-size:16px;
color:#555;
line-height:1.6;
margin:0;
}
/* COURSE OVERVIEW SECTION */

.course-section{
  padding:60px 0;
  background:#f8f9fc;
}

.course-section h2{
  font-size:28px;
  font-weight:700;
  color:#1e293b;
  margin-bottom:20px;
}

/* Single-line card paragraph */
.overview-text{
  display:inline-block; /* single line block */
  padding:12px 25px;
  background:#ffffff;
  border-radius:12px;
  box-shadow:0 8px 20px rgba(0,0,0,0.08);
  font-size:16px;
  color:#444;
  line-height:1.5;
  transition:all 0.3s ease;
}

.overview-text:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 30px rgba(0,0,0,0.12);
}


/* Modal backdrop fix */
.modal-backdrop {
    z-index: 1040 !important;
}

/* Modal dialog positioning (bottom, slightly above) */
.modal-dialog {
    position: fixed;
    bottom: 20px;  /* bottom edge वरून थोडे वर */
    left: 50%;
    transform: translateX(-50%); /* horizontal center */
    max-width: 500px;
    width: 90%;  /* mobile friendly */
    z-index: 1050;
    transition: transform 0.3s ease-out;
}

/* Animate modal slide up */
.modal.fade .modal-dialog {
    transform: translate(-50%, 100%);
}

.modal.fade.show .modal-dialog {
    transform: translate(-50%, 0);
}

/* Modal content */
.modal-content {
    border-radius: 1rem;
    padding: 1rem;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

/* Modal header */
.modal-header {
    border-bottom: none;
    display: flex;
    justify-content: flex-end; /* cross button right side */
    align-items: center;
}

/* Close button */
.btn-close {
    border: none;
    background: transparent;
    font-size: 1.25rem;
    cursor: pointer;
}

/* Modal body */
.modal-body {
    padding: 1rem 0;
}

/* Form inputs */
.modal-body .form-control {
    border-radius: 0.3rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 1rem;
}

/* Buttons */
.modal-footer {
    border-top: none;
    display: flex;
    justify-content: flex-end;
}

.modal-footer .btn {
    border-radius: 0.3rem;
    padding: 0.5rem 1rem;
}

/* Enroll button */
.enroll-btn {
    border-radius: 0.3rem;
    padding: 0.5rem 1.25rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.enroll-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}