/*=========================================
HERO
=========================================*/

.categories-hero{
padding:120px 0 90px;
background:#faf8f5;
position:relative;
overflow:hidden;
}

.categories-hero::before{
content:"";
position:absolute;
right:-180px;
top:-180px;
width:420px;
height:420px;
border-radius:50%;
background:rgba(201,143,114,.08);
}

.categories-hero::after{
content:"";
position:absolute;
left:-120px;
bottom:-120px;
width:260px;
height:260px;
border-radius:50%;
background:rgba(201,143,114,.05);
}

/*=========================================
BREADCRUMB
=========================================*/

.categories-breadcrumb{
margin-bottom:22px;
font-size:14px;
color:#777;
}

.categories-breadcrumb a{
color:#555;
text-decoration:none;
transition:.3s;
}

.categories-breadcrumb a:hover{
color:#c98f72;
}

.categories-breadcrumb span{
margin:0 10px;
}

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

.categories-badge{
display:inline-block;
padding:8px 18px;
background:#f2e6dd;
color:#c98f72;
border-radius:40px;
font-size:12px;
font-weight:600;
letter-spacing:2px;
text-transform:uppercase;
margin-bottom:25px;
}

/*=========================================
TITLE
=========================================*/

.categories-hero h1{
font-family:'Cormorant Garamond',serif;
font-size:64px;
line-height:1.1;
margin-bottom:25px;
color:#222;
}

.categories-hero p{
font-size:17px;
line-height:1.9;
color:#666;
max-width:620px;
}

/*=========================================
TOTAL BOX
=========================================*/

.category-total-box{
background:#fff;
padding:50px 30px;
border-radius:20px;
text-align:center;
box-shadow:0 20px 60px rgba(0,0,0,.08);
}

.category-total-box h2{
font-family:'Cormorant Garamond',serif;
font-size:70px;
color:#c98f72;
margin:0;
line-height:1;
}

.category-total-box span{
display:block;
margin-top:15px;
font-size:15px;
letter-spacing:2px;
text-transform:uppercase;
color:#666;
}

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

.category-search{
padding:70px 0;
background:#fff;
}

.search-box{
max-width:720px;
margin:auto;
position:relative;
}

.search-box input{
width:100%;
height:64px;
border:none;
border-radius:60px;
padding:0 65px 0 28px;
font-size:16px;
background:#faf8f5;
box-shadow:0 12px 35px rgba(0,0,0,.05);
transition:.35s;
}

.search-box input:focus{
outline:none;
background:#fff;
box-shadow:0 0 0 4px rgba(201,143,114,.15);
}

.search-box i{
position:absolute;
right:28px;
top:50%;
transform:translateY(-50%);
font-size:20px;
color:#c98f72;
pointer-events:none;
}

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

@media(max-width:991px){

.categories-hero{
padding:90px 0 70px;
}

.categories-hero h1{
font-size:48px;
}

.category-total-box{
margin-top:40px;
}

.category-search{
padding:50px 0;
}

}

@media(max-width:767px){

.categories-hero{
padding:70px 0 50px;
}

.categories-hero h1{
font-size:36px;
}

.categories-hero p{
font-size:15px;
}

.category-total-box{
padding:35px 20px;
}

.category-total-box h2{
font-size:52px;
}

.search-box input{
height:56px;
font-size:15px;
padding:0 55px 0 20px;
}

.search-box i{
right:22px;
font-size:18px;
}

}

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

.all-categories{
padding:40px 0 110px;
background:#faf8f5;
}

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

.category-card{
background:#fff;
border-radius:20px;
overflow:hidden;
box-shadow:0 15px 45px rgba(0,0,0,.06);
transition:.35s;
height:100%;
display:flex;
flex-direction:column;
}

.category-card:hover{
transform:translateY(-10px);
box-shadow:0 25px 60px rgba(0,0,0,.12);
}

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

.category-image{
display:block;
position:relative;
height:240px;
overflow:hidden;
}

.category-image img{
width:100%;
height:100%;
object-fit:cover;
transition:.5s;
}

.category-card:hover .category-image img{
transform:scale(1.08);
}

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

.category-overlay{
position:absolute;
left:0;
right:0;
bottom:0;
padding:18px 22px;
background:linear-gradient(to top,rgba(0,0,0,.80),rgba(0,0,0,.05));
display:flex;
justify-content:flex-end;
}

.category-overlay span{
display:inline-block;
background:#c98f72;
color:#fff;
padding:7px 14px;
border-radius:30px;
font-size:13px;
font-weight:600;
}

/*=========================================
CONTENT
=========================================*/

.category-content{
padding:30px;
display:flex;
flex-direction:column;
flex:1;
}

.category-meta{
display:flex;
align-items:center;
gap:8px;
font-size:13px;
font-weight:600;
letter-spacing:1px;
text-transform:uppercase;
color:#c98f72;
margin-bottom:15px;
}

.category-meta i{
font-size:14px;
}

.category-content h3{
margin-bottom:18px;
}

.category-content h3 a{
font-family:'Cormorant Garamond',serif;
font-size:34px;
line-height:1.2;
color:#222;
text-decoration:none;
transition:.3s;
}

.category-content h3 a:hover{
color:#c98f72;
}

.category-content p{
font-size:15px;
line-height:1.9;
color:#666;
margin-bottom:25px;
flex:1;
}

/*=========================================
FOOTER
=========================================*/

.category-footer{
display:flex;
justify-content:space-between;
align-items:center;
border-top:1px solid #ececec;
padding-top:20px;
}

.post-count{
font-size:14px;
color:#777;
}

.post-count strong{
display:block;
font-size:24px;
font-weight:700;
color:#222;
line-height:1;
}

.category-btn{
display:inline-flex;
align-items:center;
gap:8px;
padding:12px 22px;
background:#222;
color:#fff;
border-radius:40px;
text-decoration:none;
font-size:14px;
font-weight:600;
transition:.35s;
}

.category-btn:hover{
background:#c98f72;
color:#fff;
transform:translateX(4px);
}

.category-btn i{
transition:.3s;
}

.category-btn:hover i{
transform:translateX(4px);
}

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

@media(max-width:991px){

.all-categories{
padding:30px 0 80px;
}

.category-image{
height:220px;
}

.category-content{
padding:24px;
}

.category-content h3 a{
font-size:30px;
}

}

@media(max-width:767px){

.all-categories{
padding:20px 0 60px;
}

.category-image{
height:210px;
}

.category-content{
padding:20px;
}

.category-content h3 a{
font-size:28px;
}

.category-content p{
font-size:14px;
}

.category-footer{
flex-direction:column;
align-items:flex-start;
gap:18px;
}

.category-btn{
width:100%;
justify-content:center;
}

}

/*=========================================
CTA SECTION
=========================================*/

.categories-cta{
padding:110px 0;
background:#fff;
}

.categories-cta-box{
background:linear-gradient(135deg,#1f1f1f,#353535);
padding:80px 60px;
border-radius:24px;
text-align:center;
position:relative;
overflow:hidden;
box-shadow:0 30px 80px rgba(0,0,0,.18);
}

.categories-cta-box::before{
content:"";
position:absolute;
top:-120px;
right:-120px;
width:260px;
height:260px;
background:rgba(255,255,255,.05);
border-radius:50%;
}

.categories-cta-box::after{
content:"";
position:absolute;
left:-80px;
bottom:-80px;
width:180px;
height:180px;
background:rgba(255,255,255,.04);
border-radius:50%;
}

.categories-cta-box>*{
position:relative;
z-index:2;
}

.categories-cta-box span{
display:inline-block;
font-size:12px;
font-weight:600;
letter-spacing:3px;
text-transform:uppercase;
color:#c98f72;
margin-bottom:18px;
}

.categories-cta-box h2{
font-family:'Cormorant Garamond',serif;
font-size:56px;
color:#fff;
margin-bottom:20px;
line-height:1.2;
}

.categories-cta-box p{
max-width:700px;
margin:0 auto 35px;
font-size:17px;
line-height:1.9;
color:#d9d9d9;
}

.categories-cta-box .cta-buttons{
display:flex;
justify-content:center;
gap:18px;
flex-wrap:wrap;
}

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

.categories-cta .btn-primary-custom{
background:#c98f72;
}

.categories-cta .btn-primary-custom:hover{
background:#b67a5f;
}

.categories-cta .btn-outline-custom{
border-color:#fff;
color:#fff;
}

.categories-cta .btn-outline-custom:hover{
background:#fff;
color:#222;
}

/*=========================================
CARD ANIMATION
=========================================*/

.category-card{
animation:fadeUp .6s ease both;
}

.category-item:nth-child(2) .category-card{
animation-delay:.1s;
}

.category-item:nth-child(3) .category-card{
animation-delay:.2s;
}

.category-item:nth-child(4) .category-card{
animation-delay:.3s;
}

.category-item:nth-child(5) .category-card{
animation-delay:.4s;
}

.category-item:nth-child(6) .category-card{
animation-delay:.5s;
}

/*=========================================
ANIMATION
=========================================*/

@keyframes fadeUp{

0%{
opacity:0;
transform:translateY(40px);
}

100%{
opacity:1;
transform:translateY(0);
}

}

/*=========================================
SECTION SPACING
=========================================*/

.categories-hero,
.category-search,
.all-categories,
.categories-cta{
position:relative;
overflow:hidden;
}

/*=========================================
SCROLLBAR
=========================================*/

::-webkit-scrollbar{
width:8px;
}

::-webkit-scrollbar-thumb{
background:#c98f72;
border-radius:20px;
}

::-webkit-scrollbar-track{
background:#f5f5f5;
}

/*=========================================
TEXT SELECTION
=========================================*/

::selection{
background:#c98f72;
color:#fff;
}

/*=========================================
TABLET
=========================================*/

@media(max-width:991px){

.categories-cta{
padding:80px 0;
}

.categories-cta-box{
padding:55px 40px;
}

.categories-cta-box h2{
font-size:42px;
}

.categories-cta-box p{
font-size:16px;
}

}

/*=========================================
MOBILE
=========================================*/

@media(max-width:767px){

.categories-cta{
padding:60px 0;
}

.categories-cta-box{
padding:35px 25px;
border-radius:18px;
}

.categories-cta-box h2{
font-size:30px;
}

.categories-cta-box p{
font-size:15px;
margin-bottom:25px;
}

.categories-cta-box .cta-buttons{
flex-direction:column;
}

.categories-cta-box .cta-buttons a{
width:100%;
justify-content:center;
}

}

/*=========================================
LARGE DESKTOP
=========================================*/

@media(min-width:1400px){

.categories-hero h1{
font-size:70px;
}

.category-content h3 a{
font-size:30px;
}

.categories-cta-box h2{
font-size:64px;
}

}