/*---------------------------------------------------------------
        Template Name: Cater Platter | Exceptional Catering for Every Occasion
        Description: Catering One Page Website Template
        Author: Lucid Themeslab
        Author URL: https://www.templatemonster.com/store/lucid_themeslab/
        Version: 2.0.0
    -----------------------------------------------------------------

        CSS INDEX
        ==================
        01.   Basic Styles
        02.   Preloader Style 
        03.   Theme Switcher 
        04.   Header, Navigation Section Styles
        05.   Hero Banner Section Styles
        06.   Service Features Section Styles
        07,   About Section Styles
        08.   Service Section Styles
        09.   Counter Section Styles
        10.   Menus Section Styles
        11.   Package Section Styles
        12.   Why Choose Section Styles
        13.   Subscribe Section Styles
        14.   Gallery Section Styles
        15.   Testimonials Section Styles
        16.   FAQ Section Styles
        17.   Contact Section Styles
        18.   Blog Section Styles
        19.   Footer Section Styles
        20.   Back to top Styles
     
----------------------------------------------------------------*/

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');


/* ==================
   Basic Styles 
================== */

[data-cateringtheme="lightmode"] {
  --body-color: #FFFFFF;
  --primary-color: #FF5900;
  --primary-rgba-color: 255, 89, 0;
  --primary-hover-color: #c04300;
  --secondary-color: #0B0320;
  --secondary-overlay: 11, 3, 32;
  --alt-color: #FEF4EF;
  --white-color: #ffffff;
  --form-color: #fff9f5;
  --card-color: #ffffff;
  --danger-color: #fa5050;
  --warning-color: #FFB800;
  --border-primary: #FF5900;
  --form-text-active: #000000;

  /* text-colors */
  --primary-text: #FF5900;
  --heading-text: #000000;
  --para-text: #5B5B5B;
  --white-text: #ffffff;
  --form-text: #4F4F4F;
  --danger-text: #fa5050;

  /* font family */
  --primaryfont: "Cormorant Garamond", serif;
  --secondaryfont: "Nunito", sans-serif;
}

[data-cateringtheme="darkmode-one"] {
  --body-color: #0F172A;
  --primary-color: #FF5900;
  --primary-rgba-color: 255, 89, 0;
  --primary-hover-color: #c04300;
  --secondary-color: #020617;
  --secondary-overlay: 2, 6, 23;
  --alt-color: #1E293B;
  --white-color: #ffffff;
  --form-color: #475569;
  --card-color: #283547;
  --danger-color: #fa5050;
  --warning-color: #FFB800;
  --form-text-active: #000000;

  /* text-colors */
  --primary-text: #FF5900;
  --heading-text: #ffffff;
  --para-text: #EEEEEE;
  --white-text: #ffffff;
  --form-text: #EEEEEE;
  --danger-text: #fa5050;

  /* font family */
  --primaryfont: "Cormorant Garamond", serif;
  --secondaryfont: "Nunito", sans-serif;
}

[data-cateringtheme="darkmode-two"] {
  --body-color: #171412;
  --primary-color: #FF5900;
  --primary-rgba-color: 255, 89, 0;
  --primary-hover-color: #c04300;
  --secondary-color: #09090B;
  --secondary-overlay: 9, 9, 11;
  --alt-color: #292524;
  --white-color: #ffffff;
  --form-color: #44403C;
  --card-color: #3A3733;
  --danger-color: #fa5050;
  --warning-color: #FFB800;


  /* text-colors */
  --primary-text: #FF5900;
  --heading-text: #ffffff;
  --para-text: #EEEEEE;
  --white-text: #ffffff;
  --form-text: #EEEEEE;
  --danger-text: #fa5050;
  --form-text-active: #000;

  /* font family */
  --primaryfont: "Cormorant Garamond", serif;
  --secondaryfont: "Nunito", sans-serif;
}

* {
  box-sizing: border-box;
  font-family: var(--primaryfont) !important;
  word-break: break-word;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  color: var(--primary-color);
  text-decoration: none;
}

.outer-section {
  overflow: hidden !important;
  height: auto;
}

.fs-0 {
  font-size: 0px;
}

/* Background-Color*/

.body-color {
  background-color: var(--body-color) !important;
}

.primary-color {
  background-color: var(--primary-color) !important;
}

.primary-hover-color {
  background-color: var(--primary-hover-color) !important;
}

.secondary-color {
  background-color: var(--secondary-color) !important;
}

.secondary-overlay {
  background-color: var(--secondary-overlay) !important;
}

.alt-color {
  background-color: var(--alt-color) !important;
}

.white-color {
  background-color: var(--white-color) !important;
}

.form-color {
  background-color: var(--form-color) !important;
}

.card-color {
  background-color: var(--card-color) !important;
}

.danger-color {
  background-color: var(--danger-color) !important;
}

.warning-color {
  background-color: var(--warning-color) !important;
}

/* Text-Color*/

.primary-font {
  font-family: var(--primaryfont) !important;
}

.secondary-font {
  font-family: var(--secondaryfont) !important;
}

.primary-text {
  color: var(--primary-text);
}

.heading-text {
  color: var(--heading-text);
}

.primary-fill {
  color: var(--primary-color);
}

.rating-fill {
  color: var(--warning-color);
}

.para-text {
  color: var(--para-text);
}

.white-text {
  color: var(--white-text);
}

.form-text {
  color: var(--form-text);
}

.danger-text {
  color: var(--danger-text);
}

.border-primary {
  border-color: var(--primary-color) !important;
}

/* Button Style */

.primary-btn {
  background-color: var(--primary-color) !important;
  color: var(--white-text) !important;
  padding: 8px 15px;
  border: 1px solid var(--primary-color) !important;
  font-size: 18px;
}

.primary-btn:hover {
  background-color: var(--primary-hover-color) !important;
  color: var(--white-text) !important;
  padding: 8px 15px;
  border: 1px solid var(--primary-hover-color);
  font-size: 18px;
  transition: 0.5s ease-in-out;
}

.btn-outline-primary {
  padding: 8px 15px;
  border: 1px solid var(--primary-color) !important;
  font-size: 18px;
  box-shadow: none;
  outline: none;
}

.btn:focus-visible {
  color: var(--bs-btn-hover-color);
  background-color: unset;
  border-color: unset;
  outline: 0;
  box-shadow: none;
  outline: 0;
}

.btn-outline-primary:hover {
  background-color: var(--primary-hover-color) !important;
  color: var(--white-text) !important;
  padding: 8px 15px;
  border: 1px solid var(--primary-hover-color);
  font-size: 18px;
  transition: 0.5s ease-in-out;
}

/* ==================
  Preloader Style
================== */

.preloader {
  position: fixed;
  height: 100vh;
  overflow: hidden !important;
  width: 100%;
  z-index: 9999 !important;
  background-color: var(--secondary-color);
}

.preloader-img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.food-icon {
  width: 70px;
  height: 70px;
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0% {
    rotate: 0deg;
  }

  25% {
    rotate: 90deg;
  }

  50% {
    rotate: 180deg;
  }

  100% {
    rotate: 360deg;
  }

}

/* ==================
  Theme Switcher
================== */

.light-theme {
  background-color: #ffffff;
  color: #333;
}

.dark-theme1 {
  background-color: #2e2e2e;
  color: #f5f5f5;
}

.dark-theme2 {
  background-color: #121212;
  color: #e0e0e0;
}

.theme-switcher {
  /* position: fixed; */
  top: 20px;
  left: 20px;
  display: flex;
  flex-direction: row;
  gap: 15px;
  background-color: var(--secondary-color);
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}

.theme-btn {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  border: none;
  background-color: transparent;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.theme-btn i {
  font-size: 24px;
  color: #000;
}

.theme-btn.light {
  color: var(--white-color);
}

.theme-btn.dark1 {
  color: var(--white-color);
}

.theme-btn.dark2 {
  color: var(--white-color);
}

.theme-btn:hover,
.theme-btn.active {
  transform: scale(1.15);
  background-color: var(--primary-color);
}

/* color palette */

.pallete-box-main {
  position: fixed;
  background-color: #ffff;
  top: 250px;
  left: -222px;
  z-index: 5;
  width: 222px;
  transition: left 0.6s ease-in-out;
}

.pallete-box-main.active {
  left: 0px !important;
}

.control-btn {
  display: flex;
  position: absolute;
  justify-content: center;
  top: 0;
  right: -53px;
  padding: 15px;
  height: 100%;
  width: 54px;
  line-height: 54px;
  align-items: center;
  border-radius: 0px 8px 8px 0px;
  background-color: var(--primary-color);
  box-shadow: 11px 0px 11px 0px rgba(154, 154, 154, 0.3);
}

#toggleButton {
  -moz-transition: all 0.5s linear;
  -webkit-transition: all 0.5s linear;
  transition: all 0.5s linear;
}

#toggleButton.rotate {
  -ms-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  border-radius: 5px 0px 0px 5px;
}

/*================================================
  Header/Hero_Banner Styles
=================================================*/

header {
  position: sticky;
  top: 0;
  z-index: 1030;
  width: 100%;
}

.nav-link:hover,
.nav-link.active,
.nav-link:focus {
  color: var(--primary-text) !important;
  box-shadow: none;
}

.nav-link:hover {
  transition: 0.3s ease-in-out;
}

.top-bar {
  border-bottom: 1px solid #f4f4f42e;
}

#home .slide-content {
  min-height: 750px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 15px;
  position: relative;
  transition: background-image 1s ease-in-out;
}

/* ✅ Medium devices (tablets) */
@media (max-width: 992px) {
  #home .slide-content {
    min-height: 600px;
    padding: 40px 15px;
  }

  #home .container h2 {
    font-size: 2rem;
  }

  #home .container p {
    font-size: 1rem;
  }
}

/* ✅ Small devices (phones) */
@media (max-width: 576px) {
  #home .slide-content {
    min-height: 450px;
    padding: 30px 10px;
  }

  #home .container h2 {
    font-size: 1.5rem;
    line-height: 1.3;
  }

  #home .container p {
    font-size: 0.95rem;
  }

  #home .container a.btn {
    padding: 8px 18px;
    font-size: 0.9rem;
  }
}

/* Overlay effect */
#home .slide-content::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(var(--secondary-overlay), 0.6);
  z-index: 1;
}

/* Text container */
#home .container {
  z-index: 2;
  position: relative;
}

/* Slide-specific background images */
.slide-1 {
  background-image: url('../../assets/backround_img/banner-1.webp');
}

.slide-2 {
  background-image: url('../../assets/backround_img/banner-2.webp');
}

.slide-3 {
  background-image: url('../../assets/backround_img/banner-3.webp');
}

/* Responsive Text */
@media (max-width: 768px) {
  #home .container h2 {
    font-size: 2rem;
  }

  #home .container p {
    font-size: 1rem;
  }
}

.banner-box {
  max-width: 850px;
  margin: 0 auto;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(6px);
  border-radius: 16px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
  transition: all 0.4s ease;
}

.banner-box h2 {
  font-size: 3.2rem;
  color: #fff;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
}

.banner-box p {
  color: #f8f9fa;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .banner-box {
    padding: 40px 20px;
  }

  .banner-box h2 {
    font-size: 2.2rem;
  }

  .banner-box p {
    font-size: 1.1rem;
  }
}

@media (max-width: 576px) {
  .banner-box {
    padding: 30px 15px;
  }

  .banner-box h2 {
    font-size: 1.7rem;
  }

  .banner-box p {
    font-size: 1rem;
  }
}

.splide__arrow svg {
  fill: var(--white-color);
  height: 1.2em;
  width: 1.2em;
}

.splide__arrow {
  background: var(--primary-color);
}

.splide__pagination__page.is-active {
  background: var(--primary-color);
  height: 8px;
  width: 18px;
  border-radius: 25px;
}

.splide__pagination__page {
  background: var(--white-color);
  height: 12px;
  width: 12px;
  opacity: 1;

}

.splide__pagination {
  bottom: 3.5em;
}

/* ===============================
   Service Features Section Styles
=================================== */

.service-item {
  box-shadow: 0 0 45px rgba(0, 0, 0, .08);
  transition: transform 0.3s;
}

.service-item:hover {
  transform: translateY(-10px);
  box-shadow: 0 0 45px rgba(0, 0, 0, .08);
}

.service-item:hover .deny {
  animation: deny 0.5s;
  animation-fill-mode: forwards;
  transition: 0.5s ease-in-out;
}

@keyframes deny {
  0% {
    transform: translate(-4px);
  }

  30% {
    transform: translate(10px);
  }

  70% {
    transform: translate(4px);
  }

  100% {
    transform: translate(10px);
  }
}

/* =====================
   About Section Styles
======================== */
.img-box {
  position: relative;
  display: inline-block;
}

.main-img {
  width: 90%;
  max-width: 90%;
  border-radius: 12px;
  border: 6px solid #fff;
  display: block;
  margin: 0 auto;
}

.overlay-img {
  position: absolute;
  bottom: -20px;
  left: -30px;
  width: 60%;
  border: 6px solid #fff;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.img-box {
  overflow: visible;
}

@media (max-width: 576px) {
  .img-box {
    padding-bottom: 60px;
  }
}

@media (max-width: 576px) {
  .main-img {
    transform: translateX(15);
    width: 80%;
    max-width: 80%;
    display: block;
    margin: 0 auto;
  }

  .overlay-img {
    left: 0;
    width: 60%;
    bottom: 20px;
  }
}

.img-container {
  position: relative;
  width: 100%;
  padding-top: 60%; /* Aspect ratio: change this for taller or shorter image */
  overflow: hidden;
  border-radius: 12px;
  border: 6px solid #fff;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  max-width: 800px;
  margin: 0 auto; /* Center align on large screens */
}

.what_we_do_img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* fills the box while keeping aspect ratio */
  border-radius: 12px;
}

/* Optional: Adjust for smaller devices */
@media (max-width: 768px) {
  .img-container {
    padding-top: 70%; /* Slightly taller image on mobile */
    border: 4px solid #fff;
  }
}

@media (max-width: 576px) {
  .img-container {
    padding-top: 80%;
    border: 3px solid #fff;
  }
}


/* ==================
   Services Section Styles
================== */

.service-item {
  box-shadow: 0 0 45px rgba(0, 0, 0, .08);
  transition: transform 0.3s;
}

.service-item:hover {
  transform: translateY(-10px);
  box-shadow: 0 0 45px rgba(0, 0, 0, .08);
}

.service-item:hover .deny {
  animation: deny 0.5s;
  animation-fill-mode: forwards;
  transition: 0.5s ease-in-out;
}

@keyframes deny {
  0% {
    transform: translate(-4px);
  }

  30% {
    transform: translate(10px);
  }

  70% {
    transform: translate(4px);
  }

  100% {
    transform: translate(10px);
  }
}

/* ==================
   Counter Section Styles
================== */

.funfacts:hover {
  animation: funfacts 0.5s;
  animation-fill-mode: forwards;
  transition: 0.5s ease-in-out;
}

@keyframes funfacts {
  0% {
    transform: translate(-4px);
  }

  30% {
    transform: translate(10px);
  }

  70% {
    transform: translate(4px);
  }

  100% {
    transform: translate(10px);
  }
}

/* ==================
   Menus Section Styles
================== */

.nav-pills .nav-link {
  color: var(--heading-text);
  border: 1px solid #ccc;
  margin: 0 5px;
}

.nav-pills .nav-link.active {
  background-color: var(--primary-color);
  color: #fff !important;
  border-color: var(--primary-color);
}

.menu-card {
  border: none;
  transition: 0.3s;
}

.menu-card:hover {
  transform: scale(1.03);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.menu-img {
  height: 180px;
  object-fit: cover;
  border-radius: 8px 8px 0 0;
}

.menu-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--heading-text);
}

.menu-price {
  color: var(--primary-color);
  font-weight: bold;
}

/* Fix overlapping tab content issue */
.tab-content>.tab-pane {
  display: none;
  /* Hide all tab panes initially */
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.tab-content>.active {
  display: block !important;
  /* Only active pane is shown */
  opacity: 1;
}

/* Optional: Avoid stacking due to WOW or AOS animation reflows */
.menu-card {
  animation: none !important;
  visibility: visible !important;
  opacity: 1 !important;
}


/* ==================
   Package Section Styles
================== */
.packages-section {
  padding: 100px 0;
  text-align: center;
  background: linear-gradient(0deg, rgba(var(--secondary-overlay), 0.5), rgba(var(--secondary-overlay), 0.7)),
    url(../../assets/backround_img/package_section.webp) no-repeat;
  color: #fff;
  position: relative;
  z-index: 1;
  overflow: hidden;
  background-size: cover;
}

.packages-section h2 {
  font-size: 3rem;
  font-weight: bold;
  position: relative;
  z-index: 1;
}

.package-card {
  background-image: linear-gradient(to top, #ffd6c0 0%, var(--card-color) 100%);
  border-radius: 20px;
  padding: 40px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  position: relative;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.package-card:hover {
  transform: translateY(-15px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

.package-price {
  font-size: 2.5rem;
  color: var(--primary-text);
  font-weight: bold;
  margin-bottom: 10px;
}

@media (max-width: 768px) {
  .package-price {
    font-size: 2rem;
  }

  .package-title {
    font-size: 1.6rem;
  }
}

.package-list li {
  font-size: 1.1rem;
  margin-bottom: 10px;
  position: relative;
  padding-left: 25px;
}

.highlight {
  position: absolute;
  top: 0px;
  left: 0px;
  padding: 5px 20px;
  box-shadow: 0 5px 15px rgba(255, 107, 107, 0.5);
  border-radius: 0 0 10px 0;
}

@media (max-width: 992px) {
  .package-price {
    font-size: 2rem;
  }

  .package-title {
    font-size: 1.6rem;
  }
}

/* ==================
   Why Choose Section Styles
================== */

/* ==================
   Why Choose Section Styles
================== */
.feature-box {
  background-color: #fff;
  border: 1px solid var(--primary-color);
  border-radius: 10px;
  padding: 15px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.feature-box img {
  width: 80px;
}

.circle-image {
  position: relative;
  width: 400px;
  height: 400px;
  background-color: var(--primary-color);
  border-radius: 50%;
  display: inline-block;
  padding: 20px;
  text-align: center;
}

.circle-image .logo-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 150px;
  height: auto;
}

.food-img {
  position: absolute;
  width: 80px;
  height: auto;
}

.food-img-top {
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
}

.food-img-left {
  left: -40px;
  top: 50%;
  transform: translateY(-50%);
}

.food-img-right {
  right: -40px;
  top: 50%;
  transform: translateY(-50%);
}

.food-img-bottom {
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
}

.whysection-circle {
  width: 450px;
  height: 450px;
  border: 5px solid var(--primary-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
}

.whysection-circleouter {
  background-color: var(--border-primary);
  width: 420px;
  height: 420px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.whysection-inner {
  border: 2px dashed white;
  border-radius: 50%;
  width: 400px;
  height: 400px;
  position: relative;
}

.whysection-inner img {
  position: absolute;
}

.whysection-inner img:nth-child(1) {
  top: calc(50% - 75px);
  left: -25%;
}

.whysection-inner img:nth-child(2) {
  top: -25%;
  left: calc(50% - 75px);
}

.whysection-inner img:nth-child(3) {
  top: calc(50% - 75px);
  right: -25%;
}

.whysection-inner img:nth-child(4) {
  left: calc(50% - 75px);
  bottom: -25%;
}

.whysection-inner img:nth-child(5) {
  left: calc(50% - 90px);
  top: calc(50% - 40px);
}

@media(max-width:590px) {
  .whysection-circle {
    width: 280px;
    height: 280px;
  }

  .whysection-circleouter {
    width: 250px;
    height: 250px;
  }

  .whysection-inner {
    width: 220px;
    height: 220px;
  }

  .whysection-inner img:nth-child(1) {
    width: 100px;
  }

  .whysection-inner img:nth-child(2) {
    width: 100px;
    left: calc(50% - 50px);
  }

  .whysection-inner img:nth-child(3) {
    width: 100px;
  }

  .whysection-inner img:nth-child(4) {
    width: 100px;
    left: calc(50% - 50px);
  }

  .whysection-inner img:nth-child(5) {
    width: 100px;
  }

  .whysection-inner img:nth-child(5) {
    left: calc(50% - 50px);
    top: calc(50% - 20px);
  }
}

@media (max-width: 768px) {
  .circle-image {
    width: 200px;
    height: 200px;
  }

  .food-img {
    width: 50px;
  }

  .logo-center {
    width: 100px;
  }
}

.icon-image {
  animation: upDown 2s ease-in-out infinite;
}

@keyframes upDown {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0);
    /* Return to original position */
  }
}

.feature-box {
  box-shadow: 0 0 45px rgba(0, 0, 0, .08);
  transition: transform 0.3s;
}

.feature-box:hover {
  transform: translateY(-10px);
  box-shadow: 0 0 45px rgba(0, 0, 0, .08);
}

.feature-box:hover .deny {
  animation: deny 0.5s;
  animation-fill-mode: forwards;
  transition: 0.5s ease-in-out;
}

/* ==================
  Subscribe Section Styles
================== */

/* .subscribe-input {
  border-radius: 25px 0 0 25px;
} */


@media (max-width: 991px) {
  .sub-img {
    width: 320px;
    height: 320px;
    margin: 0 auto; /* centers the image */
    text-align: center;
  }
  .sub-img img {
    display: block;
    margin: 0 auto;
  }
}



@media (max-width: 590px) {
.faq-img {
    width: 320px;
    height: 320px;
    margin: 0 auto; /* centers the image */
    text-align: center;
  }
.faq-img {
    display: block;
    margin: 0 auto;
  }
}



/* ==================
   Gallery Section Styles
================== */

.gallery-container .gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}

.gallery-container .gallery-item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.3s ease;
}

.gallery-container .gallery-item:hover img {
  transform: scale(1.05);
}

.gallery-container .overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(var(--secondary-overlay), 0.6);
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-container .gallery-item:hover .overlay {
  opacity: 1;
}

.lb-data .lb-close {
  background: url(../../assets/icons/close.png) top right no-repeat;
}

.lb-nav a.lb-prev {
  background: url(../../assets/icons/previous.png) left 48% no-repeat;
}

.lb-nav a.lb-next {
  background: url(../../assets/icons/next.png) right 48% no-repeat;
}

.lb-cancel {
  background: url(../../assets/icons/loading.gif)no-repeat;
}

/* ==================
   Testmonials Section Styles
================== */

.testimonial {
  padding: 70px 50px;
  margin: 50px 30px;
  border: 1px solid var(--primary-color);
  position: relative;
  border-radius: 10px;
}

.testimonial .pic {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 5px solid var(--primary-color);
  overflow: hidden;
  margin: 0 auto;
  position: absolute;
  top: -50px;
  left: 0;
  right: 0;
}

.testimonial .pic img {
  width: 100%;
  height: auto;
}

.testimonial .description {
  font-size: 15px;
  line-height: 27px;
  text-align: center;
  margin: 0;
  position: relative;
}

.testimonial .description:before {
  content: "\f10d";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 25px;
  color: #d7d7d7;
  position: absolute;
  top: -30px;
  left: -11px;
}

.testimonial .title {
  display: inline-table;
  padding: 10px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #ea816b;
  font-size: 20px;
  font-weight: 700;
  color: var(--primary-color);
  letter-spacing: 1px;
  text-transform: uppercase;
  position: absolute;
  bottom: -22px;
  left: 0;
  right: 0;
}

.testimonial .post {
  font-size: 15px;
  color: var(--primary-color);
}

.owl-prev {
  position: absolute;
  left: 0%;
  top: calc(50% - 25px);
  width: 50px;
  height: 50px;
  background-color: var(--card-color) !important;
  color: var(--para-text) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
}

.owl-next {
  position: absolute;
  top: calc(50% - 25px);
  right: 0%;
  width: 50px;
  height: 50px;
  background-color: var(--card-color) !important;
  color: var(--para-text) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
}

.owl-prev:hover,
.owl-next:hover {
  background-color: var(--primary-color) !important;
  color: white !important;
}

@media only screen and (max-width: 479px) {
  .testimonial {
    padding: 70px 10px 30px;
  }

  .testimonial .description:before {
    top: -20px
  }

  .testimonial .title {
    font-size: 12px;
  }

  .testimonial .post {
    font-size: 11px;
  }
}

/* ==================
  FAQ Section Styles
================== */

.accordion-item {
  border: none;
  border-radius: 8px;
  margin-bottom: 1rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.accordion-button:not(.collapsed) {
  color: var(--primary-color);
  font-weight: bold;
  box-shadow: none;
}

.accordion-button:focus {
  z-index: 3;
  border-color: unset;
  outline: 0;
  box-shadow: none;
}

.accordion-item {
  background-color: var(--card-bg);
}

.accordion-button:not(.collapsed)::after {
  content: '\f077';
  font-family: 'FontAwesome';
  background-image: unset;
  transform: var(--bs-accordion-btn-icon-transform);
}

.accordion-button::after {
  content: '\f078';
  font-family: 'FontAwesome';
  background-image: unset;
  transform: var(--bs-accordion-btn-icon-transform);
}

.accordion-button {
  background-color: var(--card-bg);
}

.accordion-button:not(.collapsed) {
  background-color: var(--card-bg);
  box-shadow: none;
}

.accordion-button:focus {
  border-color: unset;
  outline: 0;
  box-shadow: none;
}

.accordion-button .faq-button:hover {
  background-color: var(--primary-text) !important;
}

.accordion_wrapper .accordion-body {
  padding: 26px;
  padding-right: 28px;
  padding-top: 0;
  background-color: var(--card-bg);
  font-size: 16px;
  line-height: 1.75;
}

.checklist li {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  color: var(--para-text);
  font-family: var(--secondaryfont) !important;
}

.checklist .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(var(--primary-rgba-color), 0.2);
  color: var(--primary-color);
  font-size: 14px;
  min-width: 24px;
  min-height: 24px;
  border-radius: 50%;
  margin-right: 10px;
}

.faq-img {
  overflow: hidden;
}

/* ==================
  Contact Section Styles
================== */

.error {
  color: var(--danger-text) !important;
  background-color: var(--secondary-color);
  padding: 8px;
  font-family: var(--secondaryfont) !important;
}

::placeholder,
.form-control {
  color: var(--form-text) !important;
}

.comment-input {
  background-color: var(--form-color) !important;
  border: 1px solid var(--form-color) !important;
  box-shadow: none !important;
  color: var(--form-text);
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  font-family: inherit;
  border-radius: 6px;
  transition: all 0.3s ease;
  outline: none;
  color: var(--form-text);
  box-shadow: none !important;
}

.input-group button {
  top: 6px;
  right: 5px;
  z-index: 9 !important;
}

.input-group input {
  padding: 15px 150px 15px 15px !important;
}

.comment-input::placeholder {
  color: #aaa;
  transition: color 0.3s ease;
}

/* Focus State */
.comment-input:focus {
  background-color: var(--form-color, #fff) !important;
  border: 1px solid var(--primary-color) !important;
  box-shadow: none !important;
  color: var(--form-text, #000) !important;
}

/* Placeholder color on focus */
.comment-input:focus::placeholder {
  color: var(--form-text) !important;
  opacity: 1;
}

/* ==================
  Blog Section Styles
================== */

.blog-card {
  border: none;
  border-radius: 15px;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
}

.blog-card:hover {
  transform: translateY(-10px);
}

.date-label {
  background-color: var(--primary-color);
  color: white;
  font-size: 14px;
  font-weight: bold;
  padding: 5px 15px;
  position: absolute;
  right: 15px;
  bottom: -10px;
}

.blog-content {
  padding: 15px;
  position: relative;
}

.author-info {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #555;
}

.author-info img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-right: 10px;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--primary-color);
}

/* Target only blog card images */
.blog-img img {
  width: 100%;
  height: 250px;
  /* default height for desktop */
  object-fit: cover;
  border-radius: 15px 15px 0 0;
  display: block;
}

/* Tablet devices */
@media (max-width: 991.98px) {
  .blog-img img {
    height: 200px;
  }
}

/* Mobile devices */
@media (max-width: 767.98px) {
  .blog-img img {
    height: 250px;
  }
}

/* Extra small devices */
@media (max-width: 575.98px) {
  .blog-img img {
    height: 160px;
  }
}

/* ==================
  Footer Section Styles
================== */

.subscribe-input {
  border-radius: 25px 0 0 25px;
}

.btn-subscribe {
  background-color: var(--primary-color);
  color: #fff;
  border: none;
  border-radius: 0 25px 25px 0;
  padding: 0.5rem 1.5rem;
}

.footer-section ul li a {
  color: #fff;
  text-decoration: none;
  font-size: 1rem;
}

.footer-social-links {
  background-color: var(--card-color);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 3px solid #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 500ms ease;
  text-decoration: none;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  margin-right: 15px;
  font-size: 20px;
  color: var(--para-text);
}

.footer-social-links::after {
  content: "";
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  z-index: 1;
  cursor: pointer;
  transition: all 400ms ease-in;
}

a.footer-social-links.one:hover::after {
  background-color: #4267B2;
  color: #fff !important;
  top: 0;
}

a.footer-social-links:hover {
  box-shadow: 0 0 20px var(--primary-color);
}

.footer-social-links:hover .icons {
  color: #fff !important;
  z-index: 2;
}

a.footer-social-links.two:hover::after {
  background-color: #e1306c;
  color: #fff !important;
  top: 0;
}

a.footer-social-links.three:hover::after {
  background-color: #1DA1F2;
  color: #fff !important;
  top: 0;
}

a.footer-social-links.four:hover::after {
  background-color: #0072b1;
  color: #fff !important;
  top: 0;
}

.footer-links a:hover {
  color: var(--primary-color);
  transition: 0.3s ease-in;
}

/* ==================
  Back to top Styles
================== */

#backtotop {
  position: fixed;
  bottom: 30px;
  right: 30px;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
  border-radius: 50%;
  border: 2px dotted var(--white-color);
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: move 1.1s infinite ease-in-out;
  transition: 0.9s ease;
}

/* Arrow icon styling */
#backtotop .fa-arrow-up {
  font-size: 24px;
  color: white;
  animation: upDown 1s ease-in-out infinite;
}

@keyframes upDown {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

#backtotop:hover {
  cursor: pointer;
}

#backtotop.show {
  opacity: 1;
  visibility: visible;
}

.input-group {
  position: relative;
}

.input-group .error:not(.form-control) {
  position: absolute;
  top: 100%;
}
.alertmsg{
  z-index:1031
}