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

    Theme Name: Crafto - The Multipurpose HTML5 Template
    Theme URL: https://craftohtml.themezaa.com/
    Description: Elevate your online presence with Crafto - a modern, versatile, multipurpose Bootstrap 5 responsive HTML5, SCSS template using highly creative 48+ ready demos.
    Author: ThemeZaa - https://www.themezaa.com/
    Author ThemeForest URL: https://themeforest.net/user/themezaa
    Copyright(c) 2024 themezaa.com
    Version: 1.0

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

Table of contents

    01. Google font
    02. CSS color variable
    03. Reset
    04. Typography
    05. General
    06. Background and border
    07. Width
    08. Height
    09. Loop
    10. Header
    11. Page title
    12. Layout
    13. Elements
    14. Blog
    15. Portfolio
    16. Shop
    17. Footer

*/
/* ===================================
    01. Google font
====================================== */

/* ===================================
    02. CSS color variable
====================================== */

/* ===================================
    03. Reset
====================================== */
 [class*=bi-], [class*=ti-] {
  display: inline-block;
}


/* ===================================
    04. Typography
====================================== */

/* ===================================
    05. General
====================================== */
/* Separator line */
/* Separator vertical line */
/* Separator line size */
/* Opacity */
/* Position */
/* Vertical title center */
/* Skrollr */
/* Transform */
/* Transition */
.transition-inner-all * {
  -webkit-transition: all 400ms cubic-bezier(0.37, 0, 0.63, 1);
  transition: all 400ms cubic-bezier(0.37, 0, 0.63, 1);
}
/* Pointer events */
/* Sticky column */
/* Overflow */
/* Overlap section */
/* Outside box */
/* CSS filter */
/* Box shadow */
/* Input */
input, select, textarea, .form-control, .form-select {
  padding: 5px 15px;
  width: 100%;
  max-width: 100%;
  resize: none;
  outline: none;
  font-size: 16px;
  border: 1px solid #e4e4e4;
  color: var(--medium-gray);
  line-height: inherit;
  word-break: normal;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.form-select {
  color: var(--medium-gray);
}
.form-select:focus {
  border-color: #dfdfdf;
}
input:focus, select:focus, textarea:focus, .form-control:focus {
  border: 1px solid #c2c2c2;
  box-shadow: none !important;
  color: var(--medium-gray);
}
::-webkit-input-placeholder {
  color: var(--medium-gray) !important;
  text-overflow: ellipsis;
}
::-moz-placeholder {
  color: var(--medium-gray) !important;
  text-overflow: ellipsis;
  opacity: 1;
}
/* Select */
.select {
  position: relative;
}

/* Date icon */
/* Mozilla firefox */
/* Time icon */

/* Input size */
/* Box overlay */
/* Swiper slider pagination */
/* Swiper pagination style 02 */
/* Swiper pagination style 03 */
/* Swiper pagination style 04 */
/* Custom image pagination */
/* Swiper number pagination style 01 */
/* Swiper number pagination style 02 */
/* Swiper line pagination style 01 */
/* Swiper number line pagination style */
/* Swiper number navigation style */
/* Swiper pagination progress style */
/* Swiper pagination progress style */
/* Swiper pagination bottom */
/* Swiper navigation */
/* Swiper navigation style 01 */
/* Swiper navigation style 02 */
/* Swiper navigation style 03 */
/* Swiper navigation style 04 */
/* Swiper navigation style 05 */
/* Swiper navigation style 06 */
/* Swiper navigation style 07 */
/* Swiper navigation style 08 */
/* Slider custom text */
/* Swiper width auto */
/* Slider shadow */
/* Highlight separator */
/* Full screen */
/* Video icons */
@-webkit-keyframes video-icon-sonar {
  0% {
    opacity: 1;
    -webkit-transform: scale(0.1);
    transform: scale(0.1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}
@keyframes video-icon-sonar {
  0% {
    opacity: 1;
    -webkit-transform: scale(0.1);
    transform: scale(0.1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}
/* HTML video play */
/* Will change */
@-webkit-keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
  }
}
/* Float animation */
@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(15px);
  }
  100% {
    transform: translateY(30px);
  }
}
@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(5px);
  }
  100% {
    transform: translateY(10px);
  }
}
/* Zoom animation */
@keyframes zoom-in-zoom-out {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2, 1.2);
  }
  100% {
    transform: scale(1, 1);
  }
}
/* Box shadow animation  */
/* Parallax liquid  */
/* Masked image animation */
/* Shape image animation */
/* Magic cursor */
/* Anime animation */
[data-anime] {
  opacity: 0;
  transition: none;
}
[data-anime].appear {
  opacity: 1;
}
[data-anime].btn {
  transition: none;
}
/* Atropos box */
/* Only for safari browser */
@media not all and (min-resolution: 0.001dpcm) {
  /* font awesome icon gradient color */
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  /* color issue */
  .text-white a[href^=tel] {
    color: var(--white);
  }
}
.swiper-slide [data-anime] {
  opacity: 0;
  transition: 0.3s ease-in-out;
}
/* Data top bottom transition animation */
/* Custom cursor */
/* Stack box */
/* Scrolling text */

/* Marquee slide */
/* Father shadow */
/* Text sliding line */
/* Sliding line */
/* Feature box slider */
/* Page loader */
/* Cookie message */
/* Scroll progress */
/* for buy and demo button */
/* Move it (define the animation) */
@-moz-keyframes example1 {
  0% {
    -moz-transform: translateX(100%);
  }
  100% {
    -moz-transform: translateX(-100%);
  }
}
@-webkit-keyframes example1 {
  0% {
    -webkit-transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(-100%);
  }
}
@keyframes example1 {
  0% {
    -moz-transform: translateX(100%); /* Firefox bug fix */
    -webkit-transform: translateX(100%); /* Firefox bug fix */
    transform: translateX(100%);
  }
  100% {
    -moz-transform: translateX(-100%); /* Firefox bug fix */
    -webkit-transform: translateX(-100%); /* Firefox bug fix */
    transform: translateX(-100%);
  }
}
/* ===================================
    06. Background and border
====================================== */
/* Background color */
.bg-dark-gray,
.bg-dark-gray:focus {
  background-color: var(--dark-gray);
}
.bg-slate-blue {
  background-color: var(--slate-blue);
}
/* Gradient background color */
/* Transparent background color */
.bg-transparent {
  background-color: transparent;
}
/* Background image */
/* Background size */
/* Border width */
/* Border style */
/* Border color */
.border-color-dark-gray {
  border-color: var(--dark-gray) !important;
}
/* Gradient border color */
/* Border radius */
.border-radius-0px {
  border-radius: 0 !important;
}
/* Parallax background */
/* ===================================
    07. Width
====================================== */
.w-100 {
  width: 100% !important;
}
/* ===================================
    08. Height
====================================== */
/* Screen height */
@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: auto;
  }
}
/* ===================================
    09. Loop - Padding, margin, position, font weight, min height, opacity and z-index
====================================== */
/* Padding and margin */
.mb-25px {
  margin-bottom: 25px !important;
}
.mb-4 {
  margin-bottom: 4% !important;
}
/* Position */
/* Font weight */
.fw-500 {
  font-weight: 500 !important;
}
/* Min height */
/* Opacity */
/* Z-index */
/* ===================================
   10. Header
====================================== */

/* Navbar */

 .nav-link:hover{
  /*color: #65AF64!important;*/
  text-decoration: none;
}

/* Header hover submenu dark */
/* Header hover submenu light */
/* Header dark */
/* Header light */
/* Header icon */
/* Header cart */
/* Header language */
/* Header widget */
/* Header push button */
/* Header push menu */
/* Header center logo */
/* Header top logo */
/* Header left menu simple */
/* Menu list */
/* Header left menu modern */
/* Header left menu modern dark */
/* Hamburger menu */
/* Hamburger menu half */
/* Hamburger menu simple */
/* Right push menu */
/* Header search popup */
/* Custom hide animation */
@-webkit-keyframes hide-animation {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
/* Custom slide animation */
@-webkit-keyframes show-animation {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
button:focus {
  outline: none;
}
/* Header toggle button  */
/* Landing page header */
/* ===================================
   11. Page title
====================================== */
/* Breadcrumb */
/* Page title style */
/* Down section icon */
/* Down section line */
/* ===================================
   12. Layout
====================================== */
/* Sidebar */
/* Grid */
/* Grid column and gutter spacing */
/* ===================================
    13. Elements
====================================== */
/* Accordion */
/* Accordion style 01 */
/* Accordion style 02 */
/* Accordion style 03 */
/* Accordion style 04 */
/* Accordion style 05 */
/* Accordion style 06 */
/* Alert box */
@keyframes hvr-icon-push {
  50% {
    -webkit-trasfrom: scale(0.5);
    trasfrom: scale(0.5);
  }
}
/* Alert box style 02 */
/* Alert box style 03 */
/* Alert box style 04 */
/* Alert box style 05 */
/* Blockquote */
/* Blockquote style 05 */
/* Use for mac desktop pc */
/* Button */
 .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check) + .btn:active {
  border-color: initial;
  color: initial;
}
.btn {
  display: inline-block;
  border-radius: 0;
  letter-spacing: 0.5px;
  width: auto;
  font-weight: 500;
  -webkit-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}
.btn:focus {
  -webkit-box-shadow: none;
  box-shadow: none;
}
.btn:hover {
  background-color: inherit;
}
.btn i {
  position: relative;
  margin-left: 6px;
}
.btn.btn-link {
  padding: 0 0 2px;
  position: relative;
  text-decoration: none;
  border: 0;
  border-bottom: 2px solid;
  letter-spacing: 0;
  background-color: transparent;
}
.btn.btn-link.thin {
  border-bottom: 1px solid;
}
.btn.btn-link:hover {
  opacity: 0.7;
}
.btn.btn-link:focus-visible {
  box-shadow: none;
}
.btn.btn-hover-animation-switch.btn-link {
  border-bottom: 0;
  padding-bottom: 0;
}
.btn.btn-hover-animation-switch.btn-link:hover {
  opacity: 1;
}
.btn.btn-hover-animation-switch > span {
  display: inline-flex;
  align-items: center;
}
.btn.btn-hover-animation-switch .btn-text {
  margin-left: -13px;
  position: relative;
  z-index: 3;
  transition: transform 0.6s 0.125s cubic-bezier(0.1, 0.75, 0.25, 1);
}
.btn.btn-hover-animation-switch .btn-icon {
  margin-left: 6px;
  position: relative;
  transition: opacity 0.4s 0.25s, transform 0.6s 0.25s;
  transition-timing-function: cubic-bezier(0.1, 0.75, 0.25, 1);
  line-height: 0;
  z-index: 3;
}
.btn.btn-hover-animation-switch .btn-icon i {
  margin: 0;
  line-height: 0;
}
.btn.btn-hover-animation-switch .btn-icon + .btn-icon {
  order: -2;
  opacity: 0;
  transition-delay: 0s;
  margin-left: 0;
  -webkit-transform: translateX(-10px);
  transform: translateX(-10px);
}
.btn.btn-hover-animation-switch:hover .btn-text {
  transition-delay: 0.1s;
  transform: translateX(23px);
}
.btn.btn-hover-animation-switch:hover .btn-icon {
  transition-delay: 0s;
  transform: translateX(10px);
  opacity: 0;
}
.btn.btn-hover-animation-switch:hover .btn-icon + .btn-icon {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.225s;
}
.btn.btn-slide-down span {
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
}
 .btn.btn-slide-down {
  position: relative;
  z-index: 1;
  overflow: hidden;
}
 .btn.btn-slide-down span {
  position: absolute;
  height: 100%;
  width: 102%;
  z-index: -1;
  left: -2px;
  top: 0;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
 .btn.btn-slide-down:hover span {
  -webkit-transform: translateY(0);
  transform: translateY(0);
}
/* Button icon position */
/* Gradient button */
/* Blog button */
/* Clients style 01 */
/* Clients style 02 */
/* Clients style 03 */
/* Clients style 04 */
/* Clients style 05 */
/* Clients style 06 */
/* Clients style 07 */
/* Clients style 08 */
/* Columns */
/* Contact form */
/* Contact form style 01 */
/* Contact form style 03 */
.contact-form-style-03 input, .contact-form-style-03 textarea {
  outline: none;
  border: none;
  border-bottom: 1px solid;
  background: transparent;
}
.contact-form-style-03 select {
  outline: none;
  border: none;
  border-bottom: 1px solid;
}
.contact-form-style-03 input:focus, .contact-form-style-03 select:focus, .contact-form-style-03 textarea:focus, .contact-form-style-03 .form-control:focus {
  border: 0;
  border-bottom: 1px solid #c2c2c2;
}
.contact-form-style-03 textarea {
  resize: none;
}
.contact-form-style-03 .form-control {
  background-position: right 35px center !important;
}
/* Contact form style 06 */
/* Contact form style 07 */
/* Text slider 02 */
/* Text slider 03 */
/* Text slider 05 */
/* Countdown style 01 */
/* Countdown style 02 */
/* Countdown style 03 */
/* Countdown style 04 */
/* Counter style 03 */
/* Counter style 04 */
/* Counter style 06 */
/* Counter style 07 */
.counter-style-07 .vertical-counter-number {
  z-index: 1;
}
/* Vertical counter */
.vertical-counter-number {
  overflow: hidden;
  width: 100%;
  height: auto;
}
.vertical-counter-number ul {
  text-align: center;
  margin: 0;
  padding: 0;
  list-style: none;
  will-change: transform;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}
/* Vertical counter */
/* Divider style 01 */
/* Divider style 02 */
/* Divider style 03 */
/* First letter */
/* First letter block */
/* First letter round */
/* First letter big */
/* First letter small */
/* Event style 02 */
/* Event style 03 */
/* Text image mask */
/* Fancy text box style 01 */
/* Google map */
#map {
  height: 550px;
}
@keyframes markerWave {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  20% {
    opacity: 0.8;
  }
  100% {
    transform: scale(5.5);
    opacity: 0;
  }
}
@-webkit-keyframes markerWave {
  0% {
    -webkit-transform: scale(1);
    opacity: 0.8;
  }
  20% {
    opacity: 0.8;
  }
  100% {
    -webkit-transform: scale(5.5);
    opacity: 0;
  }
}
/* Text highlight */
/* Separator animation */
/* Feature box style */
/* Icon with text style 03 */
/* Icon with text style 05 */
/* Icon with text style 07 */
/* Icon with text style 10 */
/* Icon with text style 11 */
/* Image gallery style 01 */
/* Image gallery style 02 */
/* Image gallery style 03 */
/* Image gallery style 04 */
/* Image gallery style 05 */
/* Image gallery style 06 */
/* Instagram */
/* Interactive banner style 01 */
/* Interactive banner style 02 */
/* Interactive banner style 03 */
/* Interactive banner style 04 */
/* Interactive banner style 05 */
/* Interactive banner style 06 */
/* Interactive banner style 07 */
/* Interactive banner style 08 */
/* Interactive banner style 09 */
/* List style 01 */
/* List style 02 */
/* List style 03 */
/* List style 04 */
/* List style 05 */
/* HTML video */
/* Background video */
/* Modal popup */
/* Zoom animation */
/* Fade animation */
/* Slide up animation */
/* Images gallery */
/* Modal popup */
/* Auto newsletter popup */
/* Parallax background */
/* Video icon effect  */
@-webkit-keyframes border-transform {
  0%, 100% {
    border-radius: 36% 64% 59% 41%/40% 45% 55% 60%;
  }
  24% {
    border-radius: 37% 63% 60% 40%/46% 52% 48% 54%;
  }
  32% {
    border-radius: 40% 60% 54% 46%/52% 56% 44% 48%;
  }
  42% {
    border-radius: 52% 48% 62% 38%/54% 54% 46% 46%;
  }
  56% {
    border-radius: 60% 40% 65% 35%/54% 50% 50% 46%;
  }
  70% {
    border-radius: 44% 56% 43% 57%/42% 50% 50% 58%;
  }
}
@keyframes border-transform {
  0%, 100% {
    border-radius: 36% 64% 59% 41%/40% 45% 55% 60%;
  }
  24% {
    border-radius: 37% 63% 60% 40%/46% 52% 48% 54%;
  }
  32% {
    border-radius: 40% 60% 54% 46%/52% 56% 44% 48%;
  }
  42% {
    border-radius: 52% 48% 62% 38%/54% 54% 46% 46%;
  }
  56% {
    border-radius: 60% 40% 65% 35%/54% 50% 50% 46%;
  }
  70% {
    border-radius: 44% 56% 43% 57%/42% 50% 50% 58%;
  }
}
/* Particles */
/* Pie chart style 01 */
/* Pricing table style 01 */
/* Pricing table style 02 */
/* Pricing table style 04 */

/* Pricing table style 07 */
/* Pricing table style 08 */
/* Pricing table style 09 */
/* Pricing table style 10 */
/* Pricing table style 11 */
/* Pricing table style 12 */
/* Pricing table style 13 */
/* Process step style 01 */
/* Process step style 02 */
/* Process step style 03 */
/* Process step style 04 */
/* Process step style 05 */
/* Process step style 07 */
/* Process step style 08 */
/* Process step style 09 */
/* Process step style 10 */
/* Process step style 11 */
/* Progress bar */
.progress {
  position: relative;
  overflow: visible;
}
/* Progress bar style 01 */
/* Progress bar style 02 */
/* Progress bar style 03 */
/* Progress bar style 04 */
/* Review style 03 */
/* Review style 08 */
/* Rotate box */
/* Rotate box style 01 */
/* Rotate box style 02 */
/* Services box style 01 */
/* Services box style 02 */
/* Services box style 05 */
/* Services box style 06 */
/* Services box style 07 */
/* Sliding box zoom effect */
@keyframes scale-effect {
  0% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
  to {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@-webkit-keyframes scale-effect {
  0% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
  to {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
/* Sliding box fade effect */
@keyframes fade {
  0% {
    opacity: 0.2;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fade {
  0% {
    opacity: 0.2;
  }
  to {
    opacity: 1;
  }
}
/* Sliding box right effect */
@keyframes slide-right {
  0% {
    -webkit-transform: translateX(-25px);
    transform: translateX(-25px);
  }
  to {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@-webkit-keyframes slide-right {
  0% {
    -webkit-transform: translateX(-25px);
    transform: translateX(-25px);
  }
  to {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
/* Sliding box */
/* Sliding box style 01 */
/* Sliding box style 02 */
/* Sliding box style 03 */
/* Social media icon */
/*  Social icon dark and light */
/* Social icon style 01 */
/* Social icon style 03 */
/* Social icon style 04 */
/* Social icon style 05 */
/* Social icon style 06 */
/* Social icon style 07 */
/* Social icon style 08 */
/* Social icon style 09 */
/* Social icon style 10 */
/* Social text style 01 */
/* Subcribe style 01 */
/* Subcribe style 02 */
/* Subcribe style 03 */
/* Subcribe style 04 */

/* Tab */
.nav-tabs > li.nav-item {
  display: inline-block;
  float: none;
  margin: 0;
  padding: 0 17px;
}
/* Tab style 03 */
/* Tab style 02 */
/* Tab style 03 */
/* Tab style 04 */
.tab-style-04 .nav-tabs .nav-item {
  padding: 0 0px;
  padding-right: 30px;
}
.tab-style-04 .nav-tabs .nav-item .nav-link {
  padding: 0;
  border: none;
  background: transparent;
  position: relative;
  color: var(--medium-gray);
}
.tab-style-04 .nav-tabs .nav-item .nav-link .tab-border {
  width: 100%;
  height: 2px;
  display: block;
  -wekit-transform: scaleX(0);
  -moz-transform: scaleX(0);
  -ms-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: transform 0.5s ease;
  transition: transform 0.5s ease;
}
.tab-style-04 .nav-tabs .nav-item .nav-link.active, .tab-style-04 .nav-tabs .nav-item .nav-link.show, .tab-style-04 .nav-tabs .nav-item .nav-link:hover {
  color: var(--dark-gray);
}
.tab-style-04 .nav-tabs .nav-item .nav-link.active .tab-border, .tab-style-04 .nav-tabs .nav-item .nav-link.show .tab-border, .tab-style-04 .nav-tabs .nav-item .nav-link:hover .tab-border {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}
/* Tab style 05 */
/* Tab style 06 */
/* Tab style 07 */
/* Tab style 08 */
/* Team style 01 */
/* Team style 02 */
/* Team style 04 */
/* Team style 05 */
/* Team style 08 */
/* Team style 09 */
/* Team style 10 */
/* Testimonial style 01 */
/* Testimonial style 04 */
/* Testimonial style 05 */
/* Testimonial style 12 */
/* Testimonial style 13  */
/* ===================================
   14. Blog
====================================== */
/* Blog grid */
/* Blog classic */
/* Blog only text */
/* Blog metro */
/* Blog masonry */
/* Blog simple */
/* Blog date */
/* Blog side image */
/* Blog modern */
/* Blog standard */
/* Blog comment */
/* Pagination style 01 */
/* Blog clean */
/* ===================================
   15. Portfolio
====================================== */
/* Portfolio grid */
/* Portfolio filter */
/* Portfolio classic */
/* Portfolio boxed */
/* Mousetip */
/* Portfolio transform */
/* Portfolio creative */
/* Portfolio simple */
/* Portfolio modern */
/* Portfolio attractive */
/* Portfolio simple */
/* Portfolio clean */
/* Portfolio clean */
/* Portfolio and gallery translate animation */
 .gallery-box {
  overflow: hidden;
  will-change: transform;
}
/* Portfolio pagination */
/* Grid loading */
@keyframes spin {
  to {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
/* Portfolio minimal */
/* Horizontal portfolio */
/* ===================================
   16. Shop
====================================== */
/* Categories style 01 */
/* Categories style 02 */
/* Categories style 03 */
/* Shop boxed */
/* Shop modern */
/* Shop sidebar */
/* Toolbar wrapper */
/* Shop lable */
/* Product detail */
/* Single product thumb vertical */
/* Shop color */
/* Shop size */
/* Shop quantity  */
/* Cart */
/* Checkout */
/* Minicart */
/* Shop category style 02 */
/* ===================================
   17. Footer
====================================== */