.container{
    padding: 0;
}

.order{
    min-height: 100vh;
    background: #000014;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items:flex-end;
    overflow: hidden;
}
.area{
    /* border: 2px solid #fff; */
    height: auto;
}
.area:nth-child(1){
    width: 40%;
}
.area:nth-child(2){
    width: 60%;
    margin: auto 0;
    
}
.area img {
   height: 100%;
   width: 500px;
   
}

.area .bag{
    padding: 20px;
    width: 90%;
    background:#000014;
    box-shadow: 0px 0px 40px 2px grey;
    border-radius: 30px;
    display: flex;
    flex-direction: column;
    transition: all .4s ease-in;
}
.area .bag:hover{
    box-shadow: 0px 0px 40px 2px #fab317;

}
.bag h1{
    font-size: 2.2rem;
    margin: fit-content;
    width: 100%;
    text-align: left;
    font-weight: 700;
}
.bag h1 span{
    background-color: #ff0051;
    padding: 0 5px;
}
.bag h2{
    margin: 0;
    width: 100%;
    text-align: left;
    font-size: 1.7rem;
    font-weight: 600;
}
.bag h2 span{
    background-color: #ff0051;
}
.bag h3{
    width: 100%;
    font-size: 1.6rem;
    font-weight: 500;
    text-align: left;
    padding: 2px 20px;
    
    }
    .re-directs {
        width: 100%;
        padding: 0 30px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    .re-directs a {
        text-decoration: none;
        padding: 7px 25px;
        background: #ff004f;
        border-radius: 10px;
        font-size: 20px;
        color: #fff;
        margin: 2px 10px;
        transition: all .4s ease-in;
    }
    .re-directs a:hover{
        box-shadow: 0 0px 100px 16px rgb(255, 0, 79, 0.7);
    }

    @media (max-width:960px) {
        .bag h1{
            font-size: 1.6rem;
            font-weight: 500;
        }
        .bag h2{
            font-size: 1.3rem;
            font-weight: 400;
        }
        .bag h3{
            font-size: 1.4rem;
            font-weight: 500;
        }
        .re-directs a{
            padding: 5px 10px;
            font-size: 16px;
        }
        .area img{
            height: auto;
            width: 100%;
        }
    }

    @media (max-width:750px) {
        .bag h1{
            font-size: 1.3rem;
            font-weight: 400;
        }
        .bag h2{
            font-size: 1.0rem;
            font-weight: 300;
        }
        .bag h3{
            font-size: 1.2rem;
            font-weight: 400;
        }
        .re-directs a{
            padding: 5px;
            font-size: 14px;
            text-align: center;
            margin: 0 auto;
                
        }
       
    }

    @media (max-width:540px) {
        .order{
            flex-direction: column;
        }
        .area{
            width: 100%;
        }
        .area:nth-child(1){
            width: 100%;
        }
        .area:nth-child(2){
            width: 100%;
            margin: 0;
            
        }
        .bag{
            margin: 0px auto;
            margin-top: -10px;
            margin-bottom: 10px;
        }
        .area img{
            content: url(../../Resources/look-small.png);
            z-index: -1;
            width: 90%;
        }
    }