@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');


:root { --white: #FFFFFF; --black: #000; --red: #DB242A; --blue: #313288; }

h1, h2, h3, h4, h5, h6 { font-family: "Montserrat", sans-serif; font-optical-sizing: auto; font-weight: 600; }
p, a, li { font-family: "Roboto", sans-serif; font-optical-sizing: auto; font-weight: 350 !important; }  
  
body { overflow-x: hidden; scroll-behavior: smooth; }

/*Back Button*/
.back-to-top { position: fixed; bottom: 20px; right: 20px; z-index: 999; background: var(--red); color: var(--white); padding: 10px 12px; border-radius: 50%; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); text-align: center; font-size: 24px; line-height: 1; transition: opacity 0.3s ease; opacity: 0.8; display: none; }
.back-to-top:hover { opacity: 1; background: #f0f0f0; color: var(--black); }

/* Top Contact Bar */
#contact-bar { padding: 30px; background-color: var(--red); color: var(--white); }
#contact-bar p { font-weight: 600 !important; }
#contact-bar a { padding: 5px 16px; font-weight: 600; border: 1px solid var(--white); background-color: transparent; color: var(--white); transition: 0.5s ease; }
#contact-bar a:hover { background-color: var(--white); color: var(--red); opacity: 1; }

/* Responsive (Mobile) */
@media (max-width: 768px) {
    #contact-bar { padding: 40px 15px; text-align: center; }
    #contact-bar p { text-align: left; font-size: 1em; }
    #contact-bar a { margin-top: 5px; }
}

/* Navbar - Section */
.navbar { background-color: var(--white) !important; }
.navbar img { max-height: 150px; height: auto; width: auto; padding: 5px;}
.navbar-brand { display: flex; align-items: center; gap: 10px; }
.navbar ul { text-align: center; font-size: 1.2em; }
.navbar li .nav-link { color: var(--blue) !important; font-weight: 500 !important; }
.navbar li .nav-link:hover { color: var(--red) !important; transition: 0.5s;  }

@media (max-width: 768px) {
    .navbar img { max-width: 250px; padding: 5px; margin-left: 10px; }
    .navbar ul { font-size: 1.1em; }
}

/*Hero - Section*/
#hero { width: 100%; height: 110vh; text-align: center; padding: 5% 5% 0 10%; color: var(--white); background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://www.midlandstutoringacademy.co.za/images/hero-img.webp"); background-size: cover; background-repeat: no-repeat; background-position: center center; }
#hero h1 { font-size: 3em; text-shadow: 2px 2px 4px rgba(184, 175, 175, 0.1); }
#hero p { font-size: 1.7em; text-shadow: 2px 2px 4px rgba(184, 175, 175, 0.1); }

#hero .btn-primary { background-color: var(--blue); border: none; padding: 8px 30px; font-weight: 500 !important; }
#hero .btn-danger { background-color: var(--red); border: none; padding: 8px 30px; font-weight: 500 !important; }

#hero a:hover { background-color: var(--white); color: var(--black); transform: scale(1.05); transition: background-color 0.5s, color 0.4s, transform 0.7s; }
#hero i { margin-right: 8px; }

@media (max-width: 768px) {
    #hero { text-align: left; padding: 10vh 5vw; background-position: 50% center; }
    #hero h1 { font-size: 1.8em; text-shadow: 1px 1px 3px rgba(184, 175, 175, 0.1); }
    #hero p { font-size: 1.1em; text-shadow: 1px 1px 2px rgba(184, 175, 175, 0.1); padding-top: 20px; }
    #hero a { margin: 5% 0 0 0; font-size: 1em; padding: 10px 1em; }
}
 
/* About Us - Section */
#about { width: 100%; height: auto; margin: 5% 0; }
#about .row { margin: 0; }
#about .card-one { background-color: var(--red);  min-height: 60vh; }
#about .card-two { background-color: var(--blue);  min-height: 60vh; }
#about .card-three { background-color: var(--red);  min-height: 60vh; }
#about .card-four { background-color: var(--blue);  min-height: 60vh; }
#about .about-section .content { max-width: 90%; }

#about h2 { color: var(--red); font-size: 3em; }
#about .text-muted { font-size: 1.4em; padding: 10px 5vw; }

#about .row i { color: var(--white); font-size: 70px; padding-bottom: 20px; }
#about .row h5 { color: var(--black); font-size: 1.5em; border: 2px solid var(--white); padding: 6px 30px; border-radius: 30px; background-color: var(--white);  }
#about .row p { color: var(--white); font-size: 1.1em; padding: 20px 10px; border-bottom: 1px solid var(--white); }

@media (max-width: 768px) { 
    #about h2 { font-size: 1.8em; padding: 10px; }
    #about .text-muted { font-size: 1.1em; padding: 10px 5vw; }
    #about .row i { color: var(--white); font-size: 70px; padding-bottom: 20px; }
    #about .row h5 { font-size: 1.1em; margin-top: 2%; }
    #about .row p { color: var(--white); font-size: 1em; padding: 20px 20px; }
}

/* Scope - Section */
#scope { width: 100%; height: auto; padding: 10vh 4vw; background-color: #f2efef; }
#scope h2 { color: var(--red); font-size: 3em; }
#scope .text-muted { color: var(--black); font-size: 1.4em; padding: 2% 4%; }
#scope .card { padding: 2em 1em; background-color: var(--white); border-radius: 10px; border: 1px solid #474545; }
#scope .card h5 { color: var(--white); background-color: var(--blue); border: 1px solid var(--white); padding: 10px 40px;  border-radius: 10px; }
#scope .card p { color: #474545; margin-top: 5%; font-size: 1.2em; font-weight: 500; border-bottom: 1px solid #beb4b4; padding-bottom: 20px;} 

@media (max-width: 768px) { 
    #scope {padding: 10vh 3vw; } 
    #scope h2 { font-size: 1.8em; padding: 10px; }
    #scope .text-muted { font-size: 1.1em; padding: 10px 5vw; }
    #scope .card h5 { font-size: 1.2em; }
    #scope .card p { font-size: 1em; } 
}

/* Services - Section */
#services { width: 100%; height: auto; padding: 10vh 4vw; }
#services h2 { color: var(--red); font-size: 3em; }
#services .text-muted { color: var(--black); font-size: 1.4em; padding: 2% 4%; }
#services .card { padding: 2em; width: 100%; height: 40vh; background: center center / cover no-repeat; border-radius: 8px; box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; justify-content: flex-end; transition: transform 0.3s ease, box-shadow 0.3s ease; }
#services .card.one { background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("https://www.midlandstutoringacademy.co.za/images/Online-Tutoring.webp");}
#services .card.two { background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("https://www.midlandstutoringacademy.co.za/images/TEFL-Certified.webp"); }
#services .card.three { background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("https://www.midlandstutoringacademy.co.za/images/Flexible-Session.webp"); }
#services .card.four { background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("https://www.midlandstutoringacademy.co.za/images/Progress-Tracking.webp"); }
#services .card.five { background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("https://www.midlandstutoringacademy.co.za/images/Small-Group.webp"); }
#services .card.six { background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("https://www.midlandstutoringacademy.co.za/images/Disorder-Support.webp"); }
#services .card.seven { background-image: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)), url("https://www.midlandstutoringacademy.co.za/images/affiliated.webp"); }
#services .card:hover { transform: translateY(-5px); box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.15); }
#services .card h3 { color: var(--white); font-size: 1.3em; font-weight: 500; width: max-content; text-align: left; border-bottom: 1px solid var(--white); padding: 0px 10px 10px 0px; }
#services .card p { font-size: 1em; color: var(--white); font-weight: 400 !important; padding-top: 5px; }

@media (max-width: 768px) { 
    #services {padding: 10vh 3vw; } 
    #services h2 { font-size: 1.8em; padding: 10px; }
    #services .text-muted { font-size: 1.1em; padding: 10px 5vw; }
    #services .card { margin-bottom: 2em; } 
    #services .card img { width: 130px; } 
    #services .card h3 { font-size: 1.15em; } 
    #services .card p { font-size: 0.95em; } 
}

/* Online Schooling - Section */
#online { width: 100%; height: 110vh; text-align: center; padding: 10%; color: var(--white); background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://www.midlandstutoringacademy.co.za/images/online-hero.webp"); background-size: cover; background-repeat: no-repeat; background-position: center center; }
#online h1 { font-size: 2.5em; text-shadow: 2px 2px 4px rgba(184, 175, 175, 0.1); }
#online p { font-size: 1.4em; text-shadow: 2px 2px 4px rgba(184, 175, 175, 0.1); margin-top: 1%; padding: 0px 2%; }
#online a { background-color: var(--blue); border: none; padding: 8px 30px; font-weight: 500 !important; width: max-content; display: block; margin: 2% auto; }
#online a:hover { background-color: var(--white); color: var(--black); transform: scale(1.05); transition: background-color 0.5s, color 0.4s, transform 0.7s; }
#hero i { margin-right: 8px; }

@media (max-width: 768px) {
    #online { text-align: left; padding: 10vh 5vw; background-position: 50% center; }
    #online h1 { font-size: 1.8em; text-shadow: 1px 1px 3px rgba(184, 175, 175, 0.1);  }
    #online p { font-size: 1.1em; text-shadow: 1px 1px 2px rgba(184, 175, 175, 0.1); padding-top: 20px; }
    #online a { margin: 5% 0 0 0; font-size: 1em; padding: 8px 1em; }
}
 
/* Learning Support - Section */
#learning { width: 100%; height: auto; margin: 5% 0; padding: 0; }
#learning .row { margin: 0; }
#learning .card-one { background-color: var(--red);  min-height: 60vh; }
#learning .card-two { background-color: var(--blue);  min-height: 60vh; }
#learning .card-three { background-color: var(--red);  min-height: 60vh; }
#learning .card-four { background-color: var(--blue);  min-height: 60vh; }
#learning .about-section .content { max-width: 90%; }

#learning h2 { color: var(--red); font-size: 3em; }
#learning .text-muted { font-size: 1.4em; padding: 10px 5vw; }

#learning .row i { color: var(--white); font-size: 70px; padding-bottom: 20px; }
#learning .row h5 { color: var(--white); font-size: 1.5em; border-top: 1px solid var(--white);  border-bottom: 1px solid var(--white); padding: 6px 30px;   }
#learning .row p { color: var(--white); font-size: 1.1em; padding: 20px 10px; }

@media (max-width: 768px) { 
    #learning h2 { font-size: 1.8em; padding: 10px; }
    #learning .text-muted { font-size: 1.1em; padding: 10px 5vw; }
    #learning .row img { width: 200px; height: auto; }
    #learning .row i { color: var(--white); font-size: 70px; padding-bottom: 20px; }
    #learning .row h5 { font-size: 1.1em; margin-top: 2%; }
    #learning .row p { color: var(--white); font-size: 1em; padding: 20px 20px; }
}

/* Pricing - Section */
#pricing { width: 100%; height: auto; padding: 10vh 5vw; }
#pricing  h2 { color: var(--red); font-size: 3em; }
#pricing .text-muted { font-size: 1.4em; padding: 10px 5vw; }
#pricing .card { border: 1px solid var(--red); }
#pricing .card h5 { color: var(--blue); border-bottom: 1px solid #928c8c; padding: 5px 5px 5px 0px; width: max-content; }
#pricing .bank h4 { border-bottom: 1px solid #928c8c; padding: 5px 5px 5px 0px; width: max-content; }

@media (max-width: 768px) { 
    #pricing h2 { font-size: 1.8em; padding: 10px; }
    #pricing .text-muted { font-size: 1.1em; padding: 10px 5vw; }   
    #pricing .bank h4 { font-size: 1.2em; }
}

/* Reviews - Section */
#reviews { width: 100%; height: auto; padding: 12vh 5vw; background-color: #F8F9FA; position: relative; }
#reviews h2 { color: var(--red); font-size: 3rem; font-weight: 700; margin-bottom: 1rem; }
#reviews .lead { font-size: 1.4rem; padding: 10px 5vw; }
#reviewCarousel { border: 1px solid var(--blue); border-radius: 8px;  padding: 2rem 2.5rem; background-color: white; box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08); transition: box-shadow 0.3s ease-in-out; }
#reviewCarousel:hover { box-shadow: 0 16px 32px rgba(0, 0, 0, 0.12); }
#reviews .carousel-item { min-height: 200px; transition: all 0.4s ease; }
#reviews .carousel-item p { font-size: 1.2rem; color: #333; line-height: 1.6; }
#reviews h6 { color: var(--red); font-weight: 600; margin-top: 1rem; }
.carousel-control-prev-icon, .carousel-control-next-icon { background-color: var(--blue); border-radius: 50%; padding: 10px; }

@media (max-width: 768px) { 
    #reviews { padding: 10vh 3vw; } 
    #reviews h2 { font-size: 1.8em; padding: 10px; }
    #reviews .text-muted { font-size: 1em; padding: 10px 5vw; }
    #reviews .carousel-item p { font-size: 1em; }
    #reviews h6 { font-size: 1.2em; }
}

/* Contact - Section */
#contact { padding: 12vh 5vw; width: 100%; height: auto; }
#contact h2 { color: var(--red); font-size: 3em; }
#contact .text-muted { font-size: 1.5em; }
#contact .socials { padding-top: 40px; }
#info ul { padding: 5px 0px 0px 50px; }
#info li { text-align: left; font-size: 0.9em !important; padding: 10px; }
#contact form { margin-top: 5%; }
#contact form button { background-color: var(--blue); color: var(--white); border: none; }
#contact form button:hover { background-color: var(--red); color: var(--white); transition: 0.5s; }

@media (max-width: 768px) {
    #contact { text-align: left; padding: 10vh 5vw; }
    #contact h2 { font-size: 1.8em; padding: 10px; }
    #contact .text-muted { font-size: 1.1em; padding: 10px 5vw; }
    #contact form { width: 95%; display: block; margin: auto; }
    #contact .socials { margin-top: 5%; }
    #info ul { padding: 5px; }
    #info li { font-size: 0.8em !important; }
}

/* Footer Section */
#footer { padding: 6vh 6vw; background-color: var(--red); color: var(--white); font-size: 1rem; }
#footer a, #footer p { color: var(--white); text-decoration: none; }
#footer a:hover { color: #CDCDCD; transition: 0.5s; }
#footer .list-inline { margin: 0; padding: 0; }
#footer .footer-icon { display: inline-block; transition: transform 0.3s ease, opacity 0.3s ease; width: 40px; height: 40px; }
#footer .footer-icon:hover { transform: scale(1.2); opacity: 0.8; }
#footer .footer-text { font-size: 0.9rem; margin: 0; color: var(--gold); }

@media (max-width: 768px) {
    #footer { text-align: center; }
}