@charset "UTF-8";
/*-----------------------------------------------------------------------------------

    Theme Name: Template Name – HTML5 Template
    Author: Theme Pure
    Support: basictheme@gmail.com
    Description: Template Name  – HTML5 Template
    Version: 1.0

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

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

    01. THEME DEFAULT CSS
    02. HEADER CSS



/*----------------------------------------*/
/*  01. THEME DEFAULT CSS START
/*----------------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;900&display=swap");
:root {
  /**
  @font family declaration
  */
  --tp-ff-body: "Tajawal", sans-serif;
  --tp-ff-heading: "Tajawal", sans-serif;
  --tp-ff-p: "Tajawal", sans-serif;
  --tp-ff-fontawesome: "Font Awesome 6 Pro";
  /**
  @color declaration
  */
  --tp-common-white: #ffffff;
  --tp-common-black: #031220;
  --tp-common-black-2: #120101;
  --tp-common-black-3: #0c140f;
  --tp-common-black-4: #000000;
  --tp-common-black-5: #0e1133;
  --tp-common-green: #26c089;
  --tp-common-green-2: #3e8454;
  --tp-common-green-3: #27aa4d;
  --tp-common-green-4: #20ad96;
  --tp-common-blue: #107c76;
  --tp-common-blue-2: #4270ff;
  --tp-common-blue-3: #3c66ed;
  --tp-common-blue-4: #3083ff;
  --tp-common-cream: #fff1e0;
  --tp-common-pink: #ff6470;
  --tp-common-pink-2: #fc4c56;
  --tp-common-orange: #f37f43;
  --tp-common-orange-2: #ee6002;
  --tp-common-orange-3: #ff9f4b;
  --tp-common-purple: #e33cff;
  --tp-common-purple-2: #e64dff;
  --tp-common-yellow: #f5b455;
  --tp-common-yellow-2: #f47f42;
  --tp-common-yellow-3: #f4930e;
  --tp-common-yellow-4: #ffaa2c;
  --tp-common-yellow-5: #ff8d00;
  --tp-common-violet: #107c76;
  --tp-common-violet-2: #a794c8;
  --tp-header-primary: #031220;
  --tp-header-2: #120101;
  --tp-grey-1: #f1f1f1;
  --tp-grey-2: #f5f6f8;
  --tp-grey-3: #f8f8f8;
  --tp-grey-4: #f7f7f7;
  --tp-grey-5: #f5f5f5;
  --tp-grey-6: #dcdcdc;
  --tp-grey-7: #f9f9f9;
  --tp-grey-8: #f4fbf9;
  --tp-grey-9: #f0f8f7;
  --tp-grey-10: #f3f3f3;
  --tp-text-body: #49535b;
  --tp-text-1: #49535b;
  --tp-text-2: #555c63;
  --tp-text-3: #777a7c;
  --tp-text-4: #4b535a;
  --tp-text-5: #4a545c;
  --tp-text-6: #6f7377;
  --tp-text-7: #6b7882;
  --tp-text-8: #788086;
  --tp-text-9: #6b737a;
  --tp-text-10: #828282;
  --tp-text-11: #5f6160;
  --tp-text-12: #565958;
  --tp-text-13: #868d94;
  --tp-text-14: #56595c;
  --tp-text-15: #a1a2ab;
  --tp-theme-1: #107c76;
  --tp-theme-2: #c8a053;
  --tp-theme-3: #107c76;
  --tp-border-1: #dedede;
  /**
  @font weight declaration
  */
  --tp-fw-normal: normal;
  --tp-fw-elight: 200;
  --tp-fw-light: 300;
  --tp-fw-regular: 400;
  --tp-fw-medium: 500;
  --tp-fw-sbold: 600;
  --tp-fw-bold: 700;
  --tp-fw-ebold: 800;
  --tp-fw-black: 900;
  /**
  @font size declaration
  */
  --tp-fz-body: 14px;
  --tp-fz-p: 14px;
  --tp-fz-h1: 40px;
  --tp-fz-h2: 36px;
  --tp-fz-h3: 24px;
  --tp-fz-h4: 20px;
  --tp-fz-h5: 16px;
  --tp-fz-h6: 14px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/*---------------------------------
    typography css start 
---------------------------------*/
html {
  scroll-behavior: smooth;
}
body {
  font-family: var(--tp-ff-body);
  font-size: var(--tp-fz-body);
  font-weight: normal;
  color: var(--tp-text-body);
  line-height: 26px;
}
.text-danger{
  color: var(--tp-theme-1) !important;
}

a {
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--tp-ff-heading);
  color: var(--tp-header-primary);
  margin-top: 0px;
  font-weight: var(--tp-fw-sbold);
  line-height: 1.2;
  -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;
  transition: all 0.3s ease-out 0s;
}

h1 {
  font-size: var(--tp-fz-h1);
}

h2 {
  font-size: var(--tp-fz-h2);
}

h3 {
  font-size: var(--tp-fz-h3);
}

h4 {
  font-size: var(--tp-fz-h4);
}

h5 {
  font-size: var(--tp-fz-h5);
}

h6 {
  font-size: var(--tp-fz-h6);
}

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

p {
  font-family: var(--tp-ff-p);
  font-size: var(--tp-fz-p);
  font-weight: var(--tp-fw-normal);
  color: var(--tp-text-body);
  margin-bottom: 15px;
  line-height: 26px;
}

a,
.btn,
button,
span,
p,
i,
input,
select,
textarea,
li,
img,
svg path,
*::after,
*::before,
.transition-3,
h1,
h2,
h3,
h4,
h5,
h6 {
  -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;
  transition: all 0.3s ease-out 0s;
}

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

a:focus,
a:hover {
  color: inherit;
  text-decoration: none;
}

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

button:hover {
  cursor: pointer;
}

button:focus {
  outline: 0;
  border: 0;
}

.uppercase {
  text-transform: uppercase;
}

.capitalize {
  text-transform: capitalize;
}

input {
  outline: none;
}

input[type="color"] {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  height: 100%;
  width: 100%;
  padding: 0;
  border-radius: 50%;
}

*::-moz-selection {
  background: var(--tp-common-black);
  color: var(--tp-common-white);
  text-shadow: none;
}

::-moz-selection {
  background: var(--tp-common-black);
  color: var(--tp-common-white);
  text-shadow: none;
}

::selection {
  background: var(--tp-common-black);
  color: var(--tp-common-white);
  text-shadow: none;
}

*::-moz-placeholder {
  color: var(--tp-common-black);
  font-size: var(--tp-fz-body);
  opacity: 1;
}

*::placeholder {
  color: var(--tp-common-black);
  font-size: var(--tp-fz-body);
  opacity: 1;
}
@media (min-width: 992px) {
  .offset-lg-1 {
    margin-right: 8.33333333% !important;
    margin-left: unset !important;
  }
}

/*---------------------------------
    common classes css start 
---------------------------------*/
.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;
}

.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;
}

/*----------------------------------------
    Body Overlay 
-----------------------------------------*/
.body-overlay {
  background-color: rgba(var(--tp-common-black), 0.5);
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 99;
  left: 0;
  opacity: 0;
  visibility: hidden;
  -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;
  transition: all 0.3s ease-out 0s;
}
.body-overlay:hover {
  cursor: pointer;
}

.body-overlay.opened {
  opacity: 1;
  visibility: visible;
}

/*----------------------------------------
    Progress Wrap
-----------------------------------------*/
@media (max-width: 575px) {
  .progress-wrap {
    right: 15px;
    bottom: 15px;
  }
}

/*----------------------------------------
    basic pagination
-----------------------------------------*/
.basic-pagination ul li {
  display: inline-block;
  margin-right: 10px;
}
@media (max-width: 575px) {
  .basic-pagination ul li {
    margin-right: 5px;
  }
}
.basic-pagination ul li.active a {
  color: var(--tp-common-white);
  background: var(--tp-theme-1);
  border-color: var(--tp-theme-1);
}
.basic-pagination ul li a,
.basic-pagination ul li span {
  position: relative;
  overflow: hidden;
  background: transparent;
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 36px;
  text-align: center;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  font-weight: 500;
  font-size: 16px;
  border: 2px solid #eef0f6;
  color: var(--tp-common-black);
}
.basic-pagination ul li a:hover,
.basic-pagination ul li a.current,
.basic-pagination ul li span:hover,
.basic-pagination ul li span.current {
  background: var(--tp-theme-1);
  color: var(--tp-common-white);
  border-color: var(--tp-theme-1);
}

/*--
    - Background color
-----------------------------------------*/
.grey-bg {
  background: var(--tp-grey-1);
}

.grey-bg-2 {
  background: var(--tp-grey-2);
}

.grey-bg-3 {
  background: var(--tp-grey-3);
}

.grey-bg-4 {
  background: var(--tp-grey-4);
}

.grey-bg-8 {
  background: var(--tp-grey-8);
}

.grey-bg-9 {
  background: var(--tp-grey-9);
}

.white-bg {
  background: var(--tp-common-white);
}

.black-bg {
  background: var(--tp-common-black);
}

.black-bg-5 {
  background: var(--tp-common-black-5);
}

.theme-bg-3 {
  background: var(--tp-theme-1);
}

/*--
    - Spacing
-----------------------------------------*/
/* pulse btn */
.pulse-btn {
  display: inline-block;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  background-color: var(--tp-common-white);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  color: var(--tp-common-black);
  animation: pulse 2s infinite;
}
.pulse-btn:hover {
  background-color: var(--tp-common-black);
  color: var(--tp-common-black);
}
.pulse-btn i {
  padding-left: 2px;
}

/* header btn */
.header-btn {
  display: inline-block;
  height: 34px;
  line-height: 34px;
  text-align: center;
  font-size: 14px;
  color: var(--tp-common-white);
  background-color: var(--tp-common-black);
  font-weight: 500;
  text-transform: capitalize;
  padding: 0 25px;
}
.header-btn:hover,
.header-btn:focus {
  background-color: var(--tp-theme-1);
  color: var(--tp-common-white);
}

/* theme btn */
.tp-btn {
  display: inline-block;
  font-size: 15px;
  font-weight: 500;
  color: var(--tp-common-black);
  background-color: var(--tp-common-white);
  padding: 0 30px;
  height: 50px;
  line-height: 50px;
  text-transform: capitalize;
  /* green btn */
}
.tp-btn:hover {
  color: var(--tp-common-black);
  background-color: transparent;
  border: 2px solid rgba(12, 20, 15, 0.1);
}
.tp-btn:focus {
  color: var(--tp-common-white);
  background-color: var(--tp-common-black);
}
.tp-btn-2 {
  background-color: var(--tp-theme-1);
  color: var(--tp-common-white);
  padding: 0 40px;
  height: 45px;
  line-height: 45px;
}
.tp-btn-3 {
  height: 44px;
  line-height: 44px;
  padding: 0 27px;
  background-color: var(--tp-theme-1);
  color: var(--tp-common-white);
}
.tp-btn-3:focus {
  color: var(--tp-common-black);
  background-color: var(--tp-common-white);
}
.tp-btn-4 {
  height: 44px;
  line-height: 44px;
  padding: 0 27px;
}
.tp-btn-5 {
  display: inline-block;
  color: var(--tp-common-black-3);
  font-weight: 500;
  font-size: 14px;
  height: 44px;
  line-height: 40px;
  text-align: center;
  padding: 0 34px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
  background-color: var(--tp-common-white);
  border: 2px solid rgba(12, 20, 15, 0.1);
}
.tp-btn-5:hover {
  background-color: var(--tp-theme-2);
  color: var(--tp-common-white);
  border-color: var(--tp-theme-2);
}
.tp-btn-5:focus {
  background-color: var(--tp-theme-2);
  color: var(--tp-common-white);
  border-color: var(--tp-theme-2);
}
.tp-btn-6 {
  height: 42px;
  line-height: 38px;
  padding: 0 25px;
}
.tp-btn-7 {
  height: 46px;
  line-height: 42px;
  padding: 0 27px;
}
.tp-btn-8 {
  height: 42px;
  line-height: 38px;
  padding: 0 35px;
}
.tp-btn-8:hover {
  background-color: var(--tp-theme-1);
  color: var(--tp-common-white);
  border-color: var(--tp-theme-1);
}
.tp-btn-8:focus {
  background-color: var(--tp-theme-1);
  color: var(--tp-common-white);
  border-color: var(--tp-theme-1);
}
.tp-btn-9 {
  display: inline-block;
  color: var(--tp-common-black);
  font-weight: 500;
  font-size: 14px;
  height: 44px;
  line-height: 43px;
  text-align: center;
  padding: 0 75px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
  background-color: var(--tp-grey-5);
}
.tp-btn-9:hover {
  background-color: var(--tp-theme-3);
  color: var(--tp-common-white);
}
.tp-btn-10 {
  height: 42px;
  line-height: 38px;
  padding: 0 46px;
}
.tp-btn-10:hover {
  background-color: var(--tp-theme-3);
  color: var(--tp-common-white);
  border-color: var(--tp-theme-3);
}
.tp-btn-10:focus {
  background-color: var(--tp-theme-3);
  color: var(--tp-common-white);
  border-color: var(--tp-theme-3);
}
.tp-btn-11 {
  background-color: var(--tp-theme-3);
  border-color: var(--tp-theme-3);
  color: var(--tp-common-white);
}
.tp-btn-11:hover {
  background-color: var(--tp-common-white);
  border-color: var(--tp-common-white);
  color: var(--tp-common-black);
}
.tp-btn-12 {
  height: 46px;
  line-height: 46px;
  padding: 0 27px;
}
.tp-btn-13 {
  background-color: var(--tp-theme-1);
  color: var(--tp-common-white);
  height: 46px;
  line-height: 44px;
  padding: 0 38px;
}
.tp-btn-13:hover {
  background-color: var(--tp-common-white);
  border-color: var(--tp-common-black-3);
  color: var(--tp-common-black);
}
.tp-btn-13:focus {
  background-color: var(--tp-theme-3);
  border-color: var(--tp-theme-3);
  color: var(--tp-common-white);
}
.tp-btn-border {
  height: 44px;
  line-height: 40px;
  border: 2px solid rgba(3, 18, 32, 0.1);
  background-color: var(--tp-theme-1);
  color: var(--tp-common-white);
}
.tp-btn-green {
  display: inline-block;
  color: var(--tp-common-white);
  font-weight: 500;
  font-size: 15px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  padding: 0 30px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
  background-color: var(--tp-theme-1);
}
.tp-btn-green:hover {
  color: var(--tp-theme-1);
  background-color: transparent;
}
.tp-btn-green:focus {
  background-color: var(--tp-common-black-3);
  color: var(--tp-common-white);
}

.tp-price-btn {
  display: inline-block;
  height: 40px;
  line-height: 40px;
  text-align: center;
  padding: 0 20px;
  background-color: var(--tp-common-white);
  color: var(--tp-common-black);
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
  font-weight: 500;
}
.tp-price-btn:hover {
  background-color: var(--tp-common-black);
  color: var(--tp-common-white);
}

.tp-btn-subscribe {
  font-size: 15px;
  font-weight: 500;
  color: var(--tp-common-white);
  background-color: var(--tp-theme-1);
  height: 48px;
  line-height: 48px;
  text-align: center;
  padding: 0 17px;
}
.tp-btn-subscribe:hover {
  color: var(--tp-common-white);
  background-color: var(--tp-common-black);
}

/* link btn */
.link-btn {
  font-size: 14px;
  color: var(--tp-common-black);
  font-weight: 500;
  display: inline-block;
}
.link-btn i {
  margin-left: 5px;
}
.link-btn:hover {
  color: var(--tp-theme-1);
}

/* link btn */
.link-btn-2 {
  position: relative;
  font-size: 16px;
  color: var(--tp-text-11);
  font-weight: 500;
  padding-right: 21px;
  display: inline-block;
}
.link-btn-2 i {
  font-size: 14px;
  position: absolute;
  top: 12px;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  transition: all ease 0.2s;
  -webkit-transition: all ease 0.2s;
  -moz-transition: all ease 0.2s;
  -ms-transition: all ease 0.2s;
  -o-transition: all ease 0.2s;
}
.link-btn-2 i:first-child {
  right: 10%;
  visibility: hidden;
  opacity: 0;
}
.link-btn-2 i:last-child {
  right: 0;
}
.link-btn-2:hover {
  color: var(--tp-theme-1);
}
.link-btn-2:hover i:first-child {
  right: 0;
  visibility: visible;
  opacity: 1;
}
.link-btn-2:hover i:last-child {
  right: -10%;
  visibility: hidden;
  opacity: 0;
}
.link-btn-2.link-prev {
  padding-right: 0;
  padding-left: 21px;
}
.link-btn-2.link-prev i:first-child {
  left: 10%;
  right: auto;
}
.link-btn-2.link-prev i:last-child {
  left: 0;
  right: auto;
}
.link-btn-2.link-prev:hover i:first-child {
  left: 0%;
  right: auto;
}
.link-btn-2.link-prev:hover i:last-child {
  left: -10%;
  right: auto;
}

.link-btn-3 {
  position: relative;
  font-size: 12px;
  font-weight: 500;
  color: var(--tp-common-black);
  text-transform: uppercase;
  padding-right: 25px;
  width: 40px;
  height: 40px;
  display: inline-block;
  line-height: 36px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  border: 2px solid rgba(3, 18, 32, 0.2);
  overflow: hidden;
}
.link-btn-3 i {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  transition: all ease 0.2s;
  -webkit-transition: all ease 0.2s;
  -moz-transition: all ease 0.2s;
  -ms-transition: all ease 0.2s;
  -o-transition: all ease 0.2s;
}
.link-btn-3 i:first-child {
  left: -100%;
  visibility: hidden;
  opacity: 0;
}
.link-btn-3 i:last-child {
  right: 35%;
}
.link-btn-3:hover {
  color: var(--tp-common-white);
  background-color: var(--tp-theme-1);
}
.link-btn-3:hover i:first-child {
  left: 35%;
  visibility: visible;
  opacity: 1;
}
.link-btn-3:hover i:last-child {
  right: -100%;
  visibility: hidden;
  opacity: 0;
}

.hamurger-btn {
  width: 30px;
  height: 30px;
  position: relative;
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
  cursor: pointer;
  background: transparent;
  border: 0;
  outline: 0;
}
.hamurger-btn span {
  display: inline-block;
  width: 100%;
  background: var(--tp-common-black);
  display: block;
  position: absolute;
  height: 3px;
  width: 100%;
  opacity: 1;
  left: 0;
  z-index: 1;
}
.hamurger-btn span:nth-child(1) {
  top: 0;
}
.hamurger-btn span:nth-child(2) {
  top: 10px;
}
.hamurger-btn span:nth-child(3) {
  top: 20px;
}

/* section title css start */
.section__title {
  font-size: 46px;
  font-weight: 700;
  margin-bottom: 3px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .section__title {
    font-size: 42px;
  }
}
@media (max-width: 575px) {
  .section__title {
    font-size: 32px;
  }
}
.section__title-2 {
  font-size: 44px;
  font-weight: 800;
  margin-bottom: 8px;
  color: var(--tp-common-black-4);
}
.section__title-2-30 {
  font-size: 30px;
}
@media (max-width: 575px) {
  .section__title-2 {
    font-size: 28px;
  }
}
.section__title-3 {
  font-size: 44px;
  font-weight: 800;
  margin-bottom: 8px;
  color: var(--tp-common-black);
}
.section__title-3-30 {
  font-size: 30px;
}
@media (max-width: 575px) {
  .section__title-3 {
    font-size: 28px;
  }
}
.section__title-wrapper p {
  text-align: justify;
  font-size: 16px;
}
.section__title-44 {
  font-size: 37px;
}
@media (max-width: 575px) {
  .section__title-44 {
    font-size: 35px;
  }
}
.section__title-40 {
  font-size: 40px;
}
@media (max-width: 575px) {
  .section__title-40 {
    font-size: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .section__title-40 {
    font-size: 35px;
  }
}
.section__title-30 {
  font-size: 30px;
}
.section__title-pre {
  font-size: 16px;
  font-weight: 500;
  text-transform: capitalize;
  color: var(--tp-theme-1);
  display: inline-block;
  margin-bottom: 5px;
}
.section__title-pre-2 {
  font-size: 16px;
  font-weight: 500;
  text-transform: capitalize;
  color: var(--tp-theme-2);
  display: inline-block;
  margin-bottom: 6px;
}
.section__title-pre-3 {
  font-size: 16px;
  font-weight: 500;
  text-transform: capitalize;
  color: var(--tp-common-orange-2);
  display: inline-block;
  margin-bottom: 6px;
}

/*----------------------------------------*/
/*  BREADCRUMB CSS START
/*----------------------------------------*/
.breadcrumb__title {
  font-size: 65px;
  color: var(--tp-common-white);
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .breadcrumb__title {
    font-size: 40px;
  }
}
@media (max-width: 575px) {
  .breadcrumb__title {
    font-size: 35px;
  }
}
.breadcrumb__title-2 {
  font-size: 50px;
  line-height: 1.1;
  margin-top: 12px;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .breadcrumb__title-2 {
    font-size: 40px;
  }
}
@media (max-width: 575px) {
  .breadcrumb__title-2 {
    font-size: 26px;
  }
}
.breadcrumb__title-pre {
  display: inline-block;
  height: 24px;
  line-height: 26px;
  font-size: 14px;
  color: #ffffff;
  font-weight: 500;
  background: var(--tp-theme-2);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  padding: 0 7px;
  margin-bottom: 12px;
}
.breadcrumb__list span {
  font-size: 16px;
  color: var(--tp-common-white);
  font-weight: 500;
  padding-right: 3px;
  margin-right: 3px;
  text-transform: capitalize;
}
.breadcrumb__list span a:hover {
  color: var(--tp-theme-1);
}
.breadcrumb__list-2 span {
  font-size: 14px;
  color: var(--tp-text-11);
  font-weight: 500;
  padding-right: 3px;
  margin-right: 3px;
  text-transform: capitalize;
}
.breadcrumb__list-2 span a:hover {
  color: var(--tp-theme-1);
}
.breadcrumb__overlay {
  position: relative;
}
.breadcrumb__overlay::after {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 3, 32, 0.6);
}

.page__title-shape img {
  position: absolute;
  z-index: 1;
}
.page__title-shape img.page-title-shape-1 {
  right: 0;
  bottom: 105px;
}
.page__title-shape img.page-title-shape-2 {
  right: 105px;
  top: 35%;
}
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
  .page__title-shape img.page-title-shape-2 {
    right: 40px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .page__title-shape img.page-title-shape-2 {
    top: 28%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .page__title-shape img.page-title-shape-2 {
    top: 24%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .page__title-shape img.page-title-shape-2 {
    top: 29%;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .page__title-shape img.page-title-shape-2 {
    right: 50px;
    top: 28%;
  }
}
@media (max-width: 575px) {
  .page__title-shape img.page-title-shape-2 {
    right: 30px;
    top: 28%;
  }
}
.page__title-shape img.page-title-shape-3 {
  bottom: 35%;
  right: 0;
}
.page__title-shape img.page-title-shape-4 {
  bottom: 41%;
  right: 0;
}
.page__title-shape img.page-title-shape-5 {
  top: 61%;
  left: 0;
  z-index: -1;
}
.page__title-shape img.page-title-shape-6 {
  top: 43%;
  left: 5%;
  z-index: -1;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .page__title-shape img.page-title-shape-6 {
    top: 20%;
    left: 3%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .page__title-shape img.page-title-shape-6 {
    top: 20%;
    left: 3%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .page__title-shape img.page-title-shape-6 {
    top: 20%;
    left: 3%;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .page__title-shape img.page-title-shape-6 {
    top: 20%;
    left: 3%;
  }
}
@media (max-width: 575px) {
  .page__title-shape img.page-title-shape-6 {
    top: 9%;
    left: 3%;
  }
}
.page__title-shape img.page-title-shape-7 {
  top: 27%;
  right: 0;
  z-index: -1;
}
.page__title-shape img.page-title-shape-8 {
  top: 38%;
  right: 25%;
  z-index: -1;
}

@-webkit-keyframes pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
  }
  70% {
    -webkit-box-shadow: 0 0 0 45px rgba(255, 255, 255, 0);
  }
  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}
@keyframes pulse {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
  }
  70% {
    -moz-box-shadow: 0 0 0 45px rgba(255, 255, 255, 0);
    box-shadow: 0 0 0 45px rgba(255, 255, 255, 0);
  }
  100% {
    -moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}
#loading {
  background-color: #fff;
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: 999999;
  margin-top: 0px;
  top: 0px;
}

#loader {
  height: 50px;
  width: 50px;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  color: #007a70;
  position: absolute;
}

#loading-center {
  width: 100%;
  height: 100%;
  position: relative;
}

#loading-center-absolute {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 25%;
  transform: translate(-50%, -50%);
  text-align: center;
}

#corners {
  fill: none;
  stroke-width: 7;
  stroke: var(--tp-theme-1);
  stroke-dasharray: 25;
  animation: dash infinite 1.5s ease;
  -webkit-animation: dash infinite 1.5s ease;
}

@keyframes dash {
  100% {
    stroke-dashoffset: -50;
  }
}
/*----------------------------------------*/
/*  02. HEADER CSS START
/*----------------------------------------*/
.header__transparent {
  position: fixed !important;
  left: 0;
  margin: auto;
  top: 0;
  width: 100%;
  z-index: 99;
  background: transparent;
}
.header__info ul li {
  list-style: none;
  display: inline-block;
  margin-right: 20px;
}
.header__info ul li:last-child {
  margin-right: 0;
}
.header__info ul li a {
  color: var(--tp-text-2);
  font-size: 13px;
}
.header__info ul li a:hover {
  color: var(--tp-theme-1);
}
.header__info ul li a i {
  margin-right: 5px;
}
.header__info ul li a svg {
  width: 13px;
  height: 13px;
  margin-right: 5px;
}
.header__info ul li a svg path {
  fill: var(--tp-text-4);
}
.header__border {
  border-bottom: 1px solid rgba(3, 18, 32, 0.07);
}
.header__search-input {
  position: relative;
}
.header__search-input input {
  width: 100%;
  height: 40px;
  background-color: var(--tp-grey-1);
  border: 1px solid var(--tp-grey-1);
  padding: 0 20px;
  padding-right: 60px;
}
.header__search-input input::-webkit-input-placeholder {
  color: var(--tp-text-3);
}
.header__search-input input:-moz-placeholder {
  color: var(--tp-text-3);
}
.header__search-input input::-moz-placeholder {
  color: var(--tp-text-3);
}
.header__search-input input:-ms-input-placeholder {
  color: var(--tp-text-3);
}
.header__search-btn {
  position: absolute;
  top: 46%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  right: 15px;
  font-size: 16px;
  color: var(--tp-common-black);
  padding-left: 17px;
  background-color: var(--tp-grey-1);
}
.header__search-btn::after {
  position: absolute;
  content: "";
  left: 0;
  top: 57%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  height: 100%;
  width: 1px;
  background-color: rgba(3, 18, 32, 0.1);
}
.header__search-2 {
  margin-left: 13px;
}
.header__search-2 input {
  height: 44px;
  line-height: 44px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
  background-color: var(--tp-grey-5);
}
.header__search-2 input::-webkit-input-placeholder {
  color: var(--tp-text-10);
}
.header__search-2 input:-moz-placeholder {
  color: var(--tp-text-10);
}
.header__search-2 input::-moz-placeholder {
  color: var(--tp-text-10);
}
.header__search-2 input:-ms-input-placeholder {
  color: var(--tp-text-10);
}
.header__search-2 button::after {
  background-color: rgba(62, 132, 84, 0.14);
}
.header__search-3 button svg path {
  stroke: var(--tp-theme-3);
}
.header__login {
  /* header login 2 */
}
.header__login a {
  color: var(--tp-common-black);
}
.header__login a:hover {
  color: var(--tp-theme-1);
}
.header__login a svg {
  width: 13px;
  height: 13px;
  margin-right: 5px;
}
.header__login a svg path {
  stroke: var(--tp-common-black);
}
.header__login-2 {
  border-left: 1.5px solid rgba(12, 20, 15, 0.08);
}
.header__login-icon a {
  display: inline-block;
  width: 36px;
  height: 36px;
  line-height: 30px;
  text-align: center;
  border: 1.5px solid rgba(12, 20, 15, 0.08);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
}
.header__login-icon a:hover {
  border-color: var(--tp-common-black-3);
}
.header__login-content p {
  margin-bottom: 4px;
  line-height: 1;
  color: var(--tp-text-11);
}
@media only screen and (min-width: 768px) and (max-width: 991px),
  only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .header__bottom {
    padding-top: 20px;
    padding-bottom: 20px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .header__bottom-right {
    padding-left: 0;
  }
}
.header__bottom-3 {
  padding-top: 18px;
  padding-bottom: 18px;
}
.header__hamburger {
  margin-top: 3px;
}
.header__action ul li {
  list-style: none;
}
.header__action ul li a {
  display: inline-block;
  width: 44px;
  height: 44px;
  line-height: 38px;
  text-align: center;
  border: 2px solid rgba(12, 20, 15, 0.08);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
}
.header__action ul li a:hover {
  border-color: var(--tp-common-black-3);
}
.header__sticky.header__sticky {
  position: fixed !important;
  left: 0;
  margin: auto;
  top: 0;
  width: 100%;
  box-shadow: 0 0 60px 0 rgba(0, 0, 0, 0.07);
  z-index: 99;
  -webkit-animation: 300ms ease-in-out 0s normal none 1 running fadeInDown;
  animation: 300ms ease-in-out 0s normal none 1 running fadeInDown;
  -webkit-box-shadow: 0 10px 15px rgba(25, 25, 25, 0.1);
  background: var(--tp-common-white);
}
.header__call-content h4 {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 4px;
}
.header__call-content h4 a:hover {
  color: var(--tp-theme-3);
}
.header__call-content p {
  color: var(--tp-text-2);
  margin-bottom: 0;
  line-height: 1;
}
.header__call-content p a:hover {
  color: var(--tp-theme-3);
}
.header__lang .nice-select {
  padding: 0;
  padding-right: 17px;
  font-size: 15px;
  border: 0;
  color: var(--tp-text-11);
}
.header__lang .nice-select .current {
  color: var(--tp-text-11);
  font-size: 15px;
}
.header__lang .nice-select::after {
  right: 0;
  border-width: 1.5px;
  border-color: var(--tp-text-11);
  height: 6px;
  width: 6px;
  margin-top: -6px;
}
.header__lang .nice-select .list {
  border-radius: 0;
  margin-top: 0;
  left: auto;
  right: 0;
}
.header__lang .nice-select .list .option:hover,
.header__lang .nice-select .list .option.selected.focus {
  color: var(--tp-theme-3);
}
.header__category-content .nice-select {
  padding: 0;
  padding-right: 17px;
  font-size: 15px;
  border: 0;
  color: var(--tp-common-white);
  background-color: transparent;
  height: 20px;
  line-height: 20px;
}
.header__category-content .nice-select .current {
  color: var(--tp-common-white);
  font-size: 15px;
}
.header__category-content .nice-select::after {
  right: 0;
  border-width: 1.5px;
  border-color: var(--tp-common-white);
  height: 6px;
  width: 6px;
  margin-top: -4px;
}
.header__category-content .nice-select .list {
  border-radius: 0;
  left: auto;
  right: 0;
}
.header__category-content .nice-select .list .option {
  color: var(--tp-common-black);
}
.header__category-content .nice-select .list .option:hover,
.header__category-content .nice-select .list .option.selected.focus {
  color: var(--tp-theme-3);
}

/* logo */
.logo img {
  width: 100px;
}

/* main menu css */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .main-menu {
    margin-left: 50px;
  }
}
.main-menu ul li {
  position: relative;
  list-style: none;
  display: inline-block;
  margin-right: 27px;
}
.main-menu ul li a {
  display: inline-block;
  font-size: 16px;
  font-weight: 500;
  color: var(--tp-common-black-2);
  padding: 23px 0;
}
.main-menu ul li.has-dropdown > a {
  position: relative;
}
.main-menu ul li.has-dropdown > a::after {
  content: "\f107";
  -webkit-transform: translateY(1px);
  -moz-transform: translateY(1px);
  -ms-transform: translateY(1px);
  -o-transform: translateY(1px);
  transform: translateY(1px);
  font-size: 14px;
  color: var(--tp-common-black);
  font-family: var(--tp-ff-fontawesome);
  font-weight: 400;
  margin-left: 5px;
  display: inline-block;
}
.main-menu ul li .submenu {
  position: absolute;
  top: 120%;
  left: 0;
  width: 200px;
  padding: 17px 0;
  padding-bottom: 15px;
  background: var(--tp-common-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);
  -ms-box-shadow: 0px 10px 20px 0px rgba(8, 0, 42, 0.08);
  -o-box-shadow: 0px 10px 20px 0px rgba(8, 0, 42, 0.08);
  box-shadow: 0px 10px 20px 0px rgba(8, 0, 42, 0.08);
  -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;
  transition: all 0.3s ease-out 0s;
  visibility: hidden;
  opacity: 0;
  z-index: 11;
  border-top: 3px solid var(--tp-theme-1);
}
.main-menu ul li .submenu li {
  display: block;
  width: 100%;
  margin: 0;
}
.main-menu ul li .submenu li.has-dropdown > a::after {
  position: absolute;
  top: 50%;
  right: 25px;
  -webkit-transform: translateY(-50%) rotate(-90deg);
  -moz-transform: translateY(-50%) rotate(-90deg);
  -ms-transform: translateY(-50%) rotate(-90deg);
  -o-transform: translateY(-50%) rotate(-90deg);
  transform: translateY(-50%) rotate(-90deg);
}
.main-menu ul li .submenu li > a {
  width: 100%;
  display: block;
  padding: 3px 30px;
  text-transform: capitalize;
  color: var(--tp-text-1);
  font-weight: 500;
  position: relative;
}
.main-menu ul li .submenu li > a::after {
  right: 30px;
  -webkit-transform: translateY(-50%) rotate(-90deg);
  -moz-transform: translateY(-50%) rotate(-90deg);
  -ms-transform: translateY(-50%) rotate(-90deg);
  -o-transform: translateY(-50%) rotate(-90deg);
  transform: translateY(-50%) rotate(-90deg);
}
.main-menu ul li .submenu li .submenu {
  left: 120%;
  top: 0;
  visibility: hidden;
  opacity: 0;
}
.main-menu ul li .submenu li:hover > a {
  color: var(--tp-theme-1);
}
.main-menu ul li .submenu li:hover > a::after {
  color: var(--tp-theme-1);
}
.main-menu ul li .submenu li:hover > a::before {
  left: 0;
  right: auto;
  width: 100%;
}
.main-menu ul li .submenu li:hover > .submenu {
  left: 100%;
  visibility: visible;
  opacity: 1;
}
.main-menu ul li:hover > a {
  color: var(--tp-theme-1);
}
.main-menu ul li:hover > a::after {
  color: var(--tp-theme-1);
}
.main-menu ul li:hover > .submenu {
  top: 100%;
  visibility: visible;
  opacity: 1;
}
.main-menu-2 ul li a {
  font-weight: 500;
}
.main-menu-2 ul li:hover > a {
  color: var(--tp-theme-2);
}
.main-menu-2 ul li:hover > a::after {
  color: var(--tp-theme-2);
}
.main-menu-2 ul li .submenu {
  border-color: var(--tp-theme-2);
}
.main-menu-2 ul li .submenu li a::before {
  background-color: var(--tp-theme-2);
}
.main-menu-2 ul li .submenu li:hover > a {
  color: var(--tp-theme-2);
}
.main-menu-2 ul li .submenu li:hover > a::after {
  color: var(--tp-theme-2);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .main-menu-3 {
    margin-left: 0;
  }
}
.main-menu-3 ul li {
  margin-right: 33px;
}
.main-menu-3 ul li a {
  padding: 9px 0;
  font-weight: 500;
  color: var(--tp-common-white);
  font-size: 15px;
}
.main-menu-3 ul li:hover > a {
  color: var(--tp-common-white);
}
.main-menu-3 ul li:hover > a::after {
  color: var(--tp-common-white);
}
.main-menu-3 ul li.has-dropdown > a::after {
  color: var(--tp-common-white);
}
.main-menu-3 ul li .submenu {
  border-color: var(--tp-theme-3);
}
.main-menu-3 ul li .submenu li a::before {
  background-color: var(--tp-theme-3);
}
.main-menu-3 ul li .submenu li:hover > a {
  color: var(--tp-theme-3);
}
.main-menu-3 ul li .submenu li:hover > a::after {
  color: var(--tp-common-white);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .main-menu-mobile {
    margin-left: 0;
  }
}
.main-menu-mobile ul li {
  margin-right: 33px;
}
.main-menu-mobile ul li:hover > a {
  color: var(--tp-theme-3);
}
.main-menu-mobile ul li:hover > a::after {
  color: var(--tp-theme-3);
}
.main-menu-mobile ul li.has-dropdown > a::after {
  color: var(--tp-common-black);
}
.main-menu-mobile ul li.has-dropdown:hover a::after {
  color: var(--tp-theme-3);
}
.main-menu-mobile ul li .submenu li a::after {
  background-color: var(--tp-common-black);
}
.main-menu-mobile ul li .submenu li:hover a {
  color: var(--tp-theme-3);
}
.main-menu-mobile ul li .submenu li:hover a::after {
  background-color: var(--tp-theme-3);
}
.main-menu-border {
  position: relative;
}
.main-menu-border::after {
  position: absolute;
  content: "";
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 1px;
  height: 24px;
  background-color: rgba(12, 20, 15, 0.14);
}
@media only screen and (min-width: 768px) and (max-width: 991px),
  only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .main-menu-border::after {
    display: none;
  }
}
.main-menu-icon svg {
  -webkit-transform: translateY(-2px);
  -moz-transform: translateY(-2px);
  -ms-transform: translateY(-2px);
  -o-transform: translateY(-2px);
  transform: translateY(-2px);
}

/* mobile menu css */
.mobile__menu {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
}
.mobile__menu.header__sticky {
  visibility: visible;
  opacity: 1;
}

/*----------------------------------------*/
/*  03. MEAN MENU CSS START
/*----------------------------------------*/
/* mean menu customize */
.mean-container a.meanmenu-reveal {
  display: none;
}

.mean-container .mean-nav {
  background: none;
  margin-top: 0;
}

.mean-container .mean-bar {
  padding: 0;
  min-height: auto;
  background: none;
}

.mean-container .mean-nav > ul {
  padding: 0;
  margin: 0;
  width: 100%;
  list-style-type: none;
  display: block !important;
}

.mean-container a.meanmenu-reveal {
  display: none !important;
}

.mean-container .mean-nav ul li a {
  width: 100%;
  padding: 10px 0;
  color: var(--tp-common-black);
  border-top: 1px solid #ebebeb;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 700;
}
.mean-container .mean-nav ul li a:hover {
  color: var(--tp-theme-1);
}

.mean-container .mean-nav ul li a.mean-expand {
  margin-top: 5px;
  padding: 0 !important;
  line-height: 14px;
  border: 1px solid #ebebeb !important;
  height: 30px;
  width: 30px;
  line-height: 30px;
  color: var(--tp-common-black);
  line-height: 30px;
  top: 0;
  font-weight: 400;
}
.mean-container .mean-nav ul li a.mean-expand:hover {
  background: var(--tp-theme-1);
  color: var(--tp-common-white);
  border-color: var(--tp-theme-1);
}

.mean-container .mean-nav ul li > a > i {
  display: none;
}

.mean-container .mean-nav ul li > a.mean-expand i {
  display: inline-block;
}

.mean-container .mean-nav > ul > li:first-child > a {
  border-top: 0;
}

.mean-container .mean-nav ul li a.mean-expand.mean-clicked {
  color: var(--tp-common-black);
}

.mean-container .mean-nav ul li a.mean-expand.mean-clicked i {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  color: var(--tp-common-black);
}

/*----------------------------------------*/
/*  04. SLIDER CSS START
/*----------------------------------------*/
.slider__height {
  min-height: 620px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .slider__height {
    min-height: 645px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .slider__height {
    min-height: 545px;
  }
}
.slider__height-2 {
  min-height: 900px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .slider__height-2 {
    min-height: 1200px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .slider__height-2 {
    min-height: 1200px;
  }
}
@media (max-width: 575px) {
  .slider__height-2 {
    min-height: 950px;
  }
}
.slider__height-3 {
  min-height: 775px;
}
@media only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .slider__height-3 {
    min-height: 575px;
  }
}
.slider__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.slider__overlay {
  position: absolute;
}
  /* .slider__overlay::after {
position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: linear-gradient(
    0deg,
    rgba(0, 1, 9, 0.8) -2.84%,
    rgba(0, 2, 17, 0) 67.7%,
    rgba(0, 2, 17, 0.1) 99.11%
  );
  background: -o-linear-gradient(
    0deg,
    rgba(0, 1, 9, 0.8) -2.84%,
    rgba(0, 2, 17, 0) 67.7%,
    rgba(0, 2, 17, 0.1) 99.11%
  );
  background: -ms-linear-gradient(
    0deg,
    rgba(0, 1, 9, 0.8) -2.84%,
    rgba(0, 2, 17, 0) 67.7%,
    rgba(0, 2, 17, 0.1) 99.11%
  );
  background: -moz-linear-gradient(
    0deg,
    rgba(0, 1, 9, 0.8) -2.84%,
    rgba(0, 2, 17, 0) 67.7%,
    rgba(0, 2, 17, 0.1) 99.11%
  );
  background: -webkit-linear-gradient(
    rgba(0, 2, 17, 0.1) 99.11%,
    rgba(0, 2, 17, 0) 67.7%,
    rgba(0, 1, 9, 0.8) -2.84%,
    0deg
  ); 
}*/
@media only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .slider__overlay::after {
    width: 150%;
  }
}
.slider__overlay-3::after {
  background: linear-gradient(
    0deg,
    #0c0c0d 0.03%,
    rgba(12, 12, 13, 0) 72.59%,
    rgba(12, 12, 13, 0.2) 99.96%
  );
  background: -o-linear-gradient(
    0deg,
    #0c0c0d 0.03%,
    rgba(12, 12, 13, 0) 72.59%,
    rgba(12, 12, 13, 0.2) 99.96%
  );
  background: -ms-linear-gradient(
    0deg,
    #0c0c0d 0.03%,
    rgba(12, 12, 13, 0) 72.59%,
    rgba(12, 12, 13, 0.2) 99.96%
  );
  background: -moz-linear-gradient(
    0deg,
    #0c0c0d 0.03%,
    rgba(12, 12, 13, 0) 72.59%,
    rgba(12, 12, 13, 0.2) 99.96%
  );
  background: -webkit-linear-gradient(
    0deg,
    #0c0c0d 0.03%,
    rgba(12, 12, 13, 0) 72.59%,
    rgba(12, 12, 13, 0.2) 99.96%
  );
}
.slider__content span {
  display: inline-block;
  font-size: 15px;
  font-weight: var(--tp-fw-medium);
  color: var(--tp-common-white);
  text-transform: uppercase;
}
@media (max-width: 575px) {
  .slider__content span {
    margin-bottom: 10px;
  }
}
.slider__content p {
  font-size: 22px;
  line-height: 30px;
  color: var(--tp-common-white);
  padding-right: 10px;
  margin-bottom: 40px;
  padding-top: 2rem;
}
@media (max-width: 575px) {
  .slider__content p {
    font-size: 18px;
    line-height: 26px;
  }
}
.slider__content-2 span {
  font-size: 18px;
  font-weight: 500;
  color: var(--tp-theme-2);
  display: inline-block;
  margin-bottom: 7px;
}
.slider__content-2 p {
  font-size: 18px;
  line-height: 28px;
  color: var(--tp-text-11);
  padding-right: 50px;
  margin-bottom: 30px;
}
@media (max-width: 575px) {
  .slider__content-2 p {
    padding-right: 0;
  }
}
.slider__content-3 span {
  font-size: 16px;
  font-weight: 500;
  color: var(--tp-common-yellow-5);
  display: inline-block;
  margin-bottom: 3px;
  text-transform: uppercase;
  -webkit-transform: translateY(-2px);
  -moz-transform: translateY(-2px);
  -ms-transform: translateY(-2px);
  -o-transform: translateY(-2px);
  transform: translateY(-2px);
  margin-right: 3px;
}
.slider__content-3 p {
  font-size: 18px;
  line-height: 28px;
  color: var(--tp-text-11);
  padding-right: 50px;
  margin-bottom: 30px;
}
@media (max-width: 575px) {
  .slider__content-3 p {
    padding-right: 0;
  }
}
.slider__title {
  font-size: 60px;
  line-height: 1.5;
  color: var(--tp-common-white);
  font-weight: 900;
  margin-bottom: 15px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .slider__title {
    font-size: 60px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .slider__title {
    font-size: 60px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .slider__title {
    font-size: 45px;
  }
}
@media (max-width: 575px) {
  .slider__title {
    font-size: 30px;
  }
}
.slider__title-2 {
  font-size: 60px;
  font-weight: 700;
  color: var(--tp-common-black-3);
  letter-spacing: -0.03em;
  margin-bottom: 13px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .slider__title-2 {
    font-size: 45px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .slider__title-2 {
    font-size: 45px;
  }
}
@media (max-width: 575px) {
  .slider__title-2 {
    font-size: 28px;
  }
}
.slider__title-3 {
  font-size: 60px;
  font-weight: 800;
  color: var(--tp-common-white);
  margin-bottom: 24px;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .slider__title-3 {
    font-size: 45px;
  }
}
@media (max-width: 575px) {
  .slider__title-3 {
    font-size: 28px;
  }
}
.slider__thumb-mask {
  position: relative;
  display: inline-block;
  width: 565px;
  height: 590px;
  text-align: center;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  overflow: hidden;
  z-index: 1;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .slider__thumb-mask {
    width: 465px;
    height: 490px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .slider__thumb-mask {
    width: 500px;
    height: 520px;
  }
}
@media (max-width: 575px) {
  .slider__thumb-mask {
    width: 290px;
    height: 290px;
    margin-top: 50px;
  }
}
.slider__thumb-mask img {
  position: relative;
  bottom: -30px;
  left: 0;
  z-index: 1;
}
@media (max-width: 575px) {
  .slider__thumb-mask img {
    width: 290px;
    height: 290px;
  }
}
.slider__thumb-mask::after {
  position: absolute;
  content: "";
  top: 13%;
  right: 0;
  width: 467px;
  height: 508px;
  background: linear-gradient(
    207.02deg,
    rgba(239, 161, 70, 0.7) -12.37%,
    rgba(239, 126, 70, 0) 66.8%
  );
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
}
@media (max-width: 575px) {
  .slider__thumb-mask::after {
    width: 290px;
    height: 290px;
    top: 0;
  }
}
.slider__shape-1 {
  position: absolute;
  bottom: 18%;
  right: -18%;
  z-index: 11;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .slider__shape-1 {
    left: 0;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .slider__shape-1 {
    bottom: -25%;
    right: 0;
  }
}
@media (max-width: 575px) {
  .slider__shape-1 {
    bottom: -9%;
    right: 0;
  }
}
.slider__shape-2 {
  position: absolute;
  top: 0;
  left: -10%;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .slider__shape-2 {
    top: 18%;
    left: 0;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .slider__shape-2 {
    top: 10%;
    left: 0;
  }
}
@media (max-width: 575px) {
  .slider__shape-2 {
    top: 7%;
    left: 0;
  }
}
.slider__shape-3 {
  position: absolute;
  top: 10%;
  right: -19%;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .slider__shape-3 {
    top: 34%;
    right: -35px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .slider__shape-3 {
    top: -17%;
    right: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .slider__shape-3 {
    top: 33%;
    right: 9%;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .slider__shape-3 {
    top: -13%;
    right: 0;
  }
}
@media (max-width: 575px) {
  .slider__shape-3 {
    top: 10%;
    right: 0;
  }
}
.slider__shape-4 {
  position: absolute;
  bottom: -5%;
  left: -11%;
  -webkit-box-shadow: 0px 40px 70px rgba(12, 20, 15, 0.1);
  -moz-box-shadow: 0px 40px 70px rgba(12, 20, 15, 0.1);
  -ms-box-shadow: 0px 40px 70px rgba(12, 20, 15, 0.1);
  -o-box-shadow: 0px 40px 70px rgba(12, 20, 15, 0.1);
  box-shadow: 0px 40px 70px rgba(12, 20, 15, 0.1);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
  z-index: 11;
  animation-duration: 5s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-name: hero-bounce;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .slider__shape-4 {
    bottom: -14%;
    left: 0;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .slider__shape-4 {
    left: 0;
  }
}
@media (max-width: 575px) {
  .slider__shape-4 {
    display: none;
  }
}
.slider__shape-5 {
  position: absolute;
  top: 0;
  right: 0;
  -webkit-box-shadow: 0px 40px 60px rgba(95, 43, 0, 0.14);
  -moz-box-shadow: 0px 40px 60px rgba(95, 43, 0, 0.14);
  -ms-box-shadow: 0px 40px 60px rgba(95, 43, 0, 0.14);
  -o-box-shadow: 0px 40px 60px rgba(95, 43, 0, 0.14);
  box-shadow: 0px 40px 60px rgba(95, 43, 0, 0.14);
  z-index: 11;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
  -webkit-animation: hero-shadow 3s ease-in-out infinite alternate;
  animation: hero-shadow 3s ease-in-out infinite alternate;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .slider__shape-5 {
    right: 20%;
  }
}
@media (max-width: 575px) {
  .slider__shape-5 {
    display: none;
  }
}
.slider__search-input {
  width: 400px;
}
@media (max-width: 575px) {
  .slider__search-input {
    width: 100%;
  }
}
.slider__search-input input {
  width: 100%;
  height: 60px;
  background-color: var(--tp-common-white);
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -o-border-radius: 8px;
  -ms-border-radius: 8px;
  border-radius: 8px;
  border: 0;
  outline: 0;
  padding-left: 50px;
  padding-right: 117px;
}
.slider__search-input input::-webkit-input-placeholder {
  color: var(--tp-text-10);
}
.slider__search-input input:-moz-placeholder {
  color: var(--tp-text-10);
}
.slider__search-input input::-moz-placeholder {
  color: var(--tp-text-10);
}
.slider__search-input input:-ms-input-placeholder {
  color: var(--tp-text-10);
}
.slider__search-input button {
  position: absolute;
  top: 50%;
  right: 8px;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  display: inline-block;
  height: 46px;
  line-height: 46px;
  text-align: center;
  padding: 0 28px;
  font-size: 15px;
  font-weight: 500;
  color: var(--tp-common-white);
  background-color: var(--tp-theme-3);
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
}
.slider__search-input button:hover,
.slider__search-input button:focus {
  background-color: var(--tp-common-black-3);
  color: var(--tp-common-white);
}
.slider__search-input-icon {
  position: absolute;
  top: 50%;
  left: 25px;
  -webkit-transform: translateY(-52%);
  -moz-transform: translateY(-52%);
  -ms-transform: translateY(-52%);
  -o-transform: translateY(-52%);
  transform: translateY(-52%);
}
.slider__list ul li {
  list-style: none;
  font-size: 14px;
  color: var(--tp-common-white);
  font-weight: 500;
  margin-bottom: 7px;
}
.slider__list ul li i {
  display: inline-block;
  width: 22px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.14);
  color: var(--tp-common-white);
  font-size: 10px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  margin-right: 10px;
}
.slider__list ul li:hover i {
  background-color: var(--tp-common-white);
  color: var(--tp-common-black);
}

@media only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .main-slider-paginations {
    display: none;
  }
}
.main-slider-paginations button {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  left: 50px;
  display: inline-block;
  width: 60px;
  height: 60px;
  line-height: 56px;
  text-align: center;
  font-size: 16px;
  color: var(--tp-common-white);
  border: 2px solid rgba(255, 255, 255, 0.2);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  z-index: 1;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px),
  only screen and (min-width: 992px) and (max-width: 1199px),
  only screen and (min-width: 768px) and (max-width: 991px) {
  .main-slider-paginations button {
    left: 0;
  }
}
.main-slider-paginations button:hover {
  background-color: var(--tp-common-white);
  border-color: var(--tp-common-white);
  color: var(--tp-common-black);
}
.main-slider-paginations button.slider-button-next {
  left: auto;
  right: 50px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px),
  only screen and (min-width: 992px) and (max-width: 1199px),
  only screen and (min-width: 768px) and (max-width: 991px) {
  .main-slider-paginations button.slider-button-next {
    right: 0;
  }
}
.main-slider-paginations-2 button {
  left: 25px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px),
  only screen and (min-width: 768px) and (max-width: 991px),
  only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .main-slider-paginations-2 button {
    display: none;
  }
}
.main-slider-paginations-2 button.slider-button-next {
  left: auto;
  right: 25px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px),
  only screen and (min-width: 768px) and (max-width: 991px),
  only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .main-slider-paginations-2 button.slider-button-next {
    display: none;
  }
}

@-webkit-keyframes hero-bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}
@-moz-keyframes hero-bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}
@-ms-keyframes hero-bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}
@keyframes hero-bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}
@-webkit-keyframes hero-shadow {
  0% {
    transform: translatey(-15px);
  }
  100% {
    transform: translatey(15px);
  }
}
@-moz-keyframes hero-shadow {
  0% {
    transform: translatey(-15px);
  }
  100% {
    transform: translatey(15px);
  }
}
@-ms-keyframes hero-shadow {
  0% {
    transform: translatey(-15px);
  }
  100% {
    transform: translatey(15px);
  }
}
@keyframes hero-shadow {
  0% {
    transform: translatey(-15px);
  }
  100% {
    transform: translatey(15px);
  }
}
/*----------------------------------------*/
/*  05. FEATURES CSS START
/*----------------------------------------*/
.features__inner {
  margin-top: -70px;
  padding: 40px 60px;
  padding-bottom: 10px;
  -webkit-box-shadow: 0px 30px 50px rgba(26, 31, 35, 0.07);
  -moz-box-shadow: 0px 30px 50px rgba(26, 31, 35, 0.07);
  -ms-box-shadow: 0px 30px 50px rgba(26, 31, 35, 0.07);
  -o-box-shadow: 0px 30px 50px rgba(26, 31, 35, 0.07);
  box-shadow: 0px 30px 50px rgba(26, 31, 35, 0.07);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .features__inner {
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .features__inner {
    padding-left: 45px;
    padding-right: 45px;
  }
}
@media (max-width: 575px) {
  .features__inner {
    padding-left: 35px;
    padding-right: 35px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .features__inner .row [class*="col-"]:nth-child(2) .features__border-right {
    padding-left: 13px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .features__inner
    .row
    [class*="col-"]:nth-child(2)
    .features__border-right::after {
    display: none;
  }
}
.features__item {
  /* padding-left: 55px; */
  align-items: center !important;
  /* justify-content: space-around; */
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .features__item {
    padding-left: 35px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .features__item {
    padding-left: 30px;
  }
}
@media (max-width: 575px) {
  .features__item {
    padding: 0;
  }
}
@media (max-width: 575px) {
  .features__icon {
    margin-bottom: 20px;
  }
}
.features__icon i {
  font-size: 45px;
  color: var(--tp-theme-1);
}
.features__icon svg {
  height: 45px;
  width: 45px;
}
.features__content {
  padding-right: 0.5rem;
}
.features__content p {
  line-height: 20px;
  margin-bottom: 10px;
}
.features__title {
  font-size: 19px;
  font-weight: 600;
  margin-bottom: 5px;
}
.features__title a {
  color: var(--tp-theme-1);
}
.features__border-right {
  position: relative;
}
.features__border-right::after {
  position: absolute;
  content: "";
  right: -25px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  background-color: rgba(3, 18, 32, 0.1);
  height: 120px;
  width: 1px;
}
@media only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .features__border-right::after {
    display: none;
  }
}

/*----------------------------------------*/
/*  06. ABOUT CSS START
/*----------------------------------------*/
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .about__content {
    padding-left: 0;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .about__content {
    padding-left: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px),
  only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .about__content {
    margin-top: 50px;
    padding-left: 0;
  }
}
.about__content p {
  font-size: 16px;
  line-height: 28px;
  color: var(--tp-text-5);
  margin-bottom: 30px;
}
.about__list ul li {
  font-size: 16px;
  color: var(--tp-common-black);
  list-style: none;
  margin-bottom: 10px;
}
.about__list ul li i {
  display: inline-block;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  background-color: rgba(38, 192, 137, 0.08);
  color: var(--tp-common-green);
  font-size: 13px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  margin-right: 7px;
}
.about__list ul li:hover i {
  color: var(--tp-common-white);
  background-color: var(--tp-common-green);
}
@media only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .about__thumb-wrapper {
    margin-right: 0;
  }
}
@media (max-width: 575px) {
  .about__thumb-left {
    margin-right: 0;
  }
}
@media (max-width: 575px) {
  .about__thumb-left img {
    width: 100%;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px),
  only screen and (min-width: 992px) and (max-width: 1199px) {
  .about__thumb-2 img {
    width: 100%;
  }
}
.about__shape-1 {
  position: absolute;
  z-index: -1;
  right: -11%;
  top: 30%;
}
.about__shape-2 {
  position: absolute;
  right: -20%;
  top: 17%;
  z-index: -1;
}
.about__shape-3 {
  position: absolute;
  left: -7%;
  top: 5%;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .about__shape-3 {
    right: -4%;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .about__shape-3 {
    right: -5%;
  }
}
@media (max-width: 575px) {
  .about__shape-3 {
    right: 0;
    top: -4%;
  }
}

/*----------------------------------------*/
/*  07. COUNTER CSS START
/*----------------------------------------*/
.counter__item svg{
    vertical-align: unset;
}
.counter__item {
  padding: 45px 0px;
  /* padding-right: 5px; */
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .counter__item {
    /* padding-left: 5px; */
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .counter__item {
    /* padding-right: 5px; */
  }
}
.counter__item-border {
  position: relative;
}
.counter__item-border::after {
  position: absolute;
  content: "";
  left: -12px;
  top: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(61, 108, 231, 0) 0%,
    #3d6ce7 51.56%,
    rgba(61, 108, 231, 0) 100%
  );
  opacity: 0.3;
}
@media (max-width: 575px) {
  .counter__item-border::after {
    right: 0;
    top: auto;
    width: 100%;
    height: 1px;
    background: linear-gradient(
      90deg,
      rgba(61, 108, 231, 0) 0%,
      #3d6ce7 51.56%,
      rgba(61, 108, 231, 0) 100%
    );
    bottom: 0;
  }
}
.counter__item-border-2::after {
  background: linear-gradient(
    180deg,
    rgba(0, 122, 112, 0) 0%,
    #007a70 51.56%,
    rgba(0, 122, 112, 0) 100%
  );
}
@media (max-width: 575px) {
  .counter__item-border-2::after {
    right: 0;
    top: auto;
    width: 100%;
    height: 1px;
    background: linear-gradient(
      90deg,
      rgba(0, 122, 112, 0) 0%,
      #007a70 51.56%,
      rgba(0, 122, 112, 0) 100%
    );
    bottom: 0;
  }
}
.counter__icon i {
  font-size: 35px;
  color: var(--tp-common-black);
}
.counter__icon svg {
  width: 40px;
  height: 40px;
  -webkit-transform: translateY(9px);
  -moz-transform: translateY(9px);
  -ms-transform: translateY(9px);
  -o-transform: translateY(9px);
  transform: translateY(9px);
}
.counter__icon svg path.search,
.counter__icon svg path.st1,
.counter__icon svg path.star {
  stroke: var(--tp-theme-1);
}
.counter__icon svg path.video {
  fill: var(--tp-theme-1);
}
.counter__icon-2 svg path.search,
.counter__icon-2 svg path.st1,
.counter__icon-2 svg path.star {
  stroke: var(--tp-theme-3);
}
.counter__icon-2 svg path.video {
  fill: var(--tp-theme-3);
}
.counter__content h4 {
  font-size: 16px;
  color: var(--tp-theme-2);
  font-weight: 500;
  margin-bottom: 5px;
}
.counter__content h4 span {
  font-size: 44px;
  font-weight: 600;
  margin-right: 5px;
}
.counter__content p {
  font-size: 14px;
  line-height: 22px;
  color: var(--tp-text-4);
  margin-bottom: 0;
}
.counter__content-2 h4 {
  color: var(--tp-theme-3);
}
@media screen and (max-width: 768px) {
  .counter__inner img {
    width: 100%;
  }
  .g-img img {
    width: 100%;
  }
  
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
  only screen and (min-width: 768px) and (max-width: 991px),
  only screen and (min-width: 576px) and (max-width: 767px) {
  .counter__inner
    .row
    [class*="col-"]:nth-child(2)
    .counter__item-border::after {
    display: none;
  }
}
.counter__inner-2 {
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -o-border-radius: 20px;
  -ms-border-radius: 20px;
  border-radius: 20px;
}

/*----------------------------------------*/
/*  08. COURSE CSS START
/*----------------------------------------*/
.course__item {
  padding: 25px 25px;
  -webkit-box-shadow: 0px 1px 2px rgba(26, 31, 35, 0.07);
  -moz-box-shadow: 0px 1px 2px rgba(26, 31, 35, 0.07);
  -ms-box-shadow: 0px 1px 2px rgba(26, 31, 35, 0.07);
  -o-box-shadow: 0px 1px 2px rgba(26, 31, 35, 0.07);
  box-shadow: 0px 1px 2px rgba(26, 31, 35, 0.07);
}
.course__item:hover {
  -webkit-box-shadow: 0px 30px 50px -14px rgba(26, 31, 35, 0.07);
  -moz-box-shadow: 0px 30px 50px -14px rgba(26, 31, 35, 0.07);
  -ms-box-shadow: 0px 30px 50px -14px rgba(26, 31, 35, 0.07);
  -o-box-shadow: 0px 30px 50px -14px rgba(26, 31, 35, 0.07);
  box-shadow: 0px 30px 50px -14px rgba(26, 31, 35, 0.07);
}
.course__item:hover .course__thumb img {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);
}
.course__item-2 {
  -webkit-box-shadow: 0px 1px 2px rgba(12, 20, 15, 0.1);
  -moz-box-shadow: 0px 1px 2px rgba(12, 20, 15, 0.1);
  -ms-box-shadow: 0px 1px 2px rgba(12, 20, 15, 0.1);
  -o-box-shadow: 0px 1px 2px rgba(12, 20, 15, 0.1);
  box-shadow: 0px 1px 2px rgba(12, 20, 15, 0.1);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}
.course__item-2:hover {
  -webkit-box-shadow: 0px 30px 30px rgba(12, 20, 15, 0.1);
  -moz-box-shadow: 0px 30px 30px rgba(12, 20, 15, 0.1);
  -ms-box-shadow: 0px 30px 30px rgba(12, 20, 15, 0.1);
  -o-box-shadow: 0px 30px 30px rgba(12, 20, 15, 0.1);
  box-shadow: 0px 30px 30px rgba(12, 20, 15, 0.1);
}
.course__item-3 {
  -webkit-border-radius: 14px;
  -moz-border-radius: 14px;
  -o-border-radius: 14px;
  -ms-border-radius: 14px;
  border-radius: 14px;
  padding: 35px 30px 45px;
}
.course__item-3:hover {
  -webkit-box-shadow: 0px 30px 30px rgba(3, 18, 32, 0.08);
  -moz-box-shadow: 0px 30px 30px rgba(3, 18, 32, 0.08);
  -ms-box-shadow: 0px 30px 30px rgba(3, 18, 32, 0.08);
  -o-box-shadow: 0px 30px 30px rgba(3, 18, 32, 0.08);
  box-shadow: 0px 30px 30px rgba(3, 18, 32, 0.08);
}
.course__item-3:hover .course__icon-3 span::after {
  -webkit-transform: translate(-50%, -50%) scale(1);
  -moz-transform: translate(-50%, -50%) scale(1);
  -ms-transform: translate(-50%, -50%) scale(1);
  -o-transform: translate(-50%, -50%) scale(1);
  transform: translate(-50%, -50%) scale(1);
}
.course__item-3:hover .course__icon-3 span svg path {
  stroke: var(--tp-common-white);
}
.course__item-3:hover .course__icon-3 span svg path.fill-white {
  fill: var(--tp-common-white);
}
.course__item-list {
  padding: 0;
}
.course__item-list .course__title {
  font-size: 36px;
  margin-bottom: 25px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
  only screen and (min-width: 576px) and (max-width: 767px) {
  .course__item-list .course__title {
    font-size: 26px;
  }
}
@media (max-width: 575px) {
  .course__item-list .course__title {
    font-size: 20px;
  }
}
.course__item-list .course__tag-2 {
  margin-bottom: 10px;
}
.course__item-list .course__thumb img {
  height: 100%;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .course__item-list .course__right {
    padding-left: 65px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .course__item-list .course__right {
    padding-left: 50px;
    padding-bottom: 75px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .course__item-list .course__right {
    padding-left: 40px;
    padding-right: 40px;
    padding-bottom: 75px;
  }
}
@media (max-width: 575px) {
  .course__item-list .course__right {
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .course__item-list .course__content-bottom {
    padding-left: 50px;
    padding-right: 70px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .course__item-list .course__content-bottom {
    padding-left: 40px;
    padding-right: 40px;
  }
}
@media (max-width: 575px) {
  .course__item-list .course__content-bottom {
    padding-left: 20px;
    padding-right: 20px;
  }
}
.course__item-list-2 .course__right {
  padding-left: 50px;
  padding-right: 50px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .course__item-list-2 .course__right {
    padding-left: 35px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
  only screen and (min-width: 576px) and (max-width: 767px) {
  .course__item-list-2 .course__right {
    padding-left: 40px;
    padding-right: 40px;
  }
}
@media (max-width: 575px) {
  .course__item-list-2 .course__right {
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
  (max-width: 575px) {
  .course__item-list-2 .course__content {
    padding-bottom: 20px;
  }
}
.course__item-list-2 .course__title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 20px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .course__item-list-2 .course__thumb {
    height: 100%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .course__item-list-2 .course__content-bottom {
    padding-left: 40px;
    padding-right: 40px;
  }
}
.course__right {
  padding-left: 80px;
  padding-right: 70px;
  padding-bottom: 55px;
  position: relative;
  height: 100%;
}
.course__tag {
  margin-bottom: 12px;
}
.course__tag a {
  display: inline-block;
  height: 24px;
  line-height: 24px;
  text-align: center;
  padding: 0 13px;
  font-size: 13px;
  font-weight: 500;
  color: var(--tp-theme-1);
  background: rgba(61, 108, 231, 0.07);
}
.course__tag a:hover {
  background-color: var(--tp-theme-1);
  color: var(--tp-common-white);
}
.course__tag-2 a {
  display: inline-block;
  height: 26px;
  line-height: 26px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--tp-common-blue-3);
  background-color: rgba(60, 102, 237, 0.08);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
}
.course__tag-2.pink-bg a {
  color: var(--tp-common-pink-2);
  background-color: rgba(252, 76, 86, 0.08);
}
.course__tag-2.violet-bg a {
  color: var(--tp-common-violet);
  background-color: rgba(97, 81, 251, 0.08);
}
.course__tag-2.yellow-bg a {
  color: var(--tp-common-yellow-2);
  background-color: rgba(244, 127, 66, 0.08);
}
.course__tag-2.blue-bg-2 a {
  color: var(--tp-common-blue-4);
  background-color: rgba(48, 131, 255, 0.08);
}
.course__tag-2.purple-bg a {
  color: var(--tp-common-purple-2);
  background-color: rgba(230, 77, 255, 0.08);
}
.course__tag-3 a {
  display: inline-block;
  height: 24px;
  line-height: 24px;
  text-align: center;
  background-color: rgba(255, 159, 75, 0.08);
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  padding: 0 14px;
  color: var(--tp-common-orange-3);
}
.course__tag-4 i {
  color: var(--tp-theme-1);
  padding-right: 8px;
}
.course__tag-4 a {
  font-size: 16px;
  color: var(--tp-text-11);
  font-weight: 500;
}
.course__tag-4 a:hover {
  color: var(--tp-theme-1);
}
.course__icon-3 span {
  display: inline-block;
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  background-color: var(--tp-grey-5);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.course__icon-3 span::after {
  position: absolute;
  content: "";
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%) scale(0);
  -moz-transform: translate(-50%, -50%) scale(0);
  -ms-transform: translate(-50%, -50%) scale(0);
  -o-transform: translate(-50%, -50%) scale(0);
  transform: translate(-50%, -50%) scale(0);
  width: 100%;
  height: 100%;
  background-color: var(--tp-theme-3);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  z-index: -1;
}
.course__price {
  position: absolute;
  bottom: 12px;
  right: 0;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}
.course__price span {
  display: inline-block;
  font-size: 15px;
  font-weight: 600;
  padding: .5rem 1rem;
  color: var(--tp-common-white);
  /* width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center; */
  background-color: var(--tp-theme-1);
  /* -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%; */
  -webkit-box-shadow: 0px 20px 30px rgba(5, 34, 109, 0.14);
  -moz-box-shadow: 0px 20px 30px rgba(5, 34, 109, 0.14);
  -ms-box-shadow: 0px 20px 30px rgba(5, 34, 109, 0.14);
  -o-box-shadow: 0px 20px 30px rgba(5, 34, 109, 0.14);
  box-shadow: 0px 20px 30px rgba(5, 34, 109, 0.14);
}
.course__price-2 span {
  font-size: 20px;
  font-weight: 800;
  color: var(--tp-theme-2);
}
.course__price-3 span {
  font-size: 18px;
  font-weight: 800;
  color: var(--tp-theme-3);
}
.course__title {
  font-size: 20px;
  color: var(--tp-common-black-2);
  font-weight: 500;
}
.course__title a:hover {
  color: var(--tp-theme-1);
}
.course__title-2 {
  font-size: 20px;
  margin-bottom: 17px;
  font-weight: 600;
  line-height: 28px;
}
.course__title-2 a:hover {
  color: var(--tp-theme-2);
}
.course__title-3 {
  font-size: 22px;
  margin-bottom: 17px;
  font-weight: 600;
  line-height: 30px;
  color: var(--tp-common-black);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .course__title-3 {
    font-size: 20px;
    line-height: 28px;
  }
}
.course__title-3 a:hover {
  color: var(--tp-theme-3);
}
.course__content {
  padding-top: 23px;
  padding-bottom: 10px;
}
.course__content p {
  color: var(--tp-text-1);
  margin-bottom: 20px;
}
.course__content-2 {
  padding: 20px 30px 15px;
}
.course__content-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  padding-left: 80px;
  padding-right: 70px;
  background: var(--tp-common-white);
  padding: 15px 70px 10px 80px;
  border-top: 1px solid #f0f0f5;
}
@media (max-width: 575px) {
  .course__tutor {
    margin-bottom: 15px;
  }
}
.course__tutor a {
  display: inline-block;
  padding: 5px;
  padding-right: 20px;
  border: 2px solid rgba(67, 86, 255, 0.1);
  -webkit-border-radius: 22px;
  -moz-border-radius: 22px;
  -o-border-radius: 22px;
  -ms-border-radius: 22px;
  border-radius: 22px;
  color: var(--tp-text-1);
  font-weight: 500;
}
.course__tutor a:hover {
  color: var(--tp-theme-1);
}
.course__tutor img {
  width: 26px;
  height: 26px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  margin-right: 10px;
}
.course__tutor-2 img {
  width: 28px;
  height: 28px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
}
.course__tutor-3 img {
  width: 30px;
  height: 30px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
}
.course__lesson {
  display: inline-block;
  padding: 5px 23px;
  padding-right: 20px;
  border: 2px solid rgba(67, 86, 255, 0.1);
  -webkit-border-radius: 22px;
  -moz-border-radius: 22px;
  -o-border-radius: 22px;
  -ms-border-radius: 22px;
  border-radius: 22px;
}
.course__lesson:hover {
  color: var(--tp-theme-1);
}
.course__lesson a {
  color: var(--tp-text-1);
  display: inline-block;
}
.course__lesson i {
  font-size: 16px;
  color: var(--tp-text-1);
  margin-right: 8px;
}
.course__lesson svg {
  margin-right: 3px;
  width: 16px;
  height: 16px;
}
.course__action ul li {
  list-style: none;
  display: inline-block;
}
.course__action ul li:not(:last-child) {
  margin-right: 15px;
}
.course__action-item:hover .course__action-icon span {
  border-color: var(--tp-text-11);
}
.course__action-icon span {
  display: inline-block;
  width: 26px;
  height: 26px;
  line-height: 22px;
  text-align: center;
  border: 1px solid rgba(3, 18, 32, 0.08);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
}
.course__action-icon span svg {
  width: 12px;
  height: 12px;
}
.course__action-content span {
  font-size: 14px;
  font-weight: 500;
  color: var(--tp-text-11);
}
.course__top-2 {
  margin-bottom: 12px;
}
.course__bottom-2 {
  padding-top: 14px;
  border-top: 1px solid rgba(3, 18, 32, 0.07);
}
.course__filter .nav-tabs {
  border: 0;
}
.course__filter .nav-tabs .nav-link {
  font-size: 14px;
  font-weight: 500;
  padding: 4px 24px;
  -webkit-box-shadow: 0px 1px 2px rgba(3, 18, 32, 0.1);
  -moz-box-shadow: 0px 1px 2px rgba(3, 18, 32, 0.1);
  -ms-box-shadow: 0px 1px 2px rgba(3, 18, 32, 0.1);
  -o-box-shadow: 0px 1px 2px rgba(3, 18, 32, 0.1);
  box-shadow: 0px 1px 2px rgba(3, 18, 32, 0.1);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  background-color: var(--tp-common-white);
  margin: 0 5px;
  margin-bottom: 10px;
  color: var(--tp-common-black);
  display: inline-block;
  border: 0;
}
.course__filter .nav-tabs .nav-link:hover,
.course__filter .nav-tabs .nav-link.active {
  background-color: var(--tp-theme-2);
  color: var(--tp-common-white);
}
.course__sort-info {
  margin-top: 15px;
  padding-top: 25px;
  border-top: 1.5px solid rgba(3, 18, 32, 0.06);
  margin-bottom: 30px;
}
.course__sort-info ul li {
  list-style: none;
  margin-right: 15px;
  display: inline-block;
}
.course__sort-info ul li:last-child {
  margin-right: 0;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .course__sort-info ul li:not(:last-child) {
    margin-bottom: 15px;
  }
}
@media (max-width: 575px) {
  .course__sort-info ul li:not(:last-child) {
    margin-bottom: 15px;
  }
}
.course__sort-info ul li a {
  color: var(--tp-text-11);
}
.course__sort-info ul li a span {
  display: inline-block;
  width: 30px;
  height: 30px;
  line-height: 28px;
  text-align: center;
  background-color: var(--tp-grey-5);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  font-size: 14px;
  margin-right: 5px;
}
.course__sort-info ul li a svg {
  width: 10px;
  height: 10px;
}
.course__enroll-icon {
  position: absolute;
  left: 0;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.course__enroll-icon span {
  display: inline-block;
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  background-color: var(--tp-common-orange-3);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
}
@media (max-width: 575px) {
  .course__enroll-icon {
    left: 20px;
  }
}
.course__enroll-wrapper {
  padding: 20px 55px 25px;
  padding-right: 40px;
  -webkit-border-radius: 14px;
  -moz-border-radius: 14px;
  -o-border-radius: 14px;
  -ms-border-radius: 14px;
  border-radius: 14px;
  margin-left: 65px;
  margin-right: 35px;
}
@media only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .course__enroll-wrapper {
    margin: 0;
  }
}
.course__enroll-content p {
  font-weight: 500;
  margin-bottom: 0;
}
.course__enroll-content h4 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 0;
}
@media (max-width: 575px) {
  .course__enroll-content h4 {
    margin-bottom: 15px;
  }
}
.course__view {
  margin-left: 12px;
}
.course__view h4 {
  font-size: 15px;
  font-weight: 500;
  color: var(--tp-text-11);
  display: inline-block;
  margin-bottom: 0;
}
@media (max-width: 575px) {
  .course__sort {
    margin-top: 20px;
  }
}
.course__sort-inner .nice-select {
  min-width: 130px;
  height: 35px;
  line-height: 35px;
  border: 1px solid rgba(3, 18, 32, 0.08);
  padding: 0 15px;
}
.course__sort-inner .nice-select::after {
  right: 15px;
  width: 7px;
  height: 7px;
  border-width: 1px;
  margin-top: -5px;
  border-color: var(--tp-common-black);
}
.course__sort-inner .nice-select .list {
  width: 100%;
  left: 0;
  right: auto;
  margin-top: 0;
}
.course__summary p {
  font-size: 18px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .course__sidebar {
    padding-left: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .course__sidebar {
    padding-left: 0;
    margin-top: 50px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .course__sidebar {
    margin-top: 50px;
    padding-left: 0;
  }
}
@media (max-width: 575px) {
  .course__sidebar {
    margin-top: 50px;
    padding-left: 0;
  }
}
.course__sidebar-widget {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  padding: 27px 30px;
  padding-bottom: 24px;
  margin-bottom: 10px;
}
.course__sidebar-widget-2 {
  padding: 30px;
  -webkit-box-shadow: 0px 30px 50px 0px rgba(1, 11, 60, 0.1);
  -moz-box-shadow: 0px 30px 50px 0px rgba(1, 11, 60, 0.1);
  -ms-box-shadow: 0px 30px 50px 0px rgba(1, 11, 60, 0.1);
  -o-box-shadow: 0px 30px 50px 0px rgba(1, 11, 60, 0.1);
  box-shadow: 0px 30px 50px 0px rgba(1, 11, 60, 0.1);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
}
.course__sidebar-widget-2 ul li {
  list-style: none;
}
.course__sidebar-widget ul li {
  list-style: none;
}
.course__sidebar-title {
  font-size: 20px;
  margin-bottom: 27px;
  text-transform: capitalize;
}
.course__sidebar-search {
  position: relative;
}
.course__sidebar-search input {
  width: 100%;
  height: 60px;
  line-height: 58px;
  padding: 0 30px;
  padding-right: 45px;
  background: var(--tp-grey-1);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  border: 2px solid var(--tp-grey-1);
  outline: none;
}
.course__sidebar-search input::placeholder {
  color: var(--tp-text-11);
  font-weight: 500;
}
.course__sidebar-search input:focus {
  border-color: var(--tp-theme-1);
  background: var(--tp-common-white);
}
.course__sidebar-search button {
  width: 18px;
  height: 18px;
  background: transparent;
  position: absolute;
  top: 17px;
  right: 20px;
}
.course__sidebar-search button svg .st0 {
  fill: var(--tp-text-11);
}
.course__sidebar-search button svg .st1 {
  fill: var(--tp-common-black);
}
.course__sidebar-check input {
  margin: 0;
  appearance: none;
  -moz-appearance: none;
  display: block;
  width: 18px;
  height: 18px;
  background: var(--tp-common-white);
  border: 1px solid #c7c9d2;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  outline: none;
}
.course__sidebar-check input:checked {
  position: relative;
  background-color: var(--tp-theme-1);
  border-color: transparent;
}
.course__sidebar-check input:checked::after {
  box-sizing: border-box;
  content: "\f00c";
  position: absolute;
  font-family: var(--tp-ff-fontawesome);
  font-size: 11px;
  color: var(--tp-common-white);
  top: 46%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.course__sidebar-check input:hover {
  cursor: pointer;
}
.course__sidebar-check label {
  font-size: 15px;
  font-weight: 500;
  color: var(--tp-text-11);
  padding-left: 14px;
}
.course__sidebar-check label:hover {
  cursor: pointer;
  color: var(--tp-theme-1);
}
.course__sm-thumb img {
  width: 60px;
  height: 60px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
}
.course__sm-content h5 {
  font-size: 16px;
  margin-bottom: 0;
  font-weight: 600;
  line-height: 1;
}
.course__sm-content h5 a:hover {
  color: var(--tp-theme-1);
}
.course__sm-price span {
  font-size: 14px;
  color: var(--tp-theme-1);
  font-weight: 600;
}
.course__sm-rating ul li {
  display: inline-block;
}
.course__sm-rating ul li a {
  font-size: 10px;
  color: var(--tp-common-yellow);
  line-height: 1;
}
.course__teacher-thumb img {
  width: 35px;
  height: 35px;
  border: 2px solid var(--tp-common-white);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  -webkit-box-shadow: 0px 10px 14px 0px rgba(1, 11, 60, 0.1);
  -moz-box-shadow: 0px 10px 14px 0px rgba(1, 11, 60, 0.1);
  -ms-box-shadow: 0px 10px 14px 0px rgba(1, 11, 60, 0.1);
  -o-box-shadow: 0px 10px 14px 0px rgba(1, 11, 60, 0.1);
  box-shadow: 0px 10px 14px 0px rgba(1, 11, 60, 0.1);
}
.course__teacher-thumb-2 {
  position: relative;
}
.course__teacher-thumb-2 img {
  width: 46px;
  height: 46px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  -webkit-box-shadow: 0px 10px 20px 0px rgba(0, 5, 52, 0.1);
  -moz-box-shadow: 0px 10px 20px 0px rgba(0, 5, 52, 0.1);
  -ms-box-shadow: 0px 10px 20px 0px rgba(0, 5, 52, 0.1);
  -o-box-shadow: 0px 10px 20px 0px rgba(0, 5, 52, 0.1);
  box-shadow: 0px 10px 20px 0px rgba(0, 5, 52, 0.1);
}
.course__teacher-thumb-3 img {
  width: 44px;
  height: 44px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  border: 2px solid var(--tp-common-white);
  -webkit-box-shadow: 0px 10px 14px 0px rgba(1, 11, 60, 0.1);
  -moz-box-shadow: 0px 10px 14px 0px rgba(1, 11, 60, 0.1);
  -ms-box-shadow: 0px 10px 14px 0px rgba(1, 11, 60, 0.1);
  -o-box-shadow: 0px 10px 14px 0px rgba(1, 11, 60, 0.1);
  box-shadow: 0px 10px 14px 0px rgba(1, 11, 60, 0.1);
}
.course__teacher h6 {
  font-size: 16px;
  font-weight: 500;
  color: var(--tp-text-11);
  margin-bottom: 0;
  line-height: 1;
  padding-top: 2px;
}
.course__teacher h6 a:hover {
  color: var(--tp-theme-1);
}
.course__teacher-info h6 {
  font-size: 18px;
  line-height: 1;
  margin-bottom: 0;
}
.course__teacher-info h6 a {
  line-height: 1;
}
.course__teacher-info span {
  color: var(--tp-text-11);
  font-size: 14px;
  font-weight: 600;
}
.course__teacher-info-3 h5 {
  font-size: 14px;
  color: var(--tp-text-11);
  font-weight: 600;
  margin-bottom: 0;
}
.course__teacher-info-3 p {
  font-size: 16px;
  color: var(--tp-common-black);
  font-weight: 500;
  margin-bottom: 0;
}
.course__teacher-rating {
  position: absolute;
  top: -1px;
  right: -7px;
}
.course__teacher-rating i {
  display: inline-block;
  width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  font-size: 10px;
  color: var(--tp-common-white);
  background: var(--tp-common-yellow);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
}
.course__rating span {
  font-size: 16px;
}
.course__rating span i {
  padding-right: 5px;
  color: var(--tp-common-yellow);
}
.course__rating-2 h5 {
  font-size: 14px;
  color: var(--tp-text-11);
  font-weight: 600;
  margin-bottom: 0;
}
.course__rating-2 ul li {
  display: inline-block;
}
.course__rating-2 ul li a {
  font-size: 14px;
  color: var(--tp-common-yellow);
}
.course__rating-inner p {
  font-size: 16px;
  color: var(--tp-common-black);
  font-weight: 500;
  margin-bottom: 0;
  padding-left: 3px;
}
.course__update h5 {
  font-size: 14px;
  color: var(--tp-text-11);
  font-weight: 600;
  margin-bottom: 0;
}
.course__update p {
  font-size: 16px;
  color: var(--tp-common-black);
  font-weight: 500;
  margin-bottom: 0;
}
.course__tab-inner {
  padding: 15px 20px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
}
.course__tab-btn .nav-tabs {
  border: none;
}
.course__tab-btn .nav-tabs .nav-item .nav-link {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  border: none;
  width: 30px;
  height: 30px;
  background: transparent;
  padding: 0;
  margin-right: 6px;
}
.course__tab-btn .nav-tabs .nav-item .nav-link svg {
  width: 14px;
  height: 14px !important;
}
.course__tab-btn .nav-tabs .nav-item .nav-link svg.grid .st0 {
  fill: none;
  stroke: var(--tp-text-11);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.course__tab-btn .nav-tabs .nav-item .nav-link.active {
  background: var(--tp-theme-1);
}
.course__tab-btn .nav-tabs .nav-item .nav-link.active svg.grid .st0 {
  fill: none;
  stroke: var(--tp-common-white);
}
.course__tab-btn .nav-tabs .nav-item .nav-link.active svg .st0 {
  fill: var(--tp-common-white);
}
.course__tab-2 .nav-tabs {
  border: none;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  overflow: hidden;
}
.course__tab-2 .nav-tabs .nav-item {
  width: 25%;
}
.course__tab-2 .nav-tabs .nav-item:not(:last-child) .nav-link {
  border-right: 1px solid #d2d3dc;
}
.course__tab-2 .nav-tabs .nav-item:not(:last-child) .nav-link.active {
  border-color: var(--tp-theme-1);
}
.course__tab-2 .nav-tabs .nav-item .nav-link {
  background: #edeef3;
  font-size: 16px;
  font-weight: 500;
  color: var(--tp-common-black);
  width: 100%;
  height: 54px;
  line-height: 52px;
  padding: 0;
  text-align: center;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -o-border-radius: 0;
  -ms-border-radius: 0;
  border-radius: 0;
}
.course__tab-2 .nav-tabs .nav-item .nav-link i {
  padding-right: 5px;
}
.course__tab-2 .nav-tabs .nav-item .nav-link.active {
  background: var(--tp-theme-1);
  color: var(--tp-common-white);
}
.course__tab-2 .nav-tabs .nav-item .nav-link.active svg path {
  fill: var(--tp-common-white);
}
@media (max-width: 575px) {
  .course__tab-2 .nav-tabs .nav-item .nav-link span {
    display: none;
  }
}
.course__tab-2 .nav-tabs .nav-item .nav-link svg {
  width: 14px;
  height: 14px;
}
.course__tab-2 .nav-tabs .nav-item .nav-link svg path {
  fill: var(--tp-common-black);
}
.course__description h3 {
  font-size: 26px;
  margin-bottom: 15px;
}
.course__description p {
  font-size: 16px;
  color: var(--tp-text-11);
  line-height: 1.7;
}
.course__description-list h4 {
  font-size: 26px;
  margin-bottom: 15px;
}
.course__description-list ul li {
  font-size: 18px;
  color: var(--tp-text-11);
  margin-bottom: 7px;
  list-style: none;
}
.course__description-list ul li i {
  font-size: 16px;
  color: var(--tp-common-black);
  padding-right: 5px;
}
.course__instructor h3 {
  font-size: 26px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .course__instructor-item {
    margin-right: 40px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .course__instructor-item {
    margin-top: 25px;
    margin-right: 0px;
  }
}
@media (max-width: 575px) {
  .course__instructor-item {
    margin-top: 25px;
    margin-right: 0px;
  }
}
.course__instructor-thumb img {
  width: 50px;
  height: 50px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
}
.course__instructor-content h3 {
  font-size: 16px;
  margin-bottom: 0;
  line-height: 1;
}
.course__instructor-content p {
  font-size: 14px;
  color: var(--tp-text-11);
  margin-bottom: 0;
}
.course__share h3 {
  font-size: 20px;
}
.course__share ul li {
  display: inline-block;
  margin-right: 10px;
}
.course__share ul li a {
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 13px;
  color: var(--tp-common-black);
  background: var(--tp-grey-1);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
}
.course__share ul li a.fb {
  color: #285da1;
  background: rgba(40, 93, 161, 0.1);
}
.course__share ul li a.fb:hover {
  color: var(--tp-common-white);
  background: #285da1;
}
.course__share ul li a.tw {
  color: #03a9f4;
  background: rgba(3, 169, 244, 0.1);
}
.course__share ul li a.tw:hover {
  color: var(--tp-common-white);
  background: #03a9f4;
}
.course__share ul li a.pin {
  color: #d8163f;
  background: rgba(216, 22, 63, 0.1);
}
.course__share ul li a.pin:hover {
  color: var(--tp-common-white);
  background: #d8163f;
}
.course__curriculum-content {
  padding: 13px 30px;
  border-bottom: 1px solid rgba(3, 18, 32, 0.2);
  -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;
  transition: all 0.3s ease-out 0s;
}
.course__curriculum-content:last-child {
  border: none;
}
.course__curriculum-content:hover {
  background: #f6f7fb;
}
.course__curriculum-info svg {
  width: 16px;
  height: 16px;
  margin-right: 7px;
}
.course__curriculum-info svg .st0 {
  fill: none;
  stroke: #6d6e75;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.course__curriculum-info h3 {
  display: inline-block;
  font-size: 16px;
  color: var(--tp-text-11);
  font-weight: 400;
  margin-bottom: 0;
}
.course__curriculum-info h3 span {
  color: var(--tp-common-black);
  font-weight: 500;
}
.course__curriculum-meta {
  text-align: right;
}
.course__curriculum-meta span.time {
  font-size: 16px;
  color: var(--tp-text-11);
}
.course__curriculum-meta span.time i {
  margin-right: 7px;
}
.course__curriculum-meta span.question {
  display: inline-block;
  height: 24px;
  line-height: 24px;
  color: var(--tp-common-white);
  padding: 0 11px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  background: var(--tp-theme-1);
  margin-left: 20px;
}
.course__curriculum .accordion-item {
  padding: 0;
  border-color: #edeef2;
}
.course__curriculum .accordion-item .accordion-button {
  outline: none;
  border: 0;
  -webkit-border-radius: 4px 4px 0 0;
  -moz-border-radius: 4px 4px 0 0;
  -o-border-radius: 4px 4px 0 0;
  -ms-border-radius: 4px 4px 0 0;
  border-radius: 4px 4px 0 0;
  background: #f3f4f8;
  font-size: 18px;
  font-weight: 500;
  color: var(--tp-common-black);
  padding-top: 18px;
  padding-left: 30px;
  padding-right: 30px;
}
.course__curriculum .accordion-item .accordion-button.collapsed {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
}
.course__curriculum .accordion-item .accordion-button:focus {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
}
.course__curriculum .accordion-item .accordion-body {
  padding: 0;
}
.course__review-rating-info {
  padding: 65px 0;
  border-right: 3px solid var(--tp-common-white);
  -webkit-border-radius: 4px 0 0 4px;
  -moz-border-radius: 4px 0 0 4px;
  -o-border-radius: 4px 0 0 4px;
  -ms-border-radius: 4px 0 0 4px;
  border-radius: 4px 0 0 4px;
}
@media (max-width: 575px) {
  .course__review-rating-info {
    border-right: 0;
    border-bottom: 3px solid var(--tp-common-white);
    -webkit-border-radius: 4px 4px 0 0;
    -moz-border-radius: 4px 4px 0 0;
    -o-border-radius: 4px 4px 0 0;
    -ms-border-radius: 4px 4px 0 0;
    border-radius: 4px 4px 0 0;
  }
}
.course__review-rating-info h5 {
  font-size: 100px;
  line-height: 70px;
  font-weight: 500;
  margin-bottom: 8px;
}
.course__review-rating-info ul li {
  display: inline-block;
}
.course__review-rating-info ul li a {
  color: var(--tp-common-yellow);
}
.course__review-rating-info p {
  color: var(--tp-text-11);
  margin-bottom: 0;
}
.course__review-progress {
  width: calc(100% - 60px - 60px);
  height: 4px;
  overflow: hidden;
  background: #d8dae3;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -o-border-radius: 2px;
  -ms-border-radius: 2px;
  border-radius: 2px;
}
.course__review-progress .single-progress {
  background: var(--tp-theme-1);
  height: 100%;
}
.course__review-details {
  padding: 35px 65px 10px 35px;
  -webkit-border-radius: 0 4px 4px 0;
  -moz-border-radius: 0 4px 4px 0;
  -o-border-radius: 0 4px 4px 0;
  -ms-border-radius: 0 4px 4px 0;
  border-radius: 0 4px 4px 0;
}
.course__review-details > h5 {
  font-size: 16px;
  font-weight: 500;
  color: var(--tp-common-black);
  margin-bottom: 20px;
}
@media (max-width: 575px) {
  .course__review-details {
    -webkit-border-radius: 0 0 4px 4px;
    -moz-border-radius: 0 0 4px 4px;
    -o-border-radius: 0 0 4px 4px;
    -ms-border-radius: 0 0 4px 4px;
    border-radius: 0 0 4px 4px;
  }
}
.course__review-item {
  margin-bottom: 5px;
}
.course__review-text span {
  font-size: 16px;
  color: var(--tp-text-11);
}
.course__review-percent {
  width: 40px;
}
.course__review-percent h5 {
  font-size: 16px;
  font-weight: 400;
  color: var(--tp-text-11);
  margin-bottom: 0;
}
.course__comment-box {
  background: #f3f4f8;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  padding: 25px 40px 25px 30px;
  margin-bottom: 10px;
}
.course__comment-box p {
  color: var(--tp-text-11);
  margin-bottom: 0;
}
.course__comment-thumb img {
  width: 50px;
  height: 50px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
}
.course__comment-info {
  margin-bottom: 5px;
}
.course__comment-info h4 {
  font-size: 16px;
  line-height: 1;
  margin-bottom: 0;
}
.course__comment-info span {
  font-size: 14px;
  color: var(--tp-text-11);
}
.course__comment-rating ul li {
  display: inline-block;
}
.course__comment-rating ul li a {
  font-size: 12px;
  color: var(--tp-common-yellow);
}
.course__comment-rating ul li a.no-rating {
  color: #b8b9bf;
}
.course__member-item {
  padding: 25px 30px;
  background: var(--tp-grey-2);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  margin-bottom: 10px;
}
.course__member-thumb {
  position: relative;
}
.course__member-thumb::after {
  position: absolute;
  content: "";
  right: 0;
  top: -5px;
  width: 1px;
  height: 80px;
  background: #dddee4;
}
@media (max-width: 575px) {
  .course__member-thumb::after {
    display: none;
  }
}
.course__member-thumb img {
  width: 70px;
  height: 70px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
}
.course__member-name h5 {
  font-size: 16px;
  line-height: 1;
  margin-bottom: 0;
}
.course__member-name span {
  font-size: 15px;
  color: var(--tp-text-11);
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .course__member-info {
    padding-left: 0;
  }
}
@media (max-width: 575px) {
  .course__member-info {
    margin-top: 25px;
    padding-left: 0;
  }
}
.course__member-info h5 {
  font-size: 16px;
  line-height: 1;
  margin-bottom: 0;
}
.course__member-info span {
  font-size: 15px;
  color: var(--tp-text-11);
}
.course__video-thumb {
  position: relative;
  overflow: hidden;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
}
.course__video-thumb::after {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 3, 32, 0.5);
}
.course__video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 1;
}
.course__video-play .play-btn {
  display: inline-block;
  width: 44px;
  height: 44px;
  text-align: center;
  line-height: 47px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  background: #ffffff;
  color: var(--tp-theme-1);
  -webkit-animation: pulse 2s infinite;
  -moz-animation: pulse 2s infinite;
  -o-animation: pulse 2s infinite;
  animation: pulse 2s infinite;
  font-size: 12px;
}
.course__video-price h5 {
  font-size: 26px;
  display: inline-block;
  margin-bottom: 0;
}
.course__video-price h5 span {
  font-size: 20px;
  font-weight: 600;
}
.course__video-price h5.old-price {
  text-decoration: line-through;
  color: var(--tp-text-3);
  font-weight: 500;
  font-size: 16px;
  padding-left: 10px;
}
.course__video-discount span {
  display: inline-block;
  font-size: 14px;
  height: 24px;
  line-height: 24px;
  padding: 0 12px;
  color: var(--tp-common-pink-2);
  background: rgba(252, 76, 86, 0.08);
  font-weight: 600;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
}
.course__video-content ul li:not(:last-child) {
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid #eef0f6;
}
.course__video-icon svg {
  width: 16px;
  height: 20px;
  margin-right: 12px;
}
.course__video-icon svg .st0 {
  fill: none;
  stroke: var(--tp-theme-1);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 2.6667;
}
.course__video-info h5 {
  margin-bottom: 0;
  font-weight: 400;
  color: var(--tp-text-3);
  font-size: 15px;
  line-height: 1;
}
.course__video-info h5 span {
  font-weight: 500;
  color: var(--tp-common-black);
  padding-right: 5px;
}
.course__payment h3 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 10px;
}
.course__enroll-btn i {
  padding-left: 4px;
}
.course__shape img {
  position: absolute;
}
.course__shape img.course-dot {
  right: -30px;
  top: 150px;
  z-index: -1;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .course__shape img.course-dot {
    right: -20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .course__shape img.course-dot {
    right: -20px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .course__shape img.course-dot {
    right: -10px;
  }
}
@media (max-width: 575px) {
  .course__shape img.course-dot {
    right: -10px;
  }
}
.course__comment ul li {
  list-style: none;
}
.course__comment ul li.children {
  margin-left: 50px;
}
.course__comment-title {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 15px;
}
.course__comment-box {
  background: var(--tp-grey-2);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  padding: 25px 40px 25px 30px;
  margin-bottom: 10px;
}
.course__comment-box p {
  color: var(--tp-text-11);
  margin-bottom: 0;
}
.course__comment-thumb img {
  width: 50px;
  height: 50px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
}
.course__comment-info {
  margin-bottom: 5px;
}
.course__comment-info h4 {
  font-size: 16px;
  line-height: 1;
  margin-bottom: 0;
}
.course__comment-info span {
  font-size: 14px;
  color: var(--tp-text-11);
}
.course__comment-rating ul li {
  display: inline-block;
}
.course__comment-rating ul li a {
  font-size: 12px;
  color: var(--tp-common-yellow);
}
.course__comment-rating ul li a.no-rating {
  color: #b8b9bf;
}
.course__form-title {
  font-size: 26px;
  margin-bottom: 40px;
}
.course__form-input input,
.course__form-input textarea {
  width: 100%;
  height: 56px;
  line-height: 54px;
  border: 2px solid var(--tp-grey-2);
  outline: none;
  background: var(--tp-grey-2);
  padding: 0 22px;
  font-size: 15px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  margin-bottom: 20px;
}
.course__form-input input:focus,
.course__form-input textarea:focus {
  border-color: var(--tp-theme-1);
  background: var(--tp-common-white);
}
.course__form-input input::placeholder,
.course__form-input textarea::placeholder {
  color: var(--tp-text-11);
}
.course__form-input textarea {
  height: 150px;
  resize: none;
  padding: 20px;
  line-height: 1.1;
}
.course__form-rating {
  margin-bottom: 10px;
}
.course__form-rating span {
  color: var(--tp-text-11);
}
.course__form-rating ul {
  display: inline-block;
}
.course__form-rating ul li {
  display: inline-block;
}
.course__form-rating ul li a {
  font-size: 14px;
  color: var(--tp-common-yellow);
}
.course__form-rating ul li a.no-rating {
  color: #b8b9bf;
}
.course__form-btn button {
  text-transform: capitalize;
}
.course__slider .swiper-pagination {
  bottom: 20px;
}
.course__slider .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background: #d6d7de;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  margin: 0 5px;
  opacity: 1;
}
.course__slider
  .swiper-pagination
  .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: var(--tp-theme-1);
}
.course__popup-wrapper {
  padding: 40px 40px;
}
.course__popup-title {
  font-size: 18px;
  line-height: 1.5;
  margin-bottom: 5px;
}
.course__popup-thumb img {
  width: 90px;
  height: 90px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
}
.course__popup-input {
  position: relative;
  margin-bottom: 15px;
}
.course__popup-input input {
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: right;
  padding: 0 20px;
  padding-left: 40px;
  border: 1px solid #e4e4e4;
}
.course__popup-input input::placeholder {
  color: #6f7172;
}
.course__popup-input input:focus {
  border-color: var(--tp-theme-1);
}
.course__popup-input-icon {
  position: absolute;
  top: 50%;
  left: 15px;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  color: #6f7172;
}
.course__popup-close {
  position: absolute;
  top: 15px;
  right: 15px;
}
.course__popup-close-btn {
  font-size: 15px;
  color: #6f7172;
  height: 30px;
  width: 30px;
  line-height: 30px;
  text-align: center;
  border: 1px solid #e4e4e4;
}
.course__popup-close-btn:hover {
  color: var(--tp-common-white);
  background-color: var(--tp-theme-1);
  border-color: var(--tp-theme-1);
}

/*----------------------------------------*/
/*  09. CAMPUS CSS START
/*----------------------------------------*/
.campus__thumb {
  position: relative;
}
.campus__thumb .play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 70px;
  height: 70px;
  line-height: 70px;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 1;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .campus__btn {
    margin-bottom: 65px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .campus__btn {
    margin-bottom: 50px;
  }
}

/*----------------------------------------*/
/*  10. RESEARCH CSS START
/*----------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .research__border
    .row
    [class*="col-"]:nth-child(2)
    .research__item-border::after {
    display: none;
  }
}
.research__item {
  padding: 20px 20px 5px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
  (max-width: 575px) {
  .research__item {
    padding-left: 10px;
    padding-right: 10px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px),
  only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .research__item {
    background-color: #10827c0d;
  }
}
.research__item:hover,
.research__item.active {
  background-color: var(--tp-common-white);
}
.research__item-border {
  position: relative;
}
.research__item-border::after {
  position: absolute;
  content: "";
  right: -15px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  background-color: rgba(3, 18, 32, 0.08);
  width: 1px;
  height: 350px;
}
@media only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .research__item-border::after {
    display: none;
  }
}
.research__thumb img {
  width: 100px;
  /* height: 200px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%; */
}
@media screen and (max-width: 767px) {
      .research__item {
    background-color: #10827c0d;
    border-radius:25px;
  }
  .research__thumb img {
    width: 80px;
  }
}
.research__thumb-2 {
  position: absolute;
  bottom: 0;
  right: -35px;
  z-index: 1;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .research__thumb-2 {
    right: -30px;
  }
}
@media (max-width: 575px) {
  .research__thumb-2 {
    right: 12px;
  }
}
.research__title {
  font-size: 20px;
  font-weight: 600;
  color: var(--tp-common-black-2);
}
.research__title-2 {
  font-size: 26px;
  line-height: 32px;
  color: var(--tp-common-black-4);
  margin-bottom: 20px;
}
.research__content p {
  font-size: 15px;
  line-height: 24px;
}
.research__content-2 {
  width: 60%;
  z-index: 11;
}
@media (max-width: 575px) {
  .research__content-2 {
    width: inherit;
  }
}
.research__wrapper-2 p {
  font-size: 16px;
  color: var(--tp-text-11);
  padding-right: 170px;
  margin-bottom: 25px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .research__wrapper-2 p {
    padding-right: 55px;
  }
}
@media (max-width: 575px) {
  .research__wrapper-2 p {
    padding-right: 0;
  }
}
.research__download {
  position: relative;
  height: 200px;
  padding: 40px 40px 30px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .research__download {
    height: 246px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .research__download {
    padding-left: 25px;
  }
}
@media (max-width: 575px) {
  .research__download {
    height: 550px;
    padding-left: 30px;
    padding-right: 30px;
  }
}
.research__download-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-border-radius: 14px;
  -moz-border-radius: 14px;
  -o-border-radius: 14px;
  -ms-border-radius: 14px;
  border-radius: 14px;
}
.research__store ul li {
  list-style: none;
  display: inline-block;
  margin-right: 5px;
  margin-bottom: 10px;
}
.research__store ul li a {
  display: inline-block;
  border: 2px solid rgba(3, 18, 32, 0.1);
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
  height: 36px;
  line-height: 32px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--tp-common-black);
  padding: 0 17px;
}
.research__store ul li a img {
  margin-right: 2px;
  height: 17px;
  width: 14px;
  -webkit-transform: translateY(-2px);
  -moz-transform: translateY(-2px);
  -ms-transform: translateY(-2px);
  -o-transform: translateY(-2px);
  transform: translateY(-2px);
}
.research__store ul li a:hover {
  background-color: var(--tp-common-white);
  border-color: var(--tp-common-white);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .research__features-wrapper {
    padding-left: 50px;
  }
}
.research__features-item:hover span {
  background-color: var(--tp-common-violet);
}
.research__features-item:hover span svg path {
  stroke: var(--tp-common-white);
}
.research__features-item:hover span.yellow-bg {
  background-color: var(--tp-common-yellow-3);
}
.research__features-item:hover span.yellow-bg svg path {
  stroke: var(--tp-common-white);
}
.research__features-item:hover span.green-bg {
  background-color: var(--tp-common-green-4);
}
.research__features-item:hover span.green-bg svg path {
  stroke: var(--tp-common-white);
}
@media (max-width: 575px) {
  .research__features-icon {
    margin-bottom: 20px;
  }
}
.research__features-icon span {
  display: inline-block;
  width: 66px;
  height: 66px;
  line-height: 66px;
  text-align: center;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
  background-color: rgba(97, 81, 251, 0.08);
}
.research__features-icon span.yellow-bg span {
  background-color: rgba(244, 147, 14, 0.08);
}
.research__features-icon span.green-bg span {
  background-color: rgba(32, 173, 150, 0.08);
}
.research__features-content h4 {
  font-size: 20px;
  font-weight: 600;
}
.research__features-content p {
  font-size: 15px;
  line-height: 24px;
  color: var(--tp-text-11);
}
.research__shape-1 {
  position: absolute;
  left: 135px;
  top: 0;
  opacity: 0.3;
  z-index: -1;
}
.research__shape-2 {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0.3;
  z-index: -1;
}
.research__shape-3 {
  position: absolute;
  right: 85px;
  bottom: 0;
  z-index: -1;
}

/*----------------------------------------*/
/*  11. BLOG CSS START
/*----------------------------------------*/
.blog__item {
  -webkit-box-shadow: 0px 30px 50px -10px rgba(26, 31, 35, 0.1);
  -moz-box-shadow: 0px 30px 50px -10px rgba(26, 31, 35, 0.1);
  -ms-box-shadow: 0px 30px 50px -10px rgba(26, 31, 35, 0.1);
  -o-box-shadow: 0px 30px 50px -10px rgba(26, 31, 35, 0.1);
  box-shadow: 0px 30px 50px -10px rgba(26, 31, 35, 0.1);
}
.blog__item:hover .blog__thumb img {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);
}
.blog__item-float {
  min-height: 400px;
  -webkit-box-shadow: 0px 30px 50px -10px rgba(26, 31, 35, 0.1);
  -moz-box-shadow: 0px 30px 50px -10px rgba(26, 31, 35, 0.1);
  -ms-box-shadow: 0px 30px 50px -10px rgba(26, 31, 35, 0.1);
  -o-box-shadow: 0px 30px 50px -10px rgba(26, 31, 35, 0.1);
  box-shadow: 0px 30px 50px -10px rgba(26, 31, 35, 0.1);
}
.blog__item-float:hover .blog__thumb-bg img {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);
}
.blog__item-float .blog__thumb-bg {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.blog__item-float-overlay {
  position: relative;
}
.blog__item-float-overlay::after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(
    181.6deg,
    rgba(3, 18, 32, 0) 24.31%,
    rgba(3, 18, 32, 0) 24.32%,
    rgba(3, 18, 32, 0.9) 98.64%
  );
}
.blog__tag {
  margin-bottom: 4px;
}
.blog__tag a {
  font-size: 14px;
  font-weight: 500;
  color: var(--tp-theme-1);
}
.blog__tag-float a {
  display: inline-block;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background-color: var(--tp-theme-1);
  color: var(--tp-common-white);
  font-weight: 600;
  text-transform: capitalize;
  padding: 0 14px;
}
.blog__tag-float a:hover {
  color: var(--tp-common-white);
  background-color: var(--tp-common-black);
}
.blog__title {
  font-size: 18px;
  font-weight: 700;
  line-height: 26px;
}
.blog__title a:hover {
  color: var(--tp-theme-1);
}
.blog__title-float {
  font-size: 30px;
  font-weight: 800;
  color: var(--tp-common-white);
  margin-bottom: 12px;
}
@media (max-width: 575px) {
  .blog__title-float {
    font-size: 25px;
  }
}
.blog__meta ul {
  padding-right: 1rem;
  /* display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex; */
  /* display: flex; */
  align-items: center;
}
.blog__meta ul li {
  /* display: inline-block; */
  /* list-style: none; */
}
.blog__meta ul li{
  margin-right: 16px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .blog__meta ul li{
    margin-right: 10px;
  }
}
.blog__meta ul li span {
  font-size: 13px;
  font-weight: 500;
  color: var(--tp-text-6);
  text-transform: capitalize;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
}
.blog__meta ul li span i,
.blog__meta ul li span svg {
  margin-right: 10px;
}
.blog__meta ul li span svg {
  -webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  -ms-transform: translateY(0px);
  -o-transform: translateY(0px);
  transform: translateY(0px);
}
.blog__meta ul li span svg path {
  stroke: var(--tp-text-6);
}
.blog__meta ul li span:hover {
  color: var(--tp-theme-1);
}
.blog__meta-float ul li {
  display: inline-block;
  list-style: none;
}
.blog__meta-float ul li:not(:last-child) {
  margin-right: 20px;
}
.blog__meta-float ul li span {
  color: var(--tp-common-white);
}
.blog__meta-float ul li span i,
.blog__meta-float ul li span svg {
  margin-right: 10px;
}
.blog__meta-float ul li span svg {
  -webkit-transform: translateY(-2px);
  -moz-transform: translateY(-2px);
  -ms-transform: translateY(-2px);
  -o-transform: translateY(-2px);
  transform: translateY(-2px);
}
.blog__meta-float ul li span svg path {
  stroke: var(--tp-common-white);
}
.blog__content {
  padding: 0 30px;
  padding-top: 13px;
  padding-bottom: 25px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .blog__content {
    padding-left: 20px;
    padding-right: 20px;
  }
}
.blog__content-float {
  width: 65%;
  position: relative;
  left: 40px;
  z-index: 1;
  margin-bottom: 30px;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .blog__content-float {
    width: 78%;
  }
}
@media (max-width: 575px) {
  .blog__content-float {
    width: 80%;
    left: 20px;
  }
}
.blog__shape-1 {
  position: absolute;
  right: 17%;
  bottom: 9%;
  z-index: -1;
  opacity: 0.3;
}
.blog__shape-2 {
  position: absolute;
  right: 14%;
  bottom: 4%;
  z-index: -1;
  opacity: 0.3;
}
.blog__shape-3 {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: -1;
}
.blog__shape-4 {
  position: absolute;
  left: 17%;
  top: 39%;
  z-index: -1;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .blog__sidebar {
    padding-left: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px),
  only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .blog__sidebar {
    padding-left: 0;
    margin-top: 50px;
  }
}

.postbox__thumb .play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 1;
}
.postbox__thumb .play-btn:hover {
  color: var(--tp-common-white);
}
.postbox__audio {
  height: 455px;
  width: 100%;
}
.postbox__audio iframe {
  width: 100%;
  height: 100%;
  border: none;
}
.postbox__item {
  -webkit-box-shadow: 0px 30px 40px 0px rgba(1, 11, 60, 0.1);
  -moz-box-shadow: 0px 30px 40px 0px rgba(1, 11, 60, 0.1);
  -ms-box-shadow: 0px 30px 40px 0px rgba(1, 11, 60, 0.1);
  -o-box-shadow: 0px 30px 40px 0px rgba(1, 11, 60, 0.1);
  box-shadow: 0px 30px 40px 0px rgba(1, 11, 60, 0.1);
}
.postbox__item:hover {
  -webkit-box-shadow: 0px 30px 40px 0px rgba(1, 11, 60, 0.1);
  -moz-box-shadow: 0px 30px 40px 0px rgba(1, 11, 60, 0.1);
  -ms-box-shadow: 0px 30px 40px 0px rgba(1, 11, 60, 0.1);
  -o-box-shadow: 0px 30px 40px 0px rgba(1, 11, 60, 0.1);
  box-shadow: 0px 30px 40px 0px rgba(1, 11, 60, 0.1);
}
.postbox__item-single:hover {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
}
.postbox__content {
  padding: 40px 50px;
}
@media (max-width: 575px) {
  .postbox__content {
    padding-left: 20px;
    padding-right: 20px;
  }
}
.postbox__content-single {
  padding-left: 0;
  padding-right: 0;
  border: none;
}
.postbox__title {
  font-size: 30px;
  margin-bottom: 20px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .postbox__title {
    font-size: 28px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .postbox__title {
    font-size: 33px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .postbox__title {
    font-size: 30px;
  }
}
@media (max-width: 575px) {
  .postbox__title {
    font-size: 25px;
  }
}
.postbox__title a:hover {
  color: var(--tp-theme-1);
}
.postbox__meta {
  margin-bottom: 10px;
}
.postbox__meta span {
  font-size: 14px;
  font-weight: 500;
  color: #6a727f;
  text-transform: capitalize;
  display: inline-block;
  margin-right: 30px;
}
@media (max-width: 575px) {
  .postbox__meta span {
    margin-right: 9px;
  }
}
.postbox__meta span i {
  color: var(--tp-theme-1);
  margin-right: 3px;
}
.postbox__meta span:hover {
  color: var(--tp-theme-1);
}
.postbox__meta span:hover i {
  color: var(--tp-theme-1);
}
.postbox__meta-3 span {
  font-size: 16px;
  color: var(--tp-common-black);
  font-weight: 500;
  display: inline-block;
  margin-right: 10px;
  margin-bottom: 10px;
}
.postbox__text p {
  margin-bottom: 28px;
}
.postbox__text-single p {
  margin-bottom: 15px;
}
.postbox__slider button {
  position: absolute;
  left: 50px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 1;
  font-size: 30px;
  color: var(--tp-common-white);
}
.postbox__slider button.postbox-slider-button-next {
  left: auto;
  right: 50px;
}
@media (max-width: 575px) {
  .postbox__slider button.postbox-slider-button-next {
    right: 10px;
  }
}
@media (max-width: 575px) {
  .postbox__slider button {
    left: 10px;
  }
}
.postbox__quote {
  padding: 40px 50px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
}
@media (max-width: 575px) {
  .postbox__quote {
    padding: 20px 30px;
  }
}
.postbox__quote blockquote {
  margin-bottom: 0;
}
.postbox__quote p {
  font-size: 24px;
  color: #0e1133;
  font-weight: 500;
  line-height: 1.3;
  margin-bottom: 25px;
}
.postbox__quote h4 {
  font-size: 20px;
  padding-right: 30px;
  position: relative;
  margin-bottom: 0;
}
.postbox__quote h4::after {
  position: absolute;
  content: "";
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 19px;
  height: 2px;
  background: var(--tp-common-black);
}
.postbox__quote img.quote {
  position: absolute;
  bottom: -34px;
  right: 50px;
}
.postbox__comment-form {
  margin-bottom: 20px;
  padding: 40px 30px;
  box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.09);
  background: var(--tp-common-white);
}
.postbox__comment-title {
  font-size: 27px;
  margin-bottom: 0;
}
.postbox__comment-input {
  position: relative;
  margin-bottom: 20px;
}
.postbox__comment-input span {
  font-weight: 600;
  color: var(--tp-common-black);
  margin-bottom: 12px;
  display: block;
}
.postbox__comment-input input,
.postbox__comment-input textarea {
  height: 55px;
  padding: 0 20px;
  width: 100%;
  font-size: 14px;
  color: var(--tp-common-black);
  outline: none;
  border: 1px solid transparent;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  -o-border-radius: 7px;
  -ms-border-radius: 7px;
  border-radius: 7px;
  background: #f7f7f7;
}
.postbox__comment-input textarea {
  height: 175px;
  resize: none;
  padding-top: 20px;
  padding-bottom: 20px;
}
.postbox__tag h4 {
  font-size: 20px;
  margin-bottom: 17px;
}
.postbox__tag a {
  color: var(--tp-common-black);
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 10px 25px;
  padding-bottom: 8px;
  margin-right: 5px;
  margin-bottom: 10px;
  position: relative;
  z-index: 1;
  border-radius: 40px;
  background: var(--tp-grey-1);
}
.postbox__tag a:hover {
  color: var(--tp-common-white);
  background: var(--tp-common-black);
}
.postbox__details .postbox__item {
  -webkit-box-shadow: 0px 30px 40px 0px rgba(1, 11, 60, 0.1);
  -moz-box-shadow: 0px 30px 40px 0px rgba(1, 11, 60, 0.1);
  -ms-box-shadow: 0px 30px 40px 0px rgba(1, 11, 60, 0.1);
  -o-box-shadow: 0px 30px 40px 0px rgba(1, 11, 60, 0.1);
  box-shadow: 0px 30px 40px 0px rgba(1, 11, 60, 0.1);
}
.postbox__details .postbox__content {
  padding: 35px 40px 30px 40px;
}
@media (max-width: 575px) {
  .postbox__details .postbox__content {
    padding: 35px 30px 30px 30px;
  }
}
.postbox__details .postbox__content p {
  color: #6a727f;
  margin-bottom: 25px;
  font-size: 16px;
  line-height: 26px;
}
@media (max-width: 575px) {
  .postbox__details .postbox__quote {
    padding: 20px 20px;
  }
}
.postbox__details .postbox__quote p {
  font-size: 24px;
  color: #0e1133;
  font-weight: 500;
  line-height: 1.3;
  margin-top: 25px;
}
@media (max-width: 575px) {
  .postbox__details .postbox__quote p {
    font-size: 18px;
  }
}
.postbox__comment h3 {
  font-size: 26px;
  font-weight: 600;
  margin-bottom: 40px;
}
.postbox__comment-input input,
.postbox__comment-input textarea {
  width: 100%;
  height: 56px;
  line-height: 56px;
  border: 2px solid var(--tp-grey-2);
  background: var(--tp-grey-2);
  color: var(--tp-common-black);
  font-size: 15px;
  outline: none;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  padding: 0 24px;
}
.postbox__comment-input input::placeholder,
.postbox__comment-input textarea::placeholder {
  font-size: 15px;
  color: #6d6e75;
}
.postbox__comment-input input:focus,
.postbox__comment-input textarea:focus {
  background: var(--tp-common-white);
  border-color: var(--tp-theme-1);
}
.postbox__comment-input textarea {
  height: 180px;
  resize: none;
  line-height: 1.2;
  padding: 23px;
  padding-top: 19px;
}
.postbox__comment-agree {
  padding-left: 5px;
}
.postbox__comment-agree input {
  margin: 0;
  appearance: none;
  -moz-appearance: none;
  display: block;
  width: 14px;
  height: 14px;
  background: var(--tp-common-white);
  border: 1px solid #b9bac1;
  outline: none;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  flex: 0 0 auto;
}
.postbox__comment-agree input:checked {
  position: relative;
  background-color: var(--tp-theme-1);
  border-color: transparent;
}
.postbox__comment-agree input:checked::after {
  box-sizing: border-box;
  content: "\f00c";
  position: absolute;
  font-family: var(--tp-ff-fontawesome);
  font-size: 10px;
  color: var(--tp-common-white);
  top: 46%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.postbox__comment-agree input:hover {
  cursor: pointer;
}
.postbox__comment-agree label {
  padding-left: 8px;
  color: var(--tp-text-11);
  line-height: 1;
}
.postbox__comment-agree label a {
  color: var(--tp-common-black);
  font-weight: 600;
  padding-left: 4px;
}
.postbox__comment-agree label a:hover {
  color: var(--tp-theme-1);
}
.postbox__comment-agree label:hover {
  cursor: pointer;
}

/* sidebar area */
.sidebar__widget-title {
  font-size: 20px;
  padding-bottom: 7px;
  border-bottom: 1px solid #f0f0f5;
}
.sidebar__widget ul li {
  list-style: none;
}
.sidebar__widget ul li:not(:last-child) {
  margin-bottom: 15px;
}
.sidebar__widget ul li a {
  font-size: 16px;
  font-weight: 500;
  color: var(--tp-text-11);
  padding-left: 20px;
  position: relative;
}
.sidebar__widget ul li a::after {
  position: absolute;
  content: "";
  left: 0;
  top: 6px;
  width: 6px;
  height: 6px;
  background: #adaeba;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
}
.sidebar__widget ul li a:hover {
  color: var(--tp-theme-1);
}
.sidebar__widget ul li a:hover::after {
  background: var(--tp-theme-1);
}
.sidebar__widget ul li ul {
  padding-top: 10px;
  padding-left: 15px;
}
.sidebar__search input {
  width: 100%;
  height: 60px;
  line-height: 56px;
  background: var(--tp-grey-2);
  border: 2px solid var(--tp-grey-2);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  padding-left: 30px;
  padding-right: 45px;
}
.sidebar__search input::placeholder {
  color: #8d8e9a;
  font-weight: 500;
}
.sidebar__search input:focus {
  border-color: var(--tp-theme-1);
  background-color: var(--tp-common-white);
}
.sidebar__search button {
  position: absolute;
  top: 50%;
  right: 20px;
  left: auto;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}
.sidebar__search button svg {
  width: 18px;
  height: 18px;
}
.sidebar__search button svg .st0 {
  fill: var(--tp-text-1);
}
.sidebar__search button svg .st1 {
  fill: var(--tp-common-black);
}

.tagcloud a {
  display: inline-block;
  height: 36px;
  line-height: 38px;
  padding: 0 15px;
  font-size: 15px;
  font-weight: 500;
  color: var(--tp-text-11);
  background: var(--tp-grey-2);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  margin-right: 8px;
  margin-bottom: 10px;
}
.tagcloud a:hover {
  color: var(--tp-common-white);
  background: var(--tp-theme-1);
}

.rc__post:not(:last-child) {
  margin-bottom: 30px;
}
.rc__meta span {
  font-size: 15px;
  color: #6a727f;
  font-weight: 500;
}
.rc__thumb img {
  width: 75px;
  height: 75px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
}
.rc__title {
  font-size: 18px;
  font-weight: 500;
  color: var(--tp-common-black);
  line-height: 1.4;
}
.rc__title a:hover {
  color: var(--tp-theme-1);
}

/* comment box */
.latest-comments h3 {
  font-size: 26px;
  font-weight: 600;
  margin-bottom: 20px;
}

.latest-comments ul li {
  margin-bottom: 10px;
  list-style: none;
}

.latest-comments ul li.children {
  margin-left: 100px;
}
@media (max-width: 575px) {
  .latest-comments ul li.children {
    margin-left: 15px;
  }
}

.latest-comments ul li ul li.children-2 {
  margin-left: 100px;
  margin-top: 10px;
}
@media (max-width: 575px) {
  .latest-comments ul li ul li.children-2 {
    margin-left: 15px;
  }
}

.comments-box {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  padding: 30px;
  padding-right: 40px;
  padding-top: 25px;
}

.comments-avatar img {
  width: 50px;
  height: 50px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
}

.avatar-name {
  margin-bottom: 5px;
}

.avatar-name h5 {
  font-size: 16px;
  line-height: 1;
  margin-bottom: 0;
}

.avatar-name span {
  font-size: 14px;
  color: var(--tp-text-11);
}

@media (max-width: 575px) {
  .comments-text {
    margin-left: 0;
    margin-top: 15px;
  }
}

.comments-text p {
  font-size: 16px;
  color: var(--tp-text-11);
  margin-bottom: 15px;
}

.comments-replay {
  margin-top: 10px;
}
.comments-replay a {
  display: inline-block;
  color: var(--tp-theme-1);
  background: rgba(61, 108, 231, 0.1);
  height: 22px;
  line-height: 22px;
  padding: 0 10px;
  font-weight: 500;
  font-size: 14px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
}
.comments-replay a:hover {
  color: var(--tp-common-white);
  background: var(--tp-theme-1);
}

/*----------------------------------------*/
/*  12. CTA CSS START
/*----------------------------------------*/
.cta__title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 5px;
}
@media (max-width: 575px) {
  .cta__icon {
    margin-bottom: 25px;
  }
}
.cta__icon span {
  display: inline-block;
  width: 90px;
  height: 90px;
  line-height: 90px;
  text-align: center;
  background-color: var(--tp-common-cream);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
}
.cta__content p {
  text-align: justify;
  font-size: 15px;
  line-height: 25px;
  margin-bottom: 20px;
}
.cta__inner {
  border-top: 1px solid rgba(61, 108, 231, 0.1);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .cta__item {
    padding-left: 35px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px),
  only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .cta__item {
    padding-left: 0;
  }
}
.cta__item-border {
  border-right: 1px solid rgba(61, 108, 231, 0.1);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .cta__item-border {
    padding-right: 45px;
    padding-left: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px),
  only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .cta__item-border {
    border: 0;
  }
}
@media (max-width: 575px) {
  .cta__item-border {
    padding-right: 0;
  }
}

/*----------------------------------------*/
/*  13. FOOTER CSS START
/*----------------------------------------*/
/**********************************whatsapp icon******************************/

.float {
  position: fixed;
  width: 50px;
  height: 50px;
  bottom: 20px;
  left: 13px;
  /* background-color:#25d366; */
  color: #fff;
  border-radius: 50px;
  text-align: center;
  font-size: 30px;
  box-shadow: 2px 2px 3px #999;
  z-index: 100;
}
.register {
  position: fixed;
  width: 50px;
  height: 50px;
  bottom: 90px;
  left: 15px;
  /* background-color:#25d366; */
  color: #fff;
  border-radius: 50px;
  text-align: center;
  font-size: 30px;
  box-shadow: 2px 2px 3px #999;
  z-index: 100;
}
footer .icon {
  padding-left: 1rem;
}
.f-item{
  text-align: right;
}
/* ================= responsive ============ */
@media screen and (max-width: 768px) {
      .about__thumb-right, 
    .blog__thumb {
        display:none;
    }
  footer{
    text-align: center;
  }
  .float {
    bottom: 105px;
    left: 7px;
  }
  .register {
    bottom: 160px;
    left: 5px;
  }
}
.footer__logo {
  margin-bottom: 20px;
}
.footer__info p {
  margin-bottom: 17px;
}
.footer__widget-title {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 25px;
}
.footer__widget ul li {
  list-style: none;
  line-height: 1;
  margin-bottom: 12px;
}
.footer__widget ul li a {
  font-size: 15px;
  line-height: 1.2;
}
.footer__widget ul li a:hover {
  color: var(--tp-theme-1);
}
.footer__widget-2 ul li a:hover {
  color: var(--tp-theme-2);
}
.footer__widget-2 .footer__subscribe-input button {
  background-color: var(--tp-theme-2);
}
.footer__widget-2 .footer__subscribe-input button:hover {
  background-color: var(--tp-common-black-2);
}
.footer__widget-3 ul li a:hover {
  color: var(--tp-theme-3);
}
.footer__widget-3 .footer__subscribe-input button {
  background-color: var(--tp-theme-3);
}
.footer__widget-3 .footer__subscribe-input button:hover {
  background-color: var(--tp-common-black-3);
}
.footer__social h4 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 10px;
}
.footer__social ul li {
  display: inline-block;
}
.footer__social ul li:not(:last-child) {
  margin-left: 7px;
}
.footer__social ul li a {
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  -webkit-box-shadow: 0px 1px 2px rgba(26, 31, 35, 0.1);
  -moz-box-shadow: 0px 1px 2px rgba(26, 31, 35, 0.1);
  -ms-box-shadow: 0px 1px 2px rgba(26, 31, 35, 0.1);
  -o-box-shadow: 0px 1px 2px rgba(26, 31, 35, 0.1);
  box-shadow: 0px 1px 2px rgba(26, 31, 35, 0.1);
  color: var(--tp-text-7);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  background-color: var(--tp-common-white);
}
.footer__social ul li a:hover {
  background-color: var(--tp-theme-1);
  color: var(--tp-common-white);
}
@media only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .footer__social-3 {
    margin-top: 30px;
  }
}
.footer__social-3 ul li a:hover {
  background-color: var(--tp-theme-3);
}
.footer__subscribe p {
  margin-bottom: 20px;
}
.footer__subscribe-input {
  position: relative;
}
.footer__subscribe-input input {
  width: 100%;
  height: 60px;
  padding: 0 25px;
  padding-right: 120px;
  border: none;
  outline: 0;
  background-color: var(--tp-common-white);
  -webkit-box-shadow: 0px 1px 2px rgba(26, 31, 35, 0.07);
  -moz-box-shadow: 0px 1px 2px rgba(26, 31, 35, 0.07);
  -ms-box-shadow: 0px 1px 2px rgba(26, 31, 35, 0.07);
  -o-box-shadow: 0px 1px 2px rgba(26, 31, 35, 0.07);
  box-shadow: 0px 1px 2px rgba(26, 31, 35, 0.07);
}
.footer__subscribe-input input::placeholder {
  color: var(--tp-text-8);
}
.footer__subscribe-input button {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 1;
}
.footer__subscribe-3 p {
  font-size: 15px;
  color: var(--tp-text-14);
}
.footer__subscribe-3 button {
  background-color: var(--tp-theme-3);
}
.footer__bottom-inner {
  padding: 22px 0;
  border-top: 1px solid rgba(3, 18, 32, 0.06);
}
.footer__bottom-link ul li {
  list-style: none;
  display: inline-block;
  position: relative;
  padding-right: 15px;
  margin-right: 15px;
}
.footer__bottom-link ul li:last-child {
  margin-right: 0;
  padding-right: 0;
}
.footer__bottom-link ul li:last-child::after {
  display: none;
}
.footer__bottom-link ul li::after {
  position: absolute;
  content: "";
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 1px;
  height: 10px;
  background-color: var(--tp-text-9);
}
.footer__bottom-link ul li a {
  font-size: 14px;
  color: var(--tp-text-9);
}
.footer__copyright p {
  font-size: 15px;
  color: var(--tp-text-9);
  margin-bottom: 0;
}
.footer__contact ul {
  line-height: 1;
}
.footer__contact ul li {
  list-style: none;
  line-height: 1;
}
.footer__contact ul li:not(:last-child) {
  margin-bottom: 15px;
}
.footer__contact ul li p {
  font-size: 14px;
  color: var(--tp-text-11);
  margin-bottom: 3px;
  line-height: 1;
}
.footer__contact ul li h4 {
  font-size: 15px;
  color: var(--tp-common-black);
  font-weight: 400;
  margin-bottom: 0;
}
.footer__white .footer__social ul li a {
  background-color: var(--tp-grey-5);
}
.footer__white .footer__social ul li a:hover {
  background-color: var(--tp-theme-1);
  color: var(--tp-common-white);
}
.footer__white .footer__subscribe-input input {
  background-color: var(--tp-grey-5);
}
.footer__black .footer__social h4 {
  color: var(--tp-common-white);
}
.footer__black .footer__social ul li a {
  background-color: var(--tp-grey-5);
  line-height: 40px !important;
}
.footer__black .footer__social ul li a:hover {
  background-color: var(--tp-theme-1);
  color: var(--tp-common-white);
}
.footer__black .footer__social ul li a.fb {
  color: #fff;
  background: #285da1;
}
.footer__black .footer__social ul li a.fb:hover {
  color: #285da1;
  background: #fff;
}
.footer__black .footer__social ul li a.tw {
  color: #fff;
  background: #03a9f4;
}
.footer__black .footer__social ul li a.tw:hover {
  color: #03a9f4;
  background: #fff;
}
.footer__black .footer__social ul li a.pin {
  color: #fff;
  background: #d8163f;
}
.footer__black .footer__social ul li a.pin:hover {
  color: #d8163f;
  background: #fff;
}
.footer__black .footer__subscribe-input input {
  background-color: var(--tp-grey-5);
}
.footer__black .footer__widget-content p {
  color: var(--tp-text-15);
}
.footer__black .footer__widget-title {
  color: var(--tp-common-white);
}
.footer__black .footer__widget-content ul li {
  list-style: none;
  line-height: 1;
  margin-bottom: 12px;
}
.footer__black .footer__widget-content ul li a {
  font-size: 15px;
  line-height: 1.2;
  color: var(--tp-text-15);
}
.footer__black .footer__widget-content ul li a:hover {
  color: var(--tp-common-white);
}
.footer__black .footer__subscribe p {
  color: var(--tp-text-15);
}
.footer__black .footer__bottom-inner {
  border-top: 1px solid #1c1f3f;
}
.footer__black .footer__copyright p {
  color: var(--tp-text-15);
}

.footer-col-1 {
  /* padding-right: 115px; */
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .footer-col-1 {
    /* padding-right: 90px; */
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .footer-col-1 {
    /* padding-right: 40px; */
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .footer-col-1 {
    /* padding-right: 30px; */
  }
}
@media (max-width: 575px) {
  .footer-col-1 {
    /* padding-right: 0; */
  }
}

.footer-col-4 {
  padding-left: 30px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .footer-col-4 {
    padding-left: 10px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px),
  only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .footer-col-4 {
    padding-left: 0;
  }
}

.footer-col-2-1 {
  padding-right: 115px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .footer-col-2-1 {
    padding-right: 90px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .footer-col-2-1 {
    padding-right: 40px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .footer-col-2-1 {
    padding-right: 30px;
  }
}
@media (max-width: 575px) {
  .footer-col-2-1 {
    padding-right: 0;
  }
}
.footer-col-2-1 .footer__social ul li a:hover {
  background-color: var(--tp-theme-2);
}

.footer-col-2-4 {
  padding-left: 30px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .footer-col-2-4 {
    padding-left: 10px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px),
  only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .footer-col-2-4 {
    padding-left: 0;
  }
}

.footer-col-3-1 {
  padding-right: 70px;
}
@media only screen and (min-width: 768px) and (max-width: 991px),
  only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .footer-col-3-1 {
    padding-right: 0;
  }
}

.footer-col-3-2 {
  padding-left: 45px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
  only screen and (min-width: 768px) and (max-width: 991px),
  (max-width: 575px) {
  .footer-col-3-2 {
    padding-left: 0;
  }
}

.footer-col-3-3 {
  padding-left: 65px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .footer-col-3-3 {
    padding-left: 20px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
  only screen and (min-width: 768px) and (max-width: 991px),
  only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .footer-col-3-3 {
    padding-left: 0;
  }
}

.footer-col-3-4 {
  padding-left: 70px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
  only screen and (min-width: 768px) and (max-width: 991px),
  only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .footer-col-3-4 {
    padding-left: 0;
  }
}

/*----------------------------------------*/
/*  14. OFFCANVAS CSS START
/*----------------------------------------*/
@media (max-width: 575px) {
  .offcanvas__area {
    width: 290px;
  }
}
.offcanvas__area .modal.show .modal-dialog {
  transform: none !important;
}
.offcanvas__area .modal.fade .modal-dialog {
  transition: transform 0.3s ease-out;
  transform: translate(100px, 0px);
}
.offcanvas__area .modal-dialog {
  position: absolute;
  top: 0;
  right: 0;
  max-width: 450px;
  width: 100%;
  height: 100%;
  margin: 0;
  background: var(--clr-common-white);
}
.offcanvas__area .modal-content {
  border: 0;
}
.offcanvas__wrapper {
  position: relative;
  padding: 45px;
}
@media (max-width: 575px) {
  .offcanvas__wrapper {
    padding: 20px;
  }
}
.offcanvas__close-btn {
  display: inline-block;
  font-size: 16px;
  height: 45px;
  width: 45px;
  line-height: 46px;
  background: var(--tp-theme-1);
  color: #fff;
  border-radius: 50%;
}
.offcanvas__close-btn:hover {
  background: var(--tp-common-black);
}
.offcanvas__top {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--tp-border-1);
}
.offcanvas__search {
  position: relative;
}
.offcanvas__search input {
  width: 100%;
  height: 40px;
  line-height: 40px;
  padding-right: 20px;
  background: transparent;
  border: none;
  outline: none;
  border-bottom: 1px solid var(--tp-border-1);
  font-size: 14px;
}
.offcanvas__search input::placeholder {
  color: var(--tp-text-1);
}
.offcanvas__search input:focus {
  border-color: var(--tp-common-black);
}
.offcanvas__search button {
  position: absolute;
  top: 50%;
  right: 0;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  font-size: 14px;
  color: var(--tp-text-1);
}
.offcanvas__text p {
  margin-bottom: 25px;
}
.offcanvas__contact h4 {
  font-size: 22px;
  margin-bottom: 20px;
}
.offcanvas__contact ul li:not(:last-child) {
  margin-bottom: 20px;
}
.offcanvas__contact ul li:hover i {
  background: var(--tp-theme-1);
  color: var(--tp-common-white);
  border-color: var(--tp-theme-1);
}
.offcanvas__contact ul li:hover a {
  color: var(--tp-common-black);
}
.offcanvas__contact-icon i {
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border: 1px solid var(--tp-border-1);
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  -o-border-radius: 7px;
  -ms-border-radius: 7px;
  border-radius: 7px;
}
.offcanvas__contact-text a {
  font-size: 18px;
  font-weight: 500;
  color: var(--tp-text-2);
}
.offcanvas__map iframe {
  width: 100%;
  height: 200px;
  border: none;
}
.offcanvas__social ul li {
  display: inline-block;
}
.offcanvas__social ul li:not(:last-child) {
  margin-right: 5px;
}
.offcanvas__social ul li a {
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 42px;
  text-align: center;
  background: var(--tp-grey-1);
  color: var(--tp-theme-1);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
  border-radius: 5px;
}
.offcanvas__social ul li a:hover {
  background: var(--tp-theme-1);
  color: var(--tp-common-white);
}

/*----------------------------------------*/
/*  15. CATEGORY CSS START
/*----------------------------------------*/
.category__wrapper .section__title-wrapper-2 {
  padding-right: 110px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px),
  only screen and (min-width: 992px) and (max-width: 1199px),
  (max-width: 575px) {
  .category__wrapper .section__title-wrapper-2 {
    padding-right: 0;
  }
}
.category__wrapper p {
  font-size: 15px;
  color: var(--tp-text-11);
  padding-right: 85px;
  margin-bottom: 25px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
  (max-width: 575px) {
  .category__wrapper p {
    padding-right: 0;
  }
}
.category__wrapper-3 p {
  font-size: 16px;
  color: var(--tp-text-11);
  margin-bottom: 5px;
  padding-right: 35px;
}
@media (max-width: 575px) {
  .category__wrapper-3 p {
    margin-bottom: 15px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px),
  only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .category__item-wrapper {
    margin-top: 50px;
  }
}
.category__item:hover .category__icon a {
  background-color: var(--tp-common-blue-2);
}
.category__item:hover .category__icon a svg path {
  stroke: var(--tp-common-white);
}
.category__item:hover .category__icon.pink-bg a {
  background-color: var(--tp-common-pink);
}
.category__item:hover .category__icon.pink-bg a svg path {
  stroke: var(--tp-common-white);
}
.category__item:hover .category__icon.green-bg a {
  background-color: var(--tp-common-green-3);
}
.category__item:hover .category__icon.green-bg a svg path {
  fill: var(--tp-common-white);
  stroke: var(--tp-common-white);
}
.category__item:hover .category__icon.orange-bg a {
  background-color: var(--tp-common-orange);
}
.category__item:hover .category__icon.orange-bg a svg path {
  stroke: var(--tp-common-white);
}
.category__item:hover .category__icon.purple-bg a {
  background-color: var(--tp-common-purple);
}
.category__item:hover .category__icon.purple-bg a svg path {
  stroke: var(--tp-common-white);
}
.category__item:hover .category__icon.green-bg-2 a {
  background-color: var(--tp-common-green-4);
}
.category__item:hover .category__icon.green-bg-2 a svg path {
  stroke: var(--tp-common-white);
}
.category__item:hover .category__icon.yellow-bg a {
  background-color: var(--tp-common-yellow);
}
.category__item:hover .category__icon.yellow-bg a svg path {
  stroke: var(--tp-common-white);
  fill: var(--tp-common-white);
}
.category__item:hover .category__icon.violet-bg a {
  background-color: var(--tp-common-violet);
}
.category__item:hover .category__icon.violet-bg a svg path {
  fill: var(--tp-common-white);
}
.category__item:hover .category__icon.add a {
  background-color: var(--tp-common-green-2);
  color: var(--tp-common-white);
}
.category__item:hover .category__icon.add a svg path {
  fill: var(--tp-common-white);
}
.category__item-3 {
  border: 2px solid rgba(3, 18, 32, 0.06);
  -webkit-border-radius: 14px;
  -moz-border-radius: 14px;
  -o-border-radius: 14px;
  -ms-border-radius: 14px;
  border-radius: 14px;
}
.category__item-3:hover {
  border-color: var(--tp-theme-3);
}
.category__icon {
  margin-bottom: 10px;
}
.category__icon a {
  display: inline-block;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  -webkit-border-radius: 14px;
  -moz-border-radius: 14px;
  -o-border-radius: 14px;
  -ms-border-radius: 14px;
  border-radius: 14px;
  background-color: rgba(66, 112, 255, 0.1);
}
.category__icon.pink-bg a {
  background-color: rgba(255, 100, 112, 0.1);
}
.category__icon.green-bg a {
  background-color: rgba(39, 170, 77, 0.1);
}
.category__icon.orange-bg a {
  background-color: rgba(243, 127, 67, 0.1);
}
.category__icon.purple-bg a {
  background-color: rgba(227, 60, 255, 0.1);
}
.category__icon.green-bg-2 a {
  background-color: rgba(32, 173, 150, 0.1);
}
.category__icon.yellow-bg a {
  background-color: rgba(245, 180, 85, 0.1);
}
.category__icon.violet-bg a {
  background-color: rgba(97, 81, 251, 0.1);
}
.category__icon.violet-bg a svg path {
  fill: #6151fb;
}
.category__icon.add a {
  background-color: transparent;
  border: 1px solid var(--tp-common-green-2);
  font-size: 35px;
  color: var(--tp-common-green-2);
}
.category__title {
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 0;
}
.category__title a:hover {
  color: var(--tp-theme-2);
}
.category__title.add {
  color: var(--tp-common-green-2);
}
.category__title-3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--tp-common-black-3);
  background-color: var(--tp-grey-7);
  margin-bottom: 0;
  padding: 20px 30px;
}
.category__list {
  padding-top: 10px;
  padding-bottom: 5px;
}
.category__list ul li {
  list-style: none;
}
.category__list ul li a {
  font-size: 15px;
  color: var(--tp-common-black-3);
  position: relative;
  padding-left: 14px;
  padding: 7px 30px 10px;
  padding-left: 40px;
  display: block;
}
.category__list ul li a i {
  margin-left: 30px;
  visibility: hidden;
  opacity: 0;
  color: var(--tp-theme-3);
}
.category__list ul li a::after {
  position: absolute;
  content: "";
  left: 28px;
  top: 44%;
  -webkit-transform: tranlateY(-50%);
  -moz-transform: tranlateY(-50%);
  -ms-transform: tranlateY(-50%);
  -o-transform: tranlateY(-50%);
  transform: tranlateY(-50%);
  width: 3px;
  height: 3px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  background-color: var(--tp-common-black-3);
}
.category__list ul li a:hover {
  background-color: rgba(0, 122, 112, 0.06);
}
.category__list ul li a:hover i {
  visibility: visible;
  opacity: 1;
}
.category__btn-3 {
  padding: 20px 30px 35px;
}
.category__more {
  flex: 0 0 auto;
}

/*----------------------------------------*/
/*  16. EVENT CSS START
/*----------------------------------------*/
.event__item {
  padding: 15px 50px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
  -webkit-box-shadow: 0px 30px 50px rgba(3, 18, 32, 0.08);
  -moz-box-shadow: 0px 30px 50px rgba(3, 18, 32, 0.08);
  -ms-box-shadow: 0px 30px 50px rgba(3, 18, 32, 0.08);
  -o-box-shadow: 0px 30px 50px rgba(3, 18, 32, 0.08);
  box-shadow: 0px 30px 50px rgba(3, 18, 32, 0.08);
}
@media (max-width: 575px) {
  .event__item {
    padding-left: 20px;
    padding-right: 20px;
  }
}
.event__item::after {
  position: absolute;
  content: "";
  left: -3px;
  top: auto;
  bottom: 0;
  width: 30px;
  height: 0;
  background-color: var(--tp-theme-2);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
  z-index: -1;
}
.event__item:hover::after {
  top: 0;
  bottom: auto;
  height: 100%;
}
.event__date {
  padding-right: 40px;
  margin-right: 30px;
  position: relative;
  flex: 0 0 auto;
}
@media (max-width: 575px) {
  .event__date {
    margin-bottom: 15px;
  }
}
.event__date::after {
  position: absolute;
  content: "";
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 1px;
  height: 90px;
  background-color: rgba(3, 18, 32, 0.08);
}
@media (max-width: 575px) {
  .event__date::after {
    display: none;
  }
}
.event__date h4 {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 0;
  line-height: 1;
}
.event__date p {
  color: var(--tp-text-11);
  font-size: 14px;
  margin-bottom: 0;
}
.event__meta ul li {
  list-style: none;
}
.event__meta ul li a {
  font-size: 14px;
  color: var(--tp-text-11);
}
.event__meta ul li a i,
.event__meta ul li a svg {
  margin-right: 7px;
}
.event__meta ul li a svg {
  -webkit-transform: translateY(-2px);
  -moz-transform: translateY(-2px);
  -ms-transform: translateY(-2px);
  -o-transform: translateY(-2px);
  transform: translateY(-2px);
}
.event__title {
  font-size: 20px;
  font-weight: 600;
}
.event__title a:hover {
  color: var(--tp-theme-2);
}
.event__person ul li {
  list-style: none;
  display: inline-block;
}
.event__person ul li a img {
  width: 26px;
  height: 26px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  margin-left: -8px;
  border: 2px solid var(--tp-common-white);
}
.event__person ul li a img:first-child {
  margin-left: 0;
  border: none;
}
.event__person ul li a span {
  font-size: 14px;
  font-weight: 500;
  color: var(--tp-text-11);
  margin-left: 5px;
}
.event__time span {
  display: inline-block;
  height: 30px;
  line-height: 30px;
  color: var(--tp-theme-2);
  background-color: rgba(37, 142, 70, 0.06);
  font-size: 14px;
  font-weight: 500;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
  padding: 0 15px;
}
.event__time span i {
  margin-right: 5px;
}
.event__time span svg {
  margin-right: 3px;
  -webkit-transform: translateY(-2px);
  -moz-transform: translateY(-2px);
  -ms-transform: translateY(-2px);
  -o-transform: translateY(-2px);
  transform: translateY(-2px);
}
.event__right {
  flex: 0 0 auto;
}
@media only screen and (min-width: 768px) and (max-width: 991px),
  only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .event__right {
    margin-top: 25px;
  }
}
@media (max-width: 575px) {
  .event__more {
    margin-left: 0;
    margin-top: 15px;
  }
}
.event__details h3 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 15px;
}
.event__details p {
  font-size: 18px;
  line-height: 28px;
  color: var(--tp-text-11);
}
.event__allow h3 {
  font-size: 26px;
  font-weight: 600;
  margin-bottom: 15px;
}
.event__allow ul li {
  font-size: 16px;
  color: var(--tp-common-black);
  list-style: none;
}
.event__allow ul li:not(:last-child) {
  margin-bottom: 5px;
}
.event__allow ul li i {
  display: inline-block;
  width: 18px;
  height: 18px;
  text-align: center;
  line-height: 18px;
  font-size: 10px;
  font-weight: 500;
  color: var(--tp-theme-2);
  background: rgba(37, 142, 70, 0.1);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  margin-right: 10px;
}
.event__tag {
  border-top: 1px solid #e4e6ef;
  padding-top: 25px;
}
.event__tag span {
  font-size: 16px;
  color: var(--tp-theme-1);
  margin-right: 7px;
}
.event__tag a {
  font-size: 16px;
  color: var(--tp-text-11);
  font-weight: 600;
}
.event__tag a:hover {
  color: var(--tp-theme-1);
}
.event__info-price h5 {
  font-size: 26px;
  display: inline-block;
  margin-bottom: 0;
}
.event__info-price h5 span {
  font-size: 20px;
  font-weight: 600;
}
.event__info-price h5.old-price {
  text-decoration: line-through;
  color: var(--tp-text-3);
  font-weight: 500;
  font-size: 16px;
  padding-left: 10px;
}
.event__info-discount span {
  display: inline-block;
  font-size: 14px;
  height: 24px;
  line-height: 24px;
  padding: 0 12px;
  color: var(--tp-common-pink-2);
  background: rgba(252, 76, 86, 0.08);
  font-weight: 600;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
}
.event__info-content ul li:not(:last-child) {
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid #eef0f6;
}
.event__info-icon svg {
  width: 16px;
  height: 20px;
  margin-right: 12px;
}
.event__info-icon svg .st0 {
  fill: none;
  stroke: var(--tp-theme-1);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 2.6667;
}
.event__info-item h5 {
  margin-bottom: 0;
  font-weight: 400;
  color: var(--tp-text-3);
  font-size: 15px;
  line-height: 1;
}
.event__info-item h5 span {
  font-weight: 500;
  color: var(--tp-common-black);
  padding-right: 5px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .event__sidebar {
    padding-left: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .event__sidebar {
    padding-left: 0;
    margin-top: 50px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .event__sidebar {
    padding-left: 0;
    margin-top: 50px;
  }
}
@media (max-width: 575px) {
  .event__sidebar {
    padding-left: 0;
    margin-top: 50px;
  }
}
.event__sidebar-widget {
  position: relative;
  padding: 30px;
  -webkit-box-shadow: 0px 30px 50px 0px rgba(1, 11, 60, 0.1);
  -moz-box-shadow: 0px 30px 50px 0px rgba(1, 11, 60, 0.1);
  -ms-box-shadow: 0px 30px 50px 0px rgba(1, 11, 60, 0.1);
  -o-box-shadow: 0px 30px 50px 0px rgba(1, 11, 60, 0.1);
  box-shadow: 0px 30px 50px 0px rgba(1, 11, 60, 0.1);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
}
.event__sidebar-shape img {
  position: absolute;
  z-index: -1;
}
.event__sidebar-shape img.events-sidebar-img-2 {
  top: 40px;
  left: -25px;
}
.event__sidebar-shape img.events-sidebar-img-3 {
  bottom: 90px;
  right: -30px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .event__sidebar-shape img.events-sidebar-img-3 {
    right: -15px;
  }
}
@media (max-width: 575px) {
  .event__sidebar-shape img.events-sidebar-img-3 {
    right: -10px;
  }
}
.event__join-btn a {
  background: var(--tp-common-pink-2);
}
.event__join-btn a i {
  padding-left: 5px;
}
.event__social h4 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 0px;
  margin-right: 10px;
}
@media (max-width: 575px) {
  .event__social h4 {
    margin-bottom: 10px;
  }
}
.event__social ul li {
  display: inline-block;
  margin-left: 5px;
}
@media (max-width: 575px) {
  .event__social ul li {
    margin-left: 0;
    margin-right: 5px;
  }
}
.event__social ul li a {
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 13px;
  color: var(--tp-common-black);
  background: var(--tp-grey-1);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
}
.event__social ul li a.fb {
  color: #285da1;
  background: rgba(40, 93, 161, 0.1);
}
.event__social ul li a.fb:hover {
  color: var(--tp-common-white);
  background: #285da1;
}
.event__social ul li a.tw {
  color: #03a9f4;
  background: rgba(3, 169, 244, 0.1);
}
.event__social ul li a.tw:hover {
  color: var(--tp-common-white);
  background: #03a9f4;
}
.event__social ul li a.pin {
  color: #d8163f;
  background: rgba(216, 22, 63, 0.1);
}
.event__social ul li a.pin:hover {
  color: var(--tp-common-white);
  background: #d8163f;
}
.event__sponsor-title {
  font-size: 20px;
  margin-bottom: 20px;
}
.event__sponsor-info h3 {
  font-size: 16px;
}
.event__sponsor-info > h4 {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 10px;
}
.event__sponsor-info > h4 span {
  font-weight: 400;
  color: var(--tp-text-3);
}

/*----------------------------------------*/
/*  17. TEAM CSS START
/*----------------------------------------*/
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .team__wrapper {
    padding-left: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px),
  only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .team__wrapper {
    padding-left: 0;
  }
}
.team__wrapper p {
  font-size: 16px;
  color: var(--tp-text-11);
}
.team__item:hover .team__social {
  visibility: visible;
  opacity: 1;
  bottom: 20px;
}
.team__thumb {
  position: relative;
  z-index: 1;
}
.team__shape {
  position: absolute;
  z-index: -1;
  left: 0;
  bottom: -41px;
  width: 100%;
}
.team__shape img {
  width: 100%;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .team__shape img {
    width: auto;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
  (max-width: 575px) {
  .team__shape {
    bottom: -44px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .team__shape {
    bottom: -50px;
  }
}
.team__content {
  padding-top: 20px;
  position: relative;
  z-index: 1;
}
.team__title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 0;
}
.team__title a:hover {
  color: var(--tp-theme-2);
}
.team__designation {
  display: inline-block;
  font-size: 14px;
  color: var(--tp-text-11);
}
.team__social {
  position: absolute;
  bottom: 0px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 80%;
  visibility: hidden;
  opacity: 0;
}
.team__social a {
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: var(--tp-text-7);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  background-color: var(--tp-common-white);
  margin: 0 2px;
}
.team__social a:hover {
  background-color: var(--tp-theme-1);
  color: var(--tp-common-white);
}

/*----------------------------------------*/
/*  18. TESTIMONIAL CSS START
/*----------------------------------------*/
.testimonial__slider .owl-stage-outer {
  overflow: visible;
}
.testimonial__slider .owl-item {
  opacity: 0;
  visibility: hidden;
  -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;
  transition: all 0.3s ease-out 0s;
}
.testimonial__slider .owl-item.active {
  opacity: 1;
  visibility: visible;
}
.testimonial__slider .owl-dots {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  position: absolute;
  bottom: -52px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
}
.testimonial__slider .owl-dots .owl-dot {
  margin: 0 6px;
  width: 8px;
  height: 8px;
  background-color: var(--tp-grey-6);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
}
.testimonial__slider .owl-dots .owl-dot.active {
  width: 12px;
  height: 12px;
  background-color: var(--tp-theme-2);
}
.testimonial__active.swiper-container {
  overflow: visible;
}
.testimonial__item {
  padding: 40px 45px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
  -webkit-box-shadow: 0px 30px 40px rgba(3, 18, 32, 0.06);
  -moz-box-shadow: 0px 30px 40px rgba(3, 18, 32, 0.06);
  -ms-box-shadow: 0px 30px 40px rgba(3, 18, 32, 0.06);
  -o-box-shadow: 0px 30px 40px rgba(3, 18, 32, 0.06);
  box-shadow: 0px 30px 40px rgba(3, 18, 32, 0.06);
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
  only screen and (min-width: 768px) and (max-width: 991px),
  (max-width: 575px) {
  .testimonial__item {
    padding-left: 15px;
    padding-right: 15px;
  }
}
.testimonial__avater {
  margin-bottom: 30px;
}
.testimonial__avater img {
  width: 66px !important;
  height: 66px;
  display: inline-block !important;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
}
.testimonial__avater-info h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 0;
}
.testimonial__avater-info span {
  color: var(--tp-text-11);
}
.testimonial__text h4 {
  font-size: 20px;
  font-weight: 600;
}
.testimonial__text p {
  font-size: 16px;
  line-height: 26px;
  color: var(--tp-text-12);
  margin-bottom: 20px;
}
.testimonial__rating ul li {
  display: inline-block;
  margin: 0 0;
}
.testimonial__rating ul li a {
  font-size: 14px;
  color: var(--tp-common-yellow-4);
}

/*----------------------------------------*/
/*  19. BRAND CSS START
/*----------------------------------------*/
.brand__wrapper p {
  font-size: 15px;
  color: var(--tp-text-11);
  margin-bottom: 30px;
}
@media only screen and (min-width: 768px) and (max-width: 991px),
  only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .brand__item-wrapper {
    padding-left: 0;
    margin-top: 50px;
  }
}

/*----------------------------------------*/
/*  20. CERTIFICATE CSS START
/*----------------------------------------*/
.certificate__content p {
  text-align: justify;
  color: var(--tp-text-11);
  font-size: 18px;
  margin-bottom: 40px;
}
@media (max-width: 575px) {
  .certificate__content .section__title.section__title-44 {
    font-size: 23px;
  }
}
.certificate__inner {
  padding: 95px 70px 90px;
  -webkit-border-radius: 14px;
  -moz-border-radius: 14px;
  -o-border-radius: 14px;
  -ms-border-radius: 14px;
  border-radius: 14px;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .certificate__inner {
    padding-left: 30px;
    padding-right: 30px;
  }
}
@media (max-width: 575px) {
  .certificate__inner {
    padding-left: 30px;
    padding-right: 30px;
  }
}
.certificate__links .play-video {
  display: inline-block;
  height: 44px;
  line-height: 44px;
  text-align: center;
  padding: 0 34px;
  padding-right: 28px;
  font-size: 15px;
  font-weight: 500;
  
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -o-border-radius: 20px;
  -ms-border-radius: 20px;
  border-radius: 20px;
  -webkit-box-shadow: 0px 1px 2px rgba(3, 18, 32, 0.1);
  -moz-box-shadow: 0px 1px 2px rgba(3, 18, 32, 0.1);
  -ms-box-shadow: 0px 1px 2px rgba(3, 18, 32, 0.1);
  -o-box-shadow: 0px 1px 2px rgba(3, 18, 32, 0.1);
  box-shadow: 0px 1px 2px rgba(3, 18, 32, 0.1);
  background-color: var(--tp-theme-1);
  color: var(--tp-common-white);

}
.certificate__links .play-video i {
  margin-right: 5px;
}
.certificate__links .play-video:hover {
  background-color: var(--tp-common-white);
  color: var(--tp-common-black);
}
.certificate__links ul {
  margin-left: 30px;
}
@media (max-width: 575px) {
  .certificate__links ul {
    margin-left: 0;
    margin-top: 30px;
  }
}
.certificate__links ul li {
  list-style: none;
  display: inline-block;
}
.certificate__links ul li:not(:last-child) {
  margin-right: 30px;
}
.certificate__links ul li:last-child a::after {
  display: none;
}
.certificate__links ul li a {
  font-size: 15px;
  font-weight: 500;
  color: var(--tp-common-black);
  position: relative;
  padding-right: 30px;
}
.certificate__links ul li a::after {
  position: absolute;
  content: "";
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 1px;
  height: 36px;
  background-color: rgba(3, 18, 32, 0.1);
}
.certificate__links ul li a:hover {
  color: var(--tp-theme-3);
}
.certificate__thumb img {
  width: 100%;
}

.certificate__thumb {
  padding-top: 2rem;
  /* position: absolute;
  left: 45px;
  bottom: 0; */
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .certificate__thumb img {
    width: 100%;
  }
  .certificate__thumb {
    /* right: -20px;
    bottom: -80px; */
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .certificate__thumb {
    /* display: none; */
  }
}
@media (max-width: 575px) {
  .certificate__thumb {
    /* display: none; */
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .certificate__thumb img {
    width: 100%;
  }
}

/*----------------------------------------*/
/*  21. PRICE CSS START
/*----------------------------------------*/
.price__banner {
  -webkit-border-radius: 14px;
  -moz-border-radius: 14px;
  -o-border-radius: 14px;
  -ms-border-radius: 14px;
  border-radius: 14px;
  padding: 50px 30px 275px;
}
.price__banner-content h3 {
  font-size: 30px;
  color: var(--tp-common-white);
  margin-bottom: 15px;
}
.price__banner-content h3 span {
  display: block;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 400;
}
.price__banner-content p {
  font-size: 16px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 25px;
  padding-right: 50px;
}
.price__item {
  border: 2px solid rgba(3, 18, 32, 0.06);
  -webkit-border-radius: 14px;
  -moz-border-radius: 14px;
  -o-border-radius: 14px;
  -ms-border-radius: 14px;
  border-radius: 14px;
}
.price__item:hover {
  border-color: var(--tp-theme-3);
}
.price__item.active {
  border-color: var(--tp-theme-3);
}
.price__item.active .price__btn .tp-btn-9.tp-btn-12 {
  background-color: var(--tp-theme-3);
  border-color: var(--tp-theme-3);
  color: var(--tp-common-white);
}
.price__thumb {
  position: absolute;
  bottom: 0;
  right: 15px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .price__thumb {
    bottom: -35px;
    right: 0;
  }
}
@media (max-width: 575px) {
  .price__thumb {
    bottom: -80px;
    right: -20px;
  }
}
.price__thumb::after {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: luminosity;
}
.price__thumb img {
  mix-blend-mode: luminosity;
  filter: grayscale(100%);
}
.price__shape {
  position: absolute;
  top: 0;
  right: 0;
}
.price__title {
  font-size: 24px;
  font-weight: 600;
  color: var(--tp-common-black-3);
  background-color: var(--tp-grey-3);
  margin-bottom: 0;
  padding: 20px 40px;
}
.price__list ul li {
  list-style: none;
  position: relative;
  padding-left: 14px;
  padding-bottom: 10px;
  margin-bottom: 18px;
  border-bottom: 1.5px solid rgba(3, 18, 32, 0.06);
  color: var(--tp-common-black);
  font-size: 15px;
}
.price__list ul li::after {
  position: absolute;
  content: "";
  left: 0;
  top: 37%;
  -webkit-transform: tranlateY(-50%);
  -moz-transform: tranlateY(-50%);
  -ms-transform: tranlateY(-50%);
  -o-transform: tranlateY(-50%);
  transform: tranlateY(-50%);
  width: 3px;
  height: 3px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  background-color: var(--tp-common-black-3);
}
.price__list ul li span {
  float: right;
  display: inline-block;
  width: 16px;
  height: 16px;
  line-height: 14px;
  text-align: center;
  background-color: var(--tp-theme-3);
  color: var(--tp-common-white);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  font-size: 10px;
  margin-top: 5px;
  border: 1px solid var(--tp-theme-3);
}
.price__list ul li.unavailable {
  color: var(--tp-text-13);
}
.price__list ul li.unavailable::after {
  background-color: var(--tp-text-13);
}
.price__list ul li.unavailable span {
  background-color: transparent;
  border-color: var(--tp-text-13);
  color: var(--tp-text-13);
}
.price__content {
  padding: 30px 40px 45px;
}
.price__amount h4 {
  font-size: 34px;
  font-weight: 700;
}
.price__amount h4 span {
  font-size: 16px;
  color: var(--tp-text-11);
  opacity: 0.7;
  font-weight: 400;
}

/*----------------------------------------*/
/*  22. FAQ CSS START
/*----------------------------------------*/
.faq__accordion .accordion-item {
  border: none;
  border-bottom: 1px solid rgba(3, 18, 32, 0.06);
  padding: 15px 0;
  /* padding-left: 65px; */
}
.faq__accordion .accordion-item:first-of-type .accordion-button {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}
.faq__accordion .accordion-button {
  font-size: 18px;
  font-weight: 600;
  text-align: right;
  color: var(--tp-common-black);
  border: 0;
  padding: 15px 0;
  padding-right: 25px;
  position: relative;
  -webkit-border-radius: 20px 20px 0 0;
  -moz-border-radius: 20px 20px 0 0;
  -o-border-radius: 20px 20px 0 0;
  -ms-border-radius: 20px 20px 0 0;
  border-radius: 20px 20px 0 0;
}
.faq__accordion .accordion-button::after {
  position: absolute;
  top: 50%;
  left: -65px;
  -webkit-transform: translateY(-50%) rotate(0deg);
  -moz-transform: translateY(-50%) rotate(0deg);
  -ms-transform: translateY(-50%) rotate(0deg);
  -o-transform: translateY(-50%) rotate(0deg);
  transform: translateY(-50%) rotate(0deg);
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background-color: var(--tp-grey-10);
  background-image: none;
  content: "+";
  font-family: var(--tp-ff-fontawesome);
  font-weight: 500;
  margin: inherit;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  -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;
  transition: all 0.3s ease-out 0s;
}
.faq__accordion .accordion-button:focus {
  box-shadow: none;
}
.faq__accordion .accordion-body {
  padding: 0;
  padding-right: 25px;
  padding-left: 50px;
  padding-bottom: 25px;
}
@media (max-width: 575px) {
  .faq__accordion .accordion-body {
    padding-right: 15px;
  }
}
.faq__accordion .accordion-body p {
  font-size: 15px;
  color: var(--tp-text-11);
  line-height: 24px;
  margin-bottom: 0;
}
.faq__accordion .accordion-button:not(.collapsed) {
  background-color: transparent;
  box-shadow: none;
  background-color: var(--tp-grey-7);
}
.faq__accordion .accordion-button:not(.collapsed)::after {
  -webkit-transform: translateY(-50%) rotate(45deg);
  -moz-transform: translateY(-50%) rotate(45deg);
  -ms-transform: translateY(-50%) rotate(45deg);
  -o-transform: translateY(-50%) rotate(45deg);
  transform: translateY(-50%) rotate(45deg);
  background-color: var(--tp-theme-3);
  color: var(--tp-common-white);
}
.faq__accordion .accordion-collapse {
  -webkit-border-radius: 0 0 20px 20px;
  -moz-border-radius: 0 0 20px 20px;
  -o-border-radius: 0 0 20px 20px;
  -ms-border-radius: 0 0 20px 20px;
  border-radius: 0 0 20px 20px;
  background-color: var(--tp-grey-7);
}
.faq__wrapper p {
  text-align: justify;
  font-size: 16px;
  margin-bottom: 20px;
}
.faq__wrapper p a {
  color: var(--tp-theme-3);
  font-weight: 500;
}
@media only screen and (min-width: 768px) and (max-width: 991px),
  only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .faq__item-wrapper {
    padding-left: 0;
    margin-top: 50px;
  }
}

/*----------------------------------------*/
/*  23. APP CSS START
/*----------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 991px),
  only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .app__wrapper {
    margin-bottom: 50px;
  }
}
.app__bg {
  position: relative;
}
.app__bg::after {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100px;
  background-color: var(--tp-grey-9);
  z-index: -1;
}
.app__inner {
  padding: 50px 70px;
  -webkit-border-radius: 14px;
  -moz-border-radius: 14px;
  -o-border-radius: 14px;
  -ms-border-radius: 14px;
  border-radius: 14px;
  -webkit-box-shadow: 0px 40px 50px rgba(2, 29, 26, 0.14);
  -moz-box-shadow: 0px 40px 50px rgba(2, 29, 26, 0.14);
  -ms-box-shadow: 0px 40px 50px rgba(2, 29, 26, 0.14);
  -o-box-shadow: 0px 40px 50px rgba(2, 29, 26, 0.14);
  box-shadow: 0px 40px 50px rgba(2, 29, 26, 0.14);
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .app__inner {
    padding-left: 45px;
    padding-right: 45px;
  }
}
@media (max-width: 575px) {
  .app__inner {
    padding-left: 15px;
    padding-right: 15px;
  }
}
.app__title {
  font-size: 44px;
  font-weight: 800;
  color: var(--tp-common-white);
  margin-bottom: 0;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .app__title {
    font-size: 35px;
  }
}
@media (max-width: 575px) {
  .app__title {
    font-size: 23px;
  }
}
@media (max-width: 575px) {
  .app__item {
    margin-bottom: 15px;
  }
}
.app__item a {
  font-size: 18px;
  line-height: 1;
  font-weight: 600;
  color: var(--tp-common-white);
  border: 2px solid rgba(255, 255, 255, 0.3);
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
  display: inline-block;
  padding: 5px 24px;
  padding-left: 20px;
}
.app__item a img {
  margin-right: 5px;
}
.app__item a:hover,
.app__item a.active {
  background-color: var(--tp-common-white);
  border-color: var(--tp-common-white);
  color: var(--tp-common-black);
}
.app__item a .apple {
  transform: translateY(-3px);
  display: inline-block;
}
.app__shape-1 {
  position: absolute;
  top: 0;
  left: 45px;
}
.app__shape-2 {
  position: absolute;
  right: 0;
  bottom: 0;
  mix-blend-mode: luminosity;
}

/*----------------------------------------*/
/*  24. CONTACT CSS START
/*----------------------------------------*/
.contact__form-input input,
.contact__form-input textarea {
  width: 100%;
  height: 56px;
  line-height: 54px;
  padding: 0 23px;
  background: var(--tp-grey-2);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  border: 2px solid var(--tp-grey-2);
  color: var(--tp-common-black);
  font-size: 15px;
  margin-bottom: 20px;
}
.contact__form-input input::placeholder,
.contact__form-input textarea::placeholder {
  font-size: 15px;
  color: var(--tp-text-11);
}
.contact__form-input input:focus,
.contact__form-input textarea:focus {
  border-color: var(--tp-theme-1);
  outline: none;
  background: var(--tp-common-white);
}
.contact__form-input textarea {
  height: 180px;
  padding: 23px 25px;
  line-height: 1.1;
  resize: none;
  margin-bottom: 13px;
}
.contact__form-agree {
  padding-left: 5px;
}
.contact__form-agree input {
  margin: 0;
  appearance: none;
  -moz-appearance: none;
  display: block;
  width: 14px;
  height: 14px;
  background: var(--tp-common-white);
  border: 1px solid #b9bac1;
  outline: none;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
}
.contact__form-agree input:checked {
  position: relative;
  background-color: var(--tp-theme-1);
  border-color: transparent;
}
.contact__form-agree input:checked::after {
  box-sizing: border-box;
  content: "\f00c";
  position: absolute;
  font-family: var(--tp-ff-fontawesome);
  font-size: 10px;
  color: var(--tp-common-white);
  top: 46%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.contact__form-agree input:hover {
  cursor: pointer;
}
.contact__form-agree label {
  padding-left: 8px;
  color: var(--tp-text-11);
}
.contact__form-agree label a {
  color: var(--tp-common-black);
  font-weight: 600;
  padding-left: 4px;
}
.contact__form-agree label a:hover {
  color: var(--tp-theme-1);
}
.contact__form-agree label:hover {
  cursor: pointer;
}
.contact__info-inner {
  padding: 45px 40px;
  padding-right: 70px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: 0px 30px 50px 0px rgba(1, 11, 60, 0.1);
  -moz-box-shadow: 0px 30px 50px 0px rgba(1, 11, 60, 0.1);
  -ms-box-shadow: 0px 30px 50px 0px rgba(1, 11, 60, 0.1);
  -o-box-shadow: 0px 30px 50px 0px rgba(1, 11, 60, 0.1);
  box-shadow: 0px 30px 50px 0px rgba(1, 11, 60, 0.1);
  position: relative;
  z-index: 1;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .contact__info-inner {
    margin-top: 50px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .contact__info-inner {
    margin-top: 50px;
  }
}
@media (max-width: 575px) {
  .contact__info-inner {
    margin-top: 50px;
    padding-right: 35px;
  }
}
.contact__info-inner ul li {
  list-style: none;
}
.contact__info-icon svg {
  fill: none;
  stroke: var(--tp-theme-1);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.contact__info-icon svg.map {
  width: 16px;
  height: 20px;
}
.contact__info-icon svg.mail {
  width: 18px;
  height: 18px;
}
.contact__info-icon svg.call {
  width: 18px;
  height: 18px;
}
.contact__info-text h4 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 6px;
}
.contact__info-text p {
  margin-bottom: 0;
  color: var(--tp-text-11);
}
.contact__info-text p a:hover {
  color: var(--tp-text-11);
}
.contact__social h4 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 13px;
}
.contact__social ul li {
  display: inline-block;
  margin-right: 10px;
}
.contact__social ul li a {
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 13px;
  color: var(--tp-common-black);
  background: var(--tp-grey-2);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
}
.contact__social ul li a.fb {
  color: #285da1;
  background: rgba(40, 93, 161, 0.1);
}
.contact__social ul li a.fb:hover {
  color: var(--tp-common-white);
  background: #285da1;
}
.contact__social ul li a.tw {
  color: #03a9f4;
  background: rgba(3, 169, 244, 0.1);
}
.contact__social ul li a.tw:hover {
  color: var(--tp-common-white);
  background: #03a9f4;
}
.contact__social ul li a.pin {
  color: #d8163f;
  background: rgba(216, 22, 63, 0.1);
}
.contact__social ul li a.pin:hover {
  color: var(--tp-common-white);
  background: #d8163f;
}
.contact__icon {
  margin-bottom: 28px;
}
.contact__icon svg {
  width: 70px;
  height: 70px;
  backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition: transform 0.3s cubic-bezier(0.21, 0.6, 0.44, 2.18);
  -moz-transition: transform 0.3s cubic-bezier(0.21, 0.6, 0.44, 2.18);
  -ms-transition: transform 0.3s cubic-bezier(0.21, 0.6, 0.44, 2.18);
  -o-transition: transform 0.3s cubic-bezier(0.21, 0.6, 0.44, 2.18);
  transition: transform 0.3s cubic-bezier(0.21, 0.6, 0.44, 2.18);
}
.contact__icon svg .st0 {
  fill: none;
  stroke: var(--tp-theme-1);
  stroke-width: 0.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.contact__item {
  padding: 50px 80px;
  padding-bottom: 62px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
  -webkit-box-shadow: 0px 40px 50px 0px rgba(1, 11, 60, 0.08);
  -moz-box-shadow: 0px 40px 50px 0px rgba(1, 11, 60, 0.08);
  -ms-box-shadow: 0px 40px 50px 0px rgba(1, 11, 60, 0.08);
  -o-box-shadow: 0px 40px 50px 0px rgba(1, 11, 60, 0.08);
  box-shadow: 0px 40px 50px 0px rgba(1, 11, 60, 0.08);
  position: relative;
  z-index: 1;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .contact__item {
    padding-left: 30px;
    padding-right: 30px;
  }
}
@media (max-width: 575px) {
  .contact__item {
    padding-left: 20px;
    padding-right: 20px;
  }
}
.contact__item:hover .contact__icon svg {
  -webkit-transform: translate3d(0, -10px, 0);
  -moz-transform: translate3d(0, -10px, 0);
  -ms-transform: translate3d(0, -10px, 0);
  -o-transform: translate3d(0, -10px, 0);
  transform: translate3d(0, -10px, 0);
}
.contact__title {
  font-size: 26px;
  margin-bottom: 8px;
}
.contact__content p {
  font-size: 16px;
  color: var(--tp-text-11);
  margin-bottom: 30px;
}
.contact__shape img {
  position: absolute;
}
.contact__shape img.contact-shape-1 {
  bottom: 75px;
  left: -30px;
  z-index: -1;
}
.contact__shape img.contact-shape-2 {
  top: 30px;
  right: -30px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .contact__shape img.contact-shape-2 {
    right: -20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .contact__shape img.contact-shape-2 {
    right: -20px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .contact__shape img.contact-shape-2 {
    right: -20px;
  }
}
@media (max-width: 575px) {
  .contact__shape img.contact-shape-2 {
    right: 0px;
  }
}
.contact__shape img.contact-shape-3 {
  right: -45%;
  top: 50%;
}
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
  .contact__shape img.contact-shape-3 {
    right: -20%;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .contact__shape img.contact-shape-3 {
    right: -10%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .contact__shape img.contact-shape-3 {
    right: -5%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .contact__shape img.contact-shape-3 {
    right: -5%;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .contact__shape img.contact-shape-3 {
    right: -5%;
  }
}
@media (max-width: 575px) {
  .contact__shape img.contact-shape-3 {
    right: 0%;
  }
}
.contact__shape img.contact-shape-4 {
  right: 180px;
  bottom: -21%;
}
.contact__shape img.contact-shape-5 {
  left: 0;
  bottom: 142px;
}

/*----------------------------------------*/
/*  25. TEACHER CSS START
/*----------------------------------------*/
.teacher__item {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
  padding: 30px;
}
.teacher__item:hover {
  background: var(--tp-common-white);
  -webkit-box-shadow: 0px 30px 40px 0px rgba(1, 11, 60, 0.1);
  -moz-box-shadow: 0px 30px 40px 0px rgba(1, 11, 60, 0.1);
  -ms-box-shadow: 0px 30px 40px 0px rgba(1, 11, 60, 0.1);
  -o-box-shadow: 0px 30px 40px 0px rgba(1, 11, 60, 0.1);
  box-shadow: 0px 30px 40px 0px rgba(1, 11, 60, 0.1);
}
.teacher__item:hover .teacher__thumb img {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);
}
.teacher__content {
  padding-top: 25px;
}
.teacher__content span {
  font-size: 16px;
  color: var(--tp-text-11);
}
.teacher__title {
  display: inline-block;
  font-size: 20px;
  margin-bottom: 10px;
}
.teacher__social ul li {
  display: inline-block;
  margin: 0 5px;
}
.teacher__social ul li a {
  display: inline-block;
  width: 36px;
  height: 36px;
  line-height: 36px;
  font-size: 13px;
  text-align: center;
  border: 2px solid var(--tp-grey-2);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  color: var(--tp-common-black);
}
.teacher__social ul li a:hover {
  background: var(--tp-theme-1);
  color: var(--tp-common-white);
  border-color: var(--tp-theme-1);
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .teacher__social-2 {
    margin-bottom: 30px;
  }
}
@media (max-width: 575px) {
  .teacher__social-2 {
    margin-bottom: 30px;
  }
}
.teacher__social-2 h4 {
  font-size: 16px;
  font-weight: 500;
  color: var(--tp-text-11);
  margin-bottom: 0;
}
.teacher__social-2 ul li {
  display: inline-block;
  margin-right: 5px;
}
.teacher__social-2 ul li a {
  font-size: 14px;
  color: #898a93;
}
.teacher__social-2 ul li a:hover {
  color: var(--tp-theme-1);
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .teacher__rating {
    margin-bottom: 30px;
  }
}
@media (max-width: 575px) {
  .teacher__rating {
    margin-bottom: 30px;
  }
}
.teacher__rating span {
  font-size: 16px;
}
.teacher__rating span i {
  padding-right: 5px;
  color: var(--tp-common-yellow);
}
.teacher__rating h5 {
  font-size: 14px;
  color: var(--tp-text-11);
  font-weight: 600;
  margin-bottom: 0;
}
.teacher__rating ul li {
  display: inline-block;
}
.teacher__rating ul li a {
  font-size: 14px;
  color: var(--tp-common-yellow);
}
.teacher__rating-inner p {
  font-size: 16px;
  color: var(--tp-common-black);
  font-weight: 600;
  margin-bottom: 0;
  padding-left: 3px;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .teacher__info {
    margin-bottom: 30px;
  }
}
@media (max-width: 575px) {
  .teacher__info {
    margin-bottom: 30px;
  }
}
.teacher__info h4 {
  font-size: 40px;
  margin-bottom: 0;
}
.teacher__info span {
  font-size: 16px;
  color: var(--tp-text-11);
}
.teacher__follow-btn {
  display: inline-block;
  height: 40px;
  line-height: 36px;
  text-align: center;
  padding: 0 25px;
  border: 2px solid #eef0f6;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  color: var(--tp-common-black);
  font-weight: 16px;
  font-weight: 500;
  text-transform: capitalize;
  background: var(--tp-common-white);
}
.teacher__follow-btn:hover {
  background: var(--tp-theme-1);
  color: var(--tp-common-white);
  border-color: var(--tp-theme-1);
}
.teacher__top {
  padding-bottom: 20px;
  border-bottom: 1px solid #e8eaf0;
}
.teacher__bio {
  padding-bottom: 50px;
  padding-top: 35px;
  border-bottom: 1px solid #e8eaf0;
}
.teacher__bio h3 {
  font-size: 20px;
  margin-bottom: 15px;
}
.teacher__bio p {
  font-size: 16px;
  line-height: 26px;
  color: var(--tp-text-11);
  margin-bottom: 0;
}
.teacher__courses .section__title {
  font-size: 30px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
  only screen and (min-width: 768px) and (max-width: 991px),
  only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .teacher__details-thumb .team-thumb {
    width: 100%;
  }
}
.teacher__details-thumb img {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .teacher__details-thumb {
    margin-bottom: 50px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .teacher__details-thumb {
    margin-bottom: 50px;
  }
}
@media (max-width: 575px) {
  .teacher__details-thumb {
    margin-bottom: 50px;
    padding-right: 0;
  }
}
.teacher__details-shape img {
  position: absolute;
  z-index: -1;
  width: auto;
}
.teacher__details-shape img.teacher-details-shape-1 {
  right: 0px;
  bottom: 70px;
}
.teacher__details-shape img.teacher-details-shape-2 {
  left: -27px;
  top: 55px;
}

/*----------------------------------------*/
/*  26. ERROR CSS START
/*----------------------------------------*/
.error__title {
  font-size: 70px;
  line-height: 0.9;
  margin-bottom: 10px;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .error__title {
    font-size: 60px;
  }
}
@media (max-width: 575px) {
  .error__title {
    font-size: 37px;
  }
}
.error__content p {
  font-size: 20px;
  color: var(--tp-text-1);
  margin-bottom: 45px;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .error__thumb img {
    width: 100%;
  }
}
@media (max-width: 575px) {
  .error__thumb img {
    width: 100%;
  }
}

/*----------------------------------------*/
/*  27. LOGIN CSS START
/*----------------------------------------*/
.sign__wrapper {
  padding: 50px 70px;
  padding-bottom: 45px;
  margin: 0 30px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
  -webkit-box-shadow: 0px 40px 80px 0px rgba(2, 2, 26, 0.14);
  -moz-box-shadow: 0px 40px 80px 0px rgba(2, 2, 26, 0.14);
  -ms-box-shadow: 0px 40px 80px 0px rgba(2, 2, 26, 0.14);
  -o-box-shadow: 0px 40px 80px 0px rgba(2, 2, 26, 0.14);
  box-shadow: 0px 40px 80px 0px rgba(2, 2, 26, 0.14);
  z-index: 11;
}
@media (max-width: 575px) {
  .sign__wrapper {
    margin: 0;
    padding: 30px 20px;
    padding-bottom: 25px;
  }
}
.sign__shape img {
  position: absolute;
  z-index: -1;
}
.sign__shape img.man-1 {
  left: 28%;
  top: 60%;
  z-index: 1;
}
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
  .sign__shape img.man-1 {
    left: 19%;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .sign__shape img.man-1 {
    left: 16%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .sign__shape img.man-1 {
    left: 7%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .sign__shape img.man-1 {
    left: 2%;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .sign__shape img.man-1 {
    left: 1%;
  }
}
@media (max-width: 575px) {
  .sign__shape img.man-1 {
    display: none;
  }
}
.sign__shape img.man-2 {
  right: 24%;
  top: 65%;
}
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
  .sign__shape img.man-2 {
    top: 55%;
    right: 20%;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .sign__shape img.man-2 {
    top: 60%;
    right: 15%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .sign__shape img.man-2 {
    top: 60%;
    right: 7%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .sign__shape img.man-2 {
    top: 60%;
    right: 0%;
    z-index: 1;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .sign__shape img.man-2 {
    top: 60%;
    right: 0%;
    z-index: 1;
  }
}
@media (max-width: 575px) {
  .sign__shape img.man-2 {
    display: none;
  }
}
.sign__shape img.man-2.man-22 {
  top: 50%;
}
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
  .sign__shape img.man-2.man-22 {
    top: 55%;
    right: 20%;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .sign__shape img.man-2.man-22 {
    top: 60%;
    right: 15%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .sign__shape img.man-2.man-22 {
    top: 60%;
    right: 7%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .sign__shape img.man-2.man-22 {
    top: 60%;
    right: 0%;
    z-index: 1;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .sign__shape img.man-2.man-22 {
    top: 60%;
    right: 0%;
    z-index: 1;
  }
}
.sign__shape img.circle {
  right: 32%;
  top: 38%;
  animation: signCircle 5s linear 0s infinite alternate;
  -webkit-animation: signCircle 5s linear 0s infinite alternate;
}
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
  .sign__shape img.circle {
    right: 25%;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .sign__shape img.circle {
    right: 22%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .sign__shape img.circle {
    right: 11%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .sign__shape img.circle {
    right: 4%;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .sign__shape img.circle {
    right: 2%;
  }
}
@media (max-width: 575px) {
  .sign__shape img.circle {
    display: none;
  }
}
.sign__shape img.dot {
  right: 34%;
  top: 43%;
  animation: signDot 5s linear 0s infinite alternate;
  -webkit-animation: signDot 5s linear 0s infinite alternate;
}
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
  .sign__shape img.dot {
    right: 29%;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .sign__shape img.dot {
    right: 26%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .sign__shape img.dot {
    right: 18%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .sign__shape img.dot {
    right: 5%;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .sign__shape img.dot {
    right: 3%;
  }
}
@media (max-width: 575px) {
  .sign__shape img.dot {
    display: none;
  }
}
.sign__shape img.bg {
  left: 33%;
  top: 26%;
  opacity: 0.06;
  max-width: 100%;
  animation: signBg 5s linear 0s infinite alternate;
  -webkit-animation: signBg 5s linear 0s infinite alternate;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .sign__shape img.bg {
    left: 10%;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .sign__shape img.bg {
    left: 0%;
  }
}
@media (max-width: 575px) {
  .sign__shape img.bg {
    display: none;
  }
}
.sign__shape img.zigzag {
  left: 32%;
  top: 43%;
  animation: signZigzag 5s linear 0s infinite alternate;
  -webkit-animation: signZigzag 5s linear 0s infinite alternate;
}
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
  .sign__shape img.zigzag {
    left: 24%;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .sign__shape img.zigzag {
    left: 23%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .sign__shape img.zigzag {
    left: 11%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .sign__shape img.zigzag {
    left: 3%;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .sign__shape img.zigzag {
    left: 2%;
  }
}
@media (max-width: 575px) {
  .sign__shape img.zigzag {
    display: none;
  }
}
.sign__shape img.flower {
  bottom: 13%;
  right: 30%;
}
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
  .sign__shape img.flower {
    right: 24%;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .sign__shape img.flower {
    right: 24%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .sign__shape img.flower {
    right: 12%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .sign__shape img.flower {
    right: 3%;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .sign__shape img.flower {
    right: 1%;
  }
}
@media (max-width: 575px) {
  .sign__shape img.flower {
    right: 1%;
    bottom: 3%;
  }
}
.sign__header {
  padding: 0 35px;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .sign__header {
    padding: 0 10px;
  }
}
@media (max-width: 575px) {
  .sign__header {
    padding: 0px;
  }
}
.sign__header p {
  margin-bottom: 0;
  color: #53545b;
  position: relative;
  padding: 0 40px;
  display: inline-block;
}
.sign__header p span {
  position: absolute;
  top: 40%;
  left: 0;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}
.sign__header p span:last-child {
  left: auto;
  right: 0;
}
.sign__header p a:hover {
  color: var(--tp-theme-1);
}
.sign__social {
  display: block;
  height: 50px;
  background: #eeedf2;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
  position: relative;
  line-height: 52px;
  padding-left: 23px;
  z-index: 1;
  overflow: hidden;
  font-size: 16px;
}
.sign__social::after {
  position: absolute;
  content: "";
  left: -55%;
  top: 45%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  height: 220px;
  width: 220px;
  background: #3360bd;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  z-index: -1;
}
@media (max-width: 575px) {
  .sign__social::after {
    left: -62%;
  }
}
.sign__social i {
  color: var(--tp-common-white);
  font-size: 16px;
  margin-right: 50px;
}
@media (max-width: 575px) {
  .sign__social i {
    margin-right: 35px;
  }
}
.sign__social:hover {
  color: var(--tp-common-white);
}
.sign__social:hover::after {
  width: 100%;
  height: 150%;
  left: 0;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
}
.sign__social.g-plus::after {
  background: #e93e30;
}
.sign__form h5 {
  font-size: 16px;
  font-weight: 500;
  color: var(--tp-common-black);
  margin-bottom: 11px;
}
.sign__input {
  position: relative;
}
.sign__input input {
  width: 100%;
  height: 60px;
  line-height: 52px;
  padding: 0 50px;
  font-size: 14px;
  border: 2px solid transparent;
  background: var(--tp-grey-2);
  color: var(--tp-common-black);
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
}
.sign__input input::placeholder {
  color: #8e8c94;
}
.sign__input input:focus {
  outline: none;
  background: var(--tp-common-white);
  border-color: var(--tp-theme-1);
  -webkit-box-shadow: 0px 1px 4px 0px rgba(8, 0, 42, 0.2);
  -moz-box-shadow: 0px 1px 4px 0px rgba(8, 0, 42, 0.2);
  -ms-box-shadow: 0px 1px 4px 0px rgba(8, 0, 42, 0.2);
  -o-box-shadow: 0px 1px 4px 0px rgba(8, 0, 42, 0.2);
  box-shadow: 0px 1px 4px 0px rgba(8, 0, 42, 0.2);
}
.sign__input i {
  position: absolute;
  top: 51%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  left: 25px;
  font-size: 14px;
  color: #8e8c94;
}
.sign__agree input {
  margin: 0;
  appearance: none;
  -moz-appearance: none;
  display: block;
  width: 14px;
  height: 14px;
  background: transparent;
  border: 1px solid #7a797f;
  outline: none;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
}
.sign__agree input:checked {
  position: relative;
  background-color: var(--tp-theme-1);
  border-color: transparent;
}
.sign__agree input:checked::after {
  box-sizing: border-box;
  content: "\f00c";
  position: absolute;
  font-family: var(--tp-ff-fontawesome);
  font-size: 10px;
  color: var(--tp-common-white);
  top: 46%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.sign__agree input:hover {
  cursor: pointer;
}
.sign__agree label {
  padding-left: 10px;
  font-size: 14px;
}
.sign__agree label:hover {
  cursor: pointer;
}
.sign__agree label a {
  color: var(--tp-common-black);
  font-weight: 500;
}
.sign__agree label a:hover {
  color: var(--tp-theme-1);
}
.sign__forgot a {
  color: #7a797f;
}
.sign__forgot a:hover {
  color: var(--tp-theme-1);
}
.sign__new p {
  color: #7a797f;
  margin-bottom: 0;
}
.sign__new p a {
  color: var(--tp-theme-1);
}

@keyframes signDot {
  0% {
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
  }
  100% {
    transform: translateY(50px);
    -webkit-transform: translateY(50px);
    -moz-transform: translateY(50px);
    -ms-transform: translateY(50px);
    -o-transform: translateY(50px);
  }
}
@keyframes signZigzag {
  0% {
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
  }
  100% {
    transform: translateY(50px);
    -webkit-transform: translateY(50px);
    -moz-transform: translateY(50px);
    -ms-transform: translateY(50px);
    -o-transform: translateY(50px);
  }
}
@keyframes signCircle {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
/*----------------------------------------*/
/*  28. CART CSS START
/*----------------------------------------*/
/* 16. Cart */
.table-content table {
  background: #ffffff;
  border-color: #e4e4e4;
  border-radius: 0;
  border-style: solid;
  border-width: 1px 0 0 1px;
  text-align: center;
  width: 100%;
  margin-bottom: 0;
}

.table-content .table > :not(:first-child) {
  border-top: none;
}

.table-content .table > :not(:last-child) > :last-child > * {
  border-bottom-color: #e4e4e4;
}

.table-content .product-quantity {
  float: none;
}

.table-content table td.product-name {
  font-size: 16px;
  font-weight: 400;
  text-transform: capitalize;
}

.table-content table td.product-name a:hover {
  color: var(--tp-theme-1);
}

.table-content table td {
  border-top: medium none;
  padding: 20px 10px;
  vertical-align: middle;
  font-size: 16px;
}

.table-content table th,
.table-content table td {
  border-bottom: 1px solid #e4e4e4;
  border-right: 1px solid #e4e4e4;
}

.product-quantity input {
  color: #000;
  font-size: 14px;
  font-weight: normal;
  border: 1px solid #dcdcdc;
}

.table td,
.table th {
  border-top: 1px solid #e4e4e4;
}

.product-quantity > input {
  width: 80px;
  border-radius: 3px;
}

.table-content table td.product-subtotal {
  font-size: 16px;
}

.table-content table td .cart-plus-minus {
  float: none;
  margin: 0 auto;
  position: relative;
}

.coupon-all {
  margin-top: 50px;
}

.coupon {
  float: left;
}

@media (max-width: 767px) {
  .coupon {
    float: none;
  }
}
#coupon_code {
  height: 50px;
  border: 2px solid #e4e4e4;
  padding: 0 15px;
  margin-right: 10px;
}
#coupon_code:focus {
  border-color: var(--tp-theme-1);
}
#coupon_code::placeholder {
  color: #6f7172;
}

@media (max-width: 767px) {
  #coupon_code {
    margin-bottom: 15px;
  }
}
.coupon2 {
  float: right;
}

@media (max-width: 767px) {
  .coupon2 {
    float: none;
    margin-top: 15px;
  }
}
.cart-page-total {
  padding-top: 50px;
}

.cart-page-total > h2 {
  font-size: 25px;
  margin-bottom: 20px;
  text-transform: capitalize;
}

.cart-page-total > ul {
  border: 1px solid #e4e4e4;
}

.cart-page-total > ul > li {
  list-style: none;
  font-size: 15px;
  color: #6f7172;
  padding: 10px 30px;
  border-bottom: 1px solid #e4e4e4;
  font-weight: 400;
}

.cart-page-total ul > li > span {
  float: right;
}

.cart-page-total li:last-child {
  border-bottom: 0;
}

td.product-thumbnail img {
  width: 125px;
}

/* 17. Checkout */
.coupon-accordion h3 {
  background-color: var(--tp-grey-2);
  border-top: 3px solid var(--tp-theme-1);
  font-size: 14px;
  font-weight: 400;
  margin: 0 0 25px;
  padding: 1em 2em 1em 3.5em;
  position: relative;
  width: auto;
}

.coupon-accordion h3::before {
  content: "\f07b";
  left: 15px;
  top: 13px;
  position: absolute;
  color: #6f7172;
  font-family: "Font Awesome 6 Pro";
  font-weight: 700;
}

.coupon-accordion span {
  color: #6f7172;
  cursor: pointer;
  transition: 0.3s;
  font-weight: 500;
}

.coupon-accordion span:hover,
p.lost-password a:hover {
  color: #222;
}

.coupon-content {
  border: 1px solid #e4e4e4;
  display: none;
  margin-bottom: 20px;
  padding: 30px;
}

.coupon-info p.coupon-text {
  margin-bottom: 15px;
}

.coupon-info p {
  margin-bottom: 0;
}

.coupon-info p.form-row-first label,
.coupon-info p.form-row-last label {
  display: block;
  color: #6f7172;
}

.coupon-info p.form-row-first label span.required,
.coupon-info p.form-row-last label span.required {
  color: red;
  font-weight: 700;
}

.coupon-info p.form-row-first input,
.coupon-info p.form-row-last input {
  width: 100%;
  height: 60px;
  line-height: 56px;
  background: var(--tp-grey-2);
  border: 2px solid var(--tp-grey-2);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  padding-left: 30px;
  padding-right: 45px;
  margin-bottom: 20px;
}
.coupon-info p.form-row-first input::placeholder,
.coupon-info p.form-row-last input::placeholder {
  color: #8d8e9a;
  font-weight: 500;
}
.coupon-info p.form-row-first input:focus,
.coupon-info p.form-row-last input:focus {
  border-color: var(--tp-theme-1);
  background-color: var(--tp-common-white);
}

.coupon-info p.form-row input[type="submit"]:hover,
p.checkout-coupon input[type="submit"]:hover {
  background: var(--tp-theme-1) none repeat scroll 0 0;
}

.coupon-info p.form-row input[type="checkbox"] {
  position: relative;
  top: 2px;
}

.form-row > label {
  margin-top: 15px;
  margin-left: 15px;
  color: #6f7172;
}

.buttons-cart input,
.coupon input[type="submit"],
.buttons-cart a,
.coupon-info p.form-row input[type="submit"] {
  background: #252525 none repeat scroll 0 0;
  border: medium none;
  color: #fff;
  display: inline-block;
  float: left;
  font-size: 12px;
  font-weight: 700;
  height: 40px;
  line-height: 40px;
  margin-right: 15px;
  padding: 0 15px;
  text-transform: uppercase;
  transition: all 0.3s ease 0s;
}

p.lost-password {
  margin-top: 15px;
}

p.lost-password a {
  color: #6f6f6f;
}

p.checkout-coupon input[type="text"] {
  width: 100%;
  height: 60px;
  line-height: 56px;
  background: var(--tp-grey-2);
  border: 2px solid var(--tp-grey-2);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  padding-left: 30px;
  padding-right: 45px;
  margin-bottom: 20px;
}
p.checkout-coupon input[type="text"]::placeholder {
  color: #8d8e9a;
  font-weight: 500;
}
p.checkout-coupon input[type="text"]:focus {
  border-color: var(--tp-theme-1);
  background-color: var(--tp-common-white);
}

.coupon-checkout-content {
  display: none;
}

.checkbox-form h3 {
  border-bottom: 1px solid #e4e4e4;
  font-size: 26px;
  margin: 0 0 20px;
  padding-bottom: 10px;
  width: 100%;
}

.country-select {
  margin-bottom: 30px;
  position: relative;
}

.country-select select {
  width: 100%;
  background-color: transparent;
  border: 1px solid #e4e4e4;
  padding: 0 10px;
  height: 50px;
}

.country-select .nice-select::after {
  margin-top: -5px;
}

.country-select .nice-select {
  width: 100%;
  height: 60px;
  line-height: 56px;
  background: var(--tp-grey-2);
  border: 2px solid var(--tp-grey-2);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  padding-left: 30px;
  padding-right: 45px;
}

.country-select label,
.checkout-form-list label {
  color: #6f7172;
  display: block;
  margin: 0 0 5px;
}

.country-select label span.required,
.checkout-form-list label span.required {
  color: red;
}

.country-select .nice-select {
  border: 1px solid #e4e4e4;
  height: 45px;
  padding-left: 10px;
  width: 100%;
  color: #6f7172;
  margin-bottom: 20px;
  border-radius: 0;
  height: 45px;
  line-height: 45px;
}
.country-select .nice-select::after {
  margin-top: -3px;
}
.country-select .nice-select:focus {
  border: 1px solid var(--tp-theme-1);
}

.country-select .nice-select .list {
  width: 100%;
}

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

.checkout-form-list label {
  color: #6f7172;
}

.checkout-form-list input[type="text"],
.checkout-form-list input[type="password"],
.checkout-form-list input[type="email"] {
  width: 100%;
  height: 60px;
  line-height: 56px;
  background: var(--tp-grey-2);
  border: 2px solid var(--tp-grey-2);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  padding-left: 30px;
  padding-right: 45px;
}
.checkout-form-list input[type="text"]::placeholder,
.checkout-form-list input[type="password"]::placeholder,
.checkout-form-list input[type="email"]::placeholder {
  color: #8d8e9a;
  font-weight: 500;
}
.checkout-form-list input[type="text"]:focus,
.checkout-form-list input[type="password"]:focus,
.checkout-form-list input[type="email"]:focus {
  border-color: var(--tp-theme-1);
  background-color: var(--tp-common-white);
}

.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: #6f7172;
  opacity: 1;
}

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

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

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

.create-account {
  display: none;
}

.ship-different-title h3 label {
  display: inline-block;
  margin-right: 20px;
  color: #6f7172;
}

.order-notes textarea {
  width: 100%;
  height: 150px;
  background: var(--tp-grey-2);
  border: 2px solid var(--tp-grey-2);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  padding-left: 30px;
  padding-right: 45px;
  padding-top: 20px;
  padding-bottom: 20px;
  resize: none;
}
.order-notes textarea::placeholder {
  color: #8d8e9a;
  font-weight: 500;
}
.order-notes textarea:focus {
  border-color: var(--tp-theme-1);
  background-color: var(--tp-common-white);
}

.order-notes textarea::-moz-placeholder {
  color: #6f7172;
  opacity: 1;
}

.order-notes textarea::placeholder {
  color: #6f7172;
  opacity: 1;
}

#ship-box-info {
  display: none;
}

.panel-group .panel {
  border-radius: 0;
}

.panel-default > .panel-heading {
  border-radius: 0;
}

.your-order {
  padding: 30px 40px 45px;
  border: 3px solid #e4e4e4;
}

@media (max-width: 767px) {
  .your-order {
    padding: 15px;
  }
}
.your-order h3 {
  border-bottom: 1px solid #e4e4e4;
  font-size: 30px;
  margin: 0 0 20px;
  padding-bottom: 10px;
  width: 100%;
}

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

.your-order-table ul li {
  list-style: none;
}

.your-order-table table th,
.your-order-table table td {
  border-bottom: 1px solid #e4e4e4;
  border-right: medium none;
  color: #6f7172;
  font-size: 14px;
  padding: 15px 0;
  text-align: right;
}

@media (max-width: 767px) {
  .your-order-table table th,
  .your-order-table table td {
    padding-right: 10px;
  }
}
.your-order-table table th {
  border-top: medium none;
  color: #6f7172;
  font-weight: normal;
  text-align: right;
  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: #6f7172;
}

.your-order-table table .shipping th {
  vertical-align: top;
}

.your-order-table table .order-total th {
  border-bottom: 0;
  font-size: 14px;
}

.your-order-table table .order-total td {
  border-bottom: medium none;
}

.your-order-table table tr.cart_item:hover {
  background: #f9f9f9;
}

.your-order-table table tr.order-total td span {
  color: #222;
  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: #fff;
  border: 0;
  border-bottom: 1px solid #e4e4e4;
}
.payment-method .accordion-button {
  font-size: 16px;
  font-weight: 500;
  color: #222;
  padding: 23px 0;
  border: none;
}
.payment-method .accordion-button:focus {
  box-shadow: none;
}
.payment-method .accordion-button::after {
  position: absolute;
  content: "\f067";
  left: auto;
  right: 0;
  top: 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: #222;
  background-color: #fff;
  box-shadow: none;
}
.payment-method .accordion-button:not(.collapsed)::after {
  content: "\f068";
}
.payment-method .accordion-body {
  padding: 0;
  padding-bottom: 20px;
}
.payment-method .accordion-body p {
  margin-bottom: 0;
}
.payment-method .accordion-collapse {
  border: none;
}

.panel-title > a {
  display: block;
}

.order-button-payment input {
  background: #232323 none repeat scroll 0 0;
  border: medium none;
  color: #fff;
  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: #ff8429 none repeat scroll 0 0;
}

.payment-method .btn-link {
  -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: #ffffff;
  border: 1px solid #e4e4e4;
  border-radius: 0;
  margin-bottom: 10px;
}

.payment-method .accordion .card:first-of-type {
  border: 1px solid #e4e4e4;
}

.card-header:first-child {
  border-radius: 0;
}

.payment-method .card-header {
  background-color: #ffffff;
  border-bottom: 1px solid #e4e4e4;
}

.order-button-payment button {
  width: 100%;
}

.cart-plus-minus {
  width: 180px;
}

.cart-plus-minus input {
  border: 0px;
  outline: 0px;
  background: none;
  font-weight: 400;
  color: #222;
  font-size: 14px;
  display: inline-block;
  height: 45px;
  list-style: 45px;
  padding: 0 50px;
  width: 180px;
  border: 1px solid #ebebeb;
  text-align: center;
  border-radius: 0;
}

.cart-plus-minus .qtybutton {
  font-size: 20px;
  color: #222;
  display: inline-block;
  position: absolute;
  top: 50%;
  height: 22px;
  width: 22px;
  background: transparent;
  border-radius: 30px;
  line-height: 1;
  cursor: pointer;
  text-align: center;
  border-radius: 0;
  transform: translateY(-50%);
}

.cart-plus-minus .dec {
  left: 20px;
}

.cart-plus-minus .inc {
  right: 20px;
}

/*----------------------------------------*/
/*  29. PROFILE CSS START
/*----------------------------------------*/
.profile__basic-inner {
  border-bottom: 1px solid #eceaea;
  padding: 15px 30px;
  padding-right: 40px;
}
@media only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .profile__basic-thumb {
    margin-bottom: 20px;
  }
}
.profile__basic-thumb img {
  width: 70px;
  height: 70px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  border: 1px solid #e4e4e4;
}
.profile__basic-title {
  font-size: 22px;
  color: var(--tp-common-black);
  font-weight: 400;
  margin-bottom: 5px;
}
.profile__basic-title span {
  font-weight: 600;
}
.profile__basic-content p {
  font-size: 14px;
  font-weight: 400;
  color: var(--tp-text-5);
  margin-bottom: 0;
}
.profile__basic-content p a {
  font-weight: 500;
  color: var(--tp-theme-1);
}
@media only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .profile__basic-cart {
    margin-top: 25px;
  }
}
.profile__basic-cart .cart-info a {
  font-size: 16px;
  color: var(--tp-common-black);
  text-transform: capitalize;
  font-weight: 500;
}
.profile__basic-cart .cart-info a:hover {
  color: var(--tp-theme-1);
}
.profile__basic-cart .cart-item a {
  position: relative;
  font-size: 18px;
  color: var(--tp-common-black);
}
.profile__basic-cart .cart-item a:hover {
  color: var(--tp-theme-1);
}
.profile__basic-cart .cart-quantity {
  position: absolute;
  bottom: -4px;
  right: -7px;
  font-size: 10px;
  display: inline-block;
  width: 17px;
  height: 17px;
  text-align: center;
  line-height: 17px;
  background-color: var(--tp-theme-1);
  color: var(--tp-common-white);
  font-weight: 500;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
}
.profile__menu-left {
  padding: 26px 20px 5px;
  border: 1px solid #eceaea;
}
.profile__menu-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--tp-theme-1);
  border-bottom: 1px solid #eceaea;
  margin-bottom: 0;
  padding-bottom: 20px;
}
.profile__menu-title i {
  width: 10px;
  margin-right: 10px;
  display: inline-block;
}
.profile__menu-tab .nav-tabs {
  padding: 0;
  margin: 0;
  border: 0;
}
.profile__menu-tab .nav-tabs .nav-link {
  padding: 0;
  margin: 0;
  border: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--tp-text-5);
  text-align: right;
  padding: 15px 0;
}
.profile__menu-tab .nav-tabs .nav-link:not(:last-child) {
  border-bottom: 1px solid #e4e4e4;
}
.profile__menu-tab .nav-tabs .nav-link.active,
.profile__menu-tab .nav-tabs .nav-link:hover {
  color: var(--tp-theme-1);
}
.profile__menu-tab .nav-tabs .nav-link i {
  margin-right: 10px;
  width: 10px;
  display: inline-block;
}
.profile__info-top {
  padding: 20px 70px;
  background-color: var(--tp-common-white);
  margin-bottom: 15px;
}
@media (max-width: 575px) {
  .profile__info-top {
    padding-left: 15px;
    padding-right: 15px;
  }
}
.profile__info-btn {
  font-size: 14px;
  color: var(--tp-text-5);
  font-weight: 500;
}
.profile__info-btn i {
  margin-right: 5px;
}
.profile__info-btn:hover {
  color: var(--tp-theme-1);
}
.profile__info-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--tp-text-5);
  margin-bottom: 0;
}
.profile__info-title i {
  width: 10px;
  margin-right: 10px;
  display: inline-block;
}
.profile__info-wrapper {
  padding: 0 70px;
}
@media (max-width: 575px) {
  .profile__info-wrapper {
    padding-left: 15px;
    padding-right: 15px;
  }
}
.profile__info-item {
  padding: 30px 0;
}
.profile__info-item:not(:last-child) {
  border-bottom: 1px solid #eceaea;
}
.profile__info-item p {
  font-size: 14px;
  text-transform: capitalize;
  color: var(--tp-text-5);
  margin-bottom: 10px;
  line-height: 1;
}
.profile__info-item h4 {
  font-size: 16px;
  line-height: 1;
  margin-bottom: 0;
}
.profile__edit-wrapper {
  padding: 40px 60px;
}
@media (max-width: 575px) {
  .profile__edit-wrapper {
    padding-left: 15px;
    padding-right: 15px;
  }
}
.profile__edit-input {
  margin-bottom: 25px;
}
.profile__edit-input p {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 0;
  color: var(--tp-text-5);
}
.profile__edit-input input {
  width: 100%;
  height: 60px;
  line-height: 56px;
  background: var(--tp-grey-2);
  border: 2px solid var(--tp-grey-2);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  padding-left: 30px;
  padding-right: 45px;
}
.profile__edit-input input::placeholder {
  color: #8d8e9a;
  font-weight: 500;
}
.profile__edit-input input:focus {
  border-color: var(--tp-theme-1);
  background-color: var(--tp-common-white);
}
.profile__edit-close {
  position: absolute;
  top: 15px;
  right: 15px;
}
.profile__edit-close-btn {
  font-size: 15px;
  color: #6f7172;
  height: 30px;
  width: 30px;
  line-height: 30px;
  text-align: center;
  border: 1px solid #e4e4e4;
}
.profile__edit-close-btn:hover {
  color: var(--tp-common-white);
  background-color: var(--tp-theme-1);
  border-color: var(--tp-theme-1);
}

.order__info-top {
  padding: 20px 70px;
  background-color: var(--tp-common-white);
  margin-bottom: 15px;
}
@media (max-width: 575px) {
  .order__info-top {
    padding-left: 15px;
    padding-right: 15px;
  }
}
.order__info-btn {
  font-size: 14px;
  color: var(--tp-text-5);
  font-weight: 500;
}
.order__info-btn i {
  margin-right: 5px;
}
.order__info-btn:hover {
  color: var(--tp-theme-1);
}
.order__info-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--tp-text-5);
  margin-bottom: 0;
}
.order__info-title i {
  width: 10px;
  margin-right: 10px;
  display: inline-block;
}
.order__info-wrapper {
  padding: 0 70px;
}
.order__info-item {
  padding: 30px 0;
}
.order__info-item:not(:last-child) {
  border-bottom: 1px solid #eceaea;
}
.order__info-item p {
  font-size: 14px;
  text-transform: capitalize;
  color: var(--tp-text-5);
  margin-bottom: 10px;
  line-height: 1;
}
.order__info-item h4 {
  font-size: 16px;
  line-height: 1;
  margin-bottom: 0;
}
.order__list {
  padding: 35px 70px 5px;
}
@media (max-width: 575px) {
  .order__list {
    padding-left: 15px;
    padding-right: 15px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px),
  only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 575px) {
  .order__list .table {
    width: 600px;
  }
}
.order__list table {
  border: 0;
}
.order__list table th {
  border-bottom: 1px solid #e4e4e4;
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 600;
}
.order__list table th td {
  padding-left: 0;
  padding-right: 0;
}
.order__list table tr:not(:last-child) {
  border-bottom: 1px solid #e4e4e4;
}
.order__list table > :not(:first-child) {
  border-top: 1px solid #e4e4e4;
}
.order__list .table > :not(caption) > * > * {
  border: 0;
  padding-left: 0;
  padding-right: 0;
}
.order__list tbody tr td {
  padding: 20px 0;
}
.order__id {
  color: var(--tp-theme-1);
  font-weight: 500;
}
.order__view-btn {
  font-weight: 500;
  color: var(--tp-common-black);
}
.order__view-btn:hover {
  color: var(--tp-theme-1);
}
.order__title:hover {
  color: var(--tp-theme-1);
}

.password__change-top {
  padding: 20px 70px;
  background-color: var(--tp-common-white);
  margin-bottom: 15px;
}
@media (max-width: 575px) {
  .password__change-top {
    padding-left: 15px;
    padding-right: 15px;
  }
}
.password__change-btn {
  font-size: 14px;
  color: var(--tp-text-5);
  font-weight: 500;
}
.password__change-btn i {
  margin-right: 5px;
}
.password__change-btn:hover {
  color: var(--tp-theme-1);
}
.password__change-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--tp-text-5);
  margin-bottom: 0;
}
.password__change-title i {
  width: 10px;
  margin-right: 10px;
  display: inline-block;
}
.password__change-wrapper {
  padding: 0 70px;
}
@media (max-width: 575px) {
  .password__change-wrapper {
    padding-left: 15px;
    padding-right: 15px;
  }
}
.password__change-item {
  padding: 30px 0;
}
.password__change-item:not(:last-child) {
  border-bottom: 1px solid #eceaea;
}
.password__change-item p {
  font-size: 14px;
  text-transform: capitalize;
  color: var(--tp-text-5);
  margin-bottom: 10px;
  line-height: 1;
}
.password__change-item h4 {
  font-size: 16px;
  line-height: 1;
  margin-bottom: 0;
}
.password__form {
  padding: 35px 70px;
}
@media (max-width: 575px) {
  .password__form {
    padding-left: 15px;
    padding-right: 15px;
  }
}
.password__input {
  margin-bottom: 25px;
}
.password__input p {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 0;
  color: var(--tp-text-5);
}
.password__input input {
  width: 100%;
  height: 60px;
  line-height: 56px;
  background: var(--tp-grey-2);
  border: 2px solid var(--tp-grey-2);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  padding-left: 30px;
  padding-right: 45px;
}
.password__input input::placeholder {
  color: #8d8e9a;
  font-weight: 500;
}
.password__input input:focus {
  border-color: var(--tp-theme-1);
  background-color: var(--tp-common-white);
}

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


.clients{
  margin-bottom: 80px;

}
#rssBlock{
  left:0px;
  height: 80px;
  background: #FFFFFF;
  position: absolute;
  width:100%;
  overflow: hidden;
}

/*remove p*/
.cnnContents {
  width:100%;
  padding-top: 20px;
  margin:0 auto;
  font-size: 30px;
  white-space: nowrap;
  /* text-transform: uppercase; */
  font-family: 'Museo';
  font-weight: 300;
}

.marqueeStyle {
  display:inline-block;
  /* Apply animation to this element */
  -webkit-animation: scrolling-left1 30s linear infinite;
  animation: scrolling-left1 30s linear infinite;
}

.marqueeStyle2 {
  display:inline-block;
  /* Apply animation to this element */
  -webkit-animation: scrolling-left2 30s linear infinite;
  animation: scrolling-left2 30s linear infinite;
  animation-delay: 0s;
}
/* scrolling-left is continuous/repeatly text */
@keyframes scrolling-left1 {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-200%); /* Change from -100% to -200% */
  }
}

/* scrolling-left2 starts from the right */
@keyframes scrolling-left2 {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-300%); /* Change from -200% to -300% */
  }
}

@-webkit-keyframes scrolling-left1 {
  0% {
    -webkit-transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(-200%);
  }
}

@-webkit-keyframes scrolling-left2 {
  0% {
    -webkit-transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(-300%);
  }
}
@media (max-width: 767px) {

  .marqueeStyle {
    -webkit-animation: scrolling-left1 20s linear infinite;
  animation: scrolling-left1 20s linear infinite;
  }

  .marqueeStyle2 {
    -webkit-animation: scrolling-left2 20s linear infinite; /* Adjust animation duration and add a fade-in effect */
    animation: scrolling-left2 20s linear infinite; /* Adjust animation duration and add a fade-in effect */
    animation-delay: -30; /* Start marqueeStyle2 30 seconds before the end of marqueeStyle */
  }

  @keyframes scrolling-left1 {
    0% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(-50%); /* Change from -100% to -200% */
    }
  }
  
  /* scrolling-left2 starts from the right */
  @keyframes scrolling-left2 {
    0% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(-50%); /* Change from -200% to -300% */
    }
  }
  
  @-webkit-keyframes scrolling-left1 {
    0% {
      -webkit-transform: translateX(100%);
    }
    100% {
      -webkit-transform: translateX(-50%);
    }
  }
  
  @-webkit-keyframes scrolling-left2 {
    0% {
      -webkit-transform: translateX(100%);
    }
    100% {
      -webkit-transform: translateX(-50%);
    }
  }
}
/* Pricing Section - Home Page
------------------------------*/
.pricing {
  padding: 60px 0 120px 0;
  /* background-color: #f4f4f4; */

}

.pricing .section-title {
  margin-bottom: 40px;
}

.pricing .pricing-item {
  box-shadow: 0 3px 20px -2px rgba(33, 37, 41, 0.1);
  padding: 60px 40px;
  height: 85%;
  position: relative;
  border-radius: 15px;
    margin-bottom: 10px;

}

.pricing h3 {
  font-weight: 600;
  margin-bottom: 15px;
  font-size: 20px;
  text-align: center;
}

.pricing .icon {
  margin: 30px auto 20px auto;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s;
  transform-style: preserve-3d;
}
.pricing .icon img{
  width: 60px;
  height: 50px;
}
.pricing .icon i {
  color: #fff;
  font-size: 28px;
  transition: ease-in-out 0.3s;
  line-height: 0;
}

.pricing .icon::before {
  position: absolute;
  content: "";
  height: 86px;
  width: 86px;
  border-radius: 50%;
  /* background: rgba(var(--primary-color-rgb), 0.2); */
  transition: all 0.3s ease-out 0s;
  transform: translateZ(-1px);
}

.pricing .icon::after {
  position: absolute;
  content: "";
  height: 102px;
  width: 102px;
  border-radius: 50%;
  background: rgba(232, 69, 69, 0.1);
  transition: all 0.3s ease-out 0s;
  transform: translateZ(-2px);
}

.pricing h4 {
  font-size: 48px;
  color: #e84545;
  font-weight: 700;
  font-family: "Montserrat", sans-serif;

  margin-bottom: 25px;
  text-align: center;
}

.pricing h4 sup {
  font-size: 28px;
}

.pricing h4 span {
  color: rgba(33, 37, 41, 0.5);
  font-size: 18px;
  font-weight: 400;
}

.pricing ul {
  padding: 0px 0;
  list-style: none;
  color: rgba(33, 37, 41, 0.8);
  text-align: right;
  line-height: 12px;
  font-size: 12px;
  margin-bottom: 10px;
}

.pricing ul li {
  padding: 5px 0;
  display: flex;
  align-items: center;
}

.pricing ul i {
  color: #059652;
  font-size: 18px;
  padding-right: 3px;
}

.pricing ul .na {
  color: rgba(33, 37, 41, 0.5, 0.3);
}

.pricing ul .na i {
  color:  rgba(33, 37, 41, 0.5, 0.3);
}

.pricing ul .na span {
  text-decoration: line-through;
}

.pricing .buy-btn {
  color: #c29b7b;
  background-color: #ffffff;
  display: inline-block;
  padding: 10px 40px;
  border-radius: 4px;
  border: 1px solid  #c29b7b;
  transition: none;
  font-size: 16px;
  font-weight: 600;
  font-family: "Montserrat", sans-serif;
  transition: 0.3s;
}

.pricing .buy-btn:hover {
  background-color: #11847d;
  color:#ffffff;
}

.pricing .featured {
  z-index: 10;
  border: 3px solid #c29b7b;
}

.pricing .featured .buy-btn {
  background-color: #c29b7b;
  color: #ffffff;
}

.pricing .featured .buy-btn:hover {
  background-color: #11847d;
}
@media (max-width: 767px) {
  .pricing {
    padding: 30px 0 60px 0;
  }

  .pricing .pricing-item {
    padding: 30px 20px;
    height: 95%;

  }

  .pricing .buy-btn {
    padding: 10px 20px;
  }
}
 
@media (min-width: 992px) {
  .pricing .featured {
    transform: scale(1.15);
  }
}

.pricing .pricing-item.featured {
  transform: scale(1.15);
  transition: transform 0.3s ease-out;
  border: 3px solid #c29b7b;
}
/**/
/**/
/**/
@import url("https://fonts.googleapis.com/css2?family=Baloo+2&display=swap");
/* This pen */


.light {
  background: #f3f5f7;
}

a,
a:hover {
  text-decoration: none;
  transition: color 0.3s ease-in-out;
}

#pageHeaderTitle {
  margin: 2rem 0;
  text-transform: uppercase;
  text-align: center;
  font-size: 2.5rem;
}

/* Cards */
.postcard {
  flex-wrap: wrap;
  display: flex;
  box-shadow: 0 4px 21px -12px rgba(0, 0, 0, 0.66);
  border-radius: 10px;
  margin: 0 0 2rem 0;
  overflow: hidden;
  position: relative;
  color: #ffffff;
}
.postcard.dark {
  background-color: #18151f;
}
.postcard.light {
  background-color: #e1e5ea;
}
.postcard .t-dark {
  color: #18151f;
}
.postcard a {
  color: inherit;
}
.postcard h1,
.postcard .h1 {
  margin-bottom: 0.5rem;
  font-weight: bolder;
  line-height: 1.2;
  text-align:right;
  margin-right: 20px; 
}
.postcard .small p{
  font-size: 1.3rem !important;
  font-weight: bold;
}
.postcard .postcard__title {
  font-size: 2.3rem !important;
}
.postcard .postcard__img {
  max-height: 180px;
  width: 100%;
  object-fit: cover;
  position: relative;
}
.postcard .postcard__img_link {
  display: contents;
}
.postcard .postcard__bar {
  width: 50px;
  height: 10px;
  margin: 10px 0;
  border-radius: 5px;
  background-color: #424242;
  transition: width 0.2s ease;
}
.postcard .postcard__text {
  padding: 1.5rem;
  position: relative;
  display: flex;
  flex-direction: column;
}
.postcard .postcard__preview-txt {
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: justify;
  height: 100%;
}
.postcard .postcard__tagbox {
  display: flex;
  flex-flow: row wrap;
  font-size: 14px;
  margin: 20px 0 0 0;
  padding: 0;
  justify-content: center;
}
.postcard .postcard__tagbox .tag__item {
  display: inline-block;
  background: rgba(197, 155, 115, 1);
  color: #ffffff;
  font-weight: bold;
  border-radius: 3px;
  padding: 2.5px 10px;
  margin: 0 5px 5px 0;
  cursor: default;
  user-select: none;
  transition: background-color 0.3s;
}
.postcard .postcard__tagbox .tag__item:hover {
  background: #10827c !important;
  color: #ffffff;
}
.postcard:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: linear-gradient(-70deg, #424242, transparent 50%);
  opacity: 1;
  border-radius: 10px;
}
.postcard:hover .postcard__bar {
  width: 100px;
}
@media only screen and (max-width: 767px) {
  .postcard .postcard__title {
    font-size: 1.9rem !important; /* Adjust the font size for smaller screens */
  }
  .postcard .small p{
    font-size: 1rem !important;
    font-weight: bold;
  }
}
@media screen and (min-width: 769px) {
  .postcard {
    flex-wrap: inherit;
  }
 
  .postcard .postcard__tagbox {
    justify-content: start;
  }
  .postcard .postcard__img {
    max-width: 300px;
    max-height: 100%;
    transition: transform 0.3s ease;
  }
  .postcard .postcard__text {
    padding: 3rem;
    width: 100%;
  }
  .postcard .media.postcard__text:before {
    content: "";
    position: absolute;
    display: block;
    background: #18151f;
    top: -20%;
    height: 130%;
    width: 55px;
  }
  .postcard:hover .postcard__img {
    transform: scale(1.1);
  }
  .postcard:nth-child(2n+1) {
    flex-direction: row;
  }
  .postcard:nth-child(2n+0) {
    flex-direction: row-reverse;
  }
  .postcard:nth-child(2n+1) .postcard__text::before {
    left: -12px !important;
    transform: rotate(4deg);
  }
  .postcard:nth-child(2n+0) .postcard__text::before {
    right: -12px !important;
    transform: rotate(-4deg);
  }
}
@media screen and (min-width: 1024px) {
  .postcard__text {
    padding: 2rem 3.5rem;
  }

  .postcard__text:before {
    content: "";
    position: absolute;
    display: block;
    top: -20%;
    height: 130%;
    width: 55px;
  }

  .postcard.dark .postcard__text:before {
    background: #18151f;
  }

  .postcard.light .postcard__text:before {
    background: #e1e5ea;
  }
}
/* COLORS */
.postcard .postcard__tagbox .green.play:hover {
  background: #79dd09;
  color: black;
}

.green .postcard__title:hover {
  color: #79dd09;
}

.green .postcard__bar {
  background-color: #79dd09;
}

.green::before {
  background-image: linear-gradient(-30deg, rgba(121, 221, 9, 0.1), transparent 50%);
}

.green:nth-child(2n)::before {
  background-image: linear-gradient(30deg, rgba(121, 221, 9, 0.1), transparent 50%);
}

.postcard .postcard__tagbox .blue.play:hover {
  background: #0076bd;
}

.blue .postcard__title:hover {
  color: #10827c;
}

.blue .postcard__bar {
  background-color: #10827c;
}

.blue::before {
  background-image: linear-gradient(-30deg, rgba(0, 118, 189, 0.1), transparent 50%);
}

.blue:nth-child(2n)::before {
  background-image: linear-gradient(30deg, rgba(0, 118, 189, 0.1), transparent 50%);
}

.postcard .postcard__tagbox .red.play:hover {
  background: #bd150b;
}

.red .postcard__title:hover {
  color: #bd150b;
}

.red .postcard__bar {
  background-color: #bd150b;
}

.red::before {
  background-image: linear-gradient(-30deg, rgba(189, 21, 11, 0.1), transparent 50%);
}

.red:nth-child(2n)::before {
  background-image: linear-gradient(30deg, rgba(189, 21, 11, 0.1), transparent 50%);
}

.postcard .postcard__tagbox .yellow.play:hover {
  background: #bdbb49;
  color: black;
}

.yellow .postcard__title:hover {
  color: #bdbb49;
}

.yellow .postcard__bar {
  background-color: #bdbb49;
}

.yellow::before {
  background-image: linear-gradient(-30deg, rgba(189, 187, 73, 0.1), transparent 50%);
}

.yellow:nth-child(2n)::before {
  background-image: linear-gradient(30deg, rgba(189, 187, 73, 0.1), transparent 50%);
}

@media screen and (min-width: 769px) {
  .green::before {
    background-image: linear-gradient(-80deg, rgba(121, 221, 9, 0.1), transparent 50%);
  }

  .green:nth-child(2n)::before {
    background-image: linear-gradient(80deg, rgba(121, 221, 9, 0.1), transparent 50%);
  }

  .blue::before {
    background-image: linear-gradient(-80deg, rgba(0, 118, 189, 0.1), transparent 50%);
  }

  .blue:nth-child(2n)::before {
    background-image: linear-gradient(80deg, rgba(0, 118, 189, 0.1), transparent 50%);
  }

  .red::before {
    background-image: linear-gradient(-80deg, rgba(189, 21, 11, 0.1), transparent 50%);
  }

  .red:nth-child(2n)::before {
    background-image: linear-gradient(80deg, rgba(189, 21, 11, 0.1), transparent 50%);
  }

  .yellow::before {
    background-image: linear-gradient(-80deg, rgba(189, 187, 73, 0.1), transparent 50%);
  }

  .yellow:nth-child(2n)::before {
    background-image: linear-gradient(80deg, rgba(189, 187, 73, 0.1), transparent 50%);
  }
}


.postcard__preview-txt p{
	font-size: 1rem;
}





.box-container {
  display: flex;
  
  flex-direction: row;

  align-items: center;
  column-gap: 10px;
  width: 100%;
  max-width: 1100px;
  height: 100vh;
  max-height: 900px;
  padding: 1rem;
  margin: 0 auto;
}
.box-container .box {
  width: 25%;
  height: 500px;
  border-radius: 25px;
  cursor: pointer;
  transition: width 0.5s ease-in-out;
  position: relative;
  overflow: hidden;
}
.box-container .box:nth-child(1) {
  background: var(--bg1);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 100%;
}
.box-container .box:nth-child(2) {
  background: var(--bg2);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 100%;
}
.box-container .box:nth-child(3) {
  background: var(--bg3);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 100%;
}
.box-container .box:nth-child(4) {
  background: var(--bg4);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 100%;
}
.box-container .box:nth-child(5) {
  background: var(--bg5);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 100%;
}
.box-container .box:nth-child(6) {
  background: var(--bg6);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 100%;
}
.box-container .box:nth-child(7) {
  background: var(--bg7);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 100%;
}
.box-container .box:nth-child(8) {
  background: var(--bg8);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 100%;
}
.box-container .box .overlay {
  opacity: 0;
}
.box-container .box.closed {
  width: 5%;
}
.box-container .box.closed .overlay {
  opacity: 1;
}
.box-container .box.expanded {
  width: 85%;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  transition: 0.5s ease;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6));
}

.box-container .box .title {
  height: 30px;
  width: 237px;

  position: absolute;
  bottom: 10px;
  left: 90px;
  color: #fff;
  background-color: #c8a053;

  font-size: 18px;
  font-weight: 900;
  transition: opacity 0.5s ease;
}

.box-container .box:hover .title,
.box-container .box.expanded .title, 
.box-container .box.closed .title { 
  text-align: center;
}

@media (max-width: 767px) {
  .box-container {
    align-items: flex-start; 


    height: auto;
    max-height: none;
  }

  .box-container .box {
    width: 100%;
    height: 280px; 
    margin-bottom: 20px; 
    margin-top: 20px;
  }
  .box-container .box .title {
    height: 30px;
    width: 176px;

    position: absolute;
    top: 10px;
    right: 0;
    color: #fff;
    background-color: #c8a053;

    font-size: 13px;
    font-weight: 900;
    transition: opacity 0.5s ease;
  }
  }
/**/

/* chatbot */

.chatbot-toggler {
  position: fixed;
  bottom: 94px;
  right: 35px;
  outline: none;
  border: none;
  height: 50px;
  width: 50px;
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #10827c;
  transition: all 0.2s ease;
  z-index: 99;
}
body.show-chatbot .chatbot-toggler {
  transform: rotate(90deg);
}
.chatbot-toggler span {
  color: #fff;
  position: absolute;
}
.chatbot-toggler span:last-child,
body.show-chatbot .chatbot-toggler span:first-child  {
  opacity: 0;
}
body.show-chatbot .chatbot-toggler span:last-child {
  opacity: 1;
}
.chatbot {
  position: fixed;
  right: 85px;
  bottom: 105px;
  width: 420px;
  background: #fff;
  border-radius: 15px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.5);
  transform-origin: bottom right;
  box-shadow: 0 0 128px 0 rgba(0,0,0,0.1),
              0 32px 64px -48px rgba(0,0,0,0.5);
  transition: all 0.1s ease;
  z-index: 1;
}
body.show-chatbot .chatbot {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}
.chatbot header {
  padding: 16px 0;
  position: relative;
  text-align: center;
  color: #fff;
  background: #10827c;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.chatbot header span {
  position: absolute;
  right: 15px;
  top: 50%;
  display: none;
  cursor: pointer;
  transform: translateY(-50%);
}
header h2 {
  font-size: 1.4rem;
}
.chatbot .chatbox {
  overflow-y: auto;
  height: 370px;
  padding: 30px 20px 100px;
}
.chatbot :where(.chatbox, textarea)::-webkit-scrollbar {
  width: 6px;
}
.chatbot :where(.chatbox, textarea)::-webkit-scrollbar-track {
  background: #fff;
  border-radius: 25px;
}
.chatbot :where(.chatbox, textarea)::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 25px;
}
.chatbox .chat {
  display: flex;
  list-style: none;
}
.chatbox .outgoing {
  margin: 20px 0;
  justify-content: flex-end;
}
.chatbox .incoming span {
  width: 32px;
  height: 32px;
  color: transparent;
  cursor: default;
  text-align: center;
  line-height: 32px;
  align-self: flex-end;
  background: #10827c;
  border-radius: 4px;
  margin: 0 10px 7px 0;
}
.chatbox .chat p {
  white-space: pre-wrap;
  padding: 12px 16px;
  border-radius: 10px 10px 0 10px;
  max-width: 75%;
  color: #fff;
  font-size: 0.95rem;
  background: #10827c;
}
.chatbox .incoming p {
  border-radius: 10px 10px 10px 0;
}
.chatbox .chat p.error {
  color: #721c24;
  background: #f8d7da;
}
.chatbox .incoming p {
  color: #000;
  background: #f2f2f2;
}
.chatbot .chat-input {
  display: flex;
  gap: 5px;
  position: absolute;
  bottom: 0;
  width: 100%;
  background: #fff;
  padding: 3px 20px;
  border-top: 1px solid #ddd;
}
.chat-input textarea {
  height: 55px;
  width: 100%;
  border: none;
  outline: none;
  resize: none;
  max-height: 180px;
  padding: 15px 15px 15px 0;
  font-size: 0.95rem;
}
.chat-input span {
  align-self: flex-end;
  color: #10827c;
  cursor: pointer;
  height: 55px;
  display: flex;
  align-items: center;
  visibility: hidden;
  font-size: 1.35rem;
}
.chat-input textarea:valid ~ span {
  visibility: visible;
}

.material-symbols-rounded {
  font-family: 'Material Symbols Rounded';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
}


.material-symbols-outlined {
  /* font-family: 'Material Symbols Outlined'; */
  /* font-weight: normal;
  font-style: normal; */
  /* font-size: 24px; */
  line-height: 1;
  letter-spacing: normal;
  /* text-transform: none; */
  display: inline-block;
  white-space: nowrap;
  /* word-wrap: normal; */
  direction: ltr;
  /* -webkit-font-smoothing: antialiased; */
  background-image: url('../img/logo/png-clipart-candle-candle-cartoon-combustion-removebg-preview.png') !important; 
  background-size: cover !important; 
  background-repeat: no-repeat !important;
}

.material-symbols-close{
  font-family: 'Material Symbols Outlined';
  font-weight: normal; 
 font-style: normal; 
 font-size: 24px;
 line-height: 1;
 letter-spacing: normal;
 text-transform: none;
 display: inline-block;
 white-space: nowrap;
 word-wrap: normal;
 direction: ltr;
 -webkit-font-smoothing: antialiased;

}

/* Existing styles... */

/* Add styles for choices */
.choices {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
}

.choice-btn {
  background-color: #328d8a;

  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  margin-bottom: 10px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s ease;
}

.choice-btn:hover {
  background-color: #c59a72;

}

/* Responsive styles for choices */


@media (max-width: 768px) {
  .choices {
    margin-top: 10px;
  }

  .choice-btn {
    padding: 8px 16px;
    font-size: 14px;
  }
  .chatbot-toggler{
right: 10px;
bottom: 125px;
  }
  .chatbot .chatbox{
    height: 540px;
  }
  .chatbot{
    right: 62px;
    bottom: 135px;
    /* width: 100%; */
  }
}

@media (max-width: 490px) {
  .choices {
    margin-top: 5px;
  }

  .choice-btn {
    padding: 6px 12px;
    font-size: 12px;
  }
  .chatbot-toggler{
    right: 5px;
    bottom: 107px;
  }
  .chatbot{
    right: 32px;
    width: 80%;
    bottom: 95px;

  }
  .chatbot .chatbox{
    height: 480px;
  }
}
.chat-container {
  scroll-snap-type: y proximity;
}

.chatbox {
  scroll-snap-align: start;
}


.progress-wrap {
  position: fixed;
  right: 37px;
  bottom: 25px;
  height: 46px;
  width: 46px;
  cursor: pointer;
  display: block;
  border-radius: 50px;
  box-shadow: inset 0 0 0 2px rgba(95, 58, 252,0.2);
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px);
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
}


////////////////////////////////////////////////
#main, #thumbnails img {
  box-shadow: 2px 2px 10px 5px #b8b8b8;
  border-radius: 10px;
  width: auto;
  height: auto;
}

* {
  transition: all 0.5s ease;
}

#thumbnails {
  text-align: center;
  display: none;

}
#thumbnails img {
  width: 100px;
  height: 100px;
  margin: 10px;
  cursor: pointer;
  display: none;

}
@media only screen and (max-width: 480px) {
  #thumbnails img {
    width: 50px;
    height: 50px;
  }
}
#thumbnails img:hover {
  transform: scale(1.05);
}

#main {
text-align: center;
margin: auto;
display: none;
}

@media only screen and (max-width: 480px) {
  #main {
    width: 100%;
  }
}

.hidden {
  opacity: 0;
}
/*///////////////////////////////////////////////*/
/*Modal*/


.game .main__title {
  font-size: 4rem;
}

.game .main__paragraph {
  font-size: 1.8rem
}

.game .modal__img {
  max-width: 60%;
  height: auto;
  display: block;
}

.game .modal {
  max-width: 700px;
  width: 60%;
  height: 70%;
  position: fixed;
  top: 50%;
  background-color: rgba(0, 0, 0, 0.3);
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 5px;
  background: #c9a17c;
  /* z-index: 1111; */
}


/****show modal class****/

.game .modal.show {
  display: block
}

.game #close {
  cursor: pointer;
  color: white;
  position: absolute;
  top: 0;
  font-size: 25px;
  right: 0;
  padding: 1rem;
  margin-right: 10px;
}

.game .modal__title {
  font-size: 2.5rem;
  position: absolute;
  top: 20px;
  right: -100px;
}
.game .ques{
  position: absolute;
  top: 200px;
  right: -100px;
  padding: 10px 10px 10px 10px;
}
.game .modal__title span {
  display: block;
  font-weight: 400;
}

.game .modal__paragraph {
  font-size: 16px;
  font-weight: 400;
}

.game .modal__button {
  width: 300px;
  background-color: #10827c;
  border: none;
  color: white;
  padding: 0.5rem 1rem;
  font-size: 30px;
  border-radius: 5px;
  box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;  /* box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.2); */
  transition: 0.3s background-color ease-in-out;
}


.game .modal__button:hover {
  background-color: #519f9b;
  box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
}


.game .modal__container {
  padding: 1rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

.game .modal__content{
  position: relative;
  text-align: right; /* Align text to the right */
}

.game .img-modal{
  position: absolute;
  top: 20%;
  left: -40%;
  width: 200px;
  height: 200px;
  filter: blur(4px);
}

.game .modal__button{
margin-top: 70%;
}

/****styling modal on smaller screen******/

@media only screen and (min-width: 768px) {
  .game .modal__container {
      flex-direction: row;
      padding: 2rem;
      text-align: left;
  }
  .game .modal__img {
      max-width: 50%
  }
}

@media only screen and (max-width: 500px) {
  .game .modal__title {
      font-size: 2rem;
  }
  .game .modal__img {
      max-width: 80%
  }
  
}


@media only screen and (max-width: 768px) {
  .game .modal__container {
    flex-direction: column; /* Stack content vertically */
  }

  .game .modal__title {
    font-size: 1.5rem; /* Adjust font size */
  }

 
  
  .game .modal__button{
    margin-top: 20px
  }
  .game .ques {
    font-size: 1.2rem; /* Adjust font size for smaller screens */
    position: static; /* Remove absolute positioning */
    margin-top: 75px;
    margin-bottom: -20px;
  }
  .game .modal__container {
    padding: 1rem;
    text-align: center; /* Center content on smaller screens */
  }
  
  .game .modal__content {
    text-align: right; /* Align text to the right */
  }
  

  .game .img-modal{
    position: absolute;
    top: 30%;
    left: 30%;
    width: 110px;
    height: 110px;
  
  }
  
  .game .modal__title {
    font-size: 2rem; /* Adjust font size for smaller screens */
    position: static; /* Remove absolute positioning */
    margin-top: 20px; /* Add margin for spacing */
  }
  
  .game .ques {
    font-size: 1.2rem; /* Adjust font size for smaller screens */
    position: static; /* Remove absolute positioning */
  }
  
  .game .modal__button {
    margin-top: 20px; /* Adjust margin for spacing */
  }
  .game .modal {
    max-width: 100%;
    width: 90%; /* Adjust width as needed */
    height: auto; /* Change height to auto for responsiveness */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* z-index: 1; */
  }
  .game #close {
    cursor: pointer;
    color: white;
    position: absolute;
    top: 0;
    font-size: 25px;
    left: 0;
    padding: 1rem;
    /* margin-right: 285px; */
    text-align: justify;

  }
  
  
}