@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@700&display=swap');

:root {

    --step--2: clamp(0.78rem, calc(0.71rem + 0.38vw), 1.00rem);
    --step--1: clamp(0.94rem, calc(0.83rem + 0.54vw), 1.25rem);
    --step-0: clamp(1.13rem, calc(0.97rem + 0.76vw), 1.56rem);
    --step-1: clamp(1.35rem, calc(1.14rem + 1.05vw), 1.95rem);
    --step-2: clamp(1.62rem, calc(1.33rem + 1.43vw), 2.44rem);
    --step-3: clamp(1.94rem, calc(1.56rem + 1.93vw), 3.05rem);
    --step-4: clamp(2.33rem, calc(1.82rem + 2.58vw), 3.82rem);
    --step-5: clamp(2.80rem, calc(2.11rem + 3.42vw), 4.77rem);
    /* The Transition  */
    --main-transition: .3s;
    /* The Shadow  */
    --shadow_1: 0px 5px 11px 3px #0000001c;
    --shadow_2: 0 -3px 3px 3px #0000003b;
    --shadow_3: 0 0 4px 4px #00000012;
    --shadow_4: 0 0 4px 4px #0000002e;
    --shadow_5: 0 4px 12px 3px #0000001c;
    --shadow_6: 0px 2px 3px 0 #00000017;
    --Color-Gradient: linear-gradient(to right, #009688 , #52df58);
    --main-color: hsl(229, 57%, 11%);
}

* {

    padding: 0;
    margin: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
    /* outline: 1px solid greenyellow; */
}

/** Framework */

.container {

    margin: 0 auto;
    padding: 0 15px;
}

/* Small */

@media (min-width: 768px) {

    .container {
        width: 750px;
  }
}

/* Medium */

@media (min-width: 992px) {

    .container {
        width: 970px;
  }
}

/* Large */

@media (min-width: 1200px) {

    .container {
        width: 1170px;
  }
}

a {

    text-decoration: none;
}

.flex {

    display: flex;
    justify-content: center;
    align-items: center;
}

ul {

    list-style: none;
}

.flex {

    display: flex !important;
    justify-content: center;
    align-items: center;
}

.image img {
    
    width: 100%;
}

.info {
   
    line-height: 1.5;
    opacity: .5;
    font-size: .8em;
}

.padding {

    padding: 3em 0;
}

.grid {

    display: grid;                                                 
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); 
    gap: 30px; 
}

.y-gap {

    gap: 2em;
    display: flex;
    flex-direction: column;
}

/** The Styling  */

body , html {

    overflow-x: hidden;
}

body {

    min-height: 100vh;
    font-size: var(--step-0);
    font-family: 'Cairo', sans-serif;
    background-color: var(--main-color);
    color: #fff;
}

@media (max-width: 380px) {

    body {
        font-size: var(--step--1);
    }
}

@media (max-width: 313px) {

    body {
        font-size: var(--step--2);
    }
}

body .container {

    min-height: inherit;
}

body .container .text {

    display: flex;
    flex-direction: column;
}

body .container p.arabic {
    
    direction: rtl;
    border-bottom: 2px #ffffff5c solid;
    padding-bottom: 1em;
}

body .container a {

    color: green;
}