/* ===================================
    Crafto - Branding agency
====================================== */
/* font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
/* variable */
:root {     
    --base-color: #e99022; 
    --medium-gray: #7b7a7a;
    --dark-gray: #1d1d1d;  
    --charcoal-blue: #232323;
    --alt-font: 'Space Grotesk', sans-serif;
    --primary-font: 'Inter', sans-serif;
}
body {
    line-height: 30px;
}
a:hover {
    color: var(--dark-gray);
}
h1, .h1 {
    line-height: 4rem;
}
/* A few headings had their tag changed (h1<->h2) purely for document-outline/SEO
   reasons (exactly one real h1 per page) without wanting the rendered size to
   change. These reproduce Bootstrap's own h1/h2 font-size rules verbatim so the
   visual result stays identical regardless of which tag is actually used. */
.heading-size-h1 {
    font-size: calc(1.375rem + 1.5vw);
}
@media (min-width: 1200px) {
    .heading-size-h1 {
        font-size: 2.5rem;
    }
}
.heading-size-h2 {
    font-size: calc(1.325rem + .9vw);
}
@media (min-width: 1200px) {
    .heading-size-h2 {
        font-size: 2rem;
    }
}
h3, .h3 { 
    line-height: 2.813rem;
}
h4 {
    line-height: 2.6rem;
}
/* header */
.navbar .navbar-nav .nav-link {
    font-size: 18px;
    font-weight: 600;
}
header .header-button .btn.btn-switch-text.btn-medium > span {
    padding: 12px 22px;
}
header .navbar-brand img {
    max-height: 60px;
}
/* The bigger logo above made the header taller (120px expanded nav / 104px
   collapsed-hamburger nav, up from the template's original 96px / 76px), but
   every page pushes its first section below the header using top-space-margin
   (and full-screen hero sections size themselves off the same number), which
   still assumed the old, shorter header. Without this, page content renders
   partly behind the header. Values measured directly off the rendered header. */
.top-space-margin {
    margin-top: 120px;
}
.top-space-padding {
    padding-top: 120px;
}
.full-screen.top-space-margin {
    height: calc(100vh - 120px);
}
@media (max-width: 991px) {
    .top-space-margin {
        margin-top: 104px;
    }
    .top-space-padding {
        padding-top: 104px;
    }
    .full-screen.top-space-margin {
        height: calc(100vh - 104px);
    }
}
.navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li a {
    font-size: 17px;
    font-weight: 500;
    color: var(--dark-gray) !important;
}
.navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li a:hover {
    background-color: #f6f4f3;
}
.navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li a i {
    font-size: 30px;
    width: 35px;
}
/*margin*/
.ms-100px {
    margin-left: 100px;
}
.ms-80px {
    margin-left: 80px;
}
.mb-minus-50px {
    margin-bottom: -50px;
}
/* btn */
.btn {
    text-transform: none;
    letter-spacing: 0;
}
.btn.btn-extra-large {
    font-size: 16px;
    padding: 16px 32px;
}
.btn.btn-large {
    font-size: 15px;
    padding: 15px 30px;
}
.btn.btn-switch-text.btn-large > span {
    padding: 15px 30px;
}
.btn-gradient-fuel-yellow-blue {
    background-image: linear-gradient(to right, #d18215, #3797a1, #d18215);
    background-size: 200% auto;
    color: var(--white);
}
/* left right top bottom */
.left-minus-45 {
    left: -45%;
}
.bottom-minus-200px {
    bottom: -200px;
}
.one-half-screen {
  height: 550px !important;
}
.swiper-pagination-progress .swiper-progress {
    background-color: var(--dark-gray); 
}
.magic-drag-cursor #ball-cursor:before {
    font-weight: 500;
}
/* text gradient color */
.text-gradient-base-color {
    background-image: linear-gradient(to right, #e97522 0%, #1ea3b1 100%); 
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.text-orange{
    color: #e97522;
}
.text-blue{
    color: #1ea3b1;
}
/* bg gradient color */
.bg-gradient-top-very-light-gray { 
    background-image:linear-gradient(to right, #fbf3e9, #f9f4eb, #f4f4f0, #f2f4f2, #eff4f4);
}
.bg-linen {
    background: #f6f4f3;
}
.bg-gradient-orange-transparent {
    background: linear-gradient(to right, rgba(233, 117, 34, 1.0) 10%, rgba(255, 255, 255, 0.0) 95%);
}
.bg-gradient-blue-transparent {
    background: linear-gradient(to right, rgba(30, 163, 177, 1.0) 10%, rgba(255, 255, 255, 0.0) 95%);
}
/* blog only text */
.blog-only-text .card-body:after {
    display: none;
}
/* social icon style 06 */
.social-icon-style-06 li {
    position: relative;
}
.social-icon-style-06 li:before {
    width: 6px;
    height: 6px;
    border-radius: 100%;
    background-color: var(--medium-gray);
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: -15px;
    transform: translateY(-50%);
    opacity: .5;
}
.social-icon-style-06 li:last-child:before {
    display: none;
}
.google-maps-link a:hover {
    color: var(--white);
}
/* footer */
footer ul li {
    margin-bottom: 0;
    line-height: 28px;
}
footer a:hover {
    color: var(--white);
}
footer .footer-logo img {
    max-height: 55px;
}
/* z-index */
.z-index-99 {
    z-index: 99; 
}
@media (min-width: 992px) {
    .navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li a {
        padding: 20px 30px;
    }
    .navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu {
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        width: 285px;
    }
}
@media (max-width: 1199px) {
    .left-minus-45 {
        left: -78%;
    }
    .lg-ms-70px {
        margin-left: 70px;
    }
    .lg-bg-transparent {
        background-color: transparent;
    }
    .one-half-screen {
        height: auto !important;
    }
}
@media (max-width: 991px) {
    [data-mobile-nav-style=modern] .navbar-modern-inner .navbar-nav .nav-item .dropdown-menu a i {
        font-size: 19px;
        vertical-align: middle;
        color: var(--white);
    }
    .md-top-auto {
        top: auto;
    }
}