@font-face {
    font-family: 'AbsaraSansPro';
    src: url('AbsaraSansPro.otf');
}

@font-face {
    font-family: 'DiodrumArabic';
    src: url('DiodrumArabic.ttf');
}

:root {
    --main-color: #fff;
}

body {
    margin: 0;
    color: #000;
    font-family: 'AbsaraSansPro';
    /* font-family: 'gilmerLight';
    font-weight: 700; */
}

.main-content {
    /* background: var(--main-color) url('../images/background.png') no-repeat center 75%; */
    height: 100vh;
    position: relative;
}

.groupContent {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: center;
}

/* .logo {
    margin: 100px 0;
} */

p {
    margin-top: 0;
    margin: 0;
}

form {
    display: flex;
}

form input {
    border-radius: 8.775px 0 0 8.775px;
    border: 0.731px solid var(--Gray-5, #E0E0E0);
    background: var(--White, #FFF);
    padding: 8px;
}

form input.action {
    border-radius: 0 8.775px 8.775px 0;
    border: 0.731px solid transparent;
    background: #000;
    color: #FFF;
}

/* footer {
    position: absolute;
    bottom: 2%;
    padding: 1%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 98%;
} */

.copyRight {
    text-align: center;
    font-size: 28px;
    font-weight: bold;
}

.topContent {
    font-size: 28px;
    font-weight: bold;
    display: flex;
    justify-content: space-evenly;
}

.topContent p {
    width: 35%;
    line-height: 1.5;
}

.topContent p.ar {
    font-size: 26px;
}

.socialMedia {
    margin: 15px;
}

.socialMedia ul {
    display: flex;
    gap: 10px;
    padding: 0;
}

.socialMedia ul li {
    list-style: unset;
    display: inline-block;
}

.socialMedia ul li img {
    height: 75px;
    width: auto;
}

/* ============= responsive ============= */

@media (max-width: 1024px) {}

@media (max-width: 820px) {
    .topContent {
        flex-direction: column;
        gap: 25px;
        width: 85%;
        text-align: center;
    }

    .topContent p {
        width: 100%;
    }



}

@media (max-width: 500px) {

    .logo img {
        width: auto;
        height: 175px;
    }

    .copyRight,
    .topContent {
        font-size: 22px;
    }

    .socialMedia ul {
        display: flex;
        gap: 18px;
        padding: 0;
        flex-wrap: wrap;
        justify-content: center;
    }



}