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

Template Name: Onsafe - CCTV & Security HTML5 Template
Description: Onsafe is an excellent HTML Template for Security Firms, Security Systems and Security Service. It is best suitable for home security solutions, home automation requirements of the house, village, apartments, resorts and other residential as well as commercial CCTV & Security related Business Products, and Services websites.
Author: _Themephi
Version: 1.0

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

CSS INDEX
===================
01. common
02. header
03. sidebar
04. banner
05. breadcrumb
06. about
07. service
08. service details
09. choose
10. product
11. portfolio
12. portfolio details
13. testimonial
14. team
15. team details
16. cta
17. blog
18. blog details
19. shop
20. shop details
21. video
22. feature
23. map
24. contact
25. 404
26. cart
27. checkout
28. donate
29. footer

*******************************************************
*************************************************************** */
/*
************
*************************
01. common
*******************************************************
*************************************************************** */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&family=Rubik:wght@300;400;500;600;700&display=swap");
body {
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: var(--clr-body-text);
  font-size: 16px;
}

img {
  max-width: 100%;
  -webkit-transition: all 0.3s linear 0s;
  -moz-transition: all 0.3s linear 0s;
  -ms-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}

a,
button {
  -webkit-transition: all 0.3s linear 0s;
  -moz-transition: all 0.3s linear 0s;
  -ms-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}

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

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

a,
button {
  color: inherit;
  outline: medium none;
  text-decoration: none;
}

button:focus {
  outline: 0;
}

h2,
h3 {
  font-family: "Rubik", sans-serif;
  color: var(--clr-body-heading);
  margin-top: 0px;
  line-height: 1.2;
  font-weight: 600;
  /*text-transform: capitalize;*/
  margin-bottom: 15px;
}

h2 {
  font-size: 48px;
}

h3 {
  font-size: 38px;
}

p {
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 28px;
  color: var(--clr-body-text);
}

*::-moz-selection {
  background-color: var(--clr-theme-primary);
  color: var(--clr-common-white);
  text-shadow: none;
}

::-moz-selection {
  background-color: var(--clr-theme-primary);
  color: var(--clr-common-white);
  text-shadow: none;
}

::selection {
  background-color: var(--clr-theme-primary);
  color: var(--clr-common-white);
  text-shadow: none;
}

/* <<<<<<<    Input Placeholder   >>>>>>>>> */

/* <<<<<<<    Common Classes   >>>>>>>>> */

/* <<<<<<<    Overlay   >>>>>>>>> */

/* <<<<<<<    Margin & Padding     >>>>>>>>> */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.container {
  padding-right: 15px;
  padding-left: 15px;
}

.row {
  --bs-gutter-x: 30px;
}
.row.g-0 {
  --bs-gutter-x: 0;
}
/* <<<<<<<    Declaration   >>>>>>>>> */
:root {
  /**
  @color declaration
  */
  --clr-common-white: #fff;
  --clr-common-black: #181818;
  --clr-common-black-soft: #38383A;
  --clr-common-black-deep: #000000;
  --clr-common-black-2: #1b181a;
  --clr-body-heading: #0A111C;
  --clr-body-text: #777777;
  --clr-color-blue: #000A30;
  --clr-color-green-light: #153730;
  --clr-color-green-dark: #0D2621;
  --clr-color-orange-3: #FFCD00;
  --clr-theme-primary: #006464;
  --clr-theme-primary-dark: #A85855;
  --clr-theme-primary-soft: #fff5f5;
  --clr-theme-secondary: #ea6b08;
  --clr-bg-gray: #F6F6F6;
  --clr-bg-gray-2: #F1F1F1;
  --clr-bg-gray-3: #ECECEC;
  --clr-bg-gray-4: #b2b2b2;
  --clr-bg-gray-5: #BCBCBC;
  --clr-bg-gray-6: #828282;
  --clr-bg-gray-7: #EEEEEE;
  --clr-bg-gray-8: #D5D5D5;
  --clr-bg-gray-9: #b8b8b8;
  --clr-bg-gray-10: #a2a2a2;
  --clr-bg-gray-11: #c1c1c1;
  --clr-bg-gray-12: #F5F5F5;
  --clr-bg-gray-13: #dbdbdb;
  --clr-bg-gray-14: #CECECE;
  --clr-bg-gray-15: #F8F2F2;
  --clr-bg-gray-16: #F8F8F8;
}

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

/*
************
*************************
02. header
*******************************************************
*************************************************************** */
.header-area {
  position: relative;
  z-index: 5;
}

.header-middle {
  position: relative;
  z-index: 5;
  height: 145px;
  display: flex;
  align-items: center;
  background: #fff;
}
.header-middle .logo {
  position: absolute;
  top: 0;
  height: 100%;
  display: flex;
  background: var(--clr-theme-primary);
  align-items: center;
  padding-bottom: 30px;
  max-width: 150px;
}
.header-middle .logo a {
  display: inline-block;
}
.header-middle .logo::before {
  background-color: var(--clr-theme-primary);
  content: "";
  height: 100%;
  position: absolute;
  right: 100%;
  top: 0;
  width: 1200px;
}
.header-middle .logo::after {
  border-left: 0 solid var(--clr-theme-primary);
  border-right: 100px solid transparent;
  border-top: 145px solid var(--clr-theme-primary);
  content: "";
  height: 0;
  position: absolute;
  right: -100px;
  top: 0;
  width: 0;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .header-middle {
    height: 90px;
  }
  .header-middle .logo {
    padding-bottom: 0;
  }
  .header-middle .logo::after {
    border-top-width: 90px;
    border-right-width: 80px;
    right: -80px;
  }
}

.middle-info {
  display: flex;
  justify-content: end;
  align-items: center;
  gap: 30px;
  padding-bottom: 30px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .middle-info {
    gap: 20px;
  }
}

.single-item {
  display: flex;
  align-items: center;
}
.single-item .icon {
  width: 50px;
  height: 50px;
  border: 1px solid var(--clr-theme-primary);
  background-color: var(--clr-theme-primary);
  text-align: center;
  font-size: 16px;
  display: grid;
  place-items: center;
  position: relative;
  z-index: 5;
  margin-right: 25px;
  color: var(--clr-common-white);
}
.single-item .icon::before {
  content: "\f105";
  display: block;
  font-family: "Font Awesome 5 Pro";
  line-height: 1em;
  top: 50%;
  transform: translateY(-50%);
  left: calc(100% + 6px);
  position: absolute;
  width: 18px;
  color: var(--clr-theme-primary);
  font-weight: 700;
}
.single-item .icon::after {
  backface-visibility: hidden;
  background-color: var(--clr-theme-primary);
  content: "";
  display: block;
  top: 50%;
  height: 2px;
  left: 100%;
  position: absolute;
  transform: translateY(-50%);
  width: 16px;
}
.single-item .info > span:first-child {
  display: block;
  font-size: 16px;
  color: var(--clr-theme-primary);
}
.single-item .info a {
  display: block;
  font-size: 16px;
}
.single-item .info a:hover {
  color: var(--clr-theme-primary);
}
.main-menu ul li:is(.menu-has-child) > a::after {
  display: inline-block;
  font-family: "Font Awesome 5 Pro";
  content: "\f0d7";
  font-size: 14px;
  font-weight: 700;
  margin-left: 5px;
}
.theme-btn:is(.cta-btn) {
  transition: 0.4s;
}
.theme-btn:is(.cta-btn):hover {
  background-color: var(--clr-common-white);
  color: var(--clr-body-heading);
}

.menu-bar {
  display: flex;
  justify-content: end;
  align-items: center;
}
.header-main-menu-2 ul li:is(.menu-has-child) > a::after {
  display: inline-block;
  font-family: "Font Awesome 5 Pro";
  content: "\f0d7";
  font-size: 14px;
  font-weight: 700;
  margin-left: 5px;
}

/* Search  */

/*
************
*************************
03. sidebar
*******************************************************
*************************************************************** */
.side-info {
  width: 100%;
  max-width: 400px;
  background-color: #0C1308;
  box-shadow: 0 13px 29px rgba(4, 0, 23, 0.1);
  height: 100%;
  position: fixed;
  z-index: 10;
  top: 0;
  right: -400px;
  -webkit-transition: all 0.4s linear 0s;
  -moz-transition: all 0.4s linear 0s;
  -ms-transition: all 0.4s linear 0s;
  -o-transition: all 0.4s linear 0s;
  transition: all 0.4s linear 0s;
  padding: 40px;
}
@media (max-width: 767px) {
  .side-info {
    padding: 40px 30px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .side-info {
    padding: 40px;
  }
}

.side-info:is(.info-open) {
  right: 0;
  overflow-y: scroll;
  scrollbar-width: thin;
}

.offcanvas-overlay {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  content: "";
  background-color: rgba(4, 0, 23, 0.5);
  z-index: 9;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.4s linear 0s;
  -moz-transition: all 0.4s linear 0s;
  -ms-transition: all 0.4s linear 0s;
  -o-transition: all 0.4s linear 0s;
  transition: all 0.4s linear 0s;
}

.offcanvas-overlay:is(.overlay-open) {
  left: 0;
  opacity: 1;
  visibility: visible;
}

/* sidebar contact info */

/* Search */

.sidebar-close {
  border: 0;
  background-color: transparent;
  font-size: 25px;
}

.sidebar-close:hover {
  color: #006464;
}

/*
************
*************************
04. banner
*******************************************************
*************************************************************** */
.banner-navigation {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 9;
  display: flex;
  margin-left: 60px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .banner-navigation {
    left: 0;
    transform: translateX(0);
    max-width: 690px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    right: 0;
  }
}
@media (max-width: 767px) {
  .banner-navigation {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .banner-navigation {
    left: 0;
    transform: translateX(0);
    max-width: 540px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    right: 0;
  }
}

.banner-navigation div {
  width: 60px;
  height: 60px;
  background: var(--clr-theme-primary);
  color: #fff;
  font-size: 25px;
  text-align: center;
  line-height: 60px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .banner-navigation div {
    width: 60px;
    height: 60px;
    line-height: 60px;
  }
}
@media (max-width: 767px) {
  .banner-navigation div {
    width: 60px;
    height: 60px;
    line-height: 60px;
  }
}

.banner-navigation .banner-swiper-next {
  left: 80px;
  border-left: 1px solid #007373;
}

.banner-image {
  min-height: 100%;
}

.banner-wrap {
  display: flex;
  height: 735px;
  position: relative;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .banner-wrap {
    flex-direction: column;
  }
}
@media (max-width: 767px) {
  .banner-wrap {
    flex-direction: column;
    height: 600px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .banner-wrap {
    flex-direction: column;
    height: 650px;
  }
}

.single-banner {
  height: 735px;
  position: relative;
  z-index: 1;
}
@media (max-width: 767px) {
  .single-banner {
    height: 600px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .single-banner {
    height: 650px;
  }
}
.single-banner::before {
  position: absolute;
  left: 0;
  top: 0;
  content: "";
  height: 100%;
  width: 100%;
  opacity: 0.4;
  background-color: #000000;
  -webkit-transition: all 0.3s linear 0s;
  -moz-transition: all 0.3s linear 0s;
  -ms-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}

.banner-banner-control {
  flex: 0 0 50%;
  width: 50%;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .banner-banner-control {
    flex: 0 0 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
  }
}

.banner-img-wrap {
  flex: 0 0 50%;
  width: 50%;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .banner-img-wrap {
    flex: 0 0 100%;
    width: 100%;
  }
}

.banner-main {
  height: 100%;
  position: relative;
  height: 735px;
  display: flex;
  margin-left: calc(100% - 645px);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .banner-main {
    margin-left: calc(100% - 555px);
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .banner-main {
    margin-left: calc(100% - 465px);
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .banner-main {
    max-width: 690px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}
@media (max-width: 767px) {
  .banner-main {
    width: calc(100% - 30px);
    margin-left: auto;
    margin-right: auto;
    height: 600px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .banner-main {
    max-width: 510px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    height: 650px;
  }
}

.banner-control-item {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  padding-top: 35px;
}
@media (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {
  .banner-control-item {
    padding-top: 0;
  }
}

.banner-content {
  padding-right: 50px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .banner-content {
    padding-right: 30px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .banner-content {
    padding-right: 0;
  }
}

.banner-title {
  font-size: 62px;
  line-height: 1.2;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .banner-title {
    font-size: 56px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .banner-title {
    font-size: 50px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .banner-title {
    font-size: 56px;
    color: #fff;
  }
}
@media (max-width: 767px) {
  .banner-title {
    font-size: 34px;
    color: #fff;
    line-height: 1.3;
  }
}
@media only screen and (min-width: 480px) and (max-width: 575px) {
  .banner-title {
    font-size: 40px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .banner-title {
    font-size: 46px;
    line-height: 1.2;
  }
}

.banner-area {
  position: relative;
  z-index: 1;
}

/*
************
*************************
05. breadcrumb
*******************************************************
*************************************************************** */

/*
************
*************************
06. about
*******************************************************
*************************************************************** */
.section-subtitle {
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--clr-theme-secondary);
  display: inline-block;
  margin-bottom: 10px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .section-subtitle {
    font-size: 18px;
  }
}
@media (max-width: 767px) {
  .section-subtitle {
    font-size: 16px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .section-subtitle {
    font-size: 16px;
  }
}

.section-title {
  font-size: 46px;
  font-weight: 600;
  line-height: 1.2;
  text-transform: capitalize;
}
.non-text-transform {
  text-transform: none;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .section-title {
    font-size: 42px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .section-title {
    font-size: 40px;
  }
}
@media (max-width: 767px) {
  .section-title {
    font-size: 30px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .section-title {
    font-size: 36px;
  }
}

.section-text {
  font-size: 16px;
}

.f-46 {
  font-size: 42px;
}

/*
************
*************************
07. service
*******************************************************
*************************************************************** */
.service-section {
  background-color: #D9E9E9;
  height: 100%;
  width: 100%;
  padding: 50px 40px;
  display: grid;
  place-items: center;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .service-section {
    padding: 50px 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .service-section {
    padding: 50px 30px;
  }
}
@media (max-width: 767px) {
  .service-section {
    padding: 50px 30px;
    place-items: start;
  }
}

.service-item {
  width: 100%;
  height: 100%;
  padding: 40px 40px 50px;
  position: relative;
  z-index: 5;
  overflow: hidden;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .service-item {
    padding: 40px 30px 50px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .service-item {
    padding: 40px 30px 50px;
  }
}
@media (max-width: 767px) {
  .service-item {
    padding: 40px 30px 50px;
  }
}

.service-img {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
  opacity: 0;
  -webkit-transition: all 0.4s linear 0s;
  -moz-transition: all 0.4s linear 0s;
  -ms-transition: all 0.4s linear 0s;
  -o-transition: all 0.4s linear 0s;
  transition: all 0.4s linear 0s;
  transform: translateX(-100px);
}
.service-img::after {
  position: absolute;
  left: 0;
  top: 0;
  content: "";
  height: 100%;
  width: 100%;
  background-color: rgba(255, 255, 255, 0);
  z-index: -1;
  -webkit-transition: all 0.3s linear 0s;
  -moz-transition: all 0.3s linear 0s;
  -ms-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}

.service-icon {
  font-size: 55px;
  color: var(--clr-theme-primary);
  margin-bottom: 15px;
  -webkit-transition: all 0.3s linear 0s;
  -moz-transition: all 0.3s linear 0s;
  -ms-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .service-icon {
    font-size: 50px;
  }
}
@media (max-width: 767px) {
  .service-icon {
    font-size: 45px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .service-icon {
    font-size: 50px;
  }
}

.service-content-title {
  font-size: 24px;
  margin-bottom: 15px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .service-content-title {
    font-size: 20px;
  }
}
@media (max-width: 767px) {
  .service-content-title {
    font-size: 20px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .service-content-title {
    font-size: 24px;
  }
}
.service-content p {
  font-size: 16px;
  margin-bottom: 0;
  -webkit-transition: all 0.3s linear 0s;
  -moz-transition: all 0.3s linear 0s;
  -ms-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}

.service-item:hover .service-img {
  opacity: 1;
  transform: translateX(0);
}
.service-item:hover .service-img::after {
  opacity: 0.6;
  background-color: #000000;
}
.service-item:hover .service-icon {
  color: #fff;
}
.service-item:hover .service-content-title {
  color: #fff;
}
.service-item:hover .service-content p {
  color: #fff;
}

.service-border {
  border: 1px solid #ececec;
}
.service-border:nth-child(2) {
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .service-border:nth-child(2) {
    border-right: 1px solid #ececec;
  }
}
@media (max-width: 767px) {
  .service-border:nth-child(2) {
    border-left: 1px solid #ececec;
  }
}
.service-border:nth-child(3) {
  border-bottom: 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .service-border:nth-child(4) {
    border-bottom: 0;
    border-right: 1px solid #ececec;
    border-left: 0;
  }
}
@media (max-width: 767px) {
  .service-border:nth-child(4) {
    border-bottom: 0;
    border-left: 1px solid #ececec;
  }
}
.service-border:nth-child(5) {
  border-right: 0;
  border-left: 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .service-border:nth-child(5) {
    border-left: 1px solid #ececec;
    border-right: 1px solid #ececec;
  }
}
@media (max-width: 767px) {
  .service-border:nth-child(5) {
    border-right: 1px solid #ececec;
    border-bottom: 0;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .service-section .section-title.f-46 {
    font-size: 44px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .service-section .section-title.f-46 {
    font-size: 30px;
  }
}
@media (max-width: 767px) {
  .service-section .section-title.f-46 {
    font-size: 28px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .service-section .section-title.f-46 {
    font-size: 36px;
  }
}

/*
************
*************************
08. service details
*******************************************************
*************************************************************** */

/*
************
*************************
09. choose
*******************************************************
*************************************************************** */

/*
************
*************************
10. product
*******************************************************
*************************************************************** */

/*
************
*************************
11. portfolio
*******************************************************
*************************************************************** */

/*
************
*************************
12. portfolio details
*******************************************************
*************************************************************** */

/*
************
*************************
13. testimonial
*******************************************************
*************************************************************** */

/*
************
*************************
14. team
*******************************************************
*************************************************************** */

/*
************
*************************
15. team details
*******************************************************
*************************************************************** */

/*
************
*************************
16. cta
*******************************************************
*************************************************************** */

/*
************
*************************
17. blog
*******************************************************
*************************************************************** */

/*
************
*************************
18. blog details
*******************************************************
*************************************************************** */

/*
************
*************************
19. shop
*******************************************************
*************************************************************** */

/*
************
*************************
20. shop details
*******************************************************
*************************************************************** */

/*
************
*************************
21. video
*******************************************************
*************************************************************** */
/*
************
*************************
22. feature
*******************************************************
*************************************************************** */

/*
************
*************************
23. map
*******************************************************
*************************************************************** */

/*
************
*************************
24. contact
*******************************************************
*************************************************************** */

/*
************
*************************
25. 404
*******************************************************
*************************************************************** */

/*
************
*************************
26. cart
*******************************************************
*************************************************************** */

/*
************
*************************
27. checkout
*******************************************************
*************************************************************** */

/*
************
*************************
28. donate
*******************************************************
*************************************************************** */

/*
************
*************************
28. donate
*******************************************************
*************************************************************** */

/*
************
*************************
29. footer
*******************************************************
*************************************************************** */
.footer-area {
  background: var(--clr-common-black);
}

.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  margin-bottom: 10px;
}
.footer-contact-item:last-child {
  margin-bottom: 0;
}

.contact-icon {
  width: 20px;
  flex: 0 0 20px;
  font-size: 18px;
  color: var(--clr-theme-primary);
}
.contact-icon i {
  margin-top: 4px;
}

.address-info p {
  margin-bottom: 0;
  font-size: 16px;
}

.contact-info a {
  display: block;
  margin-bottom: 5px;
}
.contact-info a:last-child {
  margin-bottom: 0;
}
.contact-info a:hover {
  color: var(--clr-theme-primary);
}

.footer-combine {
  display: flex;
  justify-content: space-between;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .footer-combine.mr-30 {
    margin-right: 10px;
    margin-left: 35px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .footer-combine.mr-30 {
    margin-right: 70px;
    margin-left: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .footer-combine.mr-30 {
    margin-right: 0;
    margin-left: 0;
  }
}
@media (max-width: 767px) {
  .footer-combine.mr-30 {
    flex-direction: column;
    gap: 30px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .footer-combine.mr-30 {
    flex-direction: row;
    gap: 0;
  }
}

.footer-widget-title {
  color: var(--clr-common-white);;
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 20px;
}

.working-hours {
  width: 100%;
}
.working-hours tr {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
}
.working-hours tr th {
  font-size: 16px;
  font-weight: 600;
  color: var(--clr-common-white);;
}
.working-hours tr td {
  text-align: left;
  min-width: 110px;
  font-size: 16px;
  color: var(--clr-common-white);;
  margin-left: 30px;
}

.footer-copyright {
  border-top: 1px solid #444;
  padding: 25px 0;
}

.copyright-text {
  text-align: center;
}
.copyright-text p {
  margin-bottom: 0;
  font-size: 16px;
  color: #fff;
}
.copyright-text a {
  color: #ea6b08;
  font-weight: 600;
  font-size: 18px;
  margin-left: 5px;
}

@media (max-width: 767px) {
  .footer-combine.pb-90 {
    padding-bottom: 15px;
  }
}

.footer-top {
  margin-top: 67px;
}

.phone-icon.animate {
  /*font-size: 100px; !* Size of the phone icon *!*/
  animation: bounce 1s infinite; /* Infinite bounce animation */
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-20px); /* Bounce height */
  }
  60% {
    transform: translateY(-10px); /* Mid-bounce height */
  }
}

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