@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');

:root{
    --primary_color: hsla(219.7, 97.5%, 15.5%, 100%);
    --primary_color_lighter: hsla(219.7, 97.5%, 70.5%, 100%);
    --primary_color_lightest: hsla(219.7, 97.5%, 97.5%, 100%);
    --black: #333333;
    --primary_font: "Manrope", sans-serif;
    --white: #ffffff;
    --offwhite: #c7c7c7;
    --gradient: linear-gradient(215deg, rgba(1, 27, 78, 1) 20%, rgba(2, 62, 180, 1) 50%, rgba(1, 27, 78, 1) 80%);
    --gradient_off: linear-gradient(215deg, rgba(1, 27, 78, 0.2) 20%, rgba(2, 62, 180, 0.2) 50%, rgba(1, 27, 78, 0.2) 80%);
}

*{ font-family: var(--primary_font); color: var(--black); text-decoration: none; font-size: 16px; transition: all ease-in-out 300ms; }
a{ text-decoration: none; color: inherit; font-size: inherit; line-height: inherit; }
h1{ font-size: 72px; font-weight: 800; }
h2{ font-size: 40px; font-weight: 700; color: var(--primary_color); }
h3{}
h4{}
h5{ font-size: 20px; }
h6{ font-size: 14px; line-height: 22px; }
p{ font-size: 16px; line-height: 24px; }

.image_wrapper{width: 100%; display: inline-block; position: relative; overflow: hidden; vertical-align: top; border-radius: 20px;}
.image_wrapper:before{content: ""; display: block; padding-top: 100%;}
.image_wrapper img{width: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}

section{ margin-top: 80px; }
.bttn{ display: inline-block; padding: 12px 24px; border-radius: 99px; }

body{ margin: 0; min-height: 100vh; }
header{ position: absolute; width: 100%; z-index: 10; margin-top: 20px; }
.glass-navbar{ padding: 12px 28px; background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border: 0.5px solid rgba(255, 255, 255, 0.5); border-radius: 99px; }
.navbar-brand{ color: #fff !important; font-size: 25px; font-weight: 700; letter-spacing: 1px; }
.navbar-nav{ gap: 32px; }
.navbar-nav .nav-link{ position: relative; color: var(--black); !important; font-size: 15px; font-weight: 500; padding: 10px 0 !important; transition: color 0.3s ease; }
.navbar-nav .nav-link:hover{ color: var(--primary_color); !important; }
.navbar-nav .nav-link::after{ content: ""; position: absolute; width: 0; height: 1px; left: 0; bottom: 3px; background: var(--primary_color); transition: width 0.3s ease; }
.navbar-nav .nav-link.active::after, .navbar-nav .nav-link:hover::after{ width: 100%; background-color: var(--primary_color); color: var(--primary_color); }
.navbar-nav .nav-link.active{ color: var(--primary_color); !important; }
.navbar-toggler{ border: 0; box-shadow: none !important; padding: 5px; }
.navbar-toggler-icon{ filter: invert(0); }
.offcanvas{ background: rgba(16, 27, 53, 0.96); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); color: #fff; }
.offcanvas-header{ border-bottom: 1px solid rgba(255,255,255,0.15); }
.offcanvas .btn-close{ filter: invert(1); }
.offcanvas .navbar-nav{ gap: 12px; padding-top: 20px; }
.offcanvas .nav-link{ display: inline-block; width: fit-content; font-size: 18px; padding: 10px 0 !important; }

.banner_section{ background-position: center; background-repeat: no-repeat; background-size: cover; padding-top: 160px; margin-top: 0; }
.banner_section.inner .banner_image{ display: none; }
.banner_image .image_wrapper:before{ padding-top: 84%; }
.banner_content h1{ color: var(--primary_color); padding: 20px 0px; }
.banner_section .bttn_grp{ display: flex; flex-direction: row; gap: 12px; margin-top: 40px; }
.banner_section .bttn_grp .bttn:nth-child(1){ border: 1px solid var(--primary_color); }
.banner_section .bttn_grp .bttn:nth-child(2){ border: 1px solid transparent; background-color: var(--primary_color); color: var(--white); }
.cmt_content h2{ margin-bottom: 40px; position: relative; }
.cmt_content h2:before{ content:''; position: absolute; width: 100px; height: 1px; background-color: var(--primary_color); bottom: -20px; left: 0; }

.services_section{ padding: 80px 0px; background: #011B4E; background: linear-gradient(215deg, rgba(1, 27, 78, 1) 20%, rgba(2, 62, 180, 1) 50%, rgba(1, 27, 78, 1) 80%); }
.services_section *{ color: var(--white); text-align: left; }
.services_section_top{ margin-bottom: 40px; }
.services_section_top h2{ padding: 20px 0px }
.services_section_top .stars{ margin-top: 20px; }
.single_service_box{ padding: 20px; border-radius: 12px; background-color: #ffffff10; height: 100%; box-shadow: 0px 12px 8px #00000020; }
.single_service_box h5{ margin: 20px 0px; }
.single_service_box h6{ margin-bottom: 20px; }
.services_section_top .sst_tag{ font-size: 14px; background-color: var(--primary_color_lightest); color: var(--primary_color); border-radius: 99px; padding: 12px 24px; border: 0.5px solid var(--primary_color_lighter); display: inline-block; }

footer{ background-color: var(--primary_color); padding: 80px 0px; }
footer h5{ color: var(--white); text-transform: capitalize; }
footer *{ color: #858585; }
.call_grp{ display: flex; flex-wrap: wrap; column-gap: 16px; row-gap: 0px; }
footer .call_grp p a{ color: inherit; padding-left: 6px; }
footer .foot_contact p a:hover{ color: var(--white); }
footer .foot_list ul{ padding: 0; }
footer .foot_list ul li{ list-style-type: none; }
footer .foot_list ul li:not(:last-child){ margin-bottom: 12px; }
footer .foot_list ul li a:hover{ color: var(--white); }
footer .foot_company img{ filter: brightness(4) invert(1) grayscale(1); }
footer .container .row > div > div > h5{ margin-bottom: 32px; }

/* Mobile horizontal scrolling */
@media (max-width: 767px) {
    .single_service_box, .mission_box { height: 100%; }
    .container .row:has(.single_service_box), .container .row:has(.mission_box){ display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-right: 0; }
    .container .row:has(.single_service_box) > div, .container .row:has(.mission_box) > div{ flex: 0 0 83.333333%; max-width: 83.333333%; scroll-snap-align: start; }
    .container .row:has(.single_service_box)::-webkit-scrollbar, .container .row:has(.mission_box)::-webkit-scrollbar{ display: none; }
    .container .row:has(.single_service_box), .container .row:has(.mission_box){ scrollbar-width: none; }

    .banner_section{ padding-bottom: 40px; }
    .banner_content h5{ margin-top: 40px; }
    .banner_content h1{ font-size: 40px; padding: 6px 0px; }
    .banner_section .bttn_grp{ margin-top: 16px; }
    h5{ font-size: 18px; }
    h2{ font-size: 32px; }
    *, p{ font-size: 14px; }
    .services_section{ padding: 60px 0px; }
    footer .container .row > div{ margin-bottom: 40px; }
    footer{ padding: 0; text-align: center; }
    footer .call_grp{ justify-content: center; }
}
@media (max-width: 991px){
    .glass-navbar{ padding: 12px 20px; }
    .navbar-nav{ gap: 10px; }
}

.offcanvas .offcanvas-header img{ filter: brightness(4) invert(1) grayscale(1); }
.offcanvas .offcanvas-body ul li a{ color: #858585; }
.offcanvas .offcanvas-body ul li a.active{ color: var(--white); }

.vtab_section .nav{ margin-bottom: 40px; }
.vtab_section .nav-pills button:not(:last-child){ margin-bottom: 12px; }
.vtab_section .nav-pills .nav-link.active, .vtab_section .nav-pills .show>.nav-link{ background: var(--gradient)!important; text-align: left!important; padding: 16px 30px!important; }
.vtab_section .nav-pills .nav-link{ text-align: left!important; padding: 16px 30px!important; background: var(--gradient_off)!important; }
.vtab_content_part .vtcp_heading .vtcp_tag{ font-size: 14px; background-color: var(--primary_color_lightest); color: var(--primary_color); border-radius: 99px; padding: 12px 24px; border: 0.5px solid var(--primary_color_lighter); display: inline-block; }
.vtab_content_part .vtcp_heading h2{ padding: 20px 0px; color: var(--primary_color); }
.vtab_content_part .vtcp_single_box{ height: 100%; background-color: var(--primary_color_lightest); border-radius: 12px; padding: 20px; }
.vtab_content_part .vtcp_single_box h5{ padding: 20px 0px; color: var(--primary_color); }
.vtab_content_part .vtcp_single_box .vtcpsb_list li{ font-size: 14px; }
.vtab_content_part .vtcp_boxes{ margin-top: 40px; }
.vtab_content_part .vtcp_final p{ font-size: 18px; font-weight: 500; }
.row > div:has(.vtcp_single_box){ margin-bottom: 32px; }

.commitment_section .commitment_box{ background: #011B4E; background: linear-gradient(215deg, rgba(1, 27, 78, 1) 20%, rgba(2, 62, 180, 1) 50%, rgba(1, 27, 78, 1) 80%); padding: 80px; border-radius: 20px; margin-bottom: 80px; }
.commitment_section .commitment_box *{ color: var(--white); text-align: center; }

.mission_section{ padding: 80px 0px; background-color: var(--primary_color_lightest); }
.mission_box{ background: #011B4E; background: linear-gradient(215deg, rgba(1, 27, 78, 1) 20%, rgba(2, 62, 180, 1) 50%, rgba(1, 27, 78, 1) 80%); padding: 28px; height: 100%; border-radius: 12px; }
.mission_box *{ color: var(--white); }
.mission_box h5{ font-size: 18px; font-weight: 500; margin-bottom: 24px; }
.mission_box p{ font-size: 14px; font-weight: 400; }

.contact_section{ margin-bottom: 80px; }
.row > div:has(.contact_box){ margin-top: 40px; }
.contact_box{ height: 100%; border: 0.5px solid transparent; box-shadow: 0px 7px 20px #c7daff; }
.contact_box h5{ margin-bottom: 20px; color: var(--primary_color); font-weight: 600; }
.contact_box{ background-color: var(--primary_color_lightest); padding: 20px; border-radius: 12px; }