:root {
  --dark-blue: oklch(0.3074 0.056 268.97);
  --dark-green: oklch(0.5638 0.0976 130.24);
  --green: oklch(0.6965 0.1107 142.86);
  --light-green: oklch(0.877 0.0519 119.46);

  /* font size 14px-24px */
  --step--2: clamp(0.6076rem, 0.4836rem + 0.5294vw, 0.96rem);
  --step--1: clamp(0.7292rem, 0.5634rem + 0.7074vw, 1.2rem);
  --step-0: clamp(0.875rem, 0.6549rem + 0.939vw, 1.5rem);
  --step-1: clamp(1.05rem, 0.7595rem + 1.2394vw, 1.875rem);
  --step-2: clamp(1.26rem, 0.8784rem + 1.6282vw, 2.3438rem);
  --step-3: clamp(1.512rem, 1.0128rem + 2.1299vw, 2.9297rem);
  --step-4: clamp(1.8144rem, 1.1638rem + 2.7759vw, 3.6621rem);
  --step-5: clamp(2.1773rem, 1.3321rem + 3.6062vw, 4.5776rem);
}

body {
  font-family: "Roboto", sans-serif;
  background-image: url(./image/3161025.webp);
  font-size: var(--step-1);
}

.bg-dark-blue {
  background-color: var(--dark-blue) !important;
}

.dark-green {
  color: var(--dark-green) !important;
}

section .mosque {
  max-inline-size: 100%;
  height: auto;
  max-width: 20%;
}

section .close{
  max-inline-size: 100%;
  height: auto;
  max-width: 10%;
}
section button{
  background-color: var(--green);
  
}

section button:hover{
  background-color: var(--dark-green) ;
}

section button:active{
  background-color: var(--light-green) ;
}

.premium-plan{
  color: var(--green);
}

.section-1 {
  position: relative;
  border-radius: 3px 20px 3px 3px;
}

.close{
  position: absolute;
  top: 10px;
  right:10px;
}

@media screen and (min-width: 550px) {
  .section-1{
    /* width: 60%; */
    max-width: 55%;
    margin: auto;
  }
}

@media screen and (min-width: 1023px) {
  .section-1{
    /* width: 60%; */
    max-width: 52%;
    /* display: none; */
  }
}

@media screen and (min-width: 1441px) {
  .section-1{
    /* width: 60%; */
    max-width: 30%;
  }
}