/* Container */
.container{
    max-width: 1230px;
    margin: auto;
    /* padding: 0 1rem; */
}

.row{
    display: flex;}
[class^="col-"]{ flex: 1 0 auto; padding: 0 3rem;}
.col-1{ flex-basis: 8.33%; max-width: 8.33%; }
.col-2{ flex-basis: 16.66%; min-width: 16.66%; }
.col-3{ flex-basis: 25%; max-width: 25%; }
.col-4{ flex-basis: 33.3336%; max-width: 33.3336%; }
.col-5{ flex-basis: 41.66%; max-width: 41.66%; }
.col-6{ flex-basis: 50%; max-width: 50%; }
.col-7{ flex-basis: 58.33%; max-width: 58.33%; }
.col-8{ flex-basis: 66.66%; max-width: 66.66%; }
.col-9{ flex-basis: 75%; max-width: 75%; }
.col-10{ flex-basis: 83.33%; max-width: 83.33%; }
.col-11{ flex-basis: 91.66%; max-width: 91.66%; }
.col-12{ flex-basis: 100%; max-width: 100%; }
.col-auto{ flex-basis: 20%; max-width: 20%; }

/* wrap-1 */
/*.product-img{ position: relative;}*/

/*.product-text{*/
/*    position: absolute;*/
/*    background-color: #e75608;*/
/*    bottom: 0;*/
/*    color: #fff;*/
/*    height: 50%;*/
/*    width: 30%;*/
/*    border-top-right-radius: 50px;*/
/*    padding-left: 10rem;*/
/*}*/
/*.product-text p a{color: inherit; opacity: 0.7; padding-right: 10px;}*/
/*.product-text h1{ padding-top: 25px;} */
/*.product-text p{ padding-top: 8px;}*/

/* wrap-2 */
.text-part h1{font-size: 2.5rem;}
.text-section{ display: flex; }
.text-part{
    padding-bottom: 2rem;
    font-size: 1.5rem;
    text-align: center;
}

/* heavy-products  */
.product-section{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    font-size: 1.4rem;
    padding-bottom: 3rem;
}

.order-2{
    order: 2;
}

.product-section img{
    border-radius: 10px;
}

.btn-view{
    background-color: #bb4809;
    color: #fff;
    font-size: 20px;
    padding: 13px;
    /* width: 100px; */
    border-radius: 10px;
    border: none;
    margin-top: 1rem;
}

/* wrap-3 */
.wrap-3{
     background-image: url(../imgage/becomeAseller.svg);
     background-color: #cccaca73;
}

.wrap-3 h1{
    text-align: center;
    padding-top: 2rem;
}
.boxs{ 
    display: flex; 
    flex-wrap: wrap;
    margin: 3rem 4rem;
}

.boxs-text:hover{
    background-color: #e75608;
    color: #fff;
}

.boxs-text{ 
    border: 1px solid #e75608;
    padding: 20px 24px;
    margin: 1rem;
    width: 322px;
}

.boxs-text p{ margin-top: 2rem;} 

/* wrap-4 */
.wrap-4{
    background-image: url(../imgage/features.svg);
    background-color: #cccaca73;
}

.wrap-4 h1{
   text-align: center;
   padding-top: 2rem;
}
.application-part{ 
   display: flex; 
   flex-wrap: wrap;
   margin: 3rem 4rem;
}

.application-text:hover{
   background-color: #e75608;
   color: #fff;
}

.application-text{ 
   border: 1px solid #e75608;
   padding: 20px 24px;
   margin: 1rem;
   width: 322px;
}

.application-text p{ margin-top: 2rem;} 




/* Tablet View */

@media (max-width: 990px){
    .text-section{padding: 0 2rem;}
    .product-section{
        font-size: 1.5rem;
        padding: 0 1.5rem;
    }
    .boxs{ margin: 3rem 7rem;}
    .application-part{margin: 3rem 7rem;}
    .wrap-4 h1{ margin-left: 4rem;}
}

@media (max-width: 880px){
    .wrap-4 h1{ margin-left: 62px; padding-top: 4rem;}
    .boxs{ margin: 8rem 3rem;}
    .text-img img{margin: 5rem 0 0 3rem; width: 80%;}
    .application-part{ margin: 3rem 3rem;}
}
@media (max-width: 768px) {
    .col-12{ flex-basis: 100%; max-width: 100%; }

    .product-section img{
        width: 100%;
    }

    .text-section{
        flex-direction: column;
        padding-left: 2rem;
    }

    .product-section{
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
        font-size: 1.3rem;
        padding-bottom: 2rem;
        padding-left: 2rem;
    }
    
    .order-2{
        order: 0;
    }    
    .boxs{
        margin: 2rem 2rem;
        flex-direction: column;
        align-items: center;
    }

    .boxs-text{
        width: 90%;
        margin: 1rem 0;
        text-align: center;
    }

    .application-part{
        margin: 2rem 2rem;
        flex-direction: column;
        align-items: center;
    }

    .application-text{
        width: 90%;
        margin: 1rem 0;
        text-align: center;
    }
}

/* Mobile View */
@media (max-width: 480px) {

    .text-part h1{
        font-size: 2.5rem;
    }

    .text-part p{
        font-size: 16px;
    }

    .boxs{
        margin: 2rem 1rem;
        flex-direction: column;
        align-items: center;
    }

    .boxs-text{
        width: 100%;
        margin: 1rem 0;
        text-align: center;
    }

    .application-part{
        margin: 2rem 1rem;
        flex-direction: column;
        align-items: center;
    }

    .application-text{
        width: 100%;
        margin: 1rem 0;
        text-align: center;
    }
}