/* CSS Document */



/* =========================================================
   FEATURED BLOGS
========================================================= */

.blogs-sec-01 {
    position: relative;
	padding-top: 0rem;
    padding-bottom: 2rem;
    overflow: hidden;
    background: var(--color-01);
}


/* =========================================================
   FEATURED BLOG CARD
========================================================= */

.featured-blog {
    position: relative;
    background: var(--color-03);
    overflow: hidden;
}

.featured-blog + .featured-blog {
    margin-top: 2rem;
}


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

.featured-blog-image {
    position: relative;
    height: 100%;
    min-height: 560px;
    overflow: hidden;
}

.featured-blog-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;

    transition: transform .7s ease;
}

.featured-blog:hover .featured-blog-image img {
    transform: scale(1.04);
}


/* =========================================================
   DECORATIVE CORNER
========================================================= */

.featured-blog-accent {
    position: absolute;

    right: -60px;
    bottom: 45px;

    width: 110px;
    height: 110px;

    background: var(--color-05);

    transform: rotate(45deg);
}


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

.featured-blog-content {
    min-height: 560px;
    height: 100%;

    padding: 5rem;

    color: var(--color-01);

    display: flex;
    flex-direction: column;
    justify-content: center;
}


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

.blog-badge {
    display: inline-block;
    width: fit-content;

    padding: 5px 12px;

    background: var(--color-04);
    color: var(--color-01);

    font-size: 13px;
    font-weight: 500;

    letter-spacing: 1px;
}


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

.featured-blog-content h4 {
    margin-block: 2rem;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.featured-blog-content p {
    max-width: 800px;
    margin-bottom: 0;
}


/* =========================================================
   READ MORE
========================================================= */

.blog-read-btn {
    align-self: flex-start;

    margin-top: 1.5rem;

    border: 0;
}


/* Keep arrow spacing */

.blog-read-btn span {
    margin-left: 15px;
}


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

@media (max-width: 991.98px) {

    .blogs-sec-01 {
        padding-block: 5rem;
    }

    .featured-blog-image {
        min-height: 400px;
    }

    .featured-blog-content {
        min-height: auto;
        padding: 3rem;
    }

}


@media (max-width: 767.98px) {

    .blogs-sec-01 {
        padding-block: 4rem;
    }

    .featured-blog-image {
        min-height: 300px;
    }

    .featured-blog-accent {
        width: 70px;
        height: 70px;

        right: -30px;
        bottom: 25px;
    }

    .featured-blog-content {
        padding: 2.5rem 24px;
    }

}


@media (max-width: 480px) {

    .featured-blog-content {
        padding: 2rem 24px;
    }

}











/* =========================================================
   NEWS / MEDIA PRESENCE
========================================================= */

.news-sec-01 { position: relative; padding-block: 4rem; background: #f7f7f7; overflow: hidden;}

.news-heading-row { margin-bottom: 5rem; margin-inline:0px;}

.news-heading-row h2 { margin: 0;}

/* News Grid */
.news-grid { row-gap: 3rem;}

.news-grid > div { display: flex;}


/* News Card */

.news-card { height: 100%; width: 100%; background: var(--color-01); position: relative; overflow: hidden; transition: transform .4s ease, box-shadow .4s ease; display: flex; flex-direction: column;}

.news-card:hover { transform: translateY(-8px); box-shadow: 0 20px 50px rgba(0,0,0,.10);}

/* Image */
.news-image { height: 300px; position: relative; overflow: hidden;}

.news-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease;}

.news-card:hover .news-image img { transform: scale(1.06);}

/* Corner */
.news-corner { position: absolute; right: -44px; bottom: -42px; width: 80px; height: 80px; background: var(--color-05); transform: rotate(45deg);}

/* Content */
.news-content {
    padding: 2rem 2rem 2.5rem; max-height: 310px; height: 100%; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;
}

.news-category {
    /* display: inline-block;*/ width: fit-content; padding: 5px 12px; background: var(--color-03); color: var(--color-01); font-size: 11px; 
	letter-spacing: 1px; font-weight: 500; display: none;
}

.news-content h3 { margin-block: 1.5rem 1rem; }

.news-content p { font-size: 16px; line-height: 1.45; margin-bottom: 2rem;}

.news-link {
    display: inline-flex; align-items: center; color: var(--color-04); font-size: 16px; font-weight: 500; border-bottom: 1px solid var(--color-04); 
	padding-bottom: 4px; transition: .3s ease;     gap: 0.5rem;
}

.news-link:hover { color: var(--color-03); border-color: var(--color-03);}








/* =========================================================
   SOCIAL PRESENCE
========================================================= */

.social-sec-01 {
    position: relative;
    padding-bottom: 4rem;
    background: #f7f7f7;
    overflow: hidden;
}

.social-heading-row {
    margin-bottom: 4rem; margin-inline: 0px;
}

.social-heading-row h2 {
    margin: 0;
}

/* Grid */

.social-grid {
    row-gap: 2rem;
}

.social-grid > div {
    display: flex;
}

/* Card */

.social-card {
    width: 100%;
    position: relative;
    overflow: hidden;
    background: #eaeaea;
}

/* Image */

/*
.social-image {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    color: #fff;
}

.social-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s cubic-bezier(.22, 1, .36, 1);
}
*/


.social-image {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    color: #fff;
}

.social-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform .6s ease;
}




/* Hover Overlay */

.social-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 2rem;
    gap: 1rem;
    color: #fff;
    background: linear-gradient(
        0deg,
        rgba(0, 0, 0, .65) 0%,
        rgba(0, 0, 0, .12) 55%,
        transparent 100%
    );
    opacity: 0;
    transition: opacity .4s ease;
}

.social-overlay-text {
    font-size: 16px;
    font-weight: 500;
}

.social-overlay-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 50%;
    font-size: 22px;
    transition: transform .3s ease;
}

/* Hover Effects */

.social-card:hover .social-image img {
    transform: scale(1.05);
}

.social-card:hover .social-overlay,
.social-image:focus-visible .social-overlay {
    opacity: 1;
}

.social-card:hover .social-overlay-icon {
    transform: translate(3px, -3px);
}





.social-grid {
    row-gap: 2rem;
}

.social-grid > div {
    display: flex;
}

.social-card {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.social-image {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    color: #fff;
}

.social-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    transition: transform .6s ease;
}

@media (max-width: 575.98px) {
    .social-grid {
        row-gap: 1rem;
    }
}








/* Mobile */

@media (max-width: 767px) {

    .social-sec-01 {
        padding-block: 5rem;
    }

    .social-heading-row {
        margin-bottom: 2.5rem;
    }

    .social-grid {
        row-gap: 1.5rem;
    }

/*
    .social-image {
        aspect-ratio: 4 / 3;
    }
*/

    /* Keep the link indication visible on touch devices */
    .social-overlay {
        opacity: 1;
        padding: 1.25rem;
    }

    .social-overlay-icon {
        width: 36px;
        height: 36px;
    }

}








@media(max-width:1440px){
	.blogs-sec-01 {margin-top: 2rem;}
	
	.news-heading-row { margin-bottom: 3rem; }
	.news-content {max-height: 380px;}
	.news-grid { row-gap: 2.5rem;}
	
	.social-heading-row {margin-bottom: 3rem;}
}

@media(max-width:1366px){
	.news-image {height: 400px;}
	.news-content { max-height: 350px; }
}


@media (max-width: 991.98px) {

    .blogs-sec-01,.news-sec-01 { padding-block: 1rem; }
    .featured-blog-image { min-height: 400px; }
    .featured-blog-content { min-height: auto; padding: 3rem; }
    .featured-blog-content h4 {/* font-size: 3rem;*/}
    .news-heading-row { margin-bottom: 3rem;}
/*    .news-image { height: 280px;}*/
	
	.news-content { max-height: 260px;}

}


@media (max-width: 767.98px) {

    .blogs-sec-01{ padding-block: 4rem; }
    .news-sec-01 { padding-block: 4rem; }
    .featured-blog-image { min-height: 300px;}
    .featured-blog-accent { width: 70px; height: 70px; right: -30px; bottom: 25px; }
    .featured-blog-content { padding: 2.5rem 24px;}

    .featured-blog-content h4 {/*  font-size: 2.4rem;*/}

    .modal-blog-image { height: 280px; }
    .modal-blog-content { padding: 3rem 24px;}
    .modal-blog-content h2 { font-size: 2.5rem; }
    .blog-highlight { padding: 2rem; margin-block: 3rem; }
    .news-grid {row-gap: 2rem; }
    .news-image { height: 240px;}

}


@media (max-width: 480px) {
	.blogs-sec-01 { padding-block: 0rem;}
    .news-sec-01 { padding-block: 2rem;}
	.news-heading-row {margin-bottom: 1.5rem; margin-inline:0px;}
    .featured-blog-content { padding: 2rem 24px; }

    .featured-blog-content h4 {/*  font-size: 2rem;*/ margin-top: 2rem; margin-bottom: 1.5rem;}

    .news-content { padding: 1.5rem 1.5rem 2rem;  max-height: 320px;}
    .news-content h3 {/* font-size: 1.5rem;*/}

    .news-image { height: 220px; }
    .blog-modal-close { right: 15px;  top: 15px; }

	.featured-blog-accent { right: -40px;}
	
	.social-sec-01 { padding-top: 0rem; padding-bottom: 2rem; }
	.social-heading-row {margin-bottom: 1.5rem;}

}

	
@media (max-width: 390px) {
    .news-image { height: 170px;}
}


@media (max-width: 375px) {
	.news-content {max-height: 360px;}
	.featured-blog-accent {  right: -50px; }
	.news-corner {right: -60px;}
}

@media(max-width:360px){
/*	.news-image img {object-fit: contain;}*/
/*	.news-image {height: 170px;}*/
}

@media (max-width: 320px) {
	.news-content { max-height: 400px; }
    .news-image { height: 150px;}
}