@import url("../css/_intro-module.css");
@import url("../css/_split-banner.css");
@import url("../css/_common-cta-section.css");


.intro-module {padding: 60px 0 70px;}
.product-section hr{margin: 0;}
.product-main{ padding: 92px 0 100px;}
.product-row{overflow: hidden;}
.product-list{padding: 50px 70px 45px 60px; position: relative; text-align: center;}
.product-thumb{margin-bottom: 26px;}
.product-thumb img{width: 168px; height: 168px; border-radius: 50%;}
.product-list h5{ margin-bottom: 12px;}
.product-list .number{color: var(--text-violetblue); font-size: 1.313rem; font-weight: bold; margin-bottom: 10px;}
.product-list .blue{color: var(--text-violetblue);}

.product-sort{margin-bottom: 64px;}
.category-title{font-size: 2.25rem; font-weight: bold;}
.category-dropdown{flex: 1;}

.blog_more{text-align: center;}
.btn-primary {margin: 50px 0 0; text-align: center;} 




/* media starts here */
@media only screen and (min-width: 768px){
    .product-list::before{display: block; position: absolute; left: 0; top: 0; background-image: radial-gradient(circle at 1px, #C8CCCD 1.25px, rgba(255,255,255,0) 1px); background-position: 0 0; background-size:11px 2px; background-repeat: repeat-x; width: 100%; height: 2px; vertical-align: middle; border: 0 none; content:"";}
    .product-list::after{display: block; position: absolute; right: 0; top: 0; background-image: radial-gradient(circle at 1px, #C8CCCD 1.25px, rgba(255,255,255,0) 1px); background-position: 0 0; background-size: 2px 11px; background-repeat: repeat-y; width: 2px; height: 100%; vertical-align: middle; border: 0 none; content:"";}
}

@media only screen and (min-width: 1024px){
    
    .product-list{flex: 0 0 25%;}
    span:first-child .product-list:nth-child(-n+4)::before{display: none;}
    .product-list:nth-child(4n+4)::after{display: none;}
    span:first-child .product-list:nth-child(-n+4) {padding-top: 0;}
    span:last-child .product-list:nth-last-child(-n+4){padding-bottom: 0;}
    .product-sort{gap: 20px; align-items: center;}
    .category-title{flex: 0 0 250px;}
    .category-form{flex: 1; align-items: flex-end; justify-content: flex-end; gap: 22px;}
    .frm_field {flex: 1; max-width: 284px;}
    
}
@media only screen and (max-width: 1299px) and (min-width: 1024px){
    .product-main { padding: 82px 0 100px; }
    .product-list{padding:50px 30px 50px;}
    span:last-child .product-list:nth-last-child(-n+4){padding-bottom: 0;}
}
@media only screen and (max-width: 1023px) and (min-width: 768px){
    .product-list{flex: 0 0 50%;}
    span:first-child  .product-list:nth-child(-n+2){padding-top: 0;}
    span:first-child .product-list:nth-child(-n+2)::before{display: none;}
    .product-list:nth-child(even)::after{display: none;}
    span:last-child  .product-list:nth-last-child(-n+2){padding-bottom: 0;}
    .product-sort{gap: 20px; align-items: center;}
    .category-title{flex: 0 0 250px;}
    .category-form{flex: 1; align-items: flex-end; justify-content: flex-end; gap: 22px;}
    .frm_field {flex: 1; max-width: 284px;}
}
@media only screen and (max-width: 767px) and (min-width: 200px){
    .product-main{padding: 50px 0 60px;}
    .product-row{gap: 30px; padding-bottom: 27px;} 
    .product-list{flex: 0 0  calc(50% - 16px); padding: 0 0 30px;}
    .product-list h5{font-size: 1.063rem;}
    .product-list .number{margin-bottom: 0;}
    .product-thumb img{width: 120px; height: 120px;}
    .product-sort{display: block; margin-bottom: 50px;}
    .category-title{margin-bottom: 18px;}
    .frm_field{margin-bottom: 20px; width: 100%;}
    .frm_field:last-child{margin-bottom: 0;}
    .btn-primary {margin: 0;}
    .intro-module{padding: 45px 0 58px;}
    

}