/*
responsevity: THE SITE IS WORKING ON SCREEN WIDTH 250PX AND MORE
support_lang : rtl - ltr
browser-support : =============
*/
/* Site Setup */
:root{
    --cl-netrual-100:#FFFFFF;
    --cl-netrual-500:rgb(128,128,128);
    --cl-natrual-900:#000000;

    --cl-primary-100:#07194B; /* Blue */
    --cl-primary-200:#27EABB; /* Turquoise */
    --cl-primary-300:#07194B; /* Downriver */

    --cl-secondary-100:#FE8A46; /* Coral */
    --cl-secondary-200:#FF4949; /* SunsetOrange */
    --cl-secondary-300:#4E4BFF; /* Blue */

    --fs-button:1.3rem;
    --fs-header:clamp(1rem, 7vw ,2.7rem);
    --fs-footer:1rem;

    --ff-main: "IBM Plex Sans Arabic", sans-serif;

    --fw-normal:300;
    --fw-bold:400;
    --fw-bolder:600;
}

@media  (30rem <= width <=50em) {
    :root{
        --fs-button:1.4rem;
    }}
@media  (width<=29rem) {
    :root{
        --fs-footer:3vw;
        --fs-button:4vw;
        --fs-header:7vw;
    }}

*,::after,::before{
    box-sizing: border-box;
}

body{
    height: 100%;
    font-family: var(--ff-main), sans-serif;
}
html:focus-within{
    scroll-behavior: smooth;
}
*{
    padding: 0;
    margin: 0;
    font: inherit;
}

img,svg,video,image{
    max-width: 100%;
    display: block;
}

/* utility classes */

.bg-pr-100{
    background-color: var(--cl-primary-100);
}
.bg-pr-200{
    background-color: var(--cl-primary-200);
}
.bg-pr-300{
    background-color: var(--cl-primary-300);
}
.bg-se-100{
    background-color: var(--cl-secondary-100);
}.bg-se-200{
     background-color: var(--cl-secondary-200);
 }

.text-white{
    color:white;
}
.text-black{
    color:black;
}
.text-pr-300{
    color: var(--cl-primary-300);
}

.round-border{
    border-radius: 1vmax;
}

.border-pr-100{
    border: 2px solid var(--cl-primary-100);
}
.border-pr-200{
    border: 2px solid var(--cl-primary-200);
}
.border-pr-300{
    border: 2px solid var(--cl-primary-300);
}

.fw-normal{
    font-weight: var(--fw-normal);
}
.fw-bold{
    font-weight: var(--fw-bold);
}
.fw-bloder{
    font-weight: var(--fw-bolder);
}

.text-center{
    text-align: center;
}


.grid-center{
    line-height: 1.6;
    margin: auto;
    padding: 20px;
}

h1, h2 {
    color: #2c3e50;
    font-weight: 1000;
}
h2 {
    margin-top: 30px;
}
ul {
    margin-top: 0;
}
/* speseifc classes */

header{
    height: 80px;
}

.main{
    background:linear-gradient(var(--cl-netrual-100) 50%, var(--cl-primary-300) 50%);
    min-height: 90dvh;
    transition: all 0.5s ease-in-out;
}

.main > div{
    --width:100%;
    --hr-padding: 4rem;
    --ver-padding:calc(4 * var(--hr-padding));

    width:min( 100% -  var(--hr-padding),var(--width));
    margin-inline:auto;
    height: min(900px , 100% - 10rem);
    margin-block: calc(var(--hr-padding) / 2);
    background-color: rgba(255, 255, 255, 0.548);
    backdrop-filter: blur(50px);
    -webkit-backdrop-filter:blur(50px);
    padding: 3rem;
}

.btn-group{
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(2,50%);
    gap:1.6rem;
    width: min(600px , 100%);
}

@media (width<=40rem){
    .btn-group{
        grid-template-columns: calc(100% - 2rem);
        /*grid-template-rows: repeat(4,70px);*/
        grid-auto-rows: 70px;
    }
    .main>div{
        padding:1.5rem;
    }
}

.shrink{
    grid-column: 1/-1;
}

/* animation */
@keyframes shake {
    0%  {transform: translate(5px,0)}
    30% {transform:translate(0px,0);}
    60% {transform:translate(-5px,0);}
    100%{transform:translate(0px,0);}
}

.logo:hover{
    transform: scale(1.05);
    transition: transform .5s;
}

.logo{
    transition: transform .5s;
}

.logo-z{
    height: 100%;
    padding: .5rem 1rem;
}

.logo-z:hover{
    animation: shake linear .6s;
}

.main h1{
    text-wrap:wrap;
}

footer{
    height: 80px;
    text-wrap:balance;
    text-align: center;
    padding: 2rem;
}
a[data-type="button"]:hover{
    background-color: var(--cl-primary-200);
    transition: background-color 0.5s;
}

footer{
    font-size: var(--fs-footer);
}
footer a{
    text-decoration: none;
    color: var(--cl-primary-200);
    font-size: calc(var(--fs-footer) + 0.2rem);
}