@import url('https://fonts.cdnfonts.com/css/euclid-circular-a');
        html, body, h1, h2, h3, h4, h5, h6, .navbar-brand {
            font-family: 'Euclid Circular A', sans-serif !important;
        }

        :root {
            --sc-bg-dark: #0b0c15;
            --sc-bg-dark-accent: #151725;
            --sc-primary: #0d6efd;
            --sc-glass: rgba(11, 12, 21, 0.85);
            --sc-glass-border: rgba(255, 255, 255, 0.15);
        }

        [data-bs-theme="light"] {
            --sc-bg-dark: #f8f9fa;
            --sc-bg-dark-accent: #ffffff;
            --sc-glass: rgba(255, 255, 255, 0.9);
            --sc-glass-border: rgba(0, 0, 0, 0.1);
        }


        /* A little extra spacing for visual clarity */
        body {
            padding-top: 56px; /* Adjust based on navbar height */
        }
        .feature-heading {
            padding: 4rem 1rem;
        }
        .card-section {
            padding: 4rem 1rem;
        }
        .footer {
            padding: 2rem 1rem;
        }

        .card-cover {
            background-repeat: no-repeat;
            background-position: center center;
            background-size: cover;
        }

.sc-masthead {
    --bd-pink-rgb: 214, 51, 132;
    padding: 5rem  0 2rem;
    background-image: linear-gradient(180deg,rgba(var(--bs-body-bg-rgb),.01),rgba(var(--bs-body-bg-rgb),1) 100%),radial-gradient(ellipse at top left,rgba(var(--bs-primary-rgb),.5),transparent 50%),radial-gradient(ellipse at top right,rgba(255, 228, 132,.5),transparent 50%),radial-gradient(ellipse at center right,rgba(113, 44, 249,.5),transparent 50%),radial-gradient(ellipse at center left,rgba(var(--bd-pink-rgb),.5),transparent 50%);
}

    .bi {
        vertical-align: -.125em;
        fill: currentColor
    }

            .services-bg, .about-bg {
                
                background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
            }

.services-bg{ 
    background-image: url('img/Somali Cargo UK China USA UAE Air Cargo Shipping to Somalia -090.jpg'); 

}

.about-bg{ 
    height: 100vh;
    background-image: url('img/Somali Cargo USA UK Air Cargo Shipping to Somalia -066.jpg');
    

}

.about-bg .sc-masthead {
    height: 100vh;
}

#about-overview {
    margin-top: -70vh;

}

.contact-bg{
    background-image: url('img/Somali Cargo UK China USA UAE Air Cargo Shipping to Somalia -090.jpg');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.contact-bg .sc-masthead {
    height: 80vh;
}

    #about-overview > .card{
        --bs-bg-opacity: 0.5;
        backdrop-filter: blur(10px);
        /* for safari */
        -webkit-backdrop-filter: blur(10px);
        background-color: rgba(var(--bs-tertiary-bg-rgb),var(--bs-bg-opacity))!important;
        z-index: 1000;
    }

        /* Ensure dropdown is positioned correctly relative to the input */
        .dropdown {
            position: relative;
        }
        
        /* Ensure the dropdown menu sits directly below the input */
        .dropdown-menu {
            margin-top: 1px;
        }

        /* Styling for the flag icon positioned inside the input field */
        .selected-flag-icon {
            position: absolute;
            top: 50%;
            right: 12px; /* Position inside the input padding */
            transform: translateY(-50%);
            pointer-events: none; /* Allows clicks to pass through to the input */
            visibility: hidden;
            font-size: 1.5rem; 
            z-index: 3; /* Keep it above the input field */
        }
        
        /* Adjust input padding so text doesn't overlap the flag */
        .location-input {
            padding-right: 40px !important;
        }
        
        /* Style for the dynamically generated package items */
        .package-item {
            /* This class is added dynamically for border, rounding, padding, and margin */
        }


         .price-card {
            border-radius: 1rem; /* Rounded corners */
            transition: all 0.3s ease;
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.05);
            border: 2px solid transparent;
        }
        .price-card:hover {
            border-color: #0d6efd; /* Highlight border on hover */
            box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.1);
        }
        .total-price {
            font-size: 2.5rem; /* Larger text for total */
            font-weight: 800; 
        }
        .accorddion-bustton {
            background-color: #e9ecef; /* Light background for toggle button */
            border-radius: 0.75rem;
        }
        .accorddion-button:not(.collapsed) {
            background-color: #dee2e6;
        }
        .accordion-icson {
            transition: transform 0.2s ease-in-out;
        }
        

                /* Custom styles for the Summary Card */
        .summary-metric {
            font-weight: 600; 
        }
        .summary-imperial {
            font-size: 0.9em; 
        }
        /* Override default list group item styling */
        .list-group-item {
            border: none;
            padding-left: 0;
            padding-right: 0;
        }
        /* Package List Styling */
        .package-item { 
            border-radius: 0.75rem;
            transition: transform 0.2s ease;
        }
        .package-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 6px rgba(0,0,0,0.05);
            border-color: #dee2e6;
        }
        .package-label {
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 0.25rem;
            font-weight: 600;
        }
        .package-value {
            font-weight: 600; 
        }
        .package-subvalue {
            font-size: 0.85rem;
            color: #6c757d;
        }

        .circle-span {
  display: inline-flex; /* Or block, inline-block */
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%; /* The key to making it a circle */ 
  color: white;
      background-size: cover!important;
  text-align: center;
}



/* Sidebar Styling */
        .sidebar-sticky {
            position: sticky; 
            z-index: 10;
        }

        .blinking {
            /* Apply the animation */
            animation: blink 1.5s infinite; 
            /* Ensure the icon's color matches the glow color defined in keyframes */
            color: var(--bs-green);
        }

        /* 2. Define the blinking keyframes animation */
        @keyframes blink {
            0% {
                opacity: 1; /* Fully visible */
                /* Pulsating shadow/glow effect using the green color */
                text-shadow: 0 0 5px var(--bs-green), 0 0 10px rgba(40, 167, 69, 0.5);
            }
            50% {
                opacity: 0.4; /* Partially transparent */
                text-shadow: none;
            }
            100% {
                opacity: 1; /* Back to fully visible */
                text-shadow: 0 0 5px var(--bs-green), 0 0 10px rgba(40, 167, 69, 0.5);
            }
        } 
  
.footer-bg {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain; 
    opacity: 1;
    background-color: transparent; 
    background-image: url(/img/globe-dots.png); 
} 


        .style-2 {
            /* Base background inherits from body (Dark or Light) */
            background-color: transparent; 
            background-image: 
                /* Layer 1: Dense, tiny stars (brightest) */
                radial-gradient(rgba(var(--bs-emphasis-color-rgb), 0.2) 1px, transparent 1.5px),
                /* Layer 2: Medium-sized stars (less bright/scattered) */
                radial-gradient(rgba(var(--bs-emphasis-color-rgb), 0.1) 1.5px, transparent 2.5px),
                /* Layer 3: Larger, sparse stars (subtle) */
                radial-gradient(rgba(var(--bs-emphasis-color-rgb), 0.07) 2px, transparent 3.5px),
                
                /* Primary Color Nebula Core (Top Left Focus - REDUCED OPACITY for discretion) */
                radial-gradient(circle at 0% 0%, rgba(var(--bs-primary-rgb), 0.07) 0%, transparent 60%),
                
                /* Info Color Nebula Whisper (Offset Top Left - REDUCED OPACITY for discretion) */
                radial-gradient(circle at 0% 0%, rgba(var(--bs-info-rgb), 0.1) 0%, transparent 30%);
            
            /* 3 star sizes, 2 nebula layers */
            background-size: 150px 150px, 250px 250px, 350px 350px, 100% 100%, 100% 100%;
            background-repeat: repeat, repeat, repeat, no-repeat, no-repeat;
            background-position: 0 0, 40px 40px, 80px 80px, 0 0, 0 0;
            
            /* Animation to gently shift the stars */
            animation: star-drift 60s linear infinite;
        }

        @keyframes star-drift {
            /* Animate the star layers to move, creating a drift effect */
            0% { background-position: 0 0, 40px 40px, 80px 80px, 0 0, 0 0; }
            100% { background-position: 150px 150px, 290px 290px, 430px 430px, 0 0, 0 0; }
        }

    .stat-item {
            border-left: var(--sc-glass-border) 1px solid;
            padding-left: 1.5rem;
        }