﻿@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('http://fonts.cdnfonts.com/css/bahnschrift');
html { scroll-behavior: smooth; }
body { font-family: "Lexend", sans-serif; color: #474b50; position: relative; }
html, body { overflow-x: hidden; width: 100%; }
h1, h2, h3, h4, h5, h6, .font-primary { font-family: 'Lexend', sans-serif; }
h1 {font-size: 3.75rem;}
h2 {font-size: 1.5rem;}
h3 {font-size: 1.25rem;}
h6 {font-size: 1rem;}
p {font-size: 1.125rem;}
section {padding: 3.125rem 0;}
.text-primary { color: #f38120 !important; }
.text-secondary { color: #0c4da2 !important; }
.bg-secondary { background-color: #115bbc !important; }
.bg-primary { background-color: #f38120 !important; }
.border-primary { border-color: #f38120 !important; }
.border-secondary { border-color: #0c4da2 !important; }
.bg-gray { background-color: #dadada; }
/*.btn-outline-secondary:hover {background-color: #115bbc;color: #f1f1f1 !important;}*/
.btn-secondary:hover {background-color: #ffff !important; color: #115bbc  !important; border: 0.125rem solid #115bbc ;}
.btn-primary:hover { background-color: #ffff !important; color: #f38120 !important; border: 0.125rem solid #f38120; }
.navbar-dark { font-weight: 800 !important; color: #fff !important; }
/*.bg-main { background: url(../Content/Images/pattern\ bg.png); }*/
.bg-attachment-fixed{background-attachment:fixed!important;}
.top-38 { top: 38%; }
.writing-mode-vertical { writing-mode: vertical-rl; }
.top-25px {top: 1.563rem !important;}
.top-45px {top: 2.813rem !important}
.top-45 {top: 45% !important}
.top-100px {top: 6.25rem;}
.top-11{top:11%;}
.end-2 {right: 0.125rem;}
.left-2px {left: 0.125rem !important;}
.left-n30px {left: -1.875rem !important;}
.banner-img {background: url(../Content/Images/banner-img.png) no-repeat;/*background-position: center;*/background-size: cover; /* height: 118vh;*/padding: 1.875rem 0 6.25rem 0;}
.product-banner {background: url(../Content/Images/banner-img.png) center center /  no-repeat;background-size: cover;}
.w-8{width:8%;}
.w-15 {width: 15%;}
.top-4 { top: 4%; }
.top-60{top:60%;}
.w-45 { width: 45%; }
.w-60 { width: 60%; }
.w-75px {width: 4.688rem !important;}
.w-100px {width: 6.25rem !important;}
.h-150px {height: 9.375rem !important;}
.start-40 { left: 40%; }
.start-15 { left: 15%; }
.start-58 { left: 58%; }
.top-30 { top: 30%; }
.top-55 { top: 55%; }
.w-inherit { width: inherit !important; }
.nav-item a {border-bottom: 0.25rem solid #0c58bb}
.nav-item a {border-bottom: 0.25rem solid transparent !important;}
.nav-item a:hover {color: #f38120 !important;}
.bg-light-black { background-color: #64686b38 !important; }
.navbar-nav { background-color: #0c58bb; }
.social-media a { color: gray !important; }
/*.social-media a:hover { color: #f38120 !important; }*/
a.facebook:hover {color: #3b5998!important;}
a.youtube:hover {color: #c4302b !important;}
a.twitter:hover {color: #00acee!important;}
a.linkedin:hover {color: #0e76a8!important;}
.footer-menu .navbar-nav { background-color: #ffffff1a !important; }
/*styles by priyanka*/
/*.dotted-bg {background-image: url(../Content/Images/dotted.png), url(../Content/Images/dotted.png);background-size: 10.313rem 8rem, 9.688rem 9.063rem;background-repeat: no-repeat, no-repeat;background-position: 78% top, -3% 92%;}*/
.gradient-bg { background-image: url(../Content/Images/gradient-bg.png); background-size: 100% 45%; background-repeat: no-repeat; background-position: center; }
.gradient-bg2 { background-image: url(../Content/Images/gradient-bg2.png); no-repeat; }
.common-head {font-size: 2.875rem;}
.fw-400 { font-weight: 400; }
.fs-27 {font-size: 1.688rem;}
.line-height-35 {line-height: 2.188rem;}
.text-black { color: #000; }
.banner-img:after {top: 100%;left: 50%;border: solid transparent;content: " ";height: 0;width: 0;position: absolute;border-top-color: #0b4b9e;border-width: 1.938rem;margin-left: -1.75rem;z-index: 9;}
.h-406 {height: 25.375rem;}
.transparent-logo { background-image: url(../Content/Images/Span-enterprises-logo.png); background-size: contain; background-repeat: no-repeat; }
/*our-products*/
.banner-img1 {background: url(../Content/Images/banner-img.png) no-repeat;background-position: center bottom;background-size: auto;background-size: cover;height: 100vh;padding: 5rem 0;}
.w-45 { width: 45%; }
.list-point { list-style: none; }
.list-point li a:before {content: "";position: absolute;top: 0.813rem;left: -1.938rem;width: 1.063rem;height: 1.063rem;background-color: #f68a29;border: 0.313rem solid #fff;border-radius: 1.313rem;}
/*.fs-16px { font-size: 16px; }*/
.lh-45px {line-height: 2.813rem;}
a { text-decoration: none; color: #ffff; }
.list-point li a:hover { color: #f38120; }
.arrow:hover { color: #f38120; }
/*product page stlye*/
.product-banner { background-image: url(../Content/Images/product-banner.png); background-size: 95% 75%; background-repeat: no-repeat; background-position: top right; height: 85vh; }
.z-index-negative { z-index: -5; }
.z-index1 { z-index: 1; }
.z-index9{ z-index: 9; }
.fs-50 {font-size: 3.125rem;}
.top-42 {top: 2.625rem;}
.top-minus-62 {top: -3.875rem;}
.w-37 { width: 37%; }
.w-65 { width: 65%; }
.w-85 { width: 85%; }
.h-350 {height: 21.875rem;}
.top-90 {top: -5.625rem;}
.text-tertiary { color: #f68a2a; }
.divider:not([size]) {height: 0.125rem;}
.line-height-40 {line-height: 2.5rem !important;}
.hover-btn:hover { color: #f68a2a !important; }
/*bottom popup*/
.bottom-modal-dialog { max-width: unset !important; }
.shadow-primary {box-shadow: 0 0 0.625rem #ccc;}
.border-tertiary {border: 0.063rem solid #f1f1f1;}
.px-130 {padding-left: 8.125rem;padding-right: 8.125rem;}
.bottom-modal-dialog .rounded:hover {border: 0.063rem solid #fdc57b;background-color: #fee5af;}
.active .product {border: 0.063rem solid #fdc57b;background-color: #fee5af;color: #0a58ca;}
button.btn-close {border: 0.188rem solid #e5191a;opacity: 1;color: #e5191a;}
.fs-12px {font-size: 0.75rem !important;}
.team-gradient-bg { background-size: 100% 46% !important; background-position: 100% 46% !important; }
.dotted-bg2 {background-size: 10rem 9.688rem, 10.625rem 11rem;background-position: 90% 5%,2% 91%;}
.fs-18 {font-size: 1.125rem;}
.text-blue { color: #0c4da2; }
.blue-border {border-color: #0b4b9e!important;}
.orange-border {border-color: #f58423!important;}
.bg-tertiary { background: #f5f5f5; }
.dashed-border {border: 0.125rem dashed #dfe0e0}
.fw-600 { font-weight: 600; }
.required { color: #c92424; }
.file-drag-zone input[type=file] {opacity: 0;position: absolute;margin-left: 5.625rem;}
.px-9 { padding-left: 9rem; padding-right: 9rem; }
.fa-angle-left, .fa-angle-right {font-size: 5.625rem !important}
.w-200px {width: 12.5rem;}
.btn-primary:focus { border-color: unset; box-shadow: unset; }
.rouded-30px {border-radius: 1.875rem;}
.list-point-item { list-style: none; }
.list-point-item a { text-decoration: none; color: #171C20; }
    .list-point-item li a:before {content: "";position: absolute;top: 0.875rem;left: -1.938rem;width: 1.063rem;height: 1.063rem;background-color: #083269;border: 0.25rem solid #fff;border-radius: 1.313rem;}
.list-point-item li a:hover { color: #F38120; }
.lh-45px {line-height: 2.813rem;}
.sticky-widget { position: fixed !important;}
.list-point-item :hover { color: #f38120; }
.top-50 { top: 50%; }
.border-gray {border: 0.125rem solid #B9B3B3 !important;}
.homepage .border-gray {border: 0.063rem solid #B9B3B3 !important;}
.border-gray:focus {border: 0.125rem solid #0c4da2 !important;box-shadow: none;}
.sticky-widget .active a { color: #f38120 !important; border-bottom: 0px solid #f38120 !important; }
.active a {border-bottom: 0.25rem solid #f38120 !important;color: #f38120 !important;}
.pt-30px {padding-top: 1.875rem;}
.primary-hover:hover {background-color: #0c4da2 !important;color: #fff !important;border: 0.125rem solid #0c4da2;}
.fs-14 {font-size: 0.875rem;}
/*///////////// Animation-start ///////////// */
.animate-spin {animation-name: spin;animation-duration: 20000ms;animation-iteration-count: infinite;animation-timing-function: linear;left: -1.25rem;top: -2.125rem;}
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.z-index-9 { z-index: 9; }
/*/////////// Animation-end ////////////// */
.w-80px { width: 5rem !important; }
.w-130px { width: 8.25rem !important; }
.h-165px { height: 10.313rem !important; }
.top-70px {top: 4.375rem !important;}
.left-n4px {left: -0.25rem;}
.left-n35px {left: -2.188rem !important;}
.left-n45px {left: -2.813rem !important;}
.left-meanu:hover { color: #000000 !important; }
.right-meanu:hover { color: #000000 !important; }
.fs-25px {font-size: 1.563rem;}
.py-lg-4rem { padding-top: 4rem !important; padding-bottom: 4rem !important; }
.top-29 { top: 29% !important; }
.start-12 { left: 12% !important; }
.top-25 { top: 25% !important; }
.top-20{top:20%;}
.start-40 { left: 40%; }
.start-56 { left: 56%; }
.w-inherit { width: inherit !important; }
.shadow-blue {box-shadow: 0rem 0.125rem 1rem 0.125rem #115bbc70 !important;}
.shadow-orange {box-shadow: 0 0.125rem 1rem 0.125rem #f3812061 !important;}
.top-58px {top: 3.625rem !important;}
.bg-black-transparent {background: #093b78;}
.w-fit-content { width: fit-content; }
.shadow-gray { box-shadow: 0rem 0rem 1.5rem -0.0625rem rgb(110 110 110 / 30%) !important }
.min-100vh { min-height: calc(100vh - 7.75rem) }
label {font-size: 0.875rem;}
.pt-70px {padding-top: 4.375rem !important;}
.pt-lg-15 { padding-top: 15%!important; }
.pb-lg-15 { padding-bottom: 15% !important; }
.mobile-menu {min-height: 4.688rem;transition: all 0.5s;z-index: 997;transition: all 0.5s;background: #fff;box-shadow: 0 0.125rem 0.938rem rgba(0, 0, 0, 0.1);}
/*.mobile-menu .logo img { padding: 0; margin: 0; width: 20%; }*/
.mobile-menu .navbar { padding: 0; }
.mobile-menu .navbar ul { margin: 0; padding: 0; display: flex; list-style: none; align-items: center; }
.mobile-menu .navbar li { position: relative; }
.mobile-menu .navbar a { display: flex; align-items: center; justify-content: space-between; font-size: 0.938rem; font-weight: 600; color: #4e4039; white-space: nowrap; transition: 0.3s; }
.mobile-menu .navbar a i { font-size: 0.75rem; line-height: 0; margin-left: 0.313rem; }
.mobile-menu .navbar li:hover > a { color: #f96167; }
/*.mobile-menu .navbar .active { color: #000; border-radius: 3px; background-color: #dcfeff; }*/
.mobile-menu .mobile-nav-toggle { color: #7a6960; font-size: 1.75rem; cursor: pointer; display: none; line-height: 0; transition: 0.5s; }
.mobile-menu .mobile-nav-toggle.bi-x { color: #fff; }
@media (max-width: 991px) {
    .mobile-menu .mobile-nav-toggle { display: block; }
    .mobile-menu .navbar ul { display: none; }
}
.mobile-menu .navbar-mobile { position: fixed; overflow: hidden; top: 0; right: 0; left: 0; bottom: 0; background: rgb(0 0 0 / 37%); transition: 0.3s; }
.mobile-menu .navbar-mobile .mobile-nav-toggle { position: absolute; top: 0.938rem; right: 0.938rem; }
.mobile-menu .navbar-mobile ul { display: block; position: absolute; top: 3.438rem; left: 0.938rem; padding: 0.75rem 0; background-color: #fff; overflow-y: auto; transition: 0.3s; width:92%; }
.mobile-menu .navbar-mobile a { padding: 0.625rem 1.25rem; font-size: 0.938rem; color: #7a6960; }
.mobile-menu .navbar-mobile a.btn-primary { width: max-content; margin-top: 0.5rem; }
.mobile-menu .navbar-mobile a:hover, .navbar-mobile .active, .navbar-mobile li:hover > a { color: #3e2ecd; }
.line-height-1-2 {line-height:1.2}
.bookmark { position: relative; width: 100%; height: 95%;  }
/*::-webkit-scrollbar {
    width: 0;*/ /* Remove scrollbar space */
    /*background: transparent;*/ /* Optional: just make scrollbar invisible */
/*}*/
.w-300px {width: 18.75rem;}
.fs-12 {font-size:0.75rem !important;}
.error .error-msg::before { position: absolute; bottom: 100%; left: 0.438rem; content: ""; border-left: 0.313rem solid transparent; border-right: 0.313rem solid transparent; border-bottom: 0.5rem solid #dc3545; }
 .error-msg-social::before { position: absolute; bottom: 4%; left: -0.063rem; content: ""; border-left: 0.313rem solid transparent; border-right: 0.313rem solid #dc3545; border-bottom: 0.5rem solid #dc354500; border-top: 0.5rem solid #0000; /* height: 19px; */ /* width: 18px; */ }
.danger-bg {  background-color: rgb(255 245 246); border: solid 0.065rem #dc3545; }
.top-35px {top:2.188rem;}
.top-38px { top:2.4rem;}

.top-35{top:35%;}
.left-10px{left:0.625rem;}
.selected {color: #F38120 !important;}
.slide {width: 100vw;height: 100vh;}
#header .active a {border-bottom: unset;background-color: #f38120;color: #fff !important;border-radius: 0.313rem;}
.pb-40px{padding-bottom:2.5rem!important}
.bahnschrift-font {font-family: 'Bahnschrift', sans-serif;}
.btn-focus:focus {box-shadow: 0 0 0 0.25rem rgb(49 132 253 / 50%);}
.light-green {background-color: #e2f5ea!important;}
.header-blue {background-color: #083269!important;}
div#list-example {top: 2rem;position: relative;padding-right: 40px;}
.text-gray {color: #6c757d !important;}
.top-10{top:0.625rem;}
/*.border-end-6:after {border-right: 6px solid #f38120;content: '';position: relative;left: 25px;}*/
.h-50px{height:50px;}
.h-70px{height:70px}
.list-point li .selected:before {background-color: #fff;border: 0.313rem solid #f68a29;}
.w-14rem {width: 14.75rem;}
.h-40px{height:40px;}
.border-blue {border-color: #022858!important}
.hr-border {background: #1b79ef!important;}
.fs-3rem{font-size:3rem;}
.h-65px{height:65px;}
.mt-20 {margin-top: 20px;}
hr:not([size]) {height: 2px;}
.hover-btn:hover span{color: #f68a2a !important;}
.hover-btn:hover .fa-long-arrow-left {color: #f68a2a !important;}
.hover-btn:hover .fa-long-arrow-right {color: #f68a2a !important;}
.py-18rem {padding: 16.875rem 0 13.25rem 0;}
.py-20rem {padding: 22.875rem 0 22.25rem 0;}
.border-after-0:after{content:unset!important;}
.h-60px {height: 60px;}
.h-80px{height:80px;}
.h-75px{height:75px;}
.mt-12px{margin-top:12px!important;}
.vl {border-left: 6px solid #f68a2a; height: 41px;position: absolute;top: 68%!important;}
.timeline {margin: 0 auto;}
.timeline::after {content: '';position: absolute;width: 4px;background-color: #adb5bd;top: 0;bottom: 0;left: 50%; margin-left: -3px;}
.orange-bg {background: #fee3ab;}
.ps-5rem{padding-left:5rem!important;}
.ps-7rem {padding-left: 7rem;}
.pe-7rem {padding-right: 7rem;}
.pe-6rem{padding-right:6rem;}
.start-n65px {left: -4.063rem;}
.start-n106px {left: -6.625rem;}
.end-n110px {right: -6.875rem;}
.dot:before {content: "";background: #f38120;position: absolute;left: -2.313rem;transform: translateX(-50%);width: 0.5rem;height: 2.5rem;border: 0.188rem solid #f38120;-moz-border-radius: 50%;z-index: 9;top: 3.125rem;
}
.dot-reverse:before {left: unset;right: -2.688rem;top: 11.438rem;}
.content-box:before {position: absolute;top: 3.625rem;width: 3.5rem;height: 0.625rem;content: url(../Content/Images/connector.svg);left: 0.25rem;}
.content-box-reverse:before {right: 0.125rem;left: unset;top: 7.5rem;}
.fs-80px {font-size: 5rem;}
.bg-light-gray {background: #fcfcfc;}
.pt-7rem{padding-top:7rem;}
.pt-9rem{padding-top:9rem;}
.ps-36px{padding-left:2.3rem!important;}
.ps-2-2rem{padding-right:2.2rem;}
.wrapped-inner-content:before {left: -0.5rem;}
.wrapped-inner-content-reverse:before {right: -0.5rem;}
.bullets-start:before {content: '';position: absolute;width: 1.25rem;height: 1.25rem;right: 0;background-color: #f38120;top: -0.188rem;border-radius: 50%;z-index: 1;left: -0.125rem;margin: auto;}
.fs-2rem{font-size:2rem;}
.w-72{width:72%;}
.tiktok img:hover {content: url(../Content/Images/tiktok-original.png);}
.bottom-2px {bottom: 2px;}
.bottom-3px {bottom: 3px;}
.bg-light-gray{background-color:#f2f2f2;}
.white-border{border:15px solid #fff;}
.mb-lg-60{margin-bottom:55px;}
.w-30{width:30%;}
.gray-color {color: gray;}
i.fab.fa-instagram:hover {background-clip: text !important;background: -moz-linear-gradient(top, #e72c83 0%, #a742c6 100%);background: -webkit-linear-gradient(top, #e72c83 0%,#a742c6 100%);background: linear-gradient(to bottom, #e72c83 0%,#a742c6 100%);-webkit-background-clip: text;-moz-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;}
.mt-lg-6rem{margin-top:6rem;}
.w-lg-35{width:36%;}
.z-index-999{z-index:999!important;}
.banner-color {background-color: #093c7e!important;}
.form-select { color: #474b50; font-size: 0.875rem; }
.choose-file { font-size: 0.875rem; color: #474b50; }
.top-62 { top: 3.875rem; }
.top-85 { top: 5.313rem; }
.website-link:hover{color:#115bbc !important ; }
.arrow-link :hover{color:#115bbc !important ;}
.fs-23px{font-size:23px !important;}
.text-link:hover{color:#f38120 !important}
.join-our-team-bg {
    background: url(../Content/Images/SPAN-join-bg.jpg) no-repeat;
    background-position: center;
    background-size: cover;
    height: calc(100vh - 10rem);
    display:flex;
    align-items:center;
    justify-items: center;
}
.banner-h1 {
    /* opacity: 0.6000000238418579; */
    background: linear-gradient(90deg, rgba(0, 73, 159, 0.00) 0%, rgb(0 25 55 / 75%) 28.28%, #001d3f 50.52%, rgb(0 17 37 / 75%) 74.20%, rgba(2, 66, 142, 0.00) 100%);
    /* mix-blend-mode: multiply; */
    padding: 10px;
}
.h-100vh-2rem {height:calc(100vh - 2rem);}
.video .modal-dialog {
    max-width:fit-content !important;
    margin: 1.75rem auto;
}
.video .modal-body {line-height:0;}
.video iframe {width:1280px !important; height:720px !important}
.play-btn:hover {
    box-shadow: 0px 0px 15px 5px #fff;
    border-radius: 50%;
    transition: 0.4s;
    /* border: solid white 2px; */
}
.play-btn {
    transition: 0.4s;
    border-radius: 50%;
    font-size: 50px;
    color: #2371D8;
    /* border: solid white 2px; */
    background: #fff;
}
body.modal-open {
    overflow: hidden !important;
}
.MboxClose {
    background: rgba(0, 0, 0, 0) url(images/close.png) no-repeat scroll 0 0;
    border: medium none;
    height: 26px;
    position: absolute;
    right: -15px;
    text-indent: -9999px;
    top: -12px;
    width: 31px;
    z-index: 990;
}
.MboxClose:hover {
    background-position: 0 -26px;
}
.cursor-pointer {cursor:pointer !important;}
.join-animate  .animate-spin {
    animation-name: spin;
    animation-duration: 20000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    left: 0 !important;
    top: -2.125rem !important;
    right: 0 !important;
}
.play-btn-placement {position: absolute;
    top: 0;
    bottom: 0;
    left: 0px;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;}