:root {
    --erickson-brown:#814A3C;
    --erickson-brown-off:#bd6954;
    --erickson-black:#000000;
}
body{
    font: normal normal normal 20px/33px Assistant;
    color: var(--erickson-black);
}
a{
    color: var(--erickson-brown);
    text-decoration: underline;
}
a:hover{
    color: var(--erickson-brown-off);
}
.text-white {
    color: #fff;
}
.text-white a {
    color: #fff;
    text-decoration: underline;
}
ul{
    padding-left: 20px;
}
.group-title{
    font: normal normal bold 34px/41px Bitter;
    color: var(--erickson-brown);
}
@media (max-width: 768px){
    .group-title{
        font: normal normal bold 28px/36px Bitter;
    }
}

/* image border 3D */

.image-3d {
           display: inline-block;
           padding: 10px;
           background-color: white;
           border-radius: 8px;
           box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5),
                       -5px -5px 15px rgba(255, 255, 255, 0.5);
       }

       .image-3d img {
           display: block;
           border-radius: 8px;
           max-width: 100%;
       }

.book-card {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  background-color: #fff;
  height: 300px; /* Set a standard height for desktop */
  width: 200px; /* Standard width */
  margin: 0 auto;
}

.book-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease-in-out;
}

.book-card:hover {
  transform: translateY(-10px) rotateX(5deg) rotateY(5deg);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

.book-link {
  text-decoration: none;
}

.book-link:hover .book-card img {
  transform: scale(1.05);
}

/* Adjust for smaller screens */
@media (max-width: 576px) {
  .book-card {
    height: 250px; /* Smaller height for mobile */
    width: 160px;  /* Smaller width for mobile */
  }
}

@media (max-width: 768px) {
  .book-card {
    height: 270px; /* Medium screens */
    width: 180px;
  }
}

/* background */
.bg-black{
    background-color: var(--erickson-black);
}
/* color */
.text-erickson-brown{
    color: var(--erickson-brown);
}
/* button color */
.btn-black{
    background-color: var(--erickson-black);
    border-color: var(--erickson-black);
    color: #fff;
}
.btn-black:hover{
    color: #fff;
    background-color: var(--erickson-brown);
    border-color: var(--erickson-brown);
}
.btn-white{
    border-color: #fff;
    background-color: #fff;
    color: #black;
}
.btn-white:hover{
    color: #fff;
    background-color: var(--erickson-brown);
    border-color: var(--erickson-brown);
}
.btn-check:focus+.btn-black, .btn-black:focus{
    /* color: #fff;
    background-color: #1c1f23;
    border-color: #1a1e21; */
    -webkit-box-shadow: 0 0 0 .25rem rgba(66, 70, 73, .5);
            box-shadow: 0 0 0 .25rem rgba(66, 70, 73, .5);
}
.btn-erickson{
    border-color: var(--erickson-brown);
    color: var(--erickson-brown);
}
.btn-erickson:hover{
    background-color: var(--erickson-brown);
    color: #fff;
}
.btn-220{
    min-width: 220px;
}
@media (max-width: 768px){
    .btn-220{
        min-width: inherit;
    }
}

.btn{
    padding-top: 9px;
    padding-bottom: 9px;
}
/* border */
.border-erickson{
    border-color: var(--erickson-brown);
    color: var(--erickson-brown);
}

/* page loading */
.page-loading {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    width: 100%;
    height: 100%;
    z-index: 5000;
    background-color: white;
    background-image: url('../images/loading.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 50px;
}

/* Header */
/* html only header */
html {
    margin-top: 100px;
    scroll-padding-top: 100px; /* height of sticky header */
}
header nav.navbar.navbar-expand-lg.navbar-light.py-2{
    padding: 27px 0 !important;

}
@media (max-width: 420px){
    header .navbar-brand img{
        max-width: 160px;
    }
}
nav.navbar-light .navbar-nav .nav-item{
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
nav.navbar-light .navbar-nav .nav-link{
    font: normal normal normal 20px/26px Assistant;
    color: var(--erickson-black);
    padding-left: 0;
    padding-right: 0;
}
nav.navbar-light .navbar-nav .nav-link.active,
nav.navbar-light .navbar-nav .nav-link:focus{
    color: var(--erickson-brown)
}
@media (max-width: 768px){
    html {
        margin-top: 66px;
        scroll-padding-top: 66px; /* height of sticky header */
    }
    header nav.navbar.navbar-expand-lg.navbar-light.py-2{
        padding: 10px 0 !important;
    }
    nav.navbar-light .navbar-nav .nav-item{
        padding-left: .7rem;
        padding-right: .7rem;
    }
}
/* End header */



/* banner */
.banner-title{
    font: normal normal bold 62px/73px Bitter;
}
.floating-ribbon{
    z-index: 0;
}
.ribbon{
    background-color: #814A3C;
    z-index: -1;
}
.ribbon-details{
    background-color: #814A3C;
    max-width: -webkit-fit-content;
    max-width: -moz-fit-content;
    max-width: fit-content;
    padding-right: 30px;
}
.ribbon-details h3{
    font: normal normal bold 100px/100px Assistant;
    vertical-align: baseline;
}
.ribbon-details h3 span{
    font: normal normal bold 47px/100px Assistant;
    vertical-align: top;
}
.ribbon-details p{
    font: normal normal normal 30px / 80px Assistant;
    background-image: url(../images/anchor.svg);
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 30px;
    padding-bottom: 3px;
}
.banner-details ul{
    padding-left: 20px;
    font-size: 22px;
}
@media (max-width: 1200px){
    .ribbon-details h3 {
        /* font: normal normal bold 80px / 80px Assistant; */
        font: normal normal bold 105px / 105px Assistant;
    }
    .ribbon-details h3 span {
        /* font: normal normal bold 40px / 80px Assistant; */
        font: normal normal bold 48px / 105px Assistant;
    }
    .ribbon-details p {
        font: normal normal normal 25px / 80px Assistant;
    }
}
@media (max-width: 992px){
    .banner .banner-floating-items.position-absolute{
        position: relative !important;
    }

    .banner-title {
        font: normal normal bold 50px / 60px Bitter;
    }

    .ribbon-details{
        background-color: transparent;
        max-width: -webkit-fit-content;
        max-width: -moz-fit-content;
        max-width: fit-content;
        padding-right: 0;
        color: #814a3c !important;
        gap: 12px !important;
    }

    .ribbon-details p {
        font: normal normal normal 18px / 30px Assistant;
        padding-left: 15px;
        background-image: url(../images/anchor_mobile.svg);
        background-position-y: center;
    }
}
@media (max-width: 580px){
    .banner-title {
        font: normal normal 700 45px / 55px Bitter;
        margin: 0;
        margin-bottom: 8px;
    }
    .banner-details ul {
        margin-top: 10px;
        margin-bottom: 15px;
        font-size: 20px;
    }
}
/* end banner */




/* counter container */
.counter-count{
    font: normal normal normal 89px/100px Assistant;
}
.counter-title{
    font-weight: 600;
}
@media (max-width: 992px){
    .counter-count{
        font: normal normal normal 46px/60px Assistant;
    }
}
@media (max-width: 580px){
    .counter-count{
        font: normal normal normal 38px/42px Assistant;
    }
    .counter-title{
        font-size: 18px;
        line-height: 22px;
    }
}
/* end counter container */


.equal_50{
    max-width: 1140px;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 30px;
}
.equal_50_details,
.equal_50_thumb{
    width: 500px;
    max-width: 100%;
}
@media (max-width:991px){
    .equal_50{
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        gap: 15px;
    }
    .equal_50.reverse{
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
            -ms-flex-direction: column-reverse;
                flex-direction: column-reverse;
    }
    .equal_50_details,
    .equal_50_thumb{
        width: 500px;
        max-width: 100%;
    }
}

/* big-grey-box container */
.big-grey-box{
    background-color: #E2E2E2;
}

/* company experience */
.company-experience img{-o-object-fit: scale-down;object-fit: scale-down;}
.company-experience h5{
    font-weight: 600;
}
/* end company experience */


ul.timeline {
    position: relative;
    padding: 0;
    margin-left: 24px;
    list-style: none;
    width: 900px;
    max-width: 100%;
}
ul.timeline::before {
    content: "";
    width: 1px;
    height: calc(100% - 100px);
    position: absolute;
    left: 0;
    top: 52px;
    display: block;
    background: #814A3C;
}
ul.timeline li{
    position: relative;
    padding-left: 50px;
    padding-bottom: 80px;
    z-index: 0;
}
ul.timeline li:last-child{
    padding-bottom: 0;
}
ul.timeline li::before{
    content: url(../images/list_icon.svg);
    position: absolute;
    top: 0;
    left: -10px;
}
ul.timeline li.first::before{
    content: url(../images/list_icon_first.svg);
    left: -23px;
}
ul.timeline li.last::before{
    content: url(../images/list_icon_last.svg);
    left: -20px;
    background-color: white;
}
ul.timeline li.last::after {
    content: "";
    width: 10px;
    height: 100%;
    position: absolute;
    top: -10px;
    left: -1px;
    background: white;
    z-index: -1;
}
ul.timeline li h5{
    font: normal normal bold 24px/22px Bitter;
    color: #814A3C;
}
ul.timeline li p{
    font: normal normal normal 26px/38px Assistant;
    color: #1A1A1A;
    margin: 0;
}
@media(max-width: 580px){
    ul.timeline li{
        padding-bottom: 40px;
        padding-left: 25px;
    }
}
/* for-companies-section */
.for-companies-section{
    background-color: #DBDBDB;
}
/* end for-companies-section */





/* faq section */
.faq-accordion .accordion-header button.accordion-button{
    padding-left: 0;
    padding-right: 0;
    font-size: 22px;
    color: #1A1A1A;
}

.faq-accordion .accordion-header button.accordion-button:not(.collapsed){
    background-color: transparent;
    color: #1A1A1A;
}
.faq-accordion .accordion-header button.accordion-button:focus{
    -webkit-box-shadow: none;
            box-shadow: none;
}
.faq-accordion .accordion-header button.accordion-button span{
    padding: 0 10px;
}
.faq-accordion .accordion-header button.accordion-button::after{
    -webkit-box-ordinal-group: 0;
        -ms-flex-order: -1;
            order: -1;
    margin-left: 0;
}
.faq-accordion .accordion-header button.accordion-button::after{
    background-image: url(../images/plus.svg);
    background-position: left center;
}
.faq-accordion .accordion-header button.accordion-button:not(.collapsed)::after{
    background-image: url(../images/minus.svg)
}
/* end faq section */


/* Footer Contacts */
.quick-links li{
    max-width: -webkit-max-content;
    max-width: -moz-max-content;
    max-width: max-content;
    border-color: #707070;
}
.quick-links li a{
    color: #B0B0B0;
}
.quick-links li a:hover{
    color: #ffffff;
}
form .multicountry-phone-input .iti{
    width: 100%;
}
form .has-invalid .invalid-feedback{
    display: block;
}
/* footer contacts */



/* whatsapp */
.whatsapp-chat{z-index: 0;}
.whatsapp-chat-btn{position:fixed;right: 20px;bottom: 20px;height:auto;width:auto;background:#25D366;padding:12.5px;border-radius:50px;cursor:pointer}
.whatsapp-chat-btn:hover{box-shadow:2px 2px 15px #ccc;}
/*===============================*/
.chat-box{position:fixed;right:20px;bottom:100px;width:300px;max-width: 95%; height:200px;transition:all .5s;z-index: 500000}
.chat-box-top{width:100%;line-height:2;background:rgb(18, 140, 126);color:white;text-align:center;border-radius:5px 5px 0 0;padding:0 10px;}
.chat-box-msg{background:#ece5dd;padding:10px;border-radius:0 0 5px 5px;box-shadow:0 0 25px -10px #999;}
.chat-box-msg p{font-size: 14px;
    padding: 12px 0;
    padding-right: 10px;
    padding-left: 25px;
    background: white;
    border-radius: 0 10px 10px 40px;
    margin-bottom: 40px;
    line-height: normal;}
.chat-box-form{display:flex;justify-content: space-between;gap: 8px;}
.chat-box-in{width:90%;}
.chat-box-form input{border-radius:5px 0 5px 5px;border:none;outline:none;font-size:14px;padding:5px 10px;line-height:2;    width: 100%;}
.chat-box-btn{    width: auto;
    padding: 0;cursor: pointer;}
    .chat-box-btn:hover{opacity: .8;}
.chat-box-top-right{float:right;padding:5px 0;line-height: normal;}
.chat-box-close{cursor: pointer;}
.chat-box:after{content:'';
    position: absolute;
    top:58%;
    left: 90%;
    width: 0;
    height: 0;
    border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;

  border-right:25px solid #ece5dd;}
/* end whatsapp */

a {
    text-decoration: underline;
    font-weight: bold;
}
p {
  margin-top: 16px;
}
.white-text {
  color: #fff;
}
/* to make more space between sections */
.custom-mt {
  margin-top: 9rem; /* Adjust as needed */
}
/* to make more space between sections */
.custom-mt-5 {
  margin-top: 6rem; /* Adjust as needed */
}
.box-icon {
  width: auto; /* Set the desired width */
  height: 100px; /* Maintain aspect ratio */
  padding-bottom: 10px;
  color: #814A3C;
}
/* Basic style for the navbar links */
.nav-link {
  position: relative;
  display: inline-block;
  text-decoration: none;
  color: #000; /* Initial text color */
  font-size: 16px; /* Initial font size */
  transition: color 0.3s ease;
}

/* Animated underline on hover */
.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background-color: #814A3C; /* Underline color on hover */
  transform: scaleX(0);
  transform-origin: bottom right;
  transition: transform 0.3s ease;
}

/* Bounce animation */
@keyframes bounce {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

/* Hover effects */
.nav-link:hover {
  color: #814A3C; /* Text color on hover */
  animation: bounce 0.6s ease; /* Apply bounce animation */
}

.nav-link:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

/* Active state for the current menu item */
.nav-link.active {
  color: #814A3C; /* Text color for active link */
  font-weight: bold; /* Optional: make the active link bold */
}

/* Optional: underline for active link */
.nav-link.active::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

/* Custom style for the banner-inside section */
.banner-inside {
  background-size: cover;
  background-position: center center; /* Default to center */
  height: 30vh; /* Adjusted for larger screens */
  display: flex;
  align-items: center; /* Center items vertically */
  padding: 0 2rem; /* Horizontal padding */
  color: white; /* Text color, change as needed */
  position: relative; /* Ensure proper positioning of text */
}

/* Optional classes to align the background image */
.banner-inside.top {
  background-position: center top; /* Align background image to the top */
}

.banner-inside.bottom {
  background-position: center bottom; /* Align background image to the bottom */
}

.banner-inside.left {
  background-position: left center; /* Align background image to the left */
}

.banner-inside.right {
  background-position: right center; /* Align background image to the right */
}

.banner-inside.custom {
  background-position: 20% 30%; /* Custom positioning */
}

.banner-title2 {
  font-size: 2.2rem; /* Adjust size as needed */
  max-width: 500px; /* Max width for the title */
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .banner-inside {
    height: 40vh; /* Adjust height for mobile */
    padding: 0 1rem; /* Reduced padding */
  }

  .banner-title {
    font-size: 1.5rem; /* Smaller font size for mobile */
    max-width: 90%; /* Allow the title to use more width */
  }
}

/* Extra small devices (phones, less than 576px) */
@media (max-width: 576px) {
  .banner-inside {
    height: 35vh; /* Further reduced height for very small screens */
  }

  .banner-title {
    font-size: 1.25rem; /* Even smaller font size for very small screens */
  }
}

/* download counter script css */
.download-info {
  margin-top: 0.5rem; /* Space between the button and download info */
  text-align: center; /* Center horizontally */
  font-size: 1rem; /* Adjust font size as needed */
}

#downloadCount {
  font-size: 1rem; /* Larger font size for the count */
  color: #814A3C; /* White color for the count */
  margin-right: 0.5rem; /* Space between count and word */
}

a#downloadButton {
    background-color: #814A3C;
    color: white;
    padding: 15px 30px;
    font-size: 1.25rem;
    text-decoration: none;
    border-radius: 50px;
    transition: background-color 0.3s ease;
}

a#downloadButton:hover {
    background-color: #2980b9;
}
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.light-grey{
    background-color: #f9f9f9;
}
.big-grey-box{
    background-color: #f9f9f9;
}
.margintop {
  margin-top: 50px;
}
.resize-image-grey-box {
    width: 75%;
    height: auto; /* Maintain aspect ratio */
    display: block; /* Optional: This removes the gap below the image if it's inside inline elements */
    margin: 0 auto; /* Optional: Centers the image horizontally */
}
.custom-paragraph {
      width: 65%;
      font-size: 1.8rem; /* Adjust as needed for "large" text */
      font-style: italic; /* Apply italics to the entire paragraph */
      margin: 0 auto; /* Center the paragraph horizontally */
      line-height: 1.6; /* Adjust line height to control spacing between lines */
      color: grey;
      letter-spacing: 0.05em; /* Adjust character spacing */
  }
  .nine-cubes img{-o-object-fit: scale-down;object-fit: scale-down;}
  .nine-cubes h5{
      font-weight: 600;
  }

  /* Floating Scroll-to-Top Arrow Styles */
  .scroll-to-top {
      position: fixed;
      bottom: 40px;
      right: 40px;
      display: none; /* Hidden initially */
      font-size: 24px;
      background-color: #007bff; /* Bootstrap primary color */
      color: white;
      border-radius: 50%;
      padding: 10px;
      text-align: center;
      z-index: 1000;
      cursor: pointer;
      box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
      transition: opacity 0.3s ease-in-out;
  }

  .scroll-to-top:hover {
      background-color: #0056b3; /* Darker shade for hover effect */
  }

    .custom-list {
      list-style: none; /* Remove default bullets */
      padding: 0;
    }

    .custom-list li {
      position: relative;
      padding-left: 20px; /* Space for the checkmark */
      padding-top: 10px;
    }

    .custom-list li::before {
      content: '\2713'; /* Unicode for checkmark */
      position: absolute;
      left: 0;
      color: #814A3C; /* Change color if needed */
    }
    /* Fixed Navigation Styles */
  .faq-fixed-nav {
    position: fixed;
    top: 60%;
    right: 30px; /* Adjust the right margin for larger screens */
    transform: translateY(-50%);
    background-color: white;
    padding: 1rem;
    border-radius: 10px;
    z-index: 1000;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
  .faq-content {
    margin-top: 2rem;
    margin-bottom: 10rem;
  }
  /* List styling */
  .faq-fixed-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .faq-fixed-nav ul li {
    margin-bottom: 1rem;
  }

  .faq-fixed-nav ul li a {
    display: block;
    padding: 0.75rem 1.5rem;
    background-color: white;
    color: #814A3C; /* Brown text */
    text-decoration: none;
    font-weight: bold;
    border: 2px solid #814A3C; Brown border */
    border-radius: 8px;
    transition: background-color 0.3s ease, color 0.3s ease;
  }

  /* Hover state */
  .faq-fixed-nav ul li a:hover {
    background-color: #814A3C; /* Brown background on hover */
    color: white; /* White text on hover */
  }

  /* Active state - when a section is active */
  .faq-fixed-nav ul li a.active {
    background-color: #814A3C; /* Brown background */
    color: white; /* White text */
  }

  /* Mobile adjustments */
  @media (max-width: 768px) {
    .faq-fixed-nav {
      right: 20px; /* Adjust for smaller screens */
      padding: 0.75rem;
      width: 80px; /* Reduce width for mobile */
    }

    .faq-fixed-nav ul li a {
      padding: 0.5rem 1rem; /* Reduce padding for mobile */
      font-size: 0.9rem; /* Adjust font size for mobile */
      white-space: nowrap; /* Prevent text wrapping */
    }
  }

  @media (max-width: 576px) {
    .faq-fixed-nav {
      right: 10px; /* Further adjust for extra small screens */
      width: 60px; /* Further reduce width */
    }

    .faq-fixed-nav ul li a {
      padding: 0.5rem; /* Further reduce padding */
      font-size: 0.8rem; /* Further reduce font size */
    }
  }
  /* Section styling */
  .grid-section {
    padding: 60px 0;
    background-color: #fff; /* Optional background color */
  }

  /* Individual grid boxes */
  .grid-box {
    display: flex;
    justify-content: center; /* Center text horizontally */
    align-items: center; /* Center text vertically */
    width: 100%; /* Full width within the column */
    aspect-ratio: 1 / 0.5; /* Ensures the box is a square */
    background-color: white;
    text-decoration: none; /* Removes underline from links */
    color: #333; /* Default text color */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Creates 3D effect */
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    border-radius: 10px; /* Optional rounded corners */
  }

  /* Box content styling */
  .box-content {
    font-size: 1.5rem; /* Size of the title text */
    font-weight: bold;
    color: #814A3C; /* Brown text color */
    text-align: center; /* Center text inside the box */
    transition: color 0.3s ease; /* Smooth transition for text color */
  }

  /* Hover effect */
  .grid-box:hover {
    background-color: #814A3C; /* Changes background to brown */
    color: white; /* Changes text color to white on hover */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Enhances the 3D effect */
  }

  .grid-box:hover .box-content {
    color: white; /* Ensures text color changes to white on hover */
  }

  /* Responsive adjustments */
  @media (max-width: 1200px) {
    .col-md-4 {
      max-width: 33.3333%; /* Ensures 3 columns on medium-large screens */
    }
  }

  @media (max-width: 992px) {
    .col-md-4 {
      max-width: 50%; /* 2 columns on medium screens */
    }
  }

  @media (max-width: 768px) {
    .col-md-4 {
      max-width: 50%; /* 2 columns on small screens */
    }

    .box-content {
      font-size: 1.2rem; /* Slightly smaller font size on smaller screens */
    }
  }

  @media (max-width: 576px) {
    .col-md-4 {
      max-width: 100%; /* Stack boxes in one column on extra small screens */
    }

    .grid-box {
      aspect-ratio: auto; /* Allow height to adjust naturally on very small screens */
    }

    .box-content {
      font-size: 1rem; /* Further reduce font size on extra small screens */
    }
  }
  /* Quote Section Styling */
  .quote-section {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    min-height: 50vh; /* Ensure a minimum height */
    box-sizing: border-box; /* Include padding in height calculation */
    position: relative; /* Ensure proper positioning */
  }

  .quote-block {
    background-color: #ffffff; /* White background */
    padding: 2rem;
    border-radius: 10px;
    /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Soft shadow for 3D effect */
    max-width: 80%; /* Adjust width to ensure it fits well */
    width: 100%; /* Ensure it uses the available width within max-width */
    text-align: center;
    box-sizing: border-box; /* Ensure padding doesn't affect max-width */
    margin: 0 auto; /* Center block horizontally */
  }

  /* Quote Text */
  .quote-text {
    font-size: 1.7rem; /* Large text size */
    font-style: italic; /* Italic text */
    margin-bottom: 1rem; /* Space between quote and author */
    color: #814A3C;
    line-height: 1.4;
  }

  /* Quote Author */
  .quote-author {
    font-size: 1.2rem; /* Slightly smaller text for the author */
    color: #666; /* Lighter text color */
  }

  /* Mobile adjustments */
  @media (max-width: 768px) {
    .quote-block {
      max-width: 90%; /* Increase width on mobile */
      padding: 1.5rem; /* Adjust padding */
    }

    .quote-text {
      font-size: 1.5rem; /* Slightly smaller text on mobile */
    }

    .quote-author {
      font-size: 1rem; /* Smaller font size for the author on mobile */
    }
  }

  /* Extra mobile adjustments */
  @media (max-width: 480px) {
    .quote-section {
      padding: 1rem; /* Adjust padding for very small screens */
    }

    .quote-block {
      max-width: 95%; /* Almost full width on very small screens */
      padding: 1rem; /* Reduce padding further */
    }
  }


  /* Mobile Adjustments */
  @media (max-width: 768px) {
    .quote-text {
      font-size: 1rem; /* Smaller text size for mobile */
      max-width: 90%; /* Adjust width as needed */
    }

    .quote-author {
      font-size: 1rem; /* Smaller font size for mobile */
    }
  }
  /* General styles for the CTA banner */
  .cta-banner {
    background-color: #814A3C; /* Brown background color */
    color: white; /* White text color */
    padding: 2rem 0; /* Vertical padding */
  }

  .cta-banner-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem; /* Horizontal padding */
  }

  .cta-banner-text {
    flex: 1;
  }

  .cta-banner-text h1 {
    font-size: 2rem; /* Adjust font size as needed */
    margin-bottom: 0.5rem; /* Space between heading and paragraph */
  }

  .cta-banner-text p {
    font-size: 1.3rem; /* Adjust font size as needed */
    margin: 0 50px 0 40px; /* Remove default margin */
  }

  .cta-banner-button {
    flex-shrink: 0;
    background-color: #ffffff; /* White button background */
    color: #814A3C; /* Brown text color */
    border: none;
    padding: 1rem 2rem; /* Larger padding for a bigger button */
    font-size: 1.25rem; /* Larger font size for prominence */
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Shadow for prominence */
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
  }

  .cta-banner-button:hover {
    background-color: #f8f8f8; /* Off-white or ivory */
    color: #814A3C; /* Brown text */
    transform: scale(1.05); /* Slightly larger on hover */
  }

  /* Responsive styles */
  @media (max-width: 768px) {
    .cta-banner {
      text-align: center;
    }

    .cta-banner-content {
      flex-direction: column;
      align-items: center;
    }

    .cta-banner-text {
      margin-bottom: 1rem;
    }

    .cta-banner-button {
      margin-top: 1rem;
      padding: 1rem 2rem; /* Adjust padding for mobile as well */
      font-size: 1.25rem; /* Keep the larger font size */
    }
  }
  /* Basic styling for the dropdown */
  .dropdown {
      position: relative;
      display: inline-block;
  }

  .dropbtn {
      background-color: #814A3C; /* Button color */
      color: white;
      padding: 10px 40px;
      font-size: 1.25rem;
      border: none;
      cursor: pointer;
      border-radius: 5px;
      letter-spacing: 1.1px;
  }

  .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      min-width: 200px;
      max-height: 300px; /* Set maximum height for scrolling */
      overflow-y: auto; /* Enable vertical scrolling */
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
      border-radius: 5px;
      padding: 5px;
  }

  .dropdown-content a {
      color: #814A3C; /* Text color */
      padding: 10px;
      text-decoration: none;
      display: block;
  }

  .dropdown-content a:hover {
      background-color: #f1f1f1;
  }

  .dropdown:hover .dropdown-content {
      display: block;
  }

  .dropdown:hover .dropbtn {
      background-color: #6f3e2f; /* Darker shade on hover */
  }
  /* Container to position tooltip */
  .info-container {
    position: relative;
    display: inline-block;
  }

  /* Icon styling */
  .info-icon {
    cursor: pointer;
    font-size: 1.5rem; /* Adjust icon size */
    color: #814A3C; /* Text color */
  }

  /* Tooltip styling */
  .info-text {
    font-size: 1.2rem; /* Adjust icon size */
    visibility: hidden;
    width: 300px; /* Default width */
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    padding: 10px;
    position: absolute;
    z-index: 1;
    bottom: 125%; /* Position the tooltip above the icon */
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }

  .info-text::after {
    content: "";
    position: absolute;
    top: 100%; /* Arrow points downward */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
  }

  /* Hover effect for desktop */
  .info-container:hover .info-text {
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Mobile-specific adjustments */
  @media (max-width: 768px) {
    /* Hide tooltips on hover */
    .info-container:hover .info-text {
      visibility: hidden !important;
      opacity: 0 !important;
    }

    /* Display tooltip on click with the 'active' class */
    .info-container.active .info-text {
      visibility: visible !important;
      opacity: 1 !important;
    }

    /* Adjust font size and width of tooltip on mobile */
    .info-text {
      font-size: 0.9rem; /* Smaller text size */
      width: 200px; /* Adjust width for smaller screens */
      padding: 8px; /* Adjust padding for smaller text */
    }
  }
  /* Ensure the footer has a background image and is styled properly */
  .footer {
      background-color: #000;
      background-size: cover;
      padding: 20px;
      color: #fff;
  }

  .footer-container {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      max-width: 1200px;
      margin: 0 auto;
      color: white;
  }

  .footer-left, .footer-middle, .footer-right {
      flex: 1;
      margin: 0 10px;
  }
.footer-right {
  /* background: url('../../images/footer-mail.png') no-repeat center center; */
  background-size: cover;
  padding: 20px;
  color: #333;
}
  .footer-left h2, .footer-middle h2 {
      font-size: 1.5rem;
      margin-bottom: 10px;
      color: #814A3C;
  }

  .footer-left address {
      font-style: normal;
      margin-bottom: 10px;
  }

  .footer-left .footer-map {
      width: 100%;
      max-width: 300px;
      height: auto;
  }

  .footer-middle h3, .footer-right h3 {
      font-size: 1.2rem;
      margin-bottom: 10px;
      color: #fff;
      line-height: normal;
  }

  .footer-middle ul, .footer-right ul {
      list-style-type: none;
      padding: 0;
  }

  .footer-middle li, .footer-right li {
      margin-bottom: 8px;
  }

  .footer-middle a, .footer-right a {
      text-decoration: underline;
      color: #fff;
      transition: color 0.3s;
  }

  .footer-middle a:hover, .footer-right a:hover {
      color: #814A3C; /* Change color on hover */
  }

  /* Styling for 3D boxes in the right column */
  .footer-right {
      display: flex;
      flex-direction: column;
      align-items: center;
  }

  .box {
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      width: 240px;
      max-width: auto; /* Adjust max-width as needed */
      height: 100px; /* Adjust height as needed */
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-bottom: 20px;
      text-align: center;
      text-decoration: none; /* Remove default link underline */
      color: #814A3C; /* Text color */
      transition: transform 0.3s, box-shadow 0.3s; /* Animation */
  }

  .box p, .box a {
      font-size: 1rem;
      margin: 0;
      color: #814A3C; /* Change color on hover */
      text-decoration: none;
  }
  /* Hover effects */
  .box:hover {
      transform: scale(1.15); /* Slightly enlarge the box */
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Deeper shadow */
  }

  @media (max-width: 768px) {
      .footer-container {
          flex-direction: column;
          align-items: center;
      }

      .footer-left, .footer-middle, .footer-right {
          margin: 10px 0;
          text-align: center;
      }

      .footer-left .footer-map {
          max-width: 100%;
      }

      .box {
          max-width: 90%;
          height: 80px; /* Adjust height for smaller screens */
      }
  }
  /* CTA section for contacts on footer */
  .cta-section {
    padding: 50px 0;
    background-color: #f5f5f5; /* Background color */
    text-align: center;
    background: url('../images/footer-back.png') repeat center center;
  }

  .cta-title {
    margin-bottom: 30px; /* Add space between title and boxes */
  }

  .cta-title h2 {
    font-size: 2rem;
  /*   color: #814A3C; */
    text-align: center; /* Ensure title is centered */
    margin: 0; /* Remove extra margin */
  }

  .cta-boxes {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
  }

  .cta-box {
    display: block;
    width: 150px;
    height: 150px;
    background-color: #fff;
    color: #814A3C;
    text-align: center;
    line-height: 150px;
    border: 2px solid #814A3C;
    border-radius: 10px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    font-size: 1.5rem;
  }

  .cta-box:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
  }

  .cta-or {
    font-size: 1.5rem;
    color: #333;
    margin: 0 10px;
  }

  @media (max-width: 768px) {
    .cta-title h2 {
      text-align: center;
      margin-bottom: 20px;
    }

    .cta-boxes {
      flex-direction: column;
      gap: 15px; /* Reduce gap for mobile */
    }

    .cta-box {
      width: 120px; /* Adjust box size for smaller screens */
      height: 120px;
      line-height: 120px;
      font-size: 1.2rem; /* Adjust font size */
    }

    .cta-or {
      display: none; /* Hide "OR" for mobile view */
    }
  }
  /* Notification Bar Styles */
  .notification-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background-color: #32CD32; /* Bright green background */
    color: #fff;
    text-align: center;
    padding: 15px;
    font-size: 1.5rem;
    z-index: 10000; /* Ensure it's on top of everything */
    box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.1); /* Add a slight shadow for visibility */
  }

/* FAQ links */

.boxes-faq-container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
}

.boxes-faq {
    background-color: #f8f4f2;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    width: 150px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s;
}

.boxes-faq a {
    color: #814A3C;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
}

.boxes-faq:hover {
    background-color: #814A3C;
    transform: translateY(-5px);
}

.boxes-faq:hover a {
    color: #fff;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .boxes-faq {
        width: 120px;
        height: 80px;
        font-size: 14px;
    }
}

@media (max-width: 576px) {
    .boxes-faq-container {
        flex-direction: column;
        align-items: center;
    }
    .boxes-faq {
        width: 100%;
        max-width: 300px;
        height: auto;
        font-size: 16px;
        margin-bottom: 10px;
    }
}

/* Section with black background and white text */
.bbbt-section {
    color: #fff; /* White text */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 2rem 10%; /* Padding for spacing */
    box-sizing: border-box; /* Ensure padding is included in the element's total width/height */
    position: relative; /* Ensure positioning context for the pseudo-element */
}
.bbbt-height-30 {
    height: 30vh; /* 30% of the viewport height */
}
.bbbt-height-40 {
    height: 40vh; /* 30% of the viewport height */
}
.bbbt-height-50 {
    height: 50vh; /* 30% of the viewport height */
}
.bbbt-height-60 {
    height: 60vh; /* 30% of the viewport height */
}
.bbbt-height-70 {
    height: 70vh; /* 30% of the viewport height */
}
.bbbt-height-80 {
    height: 80vh; /* 30% of the viewport height */
}
.bbbt-height-90 {
    height: 90vh; /* 30% of the viewport height */
}
/* Background Color Variants */
.bg-white-text-black {
    background-color: #fff; /* White background */
    color: #000;
}

.bg-blue-text-black {
    background-color: #44CEE7; /* Blue background */
    color: #000;

}

.bg-black-text-white {
    background-color: rgba(0, 0, 0, 0.8); /* Black with 80% opacity */
    color: #fff;
}
.bg-brown-text-white {
    background-color: rgba(0, 0, 0, 0.7); /* Black with 80% opacity */
    color: #fff;
}

.bbbt-section .bbbt-title {
    font-size: 2rem; /* Font size for the title */
    margin-bottom: 2rem; /* Space below the title */
    line-height: 1.6;

}

.bbbt-section .bbbt-content {
    display: flex;
    flex-direction: row; /* Align content in a row for 3 columns */
    gap: 2rem; /* Space between columns */
    flex-wrap: wrap; /* Allows wrapping on smaller screens */
}

.bbbt-section .bbbt-paragraph {
    flex: 1 1 calc(33.333% - 2rem); /* Three columns with space between */
    text-align: left; /* Align text to the left */
    margin-bottom: 2rem; /* Space between paragraphs */
}

.bbbt-section .bbbt-paragraph h1 {
    margin: 0 0 1rem; /* Margin for headings */
    font-size: 1.5rem; /* Font size for headings */
}

.bbbt-section .bbbt-paragraph p {
    margin: 0;
    font-size: 1.125rem; /* Font size for paragraph text */
    line-height: 1.8;
}

/* Responsive design adjustments */
@media (max-width: 768px) {
    .bbbt-section {
        height: auto; /* Allow height to adjust based on content on smaller screens */
        padding: 1.5rem 5%; /* Reduced padding for smaller screens */
    }

    .bbbt-section .bbbt-title {
        font-size: 1.75rem; /* Adjust font size for smaller screens */
        margin-bottom: 1.5rem; /* Adjusted space below the title for smaller screens */
    }

    .bbbt-section .bbbt-content {
        flex-direction: column; /* Stack paragraphs vertically on smaller screens */
        gap: 2rem; /* Space between stacked paragraphs */
    }

    .bbbt-section .bbbt-paragraph {
        width: 100%; /* Full width for each paragraph on smaller screens */
        max-width: none; /* Remove max-width constraint on smaller screens */
    }

    .bbbt-section .bbbt-paragraph p {
        font-size: 1rem; /* Smaller font size for better readability on mobile */
        line-height: 1.4; /* Adjust line height for better readability */
    }
}

@media (max-width: 480px) {
    .bbbt-section .bbbt-title {
        font-size: 1.5rem; /* Further reduce font size for very small screens */
        margin-bottom: 1rem; /* Adjusted space below the title */
    }

    .bbbt-section .bbbt-paragraph p {
        font-size: 0.875rem; /* Adjust font size for very small screens */
    }
}

/* Double-Lined Border Style */
.double-border {
    position: relative; /* Ensure the section is positioned relative to contain the pseudo-elements */
    padding: 20px; /* Space inside the border */
    border: 5px double rgba(51, 51, 51, 0.2);
    border-radius: 10px; /* Optional: rounded corners for aesthetic effect */
    background-color: #fff; /* Background color inside the border */
    box-shadow: 0 0 0 5px #fff; /* Optional: shadow to enhance the double border effect */
}

/* Centered Paragraph */
.centered-p {
    max-width: 80%; /* Default width for small screens */
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

@media (min-width: 576px) {
    .centered-p {
        max-width: 70%; /* Adjust for medium screens */
    }
}

@media (min-width: 768px) {
    .centered-p {
        max-width: 60%; /* Adjust for large screens */
    }
}

@media (min-width: 992px) {
    .centered-p {
        max-width: 60%; /* Adjust for extra large screens */
    }
}

/* Black bg - Box Styling */
.box-3x3-box {
    color: #fff; /* White text color */
  /*  border: 1px solid #fff;  White border */
    border-radius: 12px; /* Curved borders */
    padding: 20px; /* Padding inside the box */
    position: relative; /* Position relative for the 3D effect */
    transition: all 0.3s ease-in-out; /* Smooth transition for hover effect */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Shadow for 3D effect */
    text-align: center; /* Center text */
}

/* Content inside the box */
.box-3x3-content {
    height: 200px; /* Adjust height as needed */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 1rem;
    position: relative;
}

/* Title inside the box */
.box-3x3-title {
    font-size: 1.5rem;
    font-weight: bold;
}

/* Text inside the box */
.box-3x3-text {
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1rem;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.8); /* Dark background for text */
    border-radius: 10px;
    width: 80%; /* Adjust width as needed */
    box-sizing: border-box;
    transition: opacity 0.3s ease;
}

/* Hover effect for the box */
.box-3x3-box:hover .box-3x3-title {
    opacity: 0;
}

.box-3x3-box:hover .box-3x3-text {
    opacity: 1;
}

.box-3x3-box:hover {
    transform: scale(1.05); /* Slight zoom effect */
    border: 1px solid #fff;  White border */

    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4); /* Enhanced shadow on hover */
}

/* Responsive Adjustments */
@media (max-width: 992px) {
    .box-3x3-content {
        height: 150px; /* Reduced height for tablets */
    }

    .box-3x3-title {
        font-size: 1.25rem; /* Slightly smaller title for tablets */
    }

    .box-3x3-text {
        font-size: 0.9rem; /* Smaller font size for text */
        width: 90%; /* Wider text area on smaller screens */
    }
}

@media (max-width: 768px) {
    .box-3x3-box {
        padding: 15px; /* Reduced padding for mobile screens */
    }

    .box-3x3-content {
        height: auto; /* Allow height to adjust based on content */
        padding: 0.5rem; /* Reduced padding inside the content */
    }

    .box-3x3-title {
        font-size: 1.1rem; /* Further reduced title font size for mobile */
    }

    .box-3x3-text {
        font-size: 0.8rem; /* Further reduced text font size for mobile */
        width: 100%; /* Full width for text area */
        padding: 0.5rem; /* Adjust padding for mobile */
    }
}
/* General Carousel Styles */
.carousel-item {
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Adjustments for Mobile Devices */
@media (max-width: 576px) {
    .carousel-item {
        padding: 15px;
    }

    .testimonial-content {
        font-size: 1rem; /* Smaller font size on smaller screens */
    }
}

/* Style for Testimonials Content */
.testimonial-content {
    font-size: 1.2rem; /* Default font size */
    font-style: italic;
    color: rgba(0, 0, 0, 0.5);
}

/* Carousel Controls */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
}

/* Adjustments for Mobile Carousel Controls */
@media (max-width: 576px) {
    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        width: 40px; /* Smaller control icons */
        height: 40px;
    }
}

/* Ticker Container */
.ticker-container {
    position: relative; /* Position it relative to the parent container */
    margin-top: 1rem; /* Space between title and ticker */
    margin-left: 4rem;
    width: 100%; /* Adjust width to fit within parent container */
    text-align: left; /* Align text to the left */
}

/* Style for ticker text */
.ticker-text {
    display: inline-block;
    position: relative;
    width: 100%;
    margin-top: 20px;
    margin-bottom: 50px;
    height: 2.5rem; /* Adjust height to fit the text */
    overflow: hidden; /* Hide overflow text */
}

.ticker-word {
    display: block;
    position: absolute;
    margin-left: 30px;
    top: 0;
    left: 0;
    width: 100%;
    font-size: 2.5rem; /* Large font size */
/*    color: #814A3C;  Brown text color */
    color: #333;
    opacity: 0; /* Start with hidden text */
    transition: opacity 1s ease-in-out; /* Smooth fade effect */
}

/* Keyframes to control the fade-in and fade-out */
@keyframes fadeInOut {
    0%, 20% { opacity: 1; }
    80%, 100% { opacity: 0; }
}
/* Fade in effect */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .welcome-section {
        height: 30vh; /* Adjust the height for mobile */
    }

    .welcome-section::before {
        background-attachment: scroll; /* Disable parallax for better mobile performance */
    }

    .welcome-content {
        padding: 1.5rem; /* Reduce padding on mobile */
        font-size: 1rem; /* Adjust font size for mobile */
    }

    h1.welcome-title {
        font-size: 1.5rem; /* Smaller title on mobile */
    }

    p.welcome-subtitle {
        font-size: 1rem; /* Smaller subtitle on mobile */
    }
}

/* Larger Screen Adjustments */
@media (min-width: 1200px) {
    .welcome-section {
        height: 40vh; /* Increase height on larger screens */
    }

    h1.welcome-title {
        font-size: 2.5rem; /* Increase font size for larger screens */
    }

    p.welcome-subtitle {
        font-size: 1.5rem; /* Increase subtitle font size for larger screens */
    }
}
/* quiz */
.quiz-section {
    background-color: #f8f9fa; /* Light background */
    height: 50vh; /* Ensures the quiz section takes up 40% of the viewport height */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    position: relative;
    background-image: url('../images/paperback.jpg'); /* Replace with your background image */
    background-size: cover; /* Ensures the image covers the entire section */
    background-position: center; /* Centers the background image */
    background-attachment: fixed; /* Enables parallax effect */
    background-repeat: no-repeat; /* Prevent image repetition */
    z-index: 1;
}

.quiz-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8); /* Semi-transparent white overlay */
    z-index: -1; /* Move it behind the content */
    pointer-events: none; /* Ensure the overlay does not block interactions */
}

.quiz-content {
    position: relative;
    z-index: 1; /* Ensures content appears above the background */
    text-align: center;
    color: #333; /* Text color */
    padding: 2rem;
}

.quiz-message, .quiz-intro {
    color: #333; /* Dark text for visibility */
    text-align: center;
    margin-bottom: 2rem; /* Space below the message */
}

#start-quiz, #yes-btn, #no-btn {
    font-size: 1.25rem; /* Make buttons larger */
    padding: 1rem 2rem; /* Adjust padding for larger buttons */
    margin: 0.5rem; /* Space around buttons */
}

.question {
    font-size: 1.5rem; /* Larger text for the question */
    margin-bottom: 2.5rem; /* Space below the question */
    text-align: center;
    /* color: #814A3C; */
}

/* Adjust the progress bar height and styling */
.progress {
    height: 2rem; /* Consistent height for the progress bar */
    background-color: #e9ecef;
    border-radius: 0.25rem;
    overflow: hidden;
    margin: 1rem 0; /* Space around the progress bar */
}

.progress-bar {
    height: 100%;
    line-height: 2rem; /* Center text vertically */
    font-size: 1.25rem; /* Size of the progress text */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #28a745; /* Green background for the filled part */
    color: #fff; /* White text color for readability */
}

/* Style for quiz result */
#quiz-result .result-message {
    color: #007bff; /* Bootstrap primary color */
    text-align: center;
    margin-top: 2rem; /* Space above the result message */
}

/* Responsive design adjustments */
@media (max-width: 768px) {
    .quiz-section {
        height: auto; /* Allow height to adjust based on content */
        padding: 1rem;
        background-attachment: scroll; /* Disable parallax on mobile for performance */
    }

    .quiz-message {
        font-size: 1.25rem; /* Slightly smaller text for mobile */
        margin-bottom: 1.5rem; /* Adjusted space below the message */
    }

    #start-quiz, #yes-btn, #no-btn {
        font-size: 1rem; /* Smaller font size for mobile */
        padding: 0.75rem 1.5rem; /* Adjusted padding for mobile */
    }

    .question {
        font-size: 1.25rem; /* Slightly smaller text for mobile */
        margin-bottom: 1rem; /* Adjusted space below the question */
    }

    .progress {
        height: 1.5rem; /* Adjusted height for mobile */
    }

    .progress-bar {
        font-size: 1rem; /* Adjusted font size for mobile */
    }

    #quiz-result .result-message {
        font-size: 1rem; /* Adjusted font size for result message on mobile */
        margin-top: 1.5rem; /* Adjusted space above the result message */
        justify-content: center;
        align-items: center;
    }
}

@media (max-width: 576px) {
    .quiz-message {
        font-size: 1rem; /* Further reduced text size for very small screens */
        margin-bottom: 1rem; /* Further adjusted space below the message */
    }

    #start-quiz, #yes-btn, #no-btn {
        font-size: 0.875rem; /* Smaller font size for very small screens */
        padding: 0.5rem 1rem; /* Adjusted padding for very small screens */
    }

    .question {
        font-size: 1rem; /* Further reduced text size for very small screens */
        margin-bottom: 0.75rem; /* Further adjusted space below the question */
    }

    .progress {
        height: 1.25rem; /* Further adjusted height for very small screens */
    }

    .progress-bar {
        font-size: 0.875rem; /* Further adjusted font size for very small screens */
    }
}

/* newsletter form */
.card {
  border-radius: 10px;
  background-color: #f8f9fa;
}

.form-control {
  border-radius: 8px;
}