/* CSS Document */
/** Importing necessary  Styles. **/
/*----- Fonts ----*/
/*----Bootstrap css ----- */
@import url('../vendor/bootstrap/css/bootstrap.min.css');
/*---- Navbar Css------*/
@import url('navbar.css?v=3');
/*----Framework css-----*/
@import url('framework.css');
/*----------- Fancybox css -------*/
@import url('../vendor/fancybox/dist/jquery.fancybox.min.css');
/*----Animate css----*/
@import url('animate.min.css');
@import url('custom-animation.css');
/*----- Select Css ------*/
@import url('../vendor/selectize.js/selectize.css');
/*-------- AOS css ------*/
@import url('../vendor/aos-next/dist/aos.css');
/*------- Phone Number Selector -------*/
@import url('../vendor/intl-tel/build/css/intlTelInput.css');
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,400&display=swap');

/*** 
====================================================================
  Loading Transition
====================================================================

 ***/
.ctn-preloader {
  align-items: center;
  -webkit-align-items: center;
  display: flex;
  display: -ms-flexbox;
  height: 100%;
  justify-content: center;
  -webkit-justify-content: center;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 999999;
  background: #fff;
}
@keyframes spinner {
  to {
    transform: rotateZ(360deg);
  }
}
@keyframes letters-loading {
  0%,
  75%,
  100% {
    opacity: 0;
    transform: rotateY(-90deg);
  }

  25%,
  50% {
    opacity: 1;
    transform: rotateY(0deg);
  }
}
/*^^^^^^^^^^^^^^^^^^^^ Scroll Top ^^^^^^^^^^^^^^^^^^^^^*/
.scroll-top {
  width:35px;
  height:35px;
  line-height: 35px;
  position: fixed;
  bottom: 20px;
  right: 5px;
  z-index: 99;
  text-align: center;
  color: #fff;
  font-size: 25px;
  cursor: pointer;
  border-radius: 50%;
  background: var(--orange);
  display: none;
  transition: all 0.3s ease-in-out;
}
.scroll-top:after {
  position: absolute;
  z-index: -1;
  content: '';
  top: 100%;
  left: 5%;
  height: 10px;
  width: 90%;
  opacity: 1;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 80%);
}
/*^^^^^^^^^^^^^^^^^^^^ Global Prefix ^^^^^^^^^^^^^^^^^^^^^*/

:root {
  --text-color   : #282828;
  --heading      : #000;
  --orange         : #e35026;
  --light-orange   : #f4813c;

}
::selection {
  background-color: #2a2a2a;
  color: #fff;
}
body {
  font-family: 'Ubuntu', sans-serif;
  font-weight: normal;
  font-size: 20px;
  position: relative;
  line-height: 1.66em;
  color: var(--text-color);
}
.main-page-wrapper {overflow-x:hidden;}
.h1,h1,.h2,h2,.h3,h3,.h4,h4,.h5,h5,.h6,h6 {color: var(--heading); font-weight: normal;}
.h1,h1 {font-size: 100px;}
.h2,h2 {font-size: 52px;}
.h3,h3 {font-size: 36px;}
.h4,h4 {font-size: 24px; }
a {color: var(--orange); transition: all 0.2s ease-out;}
a:hover {color: var(--heading);}
::-webkit-input-placeholder {color: rgba(0, 0, 0, 0.6);}
:-ms-input-placeholder { color: rgba(0, 0, 0, 0.6);}
::placeholder {color: rgba(0, 0, 0, 0.6);}
.dark-bg :-ms-input-placeholder { color: rgba(255, 255, 255, 0.5);}
.dark-style :-ms-input-placeholder { color: rgba(255, 255, 255, 0.5);}
.style-none {list-style: none; padding-left: 0; margin-bottom: 0;}
.text-lg {font-size: 24px; line-height: 1.7em;}
.box-layout {padding-left: 55px; padding-right: 55px;}
.border-top {border-top: 1px solid rgba(0, 0, 0, 0.08)!important;}
.border-left {border-left: 1px solid rgba(0, 0, 0, 0.08)!important;}
.title-style-one .title {
  font-weight: normal;
  font-size: 60px;
  line-height: 1.16em;
  margin-bottom: 0;
}
.title-style-three .title {
  
  font-weight: normal;
  font-size: 52px;
  margin-bottom: 0;
}
.title-style-three .title span {
  color: var(--orange); 
  position: relative;
  display: inline-block;
}

.title-style-nine .title {
    font-size: 72px;
    line-height: 1.22em;
    letter-spacing: -1px;
    margin-bottom: 0
}

.title-style-nine.white-vr .title {
    color: #fff;
}

body .front-btn-seven {
  
  font-size: 14px;
  letter-spacing: 2px;
  color: #fff;
  padding: 0 33px;
  font-weight: 600;
  text-align: center;
  line-height: 55px;
  background: var(--orange);
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
  border: 0;
  border-radius: 5px;
}
body .front-btn-seven:hover {background: #222;}

body .front-btn-seven.bordered {border: 2px solid #fff;}
body .front-btn-seven.bordered:hover {border: 2px solid #222;}

/*^^^^^^^^^^^^^^^^^^^^^  Menu ^^^^^^^^^^^^^^^^^^^^^^^^*/
.main-menu {
  position: fixed;
  z-index: 99;
  top:0;
  left:0;
  right: 0;
  padding: 10px 65px;
  transition: all 0.4s ease-out;
  background: #fff;
}
.main-menu.sticky-menu.fixed {
  z-index: 990;
  padding-top: 0px; 
  padding-bottom: 0px;
  background: #fff;
  box-shadow: 0 13px 35px -12px rgba(35,35,35,0.1);
}
.main-menu .inner-content {position: relative;}
.main-menu .navbar,.main-menu .mega-dropdown {position: static;}
.white-vr .navbar .navbar-nav .nav-link,
.menu-one.white-vr .right-widget .login-btn span {color: #fff;}
.main-menu .mobile-content .address-block .title {
  
  font-size: 18px;
  margin-bottom: 15px;
}
.main-menu .mobile-content .address-block p {
  font-size: 16px;
  line-height: 1.6em;
  color: var(--heading);
}
.main-menu .mobile-content .address-block p a {font-size: 20px; color: var(--orange); margin-top: 3px;}
.main-menu .mobile-content .address-block p a:hover {text-decoration: underline;}
.front-search-form form :-ms-input-placeholder { color: rgba(255, 255, 255, 0.5);}
.hero-banner-one form :-ms-input-placeholder { /* Internet Explorer 10-11 */color: #0B0B0B;}
@keyframes ripple {
  0% {
    box-shadow: 0 0 0 .1rem rgba(0,0,0, 0.08);
  }
  100% {
    box-shadow: 0 0 0 3rem rgba(0,0,0, 0);
  }
}

@-webkit-keyframes fadeInUpSD {
  0% {
    opacity: 0;
    -webkit-transform: translateY(100px);
    transform: translateY(100px);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInUpSD {
  0% {
    opacity: 0;
    -webkit-transform: translateX(100px);
    transform: translateX(100px);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.footer-section .newsletter form :-ms-input-placeholder {color: rgba(0, 0, 0, 0.5);}
.footer-section.dark-footer .newsletter form :-ms-input-placeholder {color: rgba(255,255,255, 0.5);}
.hero-banner-five form :-ms-input-placeholder { /* Internet Explorer 10-11 */color: #0B0B0B;}
.breadcrumb-item a,
.breadcrumb-item {
  font-size: 16px;
  color: #000;
}
.breadcrumb-item.active {}
.breadcrumb-item+.breadcrumb-item::before {
  content: "\f054";
  font-family: Font Awesome\ 6 Pro;
  display: inline-block;
  font-weight: 600;
}
.breadcrumb-item a:hover {text-decoration: underline;}


/*^^^^^^^^^^^^^^^^^^^^^Main content  ^^^^^^^^^^^^^^^^^^^^^^^^*/
.main-content-wrap  {}
.main-content-wrap  p {
  font-size: 18px;
  line-height: 32px;
  margin-bottom: 20px;
}
.main-content-wrap ul li {font-size: 18px;}
@keyframes rippleTwo {
  0% {
    box-shadow: 0 0 0 .1rem rgba(210,0,3, 0.1);
  }
  100% {
    box-shadow: 0 0 0 4rem rgba(210,0,3, 0);
  }
}
.dark-layout :-ms-input-placeholder { color: rgba(255, 255, 255, 0.8);}
.cart-section .cart-footer .coupon-form :-ms-input-placeholder {color: #c4c4c4;}
.checkout-form :-ms-input-placeholder {color: #1a1a1a; }
.subscribe-section-one .subscribe-form-two form :-ms-input-placeholder {color: rgba(0, 0, 0, 0.5);}
.subscribe-section-three .subscribe-form form :-ms-input-placeholder {color: rgba(0, 0, 0, 0.5);}




/*^^^^^^^^^^^^^^^^^^^^^ Blog Section One ^^^^^^^^^^^^^^^^^^^^^^^^*/
.blog-meta-one {
  position: relative; 
  z-index: 1;
  padding-top: 75px;
  padding-bottom: 145px;
  border-bottom: 2px solid var(--heading);
  width: 100%;
}
.blog-meta-one.top-border {border-top: 2px solid var(--heading);}
.blog-meta-one.feature-post {
  background: #F6F6F6;
  padding: 75px 50px 65px;
  border-bottom-color: #F6F6F6;
  border-radius: 20px;
}
.blog-meta-one.feature-post .post-footer {left: 50px; right: 50px;}
.blog-meta-one .tag {
  
  display: inline-block;
  line-height: 27px;
  border-radius: 20px;
  letter-spacing: 1px;
  background: var(--heading);
  color: #fff;
  font-size: 11px;
  text-transform: uppercase;
  padding: 0 20px;
  transition: all 0.3s ease-in-out;
}
.blog-meta-one .tag:hover {box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);}
.blog-meta-one .title {
  font-size: 33px;
  line-height: 1.30em;
  color: var(--heading);
  display: block;
}
.blog-meta-one:hover .title {text-decoration: underline;}
.blog-meta-one .post-info { font-size: 16px; color: var(--heading);}
.blog-meta-one .post-info .date { color: #AAAAAA;}
.blog-meta-one .post-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 40px;
}
.blog-meta-one .post-footer .read-more:hover {transform: translateX(-5px);}

/*^^^^^^^^^^^^^^^^^^^^^ Block twelwe ^^^^^^^^^^^^^^^^^^^^^^^^*/


.text-block-twelve {
    position: relative;
    z-index: 1;
    background: #ffefe6;
}

.text-block-twelve .text-wrapper .video-icon {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    background: var(--heading);
    padding: 15px 16px 18px 13px;
    position: relative;
    animation: ripple 3s linear infinite
}

.text-block-twelve .text-wrapper .video-icon::before,.text-block-twelve .text-wrapper .video-icon::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    animation: inherit;
    animation-delay: 1s
}

.text-block-twelve .text-wrapper .video-icon::after {
    animation-delay: 3s;
}

.text-block-twelve .text-wrapper .meta-info-text {
    font-size: 20px;
    line-height: 1.75em;
    margin-bottom: 40px
}

.text-block-twelve .text-wrapper ul li {
    line-height: 33px;
    color: #474747;
    position: relative;
    margin-bottom: 25px;
    padding-left: 35px
}

.text-block-twelve .text-wrapper ul li:before {
    content: url(../images/icon/icon_75.svg);
    position: absolute;
    left: 0;
    top: 1px
}

.text-block-twelve .text-wrapper ul li span {
    color: #000;
    display: inline-block;
    position: relative
}

.text-block-twelve .text-wrapper ul li span:before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 5px;
    height: 2px;
    width: 100%;
    background: var(--red-one)
}

.text-block-twelve .right-img-meta {
    position: absolute;
    width: 52%;
    height: 100%;
    right: 0;
    top: 50%;
    transform: translateY(-50%)
}

.text-block-twelve .right-img-meta .main-img {
    max-height: 100%;
    min-height: 100%;
    object-fit: cover;
    object-position: top center
}

.text-block-twelve.dark-bg,.text-block-twelve.dark-bg .text-wrapper ul li {
    color: rgba(255,255,255,.7);
}

.text-block-twelve.dark-bg .text-wrapper ul li span {
    color: #fff;
}

.text-block-twelve.dark-bg .text-wrapper ul li:before {
    content: url(../images/icon/icon_97.svg)
}

.text-block-twelve .right-img-meta .video-icon {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    background: var(--red-one);
    padding: 15px 16px 18px 13px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    animation: ripple 3s linear infinite
}

.text-block-twelve .right-img-meta .video-icon::before,.text-block-twelve .right-img-meta .video-icon::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    animation: inherit;
    animation-delay: 1s
}

.text-block-twelve .right-img-meta .video-icon::after {
    animation-delay: 3s;
}

/*^^^^^^^^^^^^^^^^^^^^^ Banner three ^^^^^^^^^^^^^^^^^^^^^^^^*/
.fancy-banner-three {
    background: url(../images/media/img_39.jpg) no-repeat center;
    background-size: cover;
    position: relative
    background: #f2f2f2;
}

.fancy-banner-three.grey-bg {background: #f2f2f2;}

.fancy-banner-three.bg-white {
    background: none;
}

.fancy-banner-three.bg-white .title {
    color: var(--heading);
}

.fancy-banner-three .title {
    font-size: 60px;
    line-height: 1.16em;
    color: #222;
    margin-bottom: 0
}

.fancy-banner-three .title span {
    text-decoration: underline;
}

.fancy-banner-three .inner-content {
    padding: 110px 0;
}

.fancy-banner-three [class*="front-btn-"] {
    width: 230px;
    line-height: 68px;
    font-size: 20px;
    border-radius: 8px
}

/*^^^^^^^^^^^^^^^^^^^^^ Banner one  ^^^^^^^^^^^^^^^^^^^^^^^^*/

.fancy-banner-one {
    background-size: cover;
    position: relative
}

.fancy-banner-one .inner-content {
    padding: 125px 0;
}

.fancy-banner-one p {
    font-size: 24px;
    line-height: 1.75em;
    color: #fff;
    padding-bottom: 24px
}

.fancy-banner-one .front-btn-one {
    width: 300px;
    line-height: 75px;
    font-size: 20px;
    background: var(--heading)
}

.fancy-banner-four {padding: 20px; background: #f2f2f2; border-radius: 14px;}

/*^^^^^^^^^^^^^^^^^^^^^ Section one  ^^^^^^^^^^^^^^^^^^^^^^^^*/

.text-block-one {
    position: relative;
    z-index: 1;
   
}


.text-block-one .text-wrapper {
    padding-top: 40px;
}

.text-block-one .video-icon {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    background: var(--heading);
    padding: 17px 16px 18px 16px;
    margin-bottom: 30px;
    position: relative;
    z-index: 1;
    animation: ripple 3s linear infinite;
    color: #fff;
    transform: scale(1);
    -webkit-transform: scale(1);
    transition: 0.5s all ease;
    -webkit-transition: 0.5s all ease;
    
}
.text-block-one .video-icon:hover{
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transition: 0.5s all ease;
  -webkit-transition: 0.5s all ease;
  background: var(--orange);
}

@media screen and (max-width: 991px) {
    .text-block-one .video-icon {
        padding: 13px 16px 17px 16px;
    }
}

.text-block-one .video-icon::before,.text-block-one .video-icon::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    animation: inherit;
    animation-delay: 1s
}

.text-block-one .video-icon::after {
    animation-delay: 3s;
}

.text-block-one .video-cta {color: #fff; font-size: 13px; width: 220px; line-height: 1.5;}


.text-block-one .meta-info-text {
    padding: 45px 0 10px;
}

.text-block-one .text-wrapper h6 {
    font-family: 'gorditamedium';
    font-size: 25px;
    padding: 65px 0 12px
}

.text-block-one .meta-info-text-two {
    font-size: 22px;
    line-height: 1.85em;
    padding-right: 30px;
    margin-bottom: 0
}

.text-block-one .img-container {
    padding: 0 50px 50px 50px;
}
.text-block-one .img-container img {border-radius: 20px;}
.text-block-one .quote-wrapper {
    position: absolute;
    width: 410px;
    background: #fff;
    border-radius: 14px;
    bottom: 0;
    left: 0;
    z-index: 1;
    padding: 25px 30px 36px 48px;
    box-shadow: 0 40px 80px rgba(23,42,65,.06);
}

.text-block-one .quote-wrapper blockquote {
    font-size: 20px;
    line-height: 1.75em;
    padding-bottom: 16px
}

.text-block-one .quote-wrapper .name {
    font-size: 20px;
    margin-bottom: 0
}

.text-block-one .quote-wrapper .name span {
    font-weight: normal;
    font-size: 18px;
    color: #9C9C9C
}

.text-block-one .quote-wrapper .icon {
    position: absolute;
    right: -40px;
    bottom: -40px;
    width: 240px;
}

.text-block-one .illustration {
    animation: jumpTwo 5s infinite linear;
}

.text-block-one .video-img-box {
    position: relative;
    border-radius: 30px;
    overflow: hidden
}

.text-block-one .video-img-box .video-icon {
    background: var(--red-one);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 1
}

.text-block-one .left-img-meta {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    max-width: 45%
}

.text-block-one .left-img-meta .shape-one {
    top: -88px;
    right: -93px;
    z-index: 1;
    animation: fade-in 1.5s infinite linear
}

.text-block-one .shape-two {
    right: 5%;
    bottom: -9%;
    animation: jumpThree 5s infinite linear
}

/*^^^^^^^^^^^^^^^^^^^^^ Cards style two ^^^^^^^^^^^^^^^^^^^^^^^^*/


.card-style-two {
    border-top: 3px solid var(--orange);
    padding-top: 5px;
    margin-bottom: 40px
}

.card-style-two .icon {
    width: 55px;
    height: 55px;
    background: #F2F2F2;
    border-radius: 50%
}

.card-style-two:hover .icon img {
    transform: rotate(360deg);
}

.card-style-two .title {
    font-size: 50px;
    font-weight: 600;
    padding: 30px 0 20px;
    margin-bottom: 0;
}

.card-style-two p {
    font-size: 17px;
    margin-bottom: 0;
}

/*^^^^^^^^^^^^^^^^^^^^^ Accordion ^^^^^^^^^^^^^^^^^^^^^^^^*/

.accordion-style-two .accordion-tag {
    font-size: 15px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #A5A5A5;
    margin-bottom: 35px
}

.accordion-style-two .accordion-item {
    border: none;
    border-top: 1px solid rgba(0,0,0,.1);
    border-radius: 0
}

.accordion-style-two .accordion-item:last-child {
    border-bottom: 1px solid rgba(0,0,0,.1);
}

.accordion-style-two .accordion-button {
    font-size: 22px;
    min-height: 1.75em;
    font-weight: 600;
    padding: 20px 10px 20px 0;
    box-shadow: none;
    border-radius: 0;
    color: var(--heading);
    background: transparent;
    transition: all .3s ease-in-out
}

.accordion-style-two .accordion-button:not(.collapsed) {
    padding-bottom: 15px;
}

.accordion-style-two .accordion-body {
    padding: 0 50px 25px 0;
}

.accordion-style-two .accordion-body p {
    font-size: 20px;
    line-height: 1.8em;
    margin-bottom: 0;
}

.accordion-style-two .accordion-button::after {
    content: '+';
    font-size: 28px;
    background-image: none;
    width: auto;
    height: auto
}

.accordion-style-two .accordion-button:not(.collapsed)::after {
    content: "-";
}