* { margin: 0; padding: 0; box-sizing: border-box; }


body { font-size: 16px; font-family: 'Poppins', sans-serif; font-weight: 400; color: #000; transition: all 0.3s; }
h1, h2, h3, h4, h5, h6 { font-family: 'Poppins', sans-serif; color: #03203e; transition: all 0.3s; }
:not(.btn-check)+.btn:active {  border: 0px; }

h2 { font-size: 48px; }
h3 { font-size: 34px; }
a {  text-decoration: none; }
ul.list-styled { list-style: none; padding-left: 0; }
img.object-cover  {object-fit: cover; }

header { position: absolute; top: 0; z-index: 9; background: linear-gradient(180deg, #00000094, transparent); }
header nav .navbar-brand img { height: 54px;  }
header nav .navbar-collapse >ul>li { margin: 0px;  }
header nav .navbar-collapse >ul>li a.nav-link { color: #fff; padding: 12px 20px !important; position: relative; }
header nav .navbar-collapse >ul>li a.nav-link:before { content: ''; position: absolute; background-image: linear-gradient(90deg, #02B4E4, #c10ad7); width: calc(100% - 40px); left: 20px; bottom: -4px; height: 4px; transition: all 0.3s; transform-origin: left; scale: 0; border-radius: 12px; }

header nav .navbar-collapse ul li > ul.dropdown-sub-menu { position: absolute; top: -5px; left: 100%; list-style:none; padding-left: 0;display: none; border-left: 2px solid; }

header nav .navbar-collapse >ul>li a.nav-link.active { font-weight: 700; color: #02B4E4; }
header nav .navbar-collapse >ul>li a.nav-link.active:before, header nav .collapse >ul>li a.nav-link:hover:before { scale: 1; }

header .lone_btn { padding: 12px 20px; color: #fff;  background-image: linear-gradient(90deg, #02B4E4, #c10ad7); border-radius: 50px; transition: all 0.3s;}
header .lone_btn:hover { background-image: linear-gradient(-90deg, #02B4E4, #c10ad7); scale: 1.05; }

header nav .navbar-collapse ul li.dropdown:hover > ul { display: block;background: #fff; }
.dropdown-menu, .dropdown-sub-menu { border: 0px solid; border-image-slice: 1; border-top-width: 5px; border-image-source: linear-gradient(to left, #743ad5, #d53a9d); }
.dropdown-menu .dropdown-item, .dropdown-sub-menu .dropdown-item { padding: 14px 20px; color: #000; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dropdown-menu li:hover > .dropdown-item, .dropdown-sub-menu li:hover > .dropdown-item { background: linear-gradient(to left, #743ad5, #d53a9d); color: #fff;  }


#hero-banner video, 
#hero-BannerSlider .carousel-item  { height: 100vh; max-height: 880px; object-fit: cover; object-position: top center;  }
#hero-BannerSlider .carousel-item .container{ left: calc((100% - 1140px)/2); /*padding-bottom: 72px;*/ }
#hero-BannerSlider .carousel-item .bg_overlay { background-image: linear-gradient(to right, rgba(3, 32, 62, 0.90), transparent); }
#hero-BannerSlider .carousel-item h2 { font-size: 48px; font-weight: 400; }
#hero-BannerSlider .carousel-control-next i.fa-solid,  #hero-BannerSlider .carousel-control-prev i.fa-solid { font-size: 22px; }

.bg-image-none { background-image: none; }
.carousel-control-next, .carousel-control-prev { width: 5%; }
@media (min-width: 1400px) {
    #hero-BannerSlider .carousel-item .container{ left: calc((100% - 1320px)/2); /*padding-bottom: 72px;*/ }
    #hero-BannerSlider .carousel-control-next i.fa-solid,  #hero-BannerSlider .carousel-control-prev i.fa-solid { font-size: 27px; }
}
@media (min-width: 1600px) {
    .carousel-control-next, .carousel-control-prev {   width: 10%; }
    #hero-BannerSlider .carousel-control-next i.fa-solid,  #hero-BannerSlider .carousel-control-prev i.fa-solid { font-size: 32px; }
}
@media (max-width: 1199px) and (min-width: 991px) {
    #hero-BannerSlider .carousel-item .container{ left: calc((100% - 960px)/2); /*padding-bottom: 72px;*/ }
}
@media (max-width: 990px) {
    #hero-BannerSlider .carousel-item .container{ left: calc((100% - 720px)/2); /*padding-bottom: 72px;*/ }
}


.service_list { margin-top: -72px; }
.service_list ul { column-gap: 10px; }
.service_list li a { padding: 21px 12px; border: 1px solid rgba(255, 255, 255, 0.1); color: #fff; background: #ffffff14; backdrop-filter: blur(8px);transition: all 0.3s; font-size: 18px; }
.service_list li:hover a { background: #02B4E4; }
/*.service_list li:not(:last-child) a { border-right: 0px solid #fff; }*/


.section { padding: 100px 0;}

.industries .swiper-slide {display: flex;justify-content: center;align-items: center;background: #ddd;border-radius: 10px;height: 380px;text-align: center; position: relative; overflow: hidden; background: #03203e; }
.industries .swiper-wrapper { padding-bottom: 72px; }
.industries .swiper-wrapper .hover_content { position: absolute; bottom: 0; color: #fff; padding: 20px; background-image: linear-gradient(0deg, #03203e, transparent); min-height: 150px; }
.industries .swiper-wrapper .swiper-slide:hover .hover_content { background-image: linear-gradient(0deg, #02B4E4, transparent); }
.industries .hover_content h3 { color: #fff; font-size: 25px; font-weight: 500; margin-top: 60px;transition: all 0.3s; }
.industries .swiper-slide img {width: 100%;border-radius: 10px;height: 100%; object-fit: cover;transition: all 0.3s;}
.industries .swiper-slide:hover img {scale: 1.2; opacity: 0.5; filter: blur(4px);}
.industries .hover_content p {margin-bottom: 0%;height: 0;opacity: 0;transition: all 0.3s;}
.industries .swiper-slide:hover .hover_content h3 {margin-top: 0;}
.industries .swiper-slide:hover .hover_content p {height: 100px;opacity: 1;}
.swiper-pagination-bullet { transition: all 0.3s; }
.swiper-pagination-bullet-active { width: 20px; border-radius: 20px; background: #c10ad7; }


.about_us img.img-fluid { border-radius: 35px; }
.about_us .wrapper { padding: 40px; border-radius: 35px; }
.mv_box { border-radius: 20px; padding: 20px; transition: all 0.3s; height: 100%; }
.mv_box:hover { box-shadow: 4px 4px 20px 0 rgba(0, 0, 0, 0.05); transform: translateY(-5px); }
/*.mv_box img { --size: 55px; width: var(--size); height: var(--size); border-radius: 50%; background: rgba(2, 180, 228, 0.1); margin-bottom:50px; }*/
.mv_box img { --size: 48px; width: var(--size); margin-bottom:30px; }
.mv_box h3 { font-size: 23px; font-weight: 700; }


body.service_in_view { background: #0e0e0e; }
body.service_in_view h2, body.service_in_view h3, body.service_in_view p, body.service_in_view a , body.service_in_view .theme_btn { color: #fff; }
body.service_in_view .bg-light h2, body.service_in_view .bg-light h3, body.service_in_view .bg-light p, body.service_in_view .bg-light a , body.service_in_view .bg-light .theme_btn { color: inherit; }
.services .wrapper { margin: 80px 0; }
.service_box { display: flex; align-items: center; padding: 30px 0; margin-top: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.5); transition: all 0.3s; }
.service_box * { opacity: 0.6; }
.service_box:hover { border-bottom-color: #fff; }
.service_box:hover * { opacity: 1; }
.service_box h3, .service_box h3 span { font-weight: 400; font-size: 28px; flex: 0 0 35%; transition: all 0.3s; opacity: 1; }
.service_box:hover h3 span  { font-weight: 700; font-size: 32px; }
.service_box p { flex: 0 0 30%; opacity: 0; transition: all 0.3s;}
.service_box:hover p { opacity: 1; }
.service_box .page_link { flex: 0 0 7%; margin-left: auto; }
.service_box .page_link svg { fill: #fff; width: 1em; }
.service_box .page_link a { display: flex; align-items: center; justify-content: center; --size: 58px; width: var(--size); height: var(--size); border-radius: 50%; border: 1px solid #fff; color: #fff; margin: auto;  font-size: 25px; transition: all 0.3s; }
.service_box .page_link:hover a { background: linear-gradient(to right, #02B4E4, #c10ad7);border: 0; }

.service_box img { position: absolute; top: 50%; transform: translateY(-50%) rotate(8deg); width: 280px; right: 10%; opacity: 0; transition: all 0.3s; border-radius: 12px; scale:0; }
.service_box:hover img { opacity: 1; z-index: 2; scale: 1; }

.container .shape.blue { --size: 640px; width: var(--size); height: var(--size); border-radius: 50%; background: radial-gradient(circle, rgb(2 180 228 / 48%) 0%, rgba(2, 180, 228, 0) 70%);opacity: 0.4;top: -25%;left: -18%; }
.container .shape.purple { --size: 1000px; width: var(--size); height: var(--size); border-radius: 50%; background: radial-gradient(circle, rgba(193, 10, 215, 0.44) 0%, rgba(2, 180, 228, 0) 70%);opacity: 0.5;bottom: -25%;right: -18%; animation: move_shape 10s linear infinite;}

@keyframes move_shape {
    20% { transform: translate(-10%, 20%);}
    40% { transform: translate(-15%, 5%);}
    60% { transform: translate(0%, -20%);}
    80% { transform: translate(5%, -10%);}
    100% { transform: translate(0%, 0%);}
}


.join_us img { border-radius: 30px; }
.join_us_content { width: 88%; }

.grd_text, .service_box:hover h3 span  {
  background: linear-gradient(to right, #02B4E4, #c10ad7);
  background: -webkit-linear-gradient(0deg, #02B4E4, #c10ad7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

footer { background: #0e0e0e; padding-top: 100px; padding-bottom: 30px; overflow: hidden; }
footer .shape { height: 50%; background-image: url(../images/footer-bg.webp); background-repeat: no-repeat; background-position: bottom; background-size: 100%; }
.quick_links h2 { font-size: 28px; }
.quick_links .separator { background-image: linear-gradient(90deg, #02B4E4, #c10ad7); width: 50px; border-radius: 10px; height: 4px; }
footer .row { align-items: stretch; }
footer a { color: #fff; display: block; }
footer i { color: #02B4E4; }
footer .address_box { padding: 20px; border: 1px solid #ffffff1c;  border-radius: 15px;  background: #ffffff17; font-size: 14px; height: 100%; backdrop-filter: blur(10px); }

.copyright { padding-top: 40px; border-top: 1px solid #ffffff1c; margin-top: 70px; }

#contact-banner { background: rgba(98, 176, 241, 0); }
#contact-banner h2.title { font-size: 48px; }
.form_wrapper .form-control:not(textarea) { height: 52px; }
.form_wrapper .form-control { border: 1px solid #c8e1f7;  }
.form_wrapper .form-control:focus { border: 2px solid #02B4E4; box-shadow: none;  }
.form_wrapper .form-control::placeholder { color: #a5a5a5; font-size: 15px; }
.form-label {  margin-bottom: 4px; font-size: 14px; }
.form_wrapper {
    background: #fff;
    padding: 40px 40px 100px;
    border-radius: 30px;
    box-shadow: 0 8px 30px 0 #00000012;
}

.c-details hr { width: 80%; margin: 30px 0; border-color: #a5a5a5 }
.c-details a { text-decoration: none; color: #000;}
.c-details i{ color: #02B4E4 }
.c-details a:hover { text-decoration: underline; color: #02B4E4 }

.theme_btn { --size: 62px; transition: all 0.3s; padding: 12px 30px; color: #03203e; }
.theme_btn.light { color: #fff; }
.theme_btn span.position-absolute { width: var(--size); height: var(--size); background: -webkit-linear-gradient(0deg, #02B4E4, #02B4E4); transition: all 0.3s; border-radius: 100px; transform-origin: left; opacity: 0.5; }
.theme_btn:hover span{ width: 100%; color: #fff; opacity: 1; }
.theme_btn:hover span.position-absolute { background: -webkit-linear-gradient(0deg, #02B4E4, #c10ad7); }
.theme_btn span i, .service_list li a i, header .lone_btn i, li > .dropdown-item i { transform: rotate(-45deg); transition: all 0.3s; }
.theme_btn:hover span i, .service_list li:hover a i, header .lone_btn:hover i, li:hover > .dropdown-item i { transform: rotate(0deg); }

#map iframe { height: 500px; filter: brightness( 100% ) contrast( 100% ) saturate( 0% ) blur( 0px ) hue-rotate( 0deg ); transition: all 0.3s; margin-bottom: -6px; }
#map:hover iframe { filter: brightness(100%) contrast(100%) saturate(100%) blur(0px) hue-rotate(0deg); }



.banner {
    position: relative;
    width: 100%;
    height: 600px;
    background-image: url('https://spirensavvy.com/wp-content/uploads/2024/12/contact-SpireNSavvy.webp');
    background-size: cover;
    background-position: right bottom;
    color: white;
    display: flex;
    justify-content: start;
    align-items: center;
    border-radius: 0px 0px 60px 60px;
    background-attachment: fixed;
}
.banner h1 {  font-size: 68px; }


.stages { margin-top: 80px; }
.stage_box a { padding: 30px; box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.0); border-radius: 20px; transition: all 0.3s; background: -webkit-linear-gradient(0deg, #fff, #fff); z-index: 2; }
.stage_box a:hover, .stage_box a.active {  background: -webkit-linear-gradient(0deg, #02B4E4, #c10ad7); color: #fff; box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.08);  }
.stage_box a h3 { font-size: 26px; }
.stage_box a:hover h3, .stage_box a.active h3 { color: #fff; }
.stage_box.with_margin { margin: 80px 0; }
.stages .sticky_stager { position: sticky; top: calc((100vh - 60%) / 2); }
.stages .sticky_stager:before { content: ''; position: absolute; width: 2px; height: 80%; left: calc(50% - 1px);background: #efefef; top: 10%; }
.stage_content, .practice { margin-top: 50px; }
.stage_content .row { row-gap: 30px; }
.white_box { padding: 30px; border-radius: 30px; box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.08); height: 100%; transition: all 0.3s; position: relative; }
.white_box:after {
    position: absolute;
    content: "";
    top: 0;
    right: 0;
    height: 100%;
    width: 0%;
    z-index: -1;
    border-radius: 10px;
    background-image: linear-gradient(0deg, #02b4e4 0%, #c10ad7 100%);
    transition: .5s;
}
.white_box:hover { color: #fff; }
.white_box:hover::after { width: 100%; left: 0; color: #fff; }
.white_box:hover h4 {  color: #fff; }
.white_box i { font-size: 30px; display: inline-block; margin-bottom: 20px; border: 1px solid #b9b9b9; padding: 20px; border-radius: 12px; }
.white_box p { margin-bottom: 0px; }

.stages hr { margin: 100px 0; }
.stages .wrapper ul li { margin-bottom: 15px; }
.stages .wrapper ul li i { font-size: 10px; transform: translateY(-2px); color: #02B4E4; }
#stage-2 .white_box { border-radius: 20px;}
.white_box small { font-size: 0.72em; }

@media(max-width: 1399px) {
    #hero-BannerSlider .carousel-item h2, h2 { font-size: 42px; }
    .service_box:hover h3 span { font-size: 30px; }
    .service_box img { width: 242px; }
    .mv_box { padding: 17px; }
    .join_us_content { width: 90%; }
    .industries .swiper-slide { height: 320px; }
    .industries .swiper-wrapper .hover_content { padding: 20px 10px; }
    .industries .swiper-wrapper .hover_content p { font-size: 15px; }
}
@media(max-width: 1279px) {
    body, .btn { font-size: 15px; }
    header nav .navbar-brand img { height: 40px; }   
    #hero-banner video, #hero-BannerSlider .carousel-item  { max-height: 650px;  }
    #hero-BannerSlider .carousel-item h2, h2, #contact-banner h2.title { font-size: 36px; }
    .about_us .wrapper, .stage_box a { padding: 20px; }
    .mv_box { padding: 12px; }
    .mv_box h3, .stage_box a h3 { font-size: 18px; }
    .industries .hover_content h3, .service_box h3, .service_box h3 span, .quick_links h2 { font-size: 22px; }
    .industries .swiper-wrapper .hover_content { padding: 20px; }
    .mv_box img {--size: 34px;width: var(--size);margin-bottom: 15px;}
    .theme_btn {--size: 56px;}
    .section {padding: 70px 0;}
    .service_box:hover h3 span { font-size: 25px; }
    .service_box img { width: 210px; }
    footer .address_box { padding: 15px; font-size: 13px; }
    .copyright { margin-top: 50px; }
    .banner { height: 500px; }
    .banner h1 { font-size: 48px; }
    .white_box { border-radius: 20px; padding: 20px; }
    .stage_content h3 {font-size: 28px; }

}
@media(max-width: 990px) {
    .navbar-toggler { filter: brightness(100%) invert(1); border-color: #000; }
    .navbar-collapse .navbar-toggler { filter: brightness(100%) invert(0); border-color: #fff; width: 45px;padding: 0;height: 45px;border-radius: 50%;margin: 12px; margin-left: auto;display: block; background: -webkit-linear-gradient(0deg, #02B4E4, #c10ad7); color: #fff; }
    .navbar { position: static; }
    .navbar-toggler:focus { box-shadow: none; }
    .navbar-collapse { display: block !important; position: absolute;background: #ffffff;top: 0;right: 00%;height: 100vh;width: 35%;transform: translateX(100%); transition: all 0.3s; transition-delay: 0.1s; }
    .navbar-collapse.show { transform: translateX(0); overflow: auto; }
    header nav .navbar-collapse >ul>li a.nav-link { color: #000; }
    header nav .navbar-collapse >ul>li:hover a.nav-link {  background: linear-gradient(to left, #743ad5, #d53a9d); color: #fff; }
    header { overflow: hidden; transition: all 0.3s;}
    body.active { overflow: hidden; }
    body.active header { height: 100vh; }
    header nav .collapse >ul>li a.nav-link:before { display: none; }
    .dropdown-menu, .dropdown-sub-menu { border-top-width: 2px;}
    .dropdown-menu .dropdown-item {padding-left: 26px}
    .dropdown-sub-menu .dropdown-item { padding-left: 32px}
    header nav .navbar-collapse ul li.dropdown:hover > ul { display: none; }
    header nav .navbar-collapse ul li.dropdown.open > ul { display: block; }
    header nav .collapse ul li.dropdown > ul, header nav .collapse ul li.dropdown.open > ul { background: #e8e8e863; }
    header nav .collapse ul li > ul.dropdown-sub-menu { position: static; border-left: 0px; }
    #hero-BannerSlider .carousel-item img { max-height: 580px;}
    header nav .navbar-brand img { height: 40px; }
    #hero-banner video, #hero-BannerSlider .carousel-item  { max-height: 540px; object-position: right center;  }
    #hero-BannerSlider .carousel-item h2, h2 { font-size: 28px; }
    .about_us img.img-fluid.h-100 { max-height: 420px;  }
    .service_box h3 { flex: 0 0 30%; }
    .service_box img { width: 180px; right: 12%; }
    .services .wrapper { margin: 60px 0; }
    footer .address_box { padding: 10px; font-size: 12px; }
    footer .address_box h5.mb-3 { font-size: 16px !important;margin-bottom: 10px !important; }
    footer .address_box i.fs-5.me-3 { font-size: 14px !important;margin-right: 10px !important; }
    .join_us_content { width: 100%; }
    
    .banner { background-attachment: scroll; height: 425px; }
    .c-details { display: flex; }
    .c-details hr { display: none; }
    .c-details .d-flex { width: 33.33%; }
    #contact-banner .form_wrapper { margin-top: 50px; }
    #map iframe { height: 425px; }
    
    .stages { margin-top: 50px; }
    .stages hr { margin: 60px 0; }
    .stage_box.with_margin { margin: 0 0px; }
    .stages .sticky_stager { top: 0; margin-bottom: 50px; background: #fff }
    .stages .sticky_stager:before { height: 2px; width: 80%; left: 10%; top: calc(50% - 1px); }
    .stages .row > .col-lg-3 { position: sticky; top: 0; z-index: 2;}
    .stage_box { flex: 0 0 30%; }
}


@media(max-width: 768px) {
/*    body{ overflow: hidden; }*/
    body, .btn { font-size: 14px;  }
    .h4, h4 { font-size: 20px; }
    header nav .navbar-brand img { height: 36px; }
    .navbar-collapse  {width: 280px; }
    #hero-BannerSlider .carousel-item .container { width: 100%; left: 0; padding: 0 30px; }
    header ul .nav-link, .dropdown-item { font-size: 14px; }
    #hero-BannerSlider .carousel-item h2, h2, #contact-banner h2.title { font-size: 25px; }
    .mb-4 { margin-bottom: 1.2rem !important; }
    .mb-5 { margin-bottom: 2rem !important; }
    #hero-BannerSlider .carousel-item img { object-position: 75% 0;}
    .about_us .wrapper, .about_us img.img-fluid.h-100, .join_us img { border-radius: 16px; }
    .about_us img.img-fluid.h-100 { margin-top: 20px; }
    .join_us img { margin-top: 40px; }
    .mv_box { margin-bottom: 15px; }
    .section {  padding: 50px 5px; }
    .service_box .page_link a { font-size: 18px; --size: 40px; }
    .service_box *, .service_box p { opacity: 1;}
    .service_box h3 span, .service_box:hover h3 span { font-size: 20px }
    .service_box h3, .service_box p, .service_box img, .service_box a { flex: 0 0 100%; }
    .service_box { flex-direction: column; align-items: flex-start; padding: 20px 0; }
    .services .wrapper { margin: 20px 0; }
    .service_box img {width: 100%;right: 0;height: 100%;object-fit: cover;top: 0;scale: 1;transform: rotate(0);border-radius: 0;z-index: -1;}
    .service_box:hover img {opacity: 0.0; z-index: -1; scale: 1.15;}
    .container .shape.blue { --size: 400px; top: -10%;}
    .container .shape.purple { --size: 800px; bottom: -10%;}
    footer { padding: 60px 0 30px; }
    footer .col-lg-4 img { height: 38px }
    .quick_links ul li { margin-top: 10px;}
    .col-md-12 > .address_box { padding: 12px 0;}
    footer .shape { background-size: 190%; }
    .industries .hover_content h3, .service_box h3, .service_box h3 span, .quick_links h2, .stage_content h3  { font-size: 18px; }
    
    .banner h1 { font-size: 32px;}
    .banner { background-attachment: scroll; height: 320px; border-radius: 0 0 30px 30px; }
    .c-details.mt-5 { display: block; margin-top: 30px !important;  }
    .c-details hr { display: block;width: 100%; margin: 20px 0; }
    .c-details .d-flex { width: 100%; }
    #contact-banner .form_wrapper { padding: 20px; border-radius: 16px;  }
    .form_wrapper button.btn.float-end{ float: none !important;  }    
    
    .stage_box a { border-radius: 12px; padding: 8px 12px; }
    .stage_box a span.d-block { font-size: 10px; margin-bottom: 5px !important; }
    .stage_box a h3 { font-size: 14px; }
    .white_box i {font-size: 18px;margin-bottom: 15px;padding: 14px;border-radius: 6px;}
    .stage_content, .practice { margin-top: 20px; }
    .stages hr { margin: 30px 0; }
}


@media(max-width: 475px) {
    .form_wrapper .row .col { width: 100%; flex: 1 0 100%; }
    .form_wrapper .form-control:not(textarea) { height: 45px; }
}