/* =====================================================
   HOME CATEGORIES
   File : assets/css/categories.css
=====================================================*/

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

.Home-Categories{

    padding:110px 0;

    background:#f7f9fc;

}


/*=====================================================
  HEADER
=====================================================*/

.Section-Header{

    max-width:760px;

    margin:0 auto 70px;

    text-align:center;

}

.Section-SubTitle{

    display:inline-block;

    padding:10px 24px;

    border-radius:50px;

    background:#eef5fc;

    color:#0B5FA5;

    font-size:15px;

    font-weight:600;

    margin-bottom:20px;

}

.Section-Title{

    margin-bottom:20px;

    color:#1d3557;

    font-size:46px;

    font-weight:800;

}

.Section-Description{

    color:#777;

    font-size:18px;

    line-height:1.9;

}


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

.Categories-Grid{

    display:grid;

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

    gap:30px;

}


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

.Category-Card{

    position:relative;

    display:block;

    height:340px;

    overflow:hidden;

    border-radius:24px;

    text-decoration:none;

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

}


.Category-Image{

    width:100%;

    height:100%;

}


.Category-Image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:transform .6s;

}


.Category-Card:hover .Category-Image img{

    transform:scale(1.10);

}


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

.Category-Overlay{

    position:absolute;

    inset:auto 0 0 0;

    padding:35px;

    background:linear-gradient(
        to top,
        rgba(5,25,45,.92),
        rgba(5,25,45,.10)
    );

}


.Category-Overlay h3{

    color:#ffffff;

    font-size:28px;

    margin-bottom:10px;

}


.Category-Overlay span{

    color:rgba(255,255,255,.90);

    font-size:15px;

    line-height:1.7;

}


/*=====================================================
  HOVER
=====================================================*/

.Category-Card:hover{

    transform:translateY(-8px);

    transition:.35s;

}


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

@media (max-width:991px){

    .Categories-Grid{

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

    }

    .Section-Title{

        font-size:38px;

    }

}


@media (max-width:768px){

    .Home-Categories{

        padding:80px 0;

    }

    .Categories-Grid{

        grid-template-columns:1fr;

    }

    .Category-Card{

        height:300px;

    }

    .Section-Header{

        margin-bottom:45px;

    }

    .Section-Title{

        font-size:32px;

    }

    .Section-Description{

        font-size:16px;

    }

}


@media (max-width:480px){

    .Category-Card{

        height:260px;

    }

    .Category-Overlay{

        padding:25px;

    }

    .Category-Overlay h3{

        font-size:22px;

    }

}