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

    Template Name: Kidsland - Kindergarten & Baby shop HTML Template
    Author: ThemeArray
    Support: themearray@gmail.com
    Description: Kindergarten related HTML Template
    Version: 1.0

-----------------------------------------------------------------------------------

/************ TABLE OF CONTENTS ***************

	-----------------
    01. THEME CSS
	-----------------
		1.1 Commmon
		1.2 Theme
		1.3 Typography
		1.4 Section-title
		1.5 animation

	-----------------
    02. utils CSS
	-----------------
	    2.1 Breakpoint
		2.2 Extends
		2.3 Colors
		2.4 Mixins
		2.5 Root

	-----------------
    03. COMPONENTS CSS
	-----------------
		3.2 Back to top
		3.3 Breadcrumb
		3.4 Button
		3.5 Modal
		3.6 Offcanvas
		3.7 Prealoder

	-----------------
    04. HEADER CSS
	-----------------
		4.1 Header 1

    ---------------------------------
	05. MENU CSS
	---------------------------------
		5.1 Meanmenu
		5.2 Menu


	---------------------------------
	06. FOOTER CSS
	---------------------------------
		6.1 Footer 1
		6.2 Footer 2


	---------------------------------
	07. HERO CSS
	---------------------------------
		7.1 Hero Style 01
		7.2 Hero Style 02
		7.3 Hero Style 03

	---------------------------------
	08. PAGES CSS
	---------------------------------
		8.1 About css
		8.2 Blog css
		8.3 Cart css
		8.4 Checkout css
		8.5 Classes css
		8.6 Contact css
		8.7 Course-Details css
		8.8 Event css
		8.9 Gallery css
		8.10 Piricing css
		8.11 Prosuct css
		8.12 Profile css
		8.13 Service css
		8.14 Techers css
		8.15 Team css
		8.16 Testimonial css
		8.17 Why-choose css


/*----------------------------------------*/
/*  1.1 Theme Default
/*----------------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
a,
.btn,
button,
span,
sub,
sup,
p,
input,
select,
textarea,
li,
img,
svg,
.transition-3,
h1,
h2,
h3,
h4,
h5,
h6, i[class^=icon-], i[class^=flaticon-] {
  -webkit-transition: all 0.3s 0s ease-out;
  -moz-transition: all 0.3s 0s ease-out;
  -ms-transition: all 0.3s 0s ease-out;
  -o-transition: all 0.3s 0s ease-out;
  transition: all 0.3s 0s ease-out;
}

.bg-theme-primary {
  background-color: var(--bd-primary);
}

.bg-theme-secondary {
  background-color: var(--bd-secondary);
}

:root {
  /**
  @font family declaration
  */
  --bd-ff-body: "Kanit", sans-serif;
  --bd-ff-heading: "Fredoka", sans-serif;
  --bd-ff-fontawesome: "Font Awesome 6 Pro";
  --bd-ff-icomoon: "icomoon";
  /**
  @color declaration
  */
  --bd-white: #FFFFFF;
  --bd-black: #282828;
  --bd-placeholder: #828282;
  --bd-selection: #262626;
  --bd-gray: #828282;
  --bd-text-body: #555555;
  --bd-heading: #25292F;
  --bd-primary: #FF5562;
  --bd-secondary: #F4209F;
  --bd-border-primary: #E0E0E0;
  --bd-border-black: #2F3735;
  --bd-border-secondary: rgba(220, 220, 220, 1);
  --bd-border-tertiary: rgb(75, 78, 82);
  /**
  @font weight declaration
  */
  --bd-fw-normal: normal;
  --bd-fw-thin: 100;
  --bd-fw-elight: 200;
  --bd-fw-light: 300;
  --bd-fw-regular: 400;
  --bd-fw-medium: 500;
  --bd-fw-sbold: 600;
  --bd-fw-bold: 700;
  --bd-fw-ebold: 800;
  --bd-fw-black: 900;
  /**
  @font size declaration
  */
  --bd-fs-body: 16px;
  --bd-fs-p: 16px;
  --bd-fs-h1: 64px;
  --bd-fs-h2: 48px;
  --bd-fs-h3: 40px;
  --bd-fs-h4: 32px;
  --bd-fs-h5: 24px;
  --bd-fs-h6: 20px;
  --bd-fs-b1: 14px;
  --bd-fs-b2: 16px;
  --bd-fs-b3: 18px;
}

/*----------------------------------------*/
/*  1.4 Section Title   css
/*----------------------------------------*/
.sub-title {
  display: inline-block;
  font-size: 20px;
  color: var(--bd-black);
  margin-bottom: 7px;
}

.section-title {
  font-size: 30px;
  color: #282828;
}
@media only screen and (min-width: 576px) {
  .section-title {
    font-size: 35px;
  }
}
@media only screen and (min-width: 768px) {
  .section-title {
    font-size: 40px;
  }
}
@media only screen and (min-width: 992px) {
  .section-title {
    font-size: 45px;
  }
}
@media only screen and (min-width: 1200px) {
  .section-title {
    font-size: 48px;
  }
}

.color-rose {
  color: var(--rose);
}

.color-blue {
  color: var(--blue);
}

.sub-title-two {
  display: inline-block;
  position: relative;
  font-size: 20px;
  padding: 7px 27px;
  color: var(--bd-white);
  margin-bottom: 10px;
  z-index: 2;
}
.sub-title-two::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--color);
  mask-image: url("../imgs/shape/subtitle-brush.svg");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: cover;
}

.section-title-two {
  font-size: 28px;
}
@media only screen and (min-width: 576px) {
  .section-title-two {
    font-size: 32px;
  }
}
@media only screen and (min-width: 768px) {
  .section-title-two {
    font-size: 38px;
  }
}
@media only screen and (min-width: 1200px) {
  .section-title-two {
    font-size: 45px;
  }
}
@media only screen and (min-width: 1400px) {
  .section-title-two {
    font-size: 48px;
  }
}

/*----------------------------------------*/
/*  1.5 Animation css
/*----------------------------------------*/
@keyframes move {
  0%, 100% {
    transform: rotate(-10deg);
  }
  50% {
    transform: rotate(10deg);
  }
}
@-webkit-keyframes spinner {
  to {
    -webkit-transform: rotateZ(360deg);
    transform: rotateZ(360deg);
  }
}
@keyframes spinner {
  to {
    -webkit-transform: rotateZ(360deg);
    transform: rotateZ(360deg);
  }
}
@-webkit-keyframes letters-loading {
  0%, 75%, 100% {
    opacity: 0;
    transform: rotateY(-90deg);
  }
  25%, 50% {
    opacity: 1;
    transform: rotateY(0deg);
  }
}
@keyframes letters-loading {
  0%, 75%, 100% {
    opacity: 0;
    transform: rotateY(-90deg);
  }
  25%, 50% {
    opacity: 1;
    transform: rotateY(0deg);
  }
}
@keyframes preloadedzero {
  0% {
    width: 50%;
  }
  to {
    width: 0;
  }
}
.float-bob-y {
  -webkit-animation-name: float-bob-y;
  animation-name: float-bob-y;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

@-webkit-keyframes float-bob-y {
  0% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  50% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  100% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
}
@keyframes float-bob-y {
  0% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  50% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  100% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
}
.float-bob-x {
  -webkit-animation-name: float-bob-x;
  animation-name: float-bob-x;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

@-webkit-keyframes float-bob-x {
  0% {
    -webkit-transform: translateX(0px);
    transform: translateX(30px);
  }
  50% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }
  100% {
    -webkit-transform: translateX(30px);
    transform: translateX(30px);
  }
}
@keyframes float-bob-x {
  0% {
    -webkit-transform: translateX(30px);
    transform: translateX(30px);
  }
  50% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }
  100% {
    -webkit-transform: translateX(30px);
    transform: translateX(30px);
  }
}
@keyframes rounded {
  50% {
    transform: rotate(20deg);
  }
}
@keyframes scaleRotate {
  0% {
    transform: scale(0.5);
  }
  50% {
    transform: scale(1);
  }
  70% {
    transform: scale(1) rotate(-20deg);
  }
  90% {
    transform: scale(1) rotate(20deg);
  }
  100% {
    transform: scale(1) rotate(20deg);
  }
}
@keyframes planeleft {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  25% {
    transform: translateX(-100px) translateY(-30px);
    opacity: 1;
  }
  50% {
    transform: translateX(-200px) translateY(-60px);
    opacity: 1;
  }
  75% {
    transform: translateX(-300px) translateY(-70px);
    opacity: 1;
  }
  100% {
    transform: translateX(-400px) translateY(-80px);
    opacity: 0.1;
  }
}
@keyframes rotateScale {
  0% {
    transform: scale(0.5) rotate(0deg);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.2) rotate(360deg);
    opacity: 1;
  }
  100% {
    transform: scale(0.5) rotate(360deg);
    opacity: 0.5;
  }
}
@keyframes slideRight {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  25% {
    transform: translateX(-100px);
    opacity: 1;
  }
  50% {
    transform: translateX(-200px);
    opacity: 1;
  }
  75% {
    transform: translateX(-300px);
    opacity: 1;
  }
  100% {
    transform: translateX(-400px);
    opacity: 0.1;
  }
}
@keyframes vibrate {
  0% {
    transform: translateX(-2px) rotate(0);
  }
  25% {
    transform: translateX(2px) rotate(-2deg);
  }
  50% {
    transform: translateX(-2px) rotate(2deg);
  }
  75% {
    transform: translateX(2px) rotate(-2deg);
  }
  100% {
    transform: translateX(-2px) rotate(0);
  }
}
@-webkit-keyframes vibrate {
  0% {
    transform: translateX(-2px) rotate(0);
  }
  25% {
    transform: translateX(2px) rotate(-2deg);
  }
  50% {
    transform: translateX(-2px) rotate(2deg);
  }
  75% {
    transform: translateX(2px) rotate(-2deg);
  }
  100% {
    transform: translateX(-2px) rotate(0);
  }
}
@keyframes gelatine {
  from, to {
    transform: scale(1, 1);
  }
  25% {
    transform: scale(0.7, 1.1);
  }
  50% {
    transform: scale(1.1, 0.7);
  }
  75% {
    transform: scale(0.95, 1.05);
  }
}
@keyframes borderRotate {
  0% {
    transform: rotate(-10deg);
  }
  100% {
    transform: rotate(10deg);
  }
}
@keyframes spinner {
  to {
    transform: rotateZ(360deg);
  }
}
.header_absolute {
  position: absolute;
}

ul {
  margin: 0px;
  padding: 0px;
}

li {
  list-style: none;
}

p.b1 {
  font-size: 24px;
  line-height: 34px;
}

p.b2 {
  font-size: 18px;
  line-height: 28px;
}

p.b3 {
  font-size: 16px;
  line-height: 26px;
}

a {
  text-decoration: none;
  transition: all ease 0.3s;
}

a:focus,
button:focus {
  text-decoration: none;
  outline: none;
}

a:hover {
  text-decoration: none;
}

a,
button {
  color: inherit;
  outline: none;
  border: none;
  background: transparent;
  transition: 0.3s;
}

img {
  max-width: 100%;
  object-fit: cover;
}

button:hover {
  cursor: pointer;
}

button:focus {
  outline: 0;
}

.uppercase {
  text-transform: uppercase;
}

.capitalize {
  text-transform: capitalize;
}

hr:not([size]) {
  margin: 0;
  border-color: var(--bd-border-secondary);
  opacity: 1;
  border-width: 1px;
}

input[type=text],
input[type=email],
input[type=tel],
input[type=number],
input[type=password],
textarea {
  outline: none;
  background-color: var(--bd-bg-1);
  height: 60px;
  width: 100%;
  font-size: 15px;
  color: rgba(124, 126, 130, 0.69);
  border: none;
  padding: 0 25px;
  color: var(--bd-black);
}
.bd-theme-light input[type=text],
.bd-theme-light input[type=email],
.bd-theme-light input[type=tel],
.bd-theme-light input[type=number],
.bd-theme-light input[type=password],
.bd-theme-light textarea {
  background-color: rgba(235, 235, 235, 0.9);
  color: rgba(124, 126, 130, 0.69);
}
input[type=text]:focus,
input[type=email]:focus,
input[type=tel]:focus,
input[type=number]:focus,
input[type=password]:focus,
textarea:focus {
  border-color: var(--bd-primary);
}

input:-webkit-autofill {
  background-color: transparent !important;
}

input:-moz-autofill {
  background-color: transparent !important;
}

input:autofill {
  background-color: transparent !important;
}

*::-moz-selection {
  background: var(--bd-secondary);
  color: white;
  text-shadow: none;
}

::-moz-selection {
  background: var(--bd-secondary);
  color: white;
  text-shadow: none;
}

::selection {
  background: var(--bd-secondary);
  color: white;
  text-shadow: none;
}

*::-moz-placeholder {
  opacity: 1;
  font-size: 16px;
  color: var(--bd-body-secondary);
}

*::placeholder {
  opacity: 1;
  font-size: 16px;
  font-weight: 400;
  color: var(--bd-body-secondary);
}

strong {
  font-size: 18px;
  font-weight: 600;
  color: var(--bd-black);
  display: inline-block;
}

/*----------------------------------------
   Icomoon customize
-----------------------------------------*/
i[class^=icon-] {
  line-height: 1;
  top: 2px;
  position: relative;
}

.bd-sticky {
  position: sticky;
  top: 120px;
}

/*----------------------------------------
   Flaction customize
-----------------------------------------*/
i[class^=flaticon-] {
  line-height: 1;
  top: 2px;
  position: relative;
}

/*----------------------------------------
   Bootstrap customize
-----------------------------------------*/
.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
  --bs-gutter-x: 30px;
}
@media (max-width: 575px) {
  .container,
  .container-fluid,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl {
    --bs-gutter-x: 40px;
  }
}

@media (min-width: 1441px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl {
    max-width: 1350px;
  }
}
.container-fluid {
  max-width: 1680px;
}

.row {
  --bs-gutter-x: 30px;
}
@media (max-width: 575px) {
  .row {
    --bs-gutter-x: 20px;
  }
}

.gap-40 {
  row-gap: 25px;
}

.g-15,
.gx-15 {
  --bs-gutter-x: 16px;
}

.g-0 {
  --bs-gutter-x: 0px;
  --bs-gutter-x: 0px;
}

.g-10,
.gx-10 {
  --bs-gutter-x: 10px;
}

.g-25,
.gx-25 {
  --bs-gutter-x: 25px;
}

.g-30,
.gx-30 {
  --bs-gutter-x: 30px;
}

.g-30,
.gy-30 {
  --bs-gutter-y: 30px;
}
@media (max-width: 575px) {
  .g-30,
  .gy-30 {
    --bs-gutter-y: 20px;
  }
}

.g-25,
.gy-25 {
  --bs-gutter-y: 25px;
}

.g-20,
.gy-20 {
  --bs-gutter-y: 20px;
}

.gx-20 {
  --bs-gutter-x: 20px;
}

.g-40,
.gx-40 {
  --bs-gutter-x: 40px;
  --bs-gutter-x: 40px;
}
@media only screen and (min-width: 768px), only screen and (min-width: 576px), (max-width: 575px) {
  .g-40,
  .gx-40 {
    --bs-gutter-x: 30px;
  }
}

.g-45,
.gx-45 {
  --bs-gutter-x: 45px;
}

.g-40,
.gy-40 {
  --bs-gutter-y: 40px;
}

.g-50,
.gx-50 {
  --bs-gutter-x: 30px;
}
@media only screen and (min-width: 992px) {
  .g-50,
  .gx-50 {
    --bs-gutter-x: 50px;
  }
}

.g-60,
.gx-60 {
  --bs-gutter-x: 30px;
}
@media only screen and (min-width: 1200px) {
  .g-60,
  .gx-60 {
    --bs-gutter-x: 60px;
  }
}

.g-50,
.gy-50 {
  --bs-gutter-y: 50px;
}

.g-60,
.gy-60 {
  --bs-gutter-y: 60px;
}

/*----------------------------------------
   Mfp customize
-----------------------------------------*/
.mfp-iframe-holder .mfp-content {
  line-height: 0;
  width: 100%;
  max-width: 1280px;
}
@media only screen and (min-width: 1400px) {
  .mfp-iframe-holder .mfp-content {
    max-width: 1000px;
  }
}
@media only screen and (min-width: 1200px) {
  .mfp-iframe-holder .mfp-content {
    max-width: 850px;
  }
}
@media only screen and (min-width: 992px) {
  .mfp-iframe-holder .mfp-content {
    max-width: 820px;
  }
}
@media only screen and (min-width: 768px) {
  .mfp-iframe-holder .mfp-content {
    max-width: 750px;
  }
}

.mfp-close {
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
}
.mfp-close:hover {
  color: var(--bd-white);
}
.mfp-close::after {
  position: absolute;
  content: "\f00d";
  height: 100%;
  width: 100%;
  font-family: var(--bd-ff-fontawesome);
  font-size: 31px;
  font-weight: 200;
  right: -20px;
  margin-top: -25px;
}
@media (max-width: 575px), only screen and (min-width: 576px), only screen and (min-width: 768px) {
  .mfp-close::after {
    right: 15px;
    margin-top: -30px;
  }
}

/*---------------------------------
    1.1 Common Classes
---------------------------------*/
.mouse-cursor {
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: none;
  border-radius: 50%;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  visibility: hidden;
}

.cursor-inner {
  width: 7px;
  height: 7px;
  z-index: 10000001;
  background-color: var(--bd-black);
  -webkit-transition: width 0.3s ease-in-out, height 0.3s ease-in-out, margin 0.3s ease-in-out, opacity 0.3s ease-in-out;
  -o-transition: width 0.3s ease-in-out, height 0.3s ease-in-out, margin 0.3s ease-in-out, opacity 0.3s ease-in-out;
  transition: width 0.3s ease-in-out, height 0.3s ease-in-out, margin 0.3s ease-in-out, opacity 0.3s ease-in-out;
  left: -3px;
}

.cursor-outer {
  margin-left: -16px;
  margin-top: -16px;
  width: 32px;
  height: 32px;
  border: 1.5px solid var(--bd-black);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  z-index: 10000000;
  opacity: 0.5;
  -webkit-transition: all 0.08s ease-out;
  -o-transition: all 0.08s ease-out;
  transition: all 0.08s ease-out;
}

.style-switcher {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%) translateX(160px);
  width: 160px;
  transition: all 0.2s ease;
  z-index: 9999;
}
.style-switcher.active {
  transform: translateY(-50%) translateX(0);
}
.style-switcher .toggle-btn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px #94a3b8;
  border-radius: 8px 0 0 8px;
  user-select: none;
  cursor: pointer;
  font-size: 18px;
  width: 50px;
  height: 50px;
  left: -50px;
  color: white;
  background-color: var(--bd-black);
}

.w-img img {
  width: 100%;
}

.m-img img {
  max-width: 100%;
}

.fix {
  overflow: hidden;
}

.clear {
  clear: both;
}

.f-left {
  float: left;
}

.f-right {
  float: right;
}

.z-index-1 {
  z-index: 1;
}

.z-index-11 {
  z-index: 11;
}

.opacity-05 {
  opacity: 0.5;
}

.overflow-y-visible {
  overflow-x: hidden;
  overflow-y: visible;
}

.p-relative {
  position: relative;
}

.p-absolute {
  position: absolute;
}

.include-bg {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.hr-1 {
  border-top: 1px solid rgb(232, 232, 232);
}

.x-clip {
  overflow-x: clip;
}

@media (max-width: 575px) {
  .o-xs {
    overflow-x: hidden;
  }
}

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

.valign {
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
}

/*----------------------------------------
    Body background 
-----------------------------------------*/
.bg-white {
  background: var(--bd-white);
}

.clr-white {
  color: var(--bd-white);
}

.section-space {
  padding-top: 80px;
  padding-bottom: 80px;
}
@media only screen and (min-width: 992px) {
  .section-space {
    padding-top: 100px;
    padding-bottom: 100px;
  }
}
@media only screen and (min-width: 1200px) {
  .section-space {
    padding-top: 140px;
    padding-bottom: 140px;
  }
}

.section-space-top {
  padding-top: 80px;
}
@media only screen and (min-width: 992px) {
  .section-space-top {
    padding-top: 100px;
  }
}
@media only screen and (min-width: 1200px) {
  .section-space-top {
    padding-top: 140px;
  }
}

.section-space-bottom {
  padding-bottom: 70px;
}
@media only screen and (min-width: 992px) {
  .section-space-bottom {
    padding-bottom: 100px;
  }
}
@media only screen and (min-width: 1200px) {
  .section-space-bottom {
    padding-bottom: 140px;
  }
}

.mb-0 {
  margin-bottom: 0 !important;
}

/*--
    - Color
-----------------------------------------*/
.color-primary {
  color: var(--bd-primary);
}

.color-secondary {
  color: var(--bd-secondary);
}

/*--
    - Margin & Padding
-----------------------------------------*/
/*-- Margin Top --*/
.mt-5 {
  margin-top: 5px;
}

.mt-10 {
  margin-top: 10px;
}

.mt-15 {
  margin-top: 15px;
}

.mt-20 {
  margin-top: 20px;
}

.mt-25 {
  margin-top: 25px;
}

.mt-30 {
  margin-top: 30px;
}

.mt-35 {
  margin-top: 35px;
}

.mt-40 {
  margin-top: 40px;
}

.mt-45 {
  margin-top: 45px;
}

.mt-50 {
  margin-top: 50px;
}

.mt-55 {
  margin-top: 55px;
}

.mt-60 {
  margin-top: 60px;
}

.mt-65 {
  margin-top: 65px;
}

.mt-70 {
  margin-top: 70px;
}

.mt-75 {
  margin-top: 75px;
}

.mt-80 {
  margin-top: 80px;
}

.mt-85 {
  margin-top: 85px;
}

.mt-90 {
  margin-top: 90px;
}

.mt-95 {
  margin-top: 95px;
}

.mt-100 {
  margin-top: 100px;
}

.mt-105 {
  margin-top: 105px;
}

.mt-110 {
  margin-top: 110px;
}

.mt-115 {
  margin-top: 115px;
}

.mt-120 {
  margin-top: 120px;
}

.mt-125 {
  margin-top: 125px;
}

.mt-130 {
  margin-top: 130px;
}

.mt-135 {
  margin-top: 135px;
}

.mt-140 {
  margin-top: 140px;
}

.mt-145 {
  margin-top: 145px;
}

.mt-150 {
  margin-top: 150px;
}

.mt-155 {
  margin-top: 155px;
}

.mt-160 {
  margin-top: 160px;
}

.mt-165 {
  margin-top: 165px;
}

.mt-170 {
  margin-top: 170px;
}

.mt-175 {
  margin-top: 175px;
}

.mt-180 {
  margin-top: 180px;
}

.mt-185 {
  margin-top: 185px;
}

.mt-190 {
  margin-top: 190px;
}

.mt-195 {
  margin-top: 195px;
}

.mt-200 {
  margin-top: 200px;
}

/*-- Margin Bottom --*/
.mb-5 {
  margin-bottom: 5px;
}

.mb-10 {
  margin-bottom: 10px;
}

.mb-15 {
  margin-bottom: 15px;
}

.mb-20 {
  margin-bottom: 20px;
}

.mb-25 {
  margin-bottom: 25px;
}

.mb-30 {
  margin-bottom: 30px;
}

.mb-35 {
  margin-bottom: 35px;
}

.mb-40 {
  margin-bottom: 40px;
}

.mb-45 {
  margin-bottom: 45px;
}

.mb-50 {
  margin-bottom: 50px;
}

.mb-55 {
  margin-bottom: 55px;
}

.mb-60 {
  margin-bottom: 60px;
}

.mb-65 {
  margin-bottom: 65px;
}

.mb-70 {
  margin-bottom: 70px;
}

.mb-75 {
  margin-bottom: 75px;
}

.mb-80 {
  margin-bottom: 80px;
}

.mb-85 {
  margin-bottom: 85px;
}

.mb-90 {
  margin-bottom: 90px;
}

.mb-95 {
  margin-bottom: 95px;
}

.mb-100 {
  margin-bottom: 100px;
}

.mb-105 {
  margin-bottom: 105px;
}

.mb-110 {
  margin-bottom: 110px;
}

.mb-115 {
  margin-bottom: 115px;
}

.mb-120 {
  margin-bottom: 120px;
}

.mb-125 {
  margin-bottom: 125px;
}

.mb-130 {
  margin-bottom: 130px;
}

.mb-135 {
  margin-bottom: 135px;
}

.mb-140 {
  margin-bottom: 140px;
}

.mb-145 {
  margin-bottom: 145px;
}

.mb-150 {
  margin-bottom: 150px;
}

.mb-155 {
  margin-bottom: 155px;
}

.mb-160 {
  margin-bottom: 160px;
}

.mb-165 {
  margin-bottom: 165px;
}

.mb-170 {
  margin-bottom: 170px;
}

.mb-175 {
  margin-bottom: 175px;
}

.mb-180 {
  margin-bottom: 180px;
}

.mb-185 {
  margin-bottom: 185px;
}

.mb-190 {
  margin-bottom: 190px;
}

.mb-195 {
  margin-bottom: 195px;
}

.mb-200 {
  margin-bottom: 200px;
}

/*-- Margin Left --*/
.ml-5 {
  margin-left: 5px;
}

.ml-10 {
  margin-left: 10px;
}

.ml-15 {
  margin-left: 15px;
}

.ml-20 {
  margin-left: 20px;
}

.ml-25 {
  margin-left: 25px;
}

.ml-30 {
  margin-left: 30px;
}

.ml-35 {
  margin-left: 35px;
}

.ml-40 {
  margin-left: 40px;
}

.ml-45 {
  margin-left: 45px;
}

.ml-50 {
  margin-left: 50px;
}

.ml-55 {
  margin-left: 55px;
}

.ml-60 {
  margin-left: 60px;
}

.ml-65 {
  margin-left: 65px;
}

.ml-70 {
  margin-left: 70px;
}

.ml-75 {
  margin-left: 75px;
}

.ml-80 {
  margin-left: 80px;
}

.ml-85 {
  margin-left: 85px;
}

.ml-90 {
  margin-left: 90px;
}

.ml-95 {
  margin-left: 95px;
}

.ml-100 {
  margin-left: 100px;
}

.ml-105 {
  margin-left: 105px;
}

.ml-110 {
  margin-left: 110px;
}

.ml-115 {
  margin-left: 115px;
}

.ml-120 {
  margin-left: 120px;
}

.ml-125 {
  margin-left: 125px;
}

.ml-130 {
  margin-left: 130px;
}

.ml-135 {
  margin-left: 135px;
}

.ml-140 {
  margin-left: 140px;
}

.ml-145 {
  margin-left: 145px;
}

.ml-150 {
  margin-left: 150px;
}

.ml-155 {
  margin-left: 155px;
}

.ml-160 {
  margin-left: 160px;
}

.ml-165 {
  margin-left: 165px;
}

.ml-170 {
  margin-left: 170px;
}

.ml-175 {
  margin-left: 175px;
}

.ml-180 {
  margin-left: 180px;
}

.ml-185 {
  margin-left: 185px;
}

.ml-190 {
  margin-left: 190px;
}

.ml-195 {
  margin-left: 195px;
}

.ml-200 {
  margin-left: 200px;
}

/*-- Margin Right --*/
.mr-5 {
  margin-right: 5px;
}

.mr-10 {
  margin-right: 10px;
}

.mr-15 {
  margin-right: 15px;
}

.mr-20 {
  margin-right: 20px;
}

.mr-25 {
  margin-right: 25px;
}

.mr-30 {
  margin-right: 30px;
}

.mr-35 {
  margin-right: 35px;
}

.mr-40 {
  margin-right: 40px;
}

.mr-45 {
  margin-right: 45px;
}

.mr-50 {
  margin-right: 50px;
}

.mr-55 {
  margin-right: 55px;
}

.mr-60 {
  margin-right: 60px;
}

.mr-65 {
  margin-right: 65px;
}

.mr-70 {
  margin-right: 70px;
}

.mr-75 {
  margin-right: 75px;
}

.mr-80 {
  margin-right: 80px;
}

.mr-85 {
  margin-right: 85px;
}

.mr-90 {
  margin-right: 90px;
}

.mr-95 {
  margin-right: 95px;
}

.mr-100 {
  margin-right: 100px;
}

.mr-105 {
  margin-right: 105px;
}

.mr-110 {
  margin-right: 110px;
}

.mr-115 {
  margin-right: 115px;
}

.mr-120 {
  margin-right: 120px;
}

.mr-125 {
  margin-right: 125px;
}

.mr-130 {
  margin-right: 130px;
}

.mr-135 {
  margin-right: 135px;
}

.mr-140 {
  margin-right: 140px;
}

.mr-145 {
  margin-right: 145px;
}

.mr-150 {
  margin-right: 150px;
}

.mr-155 {
  margin-right: 155px;
}

.mr-160 {
  margin-right: 160px;
}

.mr-165 {
  margin-right: 165px;
}

.mr-170 {
  margin-right: 170px;
}

.mr-175 {
  margin-right: 175px;
}

.mr-180 {
  margin-right: 180px;
}

.mr-185 {
  margin-right: 185px;
}

.mr-190 {
  margin-right: 190px;
}

.mr-195 {
  margin-right: 195px;
}

.mr-200 {
  margin-right: 200px;
}

/*-- Padding Top --*/
.pt-5 {
  padding-top: 5px;
}

.pt-10 {
  padding-top: 10px;
}

.pt-15 {
  padding-top: 15px;
}

.pt-20 {
  padding-top: 20px;
}

.pt-25 {
  padding-top: 25px;
}

.pt-30 {
  padding-top: 30px;
}

.pt-35 {
  padding-top: 35px;
}

.pt-40 {
  padding-top: 40px;
}

.pt-45 {
  padding-top: 45px;
}

.pt-50 {
  padding-top: 50px;
}

.pt-55 {
  padding-top: 55px;
}

.pt-60 {
  padding-top: 60px;
}

.pt-65 {
  padding-top: 65px;
}

.pt-70 {
  padding-top: 70px;
}

.pt-75 {
  padding-top: 75px;
}

.pt-80 {
  padding-top: 80px;
}

.pt-85 {
  padding-top: 85px;
}

.pt-90 {
  padding-top: 90px;
}

.pt-95 {
  padding-top: 95px;
}

.pt-100 {
  padding-top: 100px;
}

.pt-105 {
  padding-top: 105px;
}

.pt-110 {
  padding-top: 110px;
}

.pt-115 {
  padding-top: 115px;
}

.pt-120 {
  padding-top: 120px;
}

.pt-125 {
  padding-top: 125px;
}

.pt-130 {
  padding-top: 130px;
}

.pt-135 {
  padding-top: 135px;
}

.pt-140 {
  padding-top: 140px;
}

.pt-145 {
  padding-top: 145px;
}

.pt-150 {
  padding-top: 150px;
}

.pt-155 {
  padding-top: 155px;
}

.pt-160 {
  padding-top: 160px;
}

.pt-165 {
  padding-top: 165px;
}

.pt-170 {
  padding-top: 170px;
}

.pt-175 {
  padding-top: 175px;
}

.pt-180 {
  padding-top: 180px;
}

.pt-185 {
  padding-top: 185px;
}

.pt-190 {
  padding-top: 190px;
}

.pt-195 {
  padding-top: 195px;
}

.pt-200 {
  padding-top: 200px;
}

/*-- Padding Bottom --*/
.pb-5 {
  padding-bottom: 5px;
}

.pb-10 {
  padding-bottom: 10px;
}

.pb-15 {
  padding-bottom: 15px;
}

.pb-20 {
  padding-bottom: 20px;
}

.pb-25 {
  padding-bottom: 25px;
}

.pb-30 {
  padding-bottom: 30px;
}

.pb-35 {
  padding-bottom: 35px;
}

.pb-40 {
  padding-bottom: 40px;
}

.pb-45 {
  padding-bottom: 45px;
}

.pb-50 {
  padding-bottom: 50px;
}

.pb-55 {
  padding-bottom: 55px;
}

.pb-60 {
  padding-bottom: 60px;
}

.pb-65 {
  padding-bottom: 65px;
}

.pb-70 {
  padding-bottom: 70px;
}

.pb-75 {
  padding-bottom: 75px;
}

.pb-80 {
  padding-bottom: 80px;
}

.pb-85 {
  padding-bottom: 85px;
}

.pb-90 {
  padding-bottom: 90px;
}

.pb-95 {
  padding-bottom: 95px;
}

.pb-100 {
  padding-bottom: 100px;
}

.pb-105 {
  padding-bottom: 105px;
}

.pb-110 {
  padding-bottom: 110px;
}

.pb-115 {
  padding-bottom: 115px;
}

.pb-120 {
  padding-bottom: 120px;
}

.pb-125 {
  padding-bottom: 125px;
}

.pb-130 {
  padding-bottom: 130px;
}

.pb-135 {
  padding-bottom: 135px;
}

.pb-140 {
  padding-bottom: 140px;
}

.pb-145 {
  padding-bottom: 145px;
}

.pb-150 {
  padding-bottom: 150px;
}

.pb-155 {
  padding-bottom: 155px;
}

.pb-160 {
  padding-bottom: 160px;
}

.pb-165 {
  padding-bottom: 165px;
}

.pb-170 {
  padding-bottom: 170px;
}

.pb-175 {
  padding-bottom: 175px;
}

.pb-180 {
  padding-bottom: 180px;
}

.pb-185 {
  padding-bottom: 185px;
}

.pb-190 {
  padding-bottom: 190px;
}

.pb-195 {
  padding-bottom: 195px;
}

.pb-200 {
  padding-bottom: 200px;
}

/*-- Padding Left --*/
.pl-5 {
  padding-left: 5px;
}

.pl-10 {
  padding-left: 10px;
}

.pl-15 {
  padding-left: 15px;
}

.pl-20 {
  padding-left: 20px;
}

.pl-25 {
  padding-left: 25px;
}

.pl-30 {
  padding-left: 30px;
}

.pl-35 {
  padding-left: 35px;
}

.pl-40 {
  padding-left: 40px;
}

.pl-45 {
  padding-left: 45px;
}

.pl-50 {
  padding-left: 50px;
}

.pl-55 {
  padding-left: 55px;
}

.pl-60 {
  padding-left: 60px;
}

.pl-65 {
  padding-left: 65px;
}

.pl-70 {
  padding-left: 70px;
}

.pl-75 {
  padding-left: 75px;
}

.pl-80 {
  padding-left: 80px;
}

.pl-85 {
  padding-left: 85px;
}

.pl-90 {
  padding-left: 90px;
}

.pl-95 {
  padding-left: 95px;
}

.pl-100 {
  padding-left: 100px;
}

.pl-105 {
  padding-left: 105px;
}

.pl-110 {
  padding-left: 110px;
}

.pl-115 {
  padding-left: 115px;
}

.pl-120 {
  padding-left: 120px;
}

.pl-125 {
  padding-left: 125px;
}

.pl-130 {
  padding-left: 130px;
}

.pl-135 {
  padding-left: 135px;
}

.pl-140 {
  padding-left: 140px;
}

.pl-145 {
  padding-left: 145px;
}

.pl-150 {
  padding-left: 150px;
}

.pl-155 {
  padding-left: 155px;
}

.pl-160 {
  padding-left: 160px;
}

.pl-165 {
  padding-left: 165px;
}

.pl-170 {
  padding-left: 170px;
}

.pl-175 {
  padding-left: 175px;
}

.pl-180 {
  padding-left: 180px;
}

.pl-185 {
  padding-left: 185px;
}

.pl-190 {
  padding-left: 190px;
}

.pl-195 {
  padding-left: 195px;
}

.pl-200 {
  padding-left: 200px;
}

/*-- Padding Right --*/
.pr-5 {
  padding-right: 5px;
}

.pr-10 {
  padding-right: 10px;
}

.pr-15 {
  padding-right: 15px;
}

.pr-20 {
  padding-right: 20px;
}

.pr-25 {
  padding-right: 25px;
}

.pr-30 {
  padding-right: 30px;
}

.pr-35 {
  padding-right: 35px;
}

.pr-40 {
  padding-right: 40px;
}

.pr-45 {
  padding-right: 45px;
}

.pr-50 {
  padding-right: 50px;
}

.pr-55 {
  padding-right: 55px;
}

.pr-60 {
  padding-right: 60px;
}

.pr-65 {
  padding-right: 65px;
}

.pr-70 {
  padding-right: 70px;
}

.pr-75 {
  padding-right: 75px;
}

.pr-80 {
  padding-right: 80px;
}

.pr-85 {
  padding-right: 85px;
}

.pr-90 {
  padding-right: 90px;
}

.pr-95 {
  padding-right: 95px;
}

.pr-100 {
  padding-right: 100px;
}

.pr-105 {
  padding-right: 105px;
}

.pr-110 {
  padding-right: 110px;
}

.pr-115 {
  padding-right: 115px;
}

.pr-120 {
  padding-right: 120px;
}

.pr-125 {
  padding-right: 125px;
}

.pr-130 {
  padding-right: 130px;
}

.pr-135 {
  padding-right: 135px;
}

.pr-140 {
  padding-right: 140px;
}

.pr-145 {
  padding-right: 145px;
}

.pr-150 {
  padding-right: 150px;
}

.pr-155 {
  padding-right: 155px;
}

.pr-160 {
  padding-right: 160px;
}

.pr-165 {
  padding-right: 165px;
}

.pr-170 {
  padding-right: 170px;
}

.pr-175 {
  padding-right: 175px;
}

.pr-180 {
  padding-right: 180px;
}

.pr-185 {
  padding-right: 185px;
}

.pr-190 {
  padding-right: 190px;
}

.pr-195 {
  padding-right: 195px;
}

.pr-200 {
  padding-right: 200px;
}

/*---------------------------------
    Typography css start 
---------------------------------*/
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  font-size: 10px;
}

body {
  font-size: 16px;
  font-weight: 400;
  color: var(--bd-black);
  line-height: 1.5;
  font-family: var(--bd-ff-body);
}

p {
  font-size: 16px;
  font-weight: var(--bd-fw-regular);
  color: var(--bd-text-body);
  margin-bottom: 30px;
  line-height: 1.62;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--bd-ff-heading);
  color: var(--bd-black);
  margin-top: 0px;
  line-height: 1.1;
  margin-bottom: 0;
  font-weight: var(--bd-fw-sbold);
  word-break: break-word;
}

h1 {
  font-size: var(--bd-fs-h1);
}
@media only screen and (min-width: 992px) {
  h1 {
    font-size: 25px;
  }
}
@media only screen and (min-width: 576px), (max-width: 575px) {
  h1 {
    font-size: 24px;
  }
}
h1.large {
  font-size: 50px;
}

h2 {
  font-size: var(--bd-fs-h2);
}

h3 {
  font-size: var(--bd-fs-h3);
}

h4 {
  font-size: var(--bd-fs-h4);
}

h5 {
  font-size: var(--bd-fs-h5);
}
h5.small {
  font-size: 20px;
}

h6 {
  font-size: var(--bd-fs-h6);
}

/*----------------------------------------*/
/*  3.5 Offcanvas css
/*----------------------------------------*/
.offcanvas-info {
  background: var(--bd-white);
  height: 100%;
  position: fixed;
  padding: 30px 30px;
  right: 0;
  top: 0;
  width: 400px;
  height: 100%;
  -webkit-transform: translateX(calc(100% + 80px));
  -moz-transform: translateX(calc(100% + 80px));
  -ms-transform: translateX(calc(100% + 80px));
  -o-transform: translateX(calc(100% + 80px));
  transform: translateX(calc(100% + 80px));
  -webkit-transition: transform 0.45s ease-in-out, opacity 0.45s ease-in-out;
  -moz-transition: transform 0.45s ease-in-out, opacity 0.45s ease-in-out;
  transition: transform 0.45s ease-in-out, opacity 0.45s ease-in-out;
  z-index: 999;
  overflow-y: scroll;
  overscroll-behavior-y: contain;
  scrollbar-color: #FF5562 #000000;
}
@media (max-width:480px) {
  .offcanvas-info {
    padding: 20px;
    width: 100%;
  }
}

.offcanvas-info.info_open {
  transform: translateX(0);
  opacity: 1;
}

.offcanvas_overlay {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  z-index: 555;
  opacity: 0.8;
  transition: width 0.5s linear;
  background-color: rgba(40, 40, 40, 0.8);
  backdrop-filter: blur(10px);
}

.offcanvas_overlay.overlayopen {
  width: 100%;
}

.offcanvas-top {
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
  align-items: center;
  border-bottom: 1px solid #E0E0E0;
}

.offcanvas-logo {
  width: 180px;
}
@media (max-width: 575px) {
  .offcanvas-logo {
    max-width: 130px;
  }
}

.offcanvas-icon button {
  font-size: 16px;
  color: var(--bd-white);
  height: 40px;
  width: 40px;
  background: #F4209F;
  border-radius: 50%;
}
.offcanvas-icon button i {
  transition: 0.5s;
}
.offcanvas-icon button:hover i {
  transform: rotate(90deg);
}

.follow-link {
  font-size: 22px;
  margin-bottom: 20px;
  font-weight: 500;
}
@media (max-width: 575px) {
  .follow-link {
    font-size: 18px;
  }
}

.offcanvas-contact .share-link ul li a {
  color: var(--bd-white);
}

.search_popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: var(--bd-white);
  z-index: 100;
  padding-top: 60px;
  padding-bottom: 90px;
  opacity: 0;
  -webkit-transform: translateY(calc(-100% - 80px));
  -moz-transform: translateY(calc(-100% - 80px));
  -ms-transform: translateY(calc(-100% - 80px));
  -o-transform: translateY(calc(-100% - 80px));
  transform: translateY(calc(-100% - 80px));
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
  transition-delay: 0.5s;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
  z-index: 9999;
}
.search_popup .search_close {
  position: absolute;
  top: 15px;
  right: 20px;
}
@media only screen and (min-width: 576px) {
  .search_popup .search_close {
    right: 36px;
  }
}
@media only screen and (min-width: 1200px) {
  .search_popup .search_close {
    right: 45px;
  }
}

.search_popup.search-opened {
  opacity: 1;
  -webkit-transform: translateY(0%);
  -moz-transform: translateY(0%);
  -ms-transform: translateY(0%);
  -o-transform: translateY(0%);
  transform: translateY(0%);
  transition-delay: 0s;
}

.search_form form .search_input {
  position: relative;
  z-index: 1;
}

.search-box {
  position: relative;
  z-index: 1;
}
.search-box input {
  width: 100%;
  color: var(--bd-black);
  border: 1px solid #E9E9E9;
  background: transparent;
  outline: 0;
  padding: 15px 75px 15px 24px;
}
@media only screen and (min-width: 768px) {
  .search-box input {
    padding: 20px 75px 20px 24px;
  }
}
.search-box input:focus {
  border-color: var(--bd-primary);
}
.search-box button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  max-width: 62px;
  font-size: 22px;
  line-height: 1;
  color: var(--bd-black);
  border-left: 1px solid #E9E9E9;
  width: 100%;
  height: 100%;
}
.search-box button:hover {
  color: var(--bd-primary);
}

.search_close_btn {
  font-size: 20px;
}

.search-popup-overlay {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(40, 40, 40, 0.7);
  backdrop-filter: blur(10px);
  z-index: 99;
  -webkit-transform: translateY(calc(-100% - 80px));
  -moz-transform: translateY(calc(-100% - 80px));
  -ms-transform: translateY(calc(-100% - 80px));
  -o-transform: translateY(calc(-100% - 80px));
  transform: translateY(calc(-100% - 80px));
  transition: all 0.5s ease-in-out 0s;
  transition-delay: 0.3s;
}

.search-popup-overlay.opened {
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}

/*----------------------------------------*/
/*  3.2 Breadcrumb css
/*----------------------------------------*/
.breadcrumb-area {
  background-color: #E9F9FD;
  padding-top: 200px;
  padding-bottom: 150px;
  position: relative;
}
@media only screen and (min-width: 768px) {
  .breadcrumb-area {
    padding-top: 250px;
    padding-bottom: 200px;
  }
}
@media only screen and (min-width: 992px) {
  .breadcrumb-area {
    padding-top: 300px;
    padding-bottom: 200px;
  }
}
@media only screen and (min-width: 1200px) {
  .breadcrumb-area {
    padding-top: 350px;
    padding-bottom: 250px;
  }
}
.breadcrumb-area .breadcrumb-shape {
  position: absolute;
  right: 40px;
  top: 140%;
  width: 70px;
}
@media only screen and (min-width: 576px) {
  .breadcrumb-area .breadcrumb-shape {
    right: 20px;
    top: 115%;
  }
}
@media only screen and (min-width: 992px) {
  .breadcrumb-area .breadcrumb-shape {
    right: 30px;
    top: 50%;
    width: 100px;
  }
}
@media only screen and (min-width: 1200px) {
  .breadcrumb-area .breadcrumb-shape {
    right: 0;
  }
}
.breadcrumb-area .breadcrumb-shape2 {
  position: absolute;
  left: 35px;
  top: -65%;
  width: 50px;
}
@media only screen and (min-width: 992px) {
  .breadcrumb-area .breadcrumb-shape2 {
    left: 0;
    top: 50%;
    width: auto;
  }
}
.breadcrumb-area .breadcrumb-shape3 {
  position: absolute;
  right: 10%;
  top: 20%;
  width: 100px;
}
@media only screen and (min-width: 768px) {
  .breadcrumb-area .breadcrumb-shape3 {
    width: inherit;
  }
}
@media only screen and (min-width: 992px) {
  .breadcrumb-area .breadcrumb-shape3 {
    top: 30%;
  }
}
.breadcrumb-area .breadcrumb-sun {
  position: absolute;
  top: 20%;
  left: 20%;
  width: 50px;
}
@media only screen and (min-width: 1200px) {
  .breadcrumb-area .breadcrumb-sun {
    width: inherit;
  }
}
@media only screen and (min-width: 1400px) {
  .breadcrumb-area .breadcrumb-sun {
    top: 25%;
  }
}
@media only screen and (min-width: 1600px) {
  .breadcrumb-area .breadcrumb-sun {
    top: 30%;
  }
}
.breadcrumb-area .top-shape {
  position: absolute;
  left: 0;
  top: -1px;
  width: 100%;
}
.breadcrumb-area .bottom-shape {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
}

.breadcrumb-wrapper {
  text-align: center;
}

.breadcrumb-title {
  font-size: 30px;
  text-transform: capitalize;
  margin-bottom: 15px;
  color: var(--bd-black);
}
@media only screen and (min-width: 576px) {
  .breadcrumb-title {
    font-size: 40px;
  }
}
@media only screen and (min-width: 768px) {
  .breadcrumb-title {
    font-size: 50px;
  }
}
@media only screen and (min-width: 1200px) {
  .breadcrumb-title {
    font-size: 60px;
  }
}

.breadcrumb {
  justify-content: center;
}

.breadcrumb-item {
  font-size: 22px;
  text-transform: capitalize;
  position: relative;
  color: var(--bd-black);
}
.breadcrumb-item a:hover {
  color: var(--bd-black);
}
.breadcrumb-item::before {
  color: #F4209F !important;
}

.breadcrumb-item.active {
  color: #F4209F;
}

/*----------------------------------------
   3.3  button css
-----------------------------------------*/
.btn-transparent {
  font: 600 16px var(--bd-ff-heading);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 21px;
  padding: 12px 25px;
  border: 2px dashed var(--bd-primary);
  position: relative;
  overflow: hidden;
}
@media only screen and (min-width: 1200px) {
  .btn-transparent {
    font-size: 18px;
    padding: 14px 44px;
  }
}
.btn-transparent:hover {
  background-color: var(--bd-primary);
  color: var(--bd-white);
}

.theme-btn {
  font: 500 16px var(--bd-ff-heading);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #FFA227;
  color: var(--bd-white);
  border-radius: 21px;
  padding: 20px 38px;
  letter-spacing: 1px;
  position: relative;
  overflow: hidden;
  z-index: 1;
}
@media (max-width: 575px) {
  .theme-btn {
    padding: 17px 22px;
  }
}
.theme-btn:hover {
  background-color: var(--bd-primary);
}
.theme-btn:hover::before {
  width: 120%;
  height: 120%;
}
.theme-btn::before {
  content: "";
  position: absolute;
  height: 75%;
  width: 90%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 2px dashed white;
  border-radius: 21px;
  transition: 0.3s;
  z-index: -2;
}

.theme-btn.theme-btn-two {
  background-color: #18E2E2;
}
.theme-btn.theme-btn-two:hover {
  background-color: var(--bd-primary);
}

.theme-btn.theme-btn-three {
  background-color: #4AC1F7;
}
.theme-btn.theme-btn-three:hover {
  background-color: var(--bd-primary);
}

/*----------------------------------------*/
/*  3.1 Back to top css
/*----------------------------------------*/
.backtotop-wrap {
  position: fixed;
  bottom: 30px;
  right: 30px;
  height: 45px;
  width: 45px;
  cursor: pointer;
  display: block;
  border-radius: 50px;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translateY(20px);
  -moz-transform: translateY(20px);
  -ms-transform: translateY(20px);
  -o-transform: translateY(20px);
  transform: translateY(20px);
  -webkit-transition: all 400ms linear;
  -o-transition: all 400ms linear;
  transition: all 400ms linear;
  background: var(--bd-primary);
}
@media (max-width:480px) {
  .backtotop-wrap {
    bottom: 20px;
    right: 20px;
  }
}
.backtotop-wrap.active-progress {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  -ms-transform: translateY(0px);
  -o-transform: translateY(0px);
  transform: translateY(0px);
}
.backtotop-wrap::after {
  position: absolute;
  content: "\f062";
  text-align: center;
  font-family: var(--bd-ff-fontawesome);
  line-height: 45px;
  font-size: 16px;
  font-weight: 400;
  color: var(--bd-white);
  left: 0;
  top: 0;
  height: 45px;
  width: 45px;
  cursor: pointer;
  display: block;
  z-index: 1;
  -webkit-transition: all 400ms linear;
  -o-transition: all 400ms linear;
  transition: all 400ms linear;
}
.backtotop-wrap svg path {
  fill: none;
}
.backtotop-wrap svg.backtotop-circle path {
  stroke: #DDDDDD;
  stroke-width: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 400ms linear;
  -o-transition: all 400ms linear;
  transition: all 400ms linear;
}

.progress-wrap {
  position: fixed;
  background-color: white;
  right: 50px;
  bottom: 50px;
  height: 45px;
  width: 45px;
  cursor: pointer;
  display: block;
  border-radius: 50px;
  box-shadow: inset 0 0 0 2px white;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px);
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
}
@media (max-width: 575px) {
  .progress-wrap {
    right: 30px;
    bottom: 30px;
  }
}

.progress-wrap.active-progress {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.progress-wrap::after {
  position: absolute;
  content: "\f176";
  font-family: var(--bd-ff-fontawesome);
  text-align: center;
  line-height: 45px;
  font-size: 20px;
  color: var(--bd-secondary);
  left: 0;
  top: 0;
  height: 45px;
  width: 45px;
  cursor: pointer;
  display: block;
  z-index: 1;
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
}

.progress-wrap svg path {
  fill: none;
}

.progress-wrap svg.progress-circle path {
  stroke: var(--bd-secondary);
  stroke-width: 4;
  box-sizing: border-box;
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
}

/*----------------------------------------*/
/*  3.7 Preloader css
/*----------------------------------------*/
.preloader {
  position: fixed;
  inset: 0px;
  z-index: 99999;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  background-color: var(--bd-white);
}

.loading {
  border: 1px solid transparent;
  border-color: transparent #F4209F transparent #F4209F;
  animation: rotate-loading 1.5s linear 0s infinite normal;
  transform-origin: 50% 50%;
  transition: all 0.5s ease-in-out;
  height: 100px;
  position: relative;
  width: 100px;
  border-radius: 100%;
}

@keyframes rotate-loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.loading-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 66px;
  transform: translate(-50%, -50%);
}

/*----------------------------------------
   3.6 Basic pagination
-----------------------------------------*/
.pagination-wrapper {
  margin-top: 30px;
}
@media only screen and (min-width: 768px) {
  .pagination-wrapper {
    margin-top: 50px;
  }
}
.pagination-wrapper .pagination {
  justify-content: center;
  gap: 10px;
}
@media only screen and (min-width: 992px) {
  .pagination-wrapper .pagination {
    gap: 15px;
  }
}
.pagination-wrapper .pagination .page-link {
  padding: 0px;
  margin: 0px;
  height: 40px;
  width: 40px;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-color);
  color: var(--bd-white);
  border: 0;
  border-radius: 50% 50% 50% 50%/55% 55% 45% 45%;
  position: relative;
  z-index: 1;
}
@media only screen and (min-width: 992px) {
  .pagination-wrapper .pagination .page-link {
    height: 50px;
    width: 50px;
    font-size: 20px;
  }
}
.pagination-wrapper .pagination .page-link:hover {
  background: var(--bd-primary);
}
.pagination-wrapper .pagination .page-link:focus {
  box-shadow: none;
}
.pagination-wrapper .pagination .active {
  background: var(--bd-primary);
}

/*----------------------------------------
   3.4 Modal css
-----------------------------------------*/
.modal_wrapper .modal-dialog {
  max-width: 1015px;
}
.modal_wrapper .modal-dialog .modal-content {
  padding: 20px;
  margin: 10px;
  background-color: var(--bd-white);
  border-radius: 15px;
  border: 0;
  width: 100%;
}
@media only screen and (min-width: 576px) {
  .modal_wrapper .modal-dialog .modal-content {
    padding: 20px;
  }
}
@media only screen and (min-width: 992px) {
  .modal_wrapper .modal-dialog .modal-content {
    padding: 40px;
    border-radius: 25px;
  }
}
@media only screen and (min-width: 1200px) {
  .modal_wrapper .modal-dialog .modal-content {
    padding: 80px 60px;
  }
}
.modal_wrapper .modal-dialog .btn_close {
  position: absolute;
  right: -10px;
  top: -12px;
  font-size: 20px;
  z-index: 5;
  color: var(--bd-white);
  background: var(--bd-black);
  padding: 2px 9px;
  border-radius: 50%;
}
@media only screen and (min-width: 576px) {
  .modal_wrapper .modal-dialog .btn_close {
    right: 8px;
    top: 2px;
    font-size: 30px;
    background-color: transparent;
    color: var(--bd-black);
  }
}
@media only screen and (min-width: 992px) {
  .modal_wrapper .modal-dialog .btn_close {
    font-size: 30px;
    right: 25px;
    top: 15px;
  }
}

.shop_details-thumb {
  padding: 58px 50px;
  text-align: center;
  border-radius: 10px;
  background-color: var(--bg-color);
}

.shop_small-img {
  padding: 8px 20px;
  max-width: 120px;
  margin: auto;
  background-color: var(--bg-color);
  border-radius: 7px;
}

.modal_wrapper.product-modal .modal-content {
  overflow: hidden;
}
@media (max-width: 575px) {
  .modal_wrapper.product-modal .modal-dialog .btn_close {
    top: -1px;
    right: -1px;
  }
}
@media only screen and (min-width: 576px) {
  .modal_wrapper.product-modal .modal-dialog .btn_close {
    right: -4px;
    top: -4px;
  }
}
@media only screen and (min-width: 768px) {
  .modal_wrapper.product-modal .modal-dialog .btn_close {
    right: 8px;
    top: 2px;
  }
}

.shop_nav-slide-wrapper, .shop_nav2-slide-wrapper {
  position: relative;
  margin-top: 30px;
}
.shop_nav-slide-wrapper button, .shop_nav2-slide-wrapper button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  padding: 7px 11px;
  border-radius: 5px;
  box-shadow: 0px 7px 14px 0px rgba(0, 0, 1, 0.1019607843);
  background-color: var(--bd-white);
  color: var(--bd-black);
}
.shop_nav-slide-wrapper button:hover, .shop_nav2-slide-wrapper button:hover {
  background-color: var(--bd-primary);
  color: var(--bd-white);
}
.shop_nav-slide-wrapper .shop_button_next, .shop_nav2-slide-wrapper .shop_button_next {
  right: -12px;
}
.shop_nav-slide-wrapper .shop_button_prev, .shop_nav2-slide-wrapper .shop_button_prev {
  left: -12px;
}

.modal-product-title {
  font-size: 20px;
  margin-bottom: 5px;
}
@media only screen and (min-width: 576px) {
  .modal-product-title {
    font-size: 24px;
  }
}
@media only screen and (min-width: 992px) {
  .modal-product-title {
    font-size: 30px;
  }
}

.modal-right p {
  font-size: 16px;
  margin-bottom: 20px;
  color: var(--bd-black);
}
@media only screen and (min-width: 768px) {
  .modal-right p {
    font-size: 20px;
  }
}
.modal-right .price {
  gap: 5px;
  align-items: center;
}
.modal-right .current {
  font-size: 24px;
  font-weight: 800;
}
.modal-right .regular {
  font-size: 18px;
  color: var(--bd-text-body);
  font-weight: 700;
}

.product-variant {
  margin-bottom: 20px;
}
@media only screen and (min-width: 768px) {
  .product-variant {
    margin-bottom: 30px;
  }
}
.product-variant span {
  display: block;
  margin-bottom: 10px;
}
.product-variant ul {
  display: flex;
  gap: 10px;
}
.product-variant .color-item {
  padding: 2px;
  border-radius: 4px;
  border: 1px solid transparent;
}
.product-variant .color-item.active {
  border-color: var(--bd-black);
}
.product-variant .color-item a {
  height: 25px;
  width: 25px;
  background-color: var(--color);
  display: block;
  border-radius: 4px;
}

.size-variant {
  margin-bottom: 35px;
}
@media only screen and (min-width: 768px) {
  .size-variant {
    margin-bottom: 50px;
  }
}
.size-variant span {
  display: block;
  margin-bottom: 10px;
}
.size-variant button {
  display: inline-block;
  padding: 6px 13px;
  border: 1px solid #E0E0E0;
  border-radius: 4px;
  color: var(--bd-text-body);
}
.size-variant button:hover {
  background-color: var(--bd-primary);
  border-color: var(--bd-primary);
  color: var(--bd-white);
}
.size-variant button.active {
  background-color: var(--bd-primary);
  border-color: var(--bd-primary);
  color: var(--bd-white);
}

.product-btn {
  margin-bottom: 30px;
}
.product-btn .add-to-btn {
  display: inline-block;
  padding: 9px 15px;
  color: var(--bd-white);
  background-color: #18E2E2;
  border-radius: 5px;
  border: 1px solid #1AABB4;
  margin-right: 12px;
}
.product-btn .add-to-btn:hover {
  background-color: #1AABB4;
}
.product-btn .wishlist-btn {
  padding: 9px 15px;
  display: inline-block;
  background-color: #FCF5E5;
  border-radius: 5px;
  border: 1px solid #EDBC54;
  color: #EDBC54;
}
.product-btn .wishlist-btn:hover {
  color: var(--bd-white);
  background-color: #EDBC54;
}

.modal-bottom {
  display: flex;
  gap: 12px;
  align-items: center;
}
.modal-bottom span {
  font-size: 15px;
  font-weight: 500;
  color: var(--bd-black);
}

.product-details-area .shop_details-thumb {
  padding: 50px;
}
@media only screen and (min-width: 992px) {
  .product-details-area .shop_details-thumb {
    padding: 105px 50px;
  }
}
.product-details-area .shop_small-img {
  text-align: center;
  max-width: 100%;
  padding: 15px 10px;
}
@media only screen and (min-width: 992px) {
  .product-details-area .shop_small-img {
    padding: 35px 30px;
  }
}
@media only screen and (min-width: 1200px) {
  .product-details-area .modal-right {
    padding-left: 20px;
  }
}
@media only screen and (min-width: 1400px) {
  .product-details-area .modal-right {
    padding-left: 40px;
  }
}

.product-btn-group {
  display: flex;
  gap: 10px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}
@media only screen and (min-width: 768px) {
  .product-btn-group {
    gap: 20px;
  }
}
.product-btn-group button {
  padding: 10px 20px;
  border-radius: 8px;
  color: var(--bd-text-body);
  border: 1px solid #E0E0E0;
}
.product-btn-group button.active {
  background-color: #18E2E2;
  border-color: #18E2E2;
  color: var(--bd-white);
}
.product-btn-group button:hover {
  background-color: #18E2E2;
  border-color: #18E2E2;
  color: var(--bd-white);
}

.modal-share {
  display: flex;
  gap: 10px;
  align-items: center;
}

.modal-right-img {
  position: relative;
  z-index: 1;
  max-width: 190px;
  margin: auto;
}
@media only screen and (min-width: 576px) {
  .modal-right-img {
    max-width: 250px;
  }
}
@media only screen and (min-width: 768px) {
  .modal-right-img {
    max-width: 100%;
    margin: auto;
  }
}
.modal-right-img .cloud-shape {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}
.modal-right-img .sun-shape {
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
}

.paper-plane {
  margin-bottom: 10px;
  width: 60px;
}
@media only screen and (min-width: 768px) {
  .paper-plane {
    margin-bottom: 20px;
    width: inherit;
  }
}

.modal-newsletter {
  text-align: center;
}
@media only screen and (min-width: 576px) {
  .modal-newsletter {
    max-width: 400px;
    margin: auto;
  }
}
@media only screen and (min-width: 768px) {
  .modal-newsletter {
    text-align: start;
    max-width: 100%;
    margin: auto;
  }
}
.modal-newsletter h3 {
  font-size: 26px;
  margin-bottom: 20px;
}
@media only screen and (min-width: 576px) {
  .modal-newsletter h3 {
    font-size: 28px;
  }
}
@media only screen and (min-width: 992px) {
  .modal-newsletter h3 {
    font-size: 30px;
  }
}
@media only screen and (min-width: 1200px) {
  .modal-newsletter h3 {
    font-size: 40px;
  }
}
@media only screen and (min-width: 768px) {
  .modal-newsletter p {
    margin-bottom: 50px;
  }
}
.modal-newsletter .subscribe-input-field {
  margin-bottom: 10px;
}
.modal-newsletter .subscribe-input-field input {
  height: 50px;
}
.modal-newsletter .subscribe-input-field .input-btn {
  font-size: 16px;
}
.modal-newsletter .comment-post-remember {
  margin-bottom: 30px;
  text-align: start;
}
@media only screen and (min-width: 768px) {
  .modal-newsletter .comment-post-remember {
    margin-bottom: 50px;
  }
}

/* HEADER CSS */
/*----------------------------------------*/
/*  4.1 Header Style 1
/*----------------------------------------*/
.header-area {
  position: absolute;
  top: 30px;
  left: 0;
  width: 100%;
  z-index: 2;
}

.main-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo img {
  width: 160px;
}
@media only screen and (min-width: 1200px) {
  .logo img {
    width: 200px;
  }
}

.header-right {
  display: flex;
  align-items: center;
  gap: 15px;
}
@media only screen and (min-width: 992px) {
  .header-right {
    gap: 40px;
  }
}

.main-header {
  overflow: hidden;
}
@media only screen and (min-width: 992px) {
  .main-header {
    overflow: visible;
  }
}

.header-style-three .main-menu {
  display: none;
}
@media only screen and (min-width: 992px) {
  .header-style-three .main-menu {
    display: block;
  }
}

.header-style-three .main-header {
  padding: 12px 0;
  overflow: visible;
}
@media only screen and (min-width: 992px) {
  .header-style-three .main-header {
    padding: 0;
  }
}
.header-style-three .sticky .main-header {
  padding: 3px;
}

.header-top {
  background-color: #4AC1F7;
  padding: 10px 0;
  display: none;
}
@media only screen and (min-width: 768px) {
  .header-top {
    display: block;
  }
}

.header-contact ul {
  display: flex;
  gap: 45px;
  align-items: center;
}
.header-contact ul li a {
  font-size: 16px;
  color: var(--bd-white);
}
.header-contact ul li a span {
  margin-right: 10px;
}

.header-top-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.contact-right {
  display: flex;
  gap: 20px;
}
.contact-right .nice-select {
  border: 0;
  background-color: transparent;
  font-size: 16px;
  color: var(--bd-white);
}
.contact-right .nice-select li {
  color: var(--bd-black);
}

.header-menu-wrapper {
  display: none;
}
@media only screen and (min-width: 768px) {
  .header-menu-wrapper {
    display: block;
  }
}

.search-icon {
  color: #333333;
  font-size: 18px;
}
.search-icon:hover {
  color: var(--bd-primary);
}

.user-profile > ul {
  display: flex;
  gap: 15px;
}
@media only screen and (min-width: 768px) {
  .user-profile > ul {
    gap: 20px;
  }
}
.user-profile > ul li {
  position: relative;
}
.user-profile > ul li:hover .dropdown {
  visibility: visible;
  opacity: 1;
  transform: scaleY(1);
  pointer-events: all;
}
.user-profile > ul li .dropdown {
  position: absolute;
  z-index: 2;
  right: 0;
  top: 100%;
  background-color: var(--bd-white);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
  padding: 20px;
  border-radius: 21px;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
  transform: scaleY(0);
  transform-origin: top center;
  pointer-events: none;
  min-width: 220px;
}
.user-profile > ul li .dropdown li {
  margin-bottom: 10px;
}
.user-profile > ul li .dropdown li a i {
  margin-right: 5px;
}
.user-profile > ul li .dropdown li a:hover {
  color: var(--bd-primary);
}
.user-profile > ul li .dropdown li:last-child {
  margin-bottom: 0;
}
.user-profile > ul li .user-icon {
  height: 40px;
  width: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bd-primary);
  border-radius: 50% 50% 60% 40%/50% 38% 62% 50%;
  color: var(--bd-white);
  position: relative;
}
@media only screen and (min-width: 768px) {
  .user-profile > ul li .user-icon {
    height: 50px;
    width: 50px;
  }
}
.user-profile > ul li .user-icon::before {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  border: 1px solid var(--bd-black);
  border-radius: 50% 50% 60% 40%/50% 38% 62% 50%;
  left: 3px;
  top: 2px;
  z-index: -1;
}

.header-menu-wrapper {
  display: flex;
  gap: 15px;
  align-items: center;
}
@media only screen and (min-width: 992px) {
  .header-menu-wrapper {
    gap: 40px;
  }
}

.bars_icon {
  width: 35px;
  height: 20px;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  cursor: pointer;
}
@media (max-width: 575px) {
  .bars_icon {
    width: 30px;
    flex: 0 0 auto;
  }
}
.bars_icon .line {
  width: 100%;
  height: 2px;
  background: var(--bd-primary);
  display: inline-block;
  transition: color 0.2s ease-out;
  border-radius: 35px;
  transition: 0.3s;
}
.bars_icon .line:nth-child(2) {
  margin-left: 15px;
}
.bars_icon .line:nth-child(3) {
  margin-left: 8px;
}
.bars_icon:hover .line {
  margin-left: 0;
}

.sticky {
  position: fixed !important;
  top: 0;
  z-index: 222;
  inset-inline-end: 0;
  inset-inline-start: 0;
  width: 100%;
  -webkit-animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;
  animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;
  background: var(--bd-white);
  -webkit-box-shadow: 0px 10px 20px 0px rgba(8, 0, 42, 0.08);
  -moz-box-shadow: 0px 10px 20px 0px rgba(8, 0, 42, 0.08);
  box-shadow: 0px 10px 20px 0px rgba(8, 0, 42, 0.08);
}

.header-sticky.sticky {
  padding: 11px 0;
}

/* Hero CSS */
/*----------------------------------------*/
/*  7.1 banner Style 1
/*----------------------------------------*/
.hero-area {
  padding: 240px 0;
  padding-bottom: 140px;
  background-color: #BCF2FF;
  position: relative;
  overflow: hidden;
  z-index: 1;
}
@media only screen and (min-width: 768px) {
  .hero-area {
    padding-bottom: 180px;
  }
}
@media only screen and (min-width: 1200px) {
  .hero-area {
    padding-bottom: 250px;
  }
}
@media only screen and (min-width: 1400px) {
  .hero-area {
    padding: 280px 0;
  }
}
.hero-area .bottom-shape {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
}
.hero-area .hero-shape1 {
  position: absolute;
  left: -120px;
  top: 220px;
  max-width: 270px;
  z-index: -1;
  display: none;
}
@media only screen and (min-width: 1600px) {
  .hero-area .hero-shape1 {
    display: block;
  }
}
.hero-area .hero-shape2 {
  position: absolute;
  left: -85px;
  bottom: -30px;
  width: 200px;
}
@media only screen and (min-width: 576px) {
  .hero-area .hero-shape2 {
    left: -75px;
    bottom: -30px;
  }
}
@media only screen and (min-width: 1200px) {
  .hero-area .hero-shape2 {
    left: -90px;
    bottom: -30px;
    width: 270px;
  }
}
@media only screen and (min-width: 1400px) {
  .hero-area .hero-shape2 {
    left: -190px;
    bottom: -100px;
    width: inherit;
  }
}
@media only screen and (min-width: 1600px) {
  .hero-area .hero-shape2 {
    left: -190px;
    bottom: -30px;
  }
}
.hero-area .hero-shape3 {
  position: absolute;
  right: 105px;
  top: 300px;
}
.hero-area .hero-shape4 {
  position: absolute;
  right: 40px;
  top: 120px;
  width: 120px;
  display: none;
  z-index: -1;
}
@media only screen and (min-width: 768px) {
  .hero-area .hero-shape4 {
    right: 50px;
    top: 180px;
    width: inherit;
    display: block;
  }
}
@media only screen and (min-width: 768px) {
  .hero-area .hero-shape4 {
    top: 120px;
    width: 120px;
  }
}
@media only screen and (min-width: 1400px) {
  .hero-area .hero-shape4 {
    right: 50px;
    top: 180px;
    width: inherit;
  }
}
.hero-area .hero-shape5 {
  position: absolute;
  right: -60px;
  bottom: 70px;
}
@media only screen and (min-width: 1600px) {
  .hero-area .hero-shape5 {
    bottom: 260px;
  }
}

.hero-title {
  font-size: 48px;
  margin-bottom: 20px;
  color: #F4209F;
  text-shadow: -0.2rem -0.2rem 0 rgba(244, 32, 159, 0.3);
}
@media only screen and (min-width: 576px) {
  .hero-title {
    font-size: 55px;
  }
}
@media only screen and (min-width: 768px) {
  .hero-title {
    font-size: 65px;
  }
}
@media only screen and (min-width: 1200px) {
  .hero-title {
    font-size: 70px;
    text-shadow: -0.5rem -0.4rem 0 rgba(244, 32, 159, 0.3);
  }
}
@media only screen and (min-width: 1400px) {
  .hero-title {
    font-size: 80px;
  }
}
.hero-title .text-color1 {
  color: var(--color);
  text-shadow: -0.2rem -0.2rem 0 rgba(255, 162, 39, 0.3);
}
@media only screen and (min-width: 1200px) {
  .hero-title .text-color1 {
    text-shadow: -0.5rem -0.4rem 0 rgba(255, 162, 39, 0.3);
  }
}
.hero-title .text-color2 {
  color: var(--color-2);
  text-shadow: -0.2rem -0.2rem 0 rgba(27, 76, 251, 0.3);
}
@media only screen and (min-width: 1200px) {
  .hero-title .text-color2 {
    text-shadow: -0.5rem -0.4rem 0 rgba(27, 76, 251, 0.3);
  }
}

.hero-content {
  position: relative;
  max-width: 500px;
  text-align: center;
  margin: auto;
}
@media only screen and (min-width: 992px) {
  .hero-content {
    text-align: start;
  }
}
.hero-content .hero-sun {
  position: absolute;
  left: 0;
  top: -115px;
  animation-play-state: paused;
}
@media only screen and (min-width: 1200px) {
  .hero-content .hero-sun {
    animation-play-state: running;
  }
}
@media only screen and (min-width: 1400px) {
  .hero-content .hero-sun {
    left: 245px;
    top: -150px;
    animation-play-state: running;
  }
}
.hero-content p {
  font-size: 20px;
}
@media (max-width: 575px) {
  .hero-content p {
    font-size: 18px;
  }
}

.video-play-btn {
  font-size: 24px;
  color: var(--bd-white);
  height: 70px;
  width: 70px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bd-primary);
  border-radius: 50% 50% 58% 42%/50% 36% 64% 50%;
  position: relative;
}
.video-play-btn:hover::before {
  left: 0;
  top: 0;
}
.video-play-btn::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 3px;
  width: 70px;
  height: 70px;
  border-radius: 50% 50% 58% 42%/50% 36% 64% 50%;
  border: 1px solid #222429;
  z-index: -1;
  transition: all 0.3s linear;
}

.hero-bottom {
  display: flex;
  gap: 35px;
  align-items: center;
  justify-content: center;
}
@media only screen and (min-width: 992px) {
  .hero-bottom {
    justify-content: start;
  }
}

.hero-thumb {
  max-width: 715px;
  position: relative;
  z-index: 2;
}
.hero-thumb img {
  position: relative;
  z-index: 2;
}
.hero-thumb .hero-shape {
  position: absolute;
  right: 0;
  top: 0;
}

.hero-shape {
  height: 100%;
  width: 100%;
  position: relative;
  background-color: white;
  border-radius: 65% 35% 40% 60%/59% 48% 52% 41%;
  animation: img-border 5s linear infinite alternate;
  transition: all 0.3s ease-out 0s;
}
@media only screen and (min-width: 768px) {
  .hero-shape {
    height: 470px;
    width: 460px;
  }
}
@media only screen and (min-width: 992px) {
  .hero-shape {
    height: 300px;
    width: 330px;
  }
}
@media only screen and (min-width: 1200px) {
  .hero-shape {
    height: 470px;
    width: 460px;
  }
}
.hero-shape::before {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  background-color: #92E9FF;
  left: 20px;
  top: -20px;
  z-index: -1;
  border-radius: 65% 35% 40% 60%/59% 48% 52% 41%;
  animation: img-border 5s linear infinite alternate;
  transition: all 0.3s ease-out 0s;
}

@keyframes img-border {
  0% {
    -webkit-border-radius: 65% 35% 40% 60%/59% 48% 52% 41%;
    -moz-border-radius: 65% 35% 40% 60%/59% 48% 52% 41%;
    border-radius: 65% 35% 40% 60%/59% 48% 52% 41%;
  }
  100% {
    border-radius: 30% 70% 28% 58%/53% 45% 31% 47%;
  }
}
/*----------------------------------------*/
/*  7.2 Hero Style 2
/*----------------------------------------*/
.hero-style-two {
  background-color: #FFF6D6;
  padding: 80px 0;
  padding-top: 140px;
  position: relative;
  z-index: 1;
}
@media only screen and (min-width: 768px) {
  .hero-style-two {
    padding: 100px 0;
    padding-top: 160px;
  }
}
@media only screen and (min-width: 992px) {
  .hero-style-two {
    padding: 140px 0;
    padding-top: 200px;
  }
}
@media only screen and (min-width: 1400px) {
  .hero-style-two {
    padding: 280px 0;
  }
}
.hero-style-two .container {
  position: relative;
  z-index: 2;
}
.hero-style-two .light {
  position: absolute;
  left: 50%;
  top: 190px;
  z-index: 1;
  display: none;
}
@media only screen and (min-width: 992px) {
  .hero-style-two .light {
    display: block;
  }
}
.hero-style-two .tree {
  position: absolute;
  left: 12px;
  top: 140px;
  z-index: 1;
  display: none;
}
@media only screen and (min-width: 1400px) {
  .hero-style-two .tree {
    display: block;
  }
}
@media only screen and (min-width: 1600px) {
  .hero-style-two .tree {
    left: 80px;
    top: 140px;
  }
}
.hero-style-two .childern {
  position: absolute;
  left: 80px;
  bottom: 90px;
  z-index: 1;
  display: none;
}
@media only screen and (min-width: 1200px) {
  .hero-style-two .childern {
    display: block;
    width: 90px;
  }
}
@media only screen and (min-width: 1400px) {
  .hero-style-two .childern {
    width: inherit;
  }
}
.hero-style-two .hero-icon2 {
  position: absolute;
  right: 320px;
  top: 160px;
  z-index: 1;
  display: none;
}
@media only screen and (min-width: 1200px) {
  .hero-style-two .hero-icon2 {
    display: block;
  }
}
@media only screen and (min-width: 1400px) {
  .hero-style-two .hero-icon2 {
    right: 170px;
  }
}
.hero-style-two .hero-icon3 {
  position: absolute;
  right: 0;
  bottom: 65px;
  z-index: 1;
  display: none;
}
@media only screen and (min-width: 1200px) {
  .hero-style-two .hero-icon3 {
    display: block;
    width: 90px;
  }
}
@media only screen and (min-width: 1400px) {
  .hero-style-two .hero-icon3 {
    width: 120px;
  }
}
@media only screen and (min-width: 1600px) {
  .hero-style-two .hero-icon3 {
    width: inherit;
  }
}
.hero-style-two .wave-left {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  display: none;
}
@media only screen and (min-width: 992px) {
  .hero-style-two .wave-left {
    display: block;
  }
}
.hero-style-two .wave-left svg {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  height: 100%;
}
@media only screen and (min-width: 992px) {
  .hero-style-two .wave-left svg {
    left: -35px;
  }
}
@media only screen and (min-width: 1200px) {
  .hero-style-two .wave-left svg {
    left: -25px;
  }
}
@media only screen and (min-width: 1600px) {
  .hero-style-two .wave-left svg {
    left: -10px;
  }
}
.hero-style-two .wave-right {
  position: absolute;
  right: 0;
  top: 0;
  display: none;
  bottom: 0;
}
@media only screen and (min-width: 992px) {
  .hero-style-two .wave-right {
    display: block;
  }
}
.hero-style-two .wave-right svg {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  height: 100%;
}
@media only screen and (min-width: 992px) {
  .hero-style-two .wave-right svg {
    right: -35px;
  }
}
@media only screen and (min-width: 1200px) {
  .hero-style-two .wave-right svg {
    right: -25px;
  }
}
@media only screen and (min-width: 1600px) {
  .hero-style-two .wave-right svg {
    right: -10px;
  }
}
.hero-style-two .bottom-shape {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
}

.hero-title-two {
  font-size: 38px;
  color: #1B4CFB;
  margin-bottom: 20px;
}
@media only screen and (min-width: 576px) {
  .hero-title-two {
    font-size: 50px;
  }
}
@media only screen and (min-width: 1200px) {
  .hero-title-two {
    font-size: 60px;
  }
}
@media only screen and (min-width: 1400px) {
  .hero-title-two {
    font-size: 70px;
  }
}
.hero-title-two span {
  color: #EDBC54;
}

.hero-two-content {
  max-width: 600px;
  margin: auto;
  text-align: center;
}
@media only screen and (min-width: 992px) {
  .hero-two-content {
    text-align: start;
  }
}
.hero-two-content p {
  font-size: 18px;
}
@media only screen and (min-width: 768px) {
  .hero-two-content p {
    font-size: 20px;
  }
}

/*----------------------------------------*/
/*  7.3 Hero Style 3
/*----------------------------------------*/
.hero-style-three {
  background-color: #C5EBFC;
  padding-top: 110px;
  padding-bottom: 60px;
  position: relative;
  z-index: 1;
}
@media only screen and (min-width: 576px) {
  .hero-style-three {
    padding-bottom: 100px;
  }
}
@media only screen and (min-width: 768px) {
  .hero-style-three {
    padding-top: 150px;
  }
}
@media only screen and (min-width: 992px) {
  .hero-style-three {
    padding-bottom: 60px;
  }
}
@media only screen and (min-width: 1400px) {
  .hero-style-three {
    padding-top: 230px;
    padding-bottom: 100px;
  }
}
.hero-style-three .hero-cat {
  position: absolute;
  left: 0;
  top: 50%;
  display: none;
}
@media only screen and (min-width: 768px) {
  .hero-style-three .hero-cat {
    display: block;
  }
}
@media only screen and (min-width: 992px) {
  .hero-style-three .hero-cat {
    display: none;
  }
}
@media only screen and (min-width: 1600px) {
  .hero-style-three .hero-cat {
    display: block;
  }
}
.hero-style-three .hero-top-shape {
  position: absolute;
  left: 0;
  right: 0;
  top: -15px;
  z-index: 2;
}
@media only screen and (min-width: 992px) {
  .hero-style-three .hero-top-shape {
    top: -5px;
  }
}
@media only screen and (min-width: 1200px) {
  .hero-style-three .hero-top-shape {
    top: 0;
  }
}
.hero-style-three .hero-top-shape img {
  width: 100%;
}
.hero-style-three .hero-bottom-shape {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
}
.hero-style-three .hero-bottom-shape img {
  width: 100%;
}

.hero-title-three {
  font-size: 40px;
  margin-bottom: 20px;
}
@media only screen and (min-width: 576px) {
  .hero-title-three {
    font-size: 55px;
  }
}
@media only screen and (min-width: 768px) {
  .hero-title-three {
    font-size: 50px;
  }
}
@media only screen and (min-width: 992px) {
  .hero-title-three {
    font-size: 52px;
  }
}
@media only screen and (min-width: 1200px) {
  .hero-title-three {
    font-size: 60px;
  }
}
@media only screen and (min-width: 1400px) {
  .hero-title-three {
    font-size: 70px;
  }
}

.hero-content-three {
  position: relative;
  max-width: 600px;
  margin: auto;
  text-align: center;
}
@media only screen and (min-width: 992px) {
  .hero-content-three {
    text-align: start;
  }
}
.hero-content-three .icon-bird {
  position: absolute;
  right: 115px;
  top: -45px;
  width: 60px;
}
@media only screen and (min-width: 992px) {
  .hero-content-three .icon-bird {
    right: 45px;
  }
}
@media only screen and (min-width: 1200px) {
  .hero-content-three .icon-bird {
    right: 115px;
  }
}
.hero-content-three p {
  font-size: 20px;
}

.hero-three-thumb {
  position: relative;
  z-index: 2;
  margin: 0 50px;
  margin: auto;
  max-width: 280px;
}
@media only screen and (min-width: 576px) {
  .hero-three-thumb {
    margin: 0 70px;
    max-width: 100%;
  }
}
@media only screen and (min-width: 768px) {
  .hero-three-thumb {
    margin: 0 100px;
  }
}
@media only screen and (min-width: 992px) {
  .hero-three-thumb {
    margin: 0 70px;
  }
}
@media only screen and (min-width: 1200px) {
  .hero-three-thumb {
    margin: 0 80px;
  }
}
@media only screen and (min-width: 1400px) {
  .hero-three-thumb {
    margin: 0 85px;
    margin-top: -80px;
  }
}
@media only screen and (min-width: 1600px) {
  .hero-three-thumb {
    margin-left: 40px;
    margin: 0;
  }
}
.hero-three-thumb img {
  position: relative;
  z-index: 2;
}
.hero-three-thumb .hero-sun {
  position: absolute;
  right: -110px;
  top: 40%;
  width: 70px;
  display: none;
}
@media only screen and (min-width: 1600px) {
  .hero-three-thumb .hero-sun {
    display: block;
  }
}
.hero-three-thumb .hero-img-shape {
  height: 100%;
  width: 100%;
  background-color: #E9FEFF;
  border-radius: 50% 50% 60% 40%/50% 38% 62% 50%;
  position: absolute;
  left: 0;
  top: 0;
}
@media only screen and (min-width: 1600px) {
  .hero-three-thumb .hero-img-shape {
    height: 740px;
    width: 740px;
  }
}
.hero-three-thumb .hero-img-shape::before {
  position: absolute;
  content: "";
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  background-color: #FD5C37;
  border-radius: 50% 50% 60% 40%/50% 38% 62% 50%;
  z-index: -1;
  animation: spinner 25s linear infinite;
}

/*----------------------------------------*/
/*  5.2 Main menu css
/*----------------------------------------*/
.main-menu ul {
  display: flex;
  gap: 39px;
}
@media only screen and (min-width: 992px) {
  .main-menu ul {
    gap: 35px;
  }
}
@media only screen and (min-width: 1200px) {
  .main-menu ul {
    gap: 30px;
  }
}
@media only screen and (min-width: 1400px) {
  .main-menu ul {
    gap: 39px;
  }
}
.main-menu ul > li {
  position: relative;
  padding: 0px;
  margin: 0px;
}
.main-menu ul > li:hover a {
  color: var(--bd-primary);
}
.main-menu ul > li:hover a::before {
  width: 100%;
}
.main-menu ul > li:hover > .sub-menu {
  visibility: visible;
  opacity: 1;
  transform: scaleY(1);
  pointer-events: all;
}
.main-menu ul > li > .sub-menu {
  display: block;
  position: absolute;
  left: 0;
  min-width: 220px;
  padding: 15px 0px;
  background: white;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
  transform: scaleY(0);
  transform-origin: top center;
  pointer-events: none;
  z-index: 22;
  border-radius: 12px;
}
.main-menu ul > li > .sub-menu > li {
  padding: 5px 20px 5px 20px;
}
.main-menu ul > li > .sub-menu > li:hover > a {
  padding-inline-start: 15px;
  color: var(--bd-primary);
}
.main-menu ul > li > .sub-menu > li:hover > a::before {
  width: 12px;
}
.main-menu ul > li > .sub-menu > li a {
  padding: 4px 0;
  transition: all 300ms linear 0s;
  white-space: nowrap;
  display: block;
  border: 0;
  color: var(--bd-black);
  position: relative;
}
.main-menu ul > li > .sub-menu > li a::before {
  position: absolute;
  content: "";
  left: 0px;
  right: auto;
  top: 50%;
  bottom: auto;
  width: 0;
  height: 1px;
  background-color: var(--bd-primary);
  transition: 0.4s;
}
.main-menu ul > li > .sub-menu > li .sub-menu {
  left: 100%;
  top: 10px;
}
.main-menu ul > li > .sub-menu > li.current-menu-item > a {
  padding-inline-start: 15px;
  color: var(--bd-primary);
}
.main-menu ul > li > .sub-menu > li.current-menu-item > a::before {
  width: 12px;
}
.main-menu ul > li > a {
  font-size: 18px;
  padding: 20px 0px;
  color: #282828;
  display: inline-block;
  padding-inline-start: 0px;
  text-transform: capitalize;
}
.main-menu ul > li > a:hover {
  color: var(--bd-primary);
}
.main-menu ul > li.current-menu-ancestor a {
  color: var(--bd-primary);
}

/*----------------------------------------*/
/*  5.1 Meanmenu css
/*----------------------------------------*/
/* Mean menu customize */
.mean-container a.meanmenu-reveal {
  width: 22px;
  height: 22px;
  padding: 13px 13px 11px 13px;
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
  color: var(--bd-black);
  text-decoration: none;
  font-size: 17px;
  text-indent: -9999em;
  line-height: 22px;
  font-size: 1px;
  font-weight: 700;
  display: none !important;
}
.mean-container a.meanmenu-reveal span {
  display: block;
  background: var(--bd-black);
  height: 3px;
  margin-top: 3px;
}
.mean-container .mean-push {
  float: left;
  width: 100%;
  padding: 0;
  margin: 0;
  clear: both;
}
.mean-container .mean-nav {
  background: none;
  margin-top: 0;
  float: left;
  width: 100%;
  margin-bottom: 30px;
}
.mean-container .mean-nav .wrapper {
  width: 100%;
  padding: 0;
  margin: 0;
}
.mean-container .mean-nav > ul {
  padding: 0;
  margin: 0;
  width: 100%;
  list-style-type: none;
  display: block !important;
}
.mean-container .mean-nav > ul > li:first-child > a {
  border-top: 0;
}
.mean-container .mean-nav > ul .mean-expand {
  position: relative;
}
.mean-container .mean-nav > ul .mean-expand:hover::before {
  color: #FF5562 !important;
}
.mean-container .mean-nav > ul .mean-expand::before {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  content: "\f107";
  font-family: var(--bd-ff-fontawesome);
  color: var(--bd-black);
  transition: 0.35s;
}
.mean-container .mean-nav > ul .mean-expand.mean-clicked {
  color: var(--bd-primary);
}
.mean-container .mean-nav > ul .mean-expand.mean-clicked::before {
  transform: translateY(-50%) rotate(180deg);
  color: #FF5562 !important;
}
.mean-container .mean-nav ul {
  padding: 0;
  margin: 0;
  width: 100%;
  list-style-type: none;
}
.mean-container .mean-nav ul li {
  position: relative;
  float: left;
  width: 100%;
  border-top: 1px solid #E0E0E0;
}
.mean-container .mean-nav ul li:first-child {
  border-top: 0 !important;
}
.mean-container .mean-nav ul li.mean-last {
  border-bottom: none;
  margin-bottom: 0;
}
.mean-container .mean-nav ul li > a:hover {
  color: var(--bd-primary);
}
.mean-container .mean-nav ul li a, .mean-container .mean-nav ul li span {
  display: block;
  float: left;
  width: 90%;
  padding: 10px 5%;
  margin: 0;
  text-align: left;
  text-decoration: none;
  text-transform: capitalize;
  width: 100%;
  padding: 12px 0;
  color: var(--bd-black);
  font-size: 16px;
  line-height: 1.5;
  font-weight: 500;
}
@media only screen and (min-width: 768px) {
  .mean-container .mean-nav ul li a, .mean-container .mean-nav ul li span {
    padding: 16px 0;
  }
}
.mean-container .mean-nav ul li li:first-child {
  border-top: 1px solid #E0E0E0 !important;
}
.mean-container .mean-nav ul li li a {
  width: 90%;
  padding: 10px 7%;
  text-shadow: none !important;
  visibility: visible;
  position: relative;
  font-size: 16px;
  font-weight: 400;
  color: var(--bd-black);
}
.mean-container .mean-nav ul li li a:hover::before {
  background-color: var(--bd-primary);
}
.mean-container .mean-nav ul li li a::before {
  position: absolute;
  height: 1px;
  width: 10px;
  background-color: var(--bd-black);
  left: 7px;
  top: 50%;
  transform: translateY(-50%);
  content: "";
}
.mean-container .mean-nav ul li li li a {
  width: 80%;
  padding: 10px 12%;
}
.mean-container .mean-nav ul li li li li a {
  width: 70%;
  padding: 10px 17%;
}
.mean-container .mean-nav ul li li li li li a {
  width: 60%;
  padding: 10px 20%;
}
.mean-container .mean-bar {
  padding: 0;
  min-height: auto;
  background: none;
  float: left;
  width: 100%;
  position: relative;
  padding: 4px 0;
  min-height: 42px;
  z-index: 999999;
}
@media (max-width: 575px) {
  .mean-container .mean-bar {
    width: 100%;
  }
}
.mean-container .mean-bar, .mean-container .mean-bar * {
  /* Fix for box sizing on Foundation Framework etc. */
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

/*----------------------------------------*/
/*  6.1 Footer Style 1
/*----------------------------------------*/
.footer-area {
  position: relative;
  background-color: #E4FAFF;
  margin-top: 40px;
  padding-bottom: 40px;
  padding-top: 60px;
}
@media only screen and (min-width: 576px) {
  .footer-area {
    margin-top: 90px;
    padding-bottom: 80px;
  }
}
@media only screen and (min-width: 768px) {
  .footer-area {
    padding-bottom: 80px;
    padding-top: 0;
  }
}
@media only screen and (min-width: 992px) {
  .footer-area {
    padding-top: 90px;
    padding-bottom: 110px;
  }
}
@media only screen and (min-width: 1200px) {
  .footer-area {
    padding-bottom: 140px;
  }
}
@media only screen and (min-width: 1400px) {
  .footer-area {
    margin-top: 140px;
  }
}
.footer-area .footer-sun {
  position: absolute;
  left: 30px;
  top: -60px;
  animation: 10s rotateScale infinite;
}
@media only screen and (min-width: 768px) {
  .footer-area .footer-sun {
    top: -76px;
  }
}
@media only screen and (min-width: 1200px) {
  .footer-area .footer-sun {
    left: 270px;
    top: -135px;
  }
}
.footer-area .footer-shape1 {
  position: absolute;
  left: 0px;
  bottom: 155px;
  display: none;
}
@media only screen and (min-width: 1600px) {
  .footer-area .footer-shape1 {
    display: block;
  }
}
.footer-area .footer-shape1 img {
  width: 135px;
}
.footer-area .footer-shape2 {
  position: absolute;
  right: 200px;
  top: -20px;
}
.footer-area .footer-shape3 {
  position: absolute;
  right: 85px;
  bottom: 65px;
}
@media only screen and (min-width: 768px) {
  .footer-area .footer-shape3 {
    bottom: 50px;
    width: 70px;
  }
}
@media only screen and (min-width: 992px) {
  .footer-area .footer-shape3 {
    bottom: 65px;
    width: inherit;
  }
}
@media only screen and (min-width: 1400px) {
  .footer-area .footer-shape3 {
    width: 70px;
  }
}
@media only screen and (min-width: 1600px) {
  .footer-area .footer-shape3 {
    width: inherit;
  }
}
.footer-area .footer-shape4 {
  position: absolute;
  right: 0px;
  bottom: 0;
  animation-duration: 20s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-name: slideRight;
  width: 35px;
}
@media only screen and (min-width: 768px) {
  .footer-area .footer-shape4 {
    right: 190px;
    width: 55px;
  }
}
@media only screen and (min-width: 992px) {
  .footer-area .footer-shape4 {
    width: 80px;
  }
}
@media only screen and (min-width: 1200px) {
  .footer-area .footer-shape4 {
    width: inherit;
  }
}
@media only screen and (min-width: 1400px) {
  .footer-area .footer-shape4 {
    right: 390px;
  }
}
@media only screen and (min-width: 1600px) {
  .footer-area .footer-shape4 {
    right: 990px;
  }
}
.footer-area .footer-shape {
  position: absolute;
  top: -28px;
  left: 0;
  right: 0;
  z-index: -1;
}
@media only screen and (min-width: 576px) {
  .footer-area .footer-shape {
    top: -45px;
  }
}
@media only screen and (min-width: 768px) {
  .footer-area .footer-shape {
    top: -50px;
  }
}
@media only screen and (min-width: 1200px) {
  .footer-area .footer-shape {
    top: -90px;
  }
}
@media only screen and (min-width: 1400px) {
  .footer-area .footer-shape {
    top: -105px;
  }
}
@media only screen and (min-width: 1600px) {
  .footer-area .footer-shape {
    top: -120px;
  }
}
.footer-area .footer-shape-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
.footer-area .footer-shape-bottom img {
  width: 100%;
}

.wave {
  height: auto;
  width: 100%;
}

.social-icon {
  display: flex;
  align-items: center;
  gap: 10px;
}
.social-icon li a {
  height: 40px;
  width: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bd-white);
  background-color: var(--color);
  border-radius: 41% 59% 49% 51%/54% 50% 50% 46%;
}
.social-icon li a:hover {
  background-color: var(--bd-primary);
}

.footer-widget-1 {
  max-width: 380px;
  margin: auto;
  text-align: center;
}
@media only screen and (min-width: 992px) {
  .footer-widget-1 {
    max-width: 100%;
    text-align: start;
  }
}

.footer-widget .footer-logo {
  margin-bottom: 30px;
}
.footer-widget .social-icon {
  justify-content: center;
}
@media only screen and (min-width: 992px) {
  .footer-widget .social-icon {
    justify-content: start;
  }
}
.footer-widget p {
  margin-bottom: 0;
}

.footer-widget-1 p {
  margin-bottom: 30px;
}

.widget-title {
  position: relative;
  padding-bottom: 25px;
  margin-bottom: 25px;
}
@media (max-width: 575px) {
  .widget-title {
    padding-bottom: 20px;
    margin-bottom: 20px;
    font-size: 18px;
  }
}
.widget-title::before {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
  height: 3px;
  width: 30px;
  background-color: var(--color);
}

.footer-link ul li:not(:last-child) {
  margin-bottom: 15px;
}
.footer-link ul li a {
  color: var(--bd-text-body);
  position: relative;
  padding-left: 20px;
}
@media (max-width: 575px) {
  .footer-link ul li a {
    font-size: 15px;
    padding-left: 18px;
  }
}
.footer-link ul li a:hover::before {
  background-color: var(--bd-primary);
}
.footer-link ul li a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 12px;
  height: 12px;
  background-color: var(--bd-white);
  border: 1px solid #222429;
  border-radius: 41% 59% 49% 51%/54% 50% 50% 46%;
}

.footer-input-field {
  position: relative;
  margin-bottom: 25px;
}
.footer-input-field input {
  background-color: var(--bd-white);
  padding-left: 15px;
  padding-right: 85px;
  border-radius: 7px;
  height: 45px;
  color: var(--bd-text-body);
  font-size: 15px;
  border: 1px solid transparent;
}
.footer-input-field input:focus {
  border-color: #18E2E2;
}
.footer-input-field input::placeholder, .footer-input-field input:-moz-placeholder {
  color: var(--bd-text-body);
  font-size: 15px;
}
.footer-input-field .input-btn {
  position: absolute;
  height: 100%;
  top: 0;
  right: 0;
  width: 18%;
  border-radius: 0px 7px 7px 0;
  background-color: #18E2E2;
  color: var(--bd-white);
}
.footer-input-field .input-btn:hover {
  background-color: var(--bd-primary);
}

.footer-three-top {
  padding-bottom: 20px;
}
@media only screen and (min-width: 576px) {
  .footer-three-top {
    padding-bottom: 50px;
  }
}
@media only screen and (min-width: 1200px) {
  .footer-three-top {
    padding-bottom: 90px;
  }
}
.footer-three-top .footer-input-field input {
  background-color: #F8F8F8;
  border: 1px solid transparent;
}
.footer-three-top .footer-input-field input:focus {
  border-color: #18E2E2;
}

/*----------------------------------------*/
/*  6.2 Footer Style 2
/*----------------------------------------*/
.footer-style-two {
  position: relative;
  background-color: #FFF6D6;
  padding-top: 80px;
  z-index: 1;
}
@media only screen and (min-width: 576px) {
  .footer-style-two {
    padding-top: 100px;
  }
}
@media only screen and (min-width: 992px) {
  .footer-style-two {
    padding-top: 160px;
  }
}
@media only screen and (min-width: 1200px) {
  .footer-style-two {
    padding-top: 200px;
  }
}
.footer-style-two .cat {
  position: absolute;
  left: 0;
  top: 50%;
  display: none;
}
@media only screen and (min-width: 1600px) {
  .footer-style-two .cat {
    display: block;
  }
}
.footer-style-two .flowers {
  position: absolute;
  right: 28%;
  bottom: 85px;
  z-index: 2;
  display: none;
}
@media only screen and (min-width: 992px) {
  .footer-style-two .flowers {
    display: block;
  }
}
@media only screen and (min-width: 1400px) {
  .footer-style-two .flowers {
    bottom: 120px;
  }
}
@media only screen and (min-width: 1600px) {
  .footer-style-two .flowers {
    bottom: 165px;
  }
}
.footer-style-two .fly {
  position: absolute;
  right: 6%;
  bottom: 180px;
  z-index: 2;
  display: none;
}
@media only screen and (min-width: 992px) {
  .footer-style-two .fly {
    display: block;
  }
}
@media only screen and (min-width: 1400px) {
  .footer-style-two .fly {
    bottom: 120px;
  }
}
@media only screen and (min-width: 1600px) {
  .footer-style-two .fly {
    bottom: 180px;
  }
}
.footer-style-two .footer-shape2 {
  position: absolute;
  right: 7%;
  top: 175px;
  z-index: 2;
  display: none;
}
@media only screen and (min-width: 1200px) {
  .footer-style-two .footer-shape2 {
    display: block;
  }
}
@media only screen and (min-width: 1400px) {
  .footer-style-two .footer-shape2 {
    top: 125px;
  }
}
@media only screen and (min-width: 1600px) {
  .footer-style-two .footer-shape2 {
    top: 175px;
  }
}
.footer-style-two .footer-shape-peopole {
  position: absolute;
  left: 160px;
  bottom: 0;
  display: none;
  width: 170px;
}
@media only screen and (min-width: 1200px) {
  .footer-style-two .footer-shape-peopole {
    display: block;
  }
}
@media only screen and (min-width: 1400px) {
  .footer-style-two .footer-shape-peopole {
    width: inherit;
  }
}
.footer-style-two .footer-top {
  padding-bottom: 80px;
}
@media only screen and (min-width: 768px) {
  .footer-style-two .footer-top {
    padding-bottom: 100px;
  }
}
@media only screen and (min-width: 992px) {
  .footer-style-two .footer-top {
    padding-bottom: 140px;
  }
}
@media only screen and (min-width: 1400px) {
  .footer-style-two .footer-top {
    padding-bottom: 220px;
  }
}
@media only screen and (min-width: 1600px) {
  .footer-style-two .footer-top {
    padding-bottom: 300px;
  }
}
.footer-style-two .footer-shape-top {
  position: absolute;
  top: -2px;
  left: 0;
  right: 0;
  z-index: -1;
}
.footer-style-two .footer-shape-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
}

.footer-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.footer-gallery .footer-img {
  flex: 0 0 auto;
  border-radius: 5px;
  overflow: hidden;
}

.footer-copyright {
  margin-bottom: 40px;
}

/*----------------------------------------*/
/*  8.1 About css
/*----------------------------------------*/
.about-area {
  background-color: #E9F9FD;
  position: relative;
  padding: 100px 0;
  margin-top: 80px;
  z-index: 1;
}
@media only screen and (min-width: 768px) {
  .about-area {
    padding: 140px 0;
  }
}
@media only screen and (min-width: 992px) {
  .about-area {
    margin-top: 100px;
    padding: 170px 0;
  }
}
@media only screen and (min-width: 1200px) {
  .about-area {
    margin-top: 140px;
    padding: 200px 0;
  }
}
@media only screen and (min-width: 1400px) {
  .about-area {
    margin-top: 140px;
    padding: 310px 0;
  }
}
.about-area .container {
  position: relative;
  z-index: 2;
}
.about-area .about-shape1 {
  position: absolute;
  left: 30px;
  top: 120px;
  z-index: 1;
}
.about-area .about-shape2 {
  position: absolute;
  right: 80px;
  top: -70px;
  z-index: 1;
}
@media only screen and (min-width: 992px) {
  .about-area .about-shape2 {
    top: 0px;
  }
}
@media only screen and (min-width: 1200px) {
  .about-area .about-shape2 {
    top: 30px;
  }
}
@media only screen and (min-width: 1400px) {
  .about-area .about-shape2 {
    top: 180px;
  }
}
.about-area .about-shape3 {
  position: absolute;
  right: 80px;
  bottom: 50px;
  z-index: 1;
  width: 100px;
  animation-delay: 2s;
}
@media only screen and (min-width: 992px) {
  .about-area .about-shape3 {
    width: 110px;
  }
}
@media only screen and (min-width: 1200px) {
  .about-area .about-shape3 {
    width: 140px;
    bottom: 100px;
  }
}
@media only screen and (min-width: 1400px) {
  .about-area .about-shape3 {
    width: initial;
  }
}
.about-area .wave-top {
  position: absolute;
  width: 100%;
  left: 0;
  right: 0;
  top: -2px;
  z-index: 1;
}
.about-area .wave-bottom {
  position: absolute;
  width: 100%;
  left: 0;
  right: 0;
  bottom: -2px;
  z-index: 1;
}

.about-img {
  position: relative;
  margin-right: 0px;
  background-color: #31C9A8;
  -webkit-mask-image: url(../imgs/shape/mask1.png);
  -webkit-mask-size: 95%;
  -webkit-mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  z-index: 3;
}
@media only screen and (min-width: 768px) {
  .about-img {
    max-width: 480px;
    margin: auto;
  }
}
.about-img img {
  -webkit-mask-image: url(../imgs/shape/mask1.png);
  -webkit-mask-size: 86%;
  -webkit-mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  width: 100%;
}

.about-content {
  max-width: 655px;
}
@media only screen and (min-width: 1200px) {
  .about-content {
    padding-left: 75px;
    margin-right: 50px;
  }
}
.about-content .title-wrapper {
  margin-bottom: 0;
}
.about-content .section-title {
  margin-bottom: 15px;
}
.about-content p {
  margin-bottom: 40px;
}

.about-list {
  margin-bottom: 50px;
}
.about-list ul li {
  position: relative;
  padding-left: 45px;
  color: var(--bd-text-body);
}
.about-list ul li:not(:last-child) {
  margin-bottom: 25px;
}
.about-list ul li::before {
  position: absolute;
  left: -3px;
  font-size: 15px;
  top: 15px;
  transform: translateY(-50%);
  content: "\f00c";
  font-family: var(--bd-ff-fontawesome);
  font-weight: 700;
  background-color: var(--color);
  color: var(--bd-white);
  padding: 6px 11px;
  border-radius: 50% 50% 58% 42%/50% 36% 64% 50%;
}

.about-style-two {
  position: relative;
  z-index: 1;
}
.about-style-two .giraffe {
  position: absolute;
  right: 30px;
  bottom: 0;
  display: none;
}
@media only screen and (min-width: 1200px) {
  .about-style-two .giraffe {
    width: 80px;
  }
}
@media only screen and (min-width: 1400px) {
  .about-style-two .giraffe {
    display: block;
    width: 100px;
  }
}
@media only screen and (min-width: 1600px) {
  .about-style-two .giraffe {
    width: inherit;
  }
}
.about-style-two .title-wrapper-two {
  text-align: start;
}

.about-thumb {
  position: relative;
  max-width: 420px;
}
@media only screen and (min-width: 768px) {
  .about-thumb {
    margin: auto;
  }
}
@media only screen and (min-width: 992px) {
  .about-thumb {
    margin: inherit;
  }
}
.about-thumb .giraffe-small {
  position: absolute;
  right: -100px;
  top: 50px;
  animation: vibrate 2s infinite;
}
@media only screen and (min-width: 992px) {
  .about-thumb .giraffe-small {
    right: -65px;
    top: 0px;
  }
}
@media only screen and (min-width: 1400px) {
  .about-thumb .giraffe-small {
    right: -165px;
    top: 50px;
  }
}
.about-thumb .giraffe-small img {
  width: 80px;
  transform: rotate(-12deg);
}
@media only screen and (min-width: 1400px) {
  .about-thumb .giraffe-small img {
    width: 150px;
  }
}
.about-thumb .img {
  position: relative;
}
.about-thumb .img img {
  border-radius: 53% 47% 44% 56%/60% 60% 40% 40%;
  width: 100%;
  animation: img-border 5s linear infinite alternate;
  transition: all 0.3s ease-out 0s;
}
.about-thumb .img::before {
  position: absolute;
  content: "";
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 103%;
  width: 103%;
  background-color: #9E2FF5;
  border-radius: 53% 47% 44% 56%/60% 60% 40% 40%;
  z-index: -1;
  animation: img-border 5s linear infinite alternate;
  transition: all 0.3s ease-out 0s;
  animation-delay: 1s;
}
.about-thumb .img2 {
  max-width: 150px;
  position: absolute;
  right: 0;
  bottom: -20px;
  z-index: 2;
}
@media only screen and (min-width: 576px) {
  .about-thumb .img2 {
    right: -100px;
  }
}
@media only screen and (min-width: 992px) {
  .about-thumb .img2 {
    right: 0;
  }
}
@media only screen and (min-width: 1200px) {
  .about-thumb .img2 {
    right: -50px;
  }
}
@media only screen and (min-width: 1400px) {
  .about-thumb .img2 {
    right: -100px;
  }
}
.about-thumb .img2 img {
  animation-delay: 1s;
}
.about-thumb .img2::before {
  position: absolute;
  content: "";
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 105%;
  width: 105%;
  background-color: #FD5C37;
  border-radius: 53% 47% 44% 56%/60% 60% 40% 40%;
  z-index: -1;
  animation: img-border 5s linear infinite alternate;
  transition: all 0.3s ease-out 0s;
  animation-delay: 2s;
}

@media only screen and (min-width: 992px) {
  .about-two-content {
    max-width: 560px;
    margin-left: 60px;
  }
}
.about-two-content .title-wrapper-two {
  margin-bottom: 0;
}
.about-two-content .title-wrapper-two p:last-child {
  margin-bottom: 50px;
}

.counter-inner {
  max-width: 200px;
  flex: 0 0 auto;
}
.counter-inner h3 {
  font-size: 40px;
  color: var(--color);
  margin-bottom: 15px;
}
@media only screen and (min-width: 576px) {
  .counter-inner h3 {
    font-size: 30px;
    margin-bottom: 10px;
  }
}
@media only screen and (min-width: 768px) {
  .counter-inner h3 {
    font-size: 40px;
    margin-bottom: 15px;
  }
}
.counter-inner p {
  font-size: 16px;
  margin-bottom: 0;
}

.about-counter-wrapper {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
@media only screen and (min-width: 576px) {
  .about-counter-wrapper {
    justify-content: space-between;
    flex-direction: row;
  }
}

.title-wrapper-two {
  margin-bottom: 50px;
}

.call-to-action {
  background: center/cover no-repeat;
  position: relative;
  margin-bottom: 100px;
  padding: 80px 0;
  z-index: 1;
}
@media only screen and (min-width: 992px) {
  .call-to-action {
    padding: 120px 0;
  }
}
@media only screen and (min-width: 1400px) {
  .call-to-action {
    padding: 200px 0;
  }
}
@media only screen and (min-width: 1600px) {
  .call-to-action {
    padding: 250px 0;
  }
}
.call-to-action .container-fluid {
  max-width: 1820px;
}
.call-to-action .call-to-action-shape-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -20px;
}
@media only screen and (min-width: 768px) {
  .call-to-action .call-to-action-shape-bottom {
    bottom: -30px;
  }
}
@media only screen and (min-width: 992px) {
  .call-to-action .call-to-action-shape-bottom {
    bottom: -40px;
  }
}
@media only screen and (min-width: 1200px) {
  .call-to-action .call-to-action-shape-bottom {
    bottom: -50px;
  }
}
@media only screen and (min-width: 1400px) {
  .call-to-action .call-to-action-shape-bottom {
    bottom: -70px;
  }
}
.call-to-action .call-to-action-shape-bottom svg {
  height: auto;
  width: 100%;
}
.call-to-action .service-shape-bottom {
  position: absolute;
  left: 0;
  top: -1px;
  right: 0;
  z-index: 1;
}
.call-to-action .service-shape-bottom img {
  width: 100%;
}

.action-content {
  padding: 30px 20px;
  text-align: center;
  border-radius: 50%;
  background-color: var(--bd-white);
  max-width: 540px;
  position: relative;
  margin: auto;
}
@media only screen and (min-width: 1200px) {
  .action-content {
    margin: 0 0 0 auto;
    max-width: 740px;
    padding: 60px 30px;
  }
}
@media only screen and (min-width: 1600px) {
  .action-content {
    padding: 110px 130px;
  }
}
.action-content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  background-color: #FD5C37;
  z-index: -1;
  animation: borderRotate 3s linear infinite alternate;
}
.action-content h2 {
  font-size: 28px;
  margin-bottom: 30px;
}
@media only screen and (min-width: 576px) {
  .action-content h2 {
    font-size: 38px;
  }
}
@media only screen and (min-width: 1200px) {
  .action-content h2 {
    font-size: 48px;
  }
}
@media only screen and (min-width: 1400px) {
  .action-content h2 {
    font-size: 58px;
  }
}

.action-icon {
  text-align: end;
  padding-right: 85px;
}
@media only screen and (min-width: 576px) {
  .action-icon {
    padding-right: 140px;
  }
}
@media only screen and (min-width: 992px) {
  .action-icon {
    padding-right: 85px;
  }
}
.action-icon img {
  width: 50px;
}
@media only screen and (min-width: 1200px) {
  .action-icon img {
    width: inherit;
  }
}

.vision-right-thumb {
  text-align: center;
}
@media only screen and (min-width: 1200px) {
  .vision-right-thumb {
    text-align: end;
  }
}

.video-img {
  position: relative;
}
.video-img .video-btn {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.video-img img {
  width: 100%;
  clip-path: url(#videoMask);
}

/*----------------------------------------*/
/*  8.2 Blog css
/*----------------------------------------*/
.blog-item {
  max-width: 400px;
  margin: auto;
}
@media only screen and (min-width: 576px) {
  .blog-item {
    max-width: 100%;
  }
}
.blog-item:hover img {
  transform: scale(1.05);
}
.blog-item .blog-thumb {
  position: relative;
  padding: 15px 0;
  margin-bottom: 25px;
}
.blog-item .blog-thumb .post-date {
  position: absolute;
  left: 30px;
  bottom: 0;
}
@media only screen and (min-width: 768px) {
  .blog-item .blog-thumb .post-date {
    left: 60px;
  }
}
.blog-item .blog-thumb::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  -webkit-mask-image: url(../imgs/shape/blog-mask2.png);
  -webkit-mask-size: 95%;
  -webkit-mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  background-color: var(--color);
}
.blog-item .blog-thumb img {
  width: 100%;
  -webkit-mask-image: url(../imgs/shape/blog-img-mask.png);
  -webkit-mask-size: 95%;
  -webkit-mask-position: center center;
  -webkit-mask-repeat: no-repeat;
}
.blog-item p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media only screen and (min-width: 768px) {
  .blog-item p {
    -webkit-line-clamp: 3;
  }
}

.post-date {
  text-align: center;
  padding: 15px 18px;
  background-color: var(--bd-white);
  line-height: 1;
  font-weight: 600;
  font-size: 25px;
  font-family: var(--bd-ff-heading);
  color: var(--color);
  clip-path: polygon(0 8%, 100% 0, 100% 100%, 0% 100%);
}
@media only screen and (min-width: 1200px) {
  .post-date {
    font-size: 40px;
    padding: 18px 21px;
  }
}
@media only screen and (min-width: 1400px) {
  .post-date {
    font-size: 45px;
  }
}
.post-date span {
  display: block;
  font-weight: 400;
  font-size: 16px;
  color: var(--bd-text-body);
  font-family: var(--bd-ff-body);
}
@media only screen and (min-width: 1200px) {
  .post-date span {
    font-size: 20px;
  }
}

.blog-title {
  margin-bottom: 10px;
  font-size: 20px;
}
@media only screen and (min-width: 1400px) {
  .blog-title {
    font-size: 26px;
  }
}
.blog-title a:hover {
  color: var(--color);
}

.blog-btn .theme-btn {
  background-color: var(--color);
}
.blog-btn .theme-btn:hover {
  background-color: var(--bd-primary);
}

.blog-style-two {
  position: relative;
  z-index: 1;
}
.blog-style-two .testimonial-line-bottom {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.blog-style-two .testimonial-line-bottom .flowers {
  position: absolute;
  left: 150px;
  top: -65px;
  display: none;
}
@media only screen and (min-width: 576px) {
  .blog-style-two .testimonial-line-bottom .flowers {
    display: block;
  }
}
.blog-style-two .testimonial-line-bottom .bird {
  position: absolute;
  right: 60px;
  top: -55px;
}
@media only screen and (min-width: 992px) {
  .blog-style-two .testimonial-line-bottom .bird {
    top: -20px;
  }
}
@media only screen and (min-width: 1400px) {
  .blog-style-two .testimonial-line-bottom .bird {
    right: 380px;
    top: -48px;
  }
}
@media only screen and (min-width: 1600px) {
  .blog-style-two .testimonial-line-bottom .bird {
    top: -40px;
  }
}
.blog-style-two .sub-title-two {
  padding: 7px 45px;
}

.single-post {
  max-width: 400px;
  margin: auto;
}
.single-post:hover .post-thumb img {
  transform: rotate(0);
}

.post-thumb {
  position: relative;
  border-radius: 16px;
  margin-bottom: 30px;
}
.post-thumb img {
  border-radius: 16px;
  transform: rotate(6deg);
  width: 100%;
}
.post-thumb::before {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  border: 3px solid var(--color);
  left: 0;
  top: 0;
  border-radius: 16px;
}

.post-content span {
  font-size: 17px;
  color: var(--color);
  display: inline-block;
  margin-bottom: 10px;
}
.post-content p {
  margin-bottom: 20px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-title {
  margin-bottom: 15px;
  font-size: 22px;
}
@media only screen and (min-width: 576px) {
  .post-title {
    font-size: 20px;
  }
}
@media only screen and (min-width: 768px) {
  .post-title {
    font-size: 22px;
  }
}
@media only screen and (min-width: 1400px) {
  .post-title {
    font-size: 26px;
  }
}
.post-title a:hover {
  color: var(--color);
}

.post-btn a {
  color: var(--color);
  display: inline-block;
  position: relative;
}
.post-btn a:hover {
  padding-left: 30px;
}
.post-btn a:hover::before {
  width: 0;
}
.post-btn a:hover::after {
  width: 25px;
}
.post-btn a::before {
  position: absolute;
  content: "";
  height: 2px;
  width: 25px;
  background-color: var(--bd-black);
  right: -30px;
  top: 14px;
  transition: 0.3s;
}
.post-btn a::after {
  position: absolute;
  content: "";
  height: 2px;
  width: 0;
  background-color: var(--color);
  left: 0;
  top: 14px;
  transition: 0.3s;
}

.blog-style-three {
  position: relative;
  background-color: #C5EBFC;
}
.blog-style-three .shape-top {
  position: absolute;
  left: 0;
  top: -15px;
  right: 0;
}
@media only screen and (min-width: 1600px) {
  .blog-style-three .shape-top {
    top: 0;
  }
}
.blog-style-three .shape-top img {
  width: 100%;
}
.blog-style-three .shape-bottom {
  position: absolute;
  left: 0;
  bottom: -10px;
  right: 0;
}
@media only screen and (min-width: 1400px) {
  .blog-style-three .shape-bottom {
    bottom: 0;
  }
}
.blog-style-three .shape-bottom img {
  width: 100%;
}

.single-blog {
  clip-path: url(#item-clip);
}

.post-img {
  border-radius: 15px;
  position: relative;
}
.post-img img {
  width: 100%;
}
.post-img .blog-post-date {
  position: absolute;
  z-index: 2;
  padding: 12px 21px;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 30px;
  text-align: center;
  color: var(--color);
  font-weight: 600;
  line-height: 1;
  border-radius: 8px;
  background-color: var(--bd-white);
  clip-path: url(#item-clip);
}
@media only screen and (min-width: 1200px) {
  .post-img .blog-post-date {
    font-size: 40px;
  }
}
.post-img .blog-post-date span {
  display: block;
  font-weight: 400;
  color: var(--bd-text-body);
  font-size: 20px;
}
@media only screen and (min-width: 1200px) {
  .post-img .blog-post-date span {
    font-size: 24px;
  }
}

.single-post-content {
  padding: 90px 30px 40px 30px;
  padding-top: 80px;
  margin-top: -70px;
  background-color: var(--color);
  border-radius: 15px;
  clip-path: url(#details-clip);
  position: relative;
}
@media only screen and (min-width: 992px) {
  .single-post-content {
    padding: 20px;
    padding-top: 80px;
  }
}
@media only screen and (min-width: 1200px) {
  .single-post-content {
    padding: 90px 30px 40px 30px;
    padding-top: 80px;
  }
}
.single-post-content .blog-icon {
  position: absolute;
  right: 15px;
  bottom: 15px;
}
.single-post-content .blog-icon img {
  width: 90px;
}
@media only screen and (min-width: 576px) {
  .single-post-content .blog-icon img {
    width: 120px;
  }
}
@media only screen and (min-width: 768px) {
  .single-post-content .blog-icon img {
    width: 90px;
  }
}
@media only screen and (min-width: 1200px) {
  .single-post-content .blog-icon img {
    width: 120px;
  }
}
.single-post-content .blog-title {
  color: var(--bd-white);
  margin-bottom: 15px;
}
.single-post-content .blog-title a {
  background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff);
  display: inline;
  background-size: 0% 1px, 0 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.4s linear;
}
.single-post-content .blog-title a:hover {
  color: inherit;
  background-size: 0 1px, 100% 1px;
}
.single-post-content p {
  color: var(--bd-white);
  margin-bottom: 15px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.single-blog {
  overflow: hidden;
  max-width: 400px;
  margin: auto;
}
.single-blog:hover .post-img img {
  transform: scale(1.1) rotate(5deg);
}

.blog-btn-two .red-more-btn {
  margin-left: -20px;
  color: var(--bd-white);
}
.blog-btn-two .red-more-btn:hover {
  color: var(--bd-black);
  margin-left: 0;
}
.blog-btn-two .red-more-btn::before {
  background-color: rgba(255, 255, 255, 0.6);
}

.blog-list-wrapper .blog-list-single:not(:last-child) {
  margin-bottom: 50px;
}
@media only screen and (min-width: 1200px) {
  .blog-list-wrapper .blog-list-single:not(:last-child) {
    margin-bottom: 70px;
  }
}
@media only screen and (min-width: 1400px) {
  .blog-list-wrapper .blog-list-single:not(:last-child) {
    margin-bottom: 100px;
  }
}

.blog-list-title {
  margin-bottom: 15px;
  font-size: 26px;
}
@media only screen and (min-width: 576px) {
  .blog-list-title {
    font-size: 28px;
  }
}
@media only screen and (min-width: 768px) {
  .blog-list-title {
    font-size: 30px;
  }
}
@media only screen and (min-width: 1200px) {
  .blog-list-title {
    font-size: 35px;
  }
}
@media only screen and (min-width: 1400px) {
  .blog-list-title {
    font-size: 38px;
  }
}
.blog-list-title a:hover {
  color: var(--bg-color);
}

.blog-list-thumb {
  overflow: hidden;
  border-radius: 20px;
  margin-bottom: 25px;
  position: relative;
}
.blog-list-thumb:hover img {
  transform: scale(1.05);
}
.blog-list-thumb .post-date {
  position: absolute;
  left: 40px;
  bottom: 0;
  color: var(--bd-white);
  background-color: var(--bg-color);
}
.blog-list-thumb .post-date span {
  color: var(--bd-white);
}

@media only screen and (min-width: 1200px) {
  .blog-list-wrapper {
    padding-right: 20px;
  }
}

.list-btn .theme-btn {
  background-color: var(--bg-color);
}

.sidebar-widget:not(:last-child) {
  margin-bottom: 50px;
}
@media only screen and (min-width: 1400px) {
  .sidebar-widget:not(:last-child) {
    margin-bottom: 70px;
  }
}

.sidebar-search {
  position: relative;
  margin-bottom: 20px;
}
@media only screen and (min-width: 992px) {
  .sidebar-search {
    margin-bottom: 55px;
  }
}
.sidebar-search input {
  height: 60px;
  border-radius: 8px;
  padding-right: 85px;
  border: 1px solid #E0E0E0;
}
@media only screen and (min-width: 1200px) {
  .sidebar-search input {
    height: 70px;
  }
}
.sidebar-search input:focus {
  border-color: var(--bd-primary);
}
.sidebar-search input::placeholder {
  color: var(--bd-text-body);
}
.sidebar-search input::-moz-placeholder {
  color: var(--bd-text-body);
}
.sidebar-search button {
  position: absolute;
  color: var(--bd-black);
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
}
.sidebar-search button:hover {
  color: var(--bd-primary);
}

.sidebar-widget-title {
  margin-bottom: 30px;
}

.categories-list li {
  padding: 13px 25px;
  color: var(--bd-text-body);
  display: flex;
  justify-content: space-between;
  background-color: #E9F9FD;
}
.categories-list li:hover a {
  color: var(--bd-primary);
}
.categories-list li:first-child {
  border-radius: 8px 8px 0px 0px;
}
.categories-list li:last-child {
  border-radius: 0px 0px 8px 8px;
}
.categories-list li:nth-child(2n) {
  background-color: #F3FFFC;
}
.categories-list li span {
  font-size: 16px;
}

.sidebar-post {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #E0E0E0;
}
.sidebar-post:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border: 0;
}
.sidebar-post .sidebar-post-img {
  overflow: hidden;
  border-radius: 29% 71% 65% 35%/58% 51% 49% 42%;
  flex: 0 0 auto;
}

.sidebar-post-content h6 {
  font-size: 18px;
  margin-bottom: 10px;
}
@media only screen and (min-width: 576px) {
  .sidebar-post-content h6 {
    font-size: 20px;
    margin-bottom: 15px;
  }
}
@media only screen and (min-width: 992px) {
  .sidebar-post-content h6 {
    font-size: 18px;
    margin-bottom: 10px;
  }
}
@media only screen and (min-width: 1200px) {
  .sidebar-post-content h6 {
    font-size: 20px;
    margin-bottom: 15px;
  }
}
.sidebar-post-content h6 a:hover {
  color: #FD5C37;
}
.sidebar-post-content .sidebar-post-date {
  font-size: 16px;
  color: var(--bd-text-body);
}
.sidebar-post-content .sidebar-post-date span {
  color: #FD5C37;
  margin-right: 20px;
}

.tags a {
  font-size: 16px;
  margin: 0 10px 15px 0;
  display: inline-block;
  padding: 8px 19px;
  border: 1px solid #E0E0E0;
  border-radius: 5px;
  color: var(--bd-text-body);
}
@media only screen and (min-width: 576px) {
  .tags a {
    padding: 11px 26px;
  }
}
.tags a:hover {
  background-color: var(--bd-primary);
  border-color: var(--bd-primary);
  color: var(--bd-white);
}

.subscribe-input-field {
  position: relative;
}
.subscribe-input-field input {
  height: 65px;
  font-size: 18px;
  padding-right: 90px;
  background-color: #F5F5F5;
  border: 1px solid transparent;
  border-radius: 7px;
}
.subscribe-input-field input:focus {
  border-color: #18E2E2;
}
.subscribe-input-field input::placeholder, .subscribe-input-field input:-moz-placeholder {
  color: var(--bd-text-body);
}
.subscribe-input-field .input-btn {
  position: absolute;
  height: 100%;
  top: 0;
  right: 0;
  width: 70px;
  background-color: #18E2E2;
  border-radius: 0px 7px 7px 0px;
  color: var(--bd-white);
}
.subscribe-input-field .input-btn:hover {
  background-color: var(--bd-primary);
}

@media only screen and (min-width: 1200px) {
  .blog-details-wrapper {
    padding-right: 20px;
  }
}
.blog-details-wrapper .blog-list-single {
  margin-bottom: 40px;
}
.blog-details-wrapper blockquote {
  background: center/cover no-repeat;
  padding: 25px 10px;
  position: relative;
  text-align: center;
  margin-bottom: 40px;
}
@media only screen and (min-width: 768px) {
  .blog-details-wrapper blockquote {
    padding: 50px 40px;
  }
}
@media only screen and (min-width: 992px) {
  .blog-details-wrapper blockquote {
    padding: 70px 120px;
  }
}
.blog-details-wrapper blockquote p {
  font-style: italic;
  color: var(--bd-black);
  margin-bottom: 0;
}
.blog-details-wrapper blockquote .quote-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.blog-tag-share {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  justify-content: space-between;
  padding: 15px;
  border-top: 1px solid #E0E0E0;
  border-bottom: 1px solid #E0E0E0;
  margin-bottom: 100px;
}
@media only screen and (min-width: 576px) {
  .blog-tag-share {
    flex-direction: row;
    padding: 20px;
  }
}
.blog-tag-share .tags a {
  margin-right: 2px;
  margin-bottom: 0;
  padding: 5px 10px;
}
@media only screen and (min-width: 576px) {
  .blog-tag-share .tags a {
    flex-direction: row;
  }
}
@media only screen and (min-width: 768px) {
  .blog-tag-share .tags a {
    padding: 11px 26px;
    margin-right: 5px;
  }
}

.blog-tag-right {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--bd-text-body);
}

.social-tag a {
  font-size: 16px;
  display: inline-block;
  margin-right: 5px;
  color: var(--bd-text-body);
}
.social-tag a:hover {
  color: var(--bd-primary);
}

.comment-title {
  margin-bottom: 30px;
}

.comment-thumb {
  height: 90px;
  width: 90px;
  flex: 0 0 auto;
  position: relative;
}
.comment-thumb::before {
  position: absolute;
  content: "";
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 110%;
  width: 110%;
  background-color: var(--color);
  border-radius: 53% 47% 49% 51%/60% 60% 40% 40%;
  z-index: -1;
}
.comment-thumb img {
  border-radius: 48% 52% 49% 51%/56% 57% 43% 44%;
}

.comment-single-inner {
  display: flex;
  gap: 25px;
}
@media (max-width: 575px) {
  .comment-single-inner {
    gap: 20px;
    flex-direction: column;
  }
}
.comment-single-inner:not(:last-child) {
  margin-bottom: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid #E0E0E0;
}
@media (max-width: 575px) {
  .comment-single-inner:not(:last-child) {
    margin-bottom: 30px;
    padding-bottom: 30px;
  }
}

.children {
  margin-left: 25px;
}
@media only screen and (min-width: 768px) {
  .children {
    margin-left: 35px;
  }
}
@media only screen and (min-width: 992px) {
  .children {
    margin-left: 40px;
  }
}
@media only screen and (min-width: 1200px) {
  .children {
    margin-left: 100px;
  }
}

.avata-details span {
  font-size: 15px;
  color: var(--bd-text-body);
}
.avata-details .comment-meta {
  margin-left: 10px;
}

.avata-content-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.reply-btn.collapsed {
  background-color: #F2F2F4;
  color: var(--bd-text-body);
}
.reply-btn.collapsed:hover {
  background-color: var(--bd-primary);
  color: var(--bd-white);
}

.reply-btn {
  font-size: 14px;
  padding: 5px 13px;
  background-color: var(--bd-primary);
  border-radius: 3px;
  color: var(--bd-white);
}

.reply-box {
  margin-top: 30px;
}
.reply-box textarea {
  height: 100px;
  padding: 15px 20px;
  border-radius: 7px;
  border: 1px solid #E0E0E0;
}
.reply-box textarea:focus {
  border-color: var(--bd-primary);
}
.reply-box textarea::placeholder, .reply-box textarea::-moz-placeholder {
  color: var(--bd-text-body);
}
.reply-box .comment_post-btn {
  font-size: 15px;
  padding: 5px 17px;
  border-radius: 5px;
  margin-top: 10px;
  border: 1px solid #E0E0E0;
}
.reply-box .comment_post-btn:hover {
  background-color: var(--bd-primary);
  border-color: var(--bd-primary);
  color: var(--bd-white);
}

.comment-text {
  font-size: 16px;
  margin-bottom: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.comment-form-wrapper {
  margin-top: 100px;
}

.comment-post-remember {
  margin-bottom: 40px;
  padding-top: 10px;
  max-width: 430px;
}
.comment-post-remember input[type=checkbox] {
  display: none;
}
.comment-post-remember input[type=checkbox]:checked ~ label::before {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  z-index: 5;
  border: 0;
  background-color: transparent;
}
.comment-post-remember input[type=checkbox]:checked ~ label::after {
  background-color: #18E2E2;
  border-color: #18E2E2 !important;
}
.comment-post-remember input[type=checkbox] ~ label {
  position: relative;
  font-size: 16px;
  color: var(--bd-text-body);
  padding-left: 30px;
}
.comment-post-remember input[type=checkbox] ~ label::after, .comment-post-remember input[type=checkbox] ~ label::before {
  position: absolute;
  content: "";
  font-family: "Font Awesome 6 Pro";
  left: 0;
  top: 3px;
  width: 20px;
  height: 20px;
  border: 1px solid #E0E0E0;
  border-radius: 3px;
  transition: 0.2s;
}
.comment-post-remember input[type=checkbox] ~ label::before {
  left: 5px;
  top: 4.5px;
  color: #fff;
  font-size: 12px;
  content: "\f00c";
  font-family: "Font Awesome 6 Pro";
  transform: scale(0);
}
.comment-post-remember input[type=checkbox] ~ label:hover {
  cursor: pointer;
}

/*----------------------------------------*/
/*  8.6 Contact css
/*----------------------------------------*/
.input-field {
  margin-bottom: 30px;
}
.input-field label {
  font-size: 16px;
  color: var(--bd-text-body);
  margin-bottom: 15px;
}
.input-field input {
  height: 55px;
  border: 1px solid #E0E0E0;
  border-radius: 10px;
  padding: 0 20px;
  font-size: 15px;
}
.input-field input:focus {
  border-color: var(--bd-primary);
}
.input-field input::placeholder {
  font-size: 15px;
  color: var(--bd-text-body);
}
.input-field input::-moz-placeholder {
  font-size: 15px;
  color: var(--bd-text-body);
}
.input-field textarea {
  border: 1px solid #E0E0E0;
  border-radius: 10px;
  height: 200px;
  padding: 20px;
  font-size: 15px;
}
.input-field textarea:focus {
  border-color: var(--bd-primary);
}
.input-field textarea::placeholder {
  font-size: 15px;
  color: var(--bd-text-body);
}
.input-field textarea::-moz-placeholder {
  font-size: 15px;
  color: var(--bd-text-body);
}

.contact-single-information {
  background-color: var(--bg-color);
  border-radius: 50% 50% 53% 47%/62% 62% 38% 38%;
  padding: 90px 30px;
  padding-bottom: 160px;
  text-align: center;
  position: relative;
  z-index: 1;
  margin: 0 15px;
}
@media only screen and (min-width: 576px) {
  .contact-single-information {
    padding: 90px 24px;
    padding-bottom: 150px;
    margin: 0;
  }
}
@media only screen and (min-width: 1400px) {
  .contact-single-information {
    padding: 120px 60px;
    padding-bottom: 185px;
    margin: 0 15px;
  }
}
.contact-single-information:hover .contact-icon {
  bottom: 15px;
}
.contact-single-information::before {
  position: absolute;
  content: "";
  top: 20px;
  left: 20px;
  right: 20px;
  bottom: 20px;
  background-color: #FDF8ED;
  z-index: 5;
  border-radius: 50%;
  z-index: -1;
  border-radius: 50% 50% 50% 50%/54% 57% 43% 46%;
}
.contact-single-information h5 {
  font-size: 22px;
  position: relative;
  padding-bottom: 15px;
  margin-bottom: 15px;
}
@media only screen and (min-width: 768px) {
  .contact-single-information h5 {
    font-size: 24px;
  }
}
.contact-single-information h5::before {
  position: absolute;
  content: "";
  left: 50%;
  bottom: 0px;
  transform: translateX(-50%);
  height: 3px;
  width: 30px;
  background-color: var(--bg-color);
}
.contact-single-information a {
  color: var(--bd-text-body);
  font-size: 16px;
}
@media only screen and (min-width: 768px) {
  .contact-single-information a {
    font-size: 18px;
  }
}
.contact-single-information a:hover {
  color: var(--bg-color);
}
.contact-single-information .contact-icon {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}

@media only screen and (min-width: 992px) {
  .contact-form-area {
    padding-bottom: 100px;
  }
}
@media only screen and (min-width: 1600px) {
  .contact-form-area {
    padding-bottom: 0px;
  }
}

.contact-img {
  margin-bottom: -50px;
  position: relative;
  z-index: -1;
}
@media only screen and (min-width: 576px) {
  .contact-img {
    margin-bottom: -90px;
  }
}
@media only screen and (min-width: 768px) {
  .contact-img {
    margin-bottom: -50px;
  }
}
@media only screen and (min-width: 992px) {
  .contact-img {
    margin-right: 0px;
    margin-bottom: 0;
  }
}
@media only screen and (min-width: 1600px) {
  .contact-img {
    margin-bottom: -75px;
  }
}
@media only screen and (min-width: 992px) {
  .contact-img img {
    max-width: 450px;
  }
}
@media only screen and (min-width: 1600px) {
  .contact-img img {
    max-width: 560px;
  }
}

/*----------------------------------------*/
/*  8.13 Service css
/*----------------------------------------*/
.service-area {
  background-color: #F6F1E4;
  position: relative;
  padding-top: 100px;
  padding-bottom: 60px;
  margin-top: 80px;
  z-index: 1;
}
@media only screen and (min-width: 768px) {
  .service-area {
    padding-top: 120px;
  }
}
@media only screen and (min-width: 992px) {
  .service-area {
    margin-top: 100px;
    padding-top: 180px;
  }
}
@media only screen and (min-width: 1200px) {
  .service-area {
    margin-top: 140px;
    padding-top: 200px;
  }
}
@media only screen and (min-width: 1400px) {
  .service-area {
    padding-top: 240px;
  }
}
@media only screen and (min-width: 1600px) {
  .service-area {
    padding-top: 300px;
  }
}
.service-area .container {
  position: relative;
  z-index: 2;
}
.service-area .service-shape-top {
  position: absolute;
  left: 0;
  top: -1px;
  right: 0;
  z-index: 1;
}
.service-area .service-shape-top img {
  width: 100%;
}

.service-icon {
  position: relative;
  height: 100px;
  width: 100px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color);
  border-radius: 55% 45% 55% 45%/50% 60% 40% 50%;
  margin-bottom: 25px;
}
.service-icon::before {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  border: 1px solid #282828;
  left: 10px;
  top: 0;
  border-radius: 55% 45% 55% 45%/50% 60% 40% 50%;
}

.service-single {
  background-color: var(--bd-white);
  border-radius: 15px;
  padding: 30px;
  text-align: center;
  max-width: 400px;
  margin: auto;
}
@media only screen and (min-width: 576px) {
  .service-single {
    padding: 20px;
  }
}
@media only screen and (min-width: 1200px) {
  .service-single {
    padding: 30px;
  }
}
@media only screen and (min-width: 1400px) {
  .service-single {
    padding: 60px 50px;
  }
}
.service-single:hover .service-icon img {
  -webkit-animation: gelatine 0.6s;
  animation: gelatine 0.6s;
}
.service-single h5 {
  font-size: 20px;
  margin-bottom: 15px;
}
@media only screen and (min-width: 992px) {
  .service-single h5 {
    font-size: 26px;
  }
}
.service-single p {
  font-size: 17px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.title-wrapper-two {
  text-align: center;
}

/*----------------------------------------*/
/*  8.17 Why Choose css
/*----------------------------------------*/
.choose-area {
  position: relative;
}
.choose-area .choose-shape {
  position: absolute;
  left: 0;
  top: 340px;
  display: none;
}
@media only screen and (min-width: 1600px) {
  .choose-area .choose-shape {
    display: block;
  }
}
.choose-area .choose-shape2 {
  position: absolute;
  right: 0;
  bottom: 30px;
  display: none;
}
@media only screen and (min-width: 1600px) {
  .choose-area .choose-shape2 {
    display: block;
  }
}
.choose-area .swiper-slide:nth-child(even) .single-item::before, .choose-area .swiper-slide:nth-child(even) .single-item::after {
  transform: skew(0deg, -2deg);
}

.choose-slider {
  padding: 20px 0;
  padding-bottom: 50px;
}

.single-item {
  text-align: center;
  padding: 50px 35px;
  position: relative;
  max-width: 400px;
  margin: auto;
}
@media only screen and (min-width: 576px) {
  .single-item {
    padding: 50px 30px;
  }
}
@media only screen and (min-width: 1200px) {
  .single-item {
    padding: 80px 48px;
  }
}
.single-item:hover .floating-img img {
  -webkit-animation: gelatine 0.6s;
  animation: gelatine 0.6s;
}
.single-item .floating-img {
  position: absolute;
  right: 0;
  bottom: -40px;
  max-width: 80px;
}
@media only screen and (min-width: 768px) {
  .single-item .floating-img {
    max-width: inherit;
  }
}
@media only screen and (min-width: 992px) {
  .single-item .floating-img {
    max-width: 80px;
  }
}
@media only screen and (min-width: 1200px) {
  .single-item .floating-img {
    max-width: inherit;
  }
}
.single-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 25px;
  transform: skew(0deg, 2deg);
  z-index: -1;
  background-color: var(--color);
}
.single-item::after {
  content: "";
  position: absolute;
  inset: 16px;
  border-radius: 25px;
  transform: skew(0deg, 2deg);
  z-index: -1;
  background-color: white;
}
@media only screen and (min-width: 1200px) {
  .single-item::after {
    inset: 16px;
  }
}
.single-item p {
  font-size: 17px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.single-item:hover .red-more-btn {
  color: var(--bd-white);
}
.single-item:hover .red-more-btn::before {
  width: 100%;
  height: 100%;
  bottom: 0;
  border-radius: 21px;
}

.item-title {
  font-size: 24px;
  margin-bottom: 35px;
  position: relative;
  z-index: 2;
}
@media only screen and (min-width: 576px) {
  .item-title {
    font-size: 22px;
  }
}
@media only screen and (min-width: 1200px) {
  .item-title {
    font-size: 26px;
  }
}
.item-title::before {
  position: absolute;
  content: "";
  height: 2px;
  width: 32px;
  background-color: var(--color);
  left: 50%;
  bottom: -20px;
  transition: 0.3s;
  z-index: -1;
  transform: translatex(-50%);
}

.red-more-btn {
  color: var(--bd-black);
  font-size: 16px;
  display: inline-block;
  position: relative;
  padding: 13px 25px;
  z-index: 2;
}
.red-more-btn::before {
  position: absolute;
  content: "";
  height: 5px;
  width: 65%;
  background-color: var(--color);
  left: 50%;
  bottom: 17px;
  transition: 0.3s;
  z-index: -1;
  transform: translatex(-50%);
}
.red-more-btn:hover {
  color: var(--bd-white);
}
.red-more-btn:hover::before {
  width: 100%;
  height: 100%;
  bottom: 0;
  border-radius: 21px;
}

.title-wrapper {
  margin-bottom: 40px;
}
@media only screen and (min-width: 768px) {
  .title-wrapper {
    margin-bottom: 50px;
  }
}

/*----------------------------------------*/
/*  8.5 Classes css
/*----------------------------------------*/
.classes-area {
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.classes-area .classes-shape {
  position: absolute;
  right: 90px;
  top: 100px;
  animation: rounded 5s linear infinite;
}
@media only screen and (min-width: 1600px) {
  .classes-area .classes-shape {
    right: 90px;
    top: 280px;
  }
}
.classes-area .classes-shape2 {
  position: absolute;
  left: 7px;
  bottom: 60px;
  display: none;
}
@media only screen and (min-width: 1600px) {
  .classes-area .classes-shape2 {
    display: block;
  }
}
.classes-area .swiper-wrapper {
  padding-top: 40px;
}

.classes_slider {
  padding-top: 20px;
}

.class-item {
  margin-top: 25px;
  max-width: 380px;
  margin: auto;
}
@media only screen and (min-width: 768px) {
  .class-item {
    max-width: 100%;
  }
}
.class-item .class-thumbnail {
  position: relative;
  padding: 0 32px;
}
.class-item .class-thumbnail::before, .class-item .class-thumbnail::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  border-top: 10px solid;
  border-radius: 25px;
  border-color: var(--border-color);
  z-index: 1;
}
.class-item .class-thumbnail::before {
  top: 0;
}
.class-item .class-thumbnail::after {
  bottom: 0;
}
.class-item .class-thumbnail .border-y {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}
.class-item .class-thumbnail .border-y::before, .class-item .class-thumbnail .border-y::after {
  content: "";
  position: absolute;
  top: 50%;
  bottom: 0;
  height: 100%;
  border-left: 10px solid;
  border-radius: 20px;
  transform: translateY(-50%);
  border-color: var(--border-color);
  transition: 0.3s;
}
.class-item .class-thumbnail .border-y::before {
  left: 23px;
  height: calc(100% + 110px);
}
.class-item .class-thumbnail .border-y::after {
  right: 23px;
  height: calc(100% + 80px);
}
.class-item .class-thumbnail .img-wrapper {
  overflow: hidden;
}
.class-item .class-thumbnail img {
  transition: all 0.4s linear;
  width: 100%;
}
.class-item:hover .class-thumbnail img {
  transform: scale(1.08) rotate(3deg);
}
.class-item:hover .border-y::before {
  height: calc(100% + 80px);
}
.class-item:hover .border-y::after {
  height: calc(100% + 110px);
}
.class-item:hover .class-title a {
  color: var(--border-color);
}

.class-information {
  margin-top: 30px;
}
.class-information .class-title {
  font-size: 22px;
  margin-bottom: 5px;
}
@media only screen and (min-width: 768px) {
  .class-information .class-title {
    font-size: 26px;
  }
}
.class-information .desc {
  margin: 0 30px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.class-information .age {
  font-size: 18px;
  color: var(--border-color);
  margin-bottom: 10px;
}
.class-information p {
  margin-bottom: 0;
}

.fun-facts {
  margin-top: 90px;
  padding-bottom: 90px;
}
@media only screen and (min-width: 576px) {
  .fun-facts {
    padding-bottom: 0px;
  }
}
@media only screen and (min-width: 768px) {
  .fun-facts {
    padding-bottom: 30px;
  }
}
@media only screen and (min-width: 992px) {
  .fun-facts {
    margin-top: 120px;
  }
}
@media only screen and (min-width: 1200px) {
  .fun-facts {
    padding-bottom: 80px;
    margin-top: 160px;
  }
}
@media only screen and (min-width: 1400px) {
  .fun-facts {
    margin-top: 260px;
    padding-bottom: 130px;
  }
}
@media only screen and (min-width: 1600px) {
  .fun-facts {
    margin-top: 330px;
  }
}

.fact-item {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  gap: 20px;
  justify-content: center;
}
@media only screen and (min-width: 1200px) {
  .fact-item {
    gap: 35px;
    justify-content: start;
  }
}
.fact-item img {
  margin-top: 0;
  max-width: 100px;
}
@media only screen and (min-width: 1200px) {
  .fact-item img {
    margin-top: 50px;
  }
}

.count-inner {
  position: relative;
}
.count-inner::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 50%;
  width: 1px;
  height: 320px;
  background-color: var(--bd-text-body);
  transform: translate(-50%, -100%);
  opacity: 0.3;
  z-index: -2;
  display: none;
}
@media only screen and (min-width: 576px) {
  .count-inner::before {
    display: block;
    top: -30px;
  }
}
@media only screen and (min-width: 992px) {
  .count-inner::before {
    top: 20px;
  }
}
.count-inner p {
  font-size: 18px;
  color: var(--color);
  margin: 0;
  font-weight: 500;
}
@media only screen and (min-width: 1200px) {
  .count-inner p {
    font-size: 24px;
  }
}
.count-inner .number {
  font-size: 40px;
  color: var(--bd-white);
  text-shadow: -0.1rem -0.1rem 0 #555555, 0.1rem -0.1rem 0 #555555, -0.1rem 0.1rem 0 #555555, 0.1rem 0.1rem 0 #555555;
}
@media only screen and (min-width: 992px) {
  .count-inner .number {
    font-size: 56px;
  }
}
@media only screen and (min-width: 1200px) {
  .count-inner .number {
    font-size: 60px;
  }
}
.count-inner .number span {
  font-size: 50px;
}
@media only screen and (min-width: 768px) {
  .count-inner .number span {
    font-size: 48px;
  }
}
@media only screen and (min-width: 992px) {
  .count-inner .number span {
    font-size: 60px;
  }
}
@media only screen and (min-width: 1200px) {
  .count-inner .number span {
    font-size: 90px;
  }
}

@media only screen and (min-width: 576px) {
  .classes-wrapper .class-information .class-title {
    font-size: 18px;
  }
}
@media only screen and (min-width: 768px) {
  .classes-wrapper .class-information .class-title {
    font-size: 22px;
  }
}
@media only screen and (min-width: 576px) {
  .classes-wrapper .class-information p {
    font-size: 16px;
  }
}
@media only screen and (min-width: 768px) {
  .classes-wrapper .class-information p {
    font-size: 18px;
  }
}

/*----------------------------------------*/
/*  8.14 Teachers css
/*----------------------------------------*/
.teacher-area {
  background-color: #FFFDF6;
  position: relative;
  padding-top: 80px;
  z-index: 1;
}
@media only screen and (min-width: 576px) {
  .teacher-area {
    padding-top: 100px;
  }
}
@media only screen and (min-width: 1200px) {
  .teacher-area {
    padding-top: 140px;
  }
}
@media only screen and (min-width: 1400px) {
  .teacher-area {
    padding-top: 180px;
  }
}
@media only screen and (min-width: 1600px) {
  .teacher-area {
    padding-top: 220px;
  }
}
.teacher-area .teacher-shape1 {
  position: absolute;
  width: 100px;
  left: 0;
  top: 100px;
  animation: rounded 5s linear infinite;
}
@media only screen and (min-width: 992px) {
  .teacher-area .teacher-shape1 {
    width: inherit;
    left: 50px;
    top: 260px;
  }
}
@media only screen and (min-width: 1200px) {
  .teacher-area .teacher-shape1 {
    top: 300px;
  }
}
@media only screen and (min-width: 1400px) {
  .teacher-area .teacher-shape1 {
    top: 360px;
  }
}
@media only screen and (min-width: 1600px) {
  .teacher-area .teacher-shape1 {
    top: 360px;
  }
}
.teacher-area .teacher-shape2 {
  position: absolute;
  left: 50px;
  bottom: 60px;
  width: 100px;
}
@media only screen and (min-width: 1400px) {
  .teacher-area .teacher-shape2 {
    left: 250px;
  }
}
.teacher-area .teacher-shape3 {
  position: absolute;
  right: 50px;
  top: 240px;
}
@media only screen and (min-width: 1400px) {
  .teacher-area .teacher-shape3 {
    right: 250px;
  }
}
.teacher-area .teacher-shape4 {
  position: absolute;
  right: 50px;
  bottom: 60px;
  animation: vibrate 2s infinite;
}
@media only screen and (min-width: 1400px) {
  .teacher-area .teacher-shape4 {
    right: 250px;
  }
}
.teacher-area .shape-top {
  position: absolute;
  width: 100%;
  left: 0;
  top: -1px;
}
.teacher-area .shape-top img {
  width: 100%;
}
.teacher-area .shape-bottom {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: -20px;
  z-index: 1;
}
@media only screen and (min-width: 576px) {
  .teacher-area .shape-bottom {
    bottom: -30px;
  }
}
@media only screen and (min-width: 768px) {
  .teacher-area .shape-bottom {
    bottom: -48px;
  }
}
@media only screen and (min-width: 992px) {
  .teacher-area .shape-bottom {
    bottom: -60px;
  }
}
@media only screen and (min-width: 1200px) {
  .teacher-area .shape-bottom {
    bottom: -80px;
  }
}
@media only screen and (min-width: 1400px) {
  .teacher-area .shape-bottom {
    bottom: -90px;
  }
}
@media only screen and (min-width: 1600px) {
  .teacher-area .shape-bottom {
    bottom: -115px;
  }
}
.teacher-area .shape-bottom img {
  width: 100%;
}

@media only screen and (min-width: 992px) {
  .teacher-item {
    margin-top: 120px;
    padding: 0 23px;
  }
}
.teacher-item .thumbnail {
  margin-bottom: 15px;
}
@media only screen and (min-width: 576px) {
  .teacher-item .thumbnail {
    margin-bottom: 20px;
  }
}
.teacher-item .thumbnail img {
  -webkit-mask-image: url(../imgs/teachers/teacher-mask.png);
  -webkit-mask-size: 85%;
  -webkit-mask-position: center center;
  -webkit-mask-repeat: no-repeat;
}
.teacher-item .designation {
  margin-bottom: 0;
  font-size: 15px;
}
@media only screen and (min-width: 768px) {
  .teacher-item .designation {
    font-size: 18px;
  }
}

.teacher-name {
  font-size: 18px;
  margin-bottom: 5px;
}
@media only screen and (min-width: 576px) {
  .teacher-name {
    font-size: 22px;
  }
}
@media only screen and (min-width: 768px) {
  .teacher-name {
    font-size: 26px;
  }
}
.teacher-name a:hover {
  color: var(--bd-primary);
}

.teachers-inner-item [class*=col]:nth-child(2) .teacher-item {
  margin-top: 0;
}
@media only screen and (min-width: 992px) {
  .teachers-inner-item [class*=col]:nth-child(3n+1):not(:first-child) .teacher-item {
    margin-top: -60px;
  }
}

.teacher-wrapper .pagination-wrapper {
  margin-top: 40px;
}
@media only screen and (min-width: 768px) {
  .teacher-wrapper .pagination-wrapper {
    margin-top: 60px;
  }
}
@media only screen and (min-width: 992px) {
  .teacher-wrapper .pagination-wrapper {
    margin-top: 100px;
  }
}

/*----------------------------------------*/
/*  8.8 Event css
/*----------------------------------------*/
.event-area {
  background-color: #BCF2FF;
  position: relative;
  padding-top: 40px;
  padding-bottom: 130px;
  z-index: 1;
}
@media only screen and (min-width: 576px) {
  .event-area {
    margin-top: 100px;
    padding-bottom: 135px;
  }
}
@media only screen and (min-width: 992px) {
  .event-area {
    padding-bottom: 185px;
  }
}
@media only screen and (min-width: 1600px) {
  .event-area {
    padding-top: 100px;
    padding-bottom: 220px;
  }
}
.event-area .event-shape1 {
  position: absolute;
  left: 50px;
  top: 340px;
  animation: scaleRotate 5s infinite;
  display: none;
}
@media only screen and (min-width: 1400px) {
  .event-area .event-shape1 {
    display: block;
  }
}
.event-area .event-shape2 {
  position: absolute;
  left: 0;
  bottom: 15px;
  display: none;
}
@media only screen and (min-width: 1200px) {
  .event-area .event-shape2 {
    display: block;
  }
}
.event-area .event-shape3 {
  position: absolute;
  right: 35px;
  top: 30px;
  display: none;
}
@media only screen and (min-width: 1200px) {
  .event-area .event-shape3 {
    display: block;
  }
}
@media only screen and (min-width: 1600px) {
  .event-area .event-shape3 {
    top: 120px;
    right: 100p;
  }
}
.event-area .event-shape4 {
  position: absolute;
  right: 50px;
  bottom: 25px;
}
@media only screen and (min-width: 992px) {
  .event-area .event-shape4 {
    right: 100px;
    bottom: 80px;
  }
}
.event-area .event-shape-top {
  position: absolute;
  top: -30px;
  left: 0;
  right: 0;
  z-index: -1;
}
@media only screen and (min-width: 576px) {
  .event-area .event-shape-top {
    top: -48px;
  }
}
@media only screen and (min-width: 992px) {
  .event-area .event-shape-top {
    top: -80px;
  }
}
@media only screen and (min-width: 1200px) {
  .event-area .event-shape-top {
    top: -95px;
  }
}
@media only screen and (min-width: 1400px) {
  .event-area .event-shape-top {
    top: -115px;
  }
}
@media only screen and (min-width: 1600px) {
  .event-area .event-shape-top {
    top: -130px;
  }
}
.event-area .event-shape-top img {
  width: 100%;
}
.event-area .event-shape-bottom {
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  z-index: -1;
}
.event-area .event-shape-bottom img {
  width: 100%;
}

.event-item {
  background-color: var(--bd-white);
  border: 3px solid var(--color);
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center;
  padding: 20px;
  border-radius: 21px;
}
@media only screen and (min-width: 576px) {
  .event-item {
    flex-direction: row;
    gap: 20px;
  }
}
@media only screen and (min-width: 768px) {
  .event-item {
    padding: 35px;
    gap: 30px;
  }
}
@media only screen and (min-width: 992px) {
  .event-item {
    padding: 20px;
    gap: 20px;
  }
}
@media only screen and (min-width: 1400px) {
  .event-item {
    padding: 35px;
    gap: 30px;
  }
}

.event-content span {
  font-size: 15px;
  color: var(--color);
  display: inline-block;
  margin-bottom: 5px;
}
.event-content h5 {
  font-size: 22px;
  margin-bottom: 10px;
}
@media only screen and (min-width: 768px) {
  .event-content h5 {
    font-size: 26px;
  }
}
.event-content p {
  font-size: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.event-bottom ul {
  display: flex;
  gap: 5px;
}
@media only screen and (min-width: 1200px) {
  .event-bottom ul {
    gap: 15px;
  }
}
.event-bottom ul li {
  font-size: 14px;
  color: var(--bd-black);
}
@media only screen and (min-width: 1200px) {
  .event-bottom ul li {
    font-size: 15px;
  }
}
.event-bottom ul li span {
  color: var(--color);
}
.event-bottom ul li i {
  color: var(--color);
  margin-right: 5px;
}
@media only screen and (min-width: 1200px) {
  .event-bottom ul li i {
    margin-right: 10px;
  }
}

.event-img {
  flex: 0 0 auto;
}
.event-img img {
  border-radius: 29% 71% 65% 35%/58% 51% 49% 42%;
}

.gallery-area .filter-buttons {
  text-align: center;
  margin-bottom: 40px;
}
@media only screen and (min-width: 768px) {
  .gallery-area .filter-buttons {
    margin-bottom: 65px;
  }
}
.gallery-area .filter-buttons button {
  background-color: transparent;
  border: none;
  position: relative;
  z-index: 1;
  font-weight: 600;
  color: var(--bd-white);
  font-size: 18px;
  margin: 0 8px;
  padding: 25px 25px 15px;
  outline: 0;
  transition: all 0.3s;
  font-family: var(--bd-ff-heading);
}
@media (max-width: 575px) {
  .gallery-area .filter-buttons button {
    font-size: 15px;
    padding: 14px 18px 5px;
    margin: 0;
  }
}
@media only screen and (min-width: 768px) {
  .gallery-area .filter-buttons button {
    padding: 28px 30px 20px;
  }
}
@media only screen and (min-width: 992px) {
  .gallery-area .filter-buttons button {
    font-size: 20px;
  }
}
.gallery-area .filter-buttons button svg {
  position: absolute;
  top: 8px;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.gallery-area .filter-buttons button svg path {
  transition: all 0.5s;
}
.gallery-area .filter-buttons button:hover .button1 {
  d: path("M9.9164 1.61896L94.5136 14.0816C98.1366 14.6153 100.736 17.8512 100.476 21.504L97.033 69.8581C96.7863 73.3239 94.0347 76.0841 90.5697 76.3417L21.5837 81.4706C18.0203 81.7355 14.8293 79.274 14.1809 75.7601L2.01241 9.81446C1.14167 5.09562 5.16915 0.919613 9.9164 1.61896Z");
}
.gallery-area .filter-buttons button:hover .button2 {
  d: path("M15.5753 1H155C158.866 1 162 4.13401 162 8V58.09C162 61.7484 159.183 64.7898 155.535 65.0695L9.51849 76.2671C5.15308 76.6019 1.55517 72.8921 2.02339 68.539L8.61549 7.25139C8.99794 3.69567 11.9991 1 15.5753 1Z");
}
.gallery-area .filter-buttons button:hover .button3 {
  d: path("M11.2667 1H119.21C123.004 1 126.107 4.02143 126.208 7.8134L127.751 65.6889C127.866 69.9824 124.122 73.3655 119.862 72.8185L8.00157 58.455C4.36409 57.988 1.70372 54.7926 1.90348 51.1307L4.27705 7.61873C4.47956 3.9064 7.54881 1 11.2667 1Z");
}
.gallery-area .filter-buttons button:hover .button4 {
  d: path("M15.0613 1H144.827C148.399 1 151.397 3.68866 151.786 7.23891L157.118 55.9864C157.544 59.887 154.682 63.3764 150.773 63.7205L9.53845 76.1563C5.16544 76.5413 1.52131 72.8526 1.95942 68.4846L8.0962 7.30139C8.45503 3.72388 11.4658 1 15.0613 1Z");
}
.gallery-area .filter-buttons button:not(.active) {
  color: var(--bd-black);
}
.gallery-area .filter-buttons button:not(.active) svg path {
  fill: var(--bd-white);
}
.gallery-area .grid-item {
  text-align: center;
}
.gallery-area .grid-item .figure {
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  z-index: 1;
  display: block;
  margin: 0 auto;
  max-width: 380px;
}
@media only screen and (min-width: 576px) {
  .gallery-area .grid-item .figure {
    max-width: 100%;
  }
}
.gallery-area .grid-item .figure .overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: end;
  z-index: 1;
  padding: 0 0 32px;
}
@media only screen and (min-width: 576px) {
  .gallery-area .grid-item .figure .overlay {
    padding: 0 0 5px;
  }
}
@media only screen and (min-width: 768px) {
  .gallery-area .grid-item .figure .overlay {
    padding: 0 0 32px;
  }
}
.gallery-area .grid-item .figure .overlay h4 {
  font-size: 20px;
  margin-bottom: 7px;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
}
@media only screen and (min-width: 576px) {
  .gallery-area .grid-item .figure .overlay h4 {
    margin-bottom: 2px;
  }
}
@media only screen and (min-width: 768px) {
  .gallery-area .grid-item .figure .overlay h4 {
    font-size: 22px;
    margin-bottom: 7px;
  }
}
@media only screen and (min-width: 992px) {
  .gallery-area .grid-item .figure .overlay h4 {
    font-size: 20px;
  }
}
@media only screen and (min-width: 1200px) {
  .gallery-area .grid-item .figure .overlay h4 {
    font-size: 24px;
  }
}
@media only screen and (min-width: 1400px) {
  .gallery-area .grid-item .figure .overlay h4 {
    font-size: 26px;
  }
}
.gallery-area .grid-item .figure .overlay h4 a:hover {
  color: var(--bd-primary);
}
.gallery-area .grid-item .figure .overlay p {
  margin-bottom: 0;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
  font-size: 14px;
}
@media only screen and (min-width: 768px) {
  .gallery-area .grid-item .figure .overlay p {
    font-size: 16px;
  }
}
@media only screen and (min-width: 1200px) {
  .gallery-area .grid-item .figure .overlay p {
    font-size: 18px;
  }
}
.gallery-area .grid-item .figure .overlay .shape {
  position: absolute;
  width: 100%;
  bottom: -16px;
  z-index: -1;
  transition: 0.3s;
  opacity: 0;
  transform: translateY(90px);
}
.gallery-area .grid-item .figure .overlay img {
  position: absolute;
  bottom: 110px;
  right: 30px;
}
@media only screen and (min-width: 576px) {
  .gallery-area .grid-item .figure .overlay img {
    bottom: 90px;
    right: 45px;
    width: 60px;
  }
}
@media only screen and (min-width: 992px) {
  .gallery-area .grid-item .figure .overlay img {
    bottom: 120px;
    right: 55px;
    width: 70px;
  }
}
@media only screen and (min-width: 1400px) {
  .gallery-area .grid-item .figure .overlay img {
    width: initial;
    bottom: 110px;
    right: 30px;
  }
}
.gallery-area .grid-item .figure:hover .overlay .shape {
  opacity: 1;
  transform: translateY(0);
}
.gallery-area .grid-item .figure:hover .overlay h4, .gallery-area .grid-item .figure:hover .overlay p {
  opacity: 1;
  visibility: visible;
}

.event-style-two {
  background-color: #F6F1E4;
  position: relative;
  padding: 100px 0;
  margin: 80px 0;
  z-index: 1;
}
@media only screen and (min-width: 768px) {
  .event-style-two {
    padding: 140px 0;
  }
}
@media only screen and (min-width: 992px) {
  .event-style-two {
    margin: 100px 0;
    padding: 160px 0;
  }
}
@media only screen and (min-width: 1200px) {
  .event-style-two {
    margin: 140px 0;
    padding: 200px 0;
  }
}
@media only screen and (min-width: 1600px) {
  .event-style-two {
    padding: 280px 0;
  }
}
.event-style-two .container {
  position: relative;
  z-index: 2;
}
.event-style-two .event-shape-top {
  position: absolute;
  left: 0;
  right: 0;
  top: -2px;
}
.event-style-two .event-shape-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
}
.event-style-two .sub-title-two {
  padding: 8px 40px;
}

.event-single-item {
  position: relative;
  max-width: 400px;
  margin: auto;
}
.event-single-item:hover .event-thumb img {
  transform: scale(1.1) rotate(5deg);
}
.event-single-item .event-thumb {
  -webkit-mask-image: url("../imgs/shape/event-mask.png");
  -webkit-mask-size: 100%;
  -webkit-mask-position: center center;
  -webkit-mask-repeat: no-repeat;
}
.event-single-item .event-thumb img {
  width: 100%;
}

.event-active {
  padding: 5px 0;
}

.event-content-two {
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  padding: 35px;
  padding-top: 50px;
  background-color: var(--color);
  clip-path: url(#event-details-clip);
}
.event-content-two .event-icon {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2;
}
@media only screen and (min-width: 1200px) {
  .event-content-two .event-icon {
    width: 100px;
  }
}
@media only screen and (min-width: 1400px) {
  .event-content-two .event-icon {
    width: initial;
  }
}
.event-content-two span {
  font-size: 18px;
  color: var(--bd-white);
  display: inline-block;
  margin-bottom: 8px;
}
.event-content-two h5 {
  color: var(--bd-white);
  margin-bottom: 15px;
  font-size: 22px;
}
@media only screen and (min-width: 576px) {
  .event-content-two h5 {
    font-size: 26px;
  }
}
.event-content-two h5 a {
  background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff);
  display: inline;
  background-size: 0% 1px, 0 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.4s linear;
}
.event-content-two h5 a:hover {
  color: inherit;
  background-size: 0 1px, 100% 1px;
}
.event-content-two ul li {
  font-size: 16px;
  color: var(--bd-white);
  margin-bottom: 10px;
}
.event-content-two ul li:last-child {
  margin-bottom: 0;
}
.event-content-two ul li i {
  margin-right: 8px;
}

/*----------------------------------------*/
/*  8.16 Testiomonial css
/*----------------------------------------*/
.testimonial-area {
  padding: 60px 0;
  background-color: #E9F9FD;
  position: relative;
  z-index: 1;
}
@media only screen and (min-width: 768px) {
  .testimonial-area {
    margin-top: 50px;
  }
}
@media only screen and (min-width: 992px) {
  .testimonial-area {
    padding: 80px 0;
  }
}
@media only screen and (min-width: 1400px) {
  .testimonial-area {
    margin: 100px 0;
  }
}
.testimonial-area .testimonial-shape1 {
  position: absolute;
  left: 100px;
  top: 0;
}
.testimonial-area .testimonial-shape2 {
  position: absolute;
  left: 0px;
  bottom: -30px;
  animation-delay: 2s;
  width: 90px;
}
@media only screen and (min-width: 768px) {
  .testimonial-area .testimonial-shape2 {
    width: 110px;
  }
}
@media only screen and (min-width: 1200px) {
  .testimonial-area .testimonial-shape2 {
    width: 120px;
  }
}
@media only screen and (min-width: 1400px) {
  .testimonial-area .testimonial-shape2 {
    width: 180px;
  }
}
@media only screen and (min-width: 1600px) {
  .testimonial-area .testimonial-shape2 {
    width: inherit;
  }
}
.testimonial-area .testimonial-shape3 {
  position: absolute;
  right: 200px;
  top: 30px;
  animation-duration: 10s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-name: planeleft;
}
.testimonial-area .testimonial-shape4 {
  position: absolute;
  right: 0px;
  bottom: -30px;
  width: 90px;
}
@media only screen and (min-width: 768px) {
  .testimonial-area .testimonial-shape4 {
    width: 110px;
  }
}
@media only screen and (min-width: 1200px) {
  .testimonial-area .testimonial-shape4 {
    width: 150px;
  }
}
@media only screen and (min-width: 1400px) {
  .testimonial-area .testimonial-shape4 {
    width: 180px;
  }
}
@media only screen and (min-width: 1600px) {
  .testimonial-area .testimonial-shape4 {
    width: inherit;
  }
}
.testimonial-area .shape-top, .testimonial-area .shape-bottom {
  position: absolute;
  left: 0;
  top: -25px;
  width: 100%;
  z-index: -1;
}
@media only screen and (min-width: 576px) {
  .testimonial-area .shape-top, .testimonial-area .shape-bottom {
    top: -36px;
  }
}
@media only screen and (min-width: 768px) {
  .testimonial-area .shape-top, .testimonial-area .shape-bottom {
    top: -50px;
  }
}
@media only screen and (min-width: 992px) {
  .testimonial-area .shape-top, .testimonial-area .shape-bottom {
    top: -65px;
  }
}
@media only screen and (min-width: 1200px) {
  .testimonial-area .shape-top, .testimonial-area .shape-bottom {
    top: -75px;
  }
}
@media only screen and (min-width: 1400px) {
  .testimonial-area .shape-top, .testimonial-area .shape-bottom {
    top: -85px;
  }
}
@media only screen and (min-width: 1600px) {
  .testimonial-area .shape-top, .testimonial-area .shape-bottom {
    top: -100px;
  }
}
.testimonial-area .shape-top img, .testimonial-area .shape-bottom img {
  width: 100%;
}
.testimonial-area .shape-bottom {
  bottom: -25px;
  top: auto;
}
@media only screen and (min-width: 576px) {
  .testimonial-area .shape-bottom {
    bottom: -42px;
    top: auto;
  }
}
@media only screen and (min-width: 992px) {
  .testimonial-area .shape-bottom {
    bottom: -70px;
  }
}
@media only screen and (min-width: 1200px) {
  .testimonial-area .shape-bottom {
    bottom: -85px;
  }
}
@media only screen and (min-width: 1400px) {
  .testimonial-area .shape-bottom {
    bottom: -85px;
  }
}
@media only screen and (min-width: 1600px) {
  .testimonial-area .shape-bottom {
    bottom: -100px;
  }
}

.testimonial-active {
  max-width: 100%;
}
.testimonial-active .item {
  text-align: center;
  position: relative;
  z-index: 1;
  padding: 48px 48px 0px 50px;
  max-width: 380px;
  margin: auto;
}
@media only screen and (min-width: 576px) {
  .testimonial-active .item {
    max-width: 450px;
    padding: 130px 50px 50px 50px;
  }
}
@media only screen and (min-width: 768px) {
  .testimonial-active .item {
    max-width: 100%;
    padding: 48px 48px 0px 50px;
  }
}
@media only screen and (min-width: 992px) {
  .testimonial-active .item {
    padding: 95px 50px 50px 50px;
  }
}
@media only screen and (min-width: 1200px) {
  .testimonial-active .item {
    padding: 48px 48px 0px 50px;
  }
}
@media only screen and (min-width: 1400px) {
  .testimonial-active .item {
    padding: 95px 50px 50px 50px;
  }
}
.testimonial-active .item .quote {
  line-height: 1.9;
  font-size: 1.5rem;
  margin-bottom: 2rem;
  font-weight: 400;
  font-style: italic;
  position: relative;
  z-index: 1;
}
.testimonial-active .item .quote svg {
  position: absolute;
  top: -2.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
}
@media only screen and (min-width: 768px) {
  .testimonial-active .item .quote p {
    margin-bottom: 20px;
    font-size: 16px;
  }
}
@media only screen and (min-width: 992px) {
  .testimonial-active .item .quote p {
    margin-bottom: 30px;
    font-size: 18px;
  }
}
@media only screen and (min-width: 1200px) {
  .testimonial-active .item .quote p {
    margin-bottom: 20px;
  }
}
@media only screen and (min-width: 1400px) {
  .testimonial-active .item .quote p {
    margin-bottom: 30px;
  }
}
.testimonial-active .item .author-img {
  position: absolute;
  left: 0px;
  bottom: 4px;
  width: 80px;
}
@media only screen and (min-width: 576px) {
  .testimonial-active .item .author-img {
    left: 10px;
    bottom: 50px;
    width: inherit;
  }
}
@media only screen and (min-width: 768px) {
  .testimonial-active .item .author-img {
    left: 0px;
    bottom: 4px;
    width: 80px;
  }
}
@media only screen and (min-width: 992px) {
  .testimonial-active .item .author-img {
    left: 10px;
    bottom: 50px;
    width: inherit;
  }
}
@media only screen and (min-width: 1200px) {
  .testimonial-active .item .author-img {
    left: 0px;
    bottom: 4px;
    width: 80px;
  }
}
@media only screen and (min-width: 1400px) {
  .testimonial-active .item .author-img {
    left: 10px;
    bottom: 50px;
    width: inherit;
  }
}
.testimonial-active .item .author-img img {
  border-radius: 45% 55% 50% 50%/50% 65% 35% 50%;
  border: 3px solid var(--color);
}
.testimonial-active .item .bg-shape svg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

@media only screen and (min-width: 768px) {
  .author-info .name {
    font-size: 18px;
  }
}
@media only screen and (min-width: 992px) {
  .author-info .name {
    font-size: 20px;
  }
}
.author-info .name a:hover {
  color: var(--bd-primary);
}

.testimonial-style-two {
  position: relative;
  z-index: 1;
}
.testimonial-style-two .heart {
  position: absolute;
  right: 100px;
  bottom: 100px;
  display: none;
}
@media only screen and (min-width: 768px) {
  .testimonial-style-two .heart {
    display: block;
  }
}
@media only screen and (min-width: 992px) {
  .testimonial-style-two .heart {
    bottom: 0;
  }
}
@media only screen and (min-width: 1200px) {
  .testimonial-style-two .heart {
    bottom: 100px;
  }
}

.testimonial-item {
  padding: 26px 35px;
  padding-top: 90px;
  position: relative;
  max-width: 395px;
  margin: auto;
  text-align: center;
  margin: 0 10px;
}
@media only screen and (min-width: 576px) {
  .testimonial-item {
    margin: auto;
    padding: 30px 45px;
    padding-top: 100px;
  }
}
@media only screen and (min-width: 1200px) {
  .testimonial-item {
    max-width: 440px;
  }
}
@media only screen and (min-width: 1400px) {
  .testimonial-item {
    max-width: 395px;
  }
}
.testimonial-item > p {
  font-style: italic;
}
.testimonial-item .testimonial-author-img {
  left: 100px;
  top: -50px;
}
.testimonial-item .quote-mark {
  position: absolute;
  bottom: -15px;
  right: 40px;
}
.testimonial-item::before {
  position: absolute;
  content: "";
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 106%;
  height: 106%;
  border-radius: 50%;
  background-color: var(--color);
  z-index: -1;
}
.testimonial-item::after {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: var(--bd-white);
  transform: rotate(12deg);
  z-index: -1;
}
.testimonial-item .author-info p {
  margin-bottom: 20px;
  font-size: 18px;
}

.testimonial-author-img {
  height: 120px;
  width: 120px;
  position: absolute;
  z-index: 2;
}
.testimonial-author-img::before {
  position: absolute;
  content: "";
  border-radius: 55% 45% 40% 60%/50% 50% 50% 50%;
  left: 10px;
  top: 10px;
  height: 100%;
  width: 100%;
  border: 1px solid var(--color);
  z-index: -1;
}
.testimonial-author-img img {
  background-color: var(--color);
  border-radius: 55% 45% 40% 60%/50% 50% 50% 50%;
  width: 100%;
}

.testimonial-two-active {
  padding-top: 55px;
}
.testimonial-two-active .swiper-pagination {
  margin-top: 80px;
}

.testimonial-style-three {
  position: relative;
}
.testimonial-style-three .line-shape {
  position: absolute;
  left: 0;
  top: 55%;
  display: none;
}
@media only screen and (min-width: 1600px) {
  .testimonial-style-three .line-shape {
    display: block;
  }
}
.testimonial-style-three .line-shape2 {
  position: absolute;
  right: 0;
  top: 20%;
  display: none;
}
@media only screen and (min-width: 1600px) {
  .testimonial-style-three .line-shape2 {
    display: block;
  }
}

.testimonial-heading {
  margin-bottom: 15px;
}
.testimonial-heading h5 {
  margin-bottom: 5px;
  font-size: 20px;
}
@media only screen and (min-width: 576px) {
  .testimonial-heading h5 {
    font-size: 24px;
  }
}
@media only screen and (min-width: 768px) {
  .testimonial-heading h5 {
    font-size: 20px;
  }
}
@media only screen and (min-width: 992px) {
  .testimonial-heading h5 {
    font-size: 24px;
  }
}
@media only screen and (min-width: 1200px) {
  .testimonial-heading h5 {
    font-size: 20px;
  }
}
@media only screen and (min-width: 1400px) {
  .testimonial-heading h5 {
    font-size: 26px;
  }
}
.testimonial-heading span {
  display: inline-block;
}

.testimonial-item-three {
  position: relative;
  text-align: center;
  max-width: 400px;
  margin: auto;
}
@media only screen and (min-width: 576px) {
  .testimonial-item-three {
    max-width: 420px;
  }
}
@media only screen and (min-width: 768px) {
  .testimonial-item-three {
    max-width: 100%;
  }
}
.testimonial-item-three .testimonial-three-content {
  position: absolute;
  padding: 40px 20px;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
@media only screen and (min-width: 576px) {
  .testimonial-item-three .testimonial-three-content {
    padding: 65px 50px;
  }
}
@media only screen and (min-width: 768px) {
  .testimonial-item-three .testimonial-three-content {
    padding: 35px 20px;
  }
}
@media only screen and (min-width: 992px) {
  .testimonial-item-three .testimonial-three-content {
    padding: 65px 50px;
  }
}
@media only screen and (min-width: 1200px) {
  .testimonial-item-three .testimonial-three-content {
    padding: 35px 20px;
  }
}
@media only screen and (min-width: 1400px) {
  .testimonial-item-three .testimonial-three-content {
    padding: 65px 50px;
  }
}
.testimonial-item-three .box-shape path {
  fill: var(--color);
}
.testimonial-item-three p {
  font-style: italic;
}
@media only screen and (min-width: 768px) {
  .testimonial-item-three p {
    font-size: 16px;
  }
}
@media only screen and (min-width: 992px) {
  .testimonial-item-three p {
    font-size: 18px;
  }
}
.testimonial-item-three .testimonial-author-img {
  height: 100px;
  position: relative;
  width: 100px;
  margin: 20px auto 0;
}

.testimonial-pagination .swiper-pagination {
  text-align: center;
  position: relative;
  margin-top: 40px;
}
@media only screen and (min-width: 1200px) {
  .testimonial-pagination .swiper-pagination {
    margin-top: 60px;
  }
}
.testimonial-pagination .swiper-pagination-bullet {
  width: 16px;
  height: 16px;
  background-color: var(--bd-white);
  border-radius: 50%;
  border: 1px solid var(--bd-black);
  border-radius: 41% 59% 49% 51%/54% 50% 50% 46%;
  margin: 5px;
  opacity: 1;
  transition: 0.3s;
}
.testimonial-pagination .swiper-pagination-bullet-active {
  background-color: #9E2FF5;
  border-color: #9E2FF5;
}

.testimonial-three-active .testimonial-pagination {
  padding-top: 30px;
}

/*----------------------------------------*/
/*  8.9 Gallery css
/*----------------------------------------*/
.filter-buttons {
  text-align: center;
  margin-bottom: 40px;
}
@media only screen and (min-width: 768px) {
  .filter-buttons {
    margin-bottom: 65px;
  }
}
.filter-buttons button {
  background-color: transparent;
  border: none;
  position: relative;
  z-index: 1;
  font-weight: 600;
  color: var(--bd-white);
  font-size: 18px;
  padding: 25px 25px 15px;
  outline: 0;
  margin: 0 8px;
  transition: all 0.3s;
  font-family: var(--bd-ff-heading);
}
@media only screen and (min-width: 768px) {
  .filter-buttons button {
    padding: 28px 30px 20px;
  }
}
@media only screen and (min-width: 992px) {
  .filter-buttons button {
    font-size: 20px;
  }
}
.filter-buttons button svg {
  position: absolute;
  top: 8px;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.filter-buttons button svg path {
  transition: all 0.5s;
}
.filter-buttons button:hover .button1 {
  d: path("M9.9164 1.61896L94.5136 14.0816C98.1366 14.6153 100.736 17.8512 100.476 21.504L97.033 69.8581C96.7863 73.3239 94.0347 76.0841 90.5697 76.3417L21.5837 81.4706C18.0203 81.7355 14.8293 79.274 14.1809 75.7601L2.01241 9.81446C1.14167 5.09562 5.16915 0.919613 9.9164 1.61896Z");
}
.filter-buttons button:hover .button2 {
  d: path("M15.5753 1H155C158.866 1 162 4.13401 162 8V58.09C162 61.7484 159.183 64.7898 155.535 65.0695L9.51849 76.2671C5.15308 76.6019 1.55517 72.8921 2.02339 68.539L8.61549 7.25139C8.99794 3.69567 11.9991 1 15.5753 1Z");
}
.filter-buttons button:hover .button3 {
  d: path("M11.2667 1H119.21C123.004 1 126.107 4.02143 126.208 7.8134L127.751 65.6889C127.866 69.9824 124.122 73.3655 119.862 72.8185L8.00157 58.455C4.36409 57.988 1.70372 54.7926 1.90348 51.1307L4.27705 7.61873C4.47956 3.9064 7.54881 1 11.2667 1Z");
}
.filter-buttons button:hover .button4 {
  d: path("M15.0613 1H144.827C148.399 1 151.397 3.68866 151.786 7.23891L157.118 55.9864C157.544 59.887 154.682 63.3764 150.773 63.7205L9.53845 76.1563C5.16544 76.5413 1.52131 72.8526 1.95942 68.4846L8.0962 7.30139C8.45503 3.72388 11.4658 1 15.0613 1Z");
}
.filter-buttons button:not(.active) {
  color: var(--bd-black);
}
.filter-buttons button:not(.active) svg path {
  fill: var(--bd-white);
}

.grid-item {
  text-align: center;
}
.grid-item .figure {
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  z-index: 1;
  display: block;
  margin: 0 auto;
  max-width: 100%;
  max-width: 400px;
}
@media only screen and (min-width: 576px) {
  .grid-item .figure {
    max-width: 100%;
  }
}
.grid-item .figure .overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: end;
  z-index: 1;
  padding: 0 0 32px;
}
@media only screen and (min-width: 576px) {
  .grid-item .figure .overlay {
    padding: 0 0 5px;
  }
}
@media only screen and (min-width: 768px) {
  .grid-item .figure .overlay {
    padding: 0 0 32px;
  }
}
.grid-item .figure .overlay h4 {
  font-size: 24px;
  margin-bottom: 7px;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
}
@media only screen and (min-width: 576px) {
  .grid-item .figure .overlay h4 {
    font-size: 22px;
    margin-bottom: 2px;
  }
}
@media only screen and (min-width: 768px) {
  .grid-item .figure .overlay h4 {
    margin-bottom: 7px;
  }
}
@media only screen and (min-width: 1200px) {
  .grid-item .figure .overlay h4 {
    font-size: 24px;
  }
}
@media only screen and (min-width: 1400px) {
  .grid-item .figure .overlay h4 {
    font-size: 28px;
  }
}
.grid-item .figure .overlay h4 a:hover {
  color: var(--bd-primary);
}
.grid-item .figure .overlay p {
  margin-bottom: 0;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
  font-size: 17px;
}
@media only screen and (min-width: 768px) {
  .grid-item .figure .overlay p {
    font-size: 18px;
  }
}
.grid-item .figure .overlay .shape {
  position: absolute;
  width: 100%;
  bottom: -16px;
  z-index: -1;
  transition: 0.3s;
  opacity: 0;
  transform: translateY(90px);
}
.grid-item .figure .overlay img {
  position: absolute;
  bottom: 110px;
  right: 30px;
}
@media only screen and (min-width: 576px) {
  .grid-item .figure .overlay img {
    bottom: 90px;
    right: 45px;
    width: 60px;
  }
}
@media only screen and (min-width: 992px) {
  .grid-item .figure .overlay img {
    bottom: 120px;
    right: 55px;
    width: 70px;
  }
}
@media only screen and (min-width: 1400px) {
  .grid-item .figure .overlay img {
    width: initial;
    bottom: 110px;
    right: 30px;
  }
}
.grid-item .figure:hover .overlay .shape {
  opacity: 1;
  transform: translateY(0);
}
.grid-item .figure:hover .overlay h4, .grid-item .figure:hover .overlay p {
  opacity: 1;
  visibility: visible;
}

.feature-single {
  display: flex;
  gap: 15px;
}
@media only screen and (min-width: 576px) {
  .feature-single {
    gap: 25px;
  }
}
@media only screen and (min-width: 992px) {
  .feature-single {
    gap: 15px;
    flex-direction: column;
    text-align: center;
  }
}
@media only screen and (min-width: 1200px) {
  .feature-single {
    flex-direction: row;
    text-align: start;
    gap: 20px;
  }
}
@media only screen and (min-width: 1400px) {
  .feature-single {
    gap: 25px;
  }
}

.feature-content h5 {
  margin-bottom: 10px;
  font-size: 20px;
}
@media only screen and (min-width: 1200px) {
  .feature-content h5 {
    font-size: 26px;
  }
}
.feature-content p {
  margin-bottom: 0;
}

.grid-shape2 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 22px;
  width: 75%;
  z-index: -1;
}
@media only screen and (min-width: 576px) {
  .grid-shape2 {
    width: 90%;
  }
}
@media only screen and (min-width: 1200px) {
  .grid-shape2 {
    width: 75%;
  }
}

.grid-item:hover .content {
  bottom: 0;
  opacity: 1;
}
.grid-item .content {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  bottom: -90px;
  z-index: 2;
  opacity: 0;
  transition: 0.3s;
}
.grid-item .content::before {
  position: absolute;
  content: "";
  height: 140px;
  width: 100%;
  background-color: #31C9A8;
  left: 0;
  bottom: 0;
  border-radius: 18px;
  z-index: -1;
}
.grid-item .content .info {
  position: absolute;
  bottom: 70px;
  left: 50%;
  width: 100%;
  transform: translateX(-50%);
}
@media only screen and (min-width: 576px) {
  .grid-item .content .info {
    bottom: 40px;
  }
}
@media only screen and (min-width: 768px) {
  .grid-item .content .info {
    bottom: 70px;
  }
}
.grid-item .content .info p {
  font-size: 16px;
}
@media only screen and (min-width: 768px) {
  .grid-item .content .info p {
    font-size: 18px;
  }
}
.grid-item .content .info h4 {
  font-size: 22px;
}
@media only screen and (min-width: 576px) {
  .grid-item .content .info h4 {
    font-size: 18px;
  }
}
@media only screen and (min-width: 768px) {
  .grid-item .content .info h4 {
    font-size: 22px;
  }
}
@media only screen and (min-width: 1400px) {
  .grid-item .content .info h4 {
    font-size: 26px;
  }
}
.grid-item .content .info h4 a:hover {
  color: #5ED5BE;
}

.gallery-style-two {
  position: relative;
  z-index: 1;
}
@media (max-width: 575px) {
  .gallery-style-two .g-30 {
    --bs-gutter-y: 20px;
  }
}
.gallery-style-two .filter-buttons {
  display: flex;
  gap: 5px;
  justify-content: center;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
@media only screen and (min-width: 576px) {
  .gallery-style-two .filter-buttons {
    gap: 10px;
  }
}
.gallery-style-two .filter-buttons button {
  font-size: 14px;
  font-weight: 600;
  padding: 8px 18px;
  font-family: var(--bd-ff-heading);
  border-radius: 21px;
  border: 2px solid var(--bd-black);
  margin: 0;
}
@media only screen and (min-width: 576px) {
  .gallery-style-two .filter-buttons button {
    font-size: 18px;
    padding: 8px 25px;
  }
}
@media only screen and (min-width: 992px) {
  .gallery-style-two .filter-buttons button {
    padding: 10px 35px;
    margin: 0 8px;
  }
}
@media only screen and (min-width: 1200px) {
  .gallery-style-two .filter-buttons button {
    font-size: 20px;
  }
}
.gallery-style-two .filter-buttons button.active {
  background-color: #5ED5BE;
  border-color: #5ED5BE;
  color: var(--bd-white);
}

.gallery-btn {
  text-align: center;
  margin-top: 60px;
}

/*----------------------------------------*/
/*  8.15 Team css
/*----------------------------------------*/
.team-area {
  position: relative;
  z-index: 1;
}
.team-area .team-icon {
  position: absolute;
  bottom: 100px;
  left: -10px;
  display: none;
}
@media only screen and (min-width: 1400px) {
  .team-area .team-icon {
    display: block;
  }
}
@media only screen and (min-width: 1600px) {
  .team-area .team-icon {
    left: 35px;
  }
}
.team-area .team-icon2 {
  position: absolute;
  top: 0;
  right: 90px;
  display: none;
}
@media only screen and (min-width: 992px) {
  .team-area .team-icon2 {
    display: block;
  }
}
@media only screen and (min-width: 1200px) {
  .team-area .team-icon2 {
    top: 35px;
  }
}
.team-area .team-icon2 img {
  width: 80px;
}
@media only screen and (min-width: 1600px) {
  .team-area .team-icon2 img {
    width: inherit;
  }
}

.single-team {
  text-align: center;
}
.single-team:hover .team-img img {
  transform: scale(1.06);
}
.single-team .team-img {
  max-width: 290px;
  margin: auto;
  margin-bottom: 30px;
  position: relative;
}
@media only screen and (min-width: 576px) {
  .single-team .team-img {
    margin: 0 10px 30px;
  }
}
@media only screen and (min-width: 768px) {
  .single-team .team-img {
    margin-bottom: 50px;
  }
}
@media only screen and (min-width: 992px) {
  .single-team .team-img {
    margin-bottom: 50px;
  }
}
@media only screen and (min-width: 1200px) {
  .single-team .team-img {
    margin: auto;
    margin-bottom: 50px;
  }
}
.single-team .team-img::before {
  position: absolute;
  content: "";
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 110%;
  width: 110%;
  background-color: var(--color);
  border-radius: 53% 47% 49% 51%/60% 60% 40% 40%;
  z-index: -1;
}
.single-team .team-img img {
  border-radius: 48% 52% 49% 51%/56% 57% 43% 44%;
}

.team-author {
  font-size: 20px;
}
@media only screen and (min-width: 576px) {
  .team-author {
    font-size: 22px;
  }
}
@media only screen and (min-width: 768px) {
  .team-author {
    font-size: 26px;
  }
}
.team-author a:hover {
  color: var(--color);
}

.author-designation {
  font-size: 16px;
  color: var(--bd-text-body);
}
@media only screen and (min-width: 768px) {
  .author-designation {
    font-size: 18px;
  }
}

.team-area .line-shape, .teacher-wrapper .line-shape {
  position: absolute;
  text-align: end;
  top: 35%;
  right: 0;
  transform: translateY(-50%);
  z-index: -2;
}
@media only screen and (min-width: 1200px) {
  .team-area .line-shape, .teacher-wrapper .line-shape {
    right: 30px;
    width: 90%;
  }
}
@media only screen and (min-width: 1400px) {
  .team-area .line-shape, .teacher-wrapper .line-shape {
    right: 100px;
    width: 100%;
  }
}

/*----------------------------------------*/
/*  8.10 pricing css
/*----------------------------------------*/
.pricing-area {
  position: relative;
  z-index: 1;
}
.pricing-area .childern {
  position: absolute;
  left: 0;
  bottom: 250px;
  display: none;
  width: 115px;
}
@media only screen and (min-width: 1600px) {
  .pricing-area .childern {
    display: block;
  }
}
.pricing-area .snail {
  position: absolute;
  right: 190px;
  bottom: -55px;
  z-index: 1;
  display: none;
}
@media only screen and (min-width: 768px) {
  .pricing-area .snail {
    display: block;
  }
}
.pricing-area .line-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.pricing-area .line-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.package-price {
  font-size: 30px;
  color: var(--color);
}
@media only screen and (min-width: 576px) {
  .package-price {
    font-size: 40px;
  }
}
@media only screen and (min-width: 1400px) {
  .package-price {
    font-size: 60px;
  }
}
.package-price span {
  font-size: 32px;
}

.single-price {
  position: relative;
  display: inline-block;
  padding: 25px;
  margin-bottom: 30px;
}
@media only screen and (min-width: 576px) {
  .single-price {
    padding: 40px;
  }
}
@media only screen and (min-width: 768px) {
  .single-price {
    padding: 30px;
  }
}
@media only screen and (min-width: 1400px) {
  .single-price {
    padding: 40px;
  }
}
.single-price .price-shape {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.single-price .price-shape path {
  stroke: var(--color);
}

.pricing-wrapper {
  border: 2px solid var(--bd-black);
  border-radius: 25px;
  padding: 30px;
  padding-bottom: 50px;
  position: relative;
  transition: 0.3s;
  max-width: 400px;
  margin: auto;
}
@media only screen and (min-width: 992px) {
  .pricing-wrapper {
    padding-bottom: 80px;
  }
}
@media only screen and (min-width: 1400px) {
  .pricing-wrapper {
    max-width: 100%;
    padding: 50px;
    padding-bottom: 80px;
  }
}
@media only screen and (min-width: 1600px) {
  .pricing-wrapper {
    padding: 70px;
  }
}
.pricing-wrapper:hover {
  border-color: var(--color);
}
.pricing-wrapper .theme-btn {
  position: absolute;
  left: 50%;
  bottom: -30px;
  transform: translateX(-50%);
  z-index: 2;
  background-color: var(--color);
  width: max-content;
}

.pricing-name {
  font-size: 22px;
  margin-bottom: 30px;
}
@media only screen and (min-width: 576px) {
  .pricing-name {
    font-size: 25px;
  }
}
@media only screen and (min-width: 768px) {
  .pricing-name {
    font-size: 28px;
  }
}
@media only screen and (min-width: 992px) {
  .pricing-name {
    font-size: 25px;
  }
}
@media only screen and (min-width: 1200px) {
  .pricing-name {
    font-size: 30px;
  }
}

.pricing-list li {
  position: relative;
  padding-left: 30px;
  color: var(--bd-text-body);
}
@media only screen and (min-width: 992px) {
  .pricing-list li {
    font-size: 16px;
  }
}
@media only screen and (min-width: 1200px) {
  .pricing-list li {
    font-size: 18px;
  }
}
.pricing-list li:not(:last-child) {
  margin-bottom: 20px;
}
.pricing-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 16px;
  height: 16px;
  border: 1px solid #222429;
  border-radius: 41% 59% 49% 51%/54% 50% 50% 46%;
}
.pricing-list li::after {
  content: "";
  position: absolute;
  left: 1px;
  top: 11px;
  width: 16px;
  height: 16px;
  background-color: var(--color);
  border-radius: 41% 59% 49% 51%/54% 50% 50% 46%;
  z-index: -1;
}

/*----------------------------------------*/
/*  8.11 product css
/*----------------------------------------*/
.product-box {
  position: relative;
  padding: 30px 40px;
  max-width: 350px;
  margin: auto;
}
@media only screen and (min-width: 576px) {
  .product-box {
    padding: 35px 70px;
    max-width: 380px;
    margin: auto;
  }
}
@media only screen and (min-width: 768px) {
  .product-box {
    padding: 30px 40px;
    max-width: 100%;
  }
}
@media only screen and (min-width: 992px) {
  .product-box {
    padding: 35px 70px;
  }
}
@media only screen and (min-width: 1200px) {
  .product-box {
    padding: 30px 40px;
  }
}
@media only screen and (min-width: 1400px) {
  .product-box {
    padding: 35px 70px;
  }
}
.product-box .product-img {
  position: absolute;
  right: 35px;
  bottom: -50px;
}
@media only screen and (min-width: 768px) {
  .product-box .product-img {
    right: 20px;
    bottom: -25px;
  }
}
@media only screen and (min-width: 992px) {
  .product-box .product-img {
    right: 35px;
    bottom: -50px;
  }
}
.product-box .product-img img {
  width: 100px;
}
@media only screen and (min-width: 576px) {
  .product-box .product-img img {
    width: 145px;
  }
}
.product-box .bg-shape {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}
.product-box .bg-shape path {
  stroke: var(--color);
}
.product-box .product-title {
  font-size: 26px;
  line-height: 1.01;
  margin-bottom: 20px;
  color: var(--color);
  text-shadow: 1px 2px 0 #282828;
}
@media only screen and (min-width: 576px) {
  .product-box .product-title {
    font-size: 30px;
  }
}
@media only screen and (min-width: 992px) {
  .product-box .product-title {
    font-size: 40px;
  }
}
@media only screen and (min-width: 1200px) {
  .product-box .product-title {
    font-size: 35px;
  }
}
@media only screen and (min-width: 1400px) {
  .product-box .product-title {
    font-size: 40px;
  }
}
.product-box .red-more-btn:hover {
  color: var(--bd-white);
}
.product-box .red-more-btn:hover::before {
  width: 100%;
  height: 100%;
  bottom: 0;
  border-radius: 21px;
}

.price {
  display: flex;
  gap: 10px;
  align-items: end;
  margin-bottom: 15px;
}
.price .current-price {
  font: 600 35px var(--bd-ff-heading);
  color: var(--bd-black);
}
@media only screen and (min-width: 1400px) {
  .price .current-price {
    font-size: 52px;
  }
}
.price .current-price span {
  font-size: 23px;
}
.price .regular-price {
  font: 600 26px var(--bd-ff-heading);
  color: rgba(40, 40, 40, 0.45);
  position: relative;
}
@media only screen and (min-width: 1400px) {
  .price .regular-price {
    font-size: 38px;
  }
}
.price .regular-price::after {
  position: absolute;
  content: "";
  left: -2px;
  top: 15px;
  height: 2px;
  width: 32px;
  background-color: var(--bd-black);
  transform: rotate(10deg);
}
@media only screen and (min-width: 1400px) {
  .price .regular-price::after {
    width: 50px;
    top: 22px;
  }
}
.price .regular-price span {
  font-size: 17px;
}

.product-active {
  padding-bottom: 50px;
}

.wrapper-space {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 40px;
}
@media only screen and (min-width: 576px) {
  .wrapper-space {
    margin: 0 auto 50px;
  }
}

.tab-btn-wrapper {
  margin-bottom: 40px;
  gap: 15px;
}
@media only screen and (min-width: 768px) {
  .tab-btn-wrapper {
    gap: 25px;
    margin-bottom: 50px;
  }
}
.tab-btn-wrapper .nav-item .nav-link {
  font-size: 18px;
  font-weight: 600;
  font-family: var(--bd-ff-heading);
  border: 2px dashed var(--color);
  color: var(--bd-black);
  padding: 8px 25px;
  border-radius: 21px;
}
@media (max-width: 575px) {
  .tab-btn-wrapper .nav-item .nav-link {
    font-size: 16px;
  }
}
@media only screen and (min-width: 768px) {
  .tab-btn-wrapper .nav-item .nav-link {
    padding: 10px 32px;
  }
}
.tab-btn-wrapper .nav-item .nav-link.active {
  background-color: var(--color);
  color: var(--bd-white);
}

.tab-product {
  background-color: #F6F1E4;
  position: relative;
}
.tab-product .row {
  --bs-gutter-y: 20px;
  --bs-gutter-x: 20px;
}
@media only screen and (min-width: 576px) {
  .tab-product .row {
    --bs-gutter-y: 30px;
    --bs-gutter-x: 30px;
  }
}
.tab-product .product-shape-top {
  position: absolute;
  left: 0;
  top: -15px;
  right: 0;
}
@media only screen and (min-width: 1600px) {
  .tab-product .product-shape-top {
    top: 0;
  }
}
.tab-product .product-shape-top img {
  width: 100%;
}
.tab-product .product-shape-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -15px;
}
@media only screen and (min-width: 1600px) {
  .tab-product .product-shape-bottom {
    bottom: 0;
  }
}
.tab-product .product-shape-bottom img {
  width: 100%;
}

.product-item {
  background-color: var(--bd-white);
  border-radius: 10px;
  position: relative;
  padding: 25px 0;
  text-align: center;
}
@media only screen and (min-width: 576px) {
  .product-item {
    padding: 25px;
  }
}
@media only screen and (min-width: 768px) {
  .product-item {
    padding: 55px;
  }
}
@media only screen and (min-width: 992px) {
  .product-item {
    padding: 25px;
  }
}
@media only screen and (min-width: 1400px) {
  .product-item {
    padding: 55px;
  }
}
.product-item:hover .button-group {
  transform: scaleX(1) translateY(-50%);
}
@media only screen and (min-width: 1400px) {
  .product-item:hover .button-group {
    transform: scaleX(1);
  }
}
.product-item:hover .thumb .secondary-img {
  transform: scale(1);
  opacity: 1;
  visibility: visible;
}
.product-item .thumb {
  margin-bottom: 20px;
  display: inline-block;
  padding: 0 20px;
}
@media only screen and (min-width: 576px) {
  .product-item .thumb {
    padding: 0;
  }
}
.product-item .thumb a {
  display: block;
  position: relative;
}
.product-item .thumb .img {
  max-width: 100%;
  transition: all 0.3s ease-out 0s;
}
.product-item .thumb .secondary-img {
  opacity: 0;
  visibility: hidden;
  transition: all linear 0.3s;
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  height: 100%;
  transform: scale(0);
}
.product-item .thumb .label {
  position: absolute;
  right: 5px;
  top: 5px;
  font-size: 14px;
  font-weight: 600;
  color: var(--bd-white);
  border-radius: 13px;
  background-color: var(--color);
  display: inline-block;
  padding: 2px 10px;
}
@media only screen and (min-width: 576px) {
  .product-item .thumb .label {
    right: 20px;
    top: 20px;
  }
}
@media only screen and (min-width: 768px) {
  .product-item .thumb .label {
    font-size: 16px;
  }
}
@media only screen and (min-width: 992px) {
  .product-item .thumb .label {
    font-size: 14px;
  }
}
@media only screen and (min-width: 1200px) {
  .product-item .thumb .label {
    font-size: 16px;
  }
}

.tooltip-inner {
  font-size: 14px;
}

.product-item-name {
  margin-bottom: 10px;
  font-size: 18px;
}
@media only screen and (min-width: 576px) {
  .product-item-name {
    font-size: 22px;
  }
}
@media only screen and (min-width: 768px) {
  .product-item-name {
    font-size: 24px;
  }
}
@media only screen and (min-width: 992px) {
  .product-item-name {
    font-size: 20px;
  }
}
@media only screen and (min-width: 1200px) {
  .product-item-name {
    font-size: 22px;
  }
}
@media only screen and (min-width: 1400px) {
  .product-item-name {
    font-size: 24px;
  }
}

.product-item-info a:hover {
  color: var(--bd-primary);
}
.product-item-info .ratting {
  color: #E39D66;
  margin-bottom: 7px;
  font-size: 14px;
}
@media only screen and (min-width: 768px) {
  .product-item-info .ratting {
    font-size: 18px;
  }
}
@media only screen and (min-width: 992px) {
  .product-item-info .ratting {
    font-size: 14px;
  }
}
@media only screen and (min-width: 1200px) {
  .product-item-info .ratting {
    font-size: 18px;
  }
}
.product-item-info .price {
  gap: 5px;
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
}
.product-item-info .price .current {
  font-size: 16px;
  font-weight: 600;
}
@media only screen and (min-width: 768px) {
  .product-item-info .price .current {
    font-size: 20px;
  }
}
@media only screen and (min-width: 992px) {
  .product-item-info .price .current {
    font-size: 16px;
  }
}
@media only screen and (min-width: 1200px) {
  .product-item-info .price .current {
    font-size: 20px;
  }
}
.product-item-info .price .regular {
  font-size: 14px;
  font-weight: 600;
  color: #9B9892;
}
@media only screen and (min-width: 768px) {
  .product-item-info .price .regular {
    font-size: 16px;
  }
}

.button-group {
  display: flex;
  gap: 10px;
  position: absolute;
  left: 0;
  right: 0;
  justify-content: center;
  top: 50%;
  transition: 0.3s;
  transform: scaleX(0) translateY(-50%);
}
@media only screen and (min-width: 1400px) {
  .button-group {
    top: 20%;
    left: inherit;
    right: 20px;
    flex-direction: column;
    transform: scaleX(0);
  }
}
.button-group button {
  padding: 7px 9px;
  font-size: 14px;
  background: var(--bd-white);
  color: #4ac1f7;
  border: 1px dashed #4ac1f7;
  border-radius: 5px;
}
@media only screen and (min-width: 768px) {
  .button-group button {
    font-size: 18px;
    padding: 8px 11px;
  }
}
@media only screen and (min-width: 992px) {
  .button-group button {
    padding: 7px 9px;
    font-size: 14px;
  }
}
@media only screen and (min-width: 1200px) {
  .button-group button {
    font-size: 18px;
    padding: 8px 11px;
  }
}
.button-group button:hover {
  background: #4ac1f7;
  color: var(--bd-white);
}

.product-offer {
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: column-reverse;
}
@media only screen and (min-width: 768px) {
  .product-offer {
    flex-direction: row;
    align-items: end;
  }
}
.product-offer .offer-shape {
  position: absolute;
  right: 180px;
  top: 40px;
  display: none;
}
@mediaonly screen and (min-width: 768px)  {
  .product-offer .offer-shape {
    display: block;
  }
}
.product-offer .trending-content {
  flex: 0 0 auto;
  padding: 40px 0;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .product-offer .trending-content {
    padding: 0px 20px;
    padding-bottom: 80px;
  }
}
.product-offer:before {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  background-color: #FFF6D6;
  z-index: -1;
}
@media only screen and (min-width: 768px) {
  .product-offer:before {
    height: 70%;
  }
}

.trending-img {
  text-align: center;
}
@media only screen and (min-width: 992px) {
  .trending-img {
    margin-left: -80px;
  }
}
@media only screen and (min-width: 1200px) {
  .trending-img {
    margin-left: -100px;
  }
}
@media only screen and (min-width: 1600px) {
  .trending-img {
    margin-left: -200px;
  }
}
.trending-img img {
  width: 200px;
}
@media only screen and (min-width: 768px) {
  .trending-img img {
    width: 625px;
  }
}

.offer-box {
  background-color: var(--bd-white);
  position: relative;
  padding: 60px 30px;
  text-align: center;
  max-width: 540px;
  margin: auto;
  border-radius: 65% 35% 40% 60%/59% 48% 52% 41%;
  animation: img-border 4s linear infinite alternate;
  transition: all 0.3s ease-out 0s;
}
@media only screen and (min-width: 576px) {
  .offer-box {
    padding: 100px 30px;
  }
}
@media only screen and (min-width: 1400px) {
  .offer-box {
    padding: 160px 60px;
  }
}
.offer-box:before {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  background-color: #D2F6FF;
  left: 20px;
  top: -20px;
  z-index: -1;
  border-radius: 65% 35% 40% 60%/59% 48% 52% 41%;
  animation: img-border 4s linear infinite alternate;
  transition: all 0.3s ease-out 0s;
}

.trending-content span {
  font-size: 18px;
  color: var(--bd-black);
  display: inline-block;
}
@media only screen and (min-width: 1200px) {
  .trending-content span {
    font-size: 24px;
  }
}
.trending-content h2 {
  font-size: 35px;
  margin-bottom: 25px;
}
@media only screen and (min-width: 1200px) {
  .trending-content h2 {
    font-size: 60px;
  }
}
@media only screen and (min-width: 1400px) {
  .trending-content h2 {
    font-size: 85px;
  }
}

.product-details .ratting {
  color: #E39D66;
  margin-bottom: 10px;
}
@media only screen and (min-width: 768px) {
  .product-details .ratting {
    font-size: 14px;
  }
}
@media only screen and (min-width: 1200px) {
  .product-details .ratting {
    font-size: 18px;
  }
}
.product-details .red-more-btn::before {
  background-color: var(--btn-color);
}
.product-details .red-more-btn:hover {
  color: var(--bd-white);
}
.product-details .red-more-btn:hover::before {
  width: 100%;
  height: 100%;
  bottom: 0;
  border-radius: 21px;
}

.trending-single-item {
  border-radius: 15px;
  padding: 25px 35px;
  background-color: var(--color);
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  text-align: center;
  max-width: 350px;
  margin: auto;
}
@media only screen and (min-width: 576px) {
  .trending-single-item {
    flex-direction: row;
    gap: 35px;
    text-align: start;
    max-width: 100%;
  }
}
@media only screen and (min-width: 992px) {
  .trending-single-item {
    padding: 20px;
    gap: 20px;
  }
}
@media only screen and (min-width: 1400px) {
  .trending-single-item {
    padding: 25px 35px;
    gap: 35px;
  }
}
.trending-single-item:not(:last-child) {
  margin-bottom: 30px;
}

.trending-thumb {
  flex: 0 0 auto;
}
@media only screen and (min-width: 768px) {
  .trending-thumb {
    width: 140px;
  }
}
@media only screen and (min-width: 1400px) {
  .trending-thumb {
    width: inherit;
  }
}

.product-single-title {
  margin-bottom: 10px;
  font-size: 22px;
}
@media only screen and (min-width: 768px) {
  .product-single-title {
    font-size: 20px;
  }
}
@media only screen and (min-width: 1200px) {
  .product-single-title {
    font-size: 22px;
  }
}
@media only screen and (min-width: 1400px) {
  .product-single-title {
    font-size: 24px;
  }
}
.product-single-title a:hover {
  color: var(--bd-primary);
}

.trending-price {
  display: flex;
  gap: 2px;
  align-items: end;
  margin-bottom: 10px;
  justify-content: center;
}
@media only screen and (min-width: 576px) {
  .trending-price {
    justify-content: start;
  }
}
.trending-price .current {
  font-size: 20px;
  color: var(--bd-black);
}
.trending-price .regular {
  font-size: 16px;
  color: #9B9892;
}

.cta-offer {
  background-color: #C5EBFC;
  position: relative;
  z-index: 2;
}
.cta-offer .cta-shape1 {
  position: absolute;
  left: 0;
  top: 30px;
  animation: rounded 5s linear infinite;
  display: none;
}
@media only screen and (min-width: 1200px) {
  .cta-offer .cta-shape1 {
    display: block;
  }
}
@media only screen and (min-width: 1600px) {
  .cta-offer .cta-shape1 {
    left: 130px;
    top: 130px;
  }
}
.cta-offer .cta-shape2 {
  position: absolute;
  left: 0;
  bottom: 80px;
  display: none;
}
@media only screen and (min-width: 1200px) {
  .cta-offer .cta-shape2 {
    display: block;
  }
}
@media only screen and (min-width: 1600px) {
  .cta-offer .cta-shape2 {
    left: 130px;
    bottom: 50px;
  }
}

.cta-img {
  text-align: center;
}
.cta-img img {
  width: 200px;
}
@media only screen and (min-width: 768px) {
  .cta-img img {
    width: 275px;
  }
}
@media only screen and (min-width: 1200px) {
  .cta-img img {
    width: 320px;
  }
}
@media only screen and (min-width: 1400px) {
  .cta-img img {
    width: initial;
  }
}

.crazy-collection .trending-single-item {
  padding: 0 0 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #E9E9E9;
  background-color: transparent;
  border-radius: 0;
}
.crazy-collection .trending-single-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border: 0;
}
@media only screen and (min-width: 768px) {
  .crazy-collection .trending-single-item {
    gap: 10px;
  }
}
@media only screen and (min-width: 1600px) {
  .crazy-collection .trending-single-item {
    gap: 35px;
    padding: 0 0 40px;
    margin-bottom: 40px;
  }
}

.collection-thumb {
  position: relative;
}
.collection-thumb::before {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
  height: 57%;
  width: 100%;
  clip-path: polygon(0 0, 100% 18%, 100% 100%, 0% 100%);
  background-color: #FFF6D6;
  z-index: -1;
}
.collection-thumb .cloud-shape {
  position: absolute;
  top: -80px;
  left: 0;
  right: 0;
  z-index: -1;
  text-align: center;
}

.collection-title {
  font-size: 26px;
  margin-bottom: 15px;
  text-align: center;
}
@media only screen and (min-width: 576px) {
  .collection-title {
    font-size: 28px;
    text-align: start;
    margin-bottom: 30px;
  }
}
@media only screen and (min-width: 768px) {
  .collection-title {
    font-size: 26px;
  }
}
@media only screen and (min-width: 992px) {
  .collection-title {
    font-size: 30px;
  }
}

.offer-slide-active {
  padding-bottom: 50px;
}

.offer-single {
  background-color: var(--color);
  display: flex;
  gap: 20px;
  align-items: center;
  position: relative;
}
@media only screen and (min-width: 768px) {
  .offer-single {
    padding: 20px 0;
  }
}
@media only screen and (min-width: 992px) {
  .offer-single {
    padding: 0;
  }
}
.offer-single .slide-thumb {
  position: relative;
  width: 370px;
  top: 70px;
  z-index: 2;
}
@media only screen and (min-width: 768px) {
  .offer-single .slide-thumb {
    width: 270px;
  }
}
@media only screen and (min-width: 992px) {
  .offer-single .slide-thumb {
    width: 370px;
  }
}
.offer-single .slide-thumb::before {
  position: absolute;
  content: "";
  left: 40px;
  top: -50px;
  height: 150px;
  width: 150px;
  background-color: #F7F7F7;
  border-radius: 65% 35% 40% 60%/59% 48% 52% 41%;
  z-index: -1;
}
@media only screen and (min-width: 576px) {
  .offer-single .slide-thumb::before {
    left: 60px;
    top: -50px;
    height: 200px;
    width: 200px;
  }
}
@media only screen and (min-width: 768px) {
  .offer-single .slide-thumb::before {
    left: 10px;
    top: -50px;
    height: 150px;
    width: 150px;
  }
}
@media only screen and (min-width: 992px) {
  .offer-single .slide-thumb::before {
    left: 60px;
    top: -50px;
    height: 200px;
    width: 200px;
  }
}
@media only screen and (min-width: 1200px) {
  .offer-single .slide-thumb::before {
    left: 10px;
  }
}
@media only screen and (min-width: 1600px) {
  .offer-single .slide-thumb::before {
    left: 60px;
  }
}

.offer-slide-details {
  width: 300px;
  padding-right: 10px;
}
.offer-slide-details h5 {
  font-size: 20px;
  margin-bottom: 20px;
  line-height: 1.35;
}
@media only screen and (min-width: 576px) {
  .offer-slide-details h5 {
    font-size: 24px;
  }
}
@media only screen and (min-width: 768px) {
  .offer-slide-details h5 {
    font-size: 20px;
  }
}
@media only screen and (min-width: 1600px) {
  .offer-slide-details h5 {
    font-size: 24px;
  }
}

@media only screen and (min-width: 1200px) {
  .product-left {
    padding-right: 20px;
  }
}

.color-list li {
  position: relative;
  padding: 13px 25px;
  padding-left: 60px;
  color: var(--bd-text-body);
  display: flex;
  justify-content: space-between;
  background-color: var(--bg-color);
  border-radius: 3px;
}
.color-list li:not(:last-child) {
  margin-bottom: 20px;
}
.color-list li::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  height: 25px;
  width: 25px;
  background-color: var(--bg-color-2);
  border-radius: 4px;
}

.price_filter {
  padding-top: 1px;
}
.price_filter .ui-slider.ui-slider-horizontal.ui-widget.ui-widget-content.ui-corner-all {
  background: #ECD5D5 none repeat scroll 0 0;
  border: medium none;
  border-radius: 30px;
  height: 6px;
  margin-bottom: 20px;
  margin-top: 5px;
  margin-left: auto;
}
.price_filter .ui-slider-range {
  background: var(--bd-black) none repeat scroll 0 0;
  border-radius: 2px;
  z-index: 0;
}
.price_filter .ui-slider-handle.ui-state-default.ui-corner-all {
  height: 12px;
  width: 12px;
  top: -4px;
  background-color: var(--bd-white);
  margin-left: 0;
  border-radius: 0;
  border: 2px solid var(--bd-black);
  z-index: 1;
}
.price_filter .ui-slider-handle.ui-state-default.ui-corner-all:focus {
  outline: none;
  box-shadow: none;
}

.price_slider_amount {
  overflow: hidden;
  display: flex;
  align-items: center;
}
.price_slider_amount span {
  margin-right: 2px;
  color: var(--bd-text-body);
}
.price_slider_amount > input[type=text] {
  height: auto;
  margin-left: 0;
  font-size: 16px;
  color: var(--bd-black);
  text-align: left;
  max-width: 110px;
  border: none;
  font-weight: 500;
  background: transparent;
  padding: 0;
}
.price_slider_amount > input[type=submit] {
  margin-left: auto;
  text-transform: uppercase;
  cursor: pointer;
  min-width: 70px;
  padding: 9px 12px;
  color: var(--bd-white);
  font-size: 14px;
  text-align: center;
  background: var(--bd-primary);
  font-weight: 500;
  justify-content: center;
  border: none;
  line-height: 1;
  transition: all 0.3s ease-out 0s;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
}
.price_slider_amount > input[type=submit]:hover {
  color: var(--bd-white);
  background: var(--bd-secondary);
  border-color: var(--bd-secondary);
}

/*----------------------------------------*/
/*  8.7 course details css
/*----------------------------------------*/
@media only screen and (min-width: 1200px) {
  .course-details-wrapper {
    padding-right: 20px;
  }
}
.course-details-wrapper .details-thumb {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
}

.course-single-info p {
  color: var(--color);
  margin-bottom: 0;
}

.course-details-info {
  display: flex;
  gap: 20px;
  margin: 30px 0px;
  background: var(--bd-white);
  padding: 37px 30px;
  border-radius: 14px;
  box-shadow: 1px 5px 5px 2px rgba(0, 0, 0, 0.0392156863);
  flex-wrap: wrap;
  position: relative;
}
@media only screen and (min-width: 768px) {
  .course-details-info {
    gap: 0;
    margin: -65px 25px 40px 25px;
    justify-content: space-between;
  }
}

.course-info-list {
  margin-bottom: 40px;
}
@media only screen and (min-width: 768px) {
  .course-info-list {
    margin-bottom: 60px;
  }
}
.course-info-list ul {
  display: inline-block;
}
.course-info-list ul li {
  position: relative;
  display: block;
  margin-bottom: 10px;
}
@media only screen and (min-width: 1400px) {
  .course-info-list ul li {
    width: 50%;
    float: left;
  }
}
.course-info-list ul li svg {
  padding-right: 10px;
}
.course-info-list ul li svg path:first-child {
  fill: var(--color);
}

.course-btn {
  display: flex;
  gap: 25px;
  align-items: center;
  padding-top: 20px;
  flex-wrap: wrap;
}

.course-tab {
  margin-bottom: 20px;
}
.course-tab ul {
  gap: 10px;
}
@media only screen and (min-width: 768px) {
  .course-tab ul {
    gap: 25px;
  }
}
.course-tab .nav-item .nav-link {
  color: var(--bd-black);
  padding: 13px 24px;
  border-radius: 8px;
  border: 1px solid #E0E0E0;
}
.course-tab .nav-item .nav-link:hover {
  border-color: #18E2E2;
  background-color: #18E2E2;
  color: var(--bd-white);
}
.course-tab .nav-item .nav-link.active {
  border-color: #18E2E2;
  background-color: #18E2E2;
  color: var(--bd-white);
}

.theme-btn.course-btn-two {
  background-color: var(--bd-primary);
}
.theme-btn.course-btn-two:hover {
  background-color: #FFA227;
}

.related-item-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
}
@media only screen and (min-width: 768px) {
  .related-item-top {
    margin-bottom: 50px;
  }
}

.navigation__wrappre-two {
  display: flex;
  gap: 20px;
}
.navigation__wrappre-two button {
  height: 45px;
  width: 45px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bd-primary);
  color: var(--bd-white);
  border-radius: 50% 50% 58% 42%/50% 36% 64% 50%;
  position: relative;
}
@media only screen and (min-width: 768px) {
  .navigation__wrappre-two button {
    height: 60px;
    width: 60px;
  }
}
.navigation__wrappre-two button:hover {
  background-color: var(--bd-primary);
}
.navigation__wrappre-two button::before {
  content: "";
  position: absolute;
  left: -1px;
  top: -1px;
  width: 107%;
  height: 107%;
  border-radius: 50% 50% 58% 42%/50% 36% 64% 50%;
  border: 1px solid #222429;
  z-index: -1;
  transition: all 0.3s linear;
}
.navigation__wrappre-two .related-button_prev {
  background-color: #31C9A8;
}

.related-item-slider .service-single {
  background-color: var(--bg-color);
}

.sidebar-content {
  padding: 30px;
  text-align: center;
  background-color: #FFF6D6;
  border-radius: 8px;
  border: 1px solid #E2D9BD;
  position: relative;
}
@media only screen and (min-width: 1400px) {
  .sidebar-content {
    padding: 56px;
  }
}
.sidebar-content .icon {
  position: absolute;
  right: 5px;
  bottom: 0;
}
.sidebar-content p {
  font-size: 20px;
  color: var(--bd-black);
  max-width: 210px;
  margin: auto;
}
.sidebar-content a {
  font-size: 24px;
  font-weight: 600;
  color: var(--bd-black);
}
@media only screen and (min-width: 768px) {
  .sidebar-content a {
    font-size: 30px;
  }
}
@media only screen and (min-width: 992px) {
  .sidebar-content a {
    font-size: 24px;
  }
}
@media only screen and (min-width: 1400px) {
  .sidebar-content a {
    font-size: 30px;
  }
}

.pdf-download {
  background-color: #31C9A8;
  padding: 15px 20px;
  border-radius: 8px;
}
.pdf-download a {
  gap: 10px;
  color: var(--bd-white);
}

@media only screen and (min-width: 992px) {
  .product-descrip-content {
    margin-top: 80px;
  }
}

.related-product .product-item {
  border: 1px solid #C4C4C4;
}

.product-tab-content p:last-child {
  margin-bottom: 0;
}

/*----------------------------------------*/
/*  8.4 checkout css
/*----------------------------------------*/
.checkbox-form h5 {
  margin-bottom: 30px;
}

.country-select {
  margin-bottom: 30px;
  position: relative;
}
.country-select select {
  width: 100%;
  background-color: transparent;
  border: 1px solid #E0E0E0;
  padding: 0 10px;
  height: 50px;
}
.country-select .nice-select {
  border: 1px solid #E0E0E0;
  height: 55px;
  padding-left: 20px;
  width: 100%;
  color: #575757;
  margin-bottom: 20px;
  font-size: 16px;
  line-height: 50px;
}
.country-select .nice-select::after {
  border-bottom: 1px solid var(--bd-black);
  border-right: 1px solid var(--bd-black);
  height: 7px;
  width: 7px;
}
.country-select .nice-select .list {
  width: 100%;
}

.country-select label,
.checkout-form-list label {
  color: var(--bd-black);
  display: block;
  margin: 0 0 5px;
}

.country-select label span.required,
.checkout-form-list label span.required {
  color: var(--bd-black);
}

.country-select .nice-select::before {
  color: var(--bd-text-body);
  right: 20px;
}

.checkout-form-list {
  margin-bottom: 30px;
}

.checkout-form-list label {
  color: var(--bd-black);
}

.checkout-form-list input[type=text],
.checkout-form-list input[type=password],
.checkout-form-list input[type=email] {
  background: var(--bd-white);
  border: 1px solid #E0E0E0;
  height: 55px;
  padding: 0 0 0 20px;
  width: 100%;
  outline: none;
  box-shadow: none;
}
.checkout-form-list input[type=text]:focus,
.checkout-form-list input[type=password]:focus,
.checkout-form-list input[type=email]:focus {
  border-color: var(--bd-primary);
}

.checkout-form-list input[type=text]::-moz-placeholder,
.checkout-form-list input[type=password]::-moz-placeholder,
.checkout-form-list input[type=email]::-moz-placeholder {
  color: #575757;
  opacity: 1;
}

.checkout-form-list input[type=text]::placeholder,
.checkout-form-list input[type=password]::placeholder,
.checkout-form-list input[type=email]::placeholder {
  color: #575757;
  opacity: 1;
}

.checkout-form-list input[type=checkbox] {
  display: inline-block;
  margin-right: 10px;
  position: relative;
  top: 1px;
}

.create-acc label {
  color: #575757;
  display: inline-block;
}

.ship-different-title label {
  display: inline-block;
  margin-right: 10px;
}

.your-order {
  padding: 20px;
  background-color: #FFF9E3;
}
@media only screen and (min-width: 768px) {
  .your-order {
    padding: 30px;
  }
}
@media only screen and (min-width: 1200px) {
  .your-order {
    padding: 30px 40px 45px;
  }
}

.your-order h3 {
  border-bottom: 1px solid var(--bd-border-primary);
  font-size: 24px;
  margin: 0 0 20px;
  padding-bottom: 10px;
  width: 100%;
}

.your-order-table table {
  background: none;
  border: 0;
  width: 100%;
}

.your-order-table table th,
.your-order-table table td {
  border-bottom: 1px solid var(--bd-border-primary);
  border-right: medium none;
  color: #575757;
  font-size: 16px;
  padding: 15px 0;
  text-align: left;
}
@media (max-width: 575px) {
  .your-order-table table th,
  .your-order-table table td {
    padding-right: 10px;
  }
}

.your-order-table table th {
  border-top: medium none;
  color: var(--bd-black);
  font-weight: normal;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
  width: 250px;
}

.panel-body > p {
  color: #222;
}

.your-order-table table .shipping ul li input {
  position: relative;
  top: 2px;
}
.your-order-table table .shipping ul li label {
  color: #575757;
}
.your-order-table table .shipping th {
  vertical-align: top;
}
.your-order-table table .order-total th {
  border-bottom: 0;
}
.your-order-table table .order-total td {
  border-bottom: medium none;
}
.your-order-table table tr.order-total td span {
  color: var(--bd-black);
  font-size: 18px;
  font-weight: 500;
}

.payment-method {
  margin-top: 40px;
}
.payment-method .accordion-item:last-of-type {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.payment-method .accordion-item {
  background-color: #FFF9E3;
  border: 0;
  border-bottom: 1px solid var(--bd-border-primary);
}
.payment-method .accordion-button {
  font-size: 16px;
  font-weight: 500;
  color: var(--bd-black);
  padding: 23px 0;
  background-color: #FFF9E3;
  border: none;
}
.payment-method .accordion-button:focus {
  box-shadow: none;
}
.payment-method .accordion-button::after {
  position: absolute;
  content: "\f067";
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  font-family: "Font Awesome 6 Pro";
  font-size: 16px;
  font-weight: 400;
  margin-left: 0;
  background-image: none;
}
.payment-method .accordion-button:not(.collapsed) {
  color: var(--bd-black);
  box-shadow: none;
}
.payment-method .accordion-button:not(.collapsed)::after {
  content: "\f068";
}
.payment-method .accordion-body {
  padding: 8px 0;
  padding-bottom: 40px;
}
.payment-method .accordion-collapse {
  border: none;
}

.order-button-payment input {
  background: #232323 none repeat scroll 0 0;
  border: medium none;
  color: var(--bd-white);
  font-size: 15px;
  font-weight: 600;
  height: 40px;
  margin: 0px 0 0;
  padding: 0;
  text-transform: uppercase;
  transition: all 0.3s ease 0s;
  width: 100%;
}
.order-button-payment input:hover {
  background: #3e976c none repeat scroll 0 0;
}

.order-button-payment {
  text-align: center;
}

.payment-method .btn-link {
  user-select: none;
  -moz-user-select: none;
  background: no-repeat;
  border: medium none;
  border-radius: 0;
  color: #444;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1px;
  line-height: 1;
  margin-bottom: 0;
  padding: 3px 10px;
  text-align: center;
  text-transform: uppercase;
  transition: all 0.3s ease 0s;
  vertical-align: middle;
  white-space: nowrap;
  text-decoration: none;
}
.payment-method .card {
  background-color: var(--bd-white);
  border: 1px solid var(--bd-border-primary);
  border-radius: 0;
  margin-bottom: 10px;
}
.payment-method .accordion .card:first-of-type {
  border: 1px solid var(--bd-border-primary);
}
.payment-method .card-header {
  background-color: var(--bd-white);
  border-bottom: 1px solid var(--bd-border-primary);
}

.ordder-top {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  margin-bottom: 30px;
}
.ordder-top .checkout-form-list {
  margin-bottom: 0;
}

/*----------------------------------------*/
/*  8.3 cart css
/*----------------------------------------*/
.table > :not(:first-child) {
  border-top: 0;
}

.cart-area .table-content table {
  border-color: var(--bd-border-primary);
  border-radius: 0;
  text-align: center;
  width: 100%;
  margin-bottom: 0;
  border-spacing: 0 30px;
  border-collapse: separate;
}
.cart-area .table-content .product-quantity {
  float: none;
}
.cart-area .table-content table td.product-name {
  font-size: 18px;
  font-weight: 400;
  text-transform: capitalize;
}
.cart-area .table-content table td.product-name a {
  color: var(--bd-black);
}
.cart-area .table-content table td.product-name a:hover {
  color: var(--bd-primary);
}
.cart-area .table-content table td {
  border-top: medium none;
  padding: 20px 10px;
  vertical-align: middle;
  font-size: 16px;
}
.cart-area .table-content table th,
.cart-area .table-content table td {
  white-space: nowrap;
  border: 0;
  font-weight: 400;
}
.cart-area .product-remove a {
  background: var(--bd-black);
  color: var(--bd-white);
  border: 2px solid var(--bd-black);
  padding: 6px 12px;
  border-radius: 50%;
  display: inline-block;
}
.cart-area .product-remove a:hover {
  background-color: var(--bd-primary);
  border-color: var(--bd-primary);
}
.cart-area .table-content table td.product-subtotal {
  font-size: 16px;
}
.cart-area .table-content table td .cart-plus-minus {
  float: none;
  margin: 0 auto;
}
.cart-area .coupon-all {
  margin-top: 50px;
}
.cart-area .coupon-all .btn {
  white-space: inherit;
}
.cart-area .coupon {
  float: left;
  gap: 15px;
  flex-wrap: wrap;
}
@media (max-width: 767px) {
  .cart-area .coupon {
    float: none;
  }
}
.cart-area #coupon_code {
  height: 60px;
  border: 1px solid var(--bd-border-primary);
  padding: 0 15px;
  outline: none;
  box-shadow: none;
  border-radius: 3px;
  width: auto;
}
.cart-area #coupon_code:focus {
  border-color: var(--bd-primary);
}
.cart-area .coupon2 {
  float: right;
}
.cart-area .cart-page-total {
  padding-top: 50px;
}
.cart-area .cart-page-total > h2 {
  font-size: 20px;
  margin-bottom: 20px;
  text-transform: capitalize;
}
.cart-area .cart-page-total > ul {
  border: 1px solid var(--bd-border-primary);
}
.cart-area .cart-page-total > ul > li {
  list-style: none;
  font-size: 16px;
  color: #575757;
  padding: 14px 30px;
  border-bottom: 1px solid var(--bd-border-primary);
  font-weight: 400;
}
.cart-area .cart-page-total ul > li > span {
  float: right;
}
.cart-area .cart-page-total li:last-child {
  border-bottom: 0;
}
.cart-area td.product-thumbnail img {
  width: 125px;
}
.cart-area .product-quantity-form {
  margin: auto;
  width: 122px;
  height: 58px;
  border: 1px solid var(--bd-border-primary);
  text-align: center;
  position: relative;
  transition: 0.3s;
}
.cart-area .product-quantity-form:hover {
  border-color: var(--bd-black);
}
.cart-area .cart-plus, .cart-area .cart-minus {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 45px;
  height: 40px;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  font-size: 14px;
  background: transparent;
  border: none;
  outline: none;
}
.cart-area .cart-plus:hover, .cart-area .cart-minus:hover {
  cursor: pointer;
  color: var(--bd-black);
  background: transparent;
}
.cart-area .cart-plus {
  left: auto;
  right: 0;
}
.cart-area .cart-input {
  height: 58px;
  width: 32px;
  text-align: center;
  font-size: 14px;
  border: none;
  display: inline-block;
  vertical-align: middle;
  margin: 0 -3px;
  padding-bottom: 4px;
  background: transparent;
  padding: 0;
}
.cart-area .cart-input:focus {
  outline: none;
}

.table-content table tbody td {
  background-color: transparent;
  border-style: inherit;
}
.table-content table tbody tr {
  background-color: #F9F9F9;
  border-style: inherit;
}

/* price filter */
.price-filter input {
  font-size: 14px;
  background: transparent;
  border: none;
  line-height: 24px;
  font-weight: 500;
  word-spacing: 16px;
  height: 28px;
  padding: 0;
  width: 68px;
  border: 1px solid red;
  color: black;
  text-align: center;
}
.price-filter__label span {
  color: yellow;
}

.filter-item {
  margin-bottom: 50px;
}

div#slider-range {
  height: 4px;
  background: #e6e6e6;
  border: none;
}

.tab_list {
  display: flex;
  gap: 8px;
}
.tab_list .nav-item .nav-link {
  padding: 0;
  padding: 8px 12px;
  background-color: var(--bd-white);
  border-radius: 7px;
  color: var(--bd-common-black);
}
.tab_list .nav-item .active {
  background-color: var(--bd-primary);
  color: var(--bd-white);
}

/*----------------------------------------*/
/*  8.12 Profile css
/*----------------------------------------*/
.user-profile-area {
  padding: 160px 0 190px;
}
.user-profile-area .widget {
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.0784313725);
  border-radius: 12px;
  padding: 20px;
  border: 1px solid #E0E0E0;
}
@media only screen and (min-width: 576px) {
  .user-profile-area .widget {
    padding: 25px;
  }
}
@media only screen and (min-width: 768px) {
  .user-profile-area .widget {
    padding: 30px;
  }
}
@media only screen and (min-width: 992px) {
  .user-profile-area .widget {
    padding: 20px;
  }
}
@media only screen and (min-width: 1400px) {
  .user-profile-area .widget {
    padding: 30px;
  }
}
.user-profile-area .widget .widget-title {
  font-size: 22px;
  border-bottom: 3px solid #F4209F;
  padding-bottom: 15px;
  margin-bottom: 30px;
}
@media only screen and (min-width: 576px) {
  .user-profile-area .widget .widget-title {
    font-size: 24px;
  }
}
@media only screen and (min-width: 768px) {
  .user-profile-area .widget .widget-title {
    font-size: 28px;
  }
}
@media only screen and (min-width: 992px) {
  .user-profile-area .widget .widget-title {
    font-size: 24px;
  }
}
@media only screen and (min-width: 1600px) {
  .user-profile-area .widget .widget-title {
    font-size: 30px;
  }
}
.user-profile-area .widget + .widget {
  margin-top: 50px;
}
.user-profile-area .widget .profile-photo {
  position: relative;
  z-index: 1;
  width: 190px;
  height: 190px;
  margin: 0 auto 15px;
  border: 2px solid #F4209F;
  background-color: #E4FAFF;
}
.user-profile-area .widget .profile-photo .user_avatar_image {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.user-profile-area .widget .profile-photo .profile-uploader {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 50px;
  height: 50px;
  border: 2px solid #31C9A8;
  background-color: var(--bd-white);
  border-radius: 50%;
  cursor: pointer;
  padding: 0.5rem;
  line-height: normal;
  display: flex;
  align-items: center;
  justify-content: center;
}
.user-profile-area .widget p {
  margin-bottom: 0;
}
.user-profile-area .widget .menu-list li a {
  gap: 15px;
  font-size: 16px;
  font-weight: 500;
  padding: 20px 25px;
  border-radius: 8px;
  transition: all 0.2s ease;
}
@media only screen and (min-width: 1200px) {
  .user-profile-area .widget .menu-list li a {
    padding: 15px 10px;
  }
}
@media only screen and (min-width: 1600px) {
  .user-profile-area .widget .menu-list li a {
    padding: 20px 25px;
  }
}
.user-profile-area .widget .menu-list li a .arrow {
  opacity: 0;
  transition: all 0.3s;
}
.user-profile-area .widget .menu-list li a:hover, .user-profile-area .widget .menu-list li a.active {
  background-color: #D6F4EE;
}
.user-profile-area .widget .menu-list li a:hover .arrow, .user-profile-area .widget .menu-list li a.active .arrow {
  opacity: 1;
}
.user-profile-area .widget .menu-list li + li {
  margin-top: 15px;
}
.user-profile-area .profile-information {
  background-color: white;
  border-radius: 12px;
  padding: 25px 20px;
  border: 1px solid #E0E0E0;
}
@media only screen and (min-width: 576px) {
  .user-profile-area .profile-information {
    padding: 25px;
  }
}
@media only screen and (min-width: 768px) {
  .user-profile-area .profile-information {
    padding: 30px 50px;
  }
}
@media only screen and (min-width: 992px) {
  .user-profile-area .profile-information {
    padding: 25px;
  }
}
@media only screen and (min-width: 1400px) {
  .user-profile-area .profile-information {
    padding: 30px 50px;
  }
}
.user-profile-area .profile-information h5 {
  font-size: 22px;
}
@media only screen and (min-width: 768px) {
  .user-profile-area .profile-information h5 {
    font-size: 24px;
  }
}
.user-profile-area .profile-information .data-card {
  background-color: var(--color);
  padding: 30px 15px;
  border-radius: 8px;
  text-align: center;
}
@media only screen and (min-width: 1200px) {
  .user-profile-area .profile-information .data-card {
    padding: 15px;
  }
}
@media only screen and (min-width: 1400px) {
  .user-profile-area .profile-information .data-card {
    padding: 30px 15px;
  }
}
.user-profile-area .profile-information .data-card .icon {
  width: 80px;
  height: 80px;
  background-color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 15px;
}
.user-profile-area .profile-information .data-card h6 {
  font-size: 20px;
  margin: 8px 0;
}
@media only screen and (min-width: 576px) {
  .user-profile-area .profile-information .data-card h6 {
    font-size: 22px;
  }
}
.user-profile-area .profile-information table td, .user-profile-area .profile-information table th {
  font-variant-numeric: lining-nums;
  font-size: 17px;
  border: 0;
  white-space: nowrap;
  color: var(--bd-black);
}
.user-profile-area .profile-information table th {
  width: 210px;
}
.user-profile-area .profile-information .form-box {
  border: 1px solid #E0E0E0;
  border-radius: 15px;
  padding: 30px;
}
.user-profile-area .profile-information .form-title {
  background-color: var(--color);
  padding: 20px 30px;
  border-radius: 8px;
  margin-bottom: 30px;
  font-weight: 600;
}
.user-profile-area .profile-information .form-group + .form-group {
  margin-top: 15px;
}
.user-profile-area .profile-information .form-control {
  border: 1px solid #E0E0E0;
  border-radius: 8px;
}
.user-profile-area .profile-information .form-control:focus {
  border-color: #D6F4EE;
  box-shadow: none;
}
.user-profile-area .profile-information .nice-select {
  font-size: 16px;
  color: var(--bd-text-body);
  height: 60px;
  line-height: 50px;
  width: 100%;
}
.user-profile-area .purchase-history thead th {
  background-color: #D6F4EE;
  padding: 25px;
}
.user-profile-area .purchase-history td {
  padding: 25px;
}
.user-profile-area .wishlist-table .table {
  margin: 0;
  border-collapse: separate;
  border-spacing: 0 15px;
  vertical-align: middle;
  border-spacing: 0 30px;
}
.user-profile-area .wishlist-table .table > :not(caption) > * > * {
  border-bottom: 0;
}
.user-profile-area .wishlist-table .table thead th {
  font-weight: 500;
}
.user-profile-area .wishlist-table .table tbody tr {
  background-color: #F9F9F9;
}
.user-profile-area .wishlist-table .table tbody .product-icon-name {
  padding: 15px 0 15px 15px;
  min-width: 26rem;
}
.user-profile-area .wishlist-table .table tbody .product-icon-name a {
  display: flex;
  align-items: center;
  gap: 15px;
}
.user-profile-area .wishlist-table .table tbody .product-icon-name img {
  max-width: 90px;
}
.user-profile-area .wishlist-table .table tbody .product-icon-name h6 {
  flex: 1 1 0;
  font-size: 18px;
  font-weight: 500;
}
@media only screen and (min-width: 1600px) {
  .user-profile-area .wishlist-table .table tbody .product-icon-name h6 {
    font-size: 20px;
  }
}
.user-profile-area .wishlist-table .table tbody .price, .user-profile-area .wishlist-table .table tbody .total {
  font-weight: 500;
  font-variant: lining-nums;
  min-width: 160px;
}
.user-profile-area .wishlist-table .table tbody .remove {
  margin: 0 auto;
  max-width: 160px;
}
.user-profile-area .wishlist-table .table tbody .remove svg {
  width: 18px;
}
.user-profile-area .wishlist-table .table tbody .action button {
  border: 0;
  background-color: var(--bd-black);
  color: #fff;
  padding: 15px 30px;
  border-radius: 8px;
  display: block;
  white-space: nowrap;
}

@media only screen and (min-width: 1200px) {
  .user_name {
    font-size: 20px;
  }
}
@media only screen and (min-width: 1400px) {
  .user_name {
    font-size: 22px;
  }
}
@media only screen and (min-width: 1600px) {
  .user_name {
    font-size: 24px;
  }
}

.error-content {
  position: relative;
  max-width: 690px;
  margin: auto;
  text-align: center;
  z-index: 1;
}
.error-content::before {
  content: "";
  position: absolute;
  height: 200px;
  width: 2px;
  background-color: var(--bd-text-body);
  top: -110px;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
}
@media only screen and (min-width: 576px) {
  .error-content::before {
    top: -170px;
  }
}
@media only screen and (min-width: 768px) {
  .error-content::before {
    top: -225px;
  }
}
@media only screen and (min-width: 992px) {
  .error-content::before {
    top: -230px;
  }
}
@media only screen and (min-width: 1200px) {
  .error-content::before {
    top: -240px;
  }
}
@media only screen and (min-width: 1400px) {
  .error-content::before {
    top: -245px;
  }
}
@media only screen and (min-width: 1600px) {
  .error-content::before {
    top: -260px;
  }
}
.error-content .cloud {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
  z-index: -1;
}
.error-content h2 {
  font-size: 60px;
  color: var(--bd-black);
  position: relative;
}
@media only screen and (min-width: 576px) {
  .error-content h2 {
    font-size: 80px;
  }
}
@media only screen and (min-width: 768px) {
  .error-content h2 {
    font-size: 90px;
  }
}
@media only screen and (min-width: 992px) {
  .error-content h2 {
    font-size: 120px;
  }
}
@media only screen and (min-width: 1200px) {
  .error-content h2 {
    font-size: 150px;
  }
}
.error-content h2 .bird {
  position: absolute;
  left: 50%;
  top: -20px;
  transform: translateX(-50%);
  width: 40px;
}
@media only screen and (min-width: 576px) {
  .error-content h2 .bird {
    top: -40px;
    width: 60px;
  }
}
@media only screen and (min-width: 768px) {
  .error-content h2 .bird {
    width: 70px;
  }
}
@media only screen and (min-width: 992px) {
  .error-content h2 .bird {
    width: 85px;
  }
}
.error-content h2 .text-rose {
  color: #F4209F;
}
.error-content h2 .text-blue {
  color: #1B4CFB;
}
.error-content p {
  font-size: 20px;
  margin-bottom: 15px;
  color: var(--bd-black);
}
@media only screen and (min-width: 768px) {
  .error-content p {
    margin-bottom: 20px;
    font-size: 28px;
  }
}
@media only screen and (min-width: 992px) {
  .error-content p {
    margin-bottom: 30px;
    font-size: 32px;
  }
}

.page-not-found {
  background-color: #FFF6D6;
  padding: 100px 0;
}
@media only screen and (min-width: 576px) {
  .page-not-found {
    padding: 150px 0;
  }
}
@media only screen and (min-width: 768px) {
  .page-not-found {
    padding: 200px 0;
  }
}
@media only screen and (min-width: 992px) {
  .page-not-found {
    padding: 200px 0;
  }
}

.error-page .bottom-shape .wave path {
  fill: #FFF6D6;
}

.error-page-footer {
  margin-top: 25px;
}
@media only screen and (min-width: 576px) {
  .error-page-footer {
    margin-top: 40px;
  }
}
@media only screen and (min-width: 768px) {
  .error-page-footer {
    margin-top: 75px;
  }
}
@media only screen and (min-width: 992px) {
  .error-page-footer {
    margin-top: 45px;
  }
}
@media only screen and (min-width: 1200px) {
  .error-page-footer {
    margin-top: 85px;
  }
}
@media only screen and (min-width: 1400px) {
  .error-page-footer {
    margin-top: 130px;
  }
}
@media only screen and (min-width: 1600px) {
  .error-page-footer {
    margin-top: 140px;
  }
}
.error-page-footer .footer-shape .wave {
  background-color: #FFF6D6;
}

/*# sourceMappingURL=main.css.map */