/* global */
@font-face {
    font-family: 'ArbFONTS Bold';
    src: url("../fonts/ArbFONTS-Greta-Arabic-AR-LT-Bold.ttf");
}

@font-face {
    font-family: 'ArbFONTS Medium';
    src: url("../fonts/ArbFONTS-Greta-Arabic-AR-LT-Medium.ttf");
}

@font-face {
    font-family: 'Bahij';
    src: url("../fonts/Bahij_TheSansArabic-Plain.ttf");
}

@font-face {
    font-family: 'Loew Next Arabic Medium';
    src: url("../fonts/Loew-Next-Arabic-Medium.otf") format("opentype");
}

body {
    margin: 0px;
    font-family: 'ArbFONTS Bold';
    color: white !important;
}

button {
    font-family: 'ArbFONTS Medium', sans-serif !important;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: 1.5 !important;
}

h1 {
    font-size: 4rem !important;
}

h2 {
    font-size: 2.3rem !important;
}

section {
    margin: -2px 0px;
}

.card {
    background-color: transparent !important;
    border: none !important;
}

.form-control {
    border: none !important;
    border-bottom: 1px solid #FFF !important;
    border-radius: 0.3rem !important;
    background-color: transparent !important;
    color: white !important;
    border-radius: 0px !important;
}

.form-control::placeholder {
    color: white !important;
}

.form-control:focus {
    box-shadow: none !important;
}

.ltr-input {
    direction: ltr !important;
    text-align: left !important;
}

.rtl-input {
    direction: rtl !important;
    text-align: right !important;
}

.background-primary {
    color: #FFF !important;
    background-color: rgba(0, 76, 95, 1) !important;
}

@media (max-width: 769px) {

    .container {
        padding: 0px 23px !important;
    }
}

/* hero section */
.hero {
    position: relative;
    padding: 100px 0px;
    background: rgb(0, 76, 95);
    background: radial-gradient(circle, rgba(0, 76, 95, 1) 50%, #000B15 100%);
}

.hero-logo {
    width: 600px;
}

.hero-title {
    font-family: 'ArbFONTS Bold';
    font-weight: 700;
}

.hero-subtitle {
    font-family: 'Bahij', sans-serif !important;
}

.hero-arrow-blue-right {
    position: absolute;
    left: 0;
    top: 33%;
    width: 28%;
    animation: floatAnimation 3s ease-in-out infinite;
}

@media (max-width: 769px) {
    .hero-logo {
        width: 350px;
    }

    .hero-title {
        text-align: center;
        font-size: 2rem !important;
    }

    .hero-subtitle {
        text-align: center;
        font-size: 1.5rem !important;
    }

    .hero-arrow-blue-right {
        display: none;
    }
}

@media (max-width: 576px) {
    .hero-logo {
        width: 230px;
    }
}

/* hero section */
.about {
    padding: 100px 0px;
    background: #000B15;
}

.about-title {
    font-weight: 700;
    font-size: 4rem !important;
}

.about-par {
    font-family: 'ArbFONTS Medium';
    width: 50%;
    text-align: justify;
    font-size: 1.7rem;
}

.about-info {
    margin-top: 70px !important;
}

.about-info a {
    text-decoration: none;
}

.about-info h4 {
    font-size: 40px;
    color: #d0b14f;
    font-family: 'ArbFONTS Bold';
    font-weight: 700;
}

.about-info span {
    color: white;
    font-size: 32px;
    font-family: 'ArbFONTS Bold';
    font-weight: 700;
}

@media (max-width: 768px) {
    .about {
        padding: 30px 0px;
    }

    .about-title {
        font-size: 2rem !important;
        text-align: center;
    }

    .about-par {
        width: 100%;
        font-size: 1rem !important;
    }

    .about-info-item {
        margin-bottom: 16px !important;
    }

    .about-info h4 {
        font-size: 1.5rem;
    }
    
    .about-info span {
        font-size: 1rem;
    }
}

/* topics section */
.topics {
    padding: 100px 0px 0px;
    background: #000B15;
}

.topics .container {
    padding-bottom: 100px !important;
    border-bottom: 3px solid rgba(0, 76, 95, 1);
}

.topics p {
    font-size: 18px;
}

@media (max-width: 768px) {
    .topics img {
        width: 70px;
    }
}

/* participate */
.participate {
    position: relative;
    padding: 100px 0px 0;
    background: #000B15;
    background: radial-gradient(circle, rgba(0, 76, 95, 1) 35%, #000B15 90%);
    background-position-x: -63vw;
    background-repeat: no-repeat;
    background-color: #000B15;
}

.participate .container {
    padding-bottom: 100px !important;
}

.participate .hero-arrow-blue-right {
    top: 50%;
    width: 10%;
    transform: translate(0, -50%);
    animation: centerdFloatAnimation 3s ease-in-out infinite;
}

@media (max-width: 768px) {
    .participate {
        background-position-x: 0vw;
    }

    .participate .hero-arrow-blue-right {
        display: none;
    }
}

.participate-points {
    margin-top: 40px;
}

.participate-point {
    column-gap: 16px;
}

.participate-point p {
    font-size: 24px;
}

/* organization */
.organization {
    position: relative;
    padding: 100px 0px 0;
    background: #000B15;
    background-image: url("../images/organization-bg.jpg");
    background-position: center;
    background-size: 100%;
}

.organization .container {
    padding-bottom: 100px !important;
    border-bottom: 3px solid rgba(0, 76, 95, 1);
}

.organization .hero-arrow-blue-right {
    top: 50%;
    width: 14%;
    transform: translate(0, -50%);
    animation: centerdFloatAnimation 3s ease-in-out infinite;
}

@media (max-width: 768px) {
    .organization {
        background-position-x: 0vw;
    }

    .organization .hero-arrow-blue-right {
        display: none;
    }
}

.organization-points {
    margin-top: 40px;
}

.organization-point {
    column-gap: 16px;
}

.organization-point p {
    font-size: 24px;
}

/* countries */
.countries {
    background-color: rgba(0, 0, 0, .4);
    padding: 16px 23px;
    border-radius: 24px;
}

.countries .flag {
    overflow: hidden;
    max-width: 180px;
}

.countries img {
    width: 100%;
    /* height: auto; */
}

/* speakers */
.speakers {
    position: relative;
    padding: 100px 0px 0;
    background: #000B15;
}

.speakers .container {
    padding-bottom: 100px !important;
    border-bottom: 3px solid rgba(0, 76, 95, 1);
}

@media (max-width: 768px) {
    .speakers {
        background-position-x: 0vw;
    }
}

.speakers-points {
    margin-top: 40px !important;
}

.speakers-point h4 {
    color: #0c9cae;
    font-family: "ArbFONTS Bold";
    font-weight: 700;
    margin: 0;
    margin-right: 8px;
}

.speakers-point p {
    padding-right: 22px;
}

.speakers-point span {
    padding-right: 22px;
    color: #d0b14f;
}

.speakers-point span p {
    margin: 0px !important;
    margin-top: -24px !important;
}

/* return */
.return {
    position: relative;
    padding: 100px 0px 0;
    background: #000B15;
    background: radial-gradient(circle, rgba(0, 76, 95, 1) 35%, #000B15 90%);
    background-position-x: -63vw;
    background-repeat: no-repeat;
    background-color: #000B15;
}

.return .container {
    padding-bottom: 100px !important;
}

@media (max-width: 768px) {
    .return {
        background-position-x: 0vw;
    }

    .return .hero-arrow-blue-right {
        display: none;
    }
}

.return-points {
    margin-top: 40px;
}

.return-point {
    column-gap: 16px;
}

.return-point p {
    font-size: 24px;
}

/* sessions section */
.sessions {
    padding: 100px 0px 0px;
    background: #000B15;
}

.sessions .container {
    padding-bottom: 100px !important;
    border-bottom: 3px solid rgba(0, 76, 95, 1);
}

.sessions h4 span {
    color: #d0b14f;
}

.sessions p {
    font-size: 18px;
}

@media (max-width: 768px) {
    .sessions img {
        width: 70px;
    }
}

/* register section */
.register-session {
    background-color: #000B15;
    background-image: url("../images/form-bg.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.register {
    padding: 100px 0px 0px;
    background-image: linear-gradient(180deg, rgba(255,255,255,0) 90%, rgba(208,177,79,1) 120%);
}

@media (max-width: 768px) {
    .register-title {
        text-align: center;
    }
}

/* footer */
.footer {
    padding-bottom: 60px;
}

.footer a {
    background-color: #0c9cae;
    padding: 6px;
    border-radius: 50%;
    margin-right: 12px;
    margin-bottom: 12px;
}

.footer a img {
    width: 24px;
    height: 24px;
}

/* animation */
@keyframes floatAnimation {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes centerdFloatAnimation {
    0% {
        transform: translateY(-50%);
    }

    50% {
        transform: translateY(calc(-50% - 10px));
    }

    100% {
        transform: translateY(-50%);
    }
}

select option {
    color: #000B15;
  }