@media screen and (min-width: 1800px) {
    .custom_container{
        max-width: 70%;
    }

    #footer .custom_container{
        max-width: 100%;
    }

    .custom_container_large{
        width: 70%;
    }

    #reclam .left{
        max-width: 700px !important;
    }

    #reclam .left p{
        max-width: 700px !important;
    }

    #reclam .left .bottom a button {
        max-width: 70%;
    }

    #contact .contact_box {
        padding: 56px 200px;
    }
}

@media screen and (max-width: 1400px) {
    .custom_container{
        max-width: 1100px;
    }
    .bg_purple{
        right: 0;
    }

    #contact .contact_box {
        padding: 26px 32px;
    }
}

@media screen and (max-width: 1200px) {
    .custom_container{
        max-width: 1000px;
    }

    #howitworks .boxes{
        grid-template-columns: repeat(2,1fr);
        grid-template-rows: auto auto;
    }

    #howitworks .box{
        max-width: 488px;

        &&:nth-child(1) {
            grid-column: 1;
            grid-row: 1;
        }
          
        &&:nth-child(2) {
            grid-column: 2;
            grid-row: 1;
          }
          
        &&:nth-child(3) {
            grid-column: 1 / span 2; 
            grid-row: 2;
            justify-self: center; 
            width: 100%;
        }
    }

    #privacypolicy .boxes{
        grid-template-columns: repeat(2,1fr);
        grid-template-rows: auto auto;
    }

    #privacypolicy .box{
        max-width: 488px;

        &&:nth-child(1) {
            grid-column: 1;
            grid-row: 1;
        }
          
        &&:nth-child(2) {
            grid-column: 2;
            grid-row: 1;
        }
          
        &&:nth-child(3) {
            grid-column: 1 / span 2; 
            grid-row: 2;
            justify-self: center; 
            width: 100%;
        }
    }

    #about .about_box div{
        max-width: 500px;
    }

    #about .about_box div p{
        height: 100%;

        &&:nth-child(1) {
            font-size: 30px;
            line-height: 30px;
            margin-bottom: 12px;
        }

        &&:nth-child(2) {
            font-size: 15px;
        }

        &&:nth-child(3) {
            font-size: 15px;
        }
    }
}

@media screen and (max-width: 1100px) {
    .custom_container{
        max-width: 950px;
    }
}   

@media screen and (max-width: 992px) {
    .custom_container{
        max-width: 500px;
    }

    .head_title{
        font-size: 17px;
        font-weight: 500;
        line-height: 22px;
    }

/* Header */

    #header div nav{
        display: none;
    }

    #header div{
        padding: 10px 0px 0px 0px;
    }

    #header .header_logo{
        width: 62px;
        height: 42px;
    }

    #header .header_flag{
        width: 20px;
        height: 20px;
    }

    #menu_button{
        display: flex;
    }

/* main */

    #main section {
        &&:nth-child(1) {
            margin-top: 24px !important;
        }
    }

/* reclam */

    #reclam .custom_container {
        align-items: center;
    }

    #reclam .left{
        max-width: 180px;
    }   

    #reclam .left .top p{
        &&:nth-child(1) {
            font-size: 32px;
            line-height: 40px;
            margin-bottom: 8px;
        }

        &&:nth-child(2) {
            font-size: 12px;
            line-height: 16px;
            margin-bottom: 8px;
        }
    }   

    #reclam .left .top span{
        &&:nth-child(3) {
            font-size: 10px;
            line-height: 13px;
        }
    }

    #reclam .left .bottom .bottom {
        display: none;
    }

    #reclam .left .bottom {
        align-items: flex-start;
        margin-top: 20px;
    }

    #reclam .left .bottom button {
        max-width: 164px;
        padding: 11 44px;
    }

    #reclam .left .bottom a {
        justify-content: start;
    }

    #reclam .left .bottom button span {
        font-family: boldFont;
        font-size: 16px;
        line-height: 21px;
    }

    #reclam .right img {
        width: 156px;
        height: 210px;
    }

/* about */

    #about .custom_container {
        margin-top: 64px !important;
    }

    #about .bg_purple {
        display: none;
    }

    #about .about_vector{
        width: 34.98px;
        height: 9.3px;
        right: -17%;
    }

    #about .about_box{
        padding: 32px 16px 32px 24px;
        height: 343px;
        border-radius: 80px 22px;
    }

    #about .about_box .left {
        max-width: 214px;
    }

    #about .about_box div p{

        &&:nth-child(1) {
            font-family: mediumFont;
            max-width: 184px;
            font-size: 17px;
            font-weight: 500;
            line-height: 22px;
            letter-spacing: -0.40799999237060547px;
            margin-bottom: 4px;
        }

        &&:nth-child(2) {
            font-family: regularFont;
            max-width: 203px;
            font-size: 12px;
            font-weight: 400;
            line-height: 16px;
            margin-bottom: 12px;
        }

        &&:nth-child(3) {
            font-family: regularFont;
            max-width: 214px;
            font-size: 11px;
            font-weight: 400;
            line-height: 13px;
            margin-top: 0px;
        }
    }

    #about .about_image{
        width: 73px;
        height: 162px;
        right: 16px;
        top: 50%;
        bottom: 50%;
        transform: translate(0%, -50%);
    }

/* how it works */

    #howitworks .custom_container {
        margin-top: 64px;
    }

    #howitworks .howItWorkVector {
        height: 30.23px;
        width: 45.48px;
        left: 103px;
        top: 10px;
    }

    #howitworks .boxes {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 16px;
    }

    #howitworks .box {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 32px 16px;
    }

    #howitworks .box p {
        font-size: 17px;
        font-weight: 600;
        line-height: 22px;
        font-family: boldFont;
    }

    #howitworks .box span {
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
    }

/* privacy policy */
    
    #privacypolicy .custom_container{
        margin-top: 64px;
    }
    
    #privacypolicy .boxes {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 12px;
    }

    #privacypolicy .boxes .box {
        padding: 20px;
    }

    #privacypolicy .boxes .box p {
        font-family: mediumFont;
        font-size: 17px;
        font-weight: 600;
        line-height: 22px;
        letter-spacing: -0.40799999237060547px;
        margin-bottom: 10px;
    }

    #privacypolicy .howItWorkVector {
        width: 45.48px;
        height: 30.23px;
        left: 115px;
        top: 10px;
    }

    #privacypolicy .boxes .box ul li a {
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
        letter-spacing: 0.5px;
    }

    .yellowBrightness{
        display: none;
    }

/* contact */
    
    #contact .contactVector {
        width: 51.72px;
        height: 24.54px;
        bottom: -12px;
        left: 9px;
    }

    #contact .contact_box {
        flex-direction: column-reverse;
        justify-content: flex-start;
        align-items: flex-start;
        padding: 20px;
        border-radius: 32px;
        gap: 16px;
    }

    .contact_map{
        max-width: 100%;
    }

    .contact_map iframe{
        width: 100%;
        border-radius: 20px;
        height: 206px;
        object-fit: cover;
    }

    #contact .contact_box .bottom {
        width: 100%;
        gap: 12px;
    }

    #contact .contact_box p {
        font-size: 17px;
        font-weight: 600;
        line-height: 22px;
        letter-spacing: -0.40799999237060547px;
        font-family: boldFont;
        height: fit-content !important;
    }

    #contact .contact_box span {
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
        letter-spacing: 0.5px;
        font-family: regularFont;
    }

    #contact {
       margin-top: 64px;
    }

    #contact .contact_box .bottom div p{
        max-width: 54px;
        width: 100%;
    }


    #contact .contact_box .bottom div span{
        margin-left: 10px !important;
    }

/* footer */

    #footer {
        margin-top: 112px;
    }
    
    #footer .custom_container {
        max-width: 100%;
    }

    #footer .custom_container_large{
        flex-direction: column;
        justify-content: center;
        padding: 16px 0px 43px 16px;
        height: 100%;
        gap: 12px;
    }

    #footer .right {
        display: none;
    }

    #footer nav {
        height: fit-content;
        margin-top: 7px;
    }


    #footer nav ul {
        flex-direction: column;
        text-align: left;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 16px;
    }

    #footer nav ul li {
        display: flex;
        height: 16px;
    }

    #footer nav ul li a {
        font-size: 11px;
        font-weight: 400;
        line-height: 13px;
        letter-spacing: 0.06599999964237213px;
    }

    #footer .footer_logo{
        width: 60.15px;
        height: 41px;
        margin-bottom: 12px;
    }

    #footer .mobile_store{
        gap: 16px;
        display: flex;
    }

    #footer .mobile_store img {
        width: 72px;
        height: 22px;
        object-fit: cover;
        border-radius: 3px;
    }

    #footer .mobile_title{
        display: flex;
        font-size: 12px;
        font-weight: 400;
        line-height: 16px;
        color: #697e74;
        margin-top: 16px;
    }

    .number {
        margin-left: 7px;
    }
}

@media screen and (max-width: 500px){
    /* global styles */

        .custom_container{
            max-width: 343px;
        }

        
}