/* *************************************************** *
 * File Name:        style.css
 * Description:      Styles for the Delta Website
 * Author:           SE-2
 * Created Date:     2025-02-11
 * Last Modified:    2025-02-11
 * Version:          1.1
 * Project:          Delta Website
 * Company:          Progmize Software Systems
 * Contact:          tech@progmize.com
 *
 * Revision History:
 * 2025-02-11   SE-2    Initial creation for project setup, added styles for Header, Hero, Table and Footer.
 * ***************************************************  */

 :root {
     --black: #000;
     --black-deep: #010101;
     --black-rich: #020202;
     --charcoal-black: #1a1919;
     --navy-blue: #0E233C;
     --deep-navy: #071F33;
     --bright-blue: #0990FF;
     --medium-blue: #165E99;
     --deep-blue: #004b80;
     --dark-steel-blue: #184476;
     --dark-royal-blue: #003366;
     --steel-gray: #7a92a5;
     --white: #ffffff;
     --soft-white: #F7F7F7;
     --off-white: #FFFDFD;
     --pale-gray: #f0f0f0;
     --light-grayish-white: #f8f9fa;
     --light-grayish: #F1F1F1;
     --light-silver: #e2e2e2;
     --light-gray: #dddddd;
     --gray: #ccc;
     --silver-gray: #BBB8B8;
     --medium-gray: #888888;
     --grayish-dark: #747474;
     --charcoal-gray: #4D4747;
     --golden-yellow: #f8c20e;
     --white-opacity-80: rgba(255, 255, 255, 0.8);
     --light-gray-opacity-80: rgba(236, 235, 235, 0.8);
     --soft-gray: rgb(170, 168, 168);
     --semi-black: rgba(0, 0, 0, 0.50);
     --black-opacity-high: rgba(0, 0, 0, 0.82);
     --black-opacity-low: rgba(17, 17, 17, 0.13);
     --font-family: 'Poppins', sans-serif;
     --deep-navy-gradient: linear-gradient(180deg, #1D4E86 0%, #0E233C 100%);
     --blue-gradient: linear-gradient(90deg, #165E99 0%, #071F33 100%);
     --blue-gradient-deep: linear-gradient(264deg, rgba(24, 68, 118, 0.94) -23.55%, rgba(14, 25, 37, 0.94) 89.38%);
     --gray-gradient-neutral: linear-gradient(90deg, #E4E4E4 0%, #B7B7B7 100%);
     --gray-gradient-mild: linear-gradient(90deg, #F6F6F6, #A9A9A9);
     --gray-gradient-soft: linear-gradient(90deg, rgba(246, 246, 246, 0.94) 19.04%, rgba(169, 169, 169, 0.94) 105.05%);
     --gray-gradient-light: linear-gradient(180deg, #DFDFDF 0.03%, #797979 185.33%);
     --gray-gradient-medium: linear-gradient(180deg, #F4F4F4 0%, #A9A9A9 98.56%);
     --gray-gradient-dark: linear-gradient(180deg, #D4D4D4 0%, #A3A3A3 100%);
     --popup-gradient: linear-gradient(88deg, #F6F6F6 -44.14%, #A9A9A9 208.24%);
     --box-shadow-soft: 0 10px 10px rgba(0, 0, 0, 0.2);
     --box-shadow-subtle: 2px 2px 5px rgba(0, 0, 0, 0.2);
     --box-shadow-inset-small: 0px 4px 4px 0px rgba(0, 0, 0, 0.25) inset;
     --box-shadow-inset-medium: 5px 5px 4px 0px rgba(0, 0, 0, 0.25) inset;
     --box-shadow-inset-large: 8px 8px 4px 0px rgba(0, 0, 0, 0.25) inset;
 }

 /* HTML Styles */
 html {
     overflow-y: scroll;
 }

 body.modal-open {
     padding-right: 0 !important;
     overflow-x: hidden;
 }

 /* Tooltip Styles */
 [data-title] {
     position: relative;
     cursor: pointer;
 }

 [data-title]::after {
     content: attr(data-title);
     position: absolute;
     background: var(--black-opacity-high);
     color: var(--white);
     padding: 5px 10px;
     border-radius: 5px;
     font-size: 12px;
     font-family: var(--font-family);
     font-weight: normal;
     white-space: nowrap;
     top: 100%;
     left: 50%;
     transform: translateX(-50%);
     opacity: 0;
     visibility: hidden;
     transition: opacity 0.3s ease-in-out;
     z-index: 1;
 }

 [data-title]:hover::after {
     opacity: 1;
     visibility: visible;
 }

 .img-tooltip {
     position: relative;
     display: inline-block;
     cursor: pointer;
 }

 .img-tooltip::after {
     content: attr(data-title);
     position: absolute;
     background: var(--black-opacity-high);
     color: var(--white);
     padding: 5px 10px;
     border-radius: 5px;
     font-size: 12px;
     white-space: nowrap;
     top: -35px;
     left: 50%;
     transform: translateX(-50%);
     opacity: 0;
     visibility: hidden;
     transition: opacity 0.3s ease-in-out;
 }

 .img-tooltip:hover::after {
     opacity: 1;
     visibility: visible;
 }

 .td-tooltip {
     position: relative;
     cursor: pointer;
 }

 .td-tooltip::after {
     width: 100%;
     content: attr(data-title);
     position: absolute;
     background: var(--black-opacity-high);
     color: var(--white);
     padding: 5px 10px;
     border-radius: 5px;
     font-size: 9px;
     white-space: wrap;
     top: 60%;
     left: 50%;
     transform: translateX(-50%);
     opacity: 0;
     visibility: hidden;
     transition: opacity 0.3s ease-in-out;
 }

 .td-tooltip:hover::after {
     opacity: 1;
     visibility: visible;
 }

 /* Cookie Pop-Up Styles  */
 .cookie-popup {
     position: fixed;
     bottom: 0px;
     left: 50%;
     transform: translateX(-50%);
     max-width: 100%;
     min-width: 100%;
     display: none;
     z-index: 1000;
     background: var(--DESIGNER2, linear-gradient(90deg, #165E99 0.29%, #1F1C1C 102.45%));
     backdrop-filter: blur(2px);
     box-shadow: var(--box-shadow-inset-small);
 }

 .cookie-popup h2 {
     margin-bottom: 20px;
     font-family: var(--font-family);
     font-size: clamp(20px, 2vw, 28px);
     font-style: normal;
     font-weight: 700;
     color: var(--white);
 }

 .cookie-popup p {
     margin-bottom: 10px;
     font-family: var(--font-family);
     font-size: clamp(14px, 2vw, 18px);
     font-style: normal;
     font-weight: 600;
     color: var(--white);
     /* background: var(--blue-gradient);
     background-clip: text;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent; */
 }

 .cookie-popup hr {
     background: var(--deep-navy);
     height: 1px;
     opacity: 0;
 }

 .cookie-popup button {
     min-width: 100px;
     border-radius: 1.414px;
     border: 0px solid #184476;
     background: #FFF;
     box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
     color: #184476;
     font-family: var(--font-family);
     font-size: clamp(10px, 2vw, 15px);
     font-style: normal;
     font-weight: 600;
 }

 .cookie-popup button:hover {
     background: #dddcdc;
     color: #184476;
 }

 /* .cookie-popup button:first-of-type {
     background: var(--white);
     color: var(--black);
 } */

 /* Header Styles */
 header {
     background-image: url('../img/header/header-bg.png');
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
     min-width: 100%;
     max-width: 100%;
 }

 .navbar-brand {
     background-image: url('../img/header/header-logo-bg.png');
     background-repeat: no-repeat;
     background-position: left;
     background-size: 100px;
 }

 .navbar-toggler {
     border-radius: 4px;
     background: #184476;
 }

 .navbar-toggler-icon {
     filter: invert(1);
 }

 .all-menu {
     font-size: clamp(12px, 2vw, 16px);
 }

 .navbar-brand img {
     width: 200px;
     max-width: 100%;

 }

 .nav-link {
     color: var(--white) !important;
     font-weight: 500;
 }

 .btn-custom {
     background-color: var(--dark-steel-blue);
     color: var(--white);
     border: none;
     padding: 8px 16px;
     border-radius: 1.414px;
     border: 0px solid #184476;
     background: linear-gradient(181deg, #165E99 0.46%, #071F33 299.7%);
     box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
 }

 .btn-custom:hover {
     background-color: var(--deep-blue);
 }

 header a {
     color: var(--white);
 }


 header a:hover {
     color: var(--light-gray);
 }

 header .dropdown {
     align-items: center;
     text-align: center;
 }

 footer {
     background-image: url('../img/header/header-bg.png');
     background-position: center;
 }

 .hero {
     border-top: 4px solid var(--medium-blue);
     margin-top: 3px;
 }

 .hero img {
     max-width: 86%;
     margin: 0 auto;
 }

 header .main-menu {
     background: var(--blue-gradient);
 }

 .main-menu {
     border-radius: 4px;
     border: 2px solid var(--deep-navy);
     opacity: 0.94;
     background: var(--gray-gradient-light);
     text-align: start;
     color: var(--deep-navy);
     font-family: var(--font-family);
     font-style: normal;
     font-weight: 400;
 }

 .dropdown .main-menu .dropdown-header {
     font-size: 16px;
 }

 .search-dropdown {
     border: 1px solid var(--gray);
     border-radius: 5px;
     padding: 1px 10px;
     width: 100%;
 }

 .search-dropdown-container .input-group {
     border-radius: 3px;
     border: 1px solid var(--black);
     background: var(--black-opacity-low);
 }

 .search-dropdown-container .input-group-text {
     background-color: var(--navy-blue);
     color: var(--white);
     border: none;
     border-radius: 0%;
     font-size: clamp(4px, 2vw, 10px);
     box-shadow: var(--box-shadow-inset-small);
 }

 .search-dropdown-container .input-group .form-control {
     background: var(--white);
     box-shadow: var(--box-shadow-inset-small);
     color: var(--medium-gray);
     font-family: var(--font-family);
     font-size: clamp(8px, 2vw, 12px);
     font-style: normal;
     font-weight: 700;
 }


 .dropdown-items-container {
     background-image: var(--gray-gradient-medium);
 }

 /* Section One Styes */
 .search-filter-button {
     margin: 0 auto;
 }

 .filter-button,
 .all-customers {
     width: max-content;
     border-radius: 10px;
     border: 1px solid var(--black);
     background: var(--black-opacity-low);
     margin: 0 auto;
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
 }

 .btn-group .btn-secondary {
     width: 130px;
     border-radius: 10px;
     border: 1px solid var(--black-deep);
     background: var(--gray-gradient-dark);
     color: var(--black-rich);
     font-size: 14px;
     font-style: normal;
     font-weight: 600;
 }

 .all-customers .btn-group .btn-secondary {
     width: 180px;
 }

 /* Style the custom arrow image */
 .custom-arrow {
     width: 18px;
     height: 18px;
 }

 .custom-dropdown-btn::after {
     display: none !important;
 }

 .search-container {
     max-width: 400px;
     margin: auto;
 }

 .search-filter-button .input-group {
     border-radius: 10px;
     border: 1px solid var(--black);
     background: var(--black-opacity-low);
 }

 .search-filter-button .input-group-text {
     background-color: var(--medium-blue);
     color: var(--silver-gray);
     border: none;
     box-shadow: var(--box-shadow-inset-small);
 }

 .search-filter-button .input-group-text:hover {
     background: var(--dark-steel-blue);
 }

 .search-filter-button .input-group .form-control {
     border-radius: 8px;
     border: 1px solid var(--charcoal-gray);
     background: var(--white);
     box-shadow: var(--box-shadow-inset-small);
     color: var(--medium-gray);
     font-family: var(--font-family);
     font-size: clamp(13px, 2vw, 14px);
     font-style: normal;
     font-weight: 700;
 }

 /* Table Styles */
 .table-container {
     overflow: auto;
 }

 .table-section {
     padding: 0 30px;
 }

 .table-container {
     color: var(--white);
     border-radius: 10px;
     border: 4px solid var(--deep-navy);
     background: var(--blue-gradient-deep);
     box-shadow: var(--box-shadow-inset-small);
     max-width: 100%;
     max-height: 474px;
     overflow: hidden;
     position: relative;
     display: flex;
     flex-direction: column;
     z-index: 99;
 }

 .table-wrapper {
     max-width: 100.5%;
     min-width: 100.5%;
     max-height: calc(570px - 1px);
     overflow-y: hidden;
     overflow-x: auto;
     position: relative;
     flex-grow: 1;
 }

 .inventory-table {
     width: 100%;
     border-collapse: collapse;
     min-width: 1650px;
 }

 .inventory-table thead {
     display: flex;
     width: 100%;
     table-layout: fixed;
     background: var(--blue-gradient-deep);
     border-bottom: 2px solid var(--white);
     position: sticky;
     top: 0;
     z-index: 900;
 }

 .inventory-table tbody {
     /* border-spacing: 10px; */
     width: 100%;
     display: flex;
     flex-direction: column;
     max-height: 685px;
     overflow-y: hidden;
     overflow-x: hidden;
     padding: 0 10px;
     padding-left: 0;
 }

 .inventory-table tbody:before {
     content: "@";
     display: block;
     line-height: 10px;
     text-indent: -99999px;
 }

 .inventory-table tbody tr {
     border-radius: 10px;
     background: var(--gray-gradient-soft);
     box-shadow: var(--box-shadow-inset-large);
 }

 /* Ensure proper column alignment */
 .inventory-table thead tr,
 .inventory-table tbody tr {
     display: table;
     width: 100%;
     table-layout: fixed;
     margin-bottom: 10px;
     align-items: center;
     justify-content: center;
 }

 .inventory-table thead tr:last-of-type,
 .inventory-table tbody tr:last-of-type {
     margin-bottom: 2px;
 }

 .inventory-table th {
     color: var(--white);
     font-size: 15px;
 }

 .inventory-table th .btn-container {
     order: 1;
     margin-right: 6px;
     margin-top: -1.5%;
     gap: 1px;
 }

 .inventory-table th span {
     order: 2;
     margin-left: 0;
 }

 .sort-button {
     background: none;
     border: none;
     cursor: pointer;
     font-size: 14px;
     color: var(--white);
     height: 2px;
     padding: 0;
 }

 .sort-button i {
     font-size: 12px;
     color: var(--white);
 }

 .sort-button i:hover {
     color: var(--soft-gray);
 }

 .inventory-table th,
 .inventory-table td {
     font-family: var(--font-family);
     font-size: 12px;
     text-align: start;
     padding: 5px;
     background: none;
     border: none;
     align-items: center;
     justify-content: center;
     vertical-align: middle !important;
 }

 .ellipsis {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     max-width: 100px;
     display: inline-block;
     vertical-align: middle;
 }

 /* Scrollbar for tbody */
 .inventory-table tbody::-webkit-scrollbar,
 .table-wrapper::-webkit-scrollbar {
     width: 10px;
     height: 10px;
 }

 /* Custom scrollbar thumb (scroll handle) */
 .inventory-table tbody::-webkit-scrollbar-thumb,
 .table-wrapper::-webkit-scrollbar-thumb {
     border: 1px solid var(--white);
     background: var(--deep-navy-gradient);
     border-radius: 5px;
 }

 /* Scrollbar track (background behind the scrollbar) */
 .inventory-table tbody::-webkit-scrollbar-track,
 .table-wrapper::-webkit-scrollbar-track {
     background: var(--light-grayish);
     border-radius: 5px;
     background: var(--off-white);
     box-shadow: var(--box-shadow-inset-medium);
     margin-top: 32px;
 }

 .table-wrapper::-webkit-scrollbar-corner {
     background: transparent !important;
 }


 .table img {
     width: 80px;
     height: auto;
     border-radius: 5px;
 }

 .table .key,
 .table .signal {
     width: 26px;
     height: auto;
     border-radius: 5px;
 }

 .table tbody i {
     font-size: clamp(13px, 2vw, 18px);
     color: var(--medium-blue);
     margin-left: 15px;
 }

 .table .i-text-light {
     color: var(--grayish-dark);
 }

 .action-btn {
     background-color: var(--golden-yellow);
     color: var(--black);
     border: none;
     padding: 5px 10px;
     border-radius: 5px;
     cursor: pointer;
 }

 /* Gallery Modal Styles */
 #sendNoteModal {
     /* overflow-x: hidden;
    width: 100px; */
 }

 #imageModal .imgContent,
 #sendNoteModal .modal-content {
     border-radius: 24px;
     border: 4px solid var(--black);
     background: var(--popup-gradient);
     box-shadow: var(--box-shadow-inset-small);
 }

 #imageModal .imgHeader {
     border-bottom: 2px solid var(--deep-navy);
 }

 #sendNoteModal .modal-header {
     border-bottom: 3px solid var(--deep-navy);
 }

 #sendNoteModal .modal-header h5,
 #sendNoteModal .modal-body h6 {
     color: var(--dark-steel-blue);
     font-family: var(--font-family);
     font-size: clamp(22px, 2vw, 28px);
     font-style: normal;
     font-weight: 700;
 }

 #sendNoteModal .modal-body h6 {
     font-size: clamp(16px, 2vw, 20px);
 }

 #sendNoteModal .modal-body .note-list {
     border-radius: 4px;
     border: 1px solid var(--charcoal-gray);
     background: var(--white);
     box-shadow: var(--box-shadow-inset-small);
     color: var(--medium-gray);
     font-family: var(--font-family);
     font-size: clamp(16px, 2vw, 18px);
     font-style: normal;
     font-weight: 500;
     padding-bottom: 20px;
 }

 #imageModal .imgFooter {
     border-top: 2px solid var(--deep-navy);
 }

 #sendNoteModal .modal-body textarea {
     border-radius: 4px;
     border: 1px solid var(--charcoal-gray);
     background: var(--white);
     box-shadow: var(--box-shadow-inset-small);
 }

 #sendNoteModal .modal-footer {
     border-top: none;
 }

 #sendNoteModal .modal-body button {
     border-radius: 4px;
     background: var(--dark-steel-blue);
     color: var(--white);
     font-family: var(--font-family);
     font-size: clamp(12px, 2vw, 16px);
     font-style: normal;
     font-weight: 700;
 }

 #sendNoteModal .modal-body button:hover {
     background: var(--dark-royal-blue);
 }

 .btn-share,
 .btn-download,
 .btn-close {
     background: transparent;
     background-image: url('../img/gallery/Share.png');
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     border: none;
 }

 .btn-download {
     background-image: url('../img/gallery/Down\ Arrow.png');
 }

 .btn-close {
     background-image: url('../img/gallery/Multiply.png');
     opacity: 100;
 }

 .btn-share i,
 .btn-download i {
     opacity: 0;
 }

 /* Carousel Previous and Next Icons */
 .carousel-control-prev-icon,
 .carousel-control-next-icon {
     background: var(--white);
     border-radius: 50%;
     width: 35px;
     height: 35px;
     background-size: 60%;
     background-position: center;
     background-repeat: no-repeat;
     filter: invert(100%);
 }


 #thumbnail-wrapper {
     min-width: 100%;
     overflow: hidden;
     display: flex;
     align-items: center;
     justify-content: start;
 }


 #thumbnail-container {
     display: flex;
     justify-content: flex-start;
     gap: 6px;
     min-width: 100%;
 }

 .thumbnail-item {
     width: auto;
     height: auto;
     aspect-ratio: 6 / 4;
     max-height: 100px;
     cursor: pointer;
     border: 2px solid var(--medium-blue);
     border-radius: 10px;
     overflow: hidden;
     display: flex;
     align-items: center;
     justify-content: center;
 }


 .thumbnail-item img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }


 .carousel-item {
     max-height: 550px;
 }

 .carousel-inner img {
     width: 100%;
     height: 100%;
     display: block;
     transition: transform 0.3s ease-in-out;
     cursor: zoom-in;
 }

 .carousel-inner img:hover {
     transform: scale(1.5);
 }

 .see-all-btn {
     position: absolute;
     bottom: 10px;
     right: 10px;
     background: var(--white-opacity-80);
     border: none;
     font-size: clamp(7px, 2vw, 14px);
     cursor: pointer;
     z-index: 10;
     border-radius: 5px;
 }

 .see-all-btn i {
     font-size: clamp(7px, 2vw, 14px);
 }

 .see-all-btn:hover {
     background: var(--light-gray-opacity-80);
 }

 /* .d-flex.justify-content-between {
    width: 620px; 
} */

 #prev-btn,
 #next-btn {
     background: transparent;
     color: var(--black-deep);
     border-radius: 500px;
     font-weight: 900;
 }

 .dot-controls {
     display: flex;
     justify-content: center;
     gap: 10px;
     z-index: 22;
 }

 .dot {
     width: 12px;
     height: 12px;
     background-color: var(--steel-gray);
     border-radius: 50%;
     cursor: pointer;
 }

 .dot.active {
     background-color: var(--medium-blue);
     transform: scale(1.2);
 }


 /* GALLERY PAGE STYLES*/
 .gallery-container {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 10px;
     padding: 20px;
 }

 .gallery-container img {
     width: 100%;
     height: auto;
     object-fit: cover;
     object-position: center;
     border-radius: 10px;
     cursor: pointer;
     /* transition: transform 0.3s ease-in-out;
     cursor: zoom-in; */
 }

 /* .gallery-container img:hover {
     transform: scale(1.5);

 } */

 /* Share modal */
 .share-modal,
 #imageModal .share-modal {
     display: none;
     position: absolute;
     top: 100%;
     left: 10%;
     transform: translateX(-86%);
     width: max-content;
     z-index: 1050;
     border-radius: 5px;
     padding: 10px;
     background: var(--white);
     box-shadow: var(--box-shadow-soft);
     border: 1px solid var(--light-silver);
     transition: 0.3s step-end;
 }


 .share-modal .modal-title,
 #imageModal .share-modal .modal-title {
     font-size: clamp(12px, 2vw, 14px);
     font-weight: bold;
 }

 #imageModal .share-modal .modal-header {
     border-bottom: none;
 }


 .share-modal .modal-body,
 #imageModal .share-modal .modal-body {
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: row;
     justify-content: center;
     align-items: stretch;
     padding: 10px 0;
 }

 #imageModal .share-modal .modal-content {
     outline: none;
     border: none;
 }

 .share-modal .modal-body input,
 #imageModal .share-modal input {
     font-size: clamp(12px, 2vw, 12px);
     outline: none;
     border: none;
     background: transparent;
     width: 100%;
 }

 .share-modal .modal-body .btn,
 #imageModal .share-modal .btn {
     font-size: clamp(12px, 2vw, 12px);
     white-space: nowrap;
 }

 #imageModal .share-modal .btn-close {
     padding: 0;
 }

 /* LOGIN FORM STYLES */
 .login-card {
     background-image: url('../img/login/form-bg.png'),
         url('../img/login/form-bg.png');
     background-position: center bottom;
     background-size: cover;
     border-radius: 45px;
     border: 2px solid var(--white);
     padding: 40px 60px;
     max-width: 600px;
     min-width: 100px;
     margin: 0 auto;
     width: 600px;
     color: var(--white);
 }

 .login-card h3 {
     color: var(--soft-white);
     font-family: var(--font-family);
     font-size: 28px;
     font-style: normal;
     font-weight: 700;
 }

 .login-card .input-group {
     border-radius: 10px;
     border: 1px solid var(--black);
     background: var(--gray-gradient-neutral);
 }

 .login-card .input-group-text {
     background: transparent;
     border: none;
     color: var(--dark-steel-blue);
 }

 .input-group-text img {
     width: 26px;
     height: 26px;
     object-fit: cover;
 }

 .login-card .form-control {
     background: var(--white);
     border: none;
     color: var(--charcoal-black);
     font-family: var(--font-family);
     font-size: 18px;
     font-style: normal;
     font-weight: 700;
 }

 .form-control::placeholder {
     color: var(--medium-gray);
 }

 .btn-primary {
     background-color: var(--white);
     color: var(--dark-royal-blue);
     border: none;
 }

 .btn-primary:hover {
     background-color: var(--pale-gray);
 }

 .login-card p {
     font-family: var(--font-family);
     font-size: 18px;
     font-style: normal;
     font-weight: 400;
 }

 .forgot-password,
 .signup-link {
     color: var(--bright-blue);
     font-family: var(--font-family);
     font-size: 18px;
     font-style: normal;
     font-weight: 400;
     text-decoration: none;
 }

 .sign-in {
     color: var(--dark-steel-blue);
     font-family: var(--font-family);
     font-size: 18px;
     font-style: normal;
     font-weight: 700;
 }

 .sign-in:hover {
     color: var(--bright-blue);
 }


 /* Signup and Forgot Password Modal*/
 .signup-modal,
 .forgotPassword-modal {
     position: absolute;
     top: 180px;
     width: 100%;
     height: 360px;
     background: none !important;
     display: none;
 }


 .signup-modal .modal-dialog,
 .forgotPassword-modal .modal-dialog {
     width: 100%;
     height: 100%;
     margin: 0 auto;
     display: flex;
     align-items: center;
     justify-content: center;
     overflow-y: auto;
 }

 .signup-modal .modal-content,
 .forgotPassword-modal .modal-content {
     width: 900px;
     max-width: 900px;
     height: 100%;
     border-radius: 15px;
     border: 5px solid var(--deep-blue);
     background: var(--gray-gradient-mild);
     box-shadow: var(--box-shadow-inset-small);
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     text-align: center;
 }

 /* Modal Header */
 .signup-modal .modal-header,
 .forgotPassword-modal .modal-header {
     width: 100%;
     border-bottom: none;
     display: flex;
     justify-content: flex-end;
     padding: 10px;
 }


 #signupModal .modal-header,
 #forgotPasswordModal .modal-header {
     border-bottom: 2px solid var(--deep-navy);
 }


 #signupModal .modal-body p,
 #signupModal .modal-body a,
 #forgotPasswordModal .modal-body p,
 #forgotPasswordModal .modal-body a {
     background: var(--blue-gradient);
     background-clip: text;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     font-family: var(--font-family);
     font-size: clamp(14px, 2vw, 20px);
     font-style: normal;
     font-weight: 700;
     line-height: 39px;
     text-decoration-line: underline;
     text-decoration-style: solid;
     text-decoration-skip-ink: auto;
     text-decoration-thickness: auto;
     text-underline-offset: auto;
     text-underline-position: from-font;
 }


 /* Dashboard Styles */
 .dashboard .container {
     min-width: 100%;
     padding: 0 40px;
 }


 .status-box {
     color: var(--white);
     padding: 15px;
     text-align: center;
     margin-bottom: 10px;
     border-radius: 15px;
     border: 4px solid var(--medium-blue);
     background: var(--deep-navy-gradient);
     box-shadow: var(--box-shadow-subtle);
     white-space: nowrap;
     overflow: hidden;
     display: flex;
     justify-content: center;
     align-items: center;
     color: var(--white);
     font-family: var(--font-family);
     font-size: clamp(10px, 2vw, 14px);
     font-style: normal;
     font-weight: 700;

 }

 .active {
     background: var(--white);
     color: var(--black);
     border: 4px solid var(--deep-blue);
 }

 .balance-box {
     writing-mode: vertical-rl;
     transform: rotate(360deg);
     background-color: var(--light-grayish-white);
     text-align: center;
     padding: 20px;
     border-radius: 10px;
     cursor: pointer;
     border-radius: 25px;
     border: 4px solid var(--black);
     background: var(--white);
     color: var(--semi-black);
     font-family: "Spline Sans", sans-serif;
     font-size: 15px;
     font-style: normal;
     font-weight: 700;
     line-height: normal;
 }

 .graph-container {
     border-radius: 25px;
     border: 4px solid var(--medium-blue);
     background: var(--white);
     /* box-shadow: 8px 8px 4px 0px rgba(0, 0, 0, 0.25) inset; */
     padding: 0;
     /* max-height: 360px; */
     overflow: hidden;
 }

 .graph-box {
     background-color: var(--dark-royal-blue);
     color: var(--white);
     padding: 10px;
     border-radius: 10px;
     text-align: center;
     border-bottom: 4px solid var(--medium-blue);
     border-top: 4px solid var(--medium-blue);
     background: var(--deep-navy-gradient);
     color: var(--white);
     font-family: var(--font-family);
     font-size: 24px;
     font-style: normal;
     font-weight: 700;
     line-height: normal;
 }

 .graph-container h5 {
     color: var(--medium-blue);
     font-family: var(--font-family);
     font-size: 24px;
     font-style: normal;
     font-weight: 700;
     line-height: normal;
 }

 #quantityChart {
     /* width: 100% !important; */
     height: 400px !important;
     max-height: 200px !important;
 }


 /* HOME PAGE STYLES */
 /* Shiping Section Styles */
 .shipping-section {
     background-image:
      linear-gradient(180deg, rgba(75, 166, 241, 0.664) -22.2%, rgba(7, 31, 51, 0.08) 100%);
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center;
     padding: 40px 0;
 }

 .row.no-gutters {
     margin-right: 0;
     margin-left: 0;
 }

 .shipping-text {
     border-top-left-radius: 12px;
     border-bottom-left-radius: 12px;
     border-radius: 12px 0px 0px 12px;
     background: var(--DESIGNER2, linear-gradient(90deg, #165e99d2 0.29%, #1f1c1cc7 102.45%));
     backdrop-filter: blur(2px);
     padding: 0;
     padding-left: 30px;
     padding-right: 0;
     color: white;
     width: 565px;
     height: 350px;
     position: relative;
     display: flex;
     flex-direction: column;
     justify-content: center;
 }

 .shipping-text h2 {
     font-weight: bold;
     position: relative;
     z-index: 2;
     font-size: 62px;
 }

 /* Positioning "Routes" over the image */
 .shipping-text h2 span {
     font-size: 62px;
     position: absolute;
     left: 643px;
     transform: translateX(-102px);
     color: white;
     z-index: 3;
 }

 .shipping-text p {
     color: #FFF;
     font-family: 'Poppins', sans-serif;
     font-size: 21px;
     font-style: normal;
     font-weight: 700;
     line-height: 180%;
     text-transform: capitalize;
     margin-top: 20px;
 }

 .shipping-text-box .btn-light {
     font-family: 'Poppins', sans-serif;
     font-size: clamp(12px, 2vw, 16px);
     font-style: normal;
     font-weight: 700;
     line-height: normal;
     border-radius: 5px;
     background: #FFF;
     color: #184476;
     box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
     opacity: 0.8;
     padding: 7px 15px;
 }

 .shipping-text-box .btn-light:hover {
     background: #f0f0f0;
     color: #003366;
 }


 .shipping-img img {
     width: 100%;
     object-fit: cover;
     height: 350px;
     border-top-right-radius: 12px;
     border-bottom-right-radius: 12px;
 }

 .shipping-image {
     background-image: url('../img/shipping/shipping-img.png');
     background-size: 680px 550px;
     background-position: center;
     background-repeat: no-repeat;
     position: relative;
 }

 .shipping-image .feature-container {
     border-radius: 26px 26px 0px 0px;
     border: 6px solid #FFF;
     background: linear-gradient(180deg, #165E99 0%, #071F33 100%);
     box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
     padding: 15px;
     padding-bottom: 4px;
     display: flex;
     justify-content: space-around;
     position: absolute;
     bottom: 0;
     min-width: 100%;
 }

 .feature-container .feature-img {
     width: 40px;
     height: 40px;
 }

 .feature-container h6 {
     text-wrap: wrap;
     word-wrap: wrap;
 }

 .btn-learn-more {
     border-radius: 5px;
     background: #FFF;
     color: #184476;
     box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
     font-weight: 700;
     border: none;
     width: 150px;
     padding: 10px 20px;
     font-weight: bold;
     text-decoration: none;
     display: inline-block;
     margin-top: 15px;
 }

 /* Shipping Banner Styles */
 .shipping-banner {
     background: linear-gradient(90deg, #165E99 0%, #1F1C1C 141.95%);
     box-shadow: 0px 4px 7.9px 0px rgba(0, 0, 0, 0.25);
     color: white;
     text-align: start;
     padding: 20px 0;
     padding-bottom: 6px;
     font-weight: bold;
     border-bottom-right-radius: 40px;
 }

 .shipping-banner-text {
     display: flex;
     justify-content: center;
     margin: 0 auto;
     width: 690px;
     /* margin-right: 60px; */
 }

 .shipping-banner p {
     font-family: 'Poppins', sans-serif;
     font-weight: 700;
     text-align: justify;
     font-size: 18px;
 }

 /* Background Overlay Section Styles */

 .background-one {
     background-image: url('../img/background/bg1.png');
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center;
 }

 .background-two {
     background-image: url('../img/background/bg2.png');
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center;
 }

 /* Logistics Section Styles */
 .services-section-one .row {
     border-radius: 40px 200px 200px 40px;
     border: 1px solid #FFF;
     background: linear-gradient(180deg, rgba(1, 61, 109, 0.72) 0.02%, rgba(3, 17, 28, 0.72) 85.4%);
     backdrop-filter: blur(2px);
 }

 .services-section-one {
     text-align: center;
     padding: 50px 200px;
     /* color: #002f56; */
     /* background-image: url('../img/services/service-bg-2.png'); */
     /* background-size: cover;
     background-repeat: no-repeat;
     background-position: center; */
     min-width: 100%;
 }

 /* Services Section Styles */
 .services-section-two {
     text-align: center;
     padding: 50px 200px;
     /* background: linear-gradient(90deg, var(--Color, rgba(24, 68, 118, 0.70)) 0%, #2D7FDC 100%);
     background-clip: text;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent; */
     /* background-image: url('../img/services/service-bg.png'); */
     /* background-size: cover;
     background-repeat: no-repeat;
     background-position: center; */
     min-width: 100%;
 }

 .services-section-one .service-card {
     /* background: linear-gradient(180deg, #165E99 0.02%, #071F33 85.4%); */
     color: white;
     padding: 30px 0;
     text-align: center;
     position: relative;
     height: 430px;
     border-right: 1px solid #fff;
 }

 /* .services-section-two .service-card {
     background: linear-gradient(180deg, #165E99 0.02%, #071F33 85.4%);
     color: white;
     padding: 30px 20px;
     border-radius: 1px;
     text-align: justify;
     position: relative;
     width: 300px;
 } */

 .services-section-one .service-card h3 {
     font-size: clamp(42px, 2vw, 164px);
     text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
     font-weight: 900;
 }

 .services-section-two .service-card h4 {
     font-size: clamp(12px, 2vw, 16px);
 }

 .services-section-one .service-card img {
     width: 200px;
     min-width: 100%;
     position: absolute;
     left: 0;
     bottom: -15px;
 }

 .services-section-two .service-card img {
     height: 120px;
     min-width: 100%;
 }

 .info-card {
     /* background: linear-gradient(90deg, #165E99 0.29%, #1F1C1C 102.45%);
     box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); */
     color: white;
     padding: 30px;
     padding-left: 0;
     border-radius: 20px;
     height: auto;
     display: flex;
     flex-direction: column;
     justify-content: center;
     text-align: justify;
 }

 .info-card p {
     color: #FFF;
     font-family: 'Poppins', sans-serif;
     font-size: clamp(16px, 2vw, 23px);
     font-style: normal;
     font-weight: 700;
     line-height: 195%;
     letter-spacing: 0px;
     padding-right: 66px;
     text-align: justify;
 }

 .btn-readmore {
     background: white;
     color: #003366;
     border-radius: 5px;
     /* font-size: clamp(16px, 2vw, 18px); */
     font-weight: bold;
     padding: 8px 20px;
     margin-top: 10px;
     align-self: start;
 }

 .learn-more-btn {
     background: #003366;
     color: white;
     font-weight: bold;
     padding: 10px 25px;
     text-transform: uppercase;
     margin-top: 20px;
     display: inline-block;
 }

 .learn-more-btn:hover {
     background: #0055a5;
 }

 /* Contact Form Section Styles */
 .contact-section {
     padding: 50px 0;
     /* background-image: url('../img/contact-us/contact-bg.png'); */
     /* background-size: cover;
     background-position: center; */
 }

 .contact-section .container {
     margin: 0 auto;
 }

 .contact-section .container .row {
     margin: auto;
     justify-content: center;
     border-radius: 50px;
     border: 1px solid #0990FF;
     background: linear-gradient(79deg, #104775 79.41%, #F0F0F0 119.6%);
     box-shadow: 0px 141px 200px -80px rgba(25, 58, 75, 0.30) inset;
 }

 .contact-section .container .row h3 {
     font-size: 36px;
     font-weight: 600;
 }

 .contact-title {
     /* color: #002f56; */
     color: #184476;
     font-family: 'Poppins', sans-serif;
     font-size: 4.3rem;
     font-style: normal;
     font-weight: 700;
     text-align: center;
 }

 .contact-title span {
     font-size: 36px;
     text-transform: uppercase;
     color: #184476;
     font-weight: 800;
 }

 .contact-container {
     /* background-color: white; */
     padding: 40px;
     border-radius: 15px;
     box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
 }

 .contact-form {
     /* background: linear-gradient(180deg, #1D4E86 0%, #0E233C 100%); */
     padding: 30px;
     padding-left: 50px;
     border-radius: 12px;
     color: white;
 }

 .contact-form h4 {
     font-size: 26px;
     font-weight: 700;
     margin-bottom: 10px;
 }

 .contact-form input {
     width: 100%;
     padding: 10px;
     margin-bottom: 10px;
     border: none;
     background: transparent;
     border-bottom: 1px solid var(--white);
     color: var(--white);
     outline: var(--white);
 }

 .contact-form input::placeholder {
     color: var(--white);
 }

 .contact-form textarea::placeholder {
     color: #A3A3A3;
 }

 .textarea-container {
     position: relative;
     display: inline-block;
     width: 100%;
     /* min-height: 100px; */
     outline: 1px solid white;
     background: linear-gradient(79deg, #104775 119.59%, #F0F0F0 119.6%);
     box-shadow: 0px 141px 200px -80px rgba(25, 58, 75, 0.30) inset;
     border-radius: 4px;
     resize: vertical;
     overflow: auto;
 }

 /* Textarea Styling */
 .custom-textarea {
     position: relative;
     width: 95%;
     padding: 10px;
     border: none;
     border-bottom: 1px solid #fff;
     font-size: 16px;
     background: transparent;
     outline: none;
     display: flex;
     resize: none;
     overflow: visible;
     margin: auto;
     margin-bottom: 10px;
     color: var(--white);
 }

 /* Fix HR positioning */
 /* .textarea-container hr {
    position: absolute;
    bottom: 10px;
    width: 100%;
    opacity: 1;
    border: none;
    height: 1px;
    background: white;
} */


 /* Extra Border Below Placeholder */
 /* .textarea-container::after {
     content: "";
     position: absolute;
     left: 10px;
     bottom: 25px;
     width: calc(100% - 20px);
     height: 1px;
     background-color: #fff;
     transition: all 0.3s ease;
 } */


 .custom-textarea::placeholder {
     color: #A3A3A3;
 }


 .btn-submit {
     font-family: 'Poppins', sans-serif;
     border-radius: 10px;
     background: #0990FF;
     box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
     color: white;
     padding: 10px;
     border: none;
     width: 99%;
     font-weight: 700;
     cursor: pointer;
 }

 .btn-submit:hover {
     background-color: #0066cc;
 }

 .map-container {
     /* border-radius: 10px; */
     /* overflow: hidden; */
     /* box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25) inset; */
     margin-left: -25px;
     z-index: 1000;
     position: relative;
     border-left: 1px solid #fff;
     /* padding: 30px; */
     height: auto;
     min-width: 100%;
     min-height: 100%;
     /* border-radius: 50px; */
     /* border: 1px solid #0990FF;
     background: linear-gradient(79deg, #104775 79.41%, #F0F0F0 119.6%);
     box-shadow: 0px 141px 200px -80px rgba(25, 58, 75, 0.30) inset; */
 }

 .map-container iframe {
     box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25) inset;
     height: 500px;
     min-width: 100%;
     min-height: 100%;
     border-radius: 10px;
     z-index: 1000;
 }

 .contact-info {
     color: white;
 }

 .info-item i {
     color: #0990FF;
 }

 .info-item p {
     font-size: 14px;
     margin: 0;
 }

 .info-item a {
     color: #0990FF;
 }

 .info-item.address {
     margin-left: -6px;
 }


 /* Download Application Styles */
 .download-section {
     /* background: url('../img/download/download-bg.png') no-repeat center center/cover; */
     padding: 60px 0;
     text-align: center;
 }

 .download-title {
     font-family: 'Poppins', sans-serif;
     font-size: 4.5rem;
     color: #fff;
     /* background: linear-gradient(45deg, #ffffff, #ffffff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; */
     text-shadow: 0px -3.5px 1px rgba(255, 255, 255, 0.6),
         0px 0px 0px rgba(190, 190, 190, 0.5);
     /* text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); */
     font-style: normal;
     font-weight: 700;
     line-height: 44px;
 }

 .download-title span {
     font-size: clamp(26px, 2vw, 30px);
     text-transform: uppercase;
     color: #fff;
     text-shadow: none;
 }

 .download-box {
     border-radius: 45px;
     background: linear-gradient(90deg, rgba(22, 94, 153, 0.46) 0.29%, rgba(228, 228, 228, 0.46) 85.3%);
     box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
     color: white;
     padding: 20px;
     border-radius: 15px;
     display: inline-block;
     max-width: 800px;
     min-width: 100%;
 }

 .download-box h4,
 .download-box p {
     color: #FFF;
     text-align: center;
     font-family: 'Poppins', sans-serif;
     font-size: clamp(20px, 2vw, 50px);
     font-style: normal;
     font-weight: 400;
     font-style: normal;
     font-weight: 400;
 }

 .download-box p {
     font-size: clamp(14px, 2vw, 30px);
 }

 .app-buttons a {
     display: inline-flex;
     align-items: center;
     justify-content: start;
     text-align: start;
     border-radius: 30px;
     background: #162140;
     color: white;
     padding: 8px 13px;
     border-radius: 10px;
     text-decoration: none;
     font-size: clamp(12px, 2vw, 16px);
     margin: 10px;
 }

 .app-buttons .bold {
     font-weight: 600;
 }

 .app-buttons a img {
     height: 50px;
     margin-right: 8px;
 }

 .app-buttons a:last-of-type img {
     height: 40px;
 }

 /* Brands Section */
 .brands {
     /* background: url('../img/brands/brands.png') no-repeat center center/cover;
     background-position: center; */
 }

 .brands h2 {
     font-family: 'Poppins', sans-serif;
     font-size: 4.5rem;
     color: #fff;
     /* background: linear-gradient(45deg, #ffffff, #ffffff);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent; */
     text-shadow: 0px -3.5px 1px rgba(255, 255, 255, 0.6),
         0px 0px 0px rgba(190, 190, 190, 0.5);
     /* text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); */
 }

 .brands h3 {
     font-size: clamp(30px, 2vw, 30px);
     text-transform: uppercase;
     color: #184476;
     font-family: 'Poppins', sans-serif;
     font-weight: 700;
     line-height: normal;
 }

 .brand-box {
     /* border-radius: 45px;
     background: var(--DESIGNER2, linear-gradient(90deg, #165E99 0.29%, #1F1C1C 102.45%));
     box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); */
     border-radius: 75px;
     border: 2px solid #463838;
     opacity: 0.94;
     background: rgba(255, 255, 255, 0.30);
     backdrop-filter: blur(20px);
 }


 /* First Row */
 .brand-box .row .col-4:first-of-type img {
     max-width: 120px;
     max-height: 120px;
     object-fit: contain;
 }

 .brand-box .row .col-4:nth-of-type(2) img {
     max-width: 120px;
     max-height: 120px;
     object-fit: contain;
 }

 .brand-box .row .col-4:nth-of-type(3) img {
     max-width: 180px;
     object-fit: contain;
 }

 .brand-box .row .col-4:nth-of-type(4) img {
     max-width: 140px;
     object-fit: contain;
     margin-top: -15px;
 }

 /* Second Row */
 .brand-box .row .col-4:nth-of-type(5) img {
     max-width: 150px;
     object-fit: contain;
 }


 .brand-box .row .col-4:nth-of-type(6) img {
     max-width: 80px;
     object-fit: contain;
 }

 .brand-box .row .col-4:nth-of-type(7) img {
     max-width: 90px;
     object-fit: contain;
 }

 .brand-box .row .col-4:last-of-type img {
     max-width: 140px;
     object-fit: contain;
 }


 /* Shipping Page Styles */
 .shipping-page-section {
     color: white;
     padding: 0;
 }

 .shipping-text-box {
     background-image: url('../img/shipping/shipping-text-bg.png'),
         var(--DESIGNER2, linear-gradient(90deg, #165E99 0.29%, #1F1C1C 102.45%));
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     height: 84vh;
     text-align: justify;
 }

 .shipping-text-box h2 {
     color: #FFF;
     font-family: 'Poppins', sans-serif;
     font-size: clamp(40px, 2vw, 40px);
     font-style: normal;
     font-weight: 600;
     line-height: 24px;
     letter-spacing: 0.64px;
 }

 .shipping-text-box p {
     color: #FFF;
     font-family: 'Poppins', sans-serif;
     font-size: 16px;
     font-style: normal;
     font-weight: 600;
     line-height: 45px;
     letter-spacing: 0.2px;
 }

 .shipping-image {
     height: 84vh;
     overflow: hidden;
 }

 .shipping-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 /* Services Section Styles */
 .services-features {
     background: url('../img/shipping/shipping-page-bg.png') no-repeat center center/cover;
     background-position: center;
     background-size: cover;
     padding: 0;
 }

 .services-features .container-fluid {
     padding: 0%;
     min-width: 100%;
 }

 .service-feature-title,
 .service-title {
     /* background: linear-gradient(90deg, var(--Color, rgba(24, 68, 118, 0.70)) 0%, #2D7FDC 100%);
     background-clip: text;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent; */
     font-family: 'Poppins', sans-serif;
     font-size: 4.3rem;
     font-style: normal;
     font-weight: 700;
     color: #184476;
     text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
     display: inline-block;
     line-height: 1.3;
 }

 .service-feature-title {
     background: linear-gradient(90deg, var(--Color, rgba(24, 68, 118, 0.70)) 0%, #2D7FDC 100%);
     background-clip: text;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     text-shadow: none;
 }

 .service-feature-title span,
 .service-span {
     font-family: 'Poppins', sans-serif;
     font-size: 28px;
     text-transform: uppercase;
     color: #184476 !important;
     background: none;
     font-weight: 700;
     margin-left: 240px;
     margin-top: -10px;
 }

 .services-section-two .service-span,
 .services-features .service-span {
     margin-left: 0;
 }

 .feature-box {
     border-radius: 15px;
     background: var(--DESIGNER2, linear-gradient(90deg, #165E99 0.29%, #1F1C1C 102.45%));
     box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
     color: white;
     padding: 20px;
     text-align: start;
     transition: transform 0.3s;
 }

 .feature-box:hover {
     transform: translateY(-5px);
 }

 .feature-box img {
     width: 50px;
     height: 50px;
     margin-bottom: 10px;
     background: var(--new, linear-gradient(180deg, #DBE2E3 16.59%, #D0D4D5 51.77%, #DDE3E4 91.08%));
     border-radius: 100px;
     padding: 10px;
 }

 /* Services Page Styles */
 /* .service-title span {
     font-size: clamp(26px, 2vw, 30px);
     text-transform: uppercase;
 } */

 .services-section-two .service-title {
     background: linear-gradient(90deg, var(--Color, rgba(24, 68, 118, 0.70)) 0%, #2D7FDC 100%);
     background-clip: text;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     text-shadow: none;
 }

 .services-section-two .service-card {
     background: linear-gradient(90deg, #165E99 0.29%, #1F1C1C 102.45%);
     box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
     border-radius: 1px;
     color: white;
     padding: 30px 20px;
     padding-top: 50px;
     text-align: left;
 }


 .services-section-two .service-card h4 {
     font-size: clamp(16px, 2vw, 16px);
     font-weight: 700;
 }

 .services-section-two .service-card p {
     font-size: 15px;
     font-weight: 400;
     text-align: left;
 }

 .service-card img {
     width: 100%;
     min-width: 100%;
 }

 .service-card-text {
     color: #FFF;
     font-family: 'Poppins', sans-serif;
     font-size: clamp(14px, 2vw, 16px);
     font-style: normal;
     font-weight: 400;
     text-align: left;
     overflow: hidden;
     text-overflow: ellipsis;
     display: -webkit-box;
     -webkit-line-clamp: 3;
     -webkit-box-orient: vertical;
     transition: max-height 0.3s ease-in-out;
     margin-top: 15px;
     flex-grow: 1;
 }

 .service-card-text.expanded {
     -webkit-line-clamp: unset;
     text-overflow: initial;
 }

 .read-more-btn {
     background: white;
     color: #003366;
     font-weight: bold;
     padding: 8px 20px;
     margin-top: 10px;
     align-self: start;
     border-radius: 5px;
     box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
     margin-top: auto;
 }

 /* Map Section Styles */
 .map {
     border-top: 3px solid var(--medium-blue);
 }

 .map h3 {
     color: var(--medium-blue);
     font-family: 'Inter', sans-serif;
     font-size: 35px;
     font-style: normal;
     font-weight: 700;
     line-height: normal;
 }

 /* Footer Styles */
 .footer {
     background: linear-gradient(106deg, #f5f5f5f6 -75.3%, #165e99f3 55.17%),
         url('../img/footer/footer-bg2.jfif');
     box-shadow: 0px 4px 7.9px 0px rgba(0, 0, 0, 0.25);
     background-position: left;
     background-repeat: no-repeat;
     background-size: cover;
     color: white;
     padding: 30px 0;
     padding-top: 15px;
     min-width: 100%;
     max-width: 100%;
 }

 .footer .container-fluid {
     min-width: 100%;
     max-width: 100%;
 }

 .footer .row:first-of-type {
     border-bottom: 3px solid var(--white);
     min-width: 100%;
     max-width: 100%;
     padding: 0 40px;
     padding-bottom: 10px;
 }

 .footer .col-auto:has(.logo) {
     background-image: url('../img/footer/logo-bg.png');
     background-repeat: no-repeat;
     background-position: left;
     background-size: 100px;
 }

 .footer .logo {
     width: 240px;
     max-width: 100%;
     height: auto;
 }

 .social-icons-container {
     margin-right: 20px;
 }

 .social-icons a {
     margin-right: 5px;
     color: white;
     font-size: 18px;
 }

 .social-icons img {
     width: 26px;
     height: 26px;
 }

 .bottom-navigation {
     padding: 0 70px;
     padding-left: 90px;
 }

 .footer h5 {
     text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
     font-weight: 700;
     font-size: 22px;
 }

 .footer .list-unstyled {
     margin-top: 12px;
 }

 .footer .list-unstyled a {
     color: white;
     text-decoration: none;
     font-size: clamp(11px, 2vw, 18px);
     line-height: 30px;
 }

 .footer .list-unstyled a:hover {
     text-decoration: underline;
 }

 .footer .col-md-3:last-of-type {
     border-left: 1px solid var(--white);
     padding-left: 18px;
 }

 .footer .text-img {
     margin-left: -10px;
 }

 .footer .location {
     width: 28px;
     height: 28px;
 }

 .footer .security {
     width: 25px;
     height: 25px;
 }

 .footer p {
     font-size: clamp(11px, 2vw, 14px);
 }

 footer .copyright {
     color: var(--white);
     font-family: var(--font-family);
     font-size: clamp(12px, 2vw, 16px);
     font-style: normal;
     font-weight: 500;
     text-decoration: none;
 }