@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");



/* Custom Variables for Colors */

:root {

  --brand-blue: #0b5ed7;

  --brand-green: #00b82b;

  --brand-green: #2ab85c;

  --green-checkmark: #28a745;



  --brand-orange: #ff6700;

  --button-orange: #ff6600;

  --button-light-orange: #ff7f29;

  --orange-text: #ff6600;



  --text-dark: #111111;

  --bg-light-gray: #f4f5f7;

  --light-blue-bg: #f0f4ff;

  --main-blue: #007bff;

  --dark-blue-bar: #0056b3;

  --card-orange-border: #ffb380;



  --footer-bg: #3d3d3d; /* Dark gray background */

  --footer-bottom-bg: #000000; /* Black bottom bar */

  --brand-blue: #0b5ed7;

  --text-white: #ffffff;

  --text-light-gray: #e0e0e0;



  --brand-blue-bg: #224b7a;

  --text-muted: #888888;



  --brand-lgihtblue-bg: #1e5297;

  --card-border: rgba(255, 255, 255, 0.4);

  --text-white: #ffffff;

  --text-light: rgba(255, 255, 255, 0.85);



  --text-muted: #6c757d;

  --bg-white: #ffffff;



  --bg-lavender: #eef1f8;



  --bg-light-gray: #f5f5f5;

  --brand-blue: #0b5ed7;



  --primary-blue: #007bff;

  --bg-light: #f0f4ff;

}

html {

  /* scroll-behavior: smooth; */

}

body {

  font-family: "Inter", sans-serif;

  -webkit-font-smoothing: antialiased;

}





.wow {

  visibility: hidden;

}



/* --- Header Styles --- */

.navbar {

  padding: 20px 0;

  background-color: #ffffff;

  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);

}



.logo-circle {

  width: 50px;

  height: 50px;

  background-color: var(--brand-blue);

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  color: white;

  font-weight: bold;

  font-size: 1.2rem;

  box-shadow:

    inset 0 0 0 2px var(--brand-blue),

    inset 0 0 0 4px white;

  margin-right: 10px;

}



.logo-text {

  line-height: 1.1;

  font-weight: 700;

  color: var(--text-dark);

  font-size: 1.1rem;

}



.nav-link {

  color: var(--text-dark);

  font-weight: 500;

  margin: 0 10px;

}



.nav-link:hover {

  color: var(--brand-blue);

}



.btn-call {

  background-color: var(--brand-green);

  color: white;

  border: none;

  padding: 10px 20px;

  border-radius: 5px;

  font-size: 18px;

  font-family: "Poppins", sans-serif;

  font-weight: 300;

  line-height: 100%;

  letter-spacing: 0%;

  vertical-align: middle;

}



.btn-call:hover {

  background-color: #009924;

  color: white;

}



#mainNavbar {
    padding: 0px 0px !important;
}



/* --- Hero Section Styles --- */

.hero-bg {

  position: absolute;

  inset: 0;

  background:

    linear-gradient(rgba(30, 60, 90, 0.6), rgba(30, 60, 90, 0.7)),

    url("../images/hero-banner.jpg") center/cover no-repeat;

  z-index: -1;

  opacity: 0; 

  animation: heroFade 1.5s ease forwards;

}



.hero-section {

    width: 100%;

    position: relative;

    padding: 100px 0; 

    color: white; 

    min-height: 60vh; 

    display: flex; 

    align-items: center;

    box-sizing: border-box;

}



@keyframes heroFade {

  0% {

    opacity: 0;

  }

  50% {

    opacity: 0.5;

  }

  100% {

    opacity: 1;

  }

}



.hero-subtitle {

  font-size: 0.9rem;

  font-weight: 700;

  letter-spacing: 1px;

  margin-bottom: 20px;

}



.text-orange {

  color: #ff6700;

}

.hero-title {

  font-size: 3.5rem;

  font-weight: 600;

  line-height: 1.2;

  margin-bottom: 20px;

}



h5.topTitleOrange {

  color: var(--brand-orange) !important;

  text-transform: uppercase;

  font-size: 24px;

  font-weight: 600;

  padding-bottom: 15px;

  letter-spacing: 0.1rem;

}

h2.mainTitle {

  font-size: 47px;

  font-weight: bold;

  letter-spacing: 0.1rem;

}



.clients-footer-text {

  font-size: 20px;

  font-weight: 600;

}



#mainNavbar {

  padding-top: 25px;

  padding-bottom: 25px;

  background-color: #ffffff;

  transition: all 0.3s ease-in-out;

  box-shadow: none;

}



/* Optional: Smooth transition for your logo so it scales nicely */

#mainNavbar.navbar-scrolled .navbar-brand img {

  height: 50px; /* Adjust this to your logo's starting height */

  transition: height 0.3s ease-in-out;

}



/* The class added by JavaScript when scrolling */

/* #mainNavbar.navbar-scrolled {

    position: fixed !important;

    padding-top: 10px;

    padding-bottom: 10px;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

    width: 100%;

    z-index: 1030;

} */



#mainNavbar.navbar-scrolled .navbar-brand {

  width: auto;

  height: auto;

}

/* Shrink the logo on scroll */

#mainNavbar.navbar-scrolled .navbar-brand img {

  height: 50px;

  margin-right: auto;

  width: auto;

}



ss .text-orange {

  color: var(--brand-orange) !important;

}



.hero-desc {

  font-size: 1.1rem;

  margin-bottom: 30px;

  max-width: 90%;

}



.feature-list {

  font-size: 1.2rem;

}



.feature-list i {

  font-size: 1.2rem;

  margin-right: 5px;

  vertical-align: middle;

}



/* --- Form Card Styles --- */

.lead-form-card {

  background-color: white;

  border-radius: 12px;

  padding: 40px;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);

}



.lead-form-title {

  color: var(--text-dark);

  font-weight: 700;

  font-size: 1.5rem;

  text-align: center;

  margin-bottom: 25px;

}



.custom-input-group .input-group-text {

  background-color: transparent;

  border-right: none;

  color: #6c757d;

}



.custom-input-group .form-control {

  border-left: none;

  padding-left: 0;

}



.custom-input-group .form-control:focus {

  box-shadow: none;

  border-color: #dee2e6;

}



.custom-input-group:focus-within {

  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);

  border-radius: 0.375rem;

}



.btn-submit {

  background-color: var(--brand-orange);

  color: white;

  font-weight: 600;

  border: none;

  padding: 12px;

  width: 100%;

  border-radius: 5px;

  font-size: 1.2rem;

  margin-top: 15px;

}



.btn-submit:hover {

  background-color: #e65c00;

  color: white;

}



.form-footer-text {

  text-align: center;

  font-size: 0.85rem;

  color: #888;

  margin-top: 15px;

}



.howitWorksWrap {

  padding-top: 100px;

  padding-bottom: 100px;

}



/* --- Main Hero Content --- */

main.mobile-main-header {

  padding: 40px 10px;

  text-align: center;

  flex-grow: 1; /* Pushes footer down */

  background-image: url(../images/mob-body-bg.jpg);

  background-color: #f0f0f0;

  background-size: cover;

  background-position: center;

  color: white;

}



main.mobile-main-header .hero-top-text {

  font-size: 1.5em;

  margin-bottom: 20px;

}



main.mobile-main-header .hero-main-title {

  font-size: 1.9em;

  margin-bottom: 10px;

}



main.mobile-main-header .fees-percentage {

  font-size: 5em;

  color: #ff6700; /* Orange Color */

  font-weight: bold;

  line-height: 1;

  margin-bottom: 15px;

}



main.mobile-main-header .hero-description {

  font-size: 1.5em;

  margin-bottom: 30px;

}



main.mobile-main-header .trusted-paragraph {

  font-size: 1em;

  color: rgba(255, 255, 255, 1);

  line-height: 1.4;

  text-transform: uppercase;

  font-style: italic;

  max-width: 540px;

  margin: 0 auto 30px;

}



/* --- Contact Form Section --- */

main.mobile-main-header .form-section {

  margin: 0 auto 30px;

  width: 100%;

  background-color: white;

  color: black;

  border-radius: 10px;

  overflow: hidden; /* Ensures orange bar is rounded with the card */

  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

  max-width: 540px;

}



main.mobile-main-header .form-header-bar {

  background-color: #ff6700; /* Orange color */

  padding: 15px;

  text-align: center;

  font-weight: bold;

  font-size: 1.2em;

  color: white;

}



main.mobile-main-header .form-content {

  padding: 25px 20px;

}



main.mobile-main-header .form-group {

  margin-bottom: 18px;

}



main.mobile-main-header .form-group label {

  display: block;

  margin-bottom: 8px;

  font-size: 1em;

  color: #333;

  text-align: left;

}



main.mobile-main-header .form-group input {

  width: 100%;

  padding: 12px;

  border: 1px solid #ccc;

  border-radius: 5px;

  font-size: 1em;

  color: #555;

}



main.mobile-main-header .form-group input::placeholder {

  color: #bbb;

}


main.mobile-main-header .form-group select.form-control {
    cursor: pointer;
    font-size: 1em;
    color: #555;
}

main.mobile-main-header .form-group select.form-control{
	background: url(../images/arrow-down.svg)no-repeat 100%;
	background-size: 16px;
	background-position-x: 98%;
}

main.mobile-main-header .form-group select.form-control:focus{
	background: url(../images/arrow-top.svg)no-repeat 100%;
	background-size: 16px;
	background-position-x: 98%;
}

/* Correcting placeholder for phone to match image's email example */

main.mobile-main-header .form-group input#phone::placeholder {

  color: #bbb;

}



/* Submit Button */

main.mobile-main-header .submit-btn {

  width: 100%;

  padding: 15px;

  background-color: #2979ff; /* Blue color */

  color: white;

  border: none;

  border-radius: 5px;

  font-size: 1em;

  font-weight: bold;

  display: flex;

  justify-content: space-between;

  align-items: center;

  cursor: pointer;

  margin-top: 10px;

}



main.mobile-main-header.submit-btn-text {

  flex-grow: 1;

  text-align: left;

}



main.mobile-main-header .arrow-circle {

  width: 25px;

  height: 25px;

  background-color: white;

  color: #2979ff;

  border-radius: 50%;

  display: flex;

  justify-content: center;

  align-items: center;

  font-size: 1em;

  font-weight: bold;

}



/* --- Footer Section --- */

main.mobile-main-header ~ footer {

  background-color: #ff6700; /* Orange color */

  padding: 10px 15px;

  text-align: center;

  margin-top: auto; /* Stays at the bottom */

  width: 100%;

  display: flex;

  justify-content: space-between;

  gap: 20px;

  position: fixed;

  bottom: 0;

  left: 0;

}



main.mobile-main-header ~ footer .footer-icon-circle {

  width: 50px;

  height: 50px;

  border-radius: 50%;

  /* background-color: white; */

  display: flex;

  justify-content: center;

  align-items: center;

  color: #e65100;

  font-size: 1.4em;

}



main.mobile-main-header ~ footer .footer-icon-circle img {

  width: 50px;

  height: 50px;

}



/* Video Section */

/* .video-container {

  position: relative;

  padding-bottom: 38.25%;

  height: 0;

  overflow: hidden;

  

  border-radius: 25px;

  max-width: 900px;

  max-height: 500px;

  margin: 0 auto;

}

.video-container video {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  max-width: 900px;

  max-height: 500px;

  object-fit: cover;

} */



.video-wrapper {

  width: 100%;

  max-width: 800px; /* You can adjust this width */

  margin: 0 auto;

  position: relative;

  cursor: pointer;

  border-radius: 12px; /* Matches the rounded corners in your image */

  overflow: hidden;

}



/* 2. Styling for both the image and the video */

.video-wrapper img,

.video-wrapper video {

  width: 100%;

  height: 100%; /* Force it to take up the full height */

  object-fit: cover; /* Tells the video to fill the box without squishing, removing black bars */

  display: block;

}



/* Optional: If you want to enforce a specific aspect ratio (like 16:9 standard video) */

.video-wrapper {

  aspect-ratio: 16 / 9;

}



/* 3. Hide the video initially */

#actualVideo {

  display: none;

}



/* Section Container */

.clients-section {

  background-color: var(--bg-light-gray);

  padding: 80px 0;

  text-align: center;

}



/* Typography */

.clients-subtitle {

  color: var(--brand-orange);

  font-size: 0.95rem;

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: 0.5px;

  margin-bottom: 15px;

}



.clients-title {

  font-size: 2.5rem;

  font-weight: 700;

  color: var(--text-dark);

  margin-bottom: 50px;

}



.clients-footer-text {

  color: var(--brand-orange);

  font-size: 1.2rem;

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: 0.5px;

  margin-top: 50px;

  margin-bottom: 0;

}



/* Swiper & Logo Styling */

.clients-slider {

  width: 100%;

  padding: 20px 0;

  overflow: hidden; /* Hide overflowing logos */

}



/* Crucial for the continuous smooth marquee effect */

.clients-slider .swiper-wrapper {

  transition-timing-function: linear !important;

}



.clients-slider .swiper-slide {

  display: flex;

  justify-content: center;

  align-items: center;

  height: 130px; /* Fixed height keeps logos aligned horizontally */

}

.clients-slider .swiper-slide img {

  width: 100%;

  max-width: 180px;

}



.clients-slider img {

  /* max-width: 140px;

        max-height: 70px; */

  object-fit: contain; /* Ensures logos maintain aspect ratio */

  /* filter: grayscale(100%);   */

  opacity: 0.7;

  transition: all 0.3s ease;

}



/* Optional: Colorize logos on hover */

.clients-slider img:hover {

  filter: grayscale(0%);

  opacity: 1;

}



.navbar-nav {

  gap: 30px;

}



.navbar-brand {

  width: 310px;

  height: 95px;

}



.navbar-brand img {

  width: 230px;

  height: 70px;

}



.nav-link {

  font-family: Inter;

  font-weight: 500;

  font-size: 1.2rem;

}



.accounting-fees-section {

  background-color: var(--light-blue-bg);

  padding: 80px 0;

}



.section-header p {

  color: var(--orange-text);

  font-size: 1.1rem;

  margin-bottom: 5px;

}



.section-header h2 {

  font-size: 3rem;

  font-weight: bold;

  color: #333;

  margin-bottom: 30px;

}



/* Calculator Block Styles */

.calculator-block {

  background-color: white;

  border-radius: 15px;

  border: 1px solid var(--main-blue);

  padding: 30px;

  margin-bottom: 30px;

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);

}



.slider-wrapper {

  display: flex;

  align-items: center;

  margin-bottom: 20px;

}



.slider-label {

  margin-right: 20px;

  font-size: 1rem;

  color: #555;

  white-space: nowrap;

}



/* Styles for the div-based static slider track and handle */

.custom-slider-container {

  position: relative;

  flex-grow: 1;

  height: 25px; /* Track height */

}



.slider-track {

  position: absolute;

  top: 50%;

  left: 0;

  transform: translateY(-50%);

  width: 100%;

  height: 6px; /* Track thickness */

  background-color: #e6eefa; /* Light track color */

  border-radius: 3px;

}



.slider-handle {

  position: absolute;

  top: 50%;

  left: 50%; /* Position the handle (example at 50%) */

  transform: translate(-50%, -50%);

  width: 60px; /* Wider handle for text */

  height: 30px; /* Taller handle */

  background-color: var(--main-blue);

  border-radius: 15px;

  color: white;

  display: flex;

  justify-content: center;

  align-items: center;

  font-size: 0.9rem;

  font-weight: bold;

  border: 1px solid white;

  z-index: 2;

}



/* Styles for the darker blue result bar below the slider */

.result-bar {

  background-color: var(--dark-blue-bar);

  height: 40px;

  border-radius: 20px;

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 0 20px;

  color: white;

  font-size: 0.9rem;

}



.result-bar-item:last-child {

  background-color: var(--orange-text);

  padding: 5px 15px;

  border-radius: 15px;

}



/* Card Block Styles */

.card-block {

  background-color: white;

  border-radius: 15px;

  padding: 30px;

  margin-bottom: 30px;

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);

  height: 100%;

}



.card-block-left {

  border: 2px solid var(--card-orange-border);

}



.card-header h3 {

  font-size: 22px;

  font-weight: bold;

  margin-bottom: 15px;

}



.card-header p {

  color: #777;

  font-size: 0.9rem;

  margin-bottom: 24px !important;

}



/* List with green checkmarks */

.card-list {

  list-style: none;

  padding: 0;

  margin: 25px;

}



.card-list li {

  position: relative;

  padding-left: 35px;

  margin-bottom: 15px;

  font-size: 1.2rem;

  color: #555;

  margin-top: 15px;

  line-height: 1.2em;

}



.card-list li::before {

  content: " "; /* Unicode character for checkmark */

  position: absolute;

  width: 26px;

  height: 26px;

  display: block;

  left: 0;

  color: var(--green-checkmark);

  font-weight: bold;

  background: url(../images/icon-green-tick.svg) center center no-repeat;

  background-size: contain;

}



/* Solid orange button */

.btn-book {

  background-color: var(--button-orange);

  color: white;

  border: none;

  border-radius: 30px;

  padding: 10px 40px;

  font-size: 1.2rem;

  font-weight: bold;

  cursor: pointer;

  margin-top: 20px;

  width: 100%;

}



.btn-book:hover {

  background-color: var(--button-light-orange);

  opacity: 0.8;

}



/* Right Card Styles */

.card-right h3 {

  font-size: 1.5rem;

  font-weight: 700;

  margin-bottom: 5px;

}



.card-right h4 {

  color: var(--orange-text);

  font-size: 1.1rem;

  margin-bottom: 15px;

}



.card-right p {

  font-size: 1.2rem;

  color: #555;

  margin-bottom: 12px;

  margin-top: 0px;

}



.card-right p.cta {

  font-weight: bold;

  margin-bottom: 0;

  color: #000;

}



/* Disclaimer Text */

.disclaimer-text {

  color: #000;

  text-align: left;



  margin-top: 10px;

  display: block;

  font-size: 1.2rem;

  margin-top: 30px;

  font-weight: 400;

}



.calculator-card {

  background-color: #ffffff;

  border: 2px solid var(--primary-blue);

  border-radius: 12px;

  padding: 40px;

  max-width: 100%;

  margin: 0 auto;

  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);

}



/* Left Label */

.slider-label {

  font-size: 1.2rem;

  color: #111;

  font-weight: 400;

  line-height: 1.3;

  text-align: left;

}



/* Range Slider Track & Container */

.range-container {

  position: relative;

  flex-grow: 1;

  height: 60px; /* Accommodates the tall thumb */

  display: flex;

  align-items: center;

  width: 100%;

}



.track-outline {

  position: absolute;

  left: 0;

  right: 0;

  height: 22px;

  border: 1.5px solid var(--primary-blue);

  border-radius: 20px;

  z-index: 1;

}



/* Native Input Overridden to be invisible */

input[type="range"] {

  -webkit-appearance: none;

  width: 100%;

  background: transparent;

  position: absolute;

  z-index: 3;

  margin: 0;

  cursor: pointer;

}



input[type="range"]:focus {

  outline: none;

}



/* Make native thumb same size as custom, but transparent */

input[type="range"]::-webkit-slider-thumb {

  -webkit-appearance: none;

  width: 60px;

  height: 60px;

  background: transparent;

  border-radius: 50%;

}



input[type="range"]::-moz-range-thumb {

  width: 60px;

  height: 60px;

  background: transparent;

  border: none;

  border-radius: 50%;

}



/* Custom Visual Thumb */

.custom-thumb {

  position: absolute;

  width: 80px;

  height: 80px;

  background-color: var(--primary-blue);

  color: white;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  font-weight: 600;

  font-size: 0.95rem;

  z-index: 2;

  pointer-events: none; /* Passes clicks through to the native input */

  left: 0; /* Will be updated by JS */

}

.range-container:hover .custom-thumb {
    background: #ff7f29;
}



.monthlyPackageWrap .monthlyBoxLeft, .monthlyPackageWrap .monthlyBoxRight {
    width: 50%;
    margin-bottom: 0 !important;
}

.monthlyPackageWrap {
    align-items: inherit !important;
    padding-bottom: 50px;
}

.monthlyPackageWrap .text-start {
    position: absolute;
        left: 0;
    width: 90%;
    right: 0;
    margin: 0 auto;
}


/* Result Bar */

.result-bar {

  background-color: var(--primary-blue);

  border-radius: 50px;

  display: flex;

  align-items: center;

  justify-content: flex-end;

  height: 48px;

  margin-top: 35px;

  padding-left: 20px; /* space on the left side of bar */

  padding-right: 0px;

}



.fee-text {

  color: white;

  font-weight: 600;

  font-size: 1rem;

  margin-right: 20px;

}



.fee-amount {

  background-color: var(--primary-orange);

  color: white;

  height: 100%;

  display: flex;

  align-items: center;

  padding: 0 30px;

  border-radius: 50px;

  font-weight: 600;

  font-size: 1.1rem;

}



.monthlyPackageWrap .monthlyBoxRight .card-block {

  /* border-top-left-radius: 0;

  border-bottom-left-radius: 0; */

  border: 2px solid var(--primary-blue) !important;

  /* border-left: none !important; */

}



/* 

    :root {

        --bg-light-gray: #f5f5f5;

        --brand-blue: #0b5ed7;  

        --text-dark: #111111;

        --text-muted: #6c757d;

    } */



/* Benefits Section Styles */

.benefits-section {

  background-color: var(--bg-white);



  padding: 80px 0;

}



.benefits-section .bg-lgt-grey {

  background-color: var(--bg-light-gray);

}



.benefits-title {

  font-weight: 700;

  font-size: 2.5rem;

  color: var(--text-dark);

  margin-bottom: 60px;

}



.benefit-icon {

  font-size: 2.5rem;

  color: var(--brand-blue);

  margin-bottom: 20px;

  /* Added to give a lighter outline look similar to the image */

  -webkit-text-stroke: 1px var(--brand-blue);

  color: transparent;

}



.benefit-heading {

  font-weight: 700;

  font-size: 1.25rem;

  color: var(--text-dark);

  margin-bottom: 12px;

}



.benefit-text {

  color: var(--text-muted);

  font-size: 1.2rem;

  line-height: 1.5;

  padding: 0 15px;

}



/* 

    :root {

        --brand-orange: #ff6600;

        --text-dark: #111111;

        --text-muted: #6c757d;

        --bg-white: #ffffff;

    } */



/* Fee Structure Section Styles */

.fee-structure-section {

  padding: 80px 0;

  background-color: var(--bg-white);

}



/* Section Header */

.fee-structure-section .section-subtitle {

  color: var(--brand-orange);

  font-size: 24px;

  font-weight: 600;

  letter-spacing: 0.5px;

  text-transform: uppercase;

  margin-bottom: 10px;

  display: block;

}



.fee-structure-section .section-title {

  font-weight: bold;

  font-size: 48px;

  color: var(--text-dark);

  margin-bottom: 60px;

}



/* Content Area */

.fee-structure-section .content-heading {

  font-weight: 600;

  font-size: 1.9rem;

  color: var(--text-dark);

  line-height: 1.3;

  margin-bottom: 15px;

}



.fee-structure-section .content-subheading {

  color: var(--brand-orange);

  font-weight: 600;

  font-size: 24px;

  margin-bottom: 25px;

}



.fee-structure-section .content-text {

  color: var(--text-muted);

  font-size: 1.2rem;

  line-height: 1.7;

  margin-bottom: 20px;

}



/* Right Image Styling */

.fee-structure-section .fee-image-wrapper {

  position: relative;

  width: 100%;

  /* Optional: subtle shadow to lift the image slightly */

  /* box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);  */

}



.fee-structure-section .fee-image-wrapper img {

  width: 100%;

  height: auto;

  display: block;

  object-fit: cover;

  margin: 0 auto;

  border-radius: 8px; /* Optional slight rounding, remove if graphic has sharp edges */

}



/* 



    :root {

        --bg-lavender: #eef1f8;  

        --text-dark: #111111;

        --brand-orange: #f27123;  

        --brand-green: #2ab85c;   

        --text-muted: #6c757d;

    } */



/* Services Section Styles */

.services-section {

  background-color: var(--bg-lavender);

  padding: 80px 0;

}



/* Image Styling */

.services-image-wrapper {

  position: relative;

  width: 100%;

  max-width: 500px;

  margin: 0 auto;

}



.services-image-wrapper img {

  width: 100%;

  height: auto;

  border-radius: 8px; /* Optional slight rounding, remove if graphic has sharp edges */

  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1); /* Adds a subtle depth to the graphic */

}



/* Text Content Styling */

.services-heading {

  font-size: 32px;

  font-weight: 600;

  color: var(--text-dark);

  line-height: 1.3;

  margin-bottom: 15px;

}



.services-intro {

  color: var(--brand-orange);

  font-weight: 600;

  font-size: 24px;

  line-height: 1.5;

  margin-bottom: 25px;

}



/* Custom List Styling */

.services-list {

  list-style: none;

  padding-left: 0;

  margin-bottom: 30px;

}



.services-list li {

  position: relative;

  padding-left: 35px;

  margin-bottom: 15px;

  font-size: 1.2rem;

  color: #555;

  margin-top: 15px;

  line-height: 1.2em;

}



.services-list li::before {

  content: " "; /* Unicode character for checkmark */

  position: absolute;

  width: 26px;

  height: 26px;

  display: block;

  left: 0;

  color: #0075ed;

  font-weight: bold;

  background: url(../images/icon-blue-tick.svg) center center no-repeat;

  background-size: contain;

}



/* Disclaimer Styling */

.services-disclaimer {

  font-size: 1.2rem;

  color: var(--text-muted);

  line-height: 1.5;

  margin-bottom: 0;

}



/* Custom Variables */

/* :root {

        --brand-orange: #f27123;

        --brand-blue: #0d6efd; 

        --text-dark: #111111;

        --text-muted: #6c757d;

        --bg-white: #ffffff;

    } */



/* Section Styles */

.tax-services-section {

  padding: 80px 0;

  background-color: var(--bg-white);

}



/* Text Content Styles */

.tax-services-section .tax-heading {

  font-size: 32px;

  font-weight: 500;

  color: var(--text-dark);

  margin-bottom: 20px;

}



.tax-services-section .tax-subheading {

  color: var(--brand-orange);

  font-weight: 600;

  font-size: 24px;

  line-height: 1.4;

  margin-bottom: 20px;

  max-width: 90%;

}



.tax-services-section .tax-paragraph {

  color: var(--text-muted);

  font-size: 1.2rem;

  line-height: 1.6;

  margin-bottom: 40px;

  max-width: 95%;

}



/* Step List Styles */

.tax-services-section .step-list {

  display: flex;

  flex-direction: column;

  gap: 25px; /* Spacing between steps */

}



.tax-services-section .step-item {

  display: flex;

  align-items: center;

}



.tax-services-section .step-badge {

  width: 65px;

  height: 65px;

  min-width: 65px;

  background-color: var(--brand-blue);

  color: white;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  font-weight: 600;

  font-size: 0.9rem;

  box-shadow: 0 4px 10px rgba(13, 110, 253, 0.2);

}



.tax-services-section .step-text {

  color: var(--text-muted);

  font-size: 1.2rem;

  margin-left: 20px;

  margin-bottom: 0;

}



/* Image Wrapper */

.tax-services-section .tax-image-wrapper {

  position: relative;

  width: 100%;

  max-width: 550px;

  margin: 0 auto;

}



.tax-services-section .tax-image-wrapper img {

  width: 100%;

  height: auto;

  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);

  border-radius: 8px;

}



/* 

    :root {

        --brand-orange: #f27123;

        --brand-lgihtblue-bg: #1e5297;  

        --card-border: rgba(255, 255, 255, 0.4);  

        --text-white: #ffffff;

        --text-light: rgba(255, 255, 255, 0.85);  

    } */



/* Section Container */

.why-choose-section {

  background-color: var(--brand-lgihtblue-bg);

  padding: 80px 0;

  color: var(--text-white);

}



/* Headers */

.why-choose-section .section-subtitle {

  color: var(--brand-orange);

  font-size: 24px;

  font-weight: 600;

  margin-bottom: 10px;

}



.why-choose-section .section-title {

  font-size: 48px;

  font-weight: 600;

  margin-bottom: 50px;

  color: #fff;

}



/* Card Styles */

.feature-card {

  border: 1px solid var(--card-border);

  border-radius: 8px;

  padding: 35px 30px;

  height: 100%; /* Ensures all cards in a row are equal height */

  background-color: transparent;

  transition:

    transform 0.3s ease,

    background-color 0.3s ease;

}



.feature-card:hover {

  background-color: rgba(255, 255, 255, 0.05); /* Slight highlight on hover */

}



/* Icon & Logo Wrappers */

.card-icon-wrapper {

  margin-bottom: 25px;

  font-size: 2.5rem; /* Size for Font Awesome icons */

  color: var(--text-white);

  display: flex;

  align-items: center;

  height: 50px; /* Fixed height to keep spacing consistent */

}



/* Text Styles inside Card */

.card-title {

  font-size: 1.3rem;

  font-weight: 600;

  margin-bottom: 15px;

  color: var(--text-white);

}



.card-text {

  font-size: 1.2rem;

  line-height: 1.5;

  color: var(--text-light);

  margin-bottom: 0;

}



/* Placeholder styles for brand logos (Replace with actual <img> tags) */

.logo-placeholder {

  font-size: 2rem;

  font-weight: bold;

  display: flex;

  align-items: center;

  gap: 8px;

}

.logo-placeholder.xero {

  font-weight: 400;

  font-family: sans-serif;

  letter-spacing: -1px;

}



/* 



    :root {

        --brand-blue-bg: #224b7a;  

        --brand-orange: #ff6600;   

        --text-white: #ffffff;

        --text-dark: #333333;

        --text-muted: #888888;

    } */



/* Section Container */

.cost-effective-section {

  background-color: var(--brand-blue-bg);

  padding: 100px 0;

  color: var(--text-white);

}



/* Heading Styles */

.cost-effective-section .section-title {

  font-size: 48px;

  font-weight: 600;

  margin-bottom: 15px;

  letter-spacing: 0.5px;

  color: #fff;

}



.section-subtitle {

  font-size: 24px;

  font-weight: 600;

  margin-bottom: 40px;

  text-transform: none;

  color: #ff6700;

}



/* Form Card */

.form-card {

  background-color: #ffffff;

  border-radius: 12px;

  padding: 50px 45px;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);

}



/* Custom Input Group Styling */

.custom-input-group {

  margin-bottom: 25px;

}



.custom-input-group .input-group-text {

  background-color: transparent;

  border-right: none;

  color: #555;

  padding-left: 15px;

  padding-right: 10px;

}



.form-control {

  font-size: 1.2rem;

}

.custom-input-group .form-control {

  border-left: none;

  padding-left: 0;

  padding-top: 12px;

  padding-bottom: 12px;

  color: var(--text-dark);

}



.custom-input-group .form-control::placeholder {

  color: #999;

}



.custom-input-group .form-control:focus {

  box-shadow: none;

  border-color: #dee2e6; /* Keeps border color steady */

}



/* Add a focus ring to the entire input group when focused */

.custom-input-group:focus-within {

  box-shadow: 0 0 0 0.2rem rgba(255, 102, 0, 0.15);

  border-radius: 0.375rem;

}

.custom-input-group:focus-within .input-group-text,

.custom-input-group:focus-within .form-control {

  border-color: var(--brand-orange);

}



/* Submit Button */

.btn-submit {

  background-color: var(--brand-orange);

  color: white;

  font-weight: 600;

  font-size: 1.1rem;

  padding: 10px;

  border: none;

  border-radius: 6px;

  width: 100%;

  transition: background-color 0.3s ease;

  margin-top: 5px;

}



.btn-submit:hover {

  background-color: #e65c00;

  color: white;

}



/* Footer Text */

.form-footer-text {

  color: var(--text-muted);

  font-size: 1.2rem;

  margin-top: 25px;

  margin-bottom: 0;

}



/* 

    :root {

        --footer-bg: #3d3d3d;  

        --footer-bottom-bg: #000000;  

        --brand-blue: #0b5ed7;

        --text-white: #ffffff;

        --text-light-gray: #e0e0e0;

    } */



/* Main Footer Styles */

.site-footer {

  background-color: var(--footer-bg);

  color: var(--text-white);

  padding-top: 60px;

  padding-bottom: 40px;

}



/* Logo Area */

.footer-logo-link {

  text-decoration: none;

  display: inline-flex;

  align-items: center;

  margin-bottom: 20px;

}



.footer-logo-circle {

  width: 60px;

  height: 60px;

  background-color: var(--brand-blue);

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  color: white;

  font-weight: bold;

  font-size: 1.5rem;

  box-shadow:

    inset 0 0 0 2px var(--brand-blue),

    inset 0 0 0 4px var(--footer-bg); /* Simulates the white border ring on dark bg */

  margin-right: 15px;

}



.footer-logo-text {

  line-height: 1.1;

  font-weight: 700;

  color: var(--text-white);

  font-size: 1.3rem;

  letter-spacing: 0.5px;

}



.footer-tagline {

  font-size: 1.2rem;

  font-weight: 600;

  color: var(--text-white);

}



/* Middle Column - Get in Touch */

.footer-heading {

  font-size: 1.4rem;

  font-weight: 700;

  margin-bottom: 25px;

  color: var(--text-white);

}



.contact-list {

  list-style: none;

  padding: 0;

  margin: 0;

}



.contact-list li {

  margin-bottom: 15px;

  font-size: 1.2rem;

  color: var(--text-white);

  display: flex;

  align-items: flex-start;

  justify-content: center; /* Centered as per the image */

}



.contact-list i {

  margin-right: 12px;

  margin-top: 4px;

  font-size: 1rem;

}



.address-lines {

  display: flex;

  flex-direction: column;

  text-align: center;

}



.address-lines span {

  margin-bottom: 5px;

}



/* Right Column - Social Icons */

.social-links {

  display: flex;

  gap: 30px;

  justify-content: center;

}



.social-icon {

  width: 40px;

  height: 40px;

  display: flex;

  align-items: center;

  justify-content: center;

  color: white;

  border-radius: 8px; /* Slightly rounded squares */

  font-size: 1.5rem;

  text-decoration: none;

  transition:

    transform 0.2s ease,

    opacity 0.2s ease;

}



.social-icon:hover {

  opacity: 0.8;

  color: white;

  transform: translateY(-2px);

}



/* Social Brand Colors */

.social-icon.facebook {

  background-color: #1877f2;

  border-radius: 50%; /* FB icon is a circle in the image */

}

.social-icon.instagram {

  background: linear-gradient(

    45deg,

    #f09433 0%,

    #e6683c 25%,

    #dc2743 50%,

    #cc2366 75%,

    #bc1888 100%

  );

}

.social-icon.linkedin {

  background-color: #0a66c2;

}



/* Bottom Copyright Bar */

.footer-bottom {

  background-color: var(--footer-bottom-bg);

  color: var(--text-light-gray);

  padding: 15px 0;

  font-size: 1.2rem;

  text-align: center;

}



.footer-bottom a {

  color: var(--text-light-gray);

  text-decoration: none;

  transition: color 0.2s ease;

}



.footer-bottom a:hover {

  color: var(--text-white);

}



.separator {

  margin: 0 10px;

  color: #777;

}



/* CALL BUTTON */



.call-btn {

  position: fixed;

  left: 20px;

  bottom: 110px;
      z-index: 9;

}



.call-btn img {

  width: 69px;


}



/* WHATSAPP BUTTON */



.whatsapp-btn {

  position: fixed;

  right: 20px;

  bottom: 109px;

      z-index: 9;

}



.whatsapp-btn img {

  width: 69px;

  height: 69px;

}



#openMenuBtn {

  display: none;

}



/* .hero-section {

  display: block;

}

*/

.mobile-only {

  display: none !important;

}

.desktop-only {

  display: block !important;

}



.desk-only-icons,

.hero-section {

  display: block !important;

}

.mobile-container {

  display: none !important;

}



    .mob-footer {
        background-color: #ff6700;
        padding: 20px 15px;
        text-align: center;
        margin-top: auto;
        width: 100%;
        display: none !important;
        justify-content: space-between;
        gap: 20px;
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 1000;
    }

/* footer.mob-footer.mobile-only img {
    display: none;
} */

.icon.desk-only-icons img {
    margin-bottom: 100px;
    display: none;
}



.footer-icon-circle img {
    width: 64px;
}


.navbar .navbar-nav .nav-item a {
    padding-right:0px ;
}

.lead-form-card .input-group:has(select.form-control){cursor:pointer}
.lead-form-card .input-group select.form-control{cursor:pointer;padding-left:54px;border-left:1px solid #dee2e6;border-top-left-radius:0.375rem!important;border-bottom-left-radius:0.375rem!important}
.lead-form-card .input-group:has(select.form-control){position:relative}
.lead-form-card .input-group:has(select.form-control) .input-group-text{border:0;position:absolute;z-index:8;top:0;left:0;height:100%}
.lead-form-card .input-group select.form-control:focus {border-color:#ff6700;}
.lead-form-card .input-group select.form-control {background: url(../images/arrow-down.svg)no-repeat 100%;background-size: 20px;background-position-x: 98%;transition: all 0.25s ease-in}
.lead-form-card .input-group select.form-control:focus {background: url(../images/arrow-top.svg)no-repeat 100%;background-size: 20px;background-position-x: 98%;}

#booking-form .custom-input-group:has(select.form-control){cursor:pointer}
#booking-form .custom-input-group select.form-control{cursor:pointer;padding-left:54px;border-left:1px solid #dee2e6;border-top-left-radius:0.375rem!important;border-bottom-left-radius:0.375rem!important}
#booking-form .custom-input-group:has(select.form-control){position:relative}
#booking-form .custom-input-group:has(select.form-control) .input-group-text{border:0;position:absolute;z-index:8;top:0;left:0;height:100%}
#booking-form .custom-input-group select.form-control:focus {border-color:#ff6700;}
#booking-form .custom-input-group select.form-control {background: url(../images/arrow-down.svg)no-repeat 100%;background-size: 16px;background-position-x: 98%;transition: all 0.25s ease-in}
#booking-form .custom-input-group select.form-control:focus {background: url(../images/arrow-top.svg)no-repeat 100%;background-size: 16px;background-position-x: 98%;}


@media (min-width: 1200px) {

  .container,

  .container-lg,

  .container-md,

  .container-sm,

  .container-xl,

  .container-xxl {

    max-width: calc(100% - 60px);

  }

  .howitWorksWrap,

  .our-clients-section {

    padding-top: 20px;

    padding-bottom: 20px;

  }

  .benefits-section .container {

    padding: 60px 20px 30px !important;

    width: 100% !important;



    margin-top: 10px;

  }

}



@media (min-width: 1400px) {

  .container,

  .container-lg,

  .container-md,

  .container-sm,

  .container-xl,

  .container-xxl {

    max-width: 1360px;

  }

  .howitWorksWrap,

  .our-clients-section {

    padding-top: 50px;

    padding-bottom: 50px;

  }

  .accounting-fees-section .section-header h2 {

    margin-bottom: 50px;

  }

}



@media (min-width: 1600px) {

  .container,

  .container-lg,

  .container-md,

  .container-sm,

  .container-xl,

  .container-xxl {

    max-width: 1540px;

  }

  .howitWorksWrap,

  .our-clients-section {

    padding-top: 60px;

    padding-bottom: 20px;

  }

}



@media (max-width: 1400px) {

  .hero-title {

    font-size: 2.8rem;

  }

  .hero-title br {

    display: none;

  }
  .navbar-nav {
    gap: 15px !important;
}

}



@media (max-width: 1200px) {

  .navbar {

    padding: 0px 0;

  }

  .navbar .container {

    padding-left: 15px;

    padding-right: 15px;

  }

  .navbar-nav {

    gap: 10px !important;

  }

  .navbar-brand {

    width: 240px;

    height: auto;

  }



  .navbar-brand img {

    width: 210px;

    height: auto;

  }

  .container,

  .container-lg,

  .container-md,

  .container-sm {

    max-width: 1160px;

    padding-left: 40px;

    padding-right: 40px;

  }



  .monthlyPackageWrap {

    display: flex;

    /* flex-direction: column; */

  }

  .howitWorksWrap {

    padding-top: 30px;

    padding-bottom: 30px;

  }



  .monthlyPackageWrap > div {

    width: 100%;

  }

  .monthlyPackageWrap .monthlyBoxRight .card-block {

    /* border-top-left-radius: initial !important;

                border-bottom-left-radius: initial !important; */

    border: 2px solid var(--primary-blue) !important;

    /* border-left: 2px solid var(--primary-blue) !important; */

    border-radius: 15px !important;

    /* margin-top: 20px; */

  }



  .accounting-fees-section {

    padding: 60px 0 65px;

  }



  .accounting-fees-section .section-header h5,

  .accounting-fees-section .section-header h5.topTitleOrange {

    text-transform: initial;

  }

  .accounting-fees-section .section-header h2 {

    margin-bottom: 50 !important;

  }



  .benefits-section {

    padding: 0;

  }



  .benefits-section .container {

    padding: 60px 20px 60px !important;

    width: 100% !important;

    max-width: calc(100% - 20px);

    margin-top: 10px;

  }

  .footer-bottom .container .text-left {

    text-align: center !important;

  }

  .nav-link {
  font-size: 16px !important;
}
.btn-call {
  font-size: 15px !important;
}

}



@media (max-width: 991px) {

  #openMenuBtn {

    display: flex;

  }

  /* Container for the custom hamburger */

  .custom-toggler {

    border: none;

    padding: 0;

    width: 30px;

    height: 21px; /* Height of the 3 bars + spacing */

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    background: transparent;

  }



  /* Removes the default Bootstrap click outline */

  .custom-toggler:focus {

    box-shadow: none;

  }



  /* Individual bars */

  .custom-toggler .bar {

    width: 100%;

    height: 3px;

    background-color: #333333; /* Dark gray color of the icon */

    border-radius: 3px;

    transition: all 0.3s ease-in-out;

  }



  /* --- ANIMATION TO 'X' WHEN MENU IS OPEN --- */



  /* Rotate top bar down */

  .custom-toggler[aria-expanded="true"] .bar-1 {

    transform: translateY(9px) rotate(45deg);

  }



  /* Fade out middle bar */

  .custom-toggler[aria-expanded="true"] .bar-2 {

    opacity: 0;

  }



  /* Rotate bottom bar up */

  .custom-toggler[aria-expanded="true"] .bar-3 {

    transform: translateY(-9px) rotate(-45deg);

  }



  #mainNavbar {

    padding-top: 0px;

    padding-bottom: 0px;

    background-color: #ffffff;

    transition: all 0.3s ease-in-out;

    box-shadow: none;

  }

  #mainNavbar.navbar-scrolled .navbar-collapse {

    top: 80px;

  }



  .navbar-collapse {

    flex-basis: 100%;

    flex-grow: 1;

    align-items: center;

    padding: 30px 30px;

    position: fixed;

    left: 0;

    top: 80px;

    background: #fff;

    width: 100%;

    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);

  }

  .navbar-toggler {

    border: none;

  }

  .container,

  .container-lg,

  .container-md,

  .container-sm {

    padding-left: 40px;

    padding-right: 40px;

  }



  .howitWorksWrap {

    padding-top: 50px;

    padding-bottom: 50px;

  }

  /* 

  .video-container {

    padding-bottom: 54%;

  } */



  .hero-title {

    font-size: 2.5rem;

  }

  .lead-form-card {

    margin-top: 40px;

    padding: 25px;

  }



  .section-header h2 {

    font-size: 2.2rem;

  }

  .card-right h3 {

    font-size: 1.3rem;

  }



  .benefits-title {

    font-size: 2rem;

    margin-bottom: 40px;

    letter-spacing: 0.1rem;

  }

  .benefit-item {

    margin-bottom: 40px;

  }



  .section-title {

    font-size: 2rem;

    margin-bottom: 40px;

  }

  .content-heading {

    font-size: 1.5rem;

  }

  .fee-image-wrapper {

    margin-top: 40px;

  }



  .services-heading {

    font-size: 1.5rem;

  }

  .services-image-wrapper {

    margin-bottom: 40px;

  }



  .tax-services-section .tax-heading {

    font-size: 1.75rem;

  }

  .tax-services-section .tax-image-wrapper {

    margin-top: 50px;

  }

  .tax-services-section .tax-subheading,

  .tax-paragraph {

    max-width: 100%;

  }



  .contact-list li,

  .social-links,

  .footer-heading {

    justify-content: center;

    text-align: center;

  }

  .footer-logo-link {

    justify-content: center;

    width: 100%;

  }

  .footer-tagline {

    text-align: center;

    margin-bottom: 40px;

  }

  .footer-col {

    margin-bottom: 40px;

  }

  .footer-col:last-child {

    margin-bottom: 0;

  }



  .hero-section .container {

    padding: 0 20px;

  }

}



/* Responsive Adjustments */

@media (min-width: 768px) and (max-width: 991px) {

  /* Your styles go here */

  .hero-section .container {

    padding: 0 40px;

  }

  .hero-section .container .row > * {

    width: 50%;

  }

  .hero-section .container .hero-title {

    font-size: 2rem;

  }

}



/* Responsive Adjustments */

@media (max-width: 768px) {

  /* .hero-section {

    display: none;

  } */

  .mobile-main-header {

    display: block;

  }



  .container,

  .container-lg,

  .container-md,

  .container-sm {

    padding-left: 30px;

    padding-right: 30px;

  }

  .howitWorksWrap {

    padding-top: 30px;

    padding-bottom: 30px;

  }



  .clients-title {

    font-size: 2rem;

  }

  .clients-section {

    padding: 50px 0;

  }



  .section-title {

    font-size: 2rem;

  }

  .feature-card {

    padding: 25px 20px;

  }



  .cost-effective-section {

    padding: 60px 0;

  }

  .section-title {

    font-size: 2rem;

  }

  .form-card {

    padding: 30px 20px;

  }

  .calculator-card {

    padding: 25px 20px;

  }

  .result-bar {

    margin-top: 25px;

  }

  .slider-label {

    margin-bottom: 10px;

    display: block;

  }

}



@media (max-width: 767px) {

  body {

    padding-bottom: 70px;

  }

  .desk-only-icons,

  .hero-section {

    display: none !important;

  }

  .mobile-container {

    display: block !important;

  }

  .mob-footer {

    background-color: #00B856;

    padding: 12px 15px;

    text-align: center;

    margin-top: auto;

    width: 100%;

    display: block !important;

    justify-content: space-between;

    gap: 20px;

    position: fixed;

    bottom: 0;

    left: 0;

    z-index: 1000;

  }

.mob-footer a {
    text-align: center;
    color: #fff;
    font-size: 22px;
    font-weight: bold;
    text-decoration: none;
}


  .mob-footer .footer-icon-circle {

    width: 50px;

    height: 50px;

    border-radius: 50%;

    /* background-color: white; */

    display: flex;

    justify-content: center;

    align-items: center;

    color: #e65100;

    font-size: 1.4em;
	display:none;

  }

  .mob-footer .footer-icon-circle img {

    width: 50px;

    height: 50px;

  }

  .slider-wrapper {

    flex-direction: column;

    align-items: flex-start;

  }

  .slider-label {

    margin-right: 0;

    margin-bottom: 10px;

  }

  .custom-slider-container {

    width: 100%;

    height: 25px;

    margin-bottom: 15px;

  }

  .slider-track {

    height: 5px;

  }

  .slider-handle {

    width: 50px;

    height: 25px;

    font-size: 0.8rem;

  }

  .result-bar {

    font-size: 0.8rem;

  }

  .card-block {

    padding: 20px;

  }

  .btn-book {

    width: auto;

    display: block;

    margin-left: auto;

    margin-right: auto;

  }

  .card-list li {

    font-size: 1rem;

    padding-left: 5px;

  }

  .contact-list li {

    font-size: 1rem;

  }

  .card-list li::before {

    left: -32px;

  }



  .footer-bottom {

    font-size: 1rem;

  }



  .site-footer .mobile-only {

    display: block !important;

  }

  .site-footer.desktop-only {

    display: none !important;

  }


  /* footer.mob-footer.mobile-only img {
    display: block;
} */

}



@media (max-width: 767px) {

  h5.topTitleOrange {

    font-size: 1.2rem;

  }

  h2.mainTitle {

    font-size: 2rem;

  }

  .fee-structure-section .section-title,

  .why-choose-section .section-title,

  .cost-effective-section .section-title {

    font-size: 2rem;

    letter-spacing: 0.1rem;

  }

  .fee-structure-section .content-heading {

    font-size: 1.5rem;

  }

  .footer-logo-link {

    justify-content: center;

    width: 100%;

    margin-bottom: 0;

  }

  .footer-logo-link img {

    max-width: 75%;

  }

  .footer-tagline {

    text-align: center;

    margin-bottom: 40px;

    margin-top: -10px;

  }

  .monthlyPackageWrap .monthlyBoxRight .card-block {

    border: 2px solid var(--primary-blue) !important;

    border-radius: 15px !important;
/* 
    margin-top: 20px; */

  }

  .monthlyPackageWrap .monthlyBoxLeft, .monthlyPackageWrap .monthlyBoxRight {
    width: 100%;
    margin-bottom: 0 !important;
}

.monthlyPackageWrap .text-start {
    position: absolute;
    bottom: 20px;
}

.monthlyPackageWrap {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    padding: 0 0 100px;
    gap: 18px;
}

}



@media (max-width: 575px) {

  .container,

  .container-lg,

  .container-md,

  .container-sm {

    padding-left: 20px;

    padding-right: 20px;

  }

  .contact-list i {

    margin-right: 12px;

    margin-top: 4px;

    font-size: 1rem;

  }

  .section-header h2 {

    font-size: 1.8rem;

  }

  .result-bar {

    padding: 0 10px;

  }

  .card-header h3 {

    font-size: 1.1rem;

  }

  .disclaimer-text {

    font-size: 0.7rem;

  }

  .hero-title {

    font-size: 2rem;

  }

  h2.mainTitle {

    font-size: 1.8rem;

  }



  #callNumb {

    font-size: 0.9rem;

  }



  .navbar-brand {

    width: 160px;

    height: auto;

  }

  .navbar-brand img {

    width: 160px;

    height: auto;

  }



  .btn-call {

    padding: 10px 10px;

    font-size: 14px;

    font-weight: 500;

  }

  .btn-book {

    padding: 10px 18px;

    font-size: 1rem;

    margin: 0 auto;

    max-width: 420px;

  }

  
    .accounting-fees-section {
        padding: 59px 0 0px;
    }
    
      .btn-call img {
    display: none;
}


.navbar .container {
        padding-left: 8px;
        padding-right: 8px;
    }
  

}



@media (max-width: 480px) {

  .hero-title br {

    display: none;

  }



  .navbar-brand {

    width: 110px;

    height: auto;

  }

  .navbar-brand img {

    width: 108px !important;

    height: auto;

  }



  .btn-call {

           padding: 8px 10px;
        font-size: 9.5px !important;

    font-weight: 500;

  }
  
  
#booking-form .custom-input-group select.form-control {
    padding-right: 33px;
}

}



/* Burger Menu Button */

.burger-btn {

  background: none;

  border: none;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  height: 18px;

  width: 26px;

  cursor: pointer;

  padding: 0;

}



.burger-btn span {

  display: block;

  height: 2px;

  width: 100%;

  background-color: #3b5cbd; /* Blue lines */

  border-radius: 2px;

  transition: all 0.3s ease;

}



/* --- Sliding Menu Styling --- */

.side-menu {

  position: fixed;

  top: 0;

  right: -330px; /* Hidden off-screen by default */

  width: 320px;

  height: 100vh;

  background-color: #ffffff;

  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);

  z-index: 1000;

  transition: right 0.3s ease-in-out; /* Smooth sliding animation */

  padding: 20px;

  overflow-y: auto;

}



.side-menu.active {

  right: 0; /* Slides in */

}



.close-btn {

  background: none;

  border: none;

  font-size: 30px;

  color: #333;

  cursor: pointer;

  position: absolute;

  top: 15px;

  right: 20px;

}



.menu-links {

  list-style: none;

  margin-top: 60px;

}



.menu-links li {

  margin-bottom: 20px;

}



.menu-links a {

  text-decoration: none;

  color: #333;

  font-size: 18px;

  font-weight: bold;

  display: block;

  padding: 10px 0;

  border-bottom: 1px solid #eee;

  transition: color 0.2s;

}



.menu-links a:hover {

  color: #3b5cbd;

}



/* Dark Overlay behind the menu */

.menu-overlay {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100vh;

  background: rgba(0, 0, 0, 0.5);

  z-index: 999;

  opacity: 0;

  visibility: hidden;

  transition: all 0.3s ease-in-out;

}



.menu-overlay.active {

  opacity: 1;

  visibility: visible;

}