/*==================================
 Crafted With Intention
===================================*/

.cis-section{
    width:100%;
    padding:90px 60px;
    background:#2d1d18;
    margin:0;
}

.cis-container{
    width:100%;
    max-width:100%;
    margin:0;
}

.cis-title{
    text-align:center;
    color:#fff;
    font-size:48px;
    font-weight:200;
    line-height:1.2;
    margin:0 0 70px;
    font-family:Georgia,serif;
}

.cis-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:40px;
}

.cis-item{
    text-align:center;
    transition:.35s;
    padding:10px;
}

.cis-icon{
    width:60px;
    height:60px;
    margin:0 auto 28px;
    display:flex;
    justify-content:center;
    align-items:center;
}

.cis-icon img{
    max-width:100%;
    max-height:100%;
    object-fit:contain;
    transition:.4s;
}

.cis-item h3{
    color:#d4a55a;
    font-size:19px;
    font-weight:400;
    margin-bottom:18px;
    font-family:Georgia,serif;
}

.cis-item p{
    color:#c5b6aa;
    font-size:15px;
    line-height:2;
    max-width:290px;
    margin:auto;
}

.cis-item:hover{
    transform:translateY(-8px);
}

.cis-item:hover .cis-icon img{
    transform:scale(1.12) rotate(5deg);
}

.cis-item:hover h3{
    color:#f1c87a;
}

/*=========================
 Tablet
==========================*/

@media(max-width:1024px){

.cis-grid{

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

gap:45px;

}

.cis-title{

font-size:46px;

margin-bottom:55px;

}

.cis-item h3{

font-size:24px;

}

}

/*=========================
 Mobile
==========================*/

@media(max-width:768px){

.cis-section{

padding:60px 18px;

}

.cis-grid{

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

gap:30px 20px;

}

.cis-title{

font-size:34px;

margin-bottom:45px;

}

.cis-icon{

width:45px;

height:45px;

margin-bottom:18px;

}

.cis-item h3{

font-size:18px;

line-height:1.4;

margin-bottom:12px;

}

.cis-item p{

font-size:14px;

line-height:1.8;

}

}

/*=========================
 Small Mobile
==========================*/

@media(max-width:480px){

.cis-section{

padding:45px 15px;

}

.cis-grid{

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

gap:25px 15px;

}

.cis-title{

font-size:28px;

}

.cis-icon{

width:40px;

height:40px;

}

.cis-item h3{

font-size:16px;

}

.cis-item p{

font-size:13px;

line-height:1.7;

}

}

.cis-item{

opacity:0;

transform:translateY(40px);

transition:.8s;

}

.cis-item.show{

opacity:1;

transform:translateY(0);

}

.cis-preview{

margin-top:10px;

border-radius:8px;

}