/*
Theme Name: Jubilee
Theme URI: https://templatesjungle.com/
Author: TemplatesJungle
Author URI: https://templatesjungle.com/
Description: Jubilee is specially designed product packaged for online course websites.
Version: 1.1
*/

/*--------------------------------------------------------------
This is main CSS file that contains custom style rules used in this template
--------------------------------------------------------------*/

/*------------------------------------*\
    Table of contents
\*------------------------------------*/

/*------------------------------------------------

CSS STRUCTURE:

1. VARIABLES

2. GENERAL TYPOGRAPHY
  2.1 General Styles
  2.2 Floating & Alignment
  2.3 Forms
  2.4 Lists
  2.5 Code
  2.6 Tables
  2.7 Spacing
  2.8 Utilities
  2.9 Misc
    - Row Border
    - Zoom Effect
  2.10 Buttons
    - Button Sizes
    - Button Shapes
    - Button Color Scheme
    - Button Aligns
  2.11 Section
    - Hero Section
    - Section Title
    - Section Paddings
    - Section Margins
    - Section Bg Colors
    - Content Colors
    - Content Borders

3. EXTENDED TYPOGRAPHY
  3.1 Blockquote / Pullquote
  3.2 Text Highlights

4. CONTENT ELEMENTS
  4.1 Tabs
  4.2 Accordions
  4.3 Brand Carousel
  4.4 Category Carousel

5. BLOG STYLES
  5.1 Blog Single Post
  5.2 About Author
  5.3 Comments List
  5.4 Comments Form3

6. SITE STRUCTURE
  6.1 Header
    - Header Menu
    - Nav Sidebar
  6.2 Billboard
  6.3 About Us Section
  6.4 Video Section
  6.5 Selling Products Section
  6.6 Quotation Section
  6.7 Latest Blogs Section
  6.8 Newsletter Section
  6.9 Instagram Section
  6.10 Footer
    - Footer Top
    - Footer Bottom

7. OTHER PAGES
  7.1 Product detail
  7.2 Shop page

    
/*--------------------------------------------------------------
/** 1. VARIABLES
--------------------------------------------------------------*/
/* @import url("https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap"); */


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

 /* {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
} */


:root {
  /* widths for rows and containers
     */
  --header-height: 160px;
  --header-height-min: 80px;
}

/* on mobile devices below 600px
 */
@media screen and (max-width: 600px) {
  :root {
    --header-height: 100px;
    --header-height-min: 80px;
  }
}

/* Theme Colors */
:root {
  --primary-color: #ff5c5c;
  --light-primary-color: #e2f3f0;
  --secondary-color: #ff5c5c;
  --light-secondary-color: #ffe9e5;
  --tertiary-color: #ffeed3;
  --dark-color: #31333a;
  --light-color: #ffffff;
  --grey-color: #bbc7d4;
  --light-dark-color: #727272;
  --light-grey-color: #f5f5f5;
}

/* Fonts */
:root {
  --body-font: "Montserrat", sans-serif;
  /* --heading-font: "Roboto", serif; */
}

body {
  --bs-link-color: var(--dark-color);
  --bs-link-hover-color: var(--dark-color);

  --bs-link-color-rgb: 40, 40, 40;
  --bs-link-hover-color-rgb: 0, 0, 0;

  --bs-light-rgb: 248, 248, 248;

  --bs-font-sans-serif: var(var(--body-font));
  --bs-body-font-family: "Montserrat", sans-serif;
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.3rem;
  --bs-body-color: var(--dark-color);

  --bs-primary: #ff5c5c;
  --bs-primary-rgb: 76, 192, 130;
  --bs-primary-bg-subtle: #e2f3f0;

  --bs-border-color: #f7f7f7;

  --bs-secondary: #ff5c5c;
  /* --bs-secondary-rgb: 236, 108, 90; */
  --bs-secondary-rgb: #ff5c5c;
  --bs-secondary-bg-subtle: #ffe9e5;

  --bs-tertiary: #f8be60;
  --bs-tertiary-bg-subtle: #ffeed3;
}

h6 .text-secondary {
  color: #ff5c5c;
}

p{
  margin-top: 0;
    margin-bottom: 1rem;
    font-size: 15px;
}

.text-secondary{
 background-color:  #ff5c5c;
}


.bg {
  background-color: #000;
}

.btn {
  --bs-btn-font-family: var(--heading-font);
}

.btn-primary {
  font-size: 1rem;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: 60px;
  transition: all 0.3s ease-in;
  --bs-btn-color: var(--light-color);
  --bs-btn-bg: var(--primary-color);
  --bs-btn-border-color: var(--primary-color);
  --bs-btn-hover-color: #4f432b;
  --bs-btn-hover-bg: #cb9a3a;
  --bs-btn-hover-border-color: #efd29a;
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: var(--light-color);
  --bs-btn-active-bg: var(--primary-color);
  --bs-btn-active-border-color: var(--primary-color);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--light-color);
  --bs-btn-disabled-bg: #d3d7dd;
  --bs-btn-disabled-border-color: var(--primary-color);
}

.btn-outline-primary {
  font-size: 1rem;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: 60px;
  transition: all 0.3s ease-in;
  --bs-btn-color: var(--primary-color);
  --bs-btn-bg: #ffffff;
  --bs-btn-border-color: var(--primary-color);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: var(--primary-color);
  --bs-btn-hover-border-color: var(--primary-color);
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: var(--primary-color);
  --bs-btn-active-bg: var(--primary-color);
  --bs-btn-active-border-color: var(--primary-color);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--primary-color);
  --bs-btn-disabled-bg: #d3d7dd;
  --bs-btn-disabled-border-color: var(--primary-color);
  --bs-gradient: none;
}

.btn-outline-dark {
  font-size: 1rem;
  text-transform: uppercase;
  font-weight: 600;
  transition: all 0.3s ease-in;
}

.btn-dark {
  font-size: 1rem;
  text-transform: uppercase;
  font-weight: 600;
  transition: all 0.3s ease-in;
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--dark-color);
  --bs-btn-border-color: var(--dark-color);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #212529;
  --bs-btn-hover-border-color: #212529;
  --bs-btn-focus-shadow-rgb: 66, 70, 73;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--dark-color);
  --bs-btn-active-border-color: var(--dark-color);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--dark-color);
  --bs-btn-disabled-border-color: var(--dark-color);
}

/* body {
  letter-spacing: 0.01625rem;
} */

.list-unstyled{
    /* padding-left: 0; */
    list-style: none;

}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family:"Montserrat", sans-serif;
  color: var(--bs-body-color);
  /* font-weight: 700; */
  text-transform: capitalize;
}

a {
  text-decoration: none;
}

.breadcrumb {
  --bs-breadcrumb-item-active-color: var(--dark-color);
}
.breadcrumb > a {
  position: relative;
  text-decoration: none;
  color: inherit; /* Maintain the color style */
}

.breadcrumb > a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: red;
  transition: width 0.3s ease;
}

.breadcrumb > a:hover::after {
  width: 100%;
}

.form-control {
  border: 1px solid #e4e3e3;
}

.form-control:focus {
  border-color: #949494;
  outline: 0;
  box-shadow: none;
}

.padding-large {
  padding-top: 18rem;
  padding-bottom: 14rem;
}

.padding-medium {
  /* padding-top: 8rem; */
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.padding-medium-2 {
  padding-top: 11rem;
  padding-bottom: 8rem;
}

@media only screen and (max-width: 768px) {
  .padding-large {
    padding-top: 10rem;
    padding-bottom: 5rem;
  }

  .padding-medium {
    padding-top: -6rem;
    padding-bottom: 6rem;
  }

  .padding-medium-2 {
    padding-top: 12rem;
    padding-bottom: 6rem;
  }
}

/*----------------------------------------------*/
/* 6. SITE STRUCTURE */
/*----------------------------------------------*/
/* 6.1 Header
--------------------------------------------------------------*/
/* Preloader */
.preloader-wrapper {
  width: 100%;
  height: 100vh;
  margin: 0 auto;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 111;
  background: #fff;
}

.preloader-wrapper .preloader {
  margin: 20% auto 0;
  transform: translateZ(0);
}

.preloader:before,
.preloader:after {
  content: "";
  position: absolute;
  top: 0;
}

.preloader:before,
.preloader:after,
.preloader {
  border-radius: 50%;
  width: 2em;
  height: 2em;
  animation: animation 1.2s infinite ease-in-out;
}

.preloader {
  animation-delay: -0.16s;
}

.preloader:before {
  left: -3.5em;
  animation-delay: -0.32s;
}

.preloader:after {
  left: 3.5em;
}
/* ****************** */
/* .postloader-wrapper {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 111;
  background-color: #f5f6f3;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* Rolling text styles */
/* .rolling-text {
  display: inline-block;
  font-family: "Playfair Display", serif;
  font-size: 48px;
  line-height: 72px;
  letter-spacing: 24px;
  height: 72px;
  overflow: hidden;
  color: #1a1a1a;
}

.rolling-text .block {
  display: inline-block;
}

.rolling-text .letter {
  display: inline-block;
  transition: transform 0.6s cubic-bezier(0.76, 0, 0.24, 1);
} */

/* Rolling animation */
/* .rolling-text.play .letter {
  transform: translateY(-100%);
} */

/* Highlight last block */
/* .rolling-text .block:last-child {
  color: #d3a13b;
} */

/* Delays for each letter */
/* .rolling-text .letter:nth-child(1) {
  transition-delay: 0.015s;
}
.rolling-text .letter:nth-child(2) {
  transition-delay: 0.03s;
}
.rolling-text .letter:nth-child(3) {
  transition-delay: 0.045s;
}
.rolling-text .letter:nth-child(4) {
  transition-delay: 0.06s;
}
.rolling-text .letter:nth-child(5) {
  transition-delay: 0.075s;
} */
/* Add more delays if needed */

/* Hiding the postloader */
/* body.loaded .postloader-wrapper {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
} */

@keyframes animation {
  0%,
  80%,
  100% {
    box-shadow: 0 2em 0 -1em var(--primary-color);
  }

  40% {
    box-shadow: 0 2em 0 0 var(--primary-color);
  }
}

@media screen and (max-width: 991px) {
  /* offcanvas menu */
  .offcanvas-body .nav-item {
    font-weight: 700;
    border-bottom: 1px solid #d1d1d1;
  }

  /* dropdown-menu */
  .dropdown-menu {
    padding: 0;
    border: none;
    line-height: 1.4;
    font-size: 0.9em;
  }
}

.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
  color: #fff;
}
/*----- Nav Section Style -------------------------*/
/* nav bar style  */
.navbar-nav .nav-link.active,
.navbar-nav .nav-link:active,
.navbar-nav .nav-link:hover {
  color: var(--primary-color);
}

.nav-link {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-transform: capitalize;
}

/* dropdown style */
.dropdown-item {
  text-transform: capitalize;
  font-weight: 500;
  padding: 0.5rem 1rem;
  font-size: 14px;
}

.dropdown-item.active,
.dropdown-item:active {
  color: var(--body-text-color);
}

.dropdown-menu {
  --bs-dropdown-link-active-bg: var(--light-grey-color);
}

.navbar-toggler-icon {
  background-color: #fff;
}

/*----- Feature Section Style -------------------------*/

.feature-item {
  box-shadow: 4px 4px 10px rgba(150, 150, 150, 0.192);
  background: var(--light-color);
  cursor: pointer;
}

.feature-item:hover {
  background: #cb9a3a;
  transition: all 0.3s ease-in;
}

.feature-title {
  font-weight: 700;
  text-transform: uppercase;
  color: var(--secondary-color);
  transition: all 0.3s ease-in;
}

.feature-info {
  transition: all 0.3s ease-in;
}

.feature-item:hover .feature-info,
.feature-item:hover .feature-title {
  color: #4f432b;
}

@media only screen and (min-width: 1400px) {
  #features {
    position: relative;
  }

  .feature-box {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

@media only screen and (max-width: 1399px) {
  .feature-box {
    /* margin-top: 120px; */
    margin-top: 12px;
  }
}

/*----- catergory Section Style -------------------------*/
.category-paragraph {
  transition: all 0.3s ease-in;
}

.primary {
  background: #f3d69c;
  transition: all 0.3s ease-in;
}

.svg-primary {
  color: var(--primary-color);
  transition: all 0.3s ease-in;
}

.primary:hover {
  background: var(--bs-primary);
}

.secondary {
  background: var(--bs-secondary-bg-subtle);
  transition: all 0.3s ease-in;
}

.svg-secondary {
  color: var(--secondary-color);
  transition: all 0.3s ease-in;
}

.secondary:hover {
  background: var(--bs-secondary);
}

.tertiary {
  background: var(--bs-tertiary-bg-subtle);
  transition: all 0.3s ease-in;
}

.svg-tertiary {
  color: var(--bs-tertiary);
  transition: all 0.3s ease-in;
}

.tertiary:hover {
  background: var(--bs-tertiary);
}

.gray {
  background: #e0e5eb;
  transition: all 0.3s ease-in;
}

.svg-gray {
  color: var(--bs-gray);
  transition: all 0.3s ease-in;
}

.gray:hover {
  background: var(--bs-gray);
}

.primary:hover .svg-primary,
.primary:hover .category-paragraph,
.secondary:hover .svg-secondary,
.secondary:hover .category-paragraph,
.tertiary:hover .svg-tertiary,
.tertiary:hover .category-paragraph,
.gray:hover .svg-gray,
.gray:hover .category-paragraph {
  color: var(--light-color);
}

/*----- courses Section Style -------------------------*/
h5.course-title {
  transition: all 0.3s ease-in;
}

h5.course-title:hover {
  color: var(--primary-color);
}

/*----- testimonial Section Style -------------------------*/
.swiper-pagination {
  position: unset;
}

.swiper-pagination-bullet {
  width: var(
    --swiper-pagination-bullet-width,
    var(--swiper-pagination-bullet-size, 10px)
  );
  height: var(
    --swiper-pagination-bullet-height,
    var(--swiper-pagination-bullet-size, 10px)
  );
}

.swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: var(--bs-primary);
  background: var(--bs-primary);
}

/*----- teacher Section Style -------------------------*/
.team-member ul.social-links {
  top: 0;
}

.team-member ul li {
  padding: 5px;
  transform: rotatey(-90deg) perspective(100px);
  transform-origin: left;
  cursor: pointer;
  transition: 0.5s ease-in-out;
  background-color: var(--primary-color);
}

.team-member ul li:first-of-type {
  transition-delay: 0.3s;
}

.team-member ul li:nth-of-type(2) {
  transition-delay: 0.6s;
}

.team-member ul li:nth-of-type(3) {
  transition-delay: 0.9s;
}

.team-member ul li:last-of-type {
  transition-delay: 1.3s;
}

.team-member:hover ul li {
  transform: rotatey(0deg);
}

/* Zoom Effect*/
.zoom-effect {
  position: relative;
  overflow: hidden;
}

.zoom-effect img {
  max-width: 100%;
  -webkit-transition: 0.6s ease-out;
  -moz-transition: 0.6s ease-out;
  transition: 0.6s ease-out;
}

.zoom-effect:hover img {
  -webkit-transform: scale(1.1, 1.1);
  -moz-transform: scale(1.1, 1.1);
  transform: scale(1.1, 1.1);
}

.zoom-effect:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  z-index: 2;
  opacity: 0;
  -moz-transition: 0.5s ease;
  -webkit-transition: 0.5s ease;
  transition: 0.5s ease;
}

.zoom-effect:hover:before {
  opacity: 1;
  cursor: pointer;
}

/*----- register Section Style -------------------------*/
#register {
  background: var(--tertiary-color);
}

/*----- footer Section Style -------------------------*/
a.footer-link:hover {
  color: var(--primary-color);
}
p.footer-link:hover {
  color: var(--primary-color);
}

svg.social-icon {
  color: #fff;
  transition: all 0.3s ease-in;
}

svg.social-icon:hover {
  color: var(--primary-color);
}
a.footer-link {
  color: #fff;
}
p.footer-link {
  color: #fff;
}

.footer-menu a{
  font-size:14px;
  
}



/*--------------------------------------------------------------
faqs page style start
--------------------------------------------------------------*/
.accordion-button:not(.collapsed) {
  color: var(--body-text-color);
  background-color: transparent;
  box-shadow: none;
}

.accordion {
  --bs-accordion-color: var(--light-text-color);
  --bs-accordion-bg: none;
  --bs-accordion-btn-color: var(--body-text-color);
}

.accordion-button:not(.collapsed)::after {
  background-image: url("https://api.iconify.design/eva/arrow-down-fill.svg?color=%234cc082");
}

.accordion-button::after {
  background-image: url("https://api.iconify.design/eva/arrow-down-fill.svg?color=%234cc082");
}

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

/*--------------------------------------------------------------
Checkout page style start
--------------------------------------------------------------*/
.form-check-input {
  border: 1px solid var(--primary-color);
}

.form-check-input:checked {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.form-check-input:focus {
  border-color: var(--primary-color);
  box-shadow: none;
}

/*--------------------------------------------------------------
Styles page style start
--------------------------------------------------------------*/
.chocolat-wrapper {
  z-index: 9999;
}

/*--------------------------------------------------------------
Account page style start
--------------------------------------------------------------*/
.nav-tabs .nav-item.show .nav-link.account-tab,
.nav-tabs .nav-link.account-tab {
  color: var(--light-dark-color);
}

.nav-tabs .nav-item.show .nav-link.account-tab,
.nav-tabs .nav-link.account-tab.active {
  color: var(--primary-color);
}

/*--------------------------------------------------------------
Blog page style start
--------------------------------------------------------------*/

/* ------ Pagination ------*/
.pagination {
  --bs-pagination-padding-x: 0.75rem;
  --bs-pagination-padding-y: 0.375rem;
  --bs-pagination-font-size: 1rem;
  --bs-pagination-color: var(--bs-link-color);
  --bs-pagination-bg: var(--bs-body-bg);
  --bs-pagination-border-width: 0;
  --bs-pagination-border-color: var(--bs-border-color);
  --bs-pagination-border-radius: 0;
  --bs-pagination-hover-color: var(--light-color);
  --bs-pagination-hover-bg: var(--bs-primary);
  --bs-pagination-hover-border-color: var(--bs-border-color);
  --bs-pagination-focus-color: var(--light-color);
  --bs-pagination-focus-bg: var(--bs-primary);
  --bs-pagination-focus-box-shadow: none;
  --bs-pagination-active-color: var(--light-color);
  --bs-pagination-active-bg: var(--bs-primary);
  --bs-pagination-active-border-color: var(--bs-primary);
  --bs-pagination-disabled-color: var(--bs-primary-color);
  --bs-pagination-disabled-bg: var(--bs-primary-bg);
  --bs-pagination-disabled-border-color: var(--bs-border-color);
  display: flex;
  padding-left: 0;
  list-style: none;
}

/*--------------------------------------------------------------
Single Product page style start
--------------------------------------------------------------*/
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  color: var(--bs-body-color);
  background-color: var(--primary-color);
}

/* product-thumbnail-slider */
.product-thumbnail-slider {
  height: 660px;
}

/*--------------------------------------------------------------
  Shop page style
  --------------------------------------------------------------*/
.product-box {
  width: 25%;
}

@media screen and (max-width: 800px) {
  .product-box {
    width: 50%;
  }
}

.product-store .product-item {
  position: relative;
}

.product-item .cart-concern {
  background: var(--light-color);
  width: 80%;
  text-align: center;
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 180px;
  z-index: 9;
  transition: 0.5s ease-out;
  padding: 20px 30px;
  opacity: 0;
}

.product-item:hover .cart-concern {
  bottom: 150px;
  opacity: 1;
}

.cart-concern .cart-button button {
  background: none;
  color: var(--dark-color);
  height: auto;
  padding: 0;
  margin: 0;
}

.cart-concern .cart-button button i.icon {
  font-size: 15px;
}

.product-item .wishlist-btn i.icon.icon-heart {
  font-size: 20px;
}

.product-item .item-price {
  font-size: 1.8em;
}

/*--------------------------------------------------------------
  course detail page style
  --------------------------------------------------------------*/
.nav-tabs .nav-item {
  transition: all 0.1s ease-in;
  border-radius: 0px;
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
  color: var(--bs-primary);
  background-color: transparent;
  border-color: transparent;
  border-bottom: 4px solid var(--bs-primary);
  transition: all 0.1s ease-in;
}

.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover {
  color: var(--bs-primary);
  isolation: isolate;
  border-color: transparent;
  border-bottom: 4px solid var(--bs-primary);
  transition: all 0.1s ease-in;
}

/*---- video section style start ----*/

/* color box style */
div#cboxOverlay {
  opacity: 0.8 !important;
}

.video .video-player {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

iconify-icon.video-icon {
  font-size: 30px;
  color: var(--bs-light);
  border-radius: 6.25rem;
  background: rgba(255, 255, 255, 0.35);
  transition: all 0.4s ease-in-out;
}

iconify-icon.video-icon:hover {
  font-size: 35px;
}

.float {
  position: fixed;
  width: 58px;
  left: 8px;
  height: 58px;
  bottom: 8px;
  right: 18px;
  background-color: #25d366;
  color: #fff;
  border-radius: 50px;
  text-align: center;
  font-size: 30px;
  z-index: 100;
}

/*.carousel img {
  width: 70px;
  max-height: 70px;
  border-radius: 50%;
  margin-right: 1rem;
  overflow: hidden;
}
.carousel-inner {
  padding: 1em;
}

@media screen and (min-width: 576px) {
  .carousel-inner {
    display: flex;
    width: 90%;
    margin-inline: auto;
    padding: 1em 0;
    overflow: hidden;
  }
  .carousel-item {
    display: block;
    margin-right: 0;
    flex: 0 0 calc(100% / 2);
  }
}
@media screen and (min-width: 768px) {
  .carousel-item {
    display: block;
    margin-right: 0;
    flex: 0 0 calc(100% / 3);
  }
}
.carousel .card {
  margin: 0 0.5em;
  border: 0;
}

.carousel-control-prev,
.carousel-control-next {
  width: 3rem;
  height: 3rem;
  background-color: grey;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
}*/
#testimonial {
  overflow: hidden;
  position: relative;
}

.swiper-wrapper {
  display: flex;
  animation: slideLeft 20s linear infinite;
}

.swiper-slide {
  flex: 0 0 auto;
  width: calc(100% - 2rem); /* Adjust the width as necessary */
  margin-right: 2rem; /* Gap between slides */
}

@keyframes slideLeft {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-100%);
  }
}

/* Make adjustments for smaller screens */
@media (max-width: 768px) {
  .swiper-slide {
    width: 90%; /* For better appearance on smaller screens */
    margin-right: 1rem;
  }
}

/* .roboto-thin {
  font-family: "Roboto", serif;
  font-weight: 100;
  font-style: normal;
}

.roboto-light {
  font-family: "Roboto", serif;
  font-weight: 300;
  font-style: normal;
}

.roboto-regular {
  font-family: "Roboto", serif;
  font-weight: 400;
  font-style: normal;
}

.roboto-medium {
  font-family: "Roboto", serif;
  font-weight: 500;
  font-style: normal;
}

.roboto-bold {
  font-family: "Roboto", serif;
  font-weight: 700;
  font-style: normal;
}

.roboto-black {
  font-family: "Roboto", serif;
  font-weight: 900;
  font-style: normal;
}

.roboto-thin-italic {
  font-family: "Roboto", serif;
  font-weight: 100;
  font-style: italic;
}

.roboto-light-italic {
  font-family: "Roboto", serif;
  font-weight: 300;
  font-style: italic;
}

.roboto-regular-italic {
  font-family: "Roboto", serif;
  font-weight: 400;
  font-style: italic;
}

.roboto-medium-italic {
  font-family: "Roboto", serif;
  font-weight: 500;
  font-style: italic;
}

.roboto-bold-italic {
  font-family: "Roboto", serif;
  font-weight: 700;
  font-style: italic;
}

.roboto-black-italic {
  font-family: "Roboto", serif;
  font-weight: 900;
  font-style: italic;
}

.pt-serif-bold {
  font-family: "Roboto", serif;
  font-weight: 700;
  font-style: normal;
}

.pt-serif-regular-italic {
  font-family: "Roboto", serif;
  font-weight: 400;
  font-style: italic;
}

.pt-serif-bold-italic {
  font-family: "Roboto", serif;
  font-weight: 700;
  font-style: italic;
}
* {
  /* font-family: "Roboto", serif;; *
  font-family: "Montserrat", sans-serif;
  /* font-weight: 400; *
  font-style: normal;
} */
/* #features > .feature-box > .row > .healer > .healer-new:hover {
  background: #e7c819;
  color: #ff5c5c ;
} */

.post-description h5{
  font-size: 17px;
  margin-top:25px;


}
/* .course-details{
  margin-bottom: 10px;
  /* line-height: 1.90em; *
  color: #343030;
} */

.post-description p {
    /* font-size: 17px; */
    font-size: 15px;
    margin-bottom: 10px;
    line-height: 1.6em;
    color: #343030;

    

}

.post-description li {
  /* font-size: 17px; */
  font-size: 15px;
  margin-bottom: 10px;
  /* line-height: 1.6em; */
  color: #343030;

}



.pt-serif-regular {
  /* font-family: "Roboto", serif; */
  /* font-weight: 400; */
  font-style: normal;
  /* font-size: 15px; */
  line-height: 1.6em;
  font-size: 15px;
  /* letter-spacing: .03em; */
}



/* Slider Container */
.slider-container {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* Slider */
.slider {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

/* Each slide wrapper */
.slide {
  display: flex;
  justify-content: space-between;
  flex: 0 0 100%;
  /* padding: 10px; */
}

/* Card styles */
.col-md-4 {
  flex: 1 1 auto;
  cursor: pointer;
  display: flex;
  justify-content: center;
}

/* Card styles */
/* Increased gap between cards */
.slider .slide {
  display: flex;
  justify-content: space-between;
  flex: 0 0 100%;
  padding: 10px;
  gap: 30px;
  /* Increased gap between cards */
}

.primary {
  background: #ff5c5c;
  /* color: white; */
}

.primary:hover {
  background: #cb9a3a;
  color: #4f432b;
}

/* You can also add margin to each card to increase the gap */
.item.primary {
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 220px;
  /* Increased height */
  transition: all 0.3s ease-in-out;
  box-shadow: 0 4px 10px rgba(203, 154, 58, 0.3), 0 4px 10px rgba(79, 67, 43, 0.3);
  /* Custom box shadow */
  margin-right: 15px;
  /* Adds spacing between cards */
}

.item.primary:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 15px rgba(203, 154, 58, 0.5), 0 8px 15px rgba(79, 67, 43, 0.5);
}

.d-flex.align-items-start {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.d-flex.align-items-start h4 {
  font-size: 1.2em;
  margin-bottom: 10px;
}

.category-paragraph {
  font-size: 1em;
  color: white;
}

/* Navigation Arrows */
.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
  font-size: 20px;
  z-index: 100;
}

.prev {
  left: 10px;
}

.next {
  right: 10px;
}

.container1 {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.card {
  position: relative;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  /* text-align: center; */
  transition: transform 0.3s, box-shadow 0.3s;
  /* width: 250px; */
  width: 290px;
  /* padding-bottom: 20px; */
}

.card::before,
.card::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  background: #f8be60;
  transition: all 0.5s ease;
}

.card::before {
  top: 0;
  left: 0;
}

.card::after {
  bottom: 0;
  right: 0;
}

.card:hover::before,
.card:hover::after {
  width: 100%;
}

.card:hover::before {
  height: 100%;
  width: 2px;
  transition: width 0.5s ease, height 0.5s ease 0.5s;
}

.card:hover::after {
  height: 100%;
  width: 2px;
  transition: width 0.5s ease, height 0.5s ease 0.5s;
}

.card-content {
  padding: 15px;
}

.card-content h3 {
  margin: 10px 0;
  font-size: 20px;
  color: #000;
  font-weight: 700;
  color:#ff5c5c;
}

.card-content p {
  /* color: #777; */
  /* font-size: 15px;
  line-height: 1.5; */
  font-size: 15px;
  
  letter-spacing: .01em;
}
 @media (max-width: 768px) {
            .card {
                width: 100%;
            }
        }

        @media (max-width: 480px) {
            .card {
                width: 100%;
            }
        }
/* .card {
  border-radius: 10px;
  filter: drop-shadow(0 5px 10px 0 #ffffff);
  width: 400px;
  height: 180px;
  background-color: #ffffff;
  padding: 20px;
  position: relative;
  z-index: 0;
  overflow: hidden;
  transition: 0.6s ease-in;
}

.card::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -15px;
  right: -15px;
  background: #7952b3;
  height:220px;
  width: 25px;
  border-radius: 32px;
  transform: scale(1);
  transform-origin: 50% 50%;
  transition: transform 0.25s ease-out;
}

.card:hover::before{
    transition-delay:0.2s ;

  transform: scale(40);
}

.card:hover{
    color: #ffffff;

}

.card p{
    padding: 10px 0;
} */


/* .carousel img {
  width: 70px;
  max-height: 70px;
  border-radius: 50%;
  margin-right: 1rem;
  overflow: hidden;
}
.carousel-inner {
  padding: 1em;
}

@media screen and (min-width: 576px) {
  .carousel-inner {
    display: flex;
    width: 90%;
    margin-inline: auto;
    padding: 1em 0;
    overflow: hidden;
  }
  .carousel-item {
    display: block;
    margin-right: 0;
    flex: 0 0 calc(100% / 2);
  }
}
@media screen and (min-width: 768px) {
  .carousel-item {
    display: block;
    margin-right: 0;
    flex: 0 0 calc(100% / 3);
  }
}
.carousel .card {
  margin: 0 0.5em;
  border: 0;
}

.carousel-control-prev,
.carousel-control-next {
  width: 3rem;
  height: 3rem;
  background-color: grey;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
} */

.heal-new {
  background: linear-gradient(45deg, #FFD700, #FFD700);
  padding: 10px 10px 1px 10px;
  border-radius: 50px;
  margin-bottom: 10px;
  display: flex
;
  justify-content: center;

}

.learn-class{
      /* padding: 7px 12px 0px; */
      background: #e57373;
      border-radius: 50px;
      margin-bottom: 15px;
      display: inline-block;
      padding: 10px 10px 0px 14px;
}

/* .learn-class li{
  margin-top: 5px;

} */
.learn-class h4 {
  font-size: 19px;
}



.learn-class>h4 {
  font-size: 20px;
}

#tp {

  font-size: 30px;
}


ul li::marker {
  color: #e57373; /* Bullet color only (modern browsers) */
  font-size:20px;
}



#banner>.container>.hero-content>h6>span:hover {
  cursor: pointer;
  border-bottom: 1px solid black;
  /* Slower animation */

}


@media (max-width: 768px) {
  .unique-slider {
    flex-wrap: nowrap;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .unique-slide {
    scroll-snap-align: center;
    flex-shrink: 0;
    min-width: 90%; /* Slight margin for better spacing */
    margin: 0 auto;
  }

  .course-name {
    font-size: 14px;
  }
    
    .banner{
            height: 100%;

  }
}



@media (max-width: 484px) {

   .banner{
            height: 100%!important;

  }
}



.testim {
  width: 100%;
  /* position: absolute; */
  top: 50%;
  -webkit-transform: translatey(-50%);
  -moz-transform: translatey(-50%);
  -ms-transform: translatey(-50%);
  -o-transform: translatey(-50%);
  transform: translatey(-50%);
  display: flex
;
  flex-direction: column;
  height: 186px;

}

.testim .wrap {
  /* position: relative; */
  position: absolute;
  width: 100%;
  max-width: 1020px;
  /* padding: 110px 10px 10px 10px; */
  padding: 83px 10px 10px 10px;
  margin: auto;
}

/* .testim .arrow {
  display: block;
  position: absolute;
  color: #333;
  cursor: pointer;
  font-size: 16px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: all .3s ease-in-out;    
  -ms-transition: all .3s ease-in-out;    
  -moz-transition: all .3s ease-in-out;    
  -o-transition: all .3s ease-in-out;    
  transition: all .3s ease-in-out;
  padding: 5px;
  z-index: 22222222;
} */

/* .testim .arrow:before {
  cursor: pointer;
} */

.testim .arrow:hover {
  color: #ff5c5c;
}
  

/* .testim .arrow.left {
  left: 70px;
}

.testim .arrow.right {
  right: 70px;
} */

.testim .dots {
  text-align: center;
  position: absolute;
  width: 100%;
  /* bottom: 60px; */
  bottom: 51px;
  left: 0;
  display: block;
  z-index: 3333;
  height: 12px;
}

.testim .dots .dot {
  list-style-type: none;
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid #ff5c5c;
  margin: 0 10px;
  cursor: pointer;
  -webkit-transition: all .5s ease-in-out;    
  -ms-transition: all .5s ease-in-out;    
  -moz-transition: all .5s ease-in-out;    
  -o-transition: all .5s ease-in-out;    
  transition: all .5s ease-in-out;
  position: relative;
}

.testim .dots .dot.active,
.testim .dots .dot:hover {
  background: #ff5c5c;
  border-color: #ff5c5c;
}

.testim .dots .dot.active {
  -webkit-animation: testim-scale .5s ease-in-out forwards;   
  -moz-animation: testim-scale .5s ease-in-out forwards;   
  -ms-animation: testim-scale .5s ease-in-out forwards;   
  -o-animation: testim-scale .5s ease-in-out forwards;   
  animation: testim-scale .5s ease-in-out forwards;   
}
  
.testim .cont {
  position: relative;
  overflow: hidden;
}

.testim .cont > div {
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  /* padding: 0 0 70px 0; */
  padding: 2px 0 82px 0;
  opacity: 0;
}

.testim .cont > div.inactive {
  opacity: 1;
}
  

.testim .cont > div.active {
  position: relative;
  opacity: 1;
}
  

.testim .cont div .img img {
  display: block;
  /* width: 100px;
  height: 100px; */
  width: 75px;
  height: 75px;
  margin: auto;
  border-radius: 50%;
}

.testim .cont div h2 {
  color: #ff5c5c;
  font-size: 1em;
  margin: 15px 0;
}

.testim .cont div p {
  /* font-size: 1.15em; */
  color: #333;
  width: 100%;
  margin: auto;
}

.testim .cont div.active .img img {
  -webkit-animation: testim-show .5s ease-in-out forwards;            
  -moz-animation: testim-show .5s ease-in-out forwards;            
  -ms-animation: testim-show .5s ease-in-out forwards;            
  -o-animation: testim-show .5s ease-in-out forwards;            
  animation: testim-show .5s ease-in-out forwards;            
}

.testim .cont div.active h2 {
  -webkit-animation: testim-content-in .4s ease-in-out forwards;    
  -moz-animation: testim-content-in .4s ease-in-out forwards;    
  -ms-animation: testim-content-in .4s ease-in-out forwards;    
  -o-animation: testim-content-in .4s ease-in-out forwards;    
  animation: testim-content-in .4s ease-in-out forwards;    
}

.testim .cont div.active p {
  -webkit-animation: testim-content-in .5s ease-in-out forwards;    
  -moz-animation: testim-content-in .5s ease-in-out forwards;    
  -ms-animation: testim-content-in .5s ease-in-out forwards;    
  -o-animation: testim-content-in .5s ease-in-out forwards;    
  animation: testim-content-in .5s ease-in-out forwards;    
}

.testim .cont div.inactive .img img {
  -webkit-animation: testim-hide .5s ease-in-out forwards;            
  -moz-animation: testim-hide .5s ease-in-out forwards;            
  -ms-animation: testim-hide .5s ease-in-out forwards;            
  -o-animation: testim-hide .5s ease-in-out forwards;            
  animation: testim-hide .5s ease-in-out forwards;            
}

.testim .cont div.inactive h2 {
  -webkit-animation: testim-content-out .4s ease-in-out forwards;        
  -moz-animation: testim-content-out .4s ease-in-out forwards;        
  -ms-animation: testim-content-out .4s ease-in-out forwards;        
  -o-animation: testim-content-out .4s ease-in-out forwards;        
  animation: testim-content-out .4s ease-in-out forwards;        
}

.testim .cont div.inactive p {
  -webkit-animation: testim-content-out .5s ease-in-out forwards;    
  -moz-animation: testim-content-out .5s ease-in-out forwards;    
  -ms-animation: testim-content-out .5s ease-in-out forwards;    
  -o-animation: testim-content-out .5s ease-in-out forwards;    
  animation: testim-content-out .5s ease-in-out forwards;    
}

@-webkit-keyframes testim-scale {
  0% {
      -webkit-box-shadow: 0px 0px 0px 0px #eee;
      box-shadow: 0px 0px 0px 0px #eee;
  }

  35% {
      -webkit-box-shadow: 0px 0px 10px 5px #eee;        
      box-shadow: 0px 0px 10px 5px #eee;        
  }

  70% {
      -webkit-box-shadow: 0px 0px 10px 5px #ea830e;        
      box-shadow: 0px 0px 10px 5px #ea830e;        
  }

  100% {
      -webkit-box-shadow: 0px 0px 0px 0px #ea830e;        
      box-shadow: 0px 0px 0px 0px #ea830e;        
  }
}

@-moz-keyframes testim-scale {
  0% {
      -moz-box-shadow: 0px 0px 0px 0px #eee;
      box-shadow: 0px 0px 0px 0px #eee;
  }

  35% {
      -moz-box-shadow: 0px 0px 10px 5px #eee;        
      box-shadow: 0px 0px 10px 5px #eee;        
  }

  70% {
      -moz-box-shadow: 0px 0px 10px 5px #ea830e;        
      box-shadow: 0px 0px 10px 5px #ea830e;        
  }

  100% {
      -moz-box-shadow: 0px 0px 0px 0px #ea830e;        
      box-shadow: 0px 0px 0px 0px #ea830e;        
  }
}

@-ms-keyframes testim-scale {
  0% {
      -ms-box-shadow: 0px 0px 0px 0px #eee;
      box-shadow: 0px 0px 0px 0px #eee;
  }

  35% {
      -ms-box-shadow: 0px 0px 10px 5px #eee;        
      box-shadow: 0px 0px 10px 5px #eee;        
  }

  70% {
      -ms-box-shadow: 0px 0px 10px 5px #ea830e;        
      box-shadow: 0px 0px 10px 5px #ea830e;        
  }

  100% {
      -ms-box-shadow: 0px 0px 0px 0px #ea830e;        
      box-shadow: 0px 0px 0px 0px #ea830e;        
  }
}

@-o-keyframes testim-scale {
  0% {
      -o-box-shadow: 0px 0px 0px 0px #eee;
      box-shadow: 0px 0px 0px 0px #eee;
  }

  35% {
      -o-box-shadow: 0px 0px 10px 5px #eee;        
      box-shadow: 0px 0px 10px 5px #eee;        
  }

  70% {
      -o-box-shadow: 0px 0px 10px 5px #ea830e;        
      box-shadow: 0px 0px 10px 5px #ea830e;        
  }

  100% {
      -o-box-shadow: 0px 0px 0px 0px #ea830e;        
      box-shadow: 0px 0px 0px 0px #ea830e;        
  }
}

@keyframes testim-scale {
  0% {
      box-shadow: 0px 0px 0px 0px #eee;
  }

  35% {
      box-shadow: 0px 0px 10px 5px #eee;        
  }

  70% {
      box-shadow: 0px 0px 10px 5px #ea830e;        
  }

  100% {
      box-shadow: 0px 0px 0px 0px #ea830e;        
  }
}

@-webkit-keyframes testim-content-in {
  from {
      opacity: 0;
      -webkit-transform: translateY(100%);
      transform: translateY(100%);
  }
  
  to {
      opacity: 1;
      -webkit-transform: translateY(0);        
      transform: translateY(0);        
  }
}

@-moz-keyframes testim-content-in {
  from {
      opacity: 0;
      -moz-transform: translateY(100%);
      transform: translateY(100%);
  }
  
  to {
      opacity: 1;
      -moz-transform: translateY(0);        
      transform: translateY(0);        
  }
}

@-ms-keyframes testim-content-in {
  from {
      opacity: 0;
      -ms-transform: translateY(100%);
      transform: translateY(100%);
  }
  
  to {
      opacity: 1;
      -ms-transform: translateY(0);        
      transform: translateY(0);        
  }
}

@-o-keyframes testim-content-in {
  from {
      opacity: 0;
      -o-transform: translateY(100%);
      transform: translateY(100%);
  }
  
  to {
      opacity: 1;
      -o-transform: translateY(0);        
      transform: translateY(0);        
  }
}

@keyframes testim-content-in {
  from {
      opacity: 0;
      transform: translateY(100%);
  }
  
  to {
      opacity: 1;
      transform: translateY(0);        
  }
}

@-webkit-keyframes testim-content-out {
  from {
      opacity: 1;
      -webkit-transform: translateY(0);
      transform: translateY(0);
  }
  
  to {
      opacity: 0;
      -webkit-transform: translateY(-100%);        
      transform: translateY(-100%);        
  }
}

@-moz-keyframes testim-content-out {
  from {
      opacity: 1;
      -moz-transform: translateY(0);
      transform: translateY(0);
  }
  
  to {
      opacity: 0;
      -moz-transform: translateY(-100%);        
      transform: translateY(-100%);        
  }
}

@-ms-keyframes testim-content-out {
  from {
      opacity: 1;
      -ms-transform: translateY(0);
      transform: translateY(0);
  }
  
  to {
      opacity: 0;
      -ms-transform: translateY(-100%);        
      transform: translateY(-100%);        
  }
}

@-o-keyframes testim-content-out {
  from {
      opacity: 1;
      -o-transform: translateY(0);
      transform: translateY(0);
  }
  
  to {
      opacity: 0;
      transform: translateY(-100%);        
      transform: translateY(-100%);        
  }
}

@keyframes testim-content-out {
  from {
      opacity: 1;
      transform: translateY(0);
  }
  
  to {
      opacity: 0;
      transform: translateY(-100%);        
  }
}

@-webkit-keyframes testim-show {
  from {
      opacity: 0;
      -webkit-transform: scale(0);
      transform: scale(0);
  }
  
  to {
      opacity: 1;
      -webkit-transform: scale(1);       
      transform: scale(1);       
  }
}

@-moz-keyframes testim-show {
  from {
      opacity: 0;
      -moz-transform: scale(0);
      transform: scale(0);
  }
  
  to {
      opacity: 1;
      -moz-transform: scale(1);       
      transform: scale(1);       
  }
}

@-ms-keyframes testim-show {
  from {
      opacity: 0;
      -ms-transform: scale(0);
      transform: scale(0);
  }
  
  to {
      opacity: 1;
      -ms-transform: scale(1);       
      transform: scale(1);       
  }
}

@-o-keyframes testim-show {
  from {
      opacity: 0;
      -o-transform: scale(0);
      transform: scale(0);
  }
  
  to {
      opacity: 1;
      -o-transform: scale(1);       
      transform: scale(1);       
  }
}

@keyframes testim-show {
  from {
      opacity: 0;
      transform: scale(0);
  }
  
  to {
      opacity: 1;
      transform: scale(1);       
  }
}

@-webkit-keyframes testim-hide {
  from {
      opacity: 1;
      -webkit-transform: scale(1);       
      transform: scale(1);       
  }
  
  to {
      opacity: 0;
      -webkit-transform: scale(0);
      transform: scale(0);
  }
}

@-moz-keyframes testim-hide {
  from {
      opacity: 1;
      -moz-transform: scale(1);       
      transform: scale(1);       
  }
  
  to {
      opacity: 0;
      -moz-transform: scale(0);
      transform: scale(0);
  }
}

@-ms-keyframes testim-hide {
  from {
      opacity: 1;
      -ms-transform: scale(1);       
      transform: scale(1);       
  }
  
  to {
      opacity: 0;
      -ms-transform: scale(0);
      transform: scale(0);
  }
}

@-o-keyframes testim-hide {
  from {
      opacity: 1;
      -o-transform: scale(1);       
      transform: scale(1);       
  }
  
  to {
      opacity: 0;
      -o-transform: scale(0);
      transform: scale(0);
  }
}

@keyframes testim-hide {
  from {
      opacity: 1;
      transform: scale(1);       
  }
  
  to {
      opacity: 0;
      transform: scale(0);
  }
}

/* General Styling */
#testimonial {
  padding: 20px;
  margin-top: 30px;
}

/* Adjust container padding for smaller screens */
@media (max-width: 768px) {
  #testimonial .container {
      padding: 15px;
  }

  /* Align text center on smaller screens */
  #testimonial h6, #testimonial h2 {
      text-align: center;
  }

  #testimonial h6 {
      margin-top: 20px;
      font-size: 14px;
  }

  #testimonial h2 {
      font-size: 20px;
  }

  /* Testimonial content */
  #testim-content .cont > div {
      padding: 10px;
      text-align: center;
  }

  #testim-content h2 {
      font-size: 16px;
  }

  #testim-content p {
      font-size: 14px;
      line-height: 1.5;
  }

  /* Adjust image size */
  #testim-content .img img {
      width: 80px;
      height: 80px;
      object-fit: cover;
      border-radius: 50%;
      margin: 0 auto;
  }
}

/* Adjust for very small screens */
@media (max-width: 576px) {
  #testimonial {
      padding: 10px;
  }

  /* Adjust dots for navigation */
  #testim-dots {
      display: flex;
      justify-content: center;
      margin: 10px 0;
  }

  #testim-dots .dot {
      width: 10px;
      height: 10px;
      margin: 0 5px;
  }

  /* Adjust arrows for smaller screens */
  .arrow {
      font-size: 18px;
      top: 50%;
      transform: translateY(-100%);
  }

  /* Adjust the "Google Reviews" section */
  #testimonial .col-lg-3 {
      text-align: center;
      margin-top: 150px;
  }

  #grimg {
      width: 120px;
      margin: 0 auto;
  }

  .Reviews {
      max-width: 100%;
  }
}




#grimg {
  position: relative;
  right: 10px;
  display: flex
;
  flex-direction: column;
  top: 8px;
  overflow: hidden;
  /* height: 200px; */
  width: 200px;
  padding-right: 5px;
}
@media (max-width: 484px) {
  #testimonial .col-lg-3 {
    text-align: center;
    /* margin-top: 250px; */
    margin-top: 158px;
}
  
}


.text-primary {
  color: #ff5c5c !important;;
}

figure {
	margin-bottom: 60px;
}

/* img tags */
.imagesContainer {
  width: 100%;
	height: 480px;
	position: relative;
	overflow: hidden;
	box-shadow: rgba(0,0,0,0.2) 10px 10px 10px;
}

.imagesContainer img {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

/* images using CSS */
.imageDiv {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-size: cover;
}

.image1 { background-image: url('images/banner-img.png'); }

.image2 { background-image: url('images/banner-img.jpg'); }


/* animation styles */
@keyframes fadeIn {
	0% { opacity: 0; }
	20% { opacity: 0; }
	60% { opacity: 1; }
	100% { opacity: 1; }
}

.fadeInClass {
	animation-name: fadeIn;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-timing-function: linear;
}
.bg-primary{
  background-color: #ff5c5c!important;
}

.scroll-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  background-color: #31333a;
  color: white;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  text-decoration: none;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: opacity 0.3s ease, transform 0.3s ease;
  opacity: 0;
  transform: scale(0);
  z-index: 1000;
}

.scroll-to-top:hover {
  background-color: #e57373;
}

.scroll-to-top.show {
  opacity: 1;
  transform: scale(1);
}


.popup-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1000;
}

/* Popup content box */
.popup-content {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  text-align: center;
  z-index: 1001;
  width: 90%;
  max-width: 400px;
}

/* Close button */
.close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 20px;
  cursor: pointer;
  color: #000;
}


/* General Form Styling */
#form {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Labels */
#form label {
  font-weight: bold;
  color: #333;
}

/* Input Fields */
#form input[type="text"],
#form textarea {
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 14px;
  transition: border-color 0.3s ease;
}

/* Placeholder Styling */
#form input::placeholder,
#form textarea::placeholder {
  color: #888;
  font-style: italic;
}

/* Focus States */
#form input:focus,
#form textarea:focus {
  border-color: #ff5c5c;
  outline: none;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

/* Submit Button */
.submit-btn {
  background: #ff5c5c;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

/* Hover and Active States for Submit Button */
.submit-btn:hover {
  background: #fff;
  transform: scale(1.05);
}

.submit-btn:active {
  background: #ff5c5c;
  transform: scale(1);
}

/* Responsive Design */
@media (max-width: 768px) {
  .form-input {
      flex-direction: column;
  }

  .form-input .w-100 {
      margin-bottom: 10px;
  }

  .submit-btn {
      font-size: 14px;
  }
}


@media (max-width: 768px) {
  .feature-item {
      margin-bottom: 20px;
  }

  .popup-content {
      width: 95%;
      padding: 15px;
      /*height: 700px;*/
  }

  #form .form-input {
      flex-direction: column;
  }

  #form .form-input .w-100 {
      margin-bottom: 15px;
  }

  .submit-btn {
      font-size: 14px;
  }
}

/* Animations */
@keyframes fadeIn {
  from {
      opacity: 0;
      transform: scale(0.9);
  }
  to {
      opacity: 1;
      transform: scale(1);
  }
}


.gap-md-3{
  gap:1px!important;
}


@media (min-width: 1150px)
{

  .gap-md-3{
    gap:13px!important;
  }
  
  
}



  @media (max-width: 576px) {
            .popup-content {
                padding: 15px;
            }

            .form-control {
                padding: 8px;
                font-size: 14px;
            }

            .submit-btn {
                font-size: 14px;
                padding: 8px;
            }

            .btn {
                font-size: 14px;
            }
        }
        
        
        
        /* Responsive styles for 320px devices */
@media (max-width: 320px) {
    .popup-content {
        padding: 10px;
    }

    .popup-content h2 {
        font-size: 1.2rem;
    }

    .popup-content p {
        font-size: 0.8rem;
    }

    .popup-content h5 {
        font-size: 0.9rem;
    }

    .form-group {
        flex-direction: column;
    }

    .form-input input,
    textarea {
        font-size: 0.75rem;
        padding: 10px;
    }

    .submit-btn {
        font-size: 0.8rem;
        padding: 10px;
    }

    .btn-primary {
        font-size: 0.8rem;
        padding: 8px 10px;
    }
}