/* ***************************************************
 * Author:           SE-2
 * Created Date:     2024-12-14
 * Last Modified:    2025-01-09
 * Version:          1.1
 * Project:          Progmize 2.0 Website
 * Company:          Progmize Software Systems
 * Contact:          tech@progmize.com
 ***************************************************  */

 @font-face {
     font-family: 'Font Awesome 6 Free';
     font-style: normal;
     font-weight: 900;
     font-display: swap;
     src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/webfonts/fa-solid-900.woff2') format('woff2');
 }

 @font-face {
     font-family: 'Font Awesome 6 Brands';
     font-style: normal;
     font-weight: 400;
     font-display: swap;
     src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/webfonts/fa-brands-400.woff2') format('woff2');
 }

 @font-face {
     font-family: 'Pixelify Sans';
     font-style: normal;
     font-weight: 400;
     font-display: swap;
     src: url('https://fonts.gstatic.com/s/pixelifysans/v2/CHylV-3HFUT7aC4iv1TxGDR9Jn0Ei0tSaJ0.woff2') format('woff2');
 }


 @font-face {
     font-family: 'Monomaniac One';
     font-style: normal;
     font-weight: 400;
     font-display: swap;
     src: url('https://fonts.gstatic.com/s/monomaniacone/v13/4iC06K17YctZjx50EU-QlwPmcpRgo4gj5VwJ.woff2') format('woff2');
 }

 /* HTML Styles */
 html {
     font-display: swap;
     scroll-behavior: smooth;
 }

 /* Body Styles */
 body {
     font-family: 'Inter', sans-serif;
     font-display: swap;
     background: linear-gradient(182deg, #ffffffda 1.62%, #ffffffe7 325.95%), url("../img/about-us/pages-bg.webp");
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;
     background-attachment: fixed;
     overflow-x: hidden;
 }

 html,
 body {
     overflow-x: hidden;
 }


 /* Loader styling */
 #loader {
     position: fixed;
     top: 0;
     left: 0;
     width: 100vw;
     height: 100vh;
     background: white;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     z-index: 9999;
     overflow: hidden;
     transition: opacity 0.3s ease;
     opacity: 1;
     visibility: visible;
 }

 #loader video {
     width: 500px;
     height: auto;
 }

 #loader p {
     font-size: 18px;
     font-weight: bold;
     color: #002d62;
     margin-top: 10px;
 }

 #loadingMessage {
     display: none;
 }

 body.loaded #loader {
     opacity: 0;
     visibility: hidden;
     pointer-events: none;
 }

 /* Lazy-loaded Styles */
 .lazy-section {
     opacity: 0;
     transform: translateY(-50px);
     transition: opacity 0.6s ease-in-out 0.4s, transform 0.7s ease-in-out 0.5s;
     will-change: transform;

 }

 .lazy-section.visible {
     opacity: 1;
     transform: translateY(0);
     will-change: transform;
 }

 .chat-buttons {
     position: fixed;
     bottom: 0%;
     left: 10px;
     transform: translateY(-50%);
     z-index: 1000;
     display: flex;
     flex-direction: column;
     gap: 10px;
     border: 1px solid #FFF;
     background: rgba(255, 255, 255, 0.58);
     backdrop-filter: blur(30px);
     padding: 10px 6px;
     border-radius: 30px;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 }

 .chat-btn {
     width: 48px;
     height: 48px;
     display: flex;
     justify-content: center;
     align-items: center;
     border-radius: 50%;
     transition: transform 0.2s ease;
 }

 .chat-btn:hover {
     transform: scale(1.1);
 }

 .chat-btn img {
     width: 60px;
     height: 60px;
 }

 .telegram-btn img {
     width: 55px;
     height: 55px;
 }

 /* Header Styles */
 .header {
     background-image: url('../img/header/bg.webp');
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
     box-shadow: 0 4px 6px rgba(0, 0, 0, .1);
     padding-top: 0 !important;
     height: 112px;
     border-bottom: 3px solid #fff;
     z-index: 1000;
     display: flex;
     justify-content: left;
 }

 .header::before {
     content: '';
     position: absolute;
     top: 0;
     z-index: 1;
     opacity: 0.7;
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center;
     background: linear-gradient(131deg, #023189 1.48%, #5C5C5C 126.28%);
 }

 .header .container {
     max-width: 100%;
     min-width: 100%;
     z-index: 999;
 }

 .col-auto:has(.hamburger-toggle:checked) {
     display: none
 }

 .hamburger-toggle {
     background-color: #023189;
     border: 5px solid #fff;
     outline: 3px solid #FFB81D;
     display: none;
     justify-content: center;
     align-items: center;
     border-radius: 100%;
     padding: 10px;
     position: absolute;
     cursor: pointer;
     z-index: 100;
     overflow: hidden;
     display: none
 }

 .hamburger-toggle:focus,
 .hamburger-toggle:focus-visible,
 .hamburger-toggle:hover {
     outline: 3px solid #FFB81D !important;
 }

 .hamburger-toggle i {
     font-size: 20px;
     overflow: visible
 }

 #navMenu {
     padding-left: 0 !important;
     padding-top: 0 !important;
     padding-bottom: 0 !important;
 }

 #navMenu .container-fluid {
     display: flex;
     justify-content: space-between !important;
     padding-top: 0 !important;
     padding-left: 0 !important;
     padding-bottom: 0 !important;
 }

 #navMenu .navbar-brand {
     outline: none;
     border: none;
 }

 #navMenu .navbar-brand img {
     max-width: 350px;
     min-width: 0;
     margin-top: -3px;
 }

 #navMenu .navbar-brand img:hover {
     opacity: 0.9;
     transition: opacity .3s ease-in-out
 }

 #navMenu .navbar-nav {
     display: flex;
     justify-content: space-between !important;
     gap: 45px;
 }

 #navMenu .nav-item {
     display: inline-block;
     height: max-content;
 }

 #navMenu .nav-item:last-of-type {
     margin-left: -20px !important;
     margin-right: 10px;
 }

 #navMenu .nav-link {
     position: relative;
     display: inline-block;
     text-decoration: none;
     color: #fff;
     text-shadow: 5px 2px 4px rgba(0, 0, 0, .25);
     font-family: 'Monomaniac One', sans-serif;
     font-display: swap;
     font-size: 22px;
     font-style: normal;
     font-weight: 500;
 }

 #navMenu .nav-link::after {
     content: '';
     height: 3px;
     width: 100%;
     position: absolute;
     bottom: 0;
     left: 0;
     background: #ffc107;
     transform: scaleX(0);
     transition: transform 0.3s ease-in-out;
 }

 #navMenu .nav-link:hover::after {
     transform: scaleX(1);
 }

 .nav-link.active {
     color: #ffc107 !important;
 }

 #responsiveNav {
     background: url('../img/header/nabar-bg.png'), url('../img/header/nabar-bg.png');
     background-size: 100% 100%, 100% 100%;
     background-position: top center, bottom center;
     background-repeat: no-repeat no-repeat;
     position: absolute;
     top: 75px;
     right: -100%;
     height: 60px;
     transition: right 0.5s ease-in-out;
     outline: none;
     border: none;
     max-width: 600px;
 }

 #responsiveNav .container-fluid {
     width: 100%;
     padding-right: 1rem;
     padding-left: 1rem;
     margin-right: auto;
     margin-left: auto;
 }

 #responsiveNav.open {
     right: 0
 }

 #responsiveNav .navbar-nav {
     display: flex;
     justify-content: space-between;
 }

 #responsiveNav .nav-link {
     color: #fff;
     text-shadow: 5px 2px 4px rgba(0, 0, 0, .25);
     font-family: 'Monomaniac One', sans-serif;
     font-display: swap;
     font-size: clamp(16px, 4vw, 20px);
     font-style: normal;
     font-weight: 500;
 }

 .services-link.active {
     color: #ffc107 !important;
 }


 /* Dropdown */
 #industriesMenu,
 #servicesMenu {
     display: none;
     padding: 22px 1px 10px;
     z-index: 1000;
     border-radius: 8px;
     border: 1px solid #FFF;
     background: rgba(255, 255, 255, 0.80);
     backdrop-filter: blur(12px);
     transition: all 0.3s ease-in-out;
     position: absolute;
     top: 100%;
     left: 50%;
     transform: translateX(-50%);
 }

 /* Show on hover */
 .dropdown:has(.industries-link:hover) #industriesMenu,
 .dropdown:has(.services-link:hover) #servicesMenu {
     display: flex !important;
 }


 #servicesMenu .dropdown-item,
 #industriesMenu .dropdown-item {
     padding: 30px 20px;
     cursor: pointer;
     transition: all 0.3s ease;
     height: 30px;
     background: transparent;
     border-radius: 5px;
 }

 #servicesMenu .dropdown-item img,
 #industriesMenu .dropdown-item img {
     width: 50px;
     height: auto;
     margin-right: 10px;
 }

 #servicesMenu .dropdown-item:hover,
 #industriesMenu .dropdown-item:hover {
     background: rgba(255, 255, 255, 0.50);
 }

 /* Only change color when dropdown item is hovered */
 .nav-item:has(#servicesMenu:hover)>.services-link {
     color: #ffc107 !important;
 }

 .nav-item:has(#industriesMenu:hover)>.industries-link {
     color: #ffc107 !important;
 }


 #servicesMenu .dropdown-item:hover span,
 #industriesMenu .dropdown-item:hover span {
     color: #ffc107;
 }

 #servicesMenu .dropdown-item span,
 #industriesMenu .dropdown-item span {
     font-size: 14px;
     color: #010101;
     font-style: normal;
     font-weight: 600;
     font-family: 'Inter', sans-serif;
     text-decoration: none;
 }

 #servicesMenu .dropdown-item span .color-span,
 #industriesMenu .dropdown-item span .color-span {
     color: #023189;
 }

 #navMenu .btn {
     width: 140px;
     height: 48px;
     justify-content: center;
     background: url(../img/header/get-quote-bg.png) no-repeat center right;
     background-size: contain;
     border: none;
     border-radius: 4px;
     position: relative;
     will-change: transform;
     margin-top: -5px;
     margin-right: -30px !important;
 }

 #navMenu .btn::after {
     content: '';
     position: absolute;
     top: 26%;
     left: 4.5%;
     width: 100%;
     height: 30px;
     background: url(../img/header/get-quote-txt.png) no-repeat center;
     background-size: contain
 }

 #navMenu .btn:hover {
     transform: scale(1.1);
     transition: transform .3s ease-in-out;
     will-change: transform;
 }

 .header .btn-responsive {
     background: url(../img/header/get-quote-sm.png) no-repeat center;
     background-size: contain;
     display: none
 }

 .header .btn-responsive:hover {
     transform: scale(1.1);
     transition: transform .3s ease-in-out;
     will-change: transform;
 }

 /* Hero Section Styles */
 .hero {
     background-image: url('../img/hero/bg.webp');
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     z-index: 1;
     position: relative;
     height: 100%;
     padding-bottom: 1%;
 }

 .hero:after {
     content: '';
     position: absolute;
     top: 0;
     z-index: 2;
     opacity: 0.8;
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center;
     background: linear-gradient(131deg, #023189 1.48%, #5C5C5C 126.28%);
 }

 .hero .container {
     width: 100%;
     max-width: 1200px;
     padding-top: 100px;
     margin: 0 auto !important;
     padding-left: auto !important;
     padding-right: auto !important;
     z-index: 3;
     position: relative;
 }

 .hero-top .col-md-7 {
     width: 61.66666667%
 }

 .hero-top .col-md-5 {
     width: 30.33333333%
 }

 .heading-container {
     color: white;
     text-align: left;
     margin-top: -15px;
 }

 .line1,
 .line2 {
     font-family: 'Pixelify Sans', sans-serif;
     font-display: swap;
     font-size: 2.5rem;
     font-weight: 700;
 }

 .heading-container h1,
 .heading-container h2 {
     margin: 0;
     line-height: 1.3;
 }

 .line3,
 .line4 {
     font-family: 'Inter', sans-serif;
     font-display: swap;
     font-size: 40px;
     font-weight: 700;
     padding-left: 90px;
 }

 .line3 {
     margin-top: 12px;
 }

 .hero .btn {
     white-space: nowrap;
     padding-top: 0%;
     color: #FFF;
     text-shadow: 4px 4px 1px rgba(0, 0, 0, 0.25);
     font-family: 'Monomaniac One', sans-serif;
     font-weight: 400;
     font-display: swap;
     font-size: clamp(16px, 2vw, 26px);
     font-style: normal;
     letter-spacing: 1px;
     background-color: #FFB81D;
     box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.25);
     border: none;
     will-change: transform;
     transition: transform 0.3s ease-in-out;
 }

 .hero .btn:hover {
     transform: scale(1.1);
 }


 .hero-image {
     width: 100%;
     min-width: 0;
     max-width: 250px;
     height: auto;
     animation: heartbeat 2.5s infinite ease-in-out;
     will-change: transform;
 }

 /* Keyframes for Heartbeat */
 @keyframes heartbeat {

     0%,
     100% {
         transform: scale(1);
         /* Normal size */
     }

     14% {
         transform: scale(1.1);
         /* Slightly bigger */
     }

     28% {
         transform: scale(0.95);
         /* Slightly smaller */
     }

     42% {
         transform: scale(1.05);
         /* Bigger again */
     }

     70% {
         transform: scale(1);
         /* Back to normal */
     }
 }

 .hero-carousel h3 {
     color: #fff;
     font-family: 'Inter', sans-serif;
     font-size: clamp(15px, 2vw, 33px);
     font-style: normal;
     font-weight: 900;
     line-height: normal;
     font-display: swap;
     white-space: nowrap;
 }

 .hero-carousel p {
     color: #fff;
     text-align: justify;
     text-shadow: 0 4px 4px rgba(0, 0, 0, .25);
     font-family: 'Inter', sans-serif;
     font-display: swap;
     font-size: clamp(12px, 2vw, 20px);
     font-style: normal;
     font-weight: 00;
 }

 .hero-carousel p span {
     font-weight: 700;
     text-shadow: none;
 }

 .img-box {
     position: relative;
     display: flex;
     justify-content: center;
     padding: 20px;
     padding-top: 0;
 }

 .carousel-image-wrapper {
     position: absolute;
     bottom: 20px;
     width: 100%;
     max-width: max-content;
     display: flex;
     align-items: center;
     justify-content: start;
 }

 .carousel-image-wrapper img {
     max-height: 100%;
     max-width: 130px;
     min-width: 0;
     object-fit: contain;
     display: block;
 }

 .hero-carousel .carousel-item:first-of-type img {
     max-width: 180px;

 }

 .hero-bottom-carousel .carousel-wrapper {
     position: relative;
     overflow: visible;
 }

 .hero-bottom-carousel {
     position: relative;
     z-index: 1;
 }

 .hero-bottom-carousel .carousel-item {
     position: relative;
 }


 .hero-bottom-carousel .border-line {
     position: absolute;
     bottom: 0px;
     width: 100%;
     padding: 100px 0;
     background: #fff;
     clip-path: polygon(calc(100% - 10px) 80px,
             100% 30%,
             100% 100%,
             0% 100%,
             2% 96%,
             calc(100% - 10px) 95%);
 }

 /* Carousel Indicators  */
 .hero-carousel-indicators {
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
     z-index: 2;
     margin: 0;
     padding: 0;
     display: flex;
     gap: 8px;
 }

 .hero-carousel-indicators [data-bs-target] {
     width: 24px;
     height: 24px;
     border-radius: 50%;
     background: #fff;
     box-shadow: 0 4px 4px 0 rgba(0, 0, 0, .25) inset;
     border: none;
     transition: opacity .3s ease-in-out;
     opacity: .9;
 }

 .hero-carousel-indicators button.active {
     background: #ffb81d;
     filter: drop-shadow(2px 4px 4px rgba(0, 0, 0, .25));
     opacity: 1
 }

 #bookingModal .modal-dialog {
     max-width: 40vw;
     width: 100%;
     margin: 1.75rem auto !important;
     margin-top: 0.5rem !important;
     display: flex;
     justify-content: center;
     align-items: center;
     margin: 0 auto !important;
 }

 #bookingModal .modal-content {
     max-height: 90vh;
     overflow-y: hidden;
     border-radius: 12px;
     padding: 20px;
     margin: 0 auto !important;
 }

 #bookingModal .modal-header {
     border-bottom: none;
     padding-bottom: 0;
 }

 #bookingModal .modal-body {
     padding-top: 0;
 }

 #bookingModal .modal-content {
     border-radius: 8px;
     border: 2px solid #FFF;
     background: rgba(255, 255, 255, 0.88);
     backdrop-filter: blur(12px);
 }

 #bookingModal .modal-title {
     color: #023189;
     font-family: 'Inter', sans-serif;
     font-size: clamp(20px, 2vw, 25px);
     font-style: normal;
     font-weight: 700;
     line-height: normal;
 }

 #bookingModal .modal-header p,
 #bookingModal .modal-body p {
     color: #000;
     text-align: justify;
     font-family: 'Inter', sans-serif;
     font-size: clamp(11px, 2vw, 14px);
     font-style: normal;
     font-weight: 500;
     line-height: normal;
 }

 .selected-date-display {
     text-align: center;
     margin-bottom: 15px;
     color: #000;
     text-align: justify;
     font-family: 'Inter', sans-serif;
     font-size: 16px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
 }

 .calendar-wrapper {
     background: none;
     padding: 20px;
     padding-left: 0;
     padding-top: 0 !important;
     border-radius: 16px;
     font-family: 'Inter', sans-serif;
 }

 /* Custom Flatpickr Style */
 .flatpickr-calendar {
     width: auto !important;
     max-width: max-content;
     min-width: 0;
     padding-left: 0 !important;
     padding-right: 0 !important;
     padding-top: 0 !important;
     padding-bottom: 5px;
     border: none;
     box-shadow: none;
     border: 1px solid #023189;
     padding-right: 0 !important;
 }

 .flatpickr-innerContainer {
     display: flex;
     justify-content: center;
     border-radius: 8px;
     overflow: hidden;
     gap: 0%;
 }

 .flatpickr-days .dayContainer {
     padding: 0 5px !important;
 }

 .flatpickr-day {
     width: auto !important;
     max-width: 100% !important;
     border-radius: 0px;
     border: 1px solid #D5D4DF;
     transition: 0.2s;
     margin: 0 !important;
     color: #000;
     text-align: center;
     font-variant-numeric: lining-nums tabular-nums;
     font-family: 'Inter', sans-serif;
     font-size: 12px;
     font-style: normal;
     font-weight: 400;
 }

 .flatpickr-days {
     gap: 0% !important;
     display: flex;
     justify-content: end;
     margin: 0 auto;
     margin-left: auto;
     margin-right: auto;
 }

 .flatpickr-day:not(.flatpickr-disabled):hover {
     background: linear-gradient(180deg, #023189 0%, #010D23 100%) !important;
     color: white !important;
 }


 .flatpickr-day.selected,
 .flatpickr-day.startRange,
 .flatpickr-day.endRange {
     border: 1px solid #D5D4DF;
     background: linear-gradient(180deg, #023189 0%, #010D23 100%) !important;
     color: white !important;
 }

 /* Make header layout flexible */
 .flatpickr-months {
     color: #333;
     padding: 2px 0;
     font-weight: 500;
     border-radius: 6px 6px 0 0;
     display: flex !important;
     justify-content: start !important;
     align-items: center;
     padding: 0 0px !important;
 }

 /* Container to hold month/year (left side) */
 .flatpickr-month {
     order: 1;
     display: flex;
     align-items: center;
     gap: 8px;
     flex-grow: 1;
 }

 .flatpickr-current-month,
 .flatpickr-monthDropdown-months {
     appearance: menulist;
     background: transparent;
     border: none;
     border-radius: 0;
     box-sizing: border-box;
     cursor: pointer;
     height: auto;
     margin: -1px 0 0 0;
     outline: none;
     padding: 0 0 0 0;
     position: relative;
     vertical-align: initial;
     -webkit-box-sizing: border-box;
     -webkit-appearance: menulist;
     -moz-appearance: menulist;
     width: auto;
     margin-left: -13px !important;
     color: #000 !important;
     font-size: 16px;
     font-family: 'Inter', sans-serif !important;
     font-style: normal !important;
     font-weight: 500 !important;
     line-height: normal !important;

     -webkit-appearance: none !important;
     -moz-appearance: none !important;
     appearance: none !important;
     background: transparent !important;
     border: none;
     padding-right: 0 !important;
 }

 /* Optional: hide dropdown arrow in Firefox */
 .flatpickr-monthDropdown-months select::-ms-expand {
     display: none;
 }

 /* Optional: add background icon if you want your own */
 .flatpickr-monthDropdown-months select {
     background-image: none !important;
 }


 /* style the actual input */
 .flatpickr-current-month input.cur-year {
     text-align: start;
     color: #000;
     font-family: 'Inter', sans-serif;
     font-size: 16px;
     font-style: normal;
     font-weight: 500;
     line-height: normal;
 }

 /* Make sure spinner arrows show in most browsers */
 .flatpickr-current-month input[type="number"]::-webkit-inner-spin-button,
 .flatpickr-current-month input[type="number"]::-webkit-outer-spin-button {
     -webkit-appearance: inner-spin-button !important;
     appearance: auto !important;
     opacity: 1 !important;
 }

 .flatpickr-current-month input[type="number"] {
     -moz-appearance: textfield !important;
     /* Firefox */
     appearance: auto !important;
 }


 /* Move prev/next arrows to right */
 .flatpickr-prev-month,
 .flatpickr-next-month {
     order: 2;
     position: static !important;
     margin-left: 0px;
     margin-top: -5px;
     color: #000 !important;
     font-weight: 500;
 }

 .flatpickr-weekday {
     opacity: 1;
     color: #000 !important;
     text-align: center;
     font-variant-numeric: lining-nums tabular-nums;
     font-family: 'Inter', sans-serif;
     font-size: 12px;
     font-style: normal;
     font-weight: 600;
     line-height: normal;
 }

 .booking-socials {
     display: flex;
     justify-content: start;
     align-items: center;
     gap: 4px;
 }

 .booking-socials img {
     max-width: 50px;
     min-width: 0;
     transition: 0.3s ease-in-out;
 }

 .booking-socials a:nth-of-type(2) img,
 .booking-socials a:last-of-type img {
     max-width: 42px;
     min-width: 0;
 }

 .booking-socials a:last-of-type img {
     margin-top: -2px;
 }

 .booking-socials img:hover {
     transform: scale(1.1);
 }


 .bookingForm {
     width: 100%;
     padding: 0 50px;
 }

 .bookingForm input,
 .bookingForm textarea {
     width: 100%;
     border-radius: 4px;
     border: 1px solid #000;
     background: #FFF;
     box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25) inset;
     padding: 5px;
     color: #1d1d1d;
     text-align: justify;
     font-family: 'Inter', sans-serif;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
 }

 .bookingForm input:focus,
 .bookingForm textarea:focus {
     border: 2px solid #FFB81D !important;
     outline: none !important;
 }

 .bookingForm input::placeholder,
 .bookingForm textarea::placeholder {
     color: #8F8F8F;
 }


 .time-section {
     margin-top: 0px;
     display: flex;
     justify-content: center;
 }

 .time-section input {
     padding: 1px 12px;
     font-size: 16px;
     border: 1px solid #000000ab !important;
     outline: none !important;
 }

 #analog-time-picker {
     display: flex;
     flex-direction: column;
     align-items: center;
     margin-top: 20px;
     font-family: sans-serif;
 }

 .clock {
     width: 200px;
     height: 200px;
     border: 6px solid #023189;
     border-radius: 50%;
     position: relative;
     background-color: rgb(247, 247, 247);
     overflow: hidden;
 }

 .tick-marks {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     pointer-events: none;
     /* prevents interfering with clicks */
 }


 .tick-marks::before {
     content: '';
     position: absolute;
 }

 .tick {
     position: absolute;
     width: 2px;
     height: 5px;
     background: black;
     top: 48%;
     left: 50%;
     transform-origin: center center;
 }

 .tick.hour {
     width: 3px;
     height: 8px;
     background: black;
 }

 .tick.minute {
     width: 2px;
     height: 5px;
     background: #000;
 }

 .number {
     position: absolute;
     width: 30px;
     height: 30px;
     text-align: center;
     line-height: 30px;
     font-weight: bold;
     color: #000;
     transform: translate(-50%, -50%);
     cursor: pointer;
 }

 /* Position each number */
 /* .number[data-num="1"] {
     top: 20%;
     left: 75%;
 }

 .number[data-num="2"] {
     top: 33%;
     left: 85%;
 }

 .number[data-num="3"] {
     top: 50%;
     left: 90%;
 }

 .number[data-num="4"] {
     top: 67%;
     left: 85%;
 }

 .number[data-num="5"] {
     top: 80%;
     left: 75%;
 }

 .number[data-num="6"] {
     top: 88%;
     left: 50%;
 }

 .number[data-num="7"] {
     top: 80%;
     left: 25%;
 }

 .number[data-num="8"] {
     top: 67%;
     left: 15%;
 }

 .number[data-num="9"] {
     top: 50%;
     left: 10%;
 }

 .number[data-num="10"] {
     top: 33%;
     left: 15%;
 }

 .number[data-num="11"] {
     top: 20%;
     left: 25%;
 }

 .number[data-num="12"] {
     top: 12%;
     left: 50%;
 } */

 .hand {
     position: absolute;
     bottom: 50%;
     left: 50%;
     transform-origin: bottom center;
     background-color: #023189;
     transform: rotate(0deg);
     z-index: 5;
 }

 .hand.hour {
     width: 5px;
     height: 60px;
     background-color: #ffc107;
     cursor: grab;
 }

 .hand.minute {
     width: 5px;
     height: 70px;
     background-color: rgba(0, 0, 0, 0.5);
     cursor: grab;
 }

 .center-circle {
     position: absolute;
     width: 10px;
     height: 10px;
     border-radius: 50%;
     bottom: 45%;
     left: 48%;
     background-color: #000000;
     transform-origin: bottom center;
     transform: rotate(0deg);
     z-index: 1000;
 }

 .hand.second {
     position: absolute;
     width: 3px;
     height: 75px;
     bottom: 8%;
     left: 52%;
     background-color: red;
     transform-origin: bottom center;
     transform: rotate(0deg);
     z-index: 999;
 }


 .hand.hour:hover {
     box-shadow: 0 0 8px #ffc107;
     transform: scale(1.05) rotate(var(--rotate-angle));
 }

 .hand.minute:hover {
     box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
     transform: scale(1.05) rotate(var(--rotate-angle));
 }

 .btn-booking {
     display: flex;
     margin: 0 auto;
     border-radius: 8px;
     background: linear-gradient(180deg, #FFB81D 0%, #996E11 270.75%);
     box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.25);
     color: #FFF;
     text-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25);
     font-family: 'Inter' sans-serif;
     font-size: 18px;
     font-style: normal;
     font-weight: 700;
     line-height: normal;
     transition: transform 0.3s ease-in-out;
 }

 .btn-booking:hover {
     color: #fff;
     transform: scale(1.1);
     background: linear-gradient(180deg, #fcb722 0%, #ac7c15 279%);

 }

 /* Style disabled (past) dates */
 .flatpickr-day.flatpickr-disabled {
     border: 1px solid #D5D4DF;
     background-color: #F2F3F7 !important;
     color: #A8A8A8 !important;
     border: none !important;
     cursor: not-allowed !important;
     opacity: 1 !important;
 }

 .flatpickr-day.flatpickr-disabled:hover {
     background-color: #D5D4DF !important;
 }

 .flatpickr-day.outside-current-month {
     background-color: #f0f0f0 !important;
     color: #b0b0b0 !important;
     opacity: 1 !important;
 }

 #successModal .modal-content,
 #errorModal .modal-content {
     border-radius: 8px;
     border: 2px solid #FFF;
     background: rgba(255, 255, 255, 0.88);
     backdrop-filter: blur(12px);
 }

 #successModal h2,
 #errorModal h2 {
     color: #023189;
     text-align: center;
     font-family: 'Inter', sans-serif;
     font-size: clamp(20px, 2vw, 25px);
     font-style: normal;
     font-weight: 700;
     line-height: normal;
     margin-bottom: 1em;
 }

 #successModal p,
 #errorModal p {
     color: #023189;
     text-align: center;
     font-family: 'Inter', sans-serif;
     font-size: clamp(11px, 2vw, 14px);
     font-style: normal;
     font-weight: 500;
     line-height: 1.5;
 }

 .open-button {
     position: fixed;
     top: 131px;
     right: -37px;
     width: 130px;
     height: 70px;
     border-top-left-radius: 50px;
     border-bottom-left-radius: 50px;
     display: flex;
     justify-content: left;
     align-items: center;
     cursor: pointer;
     z-index: 98;
     transition: background .3s ease;
     will-change: transform;
 }

 @keyframes ring {
     0% {
         transform: rotate(0)
     }

     10% {
         transform: rotate(-5deg)
     }

     20% {
         transform: rotate(5deg)
     }

     30% {
         transform: rotate(-5deg)
     }

     40% {
         transform: rotate(5deg)
     }

     50% {
         transform: rotate(-3deg)
     }

     60% {
         transform: rotate(3deg)
     }

     70% {
         transform: rotate(-3deg)
     }

     80% {
         transform: rotate(3deg)
     }

     90% {
         transform: rotate(-1deg)
     }

     100% {
         transform: rotate(1deg)
     }
 }

 .open-button:hover img {
     animation: ring .9s ease-in-out infinite;
     will-change: transform;
 }

 .border-container {
     background-image: url('../img/hero/phone-border-button.svg');
     background-position: center;
     background-repeat: no-repeat;
     background-size: contain;
     padding: 2px;
     margin-left: 15px;
     margin-top: 10px;
     transition: background .3s ease
 }

 .open-button img {
     width: 100%;
     height: 65px;
     object-fit: contain;
     margin-bottom: 10px
 }

 /* Contact Form Styles */
 .contact-form-container {
     position: fixed;
     top: 11%;
     right: -100%;
     height: auto;
     max-height: 81vh;
     width: 46%;
     font-family: 'Inter', sans-serif;
     font-display: swap;
     font-weight: 400;
     background: url(../img/contact-us/slider.webp), url(../img/contact-us/slider.webp);
     background-size: 100% 100%, 100% 100%;
     background-position: top left, bottom right;
     padding: 20px 40px 20px 40px;
     box-sizing: border-box;
     transition: right .3s ease-in-out;
     z-index: 21;
     justify-content: space-between;
     border-radius: 10px;
     display: flex;
     flex-direction: column
 }

 .contact-form-container.active {
     right: 0;
 }


 .contact-form-header {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     margin-bottom: 5px;
     cursor: default
 }

 .contact-form-header .heading img {
     width: 28px;
     height: 28px;
     margin-right: 10px
 }

 .contact-form-header h2 {
     color: #023189;
     font-size: 27px;
     padding-right: 5px;
     padding-left: 2px;
     text-align: center;
     margin: 0;
     font-weight: 700
 }

 .contact-form-header .border-lines-container {
     min-width: 100%;
     margin-top: -33px;
     margin-right: -14px
 }

 .contact-form-header .border-line-container-x {
     width: 90%;
     position: relative;
     background-color: #023189;
     padding: 2px 0;
     display: inline-block;
     clip-path: polygon(0 0, 94% 0, 100% 100%, 90% 100%, 0 100%);
     transform: rotate(-180deg) scaleY(-1);
     margin-right: -6px
 }

 .contact-form-header .border-line-container-y {
     position: relative;
     background-color: #023189;
     padding: 17px 2px;
     display: inline-block;
     clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
     transform: rotate(-180deg)
 }

 .error:first-of-type {
     margin-top: 0
 }

 .error {
     display: block;
     color: red;
     margin-top: 4px;
     margin-bottom: 0;
     font-size: 1rem;
     margin-left: 6px;
 }


 .bookingForm .error {
     font-size: clamp(9px, 2vw, 12px) !important;
     white-space: nowrap !important;
 }

 .close-button {
     position: absolute;
     width: clamp(20px, 20vw, 40px);
     height: clamp(20px, 20vw, 56px);
     top: 46%;
     left: 1%;
     border-radius: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
     cursor: pointer;
     z-index: 10
 }

 .close-button img {
     position: absolute;
     width: 40px;
     height: 40px;
     transform: scale(-1, -1);
     will-change: transform;
 }

 .contact-form-container .form {
     background: #000
 }

 .contact-form-container .form-group {
     margin-bottom: 8px
 }

 .contact-form-container .form-group:last-of-type {
     margin-bottom: -28px
 }

 .contact-form-container .form-group input,
 .contact-form-container .form-group textarea {
     width: 100%;
     padding: 6px;
     border: 1px solid #ccc;
     border-radius: 4px;
     font-size: 16px;
     font-family: 'Inter', sans-serif;
     font-display: swap;
 }

 .contact-form-container .form-group input::placeholder,
 .contact-form-container .form-group textarea::placeholder {
     color: #00000073;
     font-weight: 700;
 }

 .contact-form-container .form-group textarea {
     resize: none
 }

 .send-message-btn {
     padding: 40px 70px;
     padding-bottom: 0;
     background: url(../img/contact-us/btn.webp) no-repeat center center;
     background-size: contain;
     border: none;
     border-radius: 4px;
     cursor: pointer;
     transform: scale(1.3);
     transition: background-color .3s ease;
     will-change: transform;
 }

 .send-message-btn:hover {
     transform: scale(1.4);
     transition: transform .3s ease-in-out;
     will-change: transform;
 }

 .send-message-btn img {
     width: 140px
 }

 .last-row {
     min-width: 100%
 }

 .contact-details {
     margin-top: 17px;
     min-width: 0 !important;
 }

 .contact-details img {
     width: 20px;
     height: 20px
 }

 .contact-details i {
     color: #ffb81DE5;
     background: #fff;
     padding: 5px;
     font-size: 19px
 }

 .contact-details i:first-of-type {
     border-radius: 5px
 }

 .contact-details i:last-of-type {
     border-radius: 15px;
     font-size: 15px;
     text-align: center
 }

 .contact-infos a {
     display: inline-block;
     font-size: 16px;
     font-weight: 700;
     color: #036;
     text-decoration: none;
 }


 .contact-infos a:hover {
     color: #ffb81DE5
 }

 .separator-container {
     position: relative;
     padding-right: 10px
 }

 .separator-container::after {
     content: "";
     position: absolute;
     right: 0;
     top: 0;
     height: 100%;
     width: 3px;
     background-color: #036;
     transform: rotate(5deg)
 }

 .stay-connected {
     text-align: left;
     padding-bottom: 10px;
     min-width: 0 !important;
 }

 .stay-connected h3 {
     color: #023189;
     font-size: 18px;
     font-weight: 700;
     margin: 0;
     display: inline-block;
     padding-bottom: 2px;
     white-space: nowrap;
 }

 .social-media {
     position: relative;
     display: flex;
     flex-wrap: wrap;
     white-space: wrap;
     justify-content: center;
     align-items: center;
     margin-top: 10px;
     /* background: url(../img/contact-us/container2.svg) no-repeat center center; */
     background-image: url(../img/contact-us/container2.svg), url(../img/contact-us/container2.svg);
     background-size: 100% 100%, 100% 100%;
     background-position: top center, bottom center;
     background-repeat: no-repeat no-repeat;
     background-size: contain;
     padding: 9px;
     border-radius: 4px;
     width: max-content;
 }

 .social-media::before {
     content: "";
     position: absolute;
     top: -10px;
     left: 0;
     width: 98%;
     height: 2px;
     background: #023189;
     border-radius: 4px;
     z-index: -1;
 }

 .social-media img {
     width: 23px;
     height: auto;
     margin: 0 4px;
     will-change: transform;
 }

 .social-media img:hover {
     transform: scale(1.1);
     transition: transform .3s ease-in-out;
     will-change: transform;
 }

 /* Custom Alert Box */
 .custom-overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100vw;
     height: 100vh;
     background-color: rgba(0, 0, 0, 0.678);
     z-index: 999;
     display: none;
 }

 .custom-alert {
     position: fixed;
     top: 300px;
     left: 50%;
     transform: translate(-50%, -50%);
     background-color: #fff;
     padding: 20px;
     border-radius: 8px;
     z-index: 1000;
     display: none;
 }

 /* Custom Alert Box Animation */
 @keyframes slideDownFadeIn {
     0% {
         transform: translate(-50%, -100%);
         opacity: 0;
     }

     100% {
         transform: translate(-50%, -50%);
         opacity: 1;
     }
 }

 .custom-alert .alert-ok-btn {
     margin-top: 15px;
     padding: 8px 15px;
     background-color: #023189;
     color: white;
     border: none;
     border-radius: 4px;
     font-size: 18px;
     font-weight: bold;
     cursor: pointer;
     transition: background-color 0.3s;
 }

 .custom-alert .alert-ok-btn:hover {
     background-color: #d6a200;
     color: white;
 }

 /* Services Section Styles */
 #services {
     scroll-margin-top: 190px
 }


 .services {
     justify-content: center;
     align-items: center;
     padding-top: 40px;
     position: relative;
     z-index: 20;
 }

 .services .container {
     min-width: 1200px;
 }

 .services h2 {
     color: #023189;
     text-align: center;
     font-size: 50px;
     font-style: normal;
     font-weight: 800;
     line-height: normal
 }

 .services .sub-heading {
     color: #000;
     text-align: center;
     font-size: 30px;
     font-style: normal;
     font-weight: 300 !important;
     line-height: normal
 }

 .services .sub-heading span {
     font-weight: 700 !important;
 }

 .services .row {
     justify-content: center
 }

 .responsive-cards {
     display: none
 }

 .desktop-cards .card,
 .responsive-cards .card {
     width: 100%;
     height: 100%;
     padding: 0%;
     background: transparent;
     border: none;
     transition: transform 0.3s ease-in-out;
     cursor: pointer;
 }

 .desktop-cards .card:hover {
     transform: scale(1.1);
 }

 .desktop-cards .card .card-img-top,
 .responsive-cards .card .card-img-top {
     width: 92%;
     display: flex;
     justify-self: center;
     margin: 0 auto;
     margin-bottom: 0px;
     border-radius: 4px;
     box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
 }

 .desktop-cards .card-body,
 .responsive-cards .card-body {
     background-image: url('../img/services/card-body-img.png'), url('../img/services/card-body-img.png');
     background-size: 100% 100%, 100% 100%;
     background-position: top center, bottom center;
     background-repeat: no-repeat no-repeat;
     text-align: start;
     padding-left: 20px;
     padding-right: 20px;
     padding-top: 60px;
     padding-bottom: 40px;
     height: 100%;
     margin-top: -35px;
 }

 .desktop-cards .col-md-4:first-of-type .card .card-body,
 .desktop-cards .col-md-4:nth-of-type(2) .card .card-body,
 .desktop-cards .col-md-4:nth-of-type(3) .card .card-body {
     margin-top: -40px;
 }

 .desktop-cards .col-md-4:nth-of-type(4) .card .card-body,
 .desktop-cards .col-md-4:nth-of-type(5) .card .card-body,
 .desktop-cards .col-md-4:nth-of-type(6) .card .card-body {
     margin-top: -50px;
 }

 .desktop-cards .col-md-4:nth-of-type(7) .card .card-body,
 .desktop-cards .col-md-4:nth-of-type(8) .card .card-body,
 .desktop-cards .col-md-4:nth-of-type(9) .card .card-body {
     margin-top: -60px;
 }

 .desktop-cards .card-body .card-title,
 .responsive-cards .card-body .card-title {
     font-size: 19px;
     color: #023189;
     font-family: 'Inter', sans-serif;
     font-style: normal;
     font-weight: 900;
     line-height: normal;
 }

 .responsive-cards .card-body .card-title {
     white-space: nowrap !important;
     font-size: clamp(14px, 2vw, 15px);
 }

 .desktop-cards .card-body .card-text,
 .responsive-cards .card-body .card-text {
     color: #000;
     font-family: 'Inter', sans-serif;
     font-style: normal;
     font-weight: 600;
     line-height: 30px;
     margin-bottom: 10px;
 }

 .responsive-cards .card .card-text {
     color: rgba(0, 0, 0, 0.73);
     font-size: clamp(13px, 2vw, 14px);
     display: -webkit-box;
     -webkit-line-clamp: 4;
     -webkit-box-orient: vertical;
     overflow: hidden;
     text-overflow: ellipsis;
     position: relative;
     z-index: 10;
 }

 .responsive-cards .card .card-text.expanded {
     display: block;
     -webkit-line-clamp: unset;
     overflow: visible;
 }

 .read-more-btn {
     padding: 0%;
     background: transparent;
     border: none;
     color: #257adb;
 }


 .responsive-cards .carousel {
     max-width: 400px;
     margin: 0 auto;
     position: relative;
     min-height: 450px;
     transition: min-height 0.3s ease-in-out;
 }

 /* Carousel Indicators  */
 .services-cards-indicators {
    position: relative;
     z-index: 10;
     margin: auto;
     transition: all 0.3s ease-in-out;
 }


 .services-cards-indicators [data-bs-target] {
     width: 12px;
     height: 12px;
     border: 1px solid #606060;
     background: #ffffff;
     border-radius: 50%;
     cursor: pointer;
     box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25) inset;
 }

 .services-cards-indicators button.active {
     border: none;
     background: linear-gradient(180deg, #FFB81D 0%, #996E11 218.75%);
     box-shadow: 0px 0.5px 1px rgba(0, 0, 0, 0.25);
 }

 .services .btn {
     width: 150px;
     height: 60px;
     background: url(../img/services/view-all-button.png) no-repeat center center;
     background-size: contain;
     border: none;
     will-change: transform;
     cursor: pointer;
 }

 .services .btn:hover {
     transform: scale(1.1);
     transition: transform .3s ease-in-out
 }

 .line-container {
     text-align: center;
     margin-top: 10px
 }

 .line-container-img {
     max-width: 100%;
     height: auto
 }

 /* Technologies Section Styles */
 .technologies {
     margin: 10px 0;
     margin-bottom: 0;
     padding: 10px 0;
     position: relative;
     z-index: -1000;
 }

 .technologies .container {
     position: relative;
     padding: 0 20px;
     background-size: cover;
     background-position: center;
     border: none;
     outline: 0;
     min-width: 1200px;
 }

 .technologies .container::after {
     top: 8px
 }

 .technologies h2 {
     font-size: 50px;
     font-weight: 800;
     text-transform: capitalize;
     color: #023189;
     margin-top: 90px;
     margin-bottom: 30px;
     text-align: center
 }

 .technologies .table-container {
     background-image: url(../img/technologies/bg.webp), url(../img/technologies/bg.webp);
     background-size: 100% 100%, 100% 100%;
     background-position: top center, bottom center;
     background-repeat: no-repeat no-repeat;
     padding: 98px 50px;
     padding-right: 80px;
     min-width: 100%;
     margin-left: -10px;
 }

 .technologies table {
     width: 100%;
 }

 .technologies table td {
     padding: 20px;
     vertical-align: middle;
     text-align: center;
     background: 0 0;
     border-bottom: 2px solid #000 !important;
 }

 .table tbody tr:last-of-type td {
     border-bottom: none !important;
 }

 .technologies table td:first-of-type {
     font-weight: 700;
     font-size: 24px;
     text-transform: capitalize;
     border-right: 3px solid #000 !important;
 }

 .technologies table td:last-of-type {
     padding: 20px;
     justify-content: left
 }

 .technologies table .logos img {
     max-width: 100px;
     height: auto;
     margin: 30px;
     transition: transform .3s;
     will-change: transform;
 }

 .technologies table .logos img:hover {
     transform: scale(1.1)
 }

 /* Backend */
 .lazy-section:nth-of-type(1)>.logos>img:nth-child(1) {
     max-width: 90px
 }

 .lazy-section:nth-of-type(1)>.logos>img:nth-child(2) {
     max-width: 140px
 }

 .lazy-section:nth-of-type(1)>.logos>img:nth-child(3) {
     max-width: 60px
 }

 .lazy-section:nth-of-type(1)>.logos>img:nth-child(4) {
     max-width: 100%;
     height: auto;
     margin-top: -5px
 }

 /* Frontend */
 .lazy-section:nth-of-type(2)>.logos>img:nth-child(1) {
     max-width: 80px
 }

 .lazy-section:nth-of-type(2)>.logos>img:nth-child(2) {
     max-width: 140px
 }

 .lazy-section:nth-of-type(2)>.logos>img:nth-child(3) {
     max-width: 75px
 }

 .lazy-section:nth-of-type(2)>.logos>img:nth-child(4) {
     max-width: 90px;
     margin-top: 15px
 }

 /* DevOps & Cloud */
 .lazy-section:nth-of-type(3)>.logos>img:nth-child(1) {
     max-width: 130px
 }

 .lazy-section:nth-of-type(3)>.logos>img:nth-child(2) {
     max-width: 80px;
     margin-top: 50px
 }

 .lazy-section:nth-of-type(3)>.logos>img:nth-child(3) {
     max-width: 220px
 }

 /* AI & ML */
 .lazy-section:nth-of-type(4)>.logos>img:nth-child(1) {
     max-width: 100%;
     height: auto;
 }

 .lazy-section:nth-of-type(4)>.logos>img:nth-child(2) {
     max-width: 100%;
     height: auto;
 }

 .lazy-section:nth-of-type(4)>.logos>img:nth-child(3) {
     max-width: 130px
 }

 .lazy-section:nth-of-type(4)>.logos>img:nth-child(5) {
     max-width: 80px
 }

 .lazy-section:nth-of-type(4)>.logos>img:nth-child(6) {
     max-width: 100%;
     height: auto;
 }

 .lazy-section:nth-of-type(4)>.logos>img:nth-child(7) {
     max-width: 90px
 }

 /* QA */
 .lazy-section:nth-of-type(5)>.logos>img:nth-child(1) {
     max-width: 160px
 }

 .lazy-section:nth-of-type(5)>.logos>img:nth-child(2) {
     max-width: 100%;
     height: auto;
 }

 .lazy-section:nth-of-type(5)>.logos>img:nth-child(3) {
     max-width: 120px
 }

 .lazy-section:nth-of-type(5)>.logos>img:nth-child(5) {
     max-width: 100%;
     height: auto;
 }

 .lazy-section:nth-of-type(5)>.logos>img:nth-child(6) {
     max-width: 90px
 }

 /* UI/UX */
 .lazy-section:nth-of-type(6)>.logos>img:nth-child(1) {
     max-width: 90px
 }

 .lazy-section:nth-of-type(6)>.logos>img:nth-child(2) {
     max-width: 140px;
 }

 .lazy-section:nth-of-type(6)>.logos>img:nth-child(3) {
     max-width: 70px
 }

 .lazy-section:nth-of-type(6)>.logos>img:nth-child(5) {
     max-width: 100%;
     height: auto;
 }

 .lazy-section:nth-of-type(6)>.logos>img:nth-child(6) {
     max-width: 100%;
     height: auto;
 }

 .lazy-section:nth-of-type(6)>.logos>img:nth-child(7) {
     max-width: 100%;
     height: auto;
 }

 /* Mob App Development */
 .lazy-section:nth-of-type(7)>.logos>img:nth-child(1) {
     max-width: 100%;
     height: auto;
 }

 .lazy-section:nth-of-type(7)>.logos>img:nth-child(2) {
     max-width: 100px
 }

 .lazy-section:nth-of-type(7)>.logos>img:nth-child(3) {
     max-width: 70px
 }

 .lazy-section:nth-of-type(7)>.logos>img:nth-child(6) {
     max-width: 170px
 }

 /* Map Section Styles */
 .map {
     position: relative;
     z-index: -1000;
 }

 .map h2 {
     color: #023189;
     font-family: 'Inter', sans-serif;
     font-display: swap;
     font-size: 50px;
     font-style: normal;
     font-weight: 700;
     line-height: normal;
     text-transform: capitalize
 }

 .map .col {
     border-radius: 334px;
     border: 6px solid #023189;
     background: #fff;
     margin: auto;
     margin-bottom: 30px;
     height: 450px;
 }

 .map video {
     border-radius: 309.5px;
     background: #d3d3d3 -76.718px -318.166px/116.004% 216% no-repeat;
     max-width: 100%;
     height: 430px;
     margin: 0 auto;
     display: flex;
 }



 /* Footer Styles */
 .footer {
     background-image: url('../img/footer/bg.webp');
     background-repeat: no-repeat;
     background-size: cover;
     color: #fff;
     text-align: left;
     padding-top: 10px;
     position: relative;
     overflow: hidden;
     z-index: 30;
 }

 .footer .container-fluid {
     position: relative;
     z-index: 5;
     height: 500px;
     width: 100vw;
     border-bottom-right-radius: 15px
 }

 .footer .container-fluid::before {
     content: '';
     clip-path: polygon(0 0, 79% 0, 90% 100%, 0 100%);
     position: absolute;
     height: 95%;
     width: 91.7%;
     background: #fff;
     top: 20px;
     left: 0;
     z-index: -5;
     border-radius: 5px;
     border-bottom-right-radius: 10px
 }

 footer .container-brand {
     height: auto;
     position: absolute;
     top: -3px;
     left: 15px;
     z-index: 10
 }

 footer .container-brand .logo {
     width: 330px;
     max-width: 330px;
     min-width: 0%;
     height: auto
 }

 .footer .container-brand .logo:hover {
     opacity: .7;
     transition: opacity .3s ease-in-out
 }

 .footer-social-links {
     position: absolute;
     right: 5%;
     top: 8%;
     display: flex;
     justify-content: center
 }

 .social-icon {
     display: flex;
     justify-content: center;
     align-items: center;
     width: 35px;
     height: 35px;
     border-radius: 50% !important;
     text-decoration: none;
     border: 2px solid transparent;
     background-image: linear-gradient(#fff, #fff), linear-gradient(45deg, #ffc107, #d8a201);
     background-origin: border-box;
     background-clip: padding-box, border-box;
     box-shadow: 0 8px 12px rgba(0, 0, 0, .2);
     background-color: #fff;
     transition: transform 0.8s ease-in-out;
     position: relative;
     overflow: hidden;
     will-change: transform;
 }

 .social-icon:hover {
     background: #ffb81d;
     transform: scale(1.1);
 }

 .social-icon i {
     background: linear-gradient(45deg, #ffc107, #d8a201);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     transition: color .3s ease-in-out;
     font-size: 21px
 }

 .social-icon:hover i {
     -webkit-text-fill-color: #fff;
     color: #fff
 }

 .footer-line-container {
     min-width: 100%
 }

 .footer-line-container .col-7 {
     background-color: #023189;
     overflow: visible;
     height: 3px
 }

 .footer-line-container .col-5 {
     background-color: #b6bfca;
     overflow: visible;
     height: 3px;
     transform: scale(-1)
 }

 .footer-line-container .col-lg-9 {
     background-color: #023189;
     overflow: visible;
     height: 4px;
     width: 74.5%
 }

 .footer-line-container .col-lg-12 {
     background-color: #b6bfca;
     overflow: visible;
     height: 4px;
     transform: scale(-1);
     width: 25%
 }

 .footer .bottom-navigation {
     margin: 0 auto;
     margin-left: 20px;
     margin-top: 0;
     min-width: 100%
 }

 .other-links {
     max-width: 100%;
     display: flex;
     flex-wrap: wrap;
     gap: 1rem
 }

 .other-links .col {
     flex: 1 1 calc(33.33% - 1rem);
     max-width: calc(33.33% - 1rem)
 }

 .footer .contact-info {
     text-align: left;
     line-height: 2;
     margin-left: auto
 }

 .footer .contact-info .footer-heading {
     font-size: 1.3rem;
     font-weight: 700
 }

 .footer .contact-info a {
     color: #fff;
     font-size: 14px
 }

 .footer .contact-info li img {
     width: 14px;
     height: auto;
 }

 .footer .contact-info li:nth-of-type(2) img {
     width: 16px;
     height: 17px;
 }

 .footer .contact-info li:nth-of-type(3) img {
     margin-left: 2px;
     width: 16px;
 }

 .footer .footer-heading {
     font-size: 1.2rem;
     font-weight: 700;
     margin-bottom: 1rem;
     color: #023189
 }

 .footer li,
 .footer a {
     text-decoration: none;
     color: #464444;
     transition: color .3s;
     font-size: 14px;
     cursor: pointer;
 }

 .footer li:hover,
 .footer a:hover {
     color: #ffc107
 }

 .copyright {
     display: flex;
     align-items: center;
     justify-content: center
 }

 .copyright p {
     color: #fff;
     font-family: 'Inter', sans-serif;
     font-display: swap;
     font-size: 18px;
     font-style: normal;
     font-weight: 700;
     line-height: normal
 }