:root {
  --nunito: "Nunito", sans-serif;
  --cursive: "Edu AU VIC WA NT Pre", cursive;
  --template-font: var(--nunito);

  --template-bg: #ffffff;
  --template-color: #4f5663;
  --white: #ffffff;
  --black: #000000;

  /* YoungEduTech logo colors */
  --primary-color: #2462ea;
  --secondary-color: #16a24b;
  --tertiary-color: #1e4fd1;
  --quaternary-color: #12853e;
  --quinary-color: #0f172a;
  --septenary-color: #111827;
  --senary-color: #e5e7eb;

  /* Template uses these in many places */
  --base-bg: #2462ea;
  --base-color: #ffffff;
  --hover-color: #16a24b;

  --transition: all 0.5s ease;
  --shadow: 0px 10px 25px 0px rgba(36, 98, 234, 0.12);
  --shadow-secondary: 0px 10px 30px 0px rgba(22, 162, 75, 0.10);
  --shadow-tertiary: 0px 4px 8px 0px rgba(0, 0, 0, 0.07);
}

/* Selection + scrollbar */
*::selection {
  color: #ffffff;
  background-color: var(--primary-color);
}

body::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-button {
  background-color: var(--primary-color);
}

/* Topbar */
.topbar {
  background-color: #f3f7ff;
}

.topbar__list a i,
.topbar__list a:hover {
  color: var(--secondary-color);
}

/* Header logo */
.navbar-logo img,
.mobile-menu__header .logo img,
.footer__logo img {
  max-height: 65px;
  width: auto;
  object-fit: contain;
}

/* Main navigation */
.navbar__item a:hover,
.navbar__item .active {
  color: var(--primary-color);
}

/* Section headers */
.section__header span,
.section__header i {
  color: var(--secondary-color);
}

.section__header .icon-thumb span {
  background-color: var(--secondary-color);
}

.section__header h2 {
  color: var(--quinary-color);
}

/* Buttons */
.btn--primary {
  background-color: var(--primary-color);
  color: var(--white);
}

.btn--primary::after {
  background-color: var(--secondary-color);
}

.btn--primary:hover {
  color: var(--white);
}

.btn--secondary {
  background-color: var(--secondary-color);
  color: var(--white);
}

.btn--secondary::before,
.btn--secondary::after {
  background-color: var(--primary-color);
  color: var(--white);
}

.btn--secondary:hover > span {
  color: var(--white);
}

/* Banner */
.banner h1 span {
  color: var(--secondary-color);
}

.banner .sub-title {
  color: var(--secondary-color);
}

/* Forms */
.contact__form .input-single,
.checkout__form .input-single {
  background: var(--primary-color);
}

.contact__form .input-single i,
.checkout__form .input-single i {
  color: var(--secondary-color);
}

/* Preloader */
.preloader {
  background-color: var(--quinary-color);
}

.preloader i {
  background-color: var(--primary-color);
  color: var(--white);
}

.preloader p {
  background: linear-gradient(
    90deg,
    var(--primary-color),
    var(--secondary-color),
    var(--primary-color)
  );
  background-size: 300%;
  background-clip: text;
  -webkit-background-clip: text;
}

/* Scroll progress */
.progress-wrap {
  background-color: rgba(36, 98, 234, 0.18);
  box-shadow: inset 0 0 0 8px rgba(36, 98, 234, 0.18);
}

.progress-wrap .progress-circle path {
  stroke: var(--primary-color);
}

.progress-wrap span::before,
.progress-wrap span::after {
  color: var(--primary-color);
}

/* Footer */
.footer {
  background-color: var(--quinary-color);
}

.footer,
.footer p,
.footer li,
.footer a {
  color: rgba(255, 255, 255, 0.78);
}

.footer h5 {
  color: var(--white);
}

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

/* ========================================
   LOGO SIZING
======================================== */

/* Header Logo */
.navbar-logo img {
    max-height: 80px;
    width: auto;
    object-fit: contain;
}

/* Sticky Header Logo */
.header.fixed-header .navbar-logo img,
.header.sticky-header .navbar-logo img {
    max-height: 70px;
}

/* Mobile Menu Logo */
.mobile-menu__header .logo img {
    max-height: 60px;
    width: auto;
    object-fit: contain;
}

/* Footer Logo */
.footer__widget-logo img,
.footer__logo img {
    max-height: 60px;
    width: auto;
    object-fit: contain;
}

/* Optional: Slightly larger logo on very large screens */
@media (min-width: 1400px) {
    .navbar-logo img {
        max-height: 60px;
    }
}

/* ========================================
   CONTACT FORM INPUT FIX
   Removes blue side background completely
======================================== */

/* Remove blue background from wrapper */
.contact__form .input-single,
.checkout__form .input-single {
    background: #f5f7fa !important;
    border: 1px solid #dce3ea !important;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

/* Input and textarea */
.contact__form .input-single input,
.contact__form .input-single textarea,
.checkout__form .input-single input,
.checkout__form .input-single textarea {
    width: 100%;
    background: transparent !important;
    border: none !important;
    color: #122f2a !important;
    padding: 18px 55px 18px 20px;
    border-radius: 10px;
}

/* Placeholder */
.contact__form .input-single input::placeholder,
.contact__form .input-single textarea::placeholder {
    color: #6c757d !important;
    opacity: 1;
}

/* Icons */
.contact__form .input-single i,
.checkout__form .input-single i {
    color: var(--primary-color) !important;
    right: 20px;
}

/* Focus effect */
.contact__form .input-single:focus-within,
.checkout__form .input-single:focus-within {
    background: #ffffff !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(36, 98, 234, 0.08);
}

/* Remove browser outline */
.contact__form .input-single input:focus,
.contact__form .input-single textarea:focus {
    outline: none;
    box-shadow: none;
}

/* Textarea */
.contact__form .input-single textarea {
    min-height: 180px;
    resize: vertical;
}

/* Form card */
.contact__form {
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}