@import "style.css";
@import "/css/fontawesome/css/all.css";
@import "/css/jquery-ui.css";
.single_product{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 20px 4%;
}
.single_product .header{
    width: 39%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 10px;
}

.img_box{
    width: 100%;
    height: 350px;
    background: #fff;
    box-shadow: 0 0 7px 0 #ccc;
    border-radius: 10px;
    overflow: hidden;
    padding: 15px 2%;
    box-sizing: border-box;
}

.img_box .img{
    height:270px;width: 100%;text-align: center;
}

.img_box .img img{
    max-width: 100%;max-height: 100%;border-radius: 5px;
}

.more_imgs{
    width: 100%;height: fit-content;padding-top: 3%;overflow:hidden;
}

.more_imgs img{
    width: 23%;height: 97%;margin: 0 1%;cursor:pointer;border-radius: 5px;
}

.details{
    width: 100%;
    padding: 20px 10px;
    background: #fff;
    box-shadow: 0 0 7px 0 #ccc;
    border-radius: 10px;
    margin: 15px 0;
}

.details h1{
    padding: 10px 2%;
    margin: 0 0 20px;
    font-size: 1.3rem;
    color: #6abfed;
    font-weight: 700;
    text-align: center;
}

.brand{color: #0099c8;font-weight: 500;font-size: 14px;}

.details .shortdes{
    font-size: 1rem;
    text-align: center;
}

.description{
    width: 59%;
    min-height: 350px;
    padding: 20px;
    background: #fff;
    box-shadow: 0 0 7px 0 #ccc;
    border-radius: 10px;
    box-sizing: border-box;
    font-size: 1rem;
    line-height: 30px;
}

.dark{display:none;opacity:0;position:fixed;top:0;bottom:0;right:0;left:0;z-index:2;background:#0006;}
.ajax_imgs{display:none;opacity:0;position:fixed;width:56%;height:76%;top:8%;right:20%;padding:2%;z-index:3;background:#fff;border-radius:10px;}
.ajax_imgs .close{position: absolute;right:3%;top: 10px;font-size: 15px;border: 1px solid #aaa;border-radius: 100%;width: 20px;height: 20px;line-height: 22px;text-align: center;color: #aaa;cursor: pointer;}
.ajax_imgs h2{border-bottom:1px solid #ddd;padding: 0 0 10px;margin: 0;}
.ajax_imgs .big_img{float: right;width: 70%;height:97%;text-align: center;border-left: 1px solid #ddd;overflow:hidden;display:flex;justify-content:center;align-items:center;}
.ajax_imgs .big_img img{max-width:100%;max-height:100%;}
.ajax_imgs .imgs{float: right;width:27.6%;height: 100%;padding: 15px 1%;overflow: hidden;overflow-y: auto;}
.ajax_imgs .imgs img{width:31.3%;height: calc(4vw);margin: 0 1% 10px;cursor: pointer;float: right;border-radius:5px;overflow:hidden;padding: 5px 0;}
.properties{display: none;float: right;height: auto;background: #fff;box-shadow: 0 0 7px 0 #ccc;border-radius:10px;width: 96%;overflow: hidden;padding:15px 2% 30px;margin:0 0 30px;text-align: justify;line-height:27px;}
.property{float: right;width: 100%;}
.property h5{font-size: 13px;}
.property h6{float:right;margin: 0 3% 10px;padding: 0 1%;width:15%;background: #eee;font-size: 13px;font-weight: normal;border-radius: 4px;}
.property .row{float:right;width:100%;}
.property .row div{float:right;margin: 0 0 10px;padding: 0 1%;width:73%;background: #eee;border-radius: 4px;}

.more_products{
    width: 100%;
    display: flex    ;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    overflow: hidden;
    padding: 15px 0;
    margin: 0 0 30px;
    text-align: justify;
    line-height: 30px;
    box-sizing: border-box;
}

.more_products h2{
    width: 100%;
}

.more_products .product{
    width: 24%;
    padding: 5px 0.5%;
    box-sizing: border-box;
    text-align: center;
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 0 7px 0 #ccc;
}

.more_products .product img{max-width:100%;max-height: 200px;border-radius: 5px;}
.more_products .product h2{overflow:hidden;text-overflow: ellipsis;white-space: nowrap;color: #6abfed;}
.more_products .product .shortdes{overflow:hidden;text-overflow: ellipsis;white-space: nowrap;font-size:14px;}

.educations{display: none;float: right;height: auto;background: #fff;box-shadow: 0 0 7px 0 #ccc;border-radius: 10px;width: 96%;overflow: hidden;padding:15px 2% 50px;margin:0 0 30px;text-align: justify;line-height:27px;}
.education{float: right;width: 92%;margin:0 4%;border-bottom:1px dashed #ccc;}
.education .fa-graduation-cap{float: right;font-size:20px;margin: 10px 0 10px 10px;color: #0099c8;cursor: pointer;line-height: 33px;}
.education .education_title{width:80%;color: #0099c8;cursor:pointer;float:right;}
.education .view{color:#fff;cursor:pointer;float:left;margin: 17px 0 0;background: #00c3ff;padding: 0 10px;border-radius: 5px;}
.education .education_box{display:none;opacity:0;position:fixed;width:76%;height:76%;top:8%;right:10%;padding:2%;z-index:3;background:#fff;border-radius:10px;}
.education_box h3{max-height: 15%;overflow: hidden;color: #0099c8;padding: 0 0 10px;margin: 0 0 10px;border-bottom: 1px solid #ccc;}
.education_box .education_text{overflow:hidden;overflow-y:auto;height:85%;padding: 0 1% 0 2%;text-align: center;}
.education_box .education_text img{min-width:250px;max-width:500px;border-radius: 5px;box-shadow: 0 0 7px 0 #ccc;margin: 5px 0;}
.education_box .education_text p{text-align:justify;}
@media(max-width:768px){
    .single_product .header {
        width: 100%;
        padding: 0;
    }
    .single_product .header .img_box {height: fit-content;}
    .single_product .header .img_box .img {height: fit-content;}
    .single_product .ajax_imgs {width: 80%;right: 8%;}
    .single_product .ajax_imgs .big_img {width: 100%;height:220px;border-bottom: 1px solid #ddd;border-left: none;}
    .single_product .ajax_imgs .imgs {width: 98%;height:calc(100% - 290px);}
    .single_product .ajax_imgs .imgs img {height: 80px;}
    .single_product .header .details {height: fit-content;width:92%;padding: 15px 4%;margin: 15px 0 0;border-radius: 10px;}
    .single_product h1 {font-size: 16px;}
    .single_product .header .details .order_box .right {width: 96%;}
    .single_product .header .details .order_box .left {float: left;width: fit-content;margin-left: 2%;}
    .single_product .order {top: 7%;right: 7%;width: 80%;height:70%;overflow: hidden;overflow-y: auto;}
    .single_product .description {width: 100%;padding: 15px 4%;margin: 20px 0;}
    .single_product .education .fa-graduation-cap {font-size: 18px;}
    .single_product .education .education_title {width: calc(100% - 38px);font-size: 14px;text-align: right;}
    .single_product .education .view {display: none;}
    .single_product .more_products .product {width: 49%;margin-bottom: 12px;}
    .single_product .more_products .product img {height: 100px;}
    .single_product .more_products .product h2 {font-size: 13px;margin-bottom: 0;}
    .single_product .education .education_box {width: 82%;height: 70%;right: 7%;}
    .single_product .education .education_box h3 {font-size: 13px;}
    .single_product .education .education_box .education_text {height: 79%;}
    .single_product .education .education_box .education_text img {width: 100%;min-width: unset;max-width: unset;}

}