/* 


/* ---------------------------------------------
Table of contents
------------------------------------------------
01. font & reset css
02. reset
03. global styles
04. header
05. banner
06. features
07. testimonials
08. contact
09. footer

--------------------------------------------- */
/* 
---------------------------------------------
font & reset css
--------------------------------------------- 
*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900");

/* 
---------------------------------------------
reset
--------------------------------------------- 
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
div pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
figure,
header,
nav,
section,
article,
aside,
footer,
figcaption {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

ul,
li {
  padding: 0;
  margin: 0;
  list-style: none;
}

header,
nav,
section,
article,
aside,
footer,
hgroup {
  display: block;
}

* {
  box-sizing: border-box;
}

html,
body {
  font-family: "Poppins", sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth; /* Enable smooth scrolling */
}

a {
  text-decoration: none !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #1e1e1e;
  margin-top: 0px;
  margin-bottom: 0px;
  font-weight: 700;
}

ul {
  margin-bottom: 0px;
}

p {
  font-size: 14px;
  line-height: 28px;
  color: #4a4a4a;
}

img {
  width: 100%;
  overflow: hidden;
}

/* 
---------------------------------------------
Global Styles
--------------------------------------------- 
*/
html,
body {
  font-family: "Poppins", sans-serif;
}

::selection {
  background: #ff5200;
  color: #fff;
}

::-moz-selection {
  background: #ff5200;
  color: #fff;
}

.section {
  padding-top: 30px;
  margin-top: 120px;
}

.section-heading {
  margin-bottom: 60px;
}

.section-heading h2 {
  font-size: 36px;
  font-weight: 600;
  text-transform: capitalize;
  margin: 20px 0;
  line-height: 44px;
}

.section-heading h2 em {
  color: #ff5200;
  font-style: normal;
}

.section-heading h4 {
  font-size: 28px;
  color: #ff5200;
  text-transform: uppercase;
  font-weight: 600;
}

.main-button a {
  display: inline-block;
  background-color: #fff;
  color: #ff5200;
  font-size: 14px;
  font-weight: 500;
  height: 40px;
  line-height: 40px;
  padding: 0px 25px;
  border-radius: 20px;
  transition: all 0.3s;
}

.main-button a:hover {
  background-color: #ff5200;
  color: #fff;
}

/* 
---------------------------------------------
Pre-loader Style
--------------------------------------------- 
*/

.js-preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.99);
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  opacity: 1;
  visibility: visible;
  z-index: 9999;
  -webkit-transition: opacity 0.25s ease;
  transition: opacity 0.25s ease;
}

.js-preloader.loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@-webkit-keyframes dot {
  50% {
    -webkit-transform: translateX(96px);
    transform: translateX(96px);
  }
}

@keyframes dot {
  50% {
    -webkit-transform: translateX(96px);
    transform: translateX(96px);
  }
}

@-webkit-keyframes dots {
  50% {
    -webkit-transform: translateX(-31px);
    transform: translateX(-31px);
  }
}

@keyframes dots {
  50% {
    -webkit-transform: translateX(-31px);
    transform: translateX(-31px);
  }
}

.preloader-inner {
  position: relative;
  width: 142px;
  height: 40px;
  background: transparent;
}

.preloader-inner .dot {
  position: absolute;
  width: 16px;
  height: 16px;
  top: 12px;
  left: 15px;
  background: #ff5200;
  border-radius: 50%;
  -webkit-transform: translateX(0);
  transform: translateX(0);
  -webkit-animation: dot 2.8s infinite;
  animation: dot 2.8s infinite;
}

.preloader-inner .dots {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  margin-top: 12px;
  margin-left: 31px;
  -webkit-animation: dots 2.8s infinite;
  animation: dots 2.8s infinite;
}

.preloader-inner .dots span {
  display: block;
  float: left;
  width: 16px;
  height: 16px;
  margin-left: 16px;
  background: #ff5200;
  border-radius: 50%;
}

/* 
---------------------------------------------
Banner Style
--------------------------------------------- 
*/

/* .main-banner {
  background-image: url(../images/banner-bg3.jpg);
  background-position: right bottom;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 170px 0px 120px 0px;
}

.main-banner .item-1 {
  background-image: url(../images/banner-item-01.jpg);
}

.main-banner .item-2 {
  background-image: url(../images/banner-item-02.jpg);
}

.main-banner .item-3 {
  background-image: url(../images/banner-item-03.jpg);
}

.main-banner .item {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  border-radius: 25px;
  padding: 100px 100px;
  margin-left: 130px;
}

.main-banner .item span.category {
  background-color: #ff5200;
  color: #fff;
  font-size: 14px;
  text-transform: uppercase;
  padding: 5px 15px;
  border-radius: 20px;
  display: inline-block;
  margin-bottom: 50px;
}

.main-banner .item h2 {
  font-size: 48px;
  font-weight: 700;
  color: #fff;
  line-height: 70px;
  width: 60%;
  margin-bottom: 40px;
}

.main-banner .item p {
  color: #fff;
  width: 65%;
}

.main-banner .item .buttons {
  display: flex;
  margin-top: 50px;
}

.main-banner .item .buttons .main-button {
  margin-right: 30px;
}

.main-banner .item .buttons .main-button a {
  font-size: 14px;
  color: #ff5200;
  background-color: #fff;
  display: inline-block;
  height: 50px;
  line-height: 50px;
  padding: 0px 25px;
  border-radius: 25px;
  font-weight: 500;
}

.main-banner .item .buttons .main-button a:hover {
  background-color: #ffa726;
  color: #fff;
}

.main-banner .item .buttons .icon-button i {
  color: #ff5200;
  background-color: #fff;
  display: inline-block;
  height: 50px;
  width: 50px;
  text-align: center;
  line-height: 50px;
  border-radius: 50%;
  margin-right: 10px;
  font-size: 16px;
}

.main-banner .item .buttons .icon-button a {
  color: #fff;
  font-size: 14px;
  font-weight: 500;
}

.main-banner .owl-nav {
  position: absolute;
  max-width: 1320px;
  bottom: 23px;
  left: 0;
  text-align: right;
}

.main-banner .owl-nav .owl-prev i,
.main-banner .owl-nav .owl-next i {
  width: 50px;
  height: 50px;
  line-height: 50px;
  font-size: 24px;
  display: inline-block;
  color: #fff;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  opacity: 1;
  transition: all 0.3s;
}

.main-banner .owl-nav .owl-prev i {
  position: absolute;
  bottom: 65px;
}

.main-banner .owl-nav .owl-prev i:hover,
.main-banner .owl-nav .owl-next i:hover {
  opacity: 1;
  background-color: rgba(255, 255, 255, 0.5);
} */

/* ---------------------------------------------
Banner Style (Desktop/Default)
--------------------------------------------- 
*/

.main-banner {
  /* Retained: Main background for the whole section */
  background-image: url(../images/banner-bg3.jpg);
  background-position: right bottom;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 170px 0px 120px 0px;
}

/* NEW STYLES: This is the static banner content container */
.main-banner .banner-content {
  /* Using item-1 background image for the content area */
  background-image: url(../images/banner-item-01.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  border-radius: 25px;
  /* Retained Padding */
  padding: 100px;
}

/* Original Styles (re-targeted to .banner-content) */

.main-banner .banner-content span.category {
  background-color: #ff5200;
  color: #fff;
  font-size: 14px;
  text-transform: uppercase;
  padding: 5px 15px;
  border-radius: 20px;
  display: inline-block;
  margin-bottom: 50px;
}

.main-banner .banner-content h2 {
  font-size: 48px;
  font-weight: 700;
  color: #fff;
  line-height: 70px;
  width: 60%;
  margin-bottom: 40px;
}

.main-banner .banner-content p {
  color: #fff;
  width: 65%;
}

.main-banner .banner-content .buttons {
  display: flex;
  margin-top: 50px;
}

.main-banner .banner-content .buttons .main-button {
  margin-right: 30px;
}

.main-banner .banner-content .buttons .main-button a {
  font-size: 14px;
  color: #ff5200;
  background-color: #fff;
  display: inline-block;
  height: 50px;
  line-height: 50px;
  padding: 0px 25px;
  border-radius: 25px;
  font-weight: 500;
}

.main-banner .banner-content .buttons .main-button a:hover {
  background-color: #ffa726;
  color: #fff;
}

/* ADDED STYLES: Styling for the secondary button with an icon */

.main-banner .banner-content .buttons .icon-button i {
  color: #ff5200;
  background-color: #fff;
  display: inline-block;
  height: 50px;
  width: 50px;
  text-align: center;
  line-height: 50px;
  border-radius: 50%;
  margin-right: 10px;
  font-size: 16px;
}

.main-banner .banner-content .buttons .icon-button a {
  color: #fff;
  font-size: 14px;
  font-weight: 500;
}

/* ---------------------------------------------
RESPONSIVENESS (Tablet/Medium Screens - Max 992px)
--------------------------------------------- 
*/
@media (max-width: 992px) {
  .main-banner {
    padding-top: 100px;
  }

  .main-banner .banner-content {
    padding: 80px 60px;
    margin-left: 0px;
    text-align: center;
    height: 40rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .main-banner .banner-content h2,
  .main-banner .banner-content p {
    width: 100%; /* Full width for better readability on tablets */
  }

  .main-banner .banner-content h2 {
    font-size: 36px;
    line-height: 50px;
    margin-bottom: 20px;
  }

  .main-banner .banner-content .buttons {
    display: inline-block; /* Stack or center buttons */
    text-align: center;
  }

  .main-banner .banner-content .buttons .main-button {
    margin-right: 0px;
    margin-bottom: 30px;
  }
}

/* ---------------------------------------------
RESPONSIVENESS (Mobile/Small Screens - Max 767px)
--------------------------------------------- 
*/
@media (max-width: 767px) {
  .main-banner .banner-content {
    min-height: 450px !important;
    padding: 50px 20px !important; /* Smaller padding for narrow screens */
    margin-left: 0 !important;
    text-align: center;
  }

  .main-banner .banner-content span.category {
    margin-bottom: 20px;
    font-size: 12px;
    padding: 4px 12px;
  }

  .main-banner .banner-content h2 {
    font-size: 24px !important;
    line-height: 32px !important;
    width: 100% !important;
    margin-bottom: 15px !important;
  }

  .main-banner .banner-content p {
    width: 100% !important;
    font-size: 13px;
    line-height: 22px;
    margin-bottom: 20px;
  }

  .main-banner .banner-content .buttons {
    margin-top: 20px !important;
    display: flex;
    flex-direction: column; /* Stack buttons vertically */
    align-items: center;
    gap: 15px;
  }

  .main-banner .banner-content .buttons .main-button {
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    width: 100%;
    max-width: 200px; /* Limit button width */
  }

  .main-banner .banner-content .buttons .main-button a {
    width: 100%;
    display: block;
    height: 45px;
    line-height: 45px;
    font-size: 13px;
  }

  .main-banner .banner-content .buttons .icon-button {
    display: none; /* Hide icon button for cleaner mobile look */
  }
}
/*---------------------------------------------
About Section (Mirrored Like Testimonials)
---------------------------------------------*/

.about-us {
  position: relative;
  padding: 80px 0;
  margin-top: 150px;
}

.about-us:before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0; /* 👈 background curve from left */
  z-index: -1;
  width: 65%;
  height: 100%;
  background-color: #fff3e0;
  content: "";
  border-top-right-radius: 500px;
  border-bottom-right-radius: 500px;
}

/* Section heading */
.about-us .section-heading {
  margin-bottom: 0;
  margin-right: 60px;
  text-align: right;
}

.about-us .section-heading p {
  margin-top: 50px;
}

.about-us .section-heading .main-button {
  margin-top: 40px;
}

/* Accordion */
.accordion {
  background-color: #ff5200;
  border-radius: 25px;
  padding: 80px 50px 50px 50px;
}

.accordion-item {
  background-color: #fff;
  border-radius: 25px !important;
  margin-bottom: 30px;
  border: none;
}

.accordion-item .accordion-button {
  outline: none;
  box-shadow: none;
  border-radius: 25px !important;
}

.accordion-button:not(.collapsed) {
  color: #ff5200;
  background-color: #fff;
}

h2.accordion-header button {
  padding: 15px 25px;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 600;
}

.accordion-button::after {
  font-size: 18px;
  font-weight: 500;
  background-image: none;
  content: "+";
  width: 30px;
  height: 30px;
  display: inline-block;
  text-align: center;
  line-height: 30px;
  border-radius: 50%;
  background-color: #ff5200;
  color: #fff;
}

.accordion-button:not(.collapsed)::after {
  background-image: none;
  content: "-";
  line-height: 32px;
}

.accordion-body {
  padding: 0 25px 30px 25px;
  font-size: 14px;
  line-height: 28px;
  color: #4a4a4a;
}
/* Make your selectors more specific ( this part is needed becouse Tailwind CSS conflicts with custom styles) */
.about-us .accordion-collapse.collapse.show {
  overflow: visible !important;
}

.about-us .accordion-body {
  overflow: visible !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/*---------------------------------------------
Responsive Design
---------------------------------------------*/

@media (max-width: 991px) {
  .about-us {
    margin-top: 100px;
    padding: 60px 0;
  }

  .about-us:before {
    width: 100%;
    border-radius: 0;
  }

  .about-us .section-heading {
    text-align: center;
    margin-right: 0;
    margin-bottom: 40px;
  }

  .accordion {
    padding: 40px 25px;
  }
}

/* 
---------------------------------------------
Courses Style
--------------------------------------------- 
*/

.courses {
  margin-top: 160px;
}

.event_filter {
  text-align: center;
}

.event_filter {
  background-color: #fff3e0;
  border-radius: 50px;
  padding: 15px 40px;
  list-style: none;
  margin: 0 auto 70px;
  max-width: max-content;
}

.event_filter li {
  display: inline-block;
  margin: 0px 20px;
}

.event_filter li a {
  font-size: 14px;
  font-weight: 500;
  color: #1e1e1e;
  transition: all 0.3s;
}

.event_filter li .event_filter li a.is_active,
.event_filter li a:hover {
  color: #ff5200;
}

.events_item .thumb {
  position: relative;
  border-radius: 25px;
  overflow: hidden;
  width: 100%;
  height: 300px; /* adjust this height as per your design */
}

.events_item .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* ensures image fills the container without distortion */
  display: block;
}

.events_item .thumb span.category {
  position: absolute;
  left: 30px;
  top: 30px;
  font-size: 14px;
  text-transform: uppercase;
  color: #ff5200;
  background-color: rgba(250, 250, 250, 0.95);
  padding: 8px 20px;
  border-radius: 25px;
  font-weight: 500;
  display: inline-block;
}

.events_item .thumb span.price {
  position: absolute;
  right: -30px;
  top: -50px;
  background-color: #ff5200;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: all 0.3s;
  /* Adjust position of text inside */
  padding: 10px;
}

.events_item .thumb span.price h6 {
  margin: 0;
  font-size: 13px;
  line-height: 1.3;
  text-transform: uppercase;
  color: #fff;
  font-weight: 700;
  text-align: center;
  word-wrap: break-word;

  /* 👇 Move text slightly down and left */
  transform: translate(-10px, 12px);
}

.events_item .thumb span.price em {
  display: block;
  font-size: 16px;
  font-weight: 500;
  font-style: normal;
  margin-top: 2px;
}

.events_item {
  background-color: #fff3e0;
  border-radius: 25px;
  margin-bottom: 30px;
  position: relative;
  justify-content: center;
  align-items: center;
  /* NEW: Add shadow and transition for prettier look */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  border: 1px solid rgba(124, 184, 176, 0.2); /* Subtle border matching theme */
  /* NEW: Set minimum height and flexbox for equal card heights */
  min-height: 520px;
  display: flex;
  flex-direction: column;
}

.events_item:hover {
  /* NEW: Hover effect - lift and enhance shadow */
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
  background: linear-gradient(
    135deg,
    #fff3e0 0%,
    #f0f8f7 100%
  ); /* Subtle gradient on hover */
}

.events_item .down-content {
  padding: 20px 30px 25px 30px;
  /* NEW: Flexbox to push button to bottom */
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.events_item .down-content span.author {
  color: #ff5200;
  font-size: 15px;
  display: inline-block;
  margin-bottom: 6px;
}

.events_item .down-content h4 {
  font-size: 22px;
  font-weight: 600;
  transition: all 0.3s;
}

.events_item:hover .down-content h4 {
  color: #ff5200;
}

.events_item .down-content p {
  font-size: 15px;
  line-height: 1.6;
  color: #333;
  margin-bottom: 15px;
}

/* 
---------------------------------------------
Testimonials Style
--------------------------------------------- 
*/

.testimonials {
  position: relative;
  padding: 80px 0px;
  margin-top: 150px;
}

.testimonials:before {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
  width: 65%;
  height: 100%;
  background-color: #fff3e0;
  content: "";
  border-top-left-radius: 500px;
  border-bottom-left-radius: 500px;
}

.testimonials .section-heading {
  margin-bottom: 0px;
  margin-left: 60px;
  vertical-align: middle;
}

.testimonials .section-heading p {
  margin-top: 50px;
}

.testimonials .item {
  background-color: #ff5200 !important;
  border-radius: 25px;
  padding: 80px;

  /* Force equal height for all cards */
  min-height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.testimonials .item p {
  font-size: 18px;
  line-height: 40px;
  color: #fff;
  font-style: italic;
  font-weight: 300;
  margin-bottom: 40px;
  flex-grow: 1; /* Allow text to take available space */
}

.testimonials .item img {
  border-radius: 50%;
  max-width: 100px;
  float: left;
  margin-right: 25px;
}

.testimonials .item .author {
  flex-shrink: 0; /* Prevent from shrinking */
}

.testimonials .item span {
  display: inline-block;
  margin-top: 20px;
  font-size: 15px;
  color: #fff;
}

.testimonials .item h4 {
  color: #fff;
  font-size: 22px;
  font-weight: 600;
  margin-top: 8px;
}

.testimonials .owl-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-5px);
  right: -25px;
  text-align: right;
}

.testimonials .owl-nav .owl-prev i,
.testimonials .owl-nav .owl-next i {
  width: 50px;
  height: 50px;
  line-height: 50px;
  font-size: 24px;
  display: inline-block;
  color: #ff5200;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
  opacity: 1;
  transition: all 0.3s;
}

.testimonials .owl-nav .owl-prev i {
  position: absolute;
  bottom: 65px;
}

.testimonials .owl-nav .owl-prev i:hover,
.testimonials .owl-nav .owl-next i:hover {
  opacity: 1;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
}

@media (max-width: 992px) {
  /* ...existing code... */

  .testimonials {
    margin-top: -50px;
    padding: 0px;
  }

  .testimonials .section-heading {
    margin-left: 0px;
    margin-top: 40px;
  }

  .testimonials .item {
    padding: 40px 40px 60px 40px;
    min-height: 350px; /* Slightly smaller on tablets */
  }

  .testimonials .item h4 {
    font-size: 17px;
  }

  .testimonials .item img {
    margin-right: 15px;
  }

  .testimonials .owl-nav {
    display: none;
  }

  /* ...existing code... */
}

@media (max-width: 991px) {
  /* ...existing code... */

  /* ************************************************* */
  /* 🌟 NEW: Testimonials responsive styles (matching Google Reviews) */
  /* ************************************************* */
  .testimonials {
    margin-top: 100px;
    padding: 60px 0;
  }

  .testimonials:before {
    width: 100%;
    border-radius: 0;
  }

  .testimonials .section-heading {
    text-align: center;
    margin-left: 0;
    margin-bottom: 40px;
  }

  .testimonials .section-heading p {
    margin-top: 30px;
  }

  .testimonials .item {
    padding: 40px 25px;
    min-height: 320px;
  }

  .testimonials .item p {
    font-size: 16px;
    line-height: 32px;
  }

  .testimonials .item img {
    max-width: 80px;
    margin-right: 15px;
  }

  .testimonials .item h4 {
    font-size: 18px;
  }

  .testimonials .item span {
    font-size: 14px;
  }

  .testimonials .owl-nav {
    display: none;
  }
}

@media (max-width: 767px) {
  /* ...existing code... */

  /* ************************************************* */
  /* 🌟 NEW: Additional testimonials mobile styles */
  /* ************************************************* */
  .testimonials {
    margin-top: 80px;
    padding: 40px 0;
  }

  .testimonials .section-heading {
    margin-bottom: 30px;
  }

  .testimonials .item {
    padding: 30px 20px;
    min-height: auto; /* Allow natural height on mobile */
  }

  .testimonials .item p {
    font-size: 15px;
    line-height: 28px;
    margin-bottom: 30px;
  }

  .testimonials .item img {
    max-width: 60px;
    margin-right: 12px;
    float: none;
    display: block;
    margin: 0 auto 15px;
  }

  .testimonials .item .author {
    text-align: center;
  }

  .testimonials .item h4,
  .testimonials .item span {
    text-align: center;
    display: block;
    margin-top: 5px;
  }

  /* ...existing code... */
}

/* 
---------------------------------------------
Contact Style
--------------------------------------------- 
*/

.contact-us {
  margin-top: 80px;
  position: relative;
  padding: 50px 0px;
}

.contact-us:before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  width: 65%;
  height: 100%;
  background-color: #fff3e0;
  content: "";
  border-top-right-radius: 500px;
  border-bottom-right-radius: 500px;
}

.contact-us .section-heading {
  margin-right: 110px;
  margin-bottom: 0px;
}

.contact-us .section-heading p {
  margin-top: 50px;
}

.contact-us .special-offer {
  margin-top: 50px;
  background-color: #fff;
  border-radius: 25px;
  padding: 30px 120px;
  display: inline-block;
  position: relative;
}

.contact-us .special-offer span.offer {
  position: absolute;
  left: 0;
  top: 0;
  background-color: #ff5200;
  width: 80px;
  padding: 30px 8px;
  line-height: 25px;
  height: 120px;
  border-radius: 15px 60px 60px 15px;
  display: inline-block;
  text-align: center;
  color: #fff;
  font-size: 16px;
  text-transform: uppercase;
  text-align: left;
}

.contact-us .special-offer span.offer em {
  font-size: 28px;
  font-style: normal;
  font-weight: 600;
}

.contact-us .special-offer h6 {
  font-size: 15px;
  color: #4a4a4a;
  text-transform: uppercase;
  font-weight: 400;
  margin-bottom: 15px;
}

.contact-us .special-offer h6 em {
  font-style: normal;
  color: #ff5200;
  font-weight: 600;
}

.contact-us .special-offer h4 {
  font-size: 22px;
  font-weight: 600;
}

.contact-us .special-offer h4 em {
  font-style: normal;
  color: #ff5200;
}

.contact-us .special-offer a {
  position: absolute;
  right: 30px;
  top: 35px;
  width: 50px;
  height: 50px;
  display: inline-block;
  text-align: center;
  line-height: 50px;
  background-color: #ff5200;
  color: #fff;
  border-radius: 50%;
}

.contact-us .contact-us-content {
  border-radius: 25px;
  padding: 80px;
  background-color: #ff5200;
  position: relative;
  z-index: 1;
}

.contact-us .contact-us-content::before {
  background: url(../images/contact-dec-01.png);
  position: absolute;
  left: 50%;
  transform: translateX(-149px);
  opacity: 0.5;
  top: 0;
  width: 318px;
  height: 119px;
  content: "";
  z-index: 2;
}

.contact-us .contact-us-content::after {
  background: url(../images/contact-dec-02.png);
  position: absolute;
  right: 0;
  bottom: 0;
  width: 183px;
  height: 149px;
  content: "";
  z-index: 2;
}

#contact-form input {
  width: 100%;
  height: 50px;
  border-radius: 25px;
  background-color: #ffffffdc;
  border: none;
  outline: none;
  font-weight: 300;
  padding: 0px 20px;
  font-size: 14px;
  color: #000;
  margin-bottom: 30px;
  position: relative;
  z-index: 3;
}

#contact-form input::placeholder {
  color: #000000;
}

#contact-form textarea {
  width: 100%;
  height: 120px;
  border-radius: 25px;
  background-color: rgba(32, 201, 151, 0.15);
  border: none;
  outline: none;
  font-weight: 300;
  padding: 20px;
  font-size: 14px;
  color: #fff;
  margin-bottom: 30px;
  position: relative;
  z-index: 3;
}

#contact-form textarea::placeholder {
  color: #fff;
}

#contact-form button {
  border: none;
  height: 50px;
  font-size: 14px;
  font-weight: 600;
  background-color: #fff;
  padding: 0px 25px;
  border-radius: 25px;
  color: #ff5200;
  transition: all 0.4s;
  position: relative;
  z-index: 3;
}

#contact-form button:hover {
  opacity: 0.8;
}

/* NEW */
#contact-form select {
  /* Inherit all properties from the input fields */
  width: 100%;
  height: 50px;
  border-radius: 25px;
  background-color: #ffffffdc;
  border: none;
  outline: none;
  font-weight: 300;

  /* Apply padding similar to inputs, but use an arrow appearance */
  padding: 0px 20px;

  font-size: 14px;
  color: #fff;
  margin-bottom: 30px;
  position: relative;
  z-index: 3;

  /* Critical for select box appearance */
  appearance: none;
  /* Removes dffffffdcefault OS dropdown arrow (Chrome/Firefox/Edge) */
  -webkit-appearance: none;
  /* Removes default OS dropdown arrow (Safari) */
  cursor: pointer;
}

/* NEW */
#contact-form select option {
  color: #333;
  /* Use a darker color so the options are readable against a white background */
  background: #fff;
}

.contact-us-content .more-info {
  text-align: center;
  background: rgba(32, 201, 151, 0.95);
  background: linear-gradient(
    90deg,
    rgba(32, 201, 151, 1) 0%,
    rgb(104, 250, 206) 100%
  );
  border-radius: 0px 0px 23px 23px;
  padding: 45px 30px 15px 30px;
}

.contact-us-content .more-info .info-item {
  text-align: center;
  margin-bottom: 30px;
}

.contact-us-content .more-info i {
  font-size: 32px;
  color: #fff;
  margin-bottom: 15px;
}

.contact-us-content .more-info h4 a {
  color: #fff;
  font-size: 16px;
  font-weight: 400;
}

/* 
---------------------------------------------
Footer Style
--------------------------------------------- 
*/

footer {
  margin-top: 150px;
  position: relative;
  background-color: #ff5200;
  vertical-align: middle;
  min-height: 150px;
  border-radius: 150px 150px 0px 0px;
}

footer p {
  text-align: center;
  line-height: 150px;
  color: #fff;
  font-weight: 400;
}

footer p a {
  color: #fff;
  transition: all 0.3s;
  position: relative;
  z-index: 3;
}

footer p a:hover {
  opacity: 0.75;
}

footer::before {
  background: url(../images/contact-dec-01.png);
  position: absolute;
  left: 30px;
  transform: rotate(180deg);
  opacity: 1;
  bottom: 0;
  width: 318px;
  height: 119px;
  content: "";
  z-index: 2;
}

/* 
---------------------------------------------
Responsive Style
--------------------------------------------- 
*/

body {
  overflow-x: hidden;
}

@media (max-width: 767px) {
  .header-area {
    top: 0px;
  }

  .header-area .main-nav .logo h1 {
    border-right: none;
  }

  /* ************************************************* */
  /* 🌟 FIX: Mobile banner styles for phones */
  /* ************************************************* */
  .main-banner .item {
    min-height: 450px !important; /* Increased from auto to make images taller */
    padding: 50px 20px !important; /* Increased padding for better spacing */
    margin-left: 0 !important;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .main-banner .item span.category {
    margin-bottom: 20px;
    font-size: 12px;
    padding: 4px 12px;
  }

  .main-banner .item h2 {
    font-size: 24px !important;
    line-height: 32px !important;
    width: 100% !important;
    margin-bottom: 15px !important;
  }

  .main-banner .item p {
    width: 100% !important;
    font-size: 13px;
    line-height: 22px;
    margin-bottom: 20px;
  }

  .main-banner .item .buttons {
    margin-top: 20px !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
  }

  .main-banner .item .buttons .main-button {
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    width: 100%;
    max-width: 200px;
  }

  .main-banner .item .buttons .main-button a {
    width: 100%;
    display: block;
    height: 45px;
    line-height: 45px;
    font-size: 13px;
  }

  .main-banner .item .buttons .icon-button {
    display: none; /* Hide icon button on mobile for cleaner look */
  }

  .main-banner .owl-nav {
    left: 50% !important;
    transform: translateX(-50px) !important;
    bottom: 10px !important;
  }

  .main-banner .owl-nav .owl-prev i,
  .main-banner .owl-nav .owl-next i {
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 18px;
  }

  .main-banner .owl-nav .owl-prev i {
    bottom: 0px;
  }

  .main-banner .owl-nav .owl-next i {
    bottom: 0px;
    position: absolute;
    left: 50px;
  }

  .event_filter {
    padding: 15px 20px;
  }

  .event_filter li {
    display: inline-block;
    margin: 0px 10px;
  }
}

@media (max-width: 992px) {
  .header-area .main-nav #search input,
  .header-area .main-nav #search i {
    display: none;
  }

  .header-area .main-nav .logo h1 {
    font-size: 34px;
  }

  .header-area .main-nav .logo {
    border-right: none;
  }

  .main-banner {
    padding-top: 100px;
  }

  .main-banner .item {
    padding: 80px 60px; /* Consolidate padding */
    margin-left: 0px;
    text-align: center;

    /* ************************************************* */
    /* 🌟 FIX: Increase min-height for tablets */
    /* ************************************************* */
    height: 40rem; /* Increased for better image display */

    /* Ensure content is centered vertically */
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .main-banner .item h2,
  .main-banner .item p {
    width: 100%;
  }

  .main-banner .item h2 {
    font-size: 36px;
    line-height: 50px;
    margin-bottom: 20px;
  }

  .main-banner .item .buttons {
    display: inline-block;
    text-align: center;
  }

  .main-banner .item .buttons .main-button {
    margin-right: 0px;
    margin-bottom: 30px;
  }

  .main-banner .owl-nav {
    left: 50% !important;
    transform: translateX(-60px) !important;
    bottom: 60px;
  }

  .main-banner .owl-nav .owl-prev i {
    bottom: 0px;
  }

  .main-banner .owl-nav .owl-next i {
    bottom: 0px;
    position: absolute;
    left: 65px;
  }
}

/* Services Section */
.services {
  margin-top: 40px;
  margin-bottom: 40px;
}

/* Single Card */
.services .service-item {
  position: relative;
  margin-top: 95px;
}

/* Circle Icon */
.services .service-item .icon {
  width: 165px;
  height: 165px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ff5a00 0%, #ff8a2d 100%);
  border-radius: 50%;
  position: absolute;
  right: 32px;
  top: -85px;
  z-index: 5;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.1);
}

/* Icon Image — forced to WHITE */
.services .service-item .icon img {
  width: 70px;
  height: 70px;
  object-fit: contain;
  filter: brightness(0) invert(1); /* MAKES ICON PURE WHITE */
  transition: transform 0.25s ease;
}

/* Card Body */
.services .service-item .main-content {
  background-color: #fff3e0; /* same orange-light theme */
  padding: 60px 30px 40px 30px;
  border-radius: 18px;
  margin-right: 40px;
  min-height: 230px;
  transition: 0.3s ease;
}

/* Title */
.services .service-item h4 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px;
  color: #ff6a00; /* title orange */
}

/* Paragraph */
.services .service-item p {
  line-height: 1.6;
  color: #444;
}

/* Highlights */
.services .service-item p strong {
  color: #000; /* strong text black */
  font-weight: 800;
}

/* Hover effect */
.services .service-item:hover .main-content {
  transform: translateY(-5px);
  box-shadow: 0 20px 34px rgba(0, 0, 0, 0.07);
}

.services .service-item:hover .icon img {
  transform: translateY(-3px);
}

/* Mobile Fix — ALIGN + resize neatly */
@media (max-width: 768px) {
  .services .service-item .icon {
    width: 130px;
    height: 130px;
    right: 50%;
    transform: translateX(50%);
    top: -70px;
  }

  .services .service-item .icon img {
    width: 55px;
    height: 55px;
  }

  .services .service-item .main-content {
    margin-right: 0;
    text-align: center;
    padding: 70px 20px 35px 20px;
  }
}