/* Set the default font for the entire document ----------------- start */
 /* Fonts we can use in the project  */
 @font-face {
     font-family: 'Columbia-Serial-BoldItalic';
     src: url(assets/Columbia-Serial-BoldItalic.ttf);
 }

 @font-face {
     font-family: 'Rage-Italic';
     src: url(assets/Rage\ Italic.ttf);
 }

 @font-face {
     font-family: 'Majallab';
     /* Choose a unique name for your font */
     src: url('assets/majallab.ttf') format('woff2');
     /* Path to your font files */

     font-weight: normal;
     /* Specify the font's weight (e.g., normal, bold, 400, 700) */
     font-style: normal;
     /* Specify the font's style (e.g., normal, italic) */
     /* You can add more descriptors like font-display: swap; for performance */
 }

 /* Custom CSS Variables based on user input */
 :root {
     /* Core Colors */
     --bg-color: #ffffff;
     --snd-bg-color: #d0f8fb;
     /* Light Cyan/Secondary Background */
     --text-color: #333333;
     /* Dark Gray for general text */
     --main-color: #008791;
     /* Teal/Cyan Primary */
     --accent-color: #05483c;
     /* Dark Green/Teal Accent */
     /* Text & Background Overrides */
     --light-text: #777;
     --background-color: #ffffff;
     --font-family: 'Inter', sans-serif;
     /* Component Specifics */
     --card-text-color: #333;
     --card-bg: #ffffff;
     --default-shadow-color: rgba(0, 0, 0, 0.08);
     --hover-shadow-color: rgba(0, 135, 145, 0.3);
     --flip-duration: 0.8s;

     /* Geographical Coverage Colors */
     --north-zone-fill: #42b7b0;
     --middle-zone-fill: #9e8cb0;
     --south-euphrate-zone-fill: #77cdd1;
     --south-zone-fill: #468c9f;


     --menu-background-color: #008377;
     --menu-text-color: #333333;
     /* Sales Coverage Colors */
     --primary-color: #00796b;
     /* Dark Teal for Pharmacies */
     --secondary-color: #26556e;
     /* Dark Blue for Warehouses */
     --bar-color: #42b7b0;
     /* Light Teal for bars */
     --purple-text: #673ab7;
     /* Purple for titles */
     --glow-size: 20px;
     --inset-padding: 10px;
     /* Flip Card Variables */
     --flip-duration: 0.8s;
 }


 /* colors */


 body {
     font-family: var(--font-family);
     background-color: var(--background-color);
     color: var(--text-color);
     min-height: 100vh;
     display: flex;
     flex-direction: column;
     overflow-x: hidden;
 }

 /* Custom Script Font Class */
 .script-font {
     font-family: 'Rage-Italic', cursive;
 }

 .font-bold {
     font-weight: bold;
 }

 .circle-script-text {
     font-size: clamp(30px, 8vw, 48px);
     /* Responsive size: min 30px, max 48px, scales with viewport */
     line-height: 1.2;
 }

 /* Set the default font for the entire document ----------------- End */

 /* header -------------------------------------------------------------- Start */
 .heder-bar {
     background-color: var(--menu-background-color);
     color: var(--text-color);
 }

 .heder-button {
     font-size: 1rem;
     color: var(--bg-color);

 }

 .heder-button:hover {
     font-weight: bold;
     color: var(--primary-color);
     text-decoration: underline;
 }


 /* header -------------------------------------------------------------- End */
 /* Home Section  ----------------------------------------------- start */

 .pulse-animation {
     animation: pulse-glow 3s infinite ease-in-out;
 }

 /* --- Social Media Styling (using Boxicons) --- */
 .social-media a {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 2.75rem;
     /* Approx. 44px */
     height: 2.75rem;
     background: transparent;
     border: 2px solid var(--main-color);
     border-radius: 50%;
     margin-right: 1rem;
     transition: all 0.5s ease;
     color: var(--main-color);
     font-size: 1.5rem;
 }

 .social-media a:hover {
     background: var(--main-color);
     color: var(--white);
     box-shadow: 0 0 15px rgba(0, 135, 145, 0.6);
     transform: translateY(-2px);
 }

 /* --- Scroll Entrance Animation (Hidden by default) --- */
 .scroll-animate {
     opacity: 0;
     transform: translateY(40px);
     transition: opacity 1s ease-out, transform 1s ease-out;
 }

 .scroll-animate.animate-in {
     opacity: 1;
     transform: translateY(0);
 }

 .scroll-delay-1 {
     transition-delay: 0.1s;
 }

 .scroll-delay-2 {
     transition-delay: 0.2s;
 }

 .scroll-delay-3 {
     transition-delay: 0.3s;
 }

 .scroll-delay-4 {
     transition-delay: 0.4s;
 }


 /* Utility classes using the variables */
 .color-main {
     color: var(--main-color);
 }

 .text-color-title {
     color: var(--accent-color);
 }

 .purple-text {
     color: var(--purple-text);
 }

 .middle-zone-fill {
     color: var(--middle-zone-fill);
 }

 .south-euphrate-zone-fill {
     color: var(--south-euphrate-zone-fill);
 }

 .bg-main {
     background-color: var(--main-color);
 }

 .circle-bg {
     background-color: var(--north-zone-fill);
 }

 /* Custom Card Styling */
 .business-card {
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     border-bottom: 4px solid var(--main-color);
     box-shadow: 0 4px 12px var(--default-shadow-color);
 }

 .business-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 12px 20px var(--hover-shadow-color);
 }

 /* Home Section  ----------------------------------------------- End */
 /* Work Force and Facilities Section  --------------------------------------------- start */
 /* Custom Script Font Class */

 /* Base state: Hidden and slightly moved down/zoomed out */
 .initial-hidden {
     opacity: 0;
     transform: translateY(30px) scale(0.98);
 }


 .fade-in-up {
     /* This is the class added by JS to trigger the animation */
     animation: fade-in-zoom 1.0s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
     /* Use CSS variable for staggered delay */
     animation-delay: var(--animation-delay, 0s);
 }

 /* Stat Card Hover Effect */
 .stat-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 30px rgba(0, 135, 145, 0.15);
 }

 /* Work Force and Facilities Section  ----------------------------------------------- End */

 /* OUR STORY (Vision, Mission, Values) Section  ----------------------------------------------- start */
 /* 1. Container for 3D Perspective (Still needed for layout) */
 .flip-card-container {
     perspective: 1000px;
     will-change: transform, opacity;
     /* Added overflow hidden to prevent content from stretching during transform */
     overflow: hidden;
 }

 /* 2. The Inner Card: Now just a container for positioning */
 .flip-card-inner {
     position: relative;
     width: 100%;
     height: 100%;
     text-align: center;
     /* We remove transform-style: preserve-3d; */
 }

 /* 3. Front and Back Faces */
 .flip-card-front,
 .flip-card-back {
     position: absolute;
     width: 100%;
     height: 100%;
     /* Removed backface-visibility */
     border-radius: 0.75rem;
     padding: 2.5rem 2rem;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     transition: all var(--flip-duration) ease-in-out;
     /* Smooth transition for slide and opacity */
 }

 .flip-card-front {
     background-color: var(--card-bg);
     border: 1px solid #f0f0f0;
     box-shadow: 0 4px 6px -1px var(--default-shadow-color), 0 2px 4px -2px var(--default-shadow-color);
     color: var(--color01);
     z-index: 2;
     /* Default state */
     opacity: 1;
     transform: translateY(0);
 }

 .flip-card-back {
     /* REMOVED STATIC background-color: var(--main-color); TO ALLOW INLINE STYLES */
     color: white;
     box-shadow: 0 12px 20px -5px var(--hover-shadow);
     /* REMOVED border: 1px solid var(--main-color); TO ALLOW INLINE STYLES */
     line-height: 1.6;

     /* Hidden state: Starts slightly below and invisible */
     opacity: 0;
     transform: translateY(100%);
     z-index: 1;
     /* Ensures it is behind the front face initially */
 }

 /* State for the new Fade-Slide effect on hover */
 .flip-card-container:hover .flip-card-front {
     opacity: 0;
     transform: translateY(-100%);
     /* Slides up and out */
 }

 .flip-card-container:hover .flip-card-back {
     opacity: 1;
     transform: translateY(0);
     /* Slides into view */
 }

 .flip-card-back .card-title {
     color: #d0f8fb;
     /* Light accent color for the title */
     margin-bottom: 1rem;
 }

 /* Scroll Reveal for Flip Cards */
 .flip-card-container.initial-hidden {
     opacity: 0;
     transform: scale(0.9) translateY(30px);
     transition: none;
 }

 .flip-card-container.is-visible {
     opacity: 1;
     animation: zoom-and-skew 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
     animation-delay: var(--animation-delay);
     transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
 }

 /* OUR STORY (Vision, Mission, Values) Section  ----------------------------------------------- End */
 /* Organization Structure Section  ---------------------------------------------------------- start */
 .org-chart {
     font-family: Arial, sans-serif;
     padding: 10px;
     text-align: center;
     max-width: 1200px;
     margin: 0 auto;
 }

 /* --- Group Title (Top Parent) --- */
 .group-title {
     font-size: 28px;
     font-weight: bold;
     color: #333;
     padding-bottom: 20px;
     position: relative;
 }

 /* Vertical line down from 'Amarji Group' */
 .group-title::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 50%;
     transform: translateX(-50%);
     width: 2px;
     height: 30px;
     background-color: #3f6087;
 }

 /* --- Branches Container (Horizontal Layout) --- */
 .branches-container {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     padding-top: 30px;
     position: relative;
     border-top: 2px solid #3f6087;
     margin-top: 10px;
     perspective: 1000px;
 }

 /* --- Individual Company Cards --- */
 .company-card {
     flex: 1;
     height: 370px;
     margin: 0 10px;
     padding: 15px;
     text-align: left;
     position: relative;
     padding-top: 25px;
     transform-style: preserve-3d;

     /* Add Tailwind classes for basic appearance */
     /* @apply shadow-lg bg-white rounded-xl; */

     /* 🔑 1. INITIAL ANIMATION STATE (Hidden & Moved Down) */
     opacity: 0;
     transform: translateY(30px) perspective(1000px);
     /* Start 30px below */

     /* 🔑 2. ANIMATION TRANSITION (Include opacity and transform) */
     transition: opacity 0.8s ease-out, transform 0.8s ease-out, box-shadow 0.6s ease-out;
     transition-delay: 0s;
     /* Reset delay before stagger is applied by JS */
 }

 /* 🔑 3. FINAL ANIMATION STATE (Visible & In Place) */
 .company-card.animated {
     opacity: 1;
     transform: translateY(0) perspective(1000px);
     /* Move to final position */
 }

 .company-card:hover {
     /* Rotate slightly on the X and Y axes */
     transform: perspective(1000px) rotateX(2deg) rotateY(-3deg) scale(1.02);
     cursor: pointer;
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
 }

 .company-card:active {
     transform: perspective(1000px) rotateX(1deg) rotateY(-1deg) scale(1.01);
 }

 .company-card h3 {
     margin-top: 0;
     font-size: 20px;
     color: #3f6087;
     font-weight: bold;
 }

 .company-card .location {
     font-weight: bold;
     font-style: italic;
     font-size: 17px;
     margin-bottom: 10px;
 }

 .company-card .description {
     font-size: .9rem;
     font-weight: bold;
     line-height: 1.5;
     color: #555;
     /* Ensure description is visible and not hidden by previous buggy logic */
     max-height: 100%;
     overflow: visible;
 }

 /* Vertical line connector from the main horizontal line to the card */
 .company-card::before {
     content: '';
     position: absolute;
     top: -30px;
     left: 50%;
     transform: translateX(-50%);
     width: 2px;
     height: 30px;
     background-color: #3f6087;
 }

 /* Connection Dot */
 .company-card::after {
     content: '';
     position: absolute;
     top: -32px;
     left: 50%;
     transform: translateX(-50%);
     width: 10px;
     height: 10px;
     border-radius: 50%;
     background-color: #3f6087;
     border: 2px solid white;
     box-sizing: border-box;
 }

 /* --- Coloring for the Cards --- */
 .company-card.purple h3,
 .company-card.purple .location {
     color: #7d489b;
 }

 .company-card.blue h3,
 .company-card.blue .location {
     color: var(--north-zone-fill);
 }

 /* Override the line and dot color for Purple Card */
 .company-card.purple::before,
 .company-card.purple::after {
     background-color: #7d489b;
 }

 /* Bottom Color Lines */
 .company-card {
     border-bottom: 5px solid #3f6087;
 }

 .company-card.purple {
     border-bottom: 5px solid #7d489b;
 }

 /* Organization Structure Section  ------------------------------------------------------------ End */
 /* Companies We Represent Section ------------------------------------------------------------start */

 /* Soft Animation Style for the Partner Cards */
 .partner-card {
     /* Ensures smooth GPU rendering for the new transforms */
     will-change: transform, opacity;
     transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
     background-color: var(--card-bg);
     box-shadow: 0 1px 3px var(--default-shadow), 0 11px 2px var(--default-shadow);
     border: 1px solid #f0f0f0;
     cursor: pointer;
     position: relative;
     z-index: 10;
     border-radius: 0.75rem;
 }

 /* 1. Initial State: Hidden and set to the starting position of the new animation */
 .partner-card.initial-hidden {
     opacity: 0;
     transform: scale(0.7) rotateZ(-3deg) translateY(50px);
     transition: none;
 }

 /* 2. Visible State: Trigger the new animation */
 .partner-card.is-visible {
     opacity: 1;
     /* DURATION IS 1.0s, EASING IS BOUNCY for a dynamic pop */
     animation: zoom-and-skew 1.0s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
     animation-delay: var(--animation-delay);
     /* Restore hover transition after animation completes */
     transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
 }

 /* Elegant Hover Effect (PRESERVED) */
 .partner-card:hover {
     transform: translateY(-6px) scale(1.01);
     box-shadow: 0 12px 20px -5px var(--hover-shadow), 0 4px 6px -4px rgba(0, 135, 145, 0.1);
     border-color: var(--main-color);
     border-width: 1px;
 }

 /* Border Glow styles (PRESERVED) */
 .border-glow-wrapper {
     position: absolute;
     top: calc(0px - var(--glow-size) / 2);
     left: calc(0px - var(--glow-size) / 2);
     width: calc(100% + var(--glow-size));
     height: calc(100% + var(--glow-size));
     pointer-events: none;
     overflow: hidden;
     border-radius: 0.75rem;
     z-index: 0;
 }

 .partner-card:hover .border-glow-wrapper::before {
     opacity: 1;
     animation: border-spin 4s linear infinite;
 }

 /* The glow wrapper's pseudo-element style remains the same */
 .border-glow-wrapper::before {
     content: '';
     position: absolute;
     width: 10px;
     height: 10px;
     border-radius: 50%;
     background: var(--main-color);
     box-shadow: 0 0 10px var(--main-color), 0 0 20px var(--main-color);
     opacity: 0;
     transform: translate(-50%, -50%);
     transition: opacity 0.3s;
 }


 /* Companies We Represent Section --------------------------------------------------------------End */
 /* Geographical Coverage Section -------------------------------------------------------------start */


 .geographical-coverage-container {
     display: flex;
     flex-wrap: wrap;
     max-width: 1200px;
     /* margin: 10px auto; */
     padding: 20px;
     font-family: var(--font-family);
     line-height: 1.6;
     color: var(--text-color);
     background-color: var(--background-color);

 }

 /* --- Map Section (Column 1) --- */
 .map-section {
     flex: 1;
     /* Desktop width */
     /* min-width: 600px; */
     padding-right: 30px;
     /* Space between map and text column */
     display: flex;
     flex-direction: column;
 }

 .country-title {
     font-size: 3em;
     font-weight: bold;
     color: var(--text-color);
     margin-bottom: 10px;
     font-weight: 700;
 }

 .iraq-map-svg-container {
     width: 100%;
     padding-bottom: 112.5%;
     position: relative;
     overflow: hidden;
     margin-bottom: 20px;
     box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
 }

 .iraq-map-svg {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     fill: none;
 }

 /* --- SVG Path Styling and Hover --- */
 .iraq-map-svg path {
     stroke: var(--svg-stroke-color);
     stroke-width: var(--svg-stroke-width);
     transition: fill 0.3s ease, transform 0.2s ease-out, filter 0.2s ease-out;
     transform-origin: center center;
     cursor: pointer;
 }

 .north-zone {
     fill: var(--north-zone-fill);
 }

 .middle-zone {
     fill: var(--middle-zone-fill);
 }

 .south-euphrate-zone {
     fill: var(--south-euphrate-zone-fill);
 }

 .south-zone {
     fill: var(--south-zone-fill);
 }

 .highlight-zone {
     transform: translateY(-5px) !important;
     filter: brightness(1.2) !important;
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3) !important;
     z-index: 10;
 }

 .text-and-legend-wrapper {
     flex: 2;
     /* Takes twice the space (Column 2) */
     min-width: 350px;
     display: flex;
     flex-direction: column;
 }

 /* Text Section: First in the wrapper (Desktop) */


 .text-section p {
     font-size: 1.5em;
     margin-bottom: 15px;
     color: var(--text-color);
     font-weight: 300;
 }

 .text-section ul {

     list-style-type: none;
     padding-left: 0;
     margin-left: 20px;
 }

 .text-section li {
     font-size: 1.5em;
     margin-bottom: 5px;
     position: relative;
     padding-left: 15px;
 }

 .text-section li::before {
     content: "•";
     color: var(--north-zone-fill);
     font-weight: bold;
     display: inline-block;
     width: 1em;
     margin-left: -1em;
 }

 /* Zone Legend: Second in the wrapper (Desktop) */
 .zone-legend {
     list-style: none;
     padding: 0;
     margin-top: 0;
     margin-bottom: 30px;
     padding-left: 30px;
     /* Aligns with Column 2 start */
 }

 .legend-item {
     display: flex;
     align-items: center;
     margin-bottom: 5px;
     font-size: 1.5em;
     color: var(--light-text);
     font-weight: bold;
     transition: background-color 0.2s ease, transform 0.2s ease-out;
     cursor: pointer;
     padding: 5px 8px;
     border-radius: 5px;
 }

 .legend-item:hover,
 .legend-item.highlight-active {
     background-color: #e0e0e0 !important;
     transform: translateX(5px) !important;
 }

 .color-box {
     width: 18px;
     height: 18px;
     margin-right: 10px;
     border: 1px solid #ccc;
 }

 .north-zone-color {
     background-color: var(--north-zone-fill);
 }

 .middle-zone-color {
     background-color: var(--middle-zone-fill);
 }

 .south-euphrate-zone-color {
     background-color: var(--south-euphrate-zone-fill);
 }

 .south-zone-color {
     background-color: var(--south-zone-fill);
 }

 /* --- Text and Legend Wrapper (Column 2) --- */

 /* Geographical Coverage Section -------------------------------------------------------------- End */
 /* Sales Coverage Section ------------------------------------------------------------ start */
 .data-coverage-container {
     max-width: 1200px;
     margin: 60px auto 40px;
     padding: 20px;
     font-family: var(--font-family);
     color: var(--text-color);
 }

 .data-title {
     color: var(--purple-text);
     font-size: 2.5em;
     font-weight: 600;
     text-align: center;
     margin-bottom: 5px;
 }

 .data-summary {
     color: var(--light-text);
     text-align: center;
     font-size: 1.8em;
     margin-bottom: 40px;
 }

 .charts-wrapper {
     display: flex;
     justify-content: space-around;
     flex-wrap: wrap;
     gap: 40px;
 }

 .chart-column {
     flex: 1;
     min-width: 300px;
     max-width: 45%;
     text-align: center;
 }

 .column-title {
     color: var(--purple-text);
     font-size: 1.7em;
     font-weight: 600;
     margin-bottom: 20px;
 }

 /* --- Donut Chart Styles --- */
 .donut-chart-container {
     position: relative;
     width: 250px;
     height: 250px;
     margin: 0 auto 30px;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
     border-radius: 50%;
 }

 .donut-chart {
     transform: rotate(-90deg);
     /* Start the circle at the top */
     overflow: visible;
 }

 .donut-chart circle {
     transition: stroke-dasharray 1s ease-out;
     /* Enable smooth CSS transition for animation */
 }

 .no-transition {
     transition: none !important;
 }

 .chart-label {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 100%;
     padding: 20px;
 }

 .chart-label .value-large {
     font-size: 2em;
     font-weight: bold;
     color: var(--text-color);
     display: block;
     margin-bottom: 5px;
 }

 .chart-label .value-total {
     font-size: .8em;
     font-weight: bold;
     color: var(--card-text-color);
     display: block;
     line-height: 1.2;
 }

 .percentage-label {
     font-size: 1.5em;
     font-weight: bold;
     color: var(--primary-color);
     margin-bottom: 40px;
 }

 .chart-column:nth-child(2) .percentage-label {
     color: var(--secondary-color);
 }

 .bar-charts-group {
     padding: 0 20px;
     text-align: left;
 }

 .bar-chart-item {
     margin-bottom: 15px;
 }

 .bar-label {
     font-size: 1em;
     font-weight: bold;
     color: var(--card-text-color);
     display: block;
     margin-bottom: 5px;
 }

 .bar-bg {
     height: 12px;
     background-color: #f0f0f0;
     border-radius: 6px;
     overflow: hidden;
 }

 .bar-progress {
     height: 100%;
     background-color: var(--bar-color);
     transition: width 1.5s ease-out;
     /* Enable smooth CSS transition for animation */
 }


 /* Sales Coverage Section -------------------------------------------------------------- End */
 /* --- Animation for All The documents  ------------------------- Start */
 /* Home Section  */
 /* --- Continuous Pulse Animation for the Circle --- */
 @keyframes pulse-glow {
     0% {
         box-shadow: 0 0 10px rgba(0, 135, 145, 0.4), 0 0 0 0 rgba(0, 135, 145, 0.7);
     }

     50% {
         box-shadow: 0 0 40px rgba(0, 135, 145, 0.8), 0 0 0 10px rgba(0, 135, 145, 0);
     }

     100% {
         box-shadow: 0 0 10px rgba(0, 135, 145, 0.4), 0 0 0 0 rgba(0, 135, 145, 0.7);
     }
 }


 /* Work Force and Facilities Animation ---------------------start */
 @keyframes fade-in-zoom {
     from {
         opacity: 0;
         transform: translateY(30px) scale(0.98);
     }

     to {
         opacity: 1;
         transform: translateY(0) scale(1);
     }
 }

 /* Work Force and Facilities Animation ---------------------end */
 /* Companies We Represent Section Animation-----------------start*/
 /* --- KEYFRAME ANIMATION FOR INSET BORDER LIGHT (UNCHANGED) --- */
 @keyframes border-spin {
     0% {
         top: var(--inset-padding);
         left: var(--inset-padding);
         opacity: 0.5;
     }

     2% {
         opacity: 1;
     }

     25% {
         top: var(--inset-padding);
         left: calc(100% - var(--inset-padding));
     }

     50% {
         top: calc(100% - var(--inset-padding));
         left: calc(100% - var(--inset-padding));
     }

     75% {
         top: calc(100% - var(--inset-padding));
         left: var(--inset-padding);
     }

     98% {
         opacity: 1;
     }

     100% {
         top: var(--inset-padding);
         left: var(--inset-padding);
         opacity: 0.5;
     }
 }

 /* Companies We Represent Section Animation-----------------end*/
 /* --- Animation for All The documents  ------------------------- End */


 /* ---------------------------------------------------- */
 /* --- Responsive Adjustments (MOBILE: <= 768px) --- */
 /* ---------------------------------------------------- */
 @media (max-width: 768px) {

     /* Organization Structure Section --- start */
     .branches-container {
         flex-direction: column;
         align-items: center;
         /* Center the cards vertically */
         border-top: none;
         /* Remove horizontal line when stacked */
         padding-top: 0;
     }

     /* Adjust the top group line to align left on mobile */
     .group-title::after {
         left: 10px;
         /* Adjust to a position that looks good on the left of the group title */
         transform: none;
     }

     .company-card {
         width: 90%;
         max-width: 400px;
         height: auto;
         margin: 20px auto;
         /* CRUCIAL ADDITIONS FOR VERTICAL LINE: */
         border-left: 2px solid #3f6087;
         /* Vertical layout line */
         padding-left: 25px;
         margin-left: 0;
     }

     /* Reset positioning for vertical layout */
     .company-card::before,
     .company-card::after {
         /* Reset properties from desktop view */
         left: 0;
         transform: none;
     }

     .company-card::before {
         /* Remove the line that connects to the horizontal line, which is now gone */
         height: 0;
         width: 0;
     }

     .company-card::after {
         /* Reposition the dot to sit on the new vertical line */
         top: 25px;
         /* Adjust vertical position */
         left: -8px;
         /* Offset to place the dot on the left vertical line */
         background-color: #3f6087;
     }

     /* Organization Structure Section --- End */

     .data-title {
         font-size: 2em;

     }

     .data-summary {
         font-size: 1.3em;
     }

     /* Adjustments for map  */
     @media (max-width: 768px) {
         .iraq-map-svg-container {
             width: 100%;
             max-width: 380px;
             /* cap width */
             height: 250px;
             /* give it a visible height */
             /* margin: 0 auto 15px; */
             /* center and space */
             position: relative;
             /* keep SVG absolute inside */
             overflow: hidden;
         }

         .iraq-map-svg {
             width: 100%;
             height: 100%;
             /* fill container */
         }
     }
 }