.footer .footer-bottom .footer-bottom-links a {
  white-space: nowrap;
}

/*
! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com
*/

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: #e5e7eb;
  /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
  tab-size: 4;
  /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
  font-variation-settings: normal;
  /* 6 */
  -webkit-tap-highlight-color: transparent;
  /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0;
  /* 1 */
  line-height: inherit;
  /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
  border-top-width: 1px;
  /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* 1 */
  font-feature-settings: normal;
  /* 2 */
  font-variation-settings: normal;
  /* 3 */
  font-size: 1em;
  /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
  border-collapse: collapse;
  /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-feature-settings: inherit;
  /* 1 */
  font-variation-settings: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  font-weight: inherit;
  /* 1 */
  line-height: inherit;
  /* 1 */
  color: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
  padding: 0;
  /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button;
  appearance: button;
  /* 1 */
  /* 1 */
  background-color: transparent;
  /* 2 */
  background-image: none;
  /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield;
  appearance: textfield;
  /* 1 */
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder,
textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  /* 1 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden] {
  display: none;
}

*,
::before,
::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x: ;
  --tw-pan-y: ;
  --tw-pinch-zoom: ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position: ;
  --tw-gradient-via-position: ;
  --tw-gradient-to-position: ;
  --tw-ordinal: ;
  --tw-slashed-zero: ;
  --tw-numeric-figure: ;
  --tw-numeric-spacing: ;
  --tw-numeric-fraction: ;
  --tw-ring-inset: ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia: ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x: ;
  --tw-pan-y: ;
  --tw-pinch-zoom: ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position: ;
  --tw-gradient-via-position: ;
  --tw-gradient-to-position: ;
  --tw-ordinal: ;
  --tw-slashed-zero: ;
  --tw-numeric-figure: ;
  --tw-numeric-spacing: ;
  --tw-numeric-fraction: ;
  --tw-ring-inset: ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia: ;
}

@font-face {
  font-family: "Montserrat-Regular";

  src: url("../assets/fonts/Montserrat/static/Montserrat-Regular.ttf") format("truetype");

  font-weight: 400;

  font-style: normal;
}

@font-face {
  font-family: "Montserrat-SemiBold";

  src: url("../assets/fonts/Montserrat/static/Montserrat-SemiBold.ttf") format("truetype");

  font-weight: 600;

  font-style: normal;
}

@font-face {
  font-family: "Montserrat-Italic";

  src: url("../assets/fonts/Montserrat/static/Montserrat-Italic.ttf") format("truetype");

  font-weight: 400;

  font-style: italic;
}

@font-face {
  font-family: "Montserrat-Bold";

  src: url("../assets/fonts/Montserrat/static/Montserrat-Bold.ttf") format("truetype");

  font-weight: 700;

  font-style: normal;
}

@font-face {
  font-family: "Montserrat-ExtraBold";
  src: url("../assets/fonts/Montserrat/static/Montserrat-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: "Montserrat-BoldItalic";

  src: url("../assets/fonts/Montserrat/static/Montserrat-BoldItalic.ttf") format("truetype");

  font-weight: 700;

  font-style: italic;
}

@font-face {
  font-family: "Roboto-Regular";

  src: url("../assets/fonts/Roboto/static/Roboto-Regular.ttf") format("truetype");

  font-weight: 400;

  font-style: normal;
}

@font-face {
  font-family: "Roboto-Medium";

  src: url("../assets/fonts/Roboto/static/Roboto-Medium.ttf") format("truetype");

  font-weight: 500;

  font-style: normal;
}

@font-face {
  font-family: "Roboto-Bold";

  src: url("../assets/fonts/Roboto/static/Roboto-Bold.ttf") format("truetype");

  font-weight: 700;

  font-style: normal;
}

html {
  font-size: 16px;
}

:root {
  --font-arabic: 'Cairo', 'IBM Plex Sans Arabic', sans-serif;
}

:lang(ar) {
  font-family: var(--font-arabic);
}

body {
  font-family: "Montserrat-Regular", sans-serif;
  background-color: #ffffff;
  margin: 0;
  padding: 0;
}

[dir="rtl"] body {
  font-family: 'Cairo', sans-serif;
}


.section {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  margin-left: auto;
  margin-right: auto;
  max-width: 1920px;
}

.section.visible {
  opacity: 1;
  transform: translateY(0);
}

header {
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  height: 37.2rem;
  max-width: 1920px;
}

@media (min-width: 768px) {
  header {
    height: 40.5rem;
  }
}

@media (min-width: 1280px) {
  header {
    height: 59.75rem;
  }
}

header .header-container {
  position: absolute;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.5) 0%, rgba(122, 121, 69, 0.19) 100%);
}

header .navbar {
  background-color: #ffffff;
  box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1019607843), 0px 2px 4px -2px rgba(0, 0, 0, 0.1019607843);
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 50;
  margin-left: auto;
  margin-right: auto;
  max-width: 1920px;
}

@media (min-width: 1280px) {
  header .navbar {
    padding-left: 5rem;
    padding-right: 5rem;
  }
}

header .navbar nav {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  max-width: 1920px;
  align-items: center;
  justify-content: space-between;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}



header .navbar h1 {
  font-family: "Montserrat-Bold";
  color: #111827;
  font-size: 1rem;
  line-height: 1.5rem;
}

@media (min-width: 768px) {
  header .navbar h1 {
    font-size: 1.5rem;
    line-height: 2rem;
  }
}

header .navbar .menu {
  display: none;
}

/* header .navbar .menu> :not([hidden])~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(2rem * var(--tw-space-x-reverse));
  margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
} */
header .navbar .menu> :not([hidden])~ :not([hidden]) {
  margin-inline-start: 2rem;
  /* Works in both LTR and RTL */
}


@media (min-width: 768px) {
  header .navbar .menu {
    display: flex;
  }
}

header .navbar .menu li a {
  color: #1f2937;
  font-family: "Roboto-Medium";
  font-size: 1rem;
}

header .navbar .menu li a:hover {
  color: #0056b3;
}

header .navbar .lang {
  position: relative;
  display: none;
}

@media (min-width: 768px) {
  header .navbar .lang {
    display: flex;
  }
}

header .navbar .lang .lang-btn {
  color: #374151;
  font-family: "Roboto-Medium";
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(208 213 218 / var(--tw-border-opacity));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

header .navbar .lang .lang-btn .lang-span {
  font-family: "Roboto-Medium";
  color: #374151;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

header .navbar .lang .lang-menu {
  position: absolute;
  right: 0px;
  top: 100%;
  z-index: 50;
  margin-top: 0.25rem;
  display: block;
  border-radius: 0.375rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  padding: 0.5rem;
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

/* Ensure hidden class works properly */
.mobile-lang-menu.hidden {
  display: none !important;
}

/* Ensure language menu links are clickable */
.mobile-lang-menu .lang-menu-button {
  display: block !important;
  width: 100% !important;
  padding: 0.5rem 1rem !important;
  text-decoration: none !important;
  color: #374151 !important;
  background-color: transparent !important;
  cursor: pointer !important;
  border: none !important;
  text-align: left !important;
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
  font-family: "Roboto-Medium" !important;
}

.mobile-lang-menu .lang-menu-button:hover {
  background-color: rgb(243 244 246) !important;
}

header .navbar .lang .lang-menu-button {
  font-family: "Roboto-Medium";
  color: #374151;
  display: block;
  width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: left;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

header .navbar .lang .lang-menu-button:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
}

header .hero {
  position: relative;
  width: 100%;
}

header .hero .hero-gradient {
  position: absolute;
  height: 33.7rem;
}

@media (min-width: 768px) {
  header .hero .hero-gradient {
    height: 36.5rem;
  }
}

@media (min-width: 1280px) {
  header .hero .hero-gradient {
    height: 55.75rem;
  }
}

header .hero .hero-text-container {
  position: relative;
  display: flex;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 4rem;
  padding-bottom: 1.5rem;
  text-align: center;
}

@media (min-width: 768px) {
  header .hero .hero-text-container {
    padding-top: 8rem;
    width: 50%;
    max-width: 35.8rem;
    padding-top: 12rem;
    padding-bottom: 12rem;
    padding-inline-start: 3rem;
    padding-inline-end: 3rem;
    text-align: start;
    position: relative;
    z-index: 10;
  }
}

@media (min-width: 1280px) {
  header .hero .hero-text-container {
    width: auto;
    padding-top: 18rem;
    padding-bottom: 18rem;
    padding-inline-start: 4rem;
  }
}

header .hero .hero-text-container .hero-text {
  max-width: 56rem;
  background-color: transparent;
}

@media (min-width: 1280px) {
  header .hero .hero-text-container .hero-text {
    padding: 1.5rem;
  }
}

header .hero .hero-text-container .hero-text h1 {
  font-family: "Montserrat-Bold";
  color: #111827;
  line-height: 2.9rem !important;
  text-align: center !important;
}

@media (min-width: 768px) {
  header .hero .hero-text-container .hero-text h1 {
    font-size: 2.5rem;
  }
}

@media (min-width: 1280px) {
  header .hero .hero-text-container .hero-text h1 {
    margin-bottom: 0.5rem !important;
    font-size: 3.75rem !important;
    line-height: 1 !important;
    line-height: 3.75rem !important;
  }
}

header .hero .hero-text-container .hero-text h2 {
  font-family: "Roboto-Regular";
  color: #1f2937;
  margin-bottom: 1.5rem;
  font-size: 1rem !important;
  line-height: 1.25rem !important;
  text-align: center !important;
}

@media (min-width: 768px) {
  header .hero .hero-text-container .hero-text h2 {
    font-size: 1.25rem !important;
    line-height: 1.75rem !important;
  }
}

@media (min-width: 1280px) {
  header .hero .hero-text-container .hero-text h2 {
    margin-bottom: 2rem !important;
    font-size: 1.875rem !important;
    line-height: 2.25rem !important;
  }
}

header .hero .hero-text-container .hero-text p {
  font-family: "Roboto-Regular";
  color: #1f2937;
  margin-bottom: 1.5rem;
  font-size: 1rem;
  line-height: 1.5rem;
  text-align: center !important;
}

@media (min-width: 768px) {
  header .hero .hero-text-container .hero-text p {
    font-size: 1.25rem !important;
    line-height: 2rem !important;
  }
}

@media (min-width: 1280px) {
  header .hero .hero-text-container .hero-text p {
    margin-bottom: 2rem !important;
    max-width: 42rem !important;
    line-height: 1.75rem !important;
  }
}

/* Responsive width for hero paragraph */
header .hero .hero-text-container .hero-text p {
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 768px) {
  header .hero .hero-text-container .hero-text p {
    max-width: 80%;
  }
}

@media (min-width: 1280px) {
  header .hero .hero-text-container .hero-text p {
    max-width: 42rem;
    /* Keep existing max-width for large screens */
  }
}

@media (min-width: 1280px) and (max-width: 1400px) {
  header .hero .hero-text-container {
    width: 45%;
    max-width: 32rem;
    display: flex !important;
    align-items: center !important;
    /* justify-content: center !important; */
    height: 100% !important;
    position: relative !important;
  }

  header .hero .hero-text-container .hero-text h1 {
    font-size: 3rem;
    line-height: 1;
  }

  header .hero .hero-text-container .hero-text h2 {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  header .hero .hero-text-container .hero-text p {
    font-size: 1.125rem;
    line-height: 1.75rem;
    width: 570px;
  }
}

header .hero .hero-text-container .hero-text button {
  background-color: #0056b3;
  color: #ffffff;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  align-items: center;
  border-radius: 0.75rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

@media (min-width: 768px) {
  header .hero .hero-text-container .hero-text button {
    margin-left: 0px;
    margin-right: 0px;
  }
}

@media (min-width: 1280px) {
  header .hero .hero-text-container .hero-text button {
    border-radius: 0.5rem;
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

header .hero .hero-text-container .hero-text button span {
  font-family: "Roboto-Medium";
  font-size: 1rem;
  line-height: 1.5rem;
}

@media (min-width: 768px) {
  header .hero .hero-text-container .hero-text button span {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

header .hero .hero-text-container .hero-text button:hover {
  background-color: rgb(0, 61.4972067039, 128);
}


@media (min-width: 768px) and (max-width: 1279px) {
  header .hero .hero-text-container {
    justify-content: flex-start !important;
    align-items: center;
    text-align: left;
    width: 100%;
    max-width: none;
    padding-inline-start: 4rem;
    padding-inline-end: 2rem;
  }

  header .hero .hero-text-container .hero-text {
    margin-inline-start: 0;
    padding: 1rem;
  }

  header .hero .hero-text-container .hero-text button {
    margin-left: 0;
  }
}

@media (min-width: 768px) and (max-width: 1279px) {
  header .hero .hero-text-container .hero-text p {
    max-width: 32rem;
    /* أو جرّب 30rem حسب ما يناسبك بصريًا */
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}


@media (min-width: 1300px) {
  header .hero .hero-text-container {
    justify-content: flex-start !important;
    padding-inline-start: 6rem;
    padding-inline-end: 2rem;
    width: 100%;
    max-width: none;
    text-align: left;
  }

  header .hero .hero-text-container .hero-text {
    padding: 1rem;
    margin-inline-start: 0;
  }

  header .hero .hero-text-container .hero-text p {
    max-width: 32rem;
    /* أو 36rem حسب الطول المطلوب */
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

  header .hero .hero-text-container .hero-text button {
    margin-left: 0;
  }
}



#mobile-menu .menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 2.5rem;
  padding-bottom: 1.5rem;
}

@media (min-width: 1400px) {
  #mobile-menu .menu-header {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}



#mobile-menu .menu-link {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

#mobile-menu .menu-link p {
  font-family: "Roboto-Medium";
  color: #1f2937;
  font-size: 1rem;
  line-height: 1.5rem;
}

#mobile-menu .mobile-lang-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

#mobile-menu .mobile-lang-btn span {
  color: #374151;
  font-family: "Roboto-Regular";
}

.mobile-lang-menu {
  position: absolute;
  right: 0px;
  top: 100%;
  z-index: 1200 !important;
  /* Increased to be above modal and top button */
  margin-top: 0.25rem;
  display: block;
  border-radius: 0.375rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  padding: 0.5rem;
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  color: #374151;
  font-family: "Roboto-Medium";
}

.mobile-lang-menu a,
.mobile-lang-menu button {
  display: block;
  width: 100%;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(243 244 246 / var(--tw-border-opacity));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  text-align: left;
  font-size: 1rem;
  line-height: 1.5rem;
  text-decoration: none;
  color: inherit;
}

.mobile-lang-menu a:hover,
.mobile-lang-menu button:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}

header .navbar.menu-open nav {
  flex-direction: column;
}

@media (max-width: 425px) {
  .navbar.mobile-menu-open {
    height: 100vh;
    background-color: #ffffff !important;
  }

  .navbar {
    background-color: transparent !important;
    box-shadow: none !important;
    transition: background-color 0.3s ease;
  }

  .navbar.scrolled {
    background-color: #ffffff !important;
    box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1019607843), 0px 2px 4px -2px rgba(0, 0, 0, 0.1019607843);
  }

  header {
    background: linear-gradient(0deg, rgba(199, 200, 189, 0.65) 0%, rgba(199, 200, 189, 0.65) 100%), url("/assets/images/hero.png") lightgray -98.801px -1.443px/228.814% 100.517% no-repeat;
    background-size: cover;
    background-position: center;
  }
}

.about {
  background-color: #f9fafb;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

@media (min-width: 768px) {
  .about {
    padding-left: 3rem;
    padding-right: 3rem;
    padding-top: 60px;
    padding-bottom: 60px;
  }
}

@media (min-width: 1280px) {
  .about {
    padding-left: 5rem;
    padding-right: 5rem;
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}

.about .about-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
}

@media (min-width: 768px) {
  .about .about-container {
    flex-direction: row;
    align-items: start;
    gap: 2rem;
  }
}

@media (min-width: 1280px) {
  .about .about-container {
    gap: 3rem;
  }
}

.about .about-container .about-image-container {
  /* height: 100%;
  width: 100%; */
  overflow: hidden;
  border-radius: 1rem;
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

@media (min-width: 768px) {
  .about .about-container .about-image-container {
    /* flex: 1 1 40%; */
    /* Assign a flex-basis, allowing it to grow/shrink */
    min-width: 0;
  }
}

@media (min-width: 768px) {
  .about .about-container .about-text-container {
    flex: 1 1 52%;
    /* Assign a flex-basis, allowing it to grow/shrink */
    min-width: 0;
  }
}

.about .about-container .about-text-container h2 {
  font-family: "Montserrat-Bold";
  color: #111827;
  margin-bottom: 1rem;
  font-size: 1.5rem;
  line-height: 2rem;
}

@media (min-width: 1280px) {
  .about .about-container .about-text-container h2 {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
}

.about .about-container .about-text-container .about-description {
  font-family: "Roboto-Regular";
  color: #1f2937;
  /* margin-left: auto; */
  margin-right: auto;
  max-width: 768px;
  font-size: 1rem;
  line-height: 1.5rem;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  flex-grow: 1;
  /* Allow description to grow */
}

@media (min-width: 1280px) {
  .about .about-container .about-text-container .about-description {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

.about .about-container .about-text-container .about-btns-container {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

@media (min-width: 768px) {
  .about .about-container .about-text-container .about-btns-container {
    flex-direction: row;
  }
}

@media (min-width: 1280px) {
  .about .about-container .about-text-container .about-btns-container {
    margin-top: 2rem;
    gap: 1rem;
  }
}

.about .about-container .about-text-container .about-btns-container .biography-btn {
  background-color: #0056b3;
  color: #ffffff;
  font-family: "Roboto-Medium";
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.5rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
}

@media (min-width: 768px) {
  .about .about-container .about-text-container .about-btns-container .biography-btn {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}

@media (min-width: 1280px) {
  .about .about-container .about-text-container .about-btns-container .biography-btn {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    font-size: 1rem;
    line-height: 1.5rem;
  }
}

.about .about-container .about-text-container .about-btns-container .biography-btn:hover {
  background-color: rgb(0, 61.4972067039, 128);
}

.linkedIn-btn {
  background-color: #ffffff !important;
  color: #0056b3 !important;
  font-family: "Roboto-Medium" !important;
  border: 1px solid #0056b3 !important;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05) !important;
  display: inline-flex;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  border-radius: 0.5rem !important;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
  font-size: 1rem !important;
  line-height: 1.5rem !important;
}

@media (min-width: 768px) {
  .linkedIn-btn {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
  }
}

@media (min-width: 1280px) {
  .linkedIn-btn {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
    font-size: 1rem !important;
    line-height: 1.5rem !important;
  }
}

.portfolio {
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

@media (min-width: 768px) {
  .portfolio {
    padding-left: 3rem;
    padding-right: 3rem;
    padding-top: 60px;
    padding-bottom: 60px;
  }
}

@media (min-width: 1280px) {
  .portfolio {
    padding-left: 3.5rem;
    padding-right: 3.5rem;
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}

.portfolio .portfolio-text {
  margin-bottom: 2rem;
  text-align: center;
}

@media (min-width: 1280px) {
  .portfolio .portfolio-text {
    margin-bottom: 4rem;
  }
}

.portfolio .portfolio-text {
  margin-bottom: 1.5rem;
}

.portfolio .portfolio-text h2 {
  font-family: "Montserrat-Bold";
  color: #111827;
  margin-bottom: 1rem;
  font-size: 1.5rem;
  line-height: 2rem;
}

@media (min-width: 1280px) {
  .portfolio .portfolio-text h2 {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
}

.portfolio .portfolio-text p {
  font-family: "Roboto-Regular";
  color: #374151;
  margin-left: auto;
  margin-right: auto;
  max-width: 768px !important;
  font-size: 1rem !important;
  line-height: 1.5rem !important;
}

@media (min-width: 1280px) {
  .portfolio .portfolio-text p {
    font-size: 1.125rem !important;
    line-height: 1.75rem !important;
  }
}

/* Override for portfolio description to always be centered */
.portfolio .portfolio-text p {
  text-align: center !important;
}

.portfolio .portfolio-gallary-container {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2rem;
  padding-left: 0px;
  padding-right: 0px;
}

@media (min-width: 1280px) {
  .portfolio .portfolio-gallary-container {
    /* padding-left: 2rem;
    padding-right: 2rem; */
  }
}

.portfolio .portfolio-gallary-container .portfolio-gallary {
  margin-left: auto;
  margin-right: auto;
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
  padding: 0 16px;
}

.portfolio .portfolio-gallary-container .portfolio-gallary::-webkit-scrollbar {
  display: none;
}

.portfolio .portfolio-gallary-container .portfolio-gallary .gallary-images {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  width: 100%;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

@media (min-width: 1024px) {
  .portfolio .portfolio-gallary-container .portfolio-gallary .gallary-images {
    gap: 0px;
  }
}

.portfolio .portfolio-gallary-container .portfolio-gallary .gallary-images img {
  flex-shrink: 0;
  max-width: 100% !important;
  object-fit: cover !important;
}


/* Responsive fixes for gallery images at high zoom levels */
@media (max-width: 1400px) {
  .portfolio .portfolio-gallary-container .portfolio-gallary .gallary-images img {
    /* max-width: 120px !important; */
  }
}

@media (max-width: 1200px) {
  .portfolio .portfolio-gallary-container .portfolio-gallary .gallary-images img {
    /* max-width: 100px !important; */
  }
}

@media (max-width: 900px) {
  .portfolio .portfolio-gallary-container .portfolio-gallary .gallary-images img {
    /* max-width: 80px !important; */
  }
}

@media (max-width: 600px) {
  .portfolio .portfolio-gallary-container .portfolio-gallary .gallary-images img {
    /* max-width: 70px !important; */
  }
}

.cards-container {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 2rem;
}

@media (min-width: 768px) {
  .cards-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .cards-container {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* Add a breakpoint for extra-large screens to enforce 3 columns */
@media (min-width: 1536px) {
  .cards-container {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.cards-container .portfolio-card {
  box-shadow: 0px 2px 4px -2px rgba(0, 0, 0, 0.1), 0px 4px 6px -1px rgba(0, 0, 0, 0.1);
  border-radius: 1rem;
  display: flex;
  /* Make the card a flex container */
  flex-direction: column;
  /* Stack its children vertically */
}

.cards-container .portfolio-card .card-img {
  width: 100%;
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}

.cards-container .portfolio-card .card-content {
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  display: flex;
  /* Add flex display */
  flex-direction: column;
  /* Stack children vertically */
  flex-grow: 1;
  /* Allow content to grow and fill card height */
}

@media (min-width: 1280px) {
  .cards-container .portfolio-card .card-content {
    padding: 1.5rem;
  }
}

.cards-container .portfolio-card .card-content .card-header {
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

@media (min-width: 1280px) {
  .cards-container .portfolio-card .card-content .card-header {
    gap: 1.25rem;
  }
}

.cards-container .portfolio-card .card-content .card-header__title {
  font-family: "Montserrat-Bold";
  color: #111827;
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.cards-container .portfolio-card .card-content .card-header__description {
  font-family: "Roboto-Regular";
  color: #374151;
  text-overflow: ellipsis;
  margin-bottom: 1rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  font-size: 0.9rem;
  line-height: 1.5rem;
  flex-grow: 1;
  /* Allow description to grow */
}

@media (min-width: 1280px) {
  .cards-container .portfolio-card .card-content .card-header__description {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    flex-grow: 1;
    /* Allow description to grow on large screens too */
  }
}

@media (max-width: 1279px) {
  .cards-container .portfolio-card .card-footer {
    flex-direction: row;
    align-items: flex-start;
    gap: 1rem;
  }
}

@media (max-width: 767px) {
  .cards-container .portfolio-card .card-footer {
    flex-direction: row;
    gap: 0.5rem;
    align-items: flex-start;
    justify-content: space-between;
  }

  .cards-container .portfolio-card .card-footer span {
    font-size: 14px !important;
    line-height: 20px !important;
    flex: 1;
    text-align: center;
  }
}

.cards-container .portfolio-card .card-content .media-card-title-container {
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cards-container .portfolio-card .card-content .media-card-title-container .media-card__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

@media (min-width: 1280px) {
  .cards-container .portfolio-card .card-content .media-card-title-container .media-card__title {
    gap: 0.75rem;
  }
}

.cards-container .portfolio-card .card-content .media-card-title-container .media-card__title h4 {
  font-family: "Roboto-Medium";
  color: #111827;
  font-size: 1rem;
  line-height: 1.5rem;
}

.cards-container .portfolio-card .card-content .media-card-title-container .media-card__title p {
  font-family: "Roboto-Regular";
  color: #6b7280;
  font-size: 0.75rem;
  line-height: 1rem;
}

.cards-container .portfolio-card .card-content .media-card__likes {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}

.cards-container .portfolio-card .card-content .media-card__likes p {
  font-family: "Roboto-Regular";
  color: #6b7280;
  font-size: 1rem;
  line-height: 1.5rem;
}

.cards-container .portfolio-card .card-footer {
  margin-bottom: 1.5rem;
  display: flex;
  justify-content: space-between;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity));
  margin-top: auto;
  /* Push footer to the bottom */
}

.cards-container .portfolio-card .card-footer span {
  font-family: 'Roboto-Regular';
  color: #4b5563 !important;
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
}

.cards-container .portfolio-card .card-btn {
  color: #1f2937;
  font-family: "Roboto-Medium";
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  border-radius: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
  margin-top: auto;
  /* Push button to the bottom */
}

.timeline-section {
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

@media (min-width: 768px) {
  .timeline-section {
    padding-left: 3rem;
    padding-right: 3rem;
    padding-top: 60px;
    padding-bottom: 60px;
  }
}

@media (min-width: 1280px) {
  .timeline-section {
    padding-left: 5rem;
    padding-right: 5rem;
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}

.timeline-section {
  --tw-bg-opacity: 1;
  /* background-color: rgb(249 250 250 / var(--tw-bg-opacity)); */
}

.timeline-section .timeline-container {
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 1280px) {
  .timeline-section .timeline-container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

.timeline-section .timeline-container .timeline-text {
  margin-bottom: 2rem;
  text-align: center;
}

@media (min-width: 1280px) {
  .timeline-section .timeline-container .timeline-text {
    margin-bottom: 4rem;
  }
}

.timeline-section .timeline-container .timeline-text h2 {
  font-family: "Montserrat-Bold";
  color: #111827;
  margin-bottom: 1rem;
  font-size: 1.5rem;
  line-height: 2rem;
}

@media (min-width: 1280px) {
  .timeline-section .timeline-container .timeline-text h2 {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
}

.timeline-section .timeline-container .timeline-text p {
  font-family: "Roboto-Regular";
  color: #374151;
  margin-left: auto;
  margin-right: auto;
  max-width: 768px;
  font-size: 1rem;
  line-height: 1.5rem;
}

@media (min-width: 1280px) {
  .timeline-section .timeline-container .timeline-text p {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

/* Base Styles (Mobile First) */

.timeline {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 100%;
  background: #e4e7eb;
  z-index: 1;
}

.timeline-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 3rem;
  position: relative;
}

.timeline-content {
  width: 46%;
  position: relative;
}

.timeline-marker {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #0056b3;
  border: 4px solid #ffffff;
  z-index: 2;
}

.timeline-card {
  padding: 1.5rem;
  background: #ffffff;
  border-radius: 1rem;
  box-shadow: 0px 2px 4px -2px rgba(0, 0, 0, 0.1), 0px 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.timeline-card h3 {
  font-size: 1.25rem;
  color: #111827;
  font-family: "Montserrat-Bold";
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.timeline-card h4 {
  color: #0056b3;
  font-family: "Montserrat-Bold";
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.timeline-card p {
  color: #374151;
  font-family: "Roboto-Regular";
  font-size: 1rem;
  line-height: 1.5;
}

/* Mobile Responsive (Below 768px) */

@media (max-width: 767px) {
  .timeline::before {
    left: 20px;
  }

  .timeline-item {
    flex-direction: column;
    margin-bottom: 2rem;
  }

  .timeline-content {
    width: 100%;
    padding-left: 40px;
    margin-bottom: 1rem;
  }

  .timeline-content.left,
  .timeline-content.right {
    padding-right: 0;
  }

  .timeline-marker {
    left: 5px;
    top: 0;
  }

  /* Hide empty divs on mobile */

  .timeline-content:empty {
    display: none;
  }
}

.press-section {
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
  background-color: #f9fafb;
}

@media (min-width: 768px) {
  .press-section {
    padding-left: 3rem;
    padding-right: 3rem;
    padding-top: 60px;
    padding-bottom: 60px;
  }
}

@media (min-width: 1280px) {
  .press-section {
    padding-left: 5rem;
    padding-right: 5rem;
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}

.press-section .press-container {
  margin-left: auto;
  margin-right: auto;
}

.press-section .press-container .press-text {
  margin-bottom: 2rem;
  text-align: center;
}

@media (min-width: 1280px) {
  .press-section .press-container .press-text {
    margin-bottom: 4rem;
  }
}

.press-section .press-container .press-text {
  margin-bottom: 2rem;
  text-align: center;
}

@media (min-width: 1280px) {
  .press-section .press-container .press-text {
    margin-bottom: 4rem;
  }
}

.press-section .press-container .press-text h2 {
  font-family: "Montserrat-Bold";
  color: #111827;
  margin-bottom: 1rem;
  font-size: 1.5rem;
  line-height: 2rem;
}

@media (min-width: 1280px) {
  .press-section .press-container .press-text h2 {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
}

.press-section .press-container .press-text p {
  font-family: "Roboto-Regular";
  color: #374151;
  margin-left: auto;
  margin-right: auto;
  max-width: 768px;
  font-size: 1rem !important;
  line-height: 1.5rem !important;
}

@media (min-width: 1280px) {
  .press-section .press-container .press-text p {
    font-size: 1.125rem !important;
    line-height: 1.75rem !important;
  }
}

/* Override for press section description to always be centered */
.press-section .press-container .press-text p {
  text-align: center !important;
}

/* Press & Recognition with Slider */

.press-slider {
  position: relative;
}

@media (min-width: 1280px) {
  .press-slider {
    /* padding-left: 3rem;
    padding-right: 3rem; */
  }
}

.press-slider {
  margin: 0 auto;
}

.press-slide {
  display: none;
  animation: fade 0.5s ease;
}

.press-slide.active {
  display: block;
}

.media-feature {
  display: flex;
  flex-wrap: wrap;
  /* Allow items to wrap to the next line */
  background: white;
  border-radius: 1rem;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25), 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  /* min-height: 300px; */
  margin-bottom: 10px !important;
  /* Ensure minimum height for consistency */
}

@media (max-width: 1024px) {
  .media-feature {
    /* flex-direction: column; */
    /* Stack items vertically on smaller screens */
  }

  .media-logo,
  .media-content {
    /* width: 100%; */
    /* Make both sections full-width on smaller screens */
  }
}

.media-logo {
  width: 100%;
  flex-shrink: 0;
  /* Prevent the logo container from shrinking */
}

@media (min-width: 768px) {
  .media-logo {
    width: 50% !important;
  }
}

.media-logo {
  display: flex;
  align-items: center;
}

.media-logo img,
.media-logo video {
  height: 100% !important;
  width: 100%;
  border-top-left-radius: 0.75rem;
  border-top-right-radius: 0.75rem;
  object-fit: cover;
  /* This will make the image cover the container without distortion */
}

@media (min-width: 768px) {

  .media-logo img,
  .media-logo video {
    border-top-left-radius: 1rem;
    border-bottom-left-radius: 1rem;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
  }
}

.media-logo img {
  max-width: 100%;
}

.media-logo,
.media-video {
  width: 100%;
  height: auto;
  border-top-left-radius: 0.75rem;
  border-top-right-radius: 0.75rem;
  object-fit: cover;
}

@media (min-width: 768px) {
  .media-video {
    border-top-left-radius: 1rem;
    border-bottom-left-radius: 1rem;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
  }
}

.media-content {
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  flex-basis: 50%;
  /* Define a base width */
  flex-grow: 1;
  /* Allow the content to grow and take remaining space */
}

@media (min-width: 1280px) {
  .media-content {
    padding: 2rem;
  }
}

.media-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* Distribute space evenly */
  overflow-y: auto;
  /* Add scroll for overflowing text */
}

.media-content div {
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

@media (min-width: 1280px) {
  .media-content div {
    margin-bottom: 1.5rem;
    gap: 0.75rem;
    font-size: 1rem;
    line-height: 1.5rem;
  }
}

.media-content div img {
  height: 1.5rem;
  width: 1.5rem;
  border-radius: 50%;
}

@media (min-width: 1280px) {
  .media-content div img {
    height: 2.5rem;
    width: 2.5rem;
  }
}

.media-content div span {
  color: #2563eb;
  font-family: "Roboto-Medium";
}

.media-content .date {
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

@media (min-width: 1280px) {
  .media-content .date {
    margin-bottom: 1.5rem;
    gap: 0.75rem;
    font-size: 1rem;
    line-height: 1.5rem;
  }
}

.media-content .date img {
  height: 1rem;
  width: 1rem;
}

.media-content .date span {
  color: #6b7280;
  font-family: "Roboto-Regular";
}

.media-content h3 {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

@media (min-width: 1024px) {
  .media-content h3 {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1280px) {
  .media-content h3 {
    font-size: 1.5rem;
    line-height: 2rem;
  }
}

.media-content h3 {
  font-weight: 600;
  font-family: "Montserrat-SemiBold";
  color: #1f2937;
  margin-bottom: 1rem;
}

.media-content p {
  font-size: 1rem;
  color: #4b5563;
  font-family: "Roboto-Regular";
  font-weight: 400;
  margin-bottom: 1rem;
  flex-grow: 1;
  /* Allow paragraph to grow and push the link down */
  min-height: 0;
  /* Allow paragraph to shrink */
  line-height: 1.5;
  /* Better line height for readability */
}

.watch-link {
  display: flex;
  color: #4a6fdc;
  font-family: "Roboto-Medium";
  font-size: 1rem;
  text-decoration: none;
  transition: color 0.3s;
  align-items: center;
  gap: 4px;
}

[dir="rtl"] .watch-link img {
  transform: rotate(180deg);
}

.watch-link:hover {
  color: #003d82;
  text-decoration: underline;
}

.slider-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 2rem;
  gap: 20px;
}

.slider-prev,
.slider-next {
  display: none;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #0056b3;
  padding: 0 1rem;
}

.slider-dots {
  display: flex;
  gap: 10px;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ccc;
  cursor: pointer;
}

.dot.active {
  background: #0056b3;
}

/* Animation */

@keyframes fade {
  from {
    opacity: 0.4;
  }

  to {
    opacity: 1;
  }
}

/* Responsive Design */

@media (max-width: 767px) {
  .media-feature {
    flex-direction: column;
    min-height: auto;
    /* Adjust height for mobile */
  }

  .media-logo {
    padding-right: 0;
    width: 100%;
    justify-content: center;
  }

  .media-content {
    justify-content: flex-start;
    /* Stack content from top on mobile */
    flex-basis: auto;
    /* Reset basis on mobile */
  }
}

/* New rule for desktop and tablet */
@media (min-width: 768px) {
  .media-feature {
    /* height: 420px; */
    /* Set a fixed height */
  }
}

/* Ensure no horizontal scroll and stack media/content under ~1257px (incl. ~1005px case) */
/* @media (max-width: 1257px) {

  .press-section .press-container,
  .press-section .press-slider {
    overflow-x: hidden;
  }

  .media-feature {
    flex-direction: column !important;
    align-items: stretch !important;
    height: auto !important;
    /* allow details under video to be visible when stacked 
  }

  .media-logo,
  .media-content {
    width: 100% !important;
  }

  .media-content {
    flex-basis: auto !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }
} */

/* Slide animation */

@keyframes slideIn {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(0);
  }
}

@keyframes slideOut {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}

.news-section {
  --tw-bg-opacity: 1;
  /* background-color: rgb(249 250 250 / var(--tw-bg-opacity)); */
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

@media (min-width: 768px) {
  .news-section {
    padding-left: 3rem;
    padding-right: 3rem;
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}

@media (min-width: 1280px) {
  .news-section {
    padding-left: 5rem;
    padding-right: 5rem;
    padding-top: 6rem;
    padding-bottom: 2.5rem;
  }
}

.news-section .news-card {
  background: #ffffff;
  border-radius: 1rem;
  box-shadow: 0px 2px 4px -2px rgba(0, 0, 0, 0.1), 0px 4px 6px -1px rgba(0, 0, 0, 0.1);
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

@media (max-width: 767px) {
  .newsCarousel .swiper-slide .news-card {
    width: 100% !important;
  }
}

@media (min-width: 1280px) {
  .news-section .news-card {
    padding: 1.5rem;
  }
}

.news-section .news-card {
  width: 95%;
  /* Force card to fill its container */
  height: 100%;
  /* Make card fill the slide height */
  display: flex;
  flex-direction: column;
  z-index: 1;
  margin-bottom: 10px;
  /* min-height: 300px; */
  /* Increased min-height for better consistency */
}

.news-section .news-card p {
  font-family: "Roboto-Regular";
  color: #374151;
  margin-bottom: 1rem !important;
  font-size: 1rem !important;
  line-height: 1.5rem !important;
  flex-grow: 1;
  /* Allow paragraph to grow and push footer down */
}

@media (min-width: 1280px) {
  .news-section .news-card p {
    margin-bottom: 1.5rem;
  }
}

.news-section .news-card span {
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
  font-family: "Roboto-Regular";
  color: #6b7280;
}

.news-section .news-card button {
  color: #0056b3;
  font-family: "Roboto-Medium";
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.news-section .navigation-btn {
  box-shadow: 0px 4px 6px -4px rgba(0, 0, 0, 0.1), 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
  background-color: #ffffff;
  color: #0056b3;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  height: 3rem;
  width: 3rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
}

.news-section .navigation-btn:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}

@media (min-width: 768px) {
  .news-section .navigation-btn {
    display: flex;
  }
}

.news-section .swiper-button-next:after,
.news-section .swiper-button-prev:after {
  display: none;
}

.news-section .news-container {
  position: relative;
}

@media (max-width: 767px) {
  .news-section .swiper-slide {
    width: 100% !important;
    margin-right: 0 !important;
  }

  .news-section .news-container {
    padding-left: 0;
    padding-right: 0;
  }

  .news-section .navigation-btn {
    display: none;
  }
}

.news-section .swiper-pagination-bullet-active {
  background: #0056b3 !important;
  width: 10px !important;
  height: 10px !important;
}

.news-section .swiper {
  overflow-y: visible !important;
  padding-bottom: 15px;
}

.news-section .swiper-button-next {
  right: 0;
  /* transform: translateX(5%) translateY(-50%); */
  /* position: fixed; */
  top: calc(50% - 36px);
  margin-top: 0;
}

[dir="rtl"] .news-section .swiper-button-next {
  right: -24px;

}

.news-section .swiper-button-prev {

  /* transform: translateX(-40%) translateY(-40%); */
  margin-top: 0;
  top: calc(50% - 36px);
  left: -24px;
}

[dir="rtl"] .news-section .swiper-button-prev {
  left: 0;

}

.news-section .swiper-slide {
  height: auto;
  display: flex;
  /* Ensure slides are flex containers */
}



.social-media {
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
  background-color: #f9fafb;
}

@media (min-width: 768px) {
  .social-media {
    padding-left: 3rem;
    padding-right: 3rem;
    padding-top: 60px;
    padding-bottom: 60px;
  }
}

@media (min-width: 1280px) {
  .social-media {
    padding-left: 5rem;
    padding-right: 5rem;
    padding-top: 5rem;
    padding-bottom: 3.5rem;
  }
}

.social-media .social-media-container {
  margin-left: auto;
  margin-right: auto;
}

.social-media .social-media-container .social-media-text {
  margin-bottom: 2rem;
  text-align: center;
}

@media (min-width: 1280px) {
  .social-media .social-media-container .social-media-text {
    margin-bottom: 4rem;
  }
}

.social-media .social-media-container .social-media-text {
  margin-bottom: 2rem;
  text-align: center;
}

@media (min-width: 1280px) {
  .social-media .social-media-container .social-media-text {
    margin-bottom: 4rem;
  }
}

.social-media .social-media-container .social-media-text h2 {
  font-family: "Montserrat-Bold";
  color: #111827;
  margin-bottom: 1rem !important;
  font-size: 1.5rem !important;
  line-height: 2rem !important;
}

@media (min-width: 1280px) {
  .social-media .social-media-container .social-media-text h2 {
    font-size: 2.25rem !important;
    line-height: 2.5rem !important;
  }
}

.social-media .social-media-container .social-media-text p {
  font-family: "Roboto-Regular";
  color: #4B5563;
  margin-left: auto;
  margin-right: auto;
  max-width: 768px !important;
  font-size: 1rem !important;
  line-height: 1.5rem !important;
}

@media (min-width: 1280px) {
  .social-media .social-media-container .social-media-text p {
    font-size: 1.125rem !important;
    line-height: 1.75rem !important;
  }
}

.social-media .social-media-container .social-media-tabs {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2rem;
  width: 100%;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
}

@media (min-width: 768px) {
  .social-media .social-media-container .social-media-tabs {
    width: -moz-fit-content;
    width: fit-content;
  }
}

@media (min-width: 1280px) {
  .social-media .social-media-container .social-media-tabs {
    margin-bottom: 4rem;
  }
}

.social-media .social-media-container .social-media-tabs ul {
  color: #374151;
  margin-bottom: -1px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

@media (min-width: 768px) {
  .social-media .social-media-container .social-media-tabs ul {
    font-size: 1rem;
    line-height: 1.5rem;
  }
}

.tab-btn {
  font-family: "Roboto-Medium";
  display: inline-block;
  border-radius: 9999px;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.tab-btn:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(231 232 234 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity));
}

@media (min-width: 768px) {
  .tab-btn {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
}

@media (min-width: 1280px) {
  .tab-btn {
    font-size: 1rem;
    line-height: 1.5rem;
  }
}

@media (prefers-color-scheme: dark) {
  .tab-btn:hover {
    --tw-text-opacity: 1;
    color: rgb(209 213 219 / var(--tw-text-opacity));
  }
}

.footer {
  background-color: #111827;
  color: #ffffff;
  padding-top: 2rem;
  padding-bottom: 2rem;
  padding-left: 1rem;
  padding-right: 1rem;
  max-width: 1920px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .footer {
    padding-left: 3rem;
    padding-right: 3rem;
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}

@media (min-width: 1280px) {
  .footer {
    padding-left: 5rem;
    padding-right: 5rem;
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}

.footer .footer-container {
  margin-left: auto;
  margin-right: auto;
  display: grid;

  grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  gap: 2.5rem;
}

@media (min-width: 768px) {
  .footer .footer-container {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1280px) {
  .footer .footer-container {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

.footer .footer-container .footer-section-title {
  font-family: "Montserrat-Bold";
  color: #ffffff;
  margin-bottom: 0.75rem;
  font-size: 1.25rem;
  line-height: 1.75rem;
}

@media (min-width: 1280px) {
  .footer .footer-container .footer-section-title {
    margin-bottom: 1rem;
  }
}

.footer .footer-container .footer-section-description,
.footer .footer-container .footer-section-links {
  font-size: 1rem !important;
  line-height: 1.5rem !important;
  font-family: "Roboto-Regular";
  color: #9ca3af;
}

.footer .footer-container .footer-section-description a:hover,
.footer .footer-container .footer-section-links a:hover {
  color: #ffffff;
}

.footer .footer-container .form input {
  background-color: #1f2937;
  color: #ffffff;
  font-family: "Roboto-Regular";
  width: 100%;
  border-top-left-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.footer .footer-container .form input:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

@media (min-width: 640px) {
  .footer .footer-container .form input {
    flex: 1 1 0%;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
  }
}

.footer .footer-container .form button {
  background-color: #0056b3;
  color: #ffffff;
  font-family: "Roboto-Regular";
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

@media (min-width: 640px) {
  .footer .footer-container .form button {
    margin-left: 0px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
  }
}

.footer .footer-container .form button:hover {
  background-color: rgb(0, 61.4972067039, 128);
}

.footer .footer-bottom {
  border-top: 1px solid #1f2937;
  font-family: "Roboto-Regular";
  color: #9ca3af;
  margin-top: 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.5rem;
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
}

@media (min-width: 768px) {
  .footer .footer-bottom {
    flex-direction: row;
    gap: 0px;
  }
}

.footer .footer-bottom .footer-bottom-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  /* ensure spacing between links in both LTR/RTL */
}

/* Remove LTR-only spacing utility and use gap to support RTL */

@media (min-width: 768px) {
  .footer .footer-bottom .footer-bottom-links {
    justify-content: flex-start;
  }
}

.footer .footer-bottom .footer-bottom-links a:hover {
  color: #ffffff;
}

.top-btn {
  z-index: 1100;
  /* Increased z-index to be above the modal */
  background-color: #0056b3;
  color: #ffffff;
  box-shadow: 0px 4px 6px -4px rgba(0, 0, 0, 0.1), 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  display: flex;
  height: 3rem;
  width: 3rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
}

.top-btn:hover {
  background-color: rgb(0, 61.4972067039, 128);
}

/*# sourceMappingURL=style.css.map */

/* Modal Styles */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
  /* above sliders and headers */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  pointer-events: none;
  /* block clicks when hidden */
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}


.modal-content {
  background: #fff;
  padding: 2rem;
  border-radius: 1rem;
  max-width: 800px;
  width: 90%;
  position: relative;
  max-height: 80vh;
  overflow-y: auto;
  overflow-x: hidden;
  /* prevent horizontal scroll */
}

.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  cursor: pointer;
}

.modal-content h2 {
  font-weight: bold !important;
  margin-bottom: 1rem;
}


/* Reusable media class for card images/videos across the site */
.card-media {
  width: 100%;
  /* default card ratio */
  object-fit: cover;
  border-radius: 0.75rem;
  display: block;
  max-width: 100% !important;
  height: auto !important;
}

/* Smaller card media variants */
.card-media--news {
  aspect-ratio: 4 / 3;
}

.card-media--portrait {
  aspect-ratio: 3 / 4;
}

/* Preserve full image without cropping (adds letterboxing if needed) */
.card-media--contain {
  object-fit: contain;
  background: #ffffff;
}

/* Responsive fixes for card media at high zoom levels */
@media (max-width: 1400px) {


  .card-media--news {
    aspect-ratio: 5 / 4 !important;
  }
}

@media (max-width: 1200px) {


  .card-media--news {
    aspect-ratio: 4 / 3 !important;
  }
}

@media (max-width: 900px) {
  .card-media {
    border-radius: 0.25rem !important;
  }

  .card-media--news {
    aspect-ratio: 3 / 2 !important;
  }
}

/* Ensure card media doesn't break layout at extreme zoom */
@media (max-width: 600px) {
  .card-media {
    max-height: 215px !important;
  }

  .card-media--news {
    aspect-ratio: 4 / 3 !important;
    max-height: 150px !important;
  }
}

#biographyModal .modal-content h2 {
  font-weight: bold !important;
  margin-bottom: 1rem;
}

/* Prevent page from scrolling when a modal is open and ensure overlay covers viewport */
html.modal-open,
body.modal-open {
  overflow: hidden !important;
}

/* Guard against parent overflow clipping */
.modal-overlay {
  inset: 0;
}

/* Ensure legal modals content never causes horizontal scrolling */
.legal-modal .modal-content,
#biographyModal .modal-content {
  width: min(90%, 800px);
}

.legal-modal .modal-content *,
#biographyModal .modal-content * {
  overflow-wrap: anywhere;
  /* break long words/URLs */
  word-break: break-word;
  white-space: normal;
  /* disable no-wrap from pasted content */
}

/* Make embedded media responsive inside modals */
.legal-modal .modal-content img,
#biographyModal .modal-content img,
.legal-modal .modal-content video,
#biographyModal .modal-content video,
.legal-modal .modal-content iframe,
#biographyModal .modal-content iframe {
  max-width: 100%;
  height: auto;
}

/* Prevent tables from forcing horizontal scroll */
.legal-modal .modal-content table,
#biographyModal .modal-content table {
  width: 100% !important;
  display: block;
  overflow-x: auto;
}

.hero-header {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  isolation: isolate;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.2);

}


@media (min-width: 768px) {
  .hero-header>*:not(.hero-overlay) {
    position: absolute !important;
    /* z-index: 2 !important; */
  }
}


.hero-header>*:not(.hero-overlay) {
  position: absolute;


}

/* Force hero text container to stay LTR even in RTL languages */
header .hero .hero-text-container {
  direction: ltr !important;
  text-align: left !important;
}

header .hero .hero-text-container .hero-text {
  direction: ltr !important;
  text-align: left !important;
}

header .hero .hero-text-container .hero-text h1,
header .hero .hero-text-container .hero-text h2,
header .hero .hero-text-container .hero-text p {
  direction: ltr !important;
  text-align: left !important;
}

/* Override RTL direction specifically */
[dir="rtl"] header .hero .hero-text-container,
[dir="rtl"] header .hero .hero-text-container .hero-text,
[dir="rtl"] header .hero .hero-text-container .hero-text h1,
[dir="rtl"] header .hero .hero-text-container .hero-text h2,
[dir="rtl"] header .hero .hero-text-container .hero-text p {
  direction: rtl !important;
  text-align: right !important;
}

/* Hide Curator.io branding with higher specificity */
.crt-logo,
.crt-logo.crt-tag,
a.crt-logo,
a.crt-logo.crt-tag {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Fix text justification on mobile for the About section */
@media (max-width: 767px) {
  .about-description p {
    /* text-align: start !important; */
  }
}

/* ========================================
   SOCIAL MEDIA FEED RESPONSIVE FIXES
   ======================================== */

@media (max-width: 1400px) {
  .social-media .social-media-container .social-media-tabs {
    width: 100% !important;
    max-width: 600px !important;
  }

  .social-media .social-media-container .social-media-tabs ul {
    font-size: 0.875rem !important;
    padding: 0.25rem !important;
  }

  .tab-btn {
    padding: 0.5rem 1rem !important;
    font-size: 0.875rem !important;
  }
}

@media (max-width: 1200px) {
  .social-media .social-media-container .social-media-tabs {
    width: 100% !important;
    max-width: 500px !important;
  }

  .social-media .social-media-container .social-media-tabs ul {
    font-size: 0.75rem !important;
    padding: 0.25rem !important;
  }

  .tab-btn {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.75rem !important;
  }
}

@media (max-width: 900px) {
  .social-media .social-media-container .social-media-tabs {
    width: 100% !important;
    max-width: 400px !important;
  }

  .social-media .social-media-container .social-media-tabs ul {
    flex-wrap: wrap !important;
    gap: 0.25rem !important;
  }

  .tab-btn {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.75rem !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 600px) {
  .social-media .social-media-container .social-media-tabs {
    width: 100% !important;
    max-width: 100% !important;
  }

  .social-media .social-media-container .social-media-tabs ul {
    flex-direction: column !important;
    gap: 0.25rem !important;
  }

  .tab-btn {
    width: 100% !important;
    text-align: center !important;
    padding: 0.75rem !important;
    font-size: 0.875rem !important;
  }
}

/* ========================================
   RESPONSIVE FIXES FOR HIGH ZOOM LEVELS (150%+)
   ======================================== */

/* Global responsive improvements */
@media (min-resolution: 1.5dppx),
(min-resolution: 144dpi) {

  /* Improve text readability at high zoom */
  body {
    font-size: 16px !important;
    line-height: 1.6 !important;
  }

  /* Ensure containers don't overflow */
  .section {
    /* max-width: 100vw !important;
    overflow-x: hidden !important; */
  }

  /* Fix header responsiveness */
  header {
    min-height: auto !important;
  }

  header .hero .hero-text-container {
    max-width: 100% !important;
    width: 50% !important;
  }

  /* Improve text scaling */
  header .hero .hero-text-container .hero-text h1 {
    /* font-size: clamp(1.5rem, 4vw, 3rem) !important;
    line-height: 1.2 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important; */
  }

  header .hero .hero-text-container .hero-text h2 {
    /* font-size: clamp(1rem, 2.5vw, 1.5rem) !important;
    line-height: 1.3 !important; */
  }

  header .hero .hero-text-container .hero-text p {
    /* font-size: clamp(0.875rem, 2vw, 1.125rem) !important;
    line-height: 1.5 !important;
    max-width: 100% !important; */
  }
}

/* Fix for 1375px screen width (120% zoom) */
@media screen and (min-width: 1200px) and (max-width: 1375px) {
  /* Adjust hero text for medium-large screens */
  /*
  header .hero .hero-text-container {
    width: 50% !important;
    max-width: 500px !important;
    padding: 2rem !important;
  }
  */

  header .hero .hero-text-container .hero-text h1 {
    font-size: 2.5rem !important;
    line-height: 1.1 !important;
  }

  header .hero .hero-text-container .hero-text p {
    max-width: 100% !important;
    font-size: 1rem !important;
  }

  .cards-container .portfolio-card .card-footer {
    font-size: 0.75rem !important;
    line-height: 1.25rem !important;
  }
}

/* Fix for 110% zoom (around 1500px+ screen width) */
@media screen and (min-width: 1500px) and (max-width: 1700px) {
  .cards-container .portfolio-card .card-footer {
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
  }
}

/* Fix for default zoom (around 1376px-1499px screen width) */
@media screen and (min-width: 1376px) and (max-width: 1499px) {
  .cards-container .portfolio-card .card-footer {
    font-size: 0.75rem !important;
    line-height: 1.25rem !important;
  }
}

/* Fix for zoom levels 150%+ */
@media screen and (max-width: 1200px) {

  /* Force single column layout for cards at high zoom */
  .cards-container {
    gap: 1.5rem !important;
    padding: 0 1rem !important;
  }

  /* Improve card responsiveness */
  .cards-container .portfolio-card {
    min-height: auto !important;
    height: auto !important;
  }

  .cards-container .portfolio-card .card-content {
    padding: 1rem !important;
  }

  .cards-container .portfolio-card .card-header__description {
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* Fix footer layout in cards */
  .cards-container .portfolio-card .card-footer {
    gap: 0.7rem !important;
    align-items: flex-start !important;
  }

  .cards-container .portfolio-card .card-footer {
    font-size: 0.75rem !important;
    line-height: 1.25rem !important;
  }
}

/* Fix for very high zoom levels (175%+) */
@media screen and (max-width: 900px) {

  /* Ensure all text is readable */
  body {
    font-size: 18px !important;
  }

  /* Stack all sections vertically */
  .about .about-container {
    flex-direction: column !important;
    gap: 2rem !important;
  }


  .about .about-container .about-text-container {
    flex: 1 1 100% !important;
    width: 100% !important;
  }

  .about .about-container .about-image-container {
    margin: auto !important;
  }

  /* Improve button responsiveness */
  .about .about-container .about-text-container .about-btns-container {
    flex-direction: column !important;
    gap: 1rem !important;
  }

  .about .about-container .about-text-container .about-btns-container .biography-btn,
  .linkedIn-btn {
    width: 100% !important;
    justify-content: center !important;
    padding: 1rem !important;
    font-size: 1rem !important;
  }
}

/* Fix for extreme zoom levels (200%+) */
@media screen and (max-width: 600px) {

  /* Ensure everything fits on screen */
  .section {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  /* Make text larger for readability */
  h1,
  h2,
  h3 {
    font-size: clamp(1.25rem, 5vw, 2rem) !important;
    line-height: 1.3 !important;
  }

  p {
    font-size: 1rem !important;
    line-height: 1.6 !important;
  }

  /* Fix navigation */
  header .navbar nav {
    padding: 0.5rem !important;
  }

  header .navbar h1 {
    font-size: 1.25rem !important;
  }

  /* Fix media features */
  .media-feature {
    flex-direction: column !important;
    min-height: auto !important;
    margin-bottom: 10px !important;
  }

  .media-logo {
    width: 100% !important;
    height: auto !important;
  }

  .media-content {
    padding: 1rem !important;
  }

  .media-content h3 {
    font-size: 1.25rem !important;
    line-height: 1.4 !important;
  }

  .media-content p {
    font-size: 1rem !important;
    line-height: 1.6 !important;
  }
}

/* ========================================
   SPECIFIC CARD RESPONSIVE FIXES
   ======================================== */

/* Portfolio cards responsive improvements */
@media (max-width: 1400px) {
  .cards-container .portfolio-card .card-content .card-header__title {
    font-size: 1.125rem !important;
    line-height: 1.4 !important;
  }

  .cards-container .portfolio-card .card-content .card-header__description {
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
  }
}

@media (max-width: 1200px) {
  .cards-container .portfolio-card .card-content .card-header__title {
    font-size: 1rem !important;
  }

  .cards-container .portfolio-card .card-content .card-header__description {
    font-size: 0.875rem !important;
    -webkit-line-clamp: 6 !important;
    line-clamp: 6 !important;
  }
}

/* Press slider responsive fixes */
@media (max-width: 1400px) {
  .press-slider {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .media-feature {
    /* min-height: 350px !important; */
  }

  .media-content h3 {
    font-size: 1.125rem !important;
    line-height: 1.4 !important;
  }

  .media-content p {
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
  }
}

@media (max-width: 1200px) {
  .media-feature {
    /* min-height: 300px !important; */
  }

  .media-content {
    padding: 1rem !important;
  }

  .media-content h3 {
    font-size: 1rem !important;
    line-height: 1.3 !important;
  }

  .media-content p {
    font-size: 0.875rem !important;
    line-height: 1.4 !important;
  }
}

/* News section responsive fixes */
@media (max-width: 1400px) {
  .news-section .news-card {
    /* min-height: 250px !important; */
    padding: 1rem !important;
  }

  .news-section .news-card p {
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
  }

  .news-section .news-card span {
    font-size: 0.75rem !important;
  }

  .news-section .news-card button {
    font-size: 0.75rem !important;
  }
}

/* ========================================
   TIMELINE RESPONSIVE FIXES
   ======================================== */

@media (max-width: 1400px) {
  .timeline-card h3 {
    font-size: 1.125rem !important;
    line-height: 1.3 !important;
  }

  .timeline-card h4 {
    font-size: 1rem !important;
    line-height: 1.3 !important;
  }

  .timeline-card p {
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
  }
}

@media (max-width: 1200px) {
  .timeline-card {
    padding: 1rem !important;
  }

  .timeline-card h3 {
    font-size: 1rem !important;
  }

  .timeline-card h4 {
    font-size: 0.875rem !important;
  }

  .timeline-card p {
    font-size: 0.875rem !important;
  }
}

/* ========================================
   FOOTER RESPONSIVE FIXES
   ======================================== */

@media (max-width: 1400px) {
  .footer .footer-container {
    gap: 2rem !important;
  }

  .footer .footer-container .footer-section-title {
    font-size: 1.125rem !important;
    line-height: 1.4 !important;
  }

  .footer .footer-container .footer-section-description,
  .footer .footer-container .footer-section-links {
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
  }
}

@media (max-width: 2600px) {
  .footer .footer-container {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1.5rem !important;
  }
}

@media (max-width: 1200px) {
  .footer .footer-container {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem !important;
  }
}

@media (max-width: 900px) {
  .footer .footer-container {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem !important;
  }

  .footer .footer-bottom {
    flex-direction: column !important;
    gap: 1rem !important;
    text-align: center !important;
  }

  .footer .footer-bottom .footer-bottom-links {
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 1rem !important;
  }
}

@media (max-width: 480px) {
  .footer .footer-container {
    grid-template-columns: repeat(1, 1fr) !important;
    gap: 1.5rem !important;
  }
}

/* ========================================
   NAVIGATION RESPONSIVE FIXES
   ======================================== */

@media (max-width: 1400px) {
  header .navbar nav {
    padding: 0.75rem 1rem !important;
  }

  header .navbar h1 {
    font-size: 1.25rem !important;
  }

  header .navbar .menu li a {
    font-size: 0.875rem !important;
  }
}

@media (max-width: 1200px) {
  header .navbar .menu {
    gap: 1rem !important;
  }

  header .navbar .menu li a {
    font-size: 0.875rem !important;
  }
}

/* ========================================
   UTILITY CLASSES FOR RESPONSIVE DESIGN
   ======================================== */

/* Prevent text overflow */
.text-overflow-fix {
  overflow-wrap: break-word !important;
  word-wrap: break-word !important;
  word-break: break-word !important;
  hyphens: auto !important;
}

/* Ensure images scale properly */
.img-responsive {
  max-width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
}

/* Flexible containers */
.container-responsive {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

/* Flexible text sizing */
.text-responsive {
  font-size: clamp(0.875rem, 2vw, 1.125rem) !important;
  line-height: 1.5 !important;
}

/* Flexible heading sizing */
.heading-responsive {
  font-size: clamp(1.25rem, 3vw, 2rem) !important;
  line-height: 1.3 !important;
}

/* ========================================
   ZOOM-SPECIFIC OVERRIDES
   ======================================== */

/* Force responsive behavior at high zoom levels */
@media (min-resolution: 1.5dppx) {

  /* Override any fixed widths */
  * {
    /* max-width: 100% !important; */
  }

  /* Ensure all containers are flexible */
  /* .container,
  .section,
  .portfolio-container,
  .press-container,
  .news-container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  } */

  /* Make all text readable */
  body,
  p,
  span,
  div {
    font-size: min(1rem, 4vw) !important;
    line-height: 1.6 !important;
  }

  /* Ensure buttons are clickable */
  /* button,
  a,
  .card-btn {
    min-height: 44px !important;
    min-width: 44px !important;
  } */
}

/* ========================================
   ACCESSIBILITY IMPROVEMENTS
   ======================================== */

/* Improve focus indicators */
button:focus,
a:focus,
.card-btn:focus {
  outline: 2px solid #0056b3 !important;
  outline-offset: 2px !important;
}

/* Ensure sufficient color contrast */
@media (prefers-contrast: high) {
  .card-btn {
    background-color: #000000 !important;
    color: #ffffff !important;
  }

  .linkedIn-btn {
    background-color: #ffffff !important;
    color: #000000 !important;
    border-color: #000000 !important;
  }
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ========================================
   WORD SPACING AND TEXT RENDERING FIXES
   ======================================== */

/* Fix word spacing issues caused by text-align: justify */

.hero-text p,
.portfolio-text p,
.timeline-text p,
.press-text p,
.news-card p,
.social-media-text p,
.media-content p,
.timeline-card p,
.card-content p,
.portfolio-card p {
  word-spacing: normal !important;
  text-align: left !important;
  /* text-rendering: optimizeLegibility !important;
  font-feature-settings: "kern" 1, "liga" 1 !important; */
  letter-spacing: normal !important;
  white-space: normal !important;
  font-family: "Roboto-Regular" !important;
}

/* Specific fix for the problematic paragraph mentioned */
/* p[style*="text-align: justify"] {
  text-align: left !important;
  word-spacing: normal !important;
  text-justify: auto !important;
  hyphens: auto !important;
  overflow-wrap: normal !important;
} */

/* Override any inline styles that might cause justify */
/* p[style*="justify"] {
  text-align: left !important;
  word-spacing: normal !important;
  hyphens: auto !important;
  overflow-wrap: normal !important;
} */

/* Improve font rendering for better word spacing */
/* body,
p,
.hero-text p,
.about-description p,
.portfolio-text p,
.timeline-text p,
.press-text p,
.news-card p,
.social-media-text p,
.media-content p,
.timeline-card p,
.card-content p,
.portfolio-card p {
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  font-smooth: always !important;
} */

/* Fix for Roboto font rendering */
p[style*="Roboto-Regular"],
.hero-text p,
.about-description p {
  font-family: 'Roboto', sans-serif !important;
  font-weight: 400 !important;
  font-display: swap !important;
}

/* Ensure consistent spacing in all text containers */
.text-container,
.content-container,
.card-content,
.hero-text-container,
.about-text-container,
.portfolio-text-container,
.timeline-text-container,
.press-text-container,
.news-text-container,
.social-media-text-container,
.media-content-container {
  word-spacing: normal !important;
  text-align: left !important;
}

/* Fix for any inherited justify styles */
* {
  text-align: inherit;
}

/* Override any global justify styles */
html,
body {
  text-align: left !important;
  word-spacing: normal !important;
}

/* Specific fix for the about description paragraph */
.about-description p {
  word-spacing: normal !important;
  /* text-align: left !important; */
  line-height: 29.25px !important;
  font-size: 18px !important;
  color: #374151 !important;
  font-family: 'Roboto-regular' !important;
  font-weight: 400 !important;


}

@media (max-width: 1280px) {
  .about-description p {
    font-size: 16px !important;
    line-height: 24px !important;
  }
}


/* Remove any extra spaces that might be causing issues */
p::before,
p::after {
  content: none !important;
}

/* Ensure proper text wrapping */
p {
  overflow-wrap: normal !important;
  word-wrap: normal !important;
  hyphens: none !important;
}

/* ========================================
   SOCIAL MEDIA TEXT CENTERING FIXES
   ======================================== */

/* Center the social media heading */
.social-media .social-media-container .social-media-text h2 {
  display: block !important;
  /* Ensure it's block-level */
  text-align: center !important;
  /* Center the text */
  width: 100% !important;
  /* Ensure it takes the full width */
  margin-bottom: 10px !important;
  /* Add spacing below the heading */
}

/* Center the social media paragraph */
.social-media .social-media-container .social-media-text p {
  text-align: center !important;
  /* Center the text */
  margin-top: 0 !important;
  /* Remove any margin on top */
  word-spacing: normal !important;
  /* Keep normal word spacing */
  text-justify: auto !important;
  /* Keep auto text justify */
}

/* Additional check for the parent container */
.social-media .social-media-container .social-media-text {
  display: block !important;
  /* Ensure the parent doesn't override styles */
  text-align: center !important;
  /* Center content within the parent */
}

/* Fix card header description text wrapping and alignment */
.card-header__description {
  white-space: normal !important;
  /* Allows the text to wrap naturally */
  word-wrap: break-word !important;
  /* Ensures long words break properly */
  word-break: break-word !important;
  /* Makes sure long words break correctly */
  overflow-wrap: break-word !important;
  /* Ensures overflow wraps without breaking words */
  max-width: 100% !important;
  /* Makes sure the container adjusts to fit the content */
  min-width: 0 !important;
  /* Allows container to shrink if needed */
  line-height: 1.5 !important;
  /* Adds space between lines for readability */
  text-align: left !important;
  /* Ensures the text aligns left */
  hyphens: none !important;
  /* Disables automatic hyphenation */
}

/* Special rule for screens between 1257px and 1300px */
@media (min-width: 1257px) and (max-width: 1300px) {
  header .hero .hero-text-container {
    width: 60%;
  }
}




header .hero .hero-text-container {
  max-width: 100% !important;
  width: 68ch !important;
}

.hero-overlay {
  background-color: #C7C8BDA6;
  opacity: 0.65;
}

/* 2K / Large desktops */
@media (max-width: 1536px) {

  header .hero .hero-text-container {
    max-width: 100% !important;
    width: 70ch !important;
  }
}

@media (min-width: 1537px) {

  header .hero .hero-text-container {
    max-width: 100% !important;
    width: 70ch !important;
  }
}

/* Extra large devices (desktops) */
@media (max-width: 1280px) {
  header .hero .hero-text-container {
    max-width: 100% !important;
    width: 58ch !important;
    /* padding-inline-start: 0 !important; */
  }
}

/* Large devices (tablets, landscape / small laptops) */
@media (max-width: 1024px) {
  header .hero .hero-text-container {
    max-width: 100% !important;
    width: 58ch !important;
    /* padding-inline-start: 0 !important; */
  }
}

/* Medium devices (tablets, portrait) */
/* @media (max-width: 768px) {
  header .hero .hero-text-container {
    max-width: 100% !important;
    width: 38ch !important;
    padding-inline-start: 0 !important;
    padding-top: 8rem;
  }
} */

/* Small devices (phones, landscape) */
@media (max-width: 768px) {
  header .hero .hero-text-container {
    max-width: 100% !important;
    width: 100% !important;
    /* width: 38ch !important; */
    /* padding-inline-start: 0 !important; */
    padding-top: 13rem;
  }

  header .hero .hero-text-container .hero-text {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  header .hero .hero-text-container .hero-text h1 {
    font-size: 28px;
    font-family: "Montserrat-ExtraBold";
    line-height: 47px;
    /* 167.857% */
  }

  header .hero .hero-text-container .hero-text p {
    text-align: center !important;

  }

  [dir="rtl"] header .hero .hero-text-container .hero-text p {
    text-align: center !important;
  }
}

/* Extra small devices (phones, portrait) */
@media (max-width: 480px) {
  header .hero .hero-text-container {
    max-width: 100% !important;
    /* width: 38ch !important; */
    /* padding-inline-start: 0 !important; */
  }
}

[dir="rtl"] .my-icon {
  transform: rotate(180deg);
}

.news-modal-btn span {
  color: #0056b3 !important;
  font-family: "Roboto-Medium" !important;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
}

.relative.group.rounded-xl.overflow-hidden.shadow-sm.bg-white.flex.flex-col {
  border-radius: 16px;
  background: #FFF;
  box-shadow: 0 2px 4px -2px rgba(0, 0, 0, 0.10), 0 4px 6px -1px rgba(0, 0, 0, 0.10);
}

.relative.group.rounded-xl.overflow-hidden.shadow-sm.bg-white.flex.flex-col h3 {
  /* overflow: hidden; */
  color: #4B5563;
  /* text-overflow: ellipsis; */
  /* white-space: nowrap; */
  font-family: 'Roboto-Regular';
  font-size: 16px !important;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}

[dir="rtl"] .biography-btn {
  direction: rtl !important;
  gap: 6px;
  align-items: center;
}

[dir="rtl"] .hero-header {
  --bg-image: url("assets/images/hero.png");
  position: relative;
  overflow: hidden;
  /* make sure pseudo-element stays inside */
}

.hero-header::before {
  content: "";
  position: absolute;
  inset: 0;
  /* fill the parent */
  background: var(--bg-image) no-repeat center/cover;


  z-index: -1;
  /* keep it behind content */
}

[dir="rtl"] .hero-header::before {
  /* transform: scaleX(-1); */
  /* flip vertically */
}

.portfolio-card .card-media {
  border-bottom-left-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
  aspect-ratio: 2.03/1;
}

.responsive-img {
  aspect-ratio: 16 / 10;
  /* lock ratio */
  object-fit: cover;
  /* max-height: 386.5px; */

  /* width: calc(100% - (50% * ((100vw - 375px) / (1440 - 375)))); */
  width: calc(100% - (50% * ((100vw - 375px) / 1065)));
}

.content-max-width {
  max-width: 1536px;
  margin-left: auto;
  margin-right: auto;
}