/*
Theme Name: MedInGulf
Text Domain: medingulf
Description: A custom WordPress theme for MedInGulf
Version: 1.0
*/

@layer base {
  *, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  html {
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    background: var(--color-base-100);
    color: var(--color-base-content);
  }

  html, body {
    overflow-x: hidden;
  }

  button,
  input,
  select,
  textarea {
    font: inherit;
  }
}

.gradient-shadow {
  background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, color-mix(in oklab, var(--color-base-100) 80%, transparent) 100%);
}

.fade-effect {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, var(--color-base-100) 100%);
}

@media (min-width: 768px) {
  .fade-effect {
    background: radial-gradient(50% 100% at 50% 0%, rgba(0, 0, 0, 0) 0%, var(--color-base-100) 100%);
  }
}

.fade-effect-weak {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, color-mix(in oklab, var(--color-base-100) 60%, transparent) 100%);
}

@media (max-width: 768px) {
  .fade-effect::before,
  .fade-effect-weak::before {
    content: '';
    position: absolute;
    inset: 0;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    mask-image: linear-gradient(to bottom, transparent 0%, black 45%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 45%);
  }
}

.fade-effect-card {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, var(--color-base-100) 100%);
}

.fade-effect-weak-desktop {
  background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, color-mix(in oklab, var(--color-base-100) 60%, transparent) 100%);
}

.fade-effect-weak-desktop::before {
  content: '';
  position: absolute;
  inset: 0;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  mask-image: linear-gradient(to left, transparent 0%, black 45%);
  -webkit-mask-image: linear-gradient(to left, transparent 0%, black 45%);
}

svg {
  width: 1.125rem;
  height: 1.125rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

.btn-background,
.btn-dark-background {
  box-shadow:
    0px 2px 16px 0px color-mix(in oklab, var(--color-primary) 10%, transparent),
    0px 1px 24px 0px color-mix(in oklab, var(--color-base-100) 10%, transparent),
    inset 0px 0px 24px 8px color-mix(in oklab, var(--color-primary) 20%, transparent),
    inset 0px -1px 0px 0px color-mix(in oklab, var(--color-base-100) 20%, transparent),
    inset 0px 1px 0px 0px color-mix(in oklab, var(--color-base-content) 10%, transparent);
}

.btn-background {
  background: linear-gradient(180deg, color-mix(in oklab, var(--color-primary) 95%, transparent) 0%, color-mix(in oklab, var(--color-primary) 80%, transparent) 100%);
}

.btn-dark-background {
  background: linear-gradient(180deg, color-mix(in oklab, var(--color-base-content) 20%, transparent) 0%, color-mix(in oklab, var(--color-base-content) 10%, transparent) 100%);
}

.container-shadow {
  box-shadow: 0px 0px 29.7105px 1.23794px rgba(0, 0, 0, 0.08);
}

.glow-radial {
  background: radial-gradient(
    30% 70% at 50.15% 0%,
    color-mix(in oklab, var(--color-primary) 40%, transparent) 0%,
    color-mix(in oklab, var(--color-primary) 40%, transparent) 5%,
    color-mix(in oklab, var(--color-primary) 30%, transparent) 15%,
    color-mix(in oklab, var(--color-primary) 20%, transparent) 35%,
    color-mix(in oklab, var(--color-primary) 10%, transparent) 55%,
    color-mix(in oklab, var(--color-primary) 5%, transparent) 75%,
    rgba(0, 0, 0, 0) 100%
  );
}

.glow-line {
  background: linear-gradient(90deg,rgba(0, 0, 0, 0) 15%, color-mix(in oklab, var(--color-base-content) 50%, transparent) 50%, rgba(0, 0, 0, 0) 85%);
}

.glow-image {
  box-shadow: 
    0px 96px 48px -112px color-mix(in oklab, var(--color-primary) 60%, transparent),
    0px 56px 48px -64px color-mix(in oklab, var(--color-primary) 40%, transparent),
    0px 32px 24px -40px color-mix(in oklab, var(--color-primary) 50%, transparent),
    0px 24px 64px -32px color-mix(in oklab, var(--color-primary) 50%, transparent),
    inset 0px 1px 5px color-mix(in oklab, var(--color-primary) 20%, transparent),
    inset 0px 4px 24px color-mix(in oklab, var(--color-base-100) 10%, transparent);
}

.glow-logo-card {
  box-shadow: 
    0px 96px 48px -112px color-mix(in oklab, var(--color-primary) 60%, transparent),
    0px 56px 48px -64px color-mix(in oklab, var(--color-primary) 40%, transparent),
    0px 32px 24px -40px color-mix(in oklab, var(--color-primary) 50%, transparent),
    0px 24px 64px -32px color-mix(in oklab, var(--color-primary) 50%, transparent),
    inset 0px 1px 2px color-mix(in oklab, var(--color-primary) 30%, transparent),
    inset 0px 4px 24px color-mix(in oklab, var(--color-base-100) 10%, transparent);
}

.glow-features-card {
  box-shadow: 
    0px 96px 48px -112px color-mix(in oklab, var(--color-primary) 60%, transparent),
    0px 56px 48px -64px color-mix(in oklab, var(--color-primary) 40%, transparent),
    0px 32px 24px -40px color-mix(in oklab, var(--color-primary) 50%, transparent),
    0px 24px 64px -32px color-mix(in oklab, var(--color-primary) 50%, transparent),
    inset 0px 1px 2px color-mix(in oklab, var(--color-primary) 40%, transparent),
    inset 0px 4px 24px color-mix(in oklab, var(--color-base-100) 10%, transparent);
}

.scrollbar-hide {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}