@media all and (max-width:2000px){
    .menu-div{
        transform: translateX(-100%);    
    }
    .menu-burger{
        display: grid;
    }
}

@media all and (max-width:1400px){
    .menu-div .menu-tables a {
        font-size: 14px;
        line-height: 130%;
    }
    .menu-div .menu-tables li {
        margin-bottom: 20px;
    }
    .main::after {
        width: 25%;
    }
    .main-div .left .title {
        font-size: 30px;
    }
    .main-div .left .desc {
        font-size: 14px;
        max-width: 100%;
    }

    .video-tooltip img {
        width: 80px;
        height: 80px;
        margin-bottom: 10px;
    }
    .video-tooltip p {
        font-size: 14px;
    }
    .video-tooltip {
        width: 110px;
    }
    .main-img {
        height: 520px;
        margin-top: 50px;
    }
    .doc-tooltip {
        bottom: 80px;
        left: 230px;
    }
    .doc-tooltip .job{
        color: #FFF;
    }
    h2 {
        font-size: 30px;
        text-align: center;
    }
    .ucan {
        grid-template-columns: 1fr 1fr;
        grid-gap: 50px;
        max-width: 700px;
        margin: 0px auto;
    }
    .metods {
        grid-template-columns: 1fr 1fr;
        grid-gap: 35px;
    }
    .footer-div {
        display: grid;
        grid-gap: 30px;
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
    .footer-logo {
        grid-row-start: 2;
        grid-column-start: 1;
        grid-column-end: 3;
    }
    .footer-logo p {
        max-width: max-content;
    }
    .main.about-main::after{
        width: 50%;
    }
    .about-div h2 {
        font-size: 30px;
        text-align: left;
    }
    .about-inner {
        max-width: 100%;
    }
    .about-inner .item:last-child p{
        color: #FFF;
    }
    .main::before {
        font-size: 170px;
    }
    .mda-div {
        grid-template-columns: 1fr 1fr;
        grid-gap: 35px;
    }
    .contact-div {
        grid-template-columns: 1fr 1fr;
        grid-gap: 20px;
    }
    .contact-div .item {
        padding: 30px 40px;
    }
    .error-div .num {
        font-size: 480px;
    }
    .metod-ban .left {
        grid-template-columns: 1fr;
        grid-gap: 10px;
    }
    .metod-ban .left .title {
        font-size: 30px;
    }
    .metod-ban .right .doc-tooltip {
        bottom: 70px;
        right: 0px;
    }
}


@media all and (max-width:1024px){
    .table-div {
        overflow-x: auto;
    }
    .menu-div .menu-menu{
        display: block;
    }
    .header-div .menu {
        display: none;
    }
    .header-div .add-benef{
        display: none;
    }
    .menu-div {
        padding: 25px 20px 20px 20px;
        width: 100%;
        overflow-y: auto;
    }
    .menu-close {
        color: #000;
        top: 15px;
        right: unset;
        left: 15px;
        font-weight: 300;
    }
    .menu-div .add-benef {
        display: block;
        width: 100%;
        max-width: 350px;
        margin: 0px auto;
        text-align: center;
    }
    .add-benef::after {
        top: 18px;
    }
    .notlogin .menu-tables{
        display: none;
    }
    .notlogin .add-benef{
        display: none;
    }
    .notlogin .menu-burger {
        display: grid;
    }
    .header-div .logo p{
        display: none;
    }
    .notlogin .menu-div{
        display: block;
    }
    .login .header-div .logo {
        display: block;
    }
}


@media all and (max-width:768px){
    .btn-close{
        top: 4px;
        right: 4px;
    }
    .modal-content {
        padding: 30px 30px;
    }
    .login-btn p{
        display: none;
    }
    .verify .item {
        padding: 20px 20px;
    }
    .verify .item p {
        font-size: 14px;
    }
    h2 {
        font-size: 24px;
    }
    .video-link {
        height: 320px;
    }
    .video-btn {
        width: 130px;
        height: 130px;
        top: calc(50% - 65px);
        left: calc(50% - 65px);
        padding: 20px;
    }
    .footer-div {
        grid-template-columns: 1fr 1fr;
    }
    .footer-logo {
        grid-row-start: 4;
        grid-column-start: 1;
        grid-column-end: 3;
    }
    .metods .item p {
        font-size: 16px;
    }
    .ucan {
        grid-template-columns: 1fr;
        grid-gap: 20px;
    }
    .metods {
        grid-template-columns: 1fr;
        grid-gap: 30px;
    }
    .metods .item {
        padding: 30px 30px;
    }
    .verify {
        grid-template-columns: 1fr;
        grid-gap: 20px;
    }
    .about-inner {
        grid-template-columns: 1fr;
    }
    .about-inner .item:last-child p {
        color: #000;
    }   
    .main.about-main::after {
        width: 0%;
    }   
    .about-div {
        padding: 40px 0px;
    }
    .mda-div {
        grid-template-columns: 1fr;
        grid-gap: 30px;
    }
    .mda-div .item p {
        padding: 20px;
        font-size: 16px;
    }
    .contact-div {
        grid-template-columns: 1fr;
    }
    .contact-div .item {
        padding: 20px 10px;
    }
    .contact-div .name {
        font-size: 16px;
    }
    .contact-div .job {
        font-size: 12px;
    }
    .contact-div a {
        font-size: 16px;
        padding-left: 35px;
    }
    .contact-div a::after {
        top: -3px;
    }
    .principe-div {
        padding-left: 0px;
    }
    .principe-div::after {
        width: 150px;
        height: 4px;
        left: 0px;
        top: -20px;
    }
    h3 {
        font-size: 24px;
    }
    p {
        font-size: 14px;
    }
    .error-div .num {
        font-size: 160px;
    }
    .button {
        font-size: 14px;
        padding: 18px 20px;
    }
    .error-div {
        height: calc(100vh - 200px);
        align-content: center;
        display: grid;
    }
    .button-o.print::after {
        width: 18px;
        height: 18px;
        top: 17px;
        right: 17px;
    }
    .button-o {
        font-size: 16px;
        padding: 14px 40px 14px 20px;
    }
    .profile-div {
        padding: 30px 20px;
    }
    .form-div {
        grid-template-columns: 1fr;
        grid-gap: 30px;
    }
    .form-footer {
        margin-top: 60px;
        gap: 20px;
    }
    .form-footer .button-b, .form-footer .button-w {
        width: 100%;
    }
    h4 {
        font-size: 18px;
    }
    .table-header {
        display: grid;
        grid-gap: 10px;
        justify-items: flex-start;
    }
    .table-div table td {
        padding: 20px;
    }
    .main-div {
        grid-template-columns: 1fr;
        grid-gap: 10px;
    }
    .main-div .button{
        width: 100%;
        text-align: center;
    }
    .main-div .left .title {
        padding-left: 36px;
    }
    .main::after {
        width: 100%;
        height: 300px;
        top: unset;
        bottom: 0px;
    }
    .main-img {
        height: auto;
    }
    .video-tooltip p {
        display: none;
    }
    .video-tooltip {
        bottom: 120px;
        right: -20px;
    }
    .doc-tooltip {
        bottom: 30px;
        left: 150px;
    }
    .metod-ban {
        padding: 20px 15px 0px;
        grid-template-columns: 1fr;
    }
    .metod-ban .right img {
        height: auto;
        width: 100%;
    }
    .metod-ban .left .title {
        text-align: center;
    }
    .metod-ban .right .doc-tooltip {
        bottom: 10px;
    }
    .header-div {
        display: grid;
        justify-content: space-between;
        grid-template-columns: calc(50% + 57px) calc(50% - 57px);
    }
    .header-div .left {
        gap: 30px;
        justify-content: space-between;
    } 
    .header-div .right {
        justify-content: flex-end;
    }
    .menu-logo{
        width: 108px;
    }
    header{
        position: relative;
    }
    .main-div .left .title {
        margin-top: 0px;
    }
}

@media all and (max-width:520px){
    .footer-div {
        grid-template-columns: 1fr;
    }
    .footer-logo {
        grid-row-start: 5;
        grid-column-start: 1;
        grid-column-end: 2;
    }
    h3 {
        font-size: 18px;
    }
}


@media all and (max-width:400px){

}