@import 'https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;600;700;800;900&family=Roboto:wght@100;300;400;500;700;900&display=swap';

:root {
    --bs-black: rgba(1, 25, 63, 0.2);
    --body-font: 'Roboto', sans-serif;
    --heading-font: 'Raleway', sans-serif;
    --theme-color: #ed2d34;
    --theme-bg-light: #F9F9F9;
    --body-text-color: #757F95;
    --color-white: #ffffff;
    --color-dark: #222;
    --hero-overlay-color: #01060F;
    --slider-arrow-bg: rgba(255, 255, 255, 0.2);
    --box-shadow: 0 0 40px 5px rgb(0 0 0 / 5%);
    --box-shadow2: 0 0 15px rgba(0, 0, 0, 0.17);
    --transition: all .5s ease-in-out;
    --transition2: all .3s ease-in-out;
    --border-info-color: rgba(0, 0, 0, 0.08);
    --border-info-color2: rgba(0, 0, 0, 0.05);
    --border-white-color: rgba(255, 255, 255, 0.08);
    --border-white-color2: rgba(255, 255, 255, 0.05);
    --footer-bg: var(--color-dark);
    --footer-bg2: #001333;
}
body { font-family: var(--body-font); color: var(--body-text-color); line-height: 1.8}

a { color: var(--color-dark); display: inline-block }
a, a:active, a:focus, a:hover { outline: none; transition: all .3s ease-out 0s; text-decoration: none }
a:hover { color: var(--theme-color); }
ul { margin: 0; padding: 0 }
li { list-style: none }
h1, h2, h3, h4, h5, h6 { color: var(--color-dark); font-family: var(--heading-font); margin: 0; font-weight: 700; line-height: 1.2 }
h1 { font-size: 2.500em }
h2 { font-size: 2.125em }
h3 { font-size: 1.750em }
h4 { font-size: 1.375em }
h5 { font-size: 1.125em }
h6 { font-size: 1em }
p { margin: 0 }
.img, img { max-width: 100%; transition: all .3s ease-out 0s; height: auto }
label { color: #999; cursor: pointer; font-weight: 400 }
::selection { background: #555; color: var(--color-white); text-shadow: none }
*::placeholder { color: #999; font-size: 1em; opacity: 1 }
.preloader { position: fixed; width: 100%; height: 100%; background: var(--color-white); top: 0; left: 0; z-index: 9999; display: flex; align-items: center; justify-content: center }
.loader-ripple { display: inline-block; position: relative; width: 5.000em; height: 5.000em }
.loader-ripple div { position: absolute; border: 4px solid var(--theme-color); opacity: 1; border-radius: 50%; animation: loader-ripple 1s cubic-bezier(0, .2, .8, 1) infinite }
.loader-ripple div:nth-child(2) { animation-delay: -.5s }
@keyframes loader-ripple { 0% { top: 2.250em; left: 2.250em; width: 0; height: 0; opacity: 1 } 100% { top: 0; left: 0; width: 4.500em; height: 4.500em; opacity: 0 } }
@keyframes slideInFadeInRight { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } }
@keyframes slideOutFadeOutRight { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(100%); } }
#sidebarContact { transition: transform 0.5s, opacity 0.5s; transform: translateX(100%); opacity: 0; }
#sidebarContact.show { transform: translateX(0); opacity: 1; }
.bg { background: var(--theme-bg-light); }
.site-title { font-weight: 800; text-transform: capitalize; font-size: 2.750em; color: var(--color-dark); margin-bottom: 0 }
.site-title span, .site-theme-color, a.site-theme-color { color: var(--theme-color) }
a.site-theme-color:hover { color: var(--color-dark); }
a.site-theme-color2 { color: var(--color-white); }
a.site-theme-color2:hover { color: var(--theme-color); }
.theme-btn { font-family: 'Raleway', sans-serif; display: inline-flex; align-items: center; color: var(--color-white); padding: 0.750em 1.375em; transition: all .5s; position: relative; border-radius: 0; font-weight: 700; text-align: center; overflow: hidden; border: none; background: var(--theme-color); box-shadow: var(--box-shadow); z-index: 1 }
.theme-btn:hover { color: var(--color-white) }
.theme-btn::before { content: ""; position: absolute; height: 100%; width: 100%; left: 0; top: 0; background: var(--color-dark); transform-style: preserve-3d; transform: scale(1, 0); transition: .5s ease; z-index: -1 }
.theme-btn:hover::before { transform-origin: center center; transform: scale(1) }
.theme-btn2 { background: var(--color-white); color: var(--theme-color) }
.theme-btn2.active, .theme-btn2::before { background: var(--theme-color) }
.theme-btn2.active, .theme-btn2:hover { color: var(--color-white) }
.theme-btn2.active::before { transform-origin: center center; transform: scale(1); }
#scroll-top { position: fixed; bottom: -1.250em; right: 1.875em; width: 3.125em; height: 3.125em; line-height: 3.125em; font-size: 1.250em; text-align: center; border: none; border-radius: 3.125em; outline: none; color: var(--color-white); background-color: var(--theme-color); box-shadow: var(--box-shadow2); cursor: pointer; transition: var(--transition); opacity: 0; visibility: hidden; z-index: 99; }
#scroll-top.active { opacity: 1; visibility: visible; bottom: 1.250em; }
@media all and (min-width: 768px) and (max-width:1199px) { 
    #scroll-top.active { bottom: 6.250em; }
 }

.navbar {background: 0 0;padding-top: 0;padding-bottom: 0;border-top: 3px solid var(--theme-color);transition: var(--transition);z-index: 999}
.navbar.fixed-top {background: var(--color-white);box-shadow: var(--box-shadow2);animation: slide-down .7s; padding-right: 0px;}
.custom-nav {padding-left: 15px;padding-right: 25px;background: var(--color-white);position: relative;z-index: 1}
@keyframes slide-down { 0% { transform: translateY(-100%) }
 100% { transform: translateY(0) }
 }
.custom-nav::before {content: "";position: absolute;left: 0;top: 0;bottom: 0px;width: 22.625em;background: var(--theme-color);z-index: -1}
.custom-nav::after {content: "";position: absolute;width: 0;height: 0;border: 8px solid var(--theme-color);border-top-color: transparent;border-right-color: transparent;left: 22.625em;bottom: 0px;z-index: -1}
.navbar .navbar-brand .logo-display {display: block}
.navbar .navbar-toggler:focus {outline: none;box-shadow: none}
.navbar-toggler-mobile-icon {display: inline-block;width: inherit;height: inherit}
.navbar-brand {margin-right: 0}
.navbar-brand img {width: 16.750em}
.navbar .dropdown-toggle::after {display: inline-block;margin-left: 5px;vertical-align: baseline;font-family: 'bootstrap-icons';content: "\F282";font-weight: 600;border: none;font-size: 0.875em}

@media all and (min-width: 992px) {
    .navbar .nav-item .nav-link {margin-right: 1.375em;padding: 1.875em 0;font-size: 1em;font-weight: 600;color: var(--color-dark);text-transform: capitalize}
    .navbar .nav-item:last-child .nav-link {margin-right: 0}
    
    .navbar .nav-item .dropdown-menu {display: block;opacity: 0;visibility: hidden;transition: .3s;margin-top: 0;border: none;left: -1em;border-radius: 0;background: var(--color-white);width: 21.250em;box-shadow: var(--box-shadow)}
    .navbar .nav-item .dropdown-menu li {border-bottom: 1px solid var(--border-info-color)}
    .navbar .nav-item .dropdown-menu li:last-child {margin-bottom: 0;border-bottom: none}
    .navbar .nav-item .dropdown-menu .dropdown-item {font-size: 1em;padding: 8px 25px;font-weight: 500;color: var(--color-dark);position: relative;overflow: hidden;text-transform: capitalize;transition: all .3s ease-in-out}
    .navbar .nav-item .dropdown-menu .dropdown-item:hover {background: 0 0;color: var(--theme-color);padding-left: 32px}
    .navbar .nav-item .dropdown-menu .dropdown-item::before {content: "//";position: absolute;left: 15px;top: 8px;color: var(--theme-color);opacity: 0;visibility: hidden;transition: var(--transition);z-index: -1}
    .navbar .nav-item .dropdown-menu .dropdown-item:hover::before {opacity: 1;visibility: visible;}
    .navbar .nav-item .nav-link {position: relative}
    .navbar .nav-item:hover .dropdown-menu {transition: .3s;opacity: 1;visibility: visible;top: 100%;transform: rotateX(0deg)}
    .navbar .dropdown-menu-end {right: 0;left: auto}
    .navbar .dropdown-menu.fade-down {top: 80%;transform: rotateX(-75deg);transform-origin: 0% 0%}
    .navbar #main_nav {justify-content: flex-end}
    .nav-right {display: flex;align-items: center;justify-content: center;gap: 1.250em;margin-left: 2.750em}
    .nav-right-link {position: relative;font-size: 1.250em;color: var(--color-dark);transition: var(--transition)}
    .nav-right-link:hover {color: var(--theme-color) !important}
    .nav-right .sidebar-btn .nav-right-link {border: none;background: 0 0;color: var(--color-dark);font-size: 28px;padding-right: 0}
    .mobile-menu-right {display: none}
}
@media all and (max-width: 991px) {
    .navbar {top: 0;right: 0;left: 0;position: fixed}
    .navbar-brand {padding-left: 10px}
    .navbar-brand img {width: 6.875em}
    .custom-nav::before {width: 182px}
    .custom-nav::after {left: 181px}
    .navbar-collapse {max-height: 21.250em;overflow: hidden;overflow-y: auto;padding: 0 1.250em;background-color: var(--color-white)}
    .dropdown-toggle::after {float: right}
    .navbar .nav-item .nav-link {color: var(--color-dark);font-weight: 700;transition: var(--transition)}
    .navbar-toggler {padding: 0;border: none}
    .mobile-menu-right {display: flex;align-items: center;gap: 1.250em}
    .mobile-menu-right .nav-right-link {background: 0 0;border: none;font-size: 1.250em;color: var(--color-dark)}
    .mobile-menu-right .nav-right-link:hover {color: var(--theme-color)}
    .navbar-toggler-mobile-icon { font-size: 25px; color: var(--color-dark); font-weight: 500 }
    .navbar .dropdown-menu { border-radius: 0 }
}
.navbar .nav-item .nav-link:hover, .navbar .nav-item .nav-link.active {color: var(--theme-color) !important}

.navbar .nav-item .dropdown-submenu { position: relative }
.navbar .nav-item .dropdown-submenu .dropdown-menu::before { display: none }
.navbar .nav-item .dropdown-submenu a::after { transform: rotate(-90deg); position: absolute; right: 15px; top: 10px; font-weight: 600 }
.navbar .nav-item .dropdown-submenu a:hover { background: 0 0; color: var(--color-white) }
.navbar .nav-item .dropdown-submenu .dropdown-menu { top: 120%; left: 100%; opacity: 0; visibility: hidden }
.navbar .nav-item .dropdown-submenu:hover .dropdown-menu { top: 0; opacity: 1; visibility: visible }

.main {margin-top: -6.6rem}
.hero-section {position: relative}
.hero-single {padding-top: 23.125em;padding-bottom: 170px;background-position: center !important;background-size: cover !important;background-repeat: no-repeat !important;display: flex;align-items: center;justify-content: center;position: relative;z-index: 1}
.hero-single::before {content: "";position: absolute;width: 100%;height: 100%;left: -.5px;top: 0;background: linear-gradient(to bottom right, rgba(1, 25, 63, 1) 20%, rgba(1, 25, 63, 0) 100%);opacity: .85;z-index: -1}


.hero-single .hero-content {height: 100%}
.hero-single .hero-content .hero-title {color: var(--color-white);font-size: 65px;font-weight: 800; ;}
.hero-single .hero-content .hero-title span {color: var(--theme-color)}
.hero-single .hero-content .hero-sub-title {display: inline-block;color: var(--theme-color);font-size: 1.250em;letter-spacing: 6px;font-weight: 800;position: relative;text-transform: uppercase}
.hero-single .hero-content p {color: var(--color-white);line-height: 1.875em;font-weight: 400;margin-bottom: 1.250em}
.hero-single .hero-content .hero-btn {gap: 1rem;display: flex;margin-top: 35px;justify-content: start}
.hero-single .hero-img::before {content: "";position: absolute;width: 500px;height: 500px;background: var(--theme-color);right: 100px;bottom: 0;border-radius: 50%;filter: blur(13.125em);z-index: -1}
.hero-single .hero-img {position: absolute;right: 100px;bottom: 11.250em;width: 50%;z-index: -1}

.feature-area {position: relative;z-index: 1}
.feature-item {padding: 1.875em 1em;position: relative; margin-bottom: .5em;box-shadow: var(--box-shadow);transition: var(--transition);z-index: 1}
.feature-item:hover {transform: translateY(-10px)}
.feature-item::before {content: "";position: absolute;left: 0;top: 0;width: 100%;height: 0;border-radius: var(--bs-border-radius) !important;background: var(--color-dark);transition: var(--transition);z-index: -1}
.feature-item.active::before,.feature-item:hover::before {height: 100%}
.feature-item::after {content: "";position: absolute;right: 1.250em;top: 1.250em;width: 70px;height: 70px;border: 3px solid var(--theme-color);border-left: none;border-bottom: none;transition: var(--transition);z-index: -1}
.feature-item:hover::after { height: 100%; width: 6.250em; height: 6.250em }
.feature-icon {width: 5.625em;height: 5.625em;line-height: 7.813em;text-align: center;background: var(--theme-color);margin-bottom: 1em;border-radius: 50%;position: relative;transition: var(--transition)}
.feature-item h3 {font-size: 1.500em;margin-bottom: 1em; transition: var(--transition); }
.feature-item:hover .feature-icon { transform: rotateY(360deg) }
.feature-item:hover h3, .feature-item:hover p, .feature-item.active h3,.feature-item.active p {color: var(--color-white)}

.cta-area { position: relative; margin-bottom: -7.500em; z-index: 2 }
.cta-wrapper {background-repeat: no-repeat;background-position: center;background-size: cover;position: relative;margin-top: -100px;padding: 40px;border-radius: 0;z-index: 1}
.cta-wrapper::before {content: "";position: absolute;background: var(--theme-color);border-radius: var(--bs-border-radius) !important;width: 100%;height: 100%;left: 0;top: 0;opacity: .85;z-index: -1}
.cta-text h1 {color: var(--color-white);font-size: 2.750em;text-transform: capitalize;margin-bottom: 15px}
.cta-text p {color: var(--color-white)}
.cta-btn .theme-btn {background: var(--color-white);color: var(--theme-color)}

.footer-area { background: var(--footer-bg); position: relative; z-index: 1 }
.footer-area::before, .footer-area::after { content: ""; position: absolute; width: 30%; height: 3.125em; top: -1.875em; z-index: -1 }
.footer-area::before { background: var(--footer-bg); clip-path: polygon(0 0, 85% 0%, 100% 100%, 0% 100%); left: 0; }
.footer-area::after { background: var(--theme-color); clip-path: polygon(0 0, 100% 0, 100% 100%, 10% 100%); right: 0; }
.footer-widget {position: relative;z-index: 1}
.footer-logo img {width: 23.125em;margin-bottom: 10px}
.footer-widget-title {color: var(--color-white);position: relative;padding-bottom: 1.250em;margin-bottom: 1.875em;font-size: 21px;z-index: 1}
.footer-widget-title::before {position: absolute;content: '';z-index: -1;width: 90px;height: 2px;background: rgba(255, 255, 255, .2);bottom: 0;left: 0}
.footer-widget-title::after {position: absolute;content: '';z-index: -1;width: 1.875em;height: 2px;background-color: var(--theme-color);bottom: 0;left: 18px}


@keyframes fadeInRight {
    0% { opacity: 0; transform: translateX(20px) }
    100% { opacity: 1; transform: translateX(0) }
}
.fadeInRight { animation-name: fadeInRight }

@keyframes fadeInUp {
    0% { opacity: 0; transform: translateY(20px) }
    100% { opacity: 1; transform: translateY(0) }
}

.fadeInUp { animation-name: fadeInUp }

.rounded-top-start { border-top-left-radius: var(--bs-border-radius) !important; }
.theme-btn i.bi-arrow-right { transition: var(--transition2) }
.theme-btn:hover i.bi-arrow-right { transform: translateX(5px); }

.breadcrumb-title { font-size: 2.5em; color: var(--color-white); margin-bottom: 0.625em; }
.breadcrumb-menu { position: relative; z-index: 1; }
.breadcrumb-menu li { position: relative; display: inline-block; margin-left: 1.5625em; color: var(--color-white); font-weight: 500; }
.breadcrumb-menu li::before { content: '\F280'; font-family: 'bootstrap-icons'; position: absolute; right: -1.3125em; top: 0.0625em; font-size: 1em; color: var(--color-white); }
.breadcrumb-menu li:first-child { margin-left: 0; }
.breadcrumb-menu li:last-child::before { display: none; }
.breadcrumb-menu a { color: var(--color-white); transition: var(--transition) }
.breadcrumb-menu a:hover, .breadcrumb-menu li.active { color: var(--theme-color); }

@media all and (max-width: 991px) {
    .copyright .footer-menu {float: left;margin-top: 1.250em;text-align: left}
    .copyright .footer-menu li {margin-left: 0;margin-right: 15px}
    .hero-small { padding-top: 12.5em; }
    .navbar .nav-item .dropdown-submenu .dropdown-menu { margin: 0 17px }
    .navbar .nav-item .dropdown-submenu .dropdown-menu { opacity: unset; visibility: unset }
    .navbar .nav-item .dropdown-submenu a::after { top: 4px }
    .navbar .nav-item .dropdown-submenu a:hover { color: var(--theme-color) } 

}
@media all and (max-width: 767px) {
    .copyright::before,.copyright::after {display: none}
    .copyright .copyright-text a {color: var(--theme-color)}
}
@media all and (max-width: 1199px) {
    .feature-area {
        margin-top: -1.250em
    }
}