/*====================================================

PRODUCTS.CSS
PART - 1

AMROS PROJECTS LLP

Sections

1. Banner
2. Breadcrumb
3. Sidebar
4. Search
5. Categories
6. Product Grid

======================================================*/


/*=========================================
PAGE BANNER
=========================================*/

.product-banner{

position:relative;

height:480px;

display:flex;

align-items:center;

overflow:hidden;

padding:0;

}

.product-banner-bg{

position:absolute;

left:0;

top:0;

width:100%;

height:100%;

z-index:1;

}

.product-banner-bg img{

width:100%;

height:100%;

object-fit:cover;

transition:.6s;

}

.product-banner:hover img{

transform:scale(1.08);

}

.product-banner-overlay{

position:absolute;

left:0;

top:0;

width:100%;

height:100%;

background:linear-gradient(90deg,
rgba(8,28,52,.93),
rgba(8,28,52,.58));

z-index:2;

}

.product-banner-content{

position:relative;

z-index:5;

color:#fff;

padding-top:80px;

}

.product-banner-content span{

display:inline-block;

padding:8px 24px;

background:rgba(255,255,255,.12);

backdrop-filter:blur(18px);

border-radius:50px;

margin-bottom:12px;

font-size:13px;

font-weight:700;

letter-spacing:1px;

}

.product-banner-content h1{

font-size:44px;

font-weight:800;

color:#fff;

margin-bottom:20px;

}

.product-banner-content p{

max-width:620px;

font-size:18px;

color:#E8EEF6;

}

.product-breadcrumb{

display:flex;

gap:12px;

margin-top:25px;

}

.product-breadcrumb li{

color:#fff;

}

.product-breadcrumb a{

color:#6BC1FF;

font-weight:600;

}



/*=========================================
PRODUCT SECTION
=========================================*/

.product-page{

padding:60px 0;

background:#F8FBFD;

}



/*=========================================
SIDEBAR
=========================================*/

.product-sidebar {
  position: sticky;
  top: 120px;
  max-height: calc(100vh - 150px);
  overflow-y: auto;
  scrollbar-width: thin;
}
.product-sidebar::-webkit-scrollbar {
  width: 6px;
}
.product-sidebar::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 3px;
}
@media (max-width: 991px) {
  .product-sidebar {
    position: static;
    max-height: none;
    overflow-y: visible;
  }
}

.sidebar-box{

background:#fff;

padding:35px;

border-radius:30px;

margin-bottom:30px;

box-shadow:0 18px 45px rgba(0,0,0,.05);

}

.sidebar-title{

font-size:24px;

margin-bottom:25px;

position:relative;

padding-bottom:15px;

}

.sidebar-title::after{

content:"";

position:absolute;

left:0;

bottom:0;

width:60px;

height:3px;

background:#005BAA;

border-radius:20px;

}



/*=========================================
SEARCH
=========================================*/

.search-box{

position:relative;

}

.search-box input{

width:100%;

height:50px;

padding:0 60px 0 22px;

border-radius:60px;

border:1px solid #E5EDF5;

font-size:15px;

transition:.35s;

}

.search-box input:focus{

border-color:#005BAA;

}

.search-box button{

position:absolute;

right:6px;

top:5px;

width:40px;

height:40px;

border:none;

background:#005BAA;

border-radius:50%;

color:#fff;

}



/*=========================================
CATEGORY
=========================================*/

.category-list{

margin:0;

padding:0;

list-style:none;

}

.category-list li{

margin-bottom:14px;

}

.category-list li:last-child{

margin-bottom:0;

}

.category-list a{

display:flex;

justify-content:space-between;

align-items:center;

padding:16px 20px;

background:#F5F9FC;

border-radius:18px;

color:#344054;

font-weight:600;

transition:.35s;

}

.category-list a:hover{

background:#005BAA;

color:#fff;

padding-left:28px;

}

.category-list span{

font-size:13px;

font-weight:700;

}



/*=========================================
PRODUCT GRID
=========================================*/

.product-grid{

margin-left:10px;

}

.product-grid-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:40px;

}

.product-grid-header h3{

font-size:26px;

margin:0;

}

.product-sort{

display:flex;

align-items:center;

gap:15px;

}

.product-sort select{

width:160px;

height:40px;

padding:0 12px;

border-radius:50px;

border:1px solid #E5EDF5;

background:#fff;

}

.product-sort select:focus{

outline:none;

border-color:#005BAA;

}



/*=========================================
GRID
=========================================*/

.product-row{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:30px;

}

/*====================================================

PRODUCTS.CSS
PART - 2

Sections

1. Product Card
2. Product Image
3. Product Badge
4. Product Info
5. CTA Button
6. Hover Effects
7. Rating
8. Pagination

======================================================*/


/*=========================================
PRODUCT CARD
=========================================*/

.product-card{

position:relative;

background:#fff;

border-radius:30px;

overflow:hidden;

box-shadow:0 20px 50px rgba(0,0,0,.06);

transition:.45s;

height:100%;

display:flex;

flex-direction:column;

}

.product-card:hover{

transform:translateY(-12px);

box-shadow:0 35px 80px rgba(0,0,0,.12);

}



/*=========================================
IMAGE
=========================================*/

.product-image{

position:relative;

overflow:hidden;

height:280px;

}

.product-image img{

width:100%;

height:100%;

object-fit:cover;

transition:.6s;

}

.product-card:hover .product-image img{

transform:scale(1.08);

}



/*=========================================
OVERLAY
=========================================*/

.product-overlay{

position:absolute;

left:0;

top:0;

width:100%;

height:100%;

background:linear-gradient(
180deg,
rgba(0,0,0,0),
rgba(0,0,0,.55)
);

opacity:0;

transition:.35s;

display:flex;

align-items:center;

justify-content:center;

}

.product-card:hover .product-overlay{

opacity:1;

}



/*=========================================
QUICK VIEW
=========================================*/

.quick-view{

width:58px;

height:58px;

display:flex;

align-items:center;

justify-content:center;

background:#fff;

border-radius:50%;

color:#005BAA;

font-size:22px;

transition:.35s;

}

.quick-view:hover{

background:#005BAA;

color:#fff;

transform:scale(1.1);

}



/*=========================================
BADGE
=========================================*/

.product-badge{

position:absolute;

top:20px;

left:20px;

padding:9px 18px;

background:linear-gradient(135deg,#005BAA,#0A84FF);

color:#fff;

font-size:12px;

font-weight:700;

border-radius:40px;

letter-spacing:.5px;

z-index:5;

}

.product-badge.new{

background:linear-gradient(135deg,#16A34A,#22C55E);

}

.product-badge.hot{

background:linear-gradient(135deg,#E53935,#F97316);

}

.product-badge.best{

background:linear-gradient(135deg,#7C3AED,#9333EA);

}



/*=========================================
PRODUCT BODY
=========================================*/

.product-body{

padding:20px;

display:flex;

flex-direction:column;

flex:1;

}

.product-category{

font-size:13px;

font-weight:700;

text-transform:uppercase;

letter-spacing:1px;

color:#005BAA;

margin-bottom:10px;

}

.product-title{

font-size:24px;

line-height:1.3;

margin-bottom:15px;

}

.product-title a{

color:#081C34;

transition:.35s;

}

.product-title a:hover{

color:#005BAA;

}

.product-description{

font-size:15px;

line-height:1.8;

color:#667085;

margin-bottom:25px;

}



/*=========================================
FEATURE LIST
=========================================*/

.product-features{

margin:0;

padding:0;

list-style:none;

margin-bottom:28px;

}

.product-features li{

display:flex;

align-items:center;

gap:10px;

margin-bottom:12px;

font-size:15px;

font-weight:500;

color:#fff;

}

.product-features li:last-child{

margin-bottom:0;

}

.product-features i{

color:#16A34A;

font-size:18px;

}



/*=========================================
RATING
=========================================*/

.product-rating{

display:flex;

align-items:center;

justify-content:space-between;

margin-bottom:25px;

}

.rating-stars{

display:flex;

gap:4px;

}

.rating-stars i{

color:#F59E0B;

font-size:15px;

}

.rating-text{

font-size:14px;

font-weight:600;

color:#667085;

}



/*=========================================
BOTTOM
=========================================*/

.product-bottom{

display:flex;

align-items:center;

justify-content:space-between;

margin-top:auto;

padding-top:20px;

border-top:1px solid #EEF3F7;

}



/*=========================================
BUTTON
=========================================*/

.product-btn{

display:inline-flex;

align-items:center;

gap:10px;

padding:14px 26px;

background:linear-gradient(135deg,#005BAA,#0A84FF);

color:#fff;

font-weight:700;

border-radius:50px;

transition:.35s;

}

.product-btn i{

transition:.35s;

}

.product-btn:hover{

color:#fff;

transform:translateY(-3px);

}

.product-btn:hover i{

transform:translateX(5px);

}



/*=========================================
ACTION BUTTONS
=========================================*/

.product-actions{

display:flex;

gap:10px;

}

.action-btn{

width:46px;

height:46px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:#F5F9FC;

color:#005BAA;

transition:.35s;

font-size:18px;

}

.action-btn:hover{

background:#005BAA;

color:#fff;

}



/*=========================================
PAGINATION
=========================================*/

.product-pagination{

margin-top:70px;

display:flex;

justify-content:center;

gap:14px;

}

.product-pagination a{

width:52px;

height:52px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:#fff;

border:1px solid #E7EDF5;

color:#344054;

font-weight:700;

transition:.35s;

box-shadow:0 10px 30px rgba(0,0,0,.04);

}

.product-pagination a.active,

.product-pagination a:hover{

background:#005BAA;

border-color:#005BAA;

color:#fff;

}



/*=========================================
NO PRODUCT
=========================================*/

.no-product{

background:#fff;

padding:80px 40px;

text-align:center;

border-radius:30px;

box-shadow:0 20px 50px rgba(0,0,0,.05);

}

.no-product img{

width:180px;

margin:auto;

margin-bottom:25px;

}

.no-product h3{

font-size:26px;

margin-bottom:15px;

}

.no-product p{

max-width:500px;

margin:auto;

color:#667085;

line-height:1.8;

}



/*=========================================
LOAD MORE
=========================================*/

.load-more{

margin-top:60px;

text-align:center;

}

.load-more .btn-primary-custom{

padding:18px 42px;

font-size:16px;

}

/*====================================================

PRODUCTS.CSS
PART - 3 (FINAL)

Sections

1. Product Filter
2. Product Details
3. Gallery
4. Tabs
5. Specifications
6. Downloads
7. CTA
8. Responsive

======================================================*/


/*=========================================
FILTER BAR
=========================================*/

.filter-bar{

display:flex;

justify-content:space-between;

align-items:center;

gap:20px;

padding:25px 30px;

background:#fff;

border-radius:24px;

box-shadow:0 18px 45px rgba(0,0,0,.05);

margin-bottom:45px;

}

.filter-buttons{

display:flex;

flex-wrap:wrap;

gap:12px;

}

.filter-btn{

padding:8px 16px;

border:none;

background:#F4F8FC;

border-radius:50px;

font-size:14px;

font-weight:700;

color:#344054;

transition:.35s;

cursor:pointer;

}

.filter-btn:hover,

.filter-btn.active{

background:linear-gradient(135deg,#005BAA,#0A84FF);

color:#fff;

}

.product-count{

font-size:15px;

font-weight:600;

color:#667085;

}



/*=========================================
PRODUCT DETAILS
=========================================*/

.product-details{

padding:60px 0;

background:#fff;

}

.product-gallery{

position:sticky;

top:120px;

}

.main-product-image{

overflow:hidden;

border-radius:30px;

box-shadow:0 25px 70px rgba(0,0,0,.10);

}

.main-product-image img{

width:100%;

transition:.6s;

}

.main-product-image:hover img{

transform:scale(1.08);

}

.thumbnail-gallery{

display:flex;

gap:15px;

margin-top:20px;

}

.thumbnail-gallery img{

width:100px;

height:90px;

object-fit:cover;

border-radius:18px;

cursor:pointer;

border:2px solid transparent;

transition:.35s;

}

.thumbnail-gallery img:hover,

.thumbnail-gallery img.active{

border-color:#005BAA;

transform:translateY(-5px);

}



/*=========================================
PRODUCT INFO
=========================================*/

.product-info{

padding-left:40px;

}

.product-info .product-category{

font-size:14px;

margin-bottom:15px;

}

.product-info h2{

font-size:36px;

margin-bottom:20px;

}

.product-info p{

font-size:16px;

line-height:1.9;

margin-bottom:30px;

color:#667085;

}



/*=========================================
SPECIFICATIONS
=========================================*/

.specification-table{

width:100%;

border-collapse:collapse;

margin:40px 0;

}

.specification-table tr{

border-bottom:1px solid #EEF3F7;

}

.specification-table td{

padding:18px 20px;

font-size:15px;

}

.specification-table td:first-child{

font-weight:700;

color:#081C34;

width:40%;

background:#F8FBFD;

}



/*=========================================
FEATURE GRID
=========================================*/

.feature-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:18px;

margin:35px 0;

}

.feature-item{

display:flex;

align-items:center;

gap:14px;

padding:18px;

border-radius:20px;

background:#F8FBFD;

transition:.35s;

}

.feature-item:hover{

background:#005BAA;

color:#fff;

}

.feature-item:hover i{

color:#fff;

}

.feature-item i{

font-size:22px;

color:#005BAA;

transition:.35s;

}



/*=========================================
DOWNLOAD BOX
=========================================*/

.download-box{

margin-top:40px;

padding:35px;

border-radius:28px;

background:#F8FBFD;

display:flex;

justify-content:space-between;

align-items:center;

gap:20px;

}

.download-box h4{

margin-bottom:8px;

font-size:24px;

}

.download-box p{

margin:0;

}



/*=========================================
PRODUCT TABS
=========================================*/



.product-tabs .nav{

gap:15px;

margin-bottom:35px;

}

.product-tabs .nav-link{

padding:16px 30px;

border-radius:50px;

background:#F5F9FC;

color:#081C34;

font-weight:700;

border:none;

}

.product-tabs .nav-link.active{

background:linear-gradient(135deg,#005BAA,#0A84FF);

color:#fff !important;

}

.tab-content{

background:#fff;

padding:40px;

border-radius:30px;

box-shadow:0 20px 50px rgba(0,0,0,.05);

}

.tab-content p{

line-height:1.9;

color:#667085;

}



/*=========================================
RELATED PRODUCTS
=========================================*/

.related-products{

padding:60px 0;

background:#F8FBFD;

}

.related-products .section-heading{

margin-bottom:60px;

}



/*=========================================
ENQUIRY BOX
=========================================*/

.enquiry-box{

padding:40px;

border-radius:30px;

background:linear-gradient(135deg,#005BAA,#0A84FF);

color:#fff;

margin-top:40px;

}

.enquiry-box h3{

color:#fff;

margin-bottom:15px;

}

.enquiry-box p{

color:#EAF4FF;

margin-bottom:30px;

}

.enquiry-box .btn-primary-custom{

background:#fff;

color:#005BAA;

}



/*=========================================
PRODUCT CTA
=========================================*/

.product-cta{

/* padding:100px 0; */

background:#fff;

}

.product-cta-box{

padding:70px;

border-radius:35px;

background:linear-gradient(135deg,#005BAA,#0A84FF);

text-align:center;

color:#fff;

}

.product-cta-box h2{

font-size:36px;

color:#fff;

margin-bottom:20px;

}

.product-cta-box p{

max-width:700px;

margin:0 auto 35px;

color:#EAF4FF;

}

.product-cta-box .btn-primary-custom{

background:#fff;

color:#005BAA;

}



/*=========================================
RESPONSIVE
=========================================*/

@media(max-width:991px){

.product-row{

grid-template-columns:repeat(2,1fr);

}

.filter-bar{

flex-direction:column;

align-items:flex-start;

}

.product-info{

padding-left:0;

margin-top:50px;

}

.product-gallery{

position:relative;

top:0;

}

.feature-grid{

grid-template-columns:1fr;

}

.download-box{

flex-direction:column;

text-align:center;

}

}



@media(max-width:768px){

.product-banner{

height:360px;

}

.product-banner-content{

text-align:center;

padding-top:60px;

}

.product-banner-content h1{

font-size:32px;

}

.product-row{

grid-template-columns:1fr;

}

.product-grid-header{

flex-direction:column;

align-items:flex-start;

gap:20px;

}

.product-sort{

width:100%;

}

.product-sort select{

width:100%;

}

.thumbnail-gallery{

justify-content:center;

flex-wrap:wrap;

}

.product-info h2{

font-size:26px;

}

.product-tabs .nav{

flex-wrap:wrap;

}

.product-tabs .nav-link{

width:100%;

text-align:center;

}

.tab-content{

padding:25px;

}

.product-cta-box{

padding:45px 25px;

}

.product-cta-box h2{

font-size:32px;

}

}



@media(max-width:576px){

.product-banner{

height:320px;

}

.product-banner-content h1{

font-size:30px;

}

.product-banner-content p{

font-size:15px;

}

.sidebar-box{

padding:25px;

}

.product-body{

padding:22px;

}

.product-title{

font-size:24px;

}

.product-bottom{

flex-direction:column;

gap:18px;

align-items:flex-start;

}

.product-actions{

width:100%;

justify-content:space-between;

}

.product-btn{

width:100%;

justify-content:center;

}

.download-box{

padding:25px;

}

.product-cta-box h2{

font-size:28px;

}

.product-cta-box .btn-primary-custom{

width:100%;

}

}



/*====================================================

END PRODUCTS.CSS

======================================================*/