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


@font-face {
  font-family: 'hkmodular';
  src: url('HKModular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

/* Global styles */
body {
  font-family: 'Montserrat', sans-serif;
  color: #333;
  background-color: #f8f9fa;
  margin: 0;
  padding: 0;
}

.navbar{
  border-bottom: none !important;
}

.navbar-brand {
  font-family: 'hkmodular';
  font-weight: bold;
  color: white;
  font-size: 20px;
  transition: color 0.6s;
}

.navbar-brand:hover{
  color: #004aad;
}

.navbar-brand img {
  filter: url(#whiteFilter);
  width: 15rem;
}

.nav-link{
  border-radius: 4px;
  transition: all 0.4s;
  color: white;
}

.section-indicator{
  color: #004aad;
}

.nav-link:hover{
  color: #004aad;
  transform: translateY(-0.5px);
}

nav .btn{
  color: white;
  border: solid white 1px;
  transition: all 0.6s;
}

nav .btn-primary-custom{
  color: white;
  border: solid white 1px;
  background-color: rgba(0, 0, 0, 0) !important;
  transition: all 0.6s;
}

nav .btn:hover{
  background-color: #004aad !important;
}

nav .navbar-toggler{
  color: white;
}

.hero-section {
  display: flex;
  align-items: center;
  background: linear-gradient(to bottom right, #000000, #004aad);
}

.hero-section .hero-left{
  margin: 0 0;
}

.hero-section .hero-left .hero-headline{
  color: #ffffff;
  font-size: 64px;
  text-align: center;
  font-weight: bold;

}

.hero-section .hero-left .subheading{
  color: #aaa;
  font-family: 'montserrat';
  text-align: center;
}

.hero-section .hero-left .seo-location{
  color: #c6c6c6;
  font-size: 32px;
}

.hero-section .stats{
  text-align: center;
  color: #aaa;
}

.hero-section .stats span{
  font-weight: 700;
  color: white;
  font-size: min(10vw, 48px);
}

.hero-section .book-btn-container{
  display: flex;
  justify-content: center;
  width: 100%;
}

.hero-section .book-btn{
  width: 98%;
  border: solid #004aad 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 21px 0;
  padding: 21px;
  font-family: "hkmodular";
  font-size: 20px;
  transition: all 0.6s;
  background-color: #004aad;
  color: #f8f9fa;
}

.hero-section .book-btn:hover{
  width: 100%;
  box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
  padding: 23px;

  
}

.hero-section .book-btn p{
  margin: 0 0;
}

.hero-section img{
  max-width: 100%;
}

@media (max-width: 576px) {

  .hero-section .hero-headline {
    margin: 20px 0;
    font-size: 12vw !important;
  }
}

.about-section {
  padding: 4rem 0;
}

.about-section img{
  width: 100%;
}

.about-section h2 {
  font-weight: 700;
}

.about-section .btn{
  font-family: 'hkmodular';
  padding: 21px;
}

.why-section{
}

.why-section .tick{
  
}

.why-section .tick-img{
  width: 42px;
  margin: 5px 0;
}

.why-section h2{
  font-size: 32;
  font-weight: bold;
}

.why-section .why-dot-point{
  display: flex;
}

.why-section .why-dot-point .text{
  padding: 0 25px;
}

.why-section .why-dot-point .dot-point-heading{
  font-size: 20;
  font-weight: bold;
  color: #004aad;
  margin: 0 0;
}

.why-section .why-dot-point .dot-point-main{
  font-size: 16;
}

.mentor-section {
  padding: 4rem 0;
}

.mentor-section h2 {
  font-weight: 700;
}

.pricing-section {
  padding: 4rem 0;
  background-color: white;
}

.pricing-section h2{
  font-size: 48px !important;
}

.pricing-section .row {
  align-items: stretch;
}

.pricing-section .col {
  display: flex;
}


.pricing-section .card{
  background-color: #F8F8F8;
  color: #979797;
  text-align: left !important;
  padding: 25px;
  cursor: pointer;
  transition: all 0.6s;
  border: none;
  display: flex;
  flex-direction: column;
}

.pricing-section .card:hover{
  transform: scale(1.005);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);

}

.pricing-section .card-body > p:nth-of-type(1) {
  min-height: 60px; /* Adjust up/down if needed */
  margin-bottom: 1rem; /* Spacing before the list */
}

.pricing-section .card-body{
  display: flex;
  flex-direction: column;
  flex: 1 0 auto; 
}

.pricing-section .card p{
  margin-bottom: 0;
}

.pricing-section .card-title{
  font-size: 25px;
  color: #333333;
}

.pricing-section .card-body ul {
  /* If needed, you can enforce a min-height:
     min-height: 100px;
     Adjust to accommodate the tallest bullet list
  */
  margin-bottom: 1rem;
  list-style: none; /* Remove default list styling */
  padding: 0;
}

.pricing-section .card ul li {
  position: relative;
  padding-left: 25px; /* Adjust padding to make space for the tick */
  margin-bottom: 10px; /* Add spacing between list items */
}

.pricing-section .card ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 16px; /* Adjust width for tick size */
  height: 16px; /* Adjust height for tick size */
  background-image: url('muted-tick.png');
  background-size: contain; /* Ensure the image scales properly */
  background-repeat: no-repeat;
}

.pricing-section .card-body .fs-3.fw-bold {
  margin-top: auto; /* This ensures the price sits above the button at bottom */
  margin-bottom: 0.5rem;
}

.pricing-section .card .btn-outline-primary{
  width: 100%;
  background-color: #004aad;
  color: white;
  font-family: 'hkmodular';
  transition: all 0.6s;
}

.pricing-section .card .btn-outline-primary:hover{
  transform: scale(1.02);
}

.pricing-section h2 {
  font-weight: 700;
}

.testimonial-section {
  padding: 4rem 0;
  background-color: #ffffff;
}

.testimonial-section h2 {
  font-weight: 700;
}

.footer-section {
  background-color: #2b2b2b;
  color: #ddd;
  padding: 2rem 0;
}

.footer-section a {
  color: #aaa;
  text-decoration: none;
}

.footer-section a:hover {
  color: #fff;
}

.btn-outline-primary{
  border-color: #004aad;
  color: #004aad;
  transition: background-color .4s;
}

.btn-outline-primary:hover{
  background-color: #004aad;
}

.btn-primary-custom {
  background-color: #004aad;
  border-color: #004aad;
  transition: background-color .4s;
}

.btn-primary-custom:hover {
  background-color: #004aad;
  border-color: #004aad;
}

/* ==============================================
  1) RESET (Targeting Only Elements Inside .modal)
================================================= */
.modal * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ==============================================
  2) MODAL VISIBILITY & TRANSITION
================================================= */
.modal.fade {
  display: none;
  transition: opacity 0.15s linear;
}
.modal.show {
  display: block;
}

/* ==============================================
  3) MODAL DIALOG
================================================= */
.modal .modal-dialog {
  max-width: 900px;
  margin: 1.75rem auto;
  /* If you want perfect vertical centering, 
     add .modal-dialog-centered to your HTML 
     or apply:
     display: flex;
     align-items: center;
     min-height: calc(100% - 3.5rem);
  */
}

/* ==============================================
  4) MODAL CONTENT
================================================= */
.modal .modal-content {
  border: none;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* ==============================================
  5) MODAL HEADER
================================================= */
.modal .modal-header {
  border-bottom: none;
  display: flex;
  justify-content: flex-end;
  padding: 1rem;
}

/* Close Button */
.modal button.close {
  background: none;
  border: none;
  color: #000;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  outline: none;
  padding: 0;
}
.modal button.close:hover {
  opacity: 0.7;
}

/* ==============================================
  6) MODAL BODY
================================================= */
.modal .modal-body {
  padding: 2rem;
  background-color: #fff;
}

/* Left Column Image Background */
.modal .modal-body.img {
  background-size: cover;
  background-position: center;
  min-height: 300px; /* Adjust if needed */
}

/* Right Column's Custom Background */
.modal .color-1 {
  background-color: #fff; /* Change if you'd like a different background */
}

/* ==============================================
  7) TEXT STYLING
================================================= */
.modal .subheading {
  display: inline-block;
  margin-bottom: 0.75rem;
  padding: 0.25rem 0.75rem;
  background-color: #eef1f5;
  color: #2c3e50;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.modal .heading {
  font-size: 1.75rem;
  font-weight: 700;
  color: #343a40;
  margin-bottom: 1.5rem;
}

/* ==============================================
  8) FORM ELEMENTS
================================================= */
.modal .contact-form .form-control {
  border: 1px solid #ced4da;
  border-radius: 4px;
  box-shadow: none;
  height: 45px;
  margin-bottom: 1rem;
  font-size: 0.95rem;
  color: #495057;
  transition: border-color 0.2s;
}

.modal .contact-form .form-control:focus {
  border-color: #80bdff;
  outline: 0;
}

.modal .contact-form textarea.form-control {
  resize: vertical;
  height: auto; /* Ensures rows="4" is respected */
}

/* Submit Button */
.modal .btn.btn-secondary.submit {
  background-color: #004aad;
  border: none;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  height: 45px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.2s;
  font-family: 'hkmodular';
}

.modal .btn.btn-secondary.submit:hover {
  background-color: #0056b3;
  transform: scale(1.02);
}

/* ==============================================
  9) ROW / NO-GUTTERS
================================================= */
.modal .row.no-gutters {
  margin-right: 0;
  margin-left: 0;
}

.modal .row.no-gutters > [class^='col-'] {
  padding-right: 0;
  padding-left: 0;
}

/* ==============================================
  10) FLEX HELPERS (Local to Modal)
================================================= */
.modal .d-flex {
  display: flex !important;
}
.modal .align-items-center {
  align-items: center !important;
}
.modal .justify-content-center {
  justify-content: center !important;
}
.modal .text-center {
  text-align: center !important;
}