@import url(https://fonts.googleapis.com/css2?family=Cairo:wght@300;500;700&display=swap);
*,
.dropdown-content p {
    margin: 0
}

.social,
.user-ico {
    align-self: center
}

.btn,
body {
    font-family: Cairo, sans-serif
}

.header,
.login {
    min-height: 100vh
}

*,
.btn-set,
.dropdown-link,
.main-menu ul li a,
.side-menu ul li a {
    text-decoration: none
}

* {
    padding: 0;
    box-sizing: border-box;
}

body {
    /* overflow: hidden;*/
    /* يمنع التمرير العمودي والأفقي */
    height: 100vh;
    /* يضمن ملء الصفحة بالكامل */
}

/*body {
    background: linear-gradient(135deg, #504313, #24261e, #4d2969);
     ✅ تدرج ملكي فاخر
}*/

.dropdown {
    position: relative;
    display: inline-block
}

.dropdown-link {
    display: block;
    color: #333;
    font-size: 16px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    cursor: pointer
}

.dropdown-content {
    display: none;
    position: absolute;
    top: 70px;
    width: 90vw;
    left: -60px;
    background-color: #757575;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
    border: 1px solid #ccc;
    border-radius: 2px;
    padding: 10px;
    z-index: 99
}

.line-l,
.line-ml,
.line-mr,
.line-pmr,
.line-r {
    background: #0f406b
}

.dropdown-content ul {
    list-style: none;
    padding-top: 10px;
    border-top: 1px solid #000;
    margin: 10px
}

.dropdown-content li {
    margin-top: 2px;
    padding: 2px 30px;
    border-bottom: 1px solid #00000026
}

.dropdown-content a {
    color: #ffe64e;
}

.drop-a-btn {
    display: block;
    margin-top: 10vh;
    padding: 5px 10px;
    background-color: #0f406b;
    color: #fff !important;
    border: none;
    border-radius: 2px;
    width: -webkit-fill-available;
    cursor: pointer
}

.head,
.header,
.slide-menu {
    display: flex
}

.center-text,
.user-ico {
    background-color: #757575;
    color: #fff
}

.line-l,
.line-ml,
.line-mr,
.line-pml,
.line-pmr,
.line-r {
    width: 1px;
    height: 100vh;
    position: fixed
}

.dropdown-content button:hover {
    background-color: #555
}

.user-ico {
    margin-left: 20px;
    font-size: 28px;
    padding: 10px;
    border: 6px solid #757575;
    border-radius: 100%
}

.line-mr {
    left: 55vw;
    z-index: 0
}

.line-ml {
    left: 45vw
}

.line-b,
.line-t {
    width: 100%;
    height: 1px;
    background: #0b1b31
}

.line-b {
    position: fixed;
    bottom: 30px
}

.line-lmc,
.line-lmp,
.line-lmu {
    width: 1px;
    height: 100vh;
    position: fixed
}

.line-lmc,
.line-lmp {
    background: #0b1b31;
    left: 200px
}

.line-lmu {
    background: #0b1b31;
    left: 300px;
    z-index: 1
}

.line-tb,
.line-tbc {
    height: 1px;
    background: #0b1b31;
    z-index: 1
}

.line-tb {
    position: fixed;
    width: 100%;
    bottom: 250px
}

.center-text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    padding: 50px;
    width: 90vw;
    border: solid;
    border-radius: 20px
}

.center-text a {
    color: #ff8c00;
    font-size: 21px;
    text-decoration: underline
}

.line-tbc {
    position: fixed;
    width: 100%;
    bottom: 100px
}

.menu,
.toggler {
    position: absolute
}

.header {
    width: 100%;
    background: linear-gradient(rgba(4, 9, 30, .7), rgba(50, 52, 61, .3)) center/cover no-repeat, url('../img/main.jpg') center/cover no-repeat;
    flex-direction: column;
    justify-content: space-between
}

.head {
    justify-content: space-between;
    align-items: center;
    padding: 7px 60px 10px
}

.logo-img {
    height: 75px;
    max-width: 100%
}

.slide-menu,
.toggler {
    width: 60px;
    height: 60px;
    cursor: pointer
}

.menu-container {
    margin-left: 60vw;
    z-index: 2
}

.toggler {
    opacity: 0;
    z-index: 3
}

.slide-menu {
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    background-color: #757575;
    z-index: 100
}

.ham-b,
.slide-menu .ham-m {
    height: 3px;
    border-radius: 1.5px;
    background-color: #fff
}

.slide-menu .ham-m {
    position: absolute;
    width: 45px;
    transition: .4s
}

.ham-b {
    width: 20px
}

.n {
    margin-top: 20px
}

.i {
    margin-bottom: 20px
}

.none {
    display: none !important
}

.menu,
.shadow {
    left: 0;
    display: none
}

.toggler:checked+.slide-menu>div {
    transform: rotate(135deg);
    background: #fff
}

.toggler:checked:hover+.slide-menu>div {
    transform: rotate(225deg)
}

.toggler:checked+.slide-menu>div:after,
.toggler:checked+.slide-menu>div:before {
    transform: rotate(90deg);
    top: 0;
    background: #fff
}

.toggler:checked~.menu {
    visibility: visible
}

.toggler:checked~.menu>div {
    transform: translateX(-50%) translateY(-37%)
}

.toggler:checked~.menu>div>div {
    opacity: 1
}

.menu {
    top: 5vh;
    width: 70vw;
    height: 90vh;
    background-color: #072442;
    border-bottom: 1px solid #fff;
    z-index: 99
}

.shadow,
.side-content {
    top: 0;
    position: absolute
}

.bg-line-log {
    background: #0f406b !important
}

.shadow {
    background: #000000b0;
    width: 100vw;
    height: 100vh
}

.active {
    display: block
}

.flex,
.hero,
.hero-form,
.main-menu,
.side-menu,
.social-cont {
    display: flex
}

.ham {
    position: absolute;
    left: 73vw
}

.main-menu {
    position: absolute;
    background-color: #07244200;
    width: 37vw;
    height: 85vh;
    margin-top: 15px;
    right: -15px
}

.end-line,
.line {
    background: #0f406b
}

.social-cont ul {
    list-style: none
}

.m-nav {
    margin-top: 150px;
    margin-right: 50px
}

.end-line,
.line,
.social {
    margin-top: 50px
}

.main-menu ul li a {
    color: #fff;
    line-height: 1.5;
    font-size: 54px;
    font-weight: 700
}

.color-defult,
.main-menu ul li a:hover,
.social i:hover {
    color: #0f406b
}

.social {
    margin-right: 30px
}

.social-cont {
    flex-direction: column;
    justify-content: space-around
}

.social i {
    font-size: 30px;
    margin-right: 20px;
    cursor: pointer;
    background: #333;
    padding: 10px;
    border-radius: 50%;
    color: #fff
}

.btn,
.form input,
.form-login input {
    border: none;
    outline: 0
}

.side-menu {
    float: left;
    margin-left: 10px;
    height: 90vh;
    width: 20vw;
    align-items: center;
    justify-content: center
}

.side-menu ul li {
    list-style: none;
    padding: 20px 0
}

.side-menu ul li a {
    font-size: 24px;
    background: #fff;
    padding: 0 40px;
    color: #0f406b
}

.d-flex a,
.footer-set ul li a,
.social-side i {
    color: #fff
}

.black,
.d-flex-black a,
.social-side i:hover {
    color: #ffffff
}

.line {
    width: 0px;
    margin-right: 100px;
    height: 90%
}

.end-line {
    width: 14px;
    margin-right: 0;
    height: 70px
}

.btn-line,
.menu-line {
    width: 100%;
    height: 1px;
    margin-right: -40px
}

.btn-line {
    background: #fff
}

.menu-line {
    background: #fff;
    margin-top: 10px
}

.ver,
.ver-manu {
    width: 1px;
    background: #fff;
    margin-left: 10px;
    margin-bottom: -15px
}

.min {
    width: 40px;
    height: 40px;
    background: #000
}

.hero {
    justify-content: space-between;
    align-items: center
}

.hero-text {
    color: #fff;
    padding: 1% 7%
}

.hero-text h4 {
    font-size: 45px
}

.hero-text h1 {
    font-size: 85px
}

.hero-text p {
    font-size: 25px
}

.btn {
    background-color: #4caf50;
    color: #fff;
    font-size: 18px;
    padding: 15px;
    border: none;
    border-radius: 6px;
    width: 100%;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
    margin-top: 15px;
}


/* تأثير هوفر عند التمرير على الزر */

.btn:hover {
    background-color: #45a049;
    /* تغيير اللون إلى الأخضر الداكن */
    transform: scale(1.05);
    /* تكبير الزر قليلاً عند التمرير */
}

.hero-form,
.login-form {
    padding: 80px 50px;
    text-align: center
}

@keyframes fadeInScale {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes pulseGlow {
    0% {
        text-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
    }
    50% {
        text-shadow: 0 0 15px rgba(255, 215, 0, 0.9);
    }
    100% {
        text-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
    }
}


/* تنسيق العنوان مع الأنيميشن */

.animated-title {
    font-size: 24px;
    color: #ffcc00;
    /* لون مميز */
    text-align: center;
    font-weight: bold;
    opacity: 0;
    animation: fadeInScale 1.5s ease-out forwards, pulseGlow 1.5s infinite alternate;
}

.d-flex-black {
    display: flex;
    justify-content: space-around;
    margin-top: 50px
}

.hero-form {
    width: 40vw;
    height: fit-content;
    background: #0f406b55;
    flex-direction: column;
    color: #fff;
    margin: 30px 60px
}

.form input,
.login-form {
    display: flex;
    flex-direction: column
}

.login-form {
    width: 60vw;
    line-height: 2;
    margin: 30px 430px 30px 60px
}

.hero-form h1 {
    padding-bottom: 50px
}

.form label {
    color: white;
    text-align: center;
    display: flex;
    padding: 10px 0
}

.d-flex {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 35px
}

.form input {
    color: #000;
    width: 100%;
    height: 50px;
    padding: 0 10px
}

.form-login,
.form-login label {
    flex-direction: column;
    display: flex
}

.input {
    background-color: #f7f7f7;
    border: 1px solid #0f406b !important
}

footer p {
    text-align: center;
    color: #fff;
    font-size: 8px;
}

.login {
    width: 100%;
    background: #0b1b31
}

.login-head h3 {
    color: #333
}

.form-sign-in h1 {
    text-align: center;
    font-size: 40px;
    font-weight: 500
}

.form-login {
    margin: 0 auto;
    text-align: center;
    align-items: center
}

.form-login label {
    padding: 10px 0
}

.form-login input {
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    width: 60rem;
    height: 50px;
    padding: 0 10px
}

.set-body,
.set-head h1 {
    border-bottom: 1px solid #ff8c00;
    color: #f7f7f7;
}

.small {
    width: 60rem
}

.w-100 {
    width: 100%
}

.checkbox-reg {
    width: 100% !important;
    justify-content: unset !important
}

.about-flex,
.set-header {
    justify-content: space-around
}

.mr-5 {
    margin-right: 20px
}

.text-about {
    text-align: center;
    margin-top: 5rem;
    font-size: 25px
}

.about-flex {
    display: flex;
    align-items: center;
    margin-top: 10rem;
    text-align: right
}

.footer-set-b p,
.set-icon,
.side-content p,
.text-contact h2 {
    text-align: center
}

.about-flex h3 {
    font-size: 30px
}

.about-flex p {
    font-size: 20px
}

.contact {
    display: flex;
    justify-content: space-between;
    margin-top: 100px
}

.side-content {
    background: #0f406b;
    height: 100vh;
    width: 20%;
    color: #fff;
    left: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.social-contact i {
    margin-left: 20px;
    font-size: 30px;
    color: #fff
}

.side-content p {
    line-height: 3
}

.text-contact h2 {
    font-size: 30px
}

.text-contact {
    margin-right: 50px
}

.shadw-bg {
    background: #000
}

.form-contact input {
    padding: 10px;
    width: 250px;
    height: 50px;
    outline: 0;
    margin: 20px;
    background: #f7f7f7;
    border: 1px solid #0f406b
}

.form-contact textarea {
    width: 715px;
    margin: 20px;
    border: 1px solid #0f406b
}

.flex-side {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    font-size: 25px;
    margin: 1px -80px
}

.flex-side i {
    margin-right: 15px
}

.content-privacy {
    margin-top: 4rem
}

.content-privacy p {
    font-size: 20px;
    width: 90%
}

.content-privacy ul li {
    margin-top: 44px;
    margin-right: 45px
}

.side-menu-mob {
    display: none
}

.flex-checkbox,
.prand {
    display: flex;
    justify-content: center
}

.cash-content {
    line-height: 3;
    margin-right: 50px
}

.cash-content h3 {
    font-size: 28px
}

.prand {
    align-items: center;
    margin-top: 20rem;
    flex-wrap: wrap
}

.prand img {
    width: 200px;
    margin-left: 20px
}

.flex-checkbox {
    width: 100px
}

.flex-checkbox input {
    width: 20px;
    margin-left: 20px
}

.line-home {
    width: 150px;
    background: #fff;
    margin-top: 5px
}

.ver-home {
    background: #0f406b;
    width: 1px
}

.flex-home {
    justify-content: center;
    margin-top: 50px
}

.mt,
.set-head h1,
.set-icon i {
    margin-top: 40px
}

.bg-white {
    z-index: 11;
    background: #0f406b;
    margin-right: 30px;
    margin-left: 200px
}

.btn-set,
.footer-set-h,
.line-set,
.set-header {
    background: #6b87a44f;
}

.heading-contact h1 {
    padding-top: 100px
}

.contact-grid {
    display: grid
}

.bg-white-privacy {
    min-height: calc(100vh - 140px)
}

.bg-white-login {
    margin-left: 30px;
    margin-right: 280px
}

.btn-live {
    padding: 9px 24px;
    margin-top: 0;
    margin-left: 10px;
    font-size: 12px;
    border-radius: 50px;
    align-self: center;
    transition: background-color 0.3s, color 0.3s;
}

.btn-live:hover {
    background-color: #007bff;
    /* يمكنك استبدال هذا باللون الذي تريده لتحقيق التأثير المناسب */
    color: #fff;
    /* لتغيير لون النص عند تمرير المؤشر */
}

.cash-now {
    display: flex;
    align-items: center;
    justify-content: center;
    float: right;
    margin-right: 70px;
    margin-top: 30px;
    border: 1px solid #0f406b
}

.cash-now img {
    width: 50px
}

.cash-now p {
    margin-right: 10px;
    padding: 10px
}

.set-head h1 {
    font-weight: 500;
    padding: 20px 0
}

.line-set {
    position: absolute;
    width: 100%;
    height: 1px;
    top: 320px
}

.set-body,
.set-header {
    display: flex;
    width: 90%
}

.set {
    display: flex;
    flex-direction: column;
    justify-self: center;
    align-items: center;
    margin-top: 0
}

.set-header {
    color: #fff;
    padding: 20px 0
}

.set-body {
    justify-content: space-around;
    color: #fdaa29;
    padding: 10px 0
}

.btn-set {
    padding: 5px 40px;
    border-radius: 25px;
    color: #fff;
    font-weight: bold;
    transition: background-color 0.3s, color 0.3s;
}

.btn-set:hover {
    background-color: #007bff;
    /* تغيير لون الخلفية عند تمرير المؤشر */
    color: #fff;
    /* تغيير لون النص عند تمرير المؤشر */
}

.set-body p {
    border-right: 1px solid #ff8c00;
    padding: 0 10px
}

.text-set {
    float: right;
    margin-right: 90px;
    margin-top: 20px;
    font-size: 24px
}

.set-space {
    width: 100%;
    margin: 70px 0
}

.footer-set-h {
    position: relative;
    width: 100%
}

.time-block {
    display: block !important
}

.footer-set,
.main-menu-set {
    display: flex;
    align-items: center
}

.footer-set {
    margin: 0 40px;
    flex-wrap: wrap
}

.footer-set img {
    width: 250px
}

.footer-set ul li {
    list-style: none;
    line-height: 3;
    color: #fff;
    margin-right: 20vw;
    font-size: 20px
}

.set-border {
    border-bottom: 1px solid #fff;
    padding: -1px;
    margin: 10px 0 3px
}

.set-icon i {
    color: #0f406b;
    background: #fff;
    padding: 5px;
    border-radius: 50%;
    font-size: 20px;
    margin-right: 10px
}

.line-set-l,
.line-set-r {
    height: 100vh;
    position: fixed
}

.line-logo-set-r {
    position: absolute;
    width: 9%;
    height: 2px;
    background: #fff;
    top: 280vh;
    right: 643px
}

.main-menu-set,
.side-menu-set {
    float: left;
    height: 70vh;
    margin-top: 12px
}

.main-menu-set {
    position: absolute;
    background-color: #f4f4f4;
    left: 3px;
    justify-content: center
}

.side-menu-set,
.social-contact {
    align-items: center;
    display: flex
}

.side-menu-set {
    width: 27vw;
    justify-content: center;
    background: #f4f4f4
}

.social-contact {
    justify-content: center
}

.side-menu-set ul li {
    list-style: none;
    line-height: 3
}

.side-menu-set ul li a {
    color: #fff;
    font-size: 30px;
    background: #0f406b;
    padding: 0 40px
}

.bg-line-red,
.btn-line-set,
.menu-line-set,
.ver-manu-set,
.ver-set {
    background: #0f406b
}

.end-line-set {
    margin-top: 55vh
}

.social-set {
    margin-top: 1vw
}

.user-set p {
    color: #fff;
    font-size: 30px;
    padding: 10px 85px 0 0;
    font-weight: 700
}

.user-set {
    display: flex;
    align-items: center;
    justify-content: space-around
}

.btn-set-uset {
    background: #fff;
    padding: 5px 40px;
    color: #0f406b
}

.text-btn-user {
    background: #0f406b;
    width: 250px;
    padding: 5px 40px;
    color: #fff;
    margin-right: 70px;
    margin-top: 23px
}

.cash-user-now {
    margin-top: 10px
}

.td-h {
    width: 240px;
    max-width: 100%
}

.footer-set-b p {
    background: #0f406b;
    color: #fff;
    border-top: 1px solid #fff;
    padding: 10px 0;
    margin-top: 20px;
    width: 100%;
    font-size: 12px
}

.main-menu-set ul {
    margin-top: 35px;
    list-style: none
}

@media screen and (max-width:1825px) {
    .side-content {
        width: 25%
    }
    .text-contact h2 {
        font-size: 25px
    }
}

.about-flex p {
    width: 80%
}

.about-flex {
    margin-right: 250px
}

@media screen and (max-width:1500px) {
    .main-menu ul li a {
        font-size: 34px
    }
    .social i {
        font-size: 26px
    }
    .end-line {
        height: 0px
    }
    .hero-text h4 {
        font-size: 45px
    }
    .hero-text h1 {
        font-size: 60px
    }
    .hero-text p {
        font-size: 18px
    }
    .hero-form {
        width: 39vw
    }
    .main-menu-set ul li a {
        font-size: 40px
    }
    .flex-side,
    .user-set p {
        font-size: 20px
    }
    .cash-content h3,
    .side-menu-set ul li a {
        font-size: 25px
    }
    .social-set i {
        font-size: 30px
    }
    .end-line-set {
        margin-top: 43vh
    }
    .mt {
        margin-top: 138px
    }
    .form-sign-in h1 {
        font-size: 35px
    }
    .prand {
        margin-top: 23rem
    }
    .prand img {
        width: 150px
    }
    .form-contact input {
        width: 625px;
        margin: 11px 0
    }
    .form-contact textarea {
        width: 625px;
        margin: 20px 0;
        border: 1px solid #0f406b
    }
    .d-grid {
        display: grid
    }
    .column {
        flex-direction: column;
        padding: 20px 10px
    }
    .mr-5 {
        margin-right: 10px
    }
    .login-form {
        margin: 30px 127px 30px 60px;
        padding: 0 50px
    }
    .contact {
        margin-top: 0
    }
    .footer-set ul li {
        font-size: 15px
    }
}

@media screen and (max-width:1300px) {
    .line {
        margin-right: 50px
    }
    .hero-text h1,
    .main-menu ul li a {
        font-size: 45px
    }
    .side-menu ul li a {
        font-size: 18px
    }
    .hero-text h4 {
        font-size: 35px
    }
    .hero-text p {
        font-size: 16px;
        width: 90%
    }
    .hero-form {
        width: 40vw;
        height: fit-content
    }
    .main-menu-set ul li a {
        font-size: 32px
    }
    .side-content {
        width: 28%
    }
    .form-contact input {
        width: 508px
    }
    .form-contact textarea {
        width: 500px
    }
    .text-about {
        font-size: 20px
    }
    .about-flex p {
        width: 90%;
        font-size: 17px
    }
    .about-flex {
        margin-right: 100px
    }
}

@media screen and (max-width:1100px) {
    .line-pml {
        display: none
    }
    .main-menu ul li a {
        font-size: 36px
    }
    .menu {
        width: 85vw
    }
    .side-menu {
        width: 30vw
    }
    .main-menu {
        width: 52vw
    }
    .ham {
        margin-left: 0;
        position: absolute;
        left: 90vw
    }
    .hero-text h4 {
        font-size: 35px
    }
    .main-menu-set ul li a {
        font-size: 28px
    }
    .social-set i,
    .text-contact h2 {
        font-size: 20px
    }
    .hero-text h1 {
        font-size: 50px
    }
    .hero-text p {
        font-size: 15px
    }
    .mt {
        margin-top: 100px
    }
    .hero-form {
        padding: 26px 11px;
        height: 52vh;
        line-height: 1;
        margin: 150px 55px
    }
    .prand img {
        width: 100px
    }
    .prand {
        margin-top: 6rem
    }
    .cash-content h3 {
        font-size: 23px
    }
    .form-sign-in h1 {
        font-size: 30px
    }
    .form-sign-in-cash {
        line-height: 10
    }
    .side-content {
        width: 30%
    }
    .form-contact input,
    .form-contact textarea {
        width: 400px
    }
    .flex-side,
    .text-set {
        font-size: 18px
    }
    .content-privacy p {
        width: 90%;
        font-size: 17px
    }
    .contact {
        margin-top: 0
    }
    .login-form {
        padding: 0
    }
    .side-menu ul li a {
        font-size: 20px;
        line-height: 1.5;
        padding: 0 20px
    }
}

@media screen and (max-width:1000px) {
    .hero-text h4 {
        font-size: 25px
    }
    .hero-text h1 {
        font-size: 40px
    }
    .btn,
    .hero-text p {
        font-size: 14px
    }
    .btn {
        padding: 10px 30px
    }
    .prand img {
        width: 75px
    }
    .user-set {
        background: #0f406b
    }
    .end-line-set {
        margin-top: 0
    }
    .side-menu-set ul li {
        padding: 0
    }
    .form-contact input,
    .form-contact textarea {
        width: 300px
    }
    .flex-side {
        font-size: 15px
    }
    .text-contact h2 {
        font-size: 18px
    }
    .content-privacy p {
        font-size: 17px
    }
    .line-lmu {
        display: none
    }
}

@media screen and (max-width:900px) {
    .hero-form {
        margin-top: 15vw;
        margin-left: 30px;
        width: 500px
    }
    .side-content {
        width: 750px;
        height: fit-content;
        left: 31px;
        top: 140px
    }
    .content-privacy p,
    .form-contact input {
        width: 100%
    }
    .form-contact textarea {
        width: 500px
    }
    .heading-contact h1 {
        padding-top: 275px
    }
    .contact {
        margin-top: 10px
    }
    .btn-contact {
        margin-top: 0
    }
    .td-h {
        font-size: 13px
    }
    .set-header {
        padding: 10px 0
    }
    .cash-now {
        font-size: 12px;
        font-weight: 700;
        position: absolute;
        left: 50%;
        transform: translate(-50%, 0);
        width: max-content
    }
    .btn-live {
        width: fit-content
    }
    .btn-set {
        padding: 5px 12px
    }
    .footer-set ul li {
        line-height: 3
    }
    .footer-set {
        margin: 0 50px
    }
}

@media screen and (max-width:800px) {
    .footer-set ul li,
    .side-menu-mob {
        margin-right: 50px
    }
    .social i,
    .user-ico {
        font-size: 21px
    }
    .user-ico {
        align-self: center;
        margin-left: 10px;
        background-color: #757575;
        padding: 3px;
        border: 6px solid #757575;
        border-radius: 100%;
        color: #fff
    }
    .slide-menu {
        width: 40px;
        height: 40px
    }
    .ham-b {
        width: 16px;
        height: 2px
    }
    .i {
        margin-bottom: 15px
    }
    .btn-live {
        padding: 5px 10px;
        margin-top: 0;
        margin-left: 10px
    }
    .m-nav {
        margin-top: 30px
    }
    .side-menu-mob {
        display: block
    }
    .footer-set img,
    .line-l,
    .line-pmr,
    .line-r,
    .side-menu,
    .side-menu-set {
        display: none
    }
    .side-menu-mob ul li a {
        background: #0e1775;
        color: #fff;
        padding: 0 10px;
        margin-right: 10px;
        font-size: 18px;
        font-weight: 500
    }
    .ver-manu {
        background: #0f406b;
        margin-bottom: -54px;
        height: 62px
    }
    .menu-line {
        background: #0f406b;
        width: 85%;
        margin-right: -14px;
        margin-top: 7px
    }
    .line-ml,
    .line-mr {
        background: #0f406b53
    }
    .end-line,
    .social {
        margin-top: 0
    }
    .end-line {
        height: 60px;
        width: 10px
    }
    .head {
        padding: 0 30px
    }
    .bg-white-privacy {
        min-height: calc(100vh - 110px)
    }
    .hero {
        flex-direction: column;
        text-align: center
    }
    .hero-form {
        width: 89%;
        margin: auto;
        height: fit-content
    }
    .bg-white,
    .bg-white-login {
        padding: 1%;
        margin-right: 15px
    }
    .hero-text h4 {
        font-size: 30px
    }
    .hero-text h1 {
        font-size: 40px
    }
    .hero-text p {
        font-size: 16px;
        width: 100%
    }
    .mt {
        margin-top: 70px
    }
    .line-mr {
        left: 20vw
    }
    .line-ml {
        left: 25vw
    }
    .line-lmp {
        left: 130px
    }
    .prand {
        margin-top: 8rem
    }
    .line-lmc {
        background: #0f406b29;
        left: 100px
    }
    .side-content {
        width: 90%;
        left: 31px;
        top: 110px
    }
    .heading-contact h1 {
        padding-top: 226px
    }
    .form-contact textarea {
        width: 100%;
        height: 10vh
    }
    .line-pmr {
        right: 202px
    }
    .bg-white {
        margin-left: 130px
    }
    .bg-white-login {
        margin-left: 15px
    }
    .login-form {
        padding: 0 15px;
        width: 100%;
        margin: 0
    }
    .line-logo-set-c {
        background-color: #0f406b;
        width: 1px;
        height: 0;
        margin: 0
    }
    .footer-set ul li a {
        font-size: 14px
    }
    .main-menu {
        width: 85vw
    }
}

@media screen and (max-width:650px) {
    .hero {
        padding: 2%
    }
    .hero-form {
        margin-top: 3vw;
        padding: 4%;
        width: 100%
    }
    .cash-content {
        line-height: 2;
        margin-right: 50px
    }
    .about-flex {
        justify-content: center;
        flex-direction: column;
        text-align: center;
        margin: 6vw auto 0
    }
    .about-flex p {
        width: 100%;
        padding: 2%
    }
    .user-set p {
        font-size: 14px
    }
    .btn-set-uset {
        padding: 5px 15px
    }
    .menu-set {
        height: fit-content
    }
    .social-set i {
        font-size: 25px
    }
}

@media screen and (max-width:500px) {
    .head {
        padding: 0 15px 0 30px
    }
    .bg-white-privacy {
        min-height: calc(100vh - 120px)
    }
    .hero-text {
        padding: 10% 2%;
        text-align: right
    }
    .form input[type=checkbox] {
        height: 30px;
        margin-left: 5px
    }
    .line-t {
        top: 90px
    }
    .slide-menu .ham-m {
        width: 30px;
        height: 2px
    }
    .n {
        margin-top: 15px
    }
    .flex-home {
        margin-top: 10px
    }
    .mt {
        margin-top: 26px;
        margin-right: 30px
    }
    .hero-form h1 {
        padding-bottom: 2px;
        font-size: 16px
    }
    .logo-img {
        height: 60px
    }
    .cash-content h3,
    .hero-text h4 {
        font-size: 15px
    }
    .about-flex h3,
    .hero-text h1 {
        font-size: 25px
    }
    .hero-text p {
        font-size: 11px
    }
    .about-flex p,
    .d-flex,
    .flex-side,
    .text-about,
    footer p {
        font-size: 12px
    }
    .text-contact h2 {
        font-size: 12px;
        padding: 15px
    }
    .hero-form {
        padding: 5%;
        width: 85%;
        margin-top: 2vw
    }
    .form-sign-in-cash,
    .side-content p {
        line-height: 2
    }
    .flex-checkbox {
        margin-top: 10px;
        align-items: center
    }
    .flex-checkbox input {
        height: 20px
    }
    .d-flex {
        padding-top: 35px
    }
    .side-content {
        width: 85%;
        left: 0;
        top: 160px;
        height: 150px
    }
    .flex-side i {
        margin-right: 10px
    }
    .contact {
        margin-top: 40vw
    }
    .heading-contact h1 {
        padding-top: 145px;
        margin-top: -44vw
    }
    .btn-contact,
    .content-privacy,
    .content-privacy ul li,
    .set {
        margin-top: 0
    }
    .form-sign-in h1 {
        font-size: 25px;
        font-weight: 700
    }
    .btn,
    .marg h1 {
        font-weight: 500
    }
    .line-lmp,
    .side-menu {
        display: none
    }
    .prand {
        margin-top: 16rem
    }
    .text-contact {
        margin-right: 25px
    }
    .text-about {
        margin-top: 1rem
    }
    .line-pmr {
        position: absolute;
        width: 1px;
        height: 100vh;
        background: #0f406b38;
        right: 322px
    }
    .bg-white {
        margin-left: 15px
    }
    .content-privacy p {
        font-size: 12px;
        margin-top: 20px
    }
    .form input,
    .form-contact textarea {
        margin: 5px 0
    }
    .ham {
        top: 50px;
        right: 20px
    }
    .form-contact input {
        margin: 5px 0;
        height: 30px
    }
    .login-form h1 {
        color: white;
        font-size: 16px
    }
    .form label {
        padding: 10px 0;
        font-size: 12px
    }
    .form input {
        height: 30px
    }
    .column-reg {
        flex-direction: column
    }
    .main-menu ul {
        padding: 10px;
        margin-right: 30px;
        margin-top: 0
    }
    .ver {
        margin-bottom: -10px
    }
    .side-menu ul li a {
        font-size: 18px
    }
    .main-menu {
        height: 96vh;
        float: left;
        width: 100%;
        display: flex;
        padding-top: 100px
    }
    .menu {
        top: 2vh;
        width: 95%
    }
    .side-menu {
        margin-right: 30px;
        width: 90%
    }
    .side-menu-mob {
        display: block;
        margin-right: 0
    }
    .social-contact i {
        font-size: 24px;
        margin-top: 15px;
        margin-right: 10px;
        background: #fff;
        padding: 5px;
        border-radius: 50%;
        color: #0f406b
    }
    .btn {
        padding: 5px 25px
    }
    .bg-line-log,
    .line-ml,
    .line-mr {
        background: #0f406b
    }
    .btn-line {
        margin-top: 7px;
        margin-right: -25px
    }
    .line-form {
        margin-top: 14px
    }
    .line {
        width: 2px;
        margin-right: 10px;
        height: 83vh;
        margin-top: 0
    }
    .side-menu ul li {
        padding: 13px 0
    }
    .social-contact {
        text-align: center;
        margin-left: 70px
    }
    .privacy-ul {
        padding-right: 25px
    }
    .set-header {
        padding: 10px 0;
        width: 98%
    }
    .td-h {
        font-size: 16px;
        width: 90px
    }
    .set-body {
        width: 90%
    }
    .main-menu-set {
        height: 80vh;
        padding-top: 10px
    }
    .btn-live {
        padding: 5px 10px;
        margin-top: 0;
        margin-left: 10px
    }
    .btn-set-uset {
        padding: 3px
    }
    .text-set {
        margin-right: 20px
    }
    .end-line-set {
        margin-top: 55vh
    }
    .mr-5 {
        margin-right: 0
    }
    .heading-contact {
        margin-top: 50px
    }
    .marg {
        margin: 20px 0 0
    }
    .marg h1 {
        text-align: center;
        margin-top: 0 !important;
        margin: unset;
        border-bottom: 1px solid #0f406b;
        padding: 20px 0
    }
    .screen-contset {
        padding: 10px 0;
        border-top: 1px solid #0f406b
    }
    .contset {
        padding: 15px 2px
    }
}