@font-face {
    font-family: 'GothamRounded-Bold';
    src: url('./fonts/GothamRounded-Bold.eot?#iefix') format('embedded-opentype'), url('./fonts/GothamRounded-Bold.otf') format('opentype'), url('./fonts/GothamRounded-Bold.woff') format('woff'), url('./fonts/GothamRounded-Bold.ttf') format('truetype'), url('./fonts/GothamRounded-Bold.svg#GothamRounded-Bold') format('svg');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'GothamRounded-Book';
    src: url('./fonts/GothamRounded-Book.eot?#iefix') format('embedded-opentype'), url('./fonts/GothamRounded-Book.otf') format('opentype'), url('./fonts/GothamRounded-Book.woff') format('woff'), url('./fonts/GothamRounded-Book.ttf') format('truetype'), url('./fonts/GothamRounded-Book.svg#GothamRounded-Book') format('svg');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'GothamRounded-Light';
    src: url('./fonts/GothamRounded-Light.eot?#iefix') format('embedded-opentype'), url('./fonts/GothamRounded-Light.otf') format('opentype'), url('./fonts/GothamRounded-Light.woff') format('woff'), url('./fonts/GothamRounded-Light.ttf') format('truetype'), url('./fonts/GothamRounded-Light.svg#GothamRounded-Light') format('svg');
    font-weight: normal;
    font-style: normal;
}



@font-face {
    font-family: 'GothamRounded-Medium';
    src: url('./fonts/GothamRounded-Medium.eot?#iefix') format('embedded-opentype'), url('./fonts/GothamRounded-Medium.otf') format('opentype'), url('./fonts/GothamRounded-Medium.woff') format('woff'), url('./fonts/GothamRounded-Medium.ttf') format('truetype'), url('./fonts/GothamRounded-Medium.svg#GothamRounded-Medium') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'flynas-Bold';
    src: url('./fonts/Flynas-Bold.eot');
    src: url('./fonts/Flynas-Bold.eot?#iefix') format('embedded-opentype'), url('./fonts/Flynas-Bold.woff2') format('woff2'), url('./fonts/Flynas-Bold.woff') format('woff'), url('./fonts/Flynas-Bold.ttf') format('truetype'), url('./fonts/Flynas-Bold.svg#Flynas-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'flynas-Thin';
    src: url('./fonts/Flynas-Thin.eot');
    src: url('./fonts/Flynas-Thin.eot?#iefix') format('embedded-opentype'), url('./fonts/Flynas-Thin.woff2') format('woff2'), url('./fonts/Flynas-Thin.woff') format('woff'), url('./fonts/Flynas-Thin.ttf') format('truetype'), url('./fonts/Flynas-Thin.svg#Flynas-Thin') format('svg');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'flynas-Light';
    src: url('./fonts/Flynas-Light.eot');
    src: url('./fonts/Flynas-Light.eot?#iefix') format('embedded-opentype'), url('./fonts/Flynas-Light.woff2') format('woff2'), url('./fonts/Flynas-Light.woff') format('woff'), url('./fonts/Flynas-Light.ttf') format('truetype'), url('./fonts/Flynas-Light.svg#Flynas-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'flynas-Regular';
    src: url('./fonts/Flynas-Regular.eot');
    src: url('./fonts/Flynas-Regular.eot?#iefix') format('embedded-opentype'), url('./fonts/Flynas-Regular.woff2') format('woff2'), url('./fonts/Flynas-Regular.woff') format('woff'), url('./fonts/Flynas-Regular.ttf') format('truetype'), url('./fonts/Flynas-Regular.svg#Flynas-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'flynas-Medium';
    src: url('./fonts/Flynas-Medium.eot');
    src: url('./fonts/Flynas-Medium.eot?#iefix') format('embedded-opentype'), url('./fonts/Flynas-Medium.woff2') format('woff2'), url('./fonts/Flynas-Medium.woff') format('woff'), url('./fonts/Flynas-Medium.ttf') format('truetype'), url('./fonts/Flynas-Medium.svg#Flynas-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'flynas-SemiBold';
    src: url('./fonts/Flynas-SemiBold.eot');
    src: url('./fonts/Flynas-SemiBold.eot?#iefix') format('embedded-opentype'), url('./fonts/Flynas-SemiBold.woff2') format('woff2'), url('./fonts/Flynas-SemiBold.woff') format('woff'), url('./fonts/Flynas-SemiBold.ttf') format('truetype'), url('./fonts/Flynas-SemiBold.svg#Flynas-SemiBold') format('svg');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Flynas-ExtraBold';
    src: url('./fonts/Flynas-ExtraBold.eot');
    src: url('./fonts/Flynas-ExtraBold.eot?#iefix') format('embedded-opentype'), url('./fonts/Flynas-ExtraBold.woff2') format('woff2'), url('./fonts/Flynas-ExtraBold.woff') format('woff'), url('./fonts/Flynas-ExtraBold.ttf') format('truetype'), url('./fonts/Flynas-ExtraBold.svg#Flynas-ExtraBold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}


html, body {
    width: 100%;
    height: 100%;
    color: #333;
    font-size: 14px;
    font-family: 'GothamRounded-Book';
    scroll-behavior: smooth;
    margin: 0px auto;
    text-align:center;
}


.arabic {
    font-size: 15px;
    font-family: 'flynas-Regular';
    letter-spacing: -0.5px;
}

.logo{
    padding:20px 25px;
}


.text-right {
    text-align: right;
    padding: 20px 25px;
}

.welcome {
    padding: 50px 0px;
    color: #00bfb3;
}

.welcome h1 {
    font-size: 44px;
    font-family: GothamRounded-Bold;

}

header{
    text-align:left;
}

.welcome h2 {
    font-size: 24px;
    font-family: GothamRounded-Book;
}

.arabic .welcome h1 {
    font-size: 50px;
    font-family: flynas-Bold;
}



.arabic .welcome h2 {
    font-size: 30px;
    font-family: flynas-Regular;
}


.thanks {
    padding: 200px 0px;
    color: #00bfb3;
}

.thanks h1 {
    font-size: 84px;
    font-family: GothamRounded-Bold;
}



.thanks h2 {
    font-size: 44px;
    font-family: GothamRounded-Book;
}


.arabic .thanks h1 {
    font-size: 84px;
    font-family: flynas-Bold;
}



.arabic .thanks h2 {
    font-size: 44px;
    font-family: flynas-Regular;
}


.rborder{
    width:100%;
    border-radius:35px;
    padding:30px;
    border:1px solid #00bfb3;
    margin-bottom:50px;
}

.rborder h3 {
    font-size: 24px;
    font-family: GothamRounded-Bold;
}

.arabic .rborder h3 {
    font-size: 26px;
    font-family: flynas-Bold;
}

.number-btn-section{
    margin-top:20px;
    display:block;
}

.number-btn-section button {
    margin: 0px;
    padding: 2% 4%;
    text-align: center;
    border: 0px;
    font-family: GothamRounded-Bold;
    font-size:22px;
    color:#fff;
}

.number-btn-section button.one {
    background: #ADF7EA;
    border-top-left-radius: 40px;
    border-bottom-left-radius: 40px;
}

.arabic .number-btn-section button.one {
    background: #ADF7EA;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
}

.number-btn-section button.two {
    background: #9AE2D7;
}

.number-btn-section button.three {
    background: #66D8CD;
}

.number-btn-section button.four {
    background: #00D3C8;
}

.number-btn-section button.five {
    background: #00B2AE;
}

.number-btn-section button.six {
    background: #009999;
}

.number-btn-section button.seven {
    background: #008086;
}

.number-btn-section button.eight {
    background: #007070;
}

.number-btn-section button.nine {
    background: #016166;
}

.number-btn-section button.ten {
    background: #005159;
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
}

.arabic .number-btn-section button.ten {
    background: #005159;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border-top-left-radius: 40px;
    border-bottom-left-radius: 40px;
}

.number-btn-section button.selected {
    border: 4px solid #e0396d;
}

.btn-label-text {
    display: inline-block;
    width: 92%;
}

.btn-label-text .left{
    float:left;
}

.btn-label-text .right {
    float: right;
}
.yes-no-table{
    width: 100%;
}
.arabic .yes-no-table{
    direction: rtl;
}

.yes-no-table label {
    background: #009999;
    padding: 10px 15px;
    color: #fff;
    border-radius: 50px;
    width: 100%;
    text-align: left;
    font-size:18px;
}

.arabic .yes-no-table label {
    text-align: right;
}

.yes-no-table td {
    padding:10px;
}
.yes-no-table th {
    padding: 5px 20px;
}
.yes-no-table input[type=checkbox]{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid #333;
    line-height: 40px;
    text-align: center;
    font-size: 18px;
    accent-color: #009999;
}

.btnSubmit{
    width: 150px;
    height: 50px;
    background: #009999;
    border-color: #fff;
    color: #fff;
    border-radius: 50px;
    font-size: 18px;
}
.btnSubmit:disabled{
    background: #9AE2D7;
}

.arabic .number-btn-section{
    direction: rtl;
}
.langBtn{
    background: transparent;
    border-color: transparent;
}

.langBtn :focus{
    border-color: transparent;
    border-width: 0;
}

.oneChoice{
    border: transparent !important;
}

.oneChoice h3{
    color: #00bfb3;
    font-size:30px;
}

.oneChoiceOption{
    font-size: 20px;
}

.oneChoiceOption input[type=radio]{
    width: 25px;
    height: 25px;
    margin: 10px;
    accent-color: #009999;
}
.oneChoice{
    text-align: left;
}

.oneChoice label{
    vertical-align: 5px;
}

.oneChoice textarea{
    border: 1px solid #00bfb3;
    border-radius: 15px;
    width: 90%;
}
.oneChoice textarea:focus{
    outline: none !important;
    border: 1px solid #00bfb3;
}

.summer{
    border: transparent !important;
}

.summer textarea {
    border: 1px solid #00bfb3;
    border-radius: 15px;
}

.summer textarea:focus{
    outline: none !important;
    border: 1px solid #00bfb3;
}

.summer h3{
    color: #00bfb3;
    font-size:30px;
}

.arabic .oneChoice h3{
    direction: rtl !important;
}

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

@media (max-width: 992px) {
    header img {
        width: 100%;
    }

    .thanks {
        padding: 150px 0px;
        color: #00bfb3;
    }

    .thanks h1 {
        font-size: 44px;
        font-family: GothamRounded-Bold;
    }



    .thanks h2 {
        font-size: 24px;
        font-family: GothamRounded-Book;
    }



    .number-btn-section button.selected {
        border: 2px solid #e0396d;
    }

    .number-btn-section button {
        padding: 2% 3%;
        font-size: 16px;
    }
    .welcome {
        padding: 20px 0px;
    }

    .welcome h1 {
        font-size: 21px;
    }

    .welcome h2 {
        font-size: 18px;
    }

    .rborder {
        width: 95%;
        border-radius: 25px;
        padding: 10px;
        border: 1px solid #00bfb3;
    }

    .rborder h3 {
        font-size: 16px;
    }

    .f-logo{
        width:100px;
    }
}