/* Masonry Layout */

.av-masonry-grid{
    width:100%;
    margin:0 -10px;
    padding:0;
    box-sizing:border-box;
}

.av-masonry-grid::after{
    content:"";
    display:block;
    clear:both;
}

.av-masonry-item{
    float:left;
    padding:0 10px;
    margin-bottom:20px;
    box-sizing:border-box;
}

/* Desktop */

.desktop-4 .av-masonry-item{
    width:25%;
}

.desktop-5 .av-masonry-item{
    width:20%;
}

.desktop-6 .av-masonry-item{
    width:16.666667%;
}

/* Tablet */

@media (max-width:1024px){

    .tablet-2 .av-masonry-item{
        width:50%;
    }

    .tablet-3 .av-masonry-item{
        width:33.333333%;
    }

}

/* Mobile */

@media (max-width:767px){

    .mobile-1 .av-masonry-item{
        width:100%;
    }

    .mobile-2 .av-masonry-item{
        width:50%;
    }

}
/* ==========================================
   Image
========================================== */

.av-card-image{

    position:relative;

    overflow:hidden;

    line-height:0;

}


.av-card-image img{

    display:block;

    width:100%;
    height:auto;

    transition:transform .4s ease;

}


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

    transform:scale(1.02);

}


/* content compensate */

.av-card-content{

    padding:20px 20px 22px;

}

.av-card-meta{

    margin:0 0 10px;

    font-size:13px;

    color:#999;

}

.av-card-title{

    margin:0 0 12px;

    font-size:22px;
    font-weight:700;
    line-height:1.35;

}

.av-card-title a{

    color:#111;

    text-decoration:none;

}

.av-card-title a:hover{

    color:#444;

}

.av-card-excerpt{

    margin:0;

    font-size:14px;

    line-height:1.8;

    color:#777;

}







/* ==========================================
   Buttons
========================================== */

.av-card-footer{

	display:flex;
	align-items:center;
	justify-content:space-between;

	gap:12px;

	margin-top:auto;
	padding-top:24px;

}

/* ==========================================
   Common Button
========================================== */

.av-btn{

	display:flex;
	align-items:center;
	justify-content:center;

	text-decoration:none;

	border:none;
	outline:none;

	cursor:pointer;

	transition:
		background-color .35s ease,
		color .35s ease,
		transform .35s ease,
		box-shadow .35s ease;

}

/* ==========================================
   SVG
========================================== */

.av-btn svg{

	width:18px;
	height:18px;

	display:block;
	flex-shrink:0;

	transition:transform .35s ease;

}

/* ==========================================
   Download Button
========================================== */

.av-btn-download{

	display:inline-flex;
	align-items:center;
	justify-content:space-between;

	width:fit-content;

	min-width:118px;

	height:42px;

	padding:0 16px;

	border-radius:10px;

	background:#fff;
	color:#111;

	gap:12px;

	flex-shrink:0;

	border:1px solid rgba(0,0,0,.08);

	box-shadow:
		0 8px 18px rgba(0,0,0,.10);

}

.av-btn-download:hover svg{

	transform:translateX(4px);

}

.av-btn-text{

	font-size:11px;

	font-weight:700;

	letter-spacing:.35px;

	text-transform:lowercase;

	line-height:1;

	white-space:nowrap;

}

.av-btn-icon{

	display:flex;
	align-items:center;
	justify-content:center;

}

/* ==========================================
   Read Button
========================================== */

.av-btn-read{

	display:flex;
	align-items:center;
	justify-content:center;

	width:46px;
	height:46px;

	min-width:46px;
	min-height:46px;

	border-radius:50%;

	background:#fff;
	color:#111;

	border:1px solid rgba(0,0,0,.08);

	flex-shrink:0;

	box-shadow:
		0 8px 18px rgba(0,0,0,.10);

}

.av-btn-read:hover{

	transform:translateY(-2px);

	box-shadow:
		0 12px 26px rgba(0,0,0,.16);

}

.av-btn-read:hover svg{

	transform:translate(2px,-2px);

}

/* ==========================================
   Focus
========================================== */

.av-btn:focus-visible{

	outline:2px solid rgba(0,0,0,.15);

	outline-offset:4px;

}

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

@media (max-width:767px){

	.av-card-footer{

		gap:10px;

	}

	.av-btn-download{

		min-width:112px;

		height:42px;

		padding:0 16px;

		gap:12px;

	}

	.av-btn-text{

		font-size:10px;

	}

	.av-btn-read{

		width:42px;
		height:42px;

		min-width:42px;
		min-height:42px;

	}

	.av-btn svg{

		width:16px;
		height:16px;

	}

}















/* ==========================================
   Aurora Mesh Engine v3
========================================== */

.av-card{

    --av-c1:#f7f3ed;
    --av-c2:#ece7de;
    --av-c3:#ddd5ca;

    position:relative;
    overflow:hidden;
    isolation:isolate;

    background:#ffffff;

    border-radius:20px;

    padding:2px;

    transition:
        transform .35s ease,
        box-shadow .35s ease;

    box-shadow:
        0 10px 28px rgba(0,0,0,.08);

}

/* ==========================================
   Cloud Aurora Layer v2
========================================== */
/* ==========================================
   Full Cloud Aurora Spread
========================================== */

.av-card::before{

    content:"";

    position:absolute;

    inset:-35%;

    z-index:0;

    pointer-events:none;


    background:

        radial-gradient(
            ellipse at 20% 30%,
            var(--av-c1) 0%,
            transparent 75%
        ),

        radial-gradient(
            ellipse at 80% 25%,
            var(--av-c2) 0%,
            transparent 75%
        ),

        radial-gradient(
            ellipse at 50% 85%,
            var(--av-c3) 0%,
            transparent 80%
        );


    opacity:.95;

    filter:

        blur(32px)

        saturate(1.7);


    

        animation:
    avCloudMove 35s ease-in-out infinite alternate;
}



@keyframes avCloudMove{


    0%{

        transform:

            translate3d(-8px,2px,0)

            scale(1);

    }


    50%{

        transform:

            translate3d(10px,-6px,0)

            scale(1.06);

    }


    100%{

        transform:

            translate3d(-5px,8px,0)

            scale(1.02);

    }


}




/* ==========================================
   Image Above Aurora
========================================== */


.av-card-image{

    position:relative;

    z-index:2;

    overflow:hidden;

    border-radius:18px;

}




.av-card-image img{

    display:block;

    width:100%;

    height:auto;


    transition:

        transform .7s ease,

        filter .7s ease;

}




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

    transform:scale(1.035);

    filter:

        saturate(1.08)

        contrast(1.03);

}




/* ==========================================
   Content Protection
========================================== */


.av-card-footer,
.av-card-content,
.av-btn,
.av-btn-read,
.av-btn-download,
button,
a{

    position:relative;

    z-index:10;

}




/* ==========================================
   Soft Paper Tint
========================================== */


.av-card::after{

    content:"";

    position:absolute;

    inset:0;

    z-index:1;

    pointer-events:none;


    background:

    linear-gradient(

        135deg,

        rgba(255,255,255,.08),

        transparent 50%,

        rgba(255,255,255,.04)

    );


    mix-blend-mode:soft-light;

}





























































/* ==========================================
   Download Button
========================================== */

.av-btn-download{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    gap:10px;

    min-width:120px;
    height:44px;

    padding:0 18px;

    border:none;
    border-radius:12px;

    background:var(--av-c3);
    color:#fff;

    box-shadow:none;

    transition:
        transform .3s ease,
        background .3s ease;

}

.av-btn-download::before{
    display:none;
}

.av-btn-download:hover{

    transform:translateY(-2px);

}

.av-btn-download:hover .av-btn-icon{

    transform:translateY(2px);

}

/* ==========================================
   Read Button
========================================== */

.av-btn-read{

    width:44px;
    height:44px;

    min-width:44px;
    min-height:44px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:none;
    border-radius:50%;

    background:var(--av-c3);
    color:#fff;

    box-shadow:none !important;

    transition:
        transform .3s ease,
        background .3s ease;

}

.av-btn-read::before,
.av-btn-read::after{

    display:none;

}

.av-btn-read svg{

    stroke:currentColor;

}

.av-btn-read:hover{

    transform:
        translateY(-2px)
        scale(1.04);

    box-shadow:none !important;

}

.av-btn-read:hover svg{

    transform:translate(2px,-2px);

}






/* ==========================================
   Soft Lazy Reveal
========================================== */

.av-masonry-item{

    opacity:0;
    transform:translateY(18px);
    filter:blur(8px);

    transition:
        opacity .6s ease,
        transform .6s ease,
        filter .8s ease;

}


.av-masonry-item.av-visible{

    opacity:1;
    transform:translateY(0);
    filter:blur(0);

}













/* ==========================================
   Infinite Scroll Loader
========================================== */

.av-loading{

    display:none;

    width:100%;

    padding:40px 0;

    text-align:center;

}

.av-lottie-loader{

    width:120px;

    height:120px;

    margin:0 auto;

}

.av-loading-text{

    margin-top:8px;

    font-size:14px;

    color:#666;

    letter-spacing:.4px;

}

/* ==========================================
   End Message
========================================== */

.av-end-message{

    display:none;

    width:100%;

    padding:50px 20px;

    text-align:center;

    color:#777;

    font-size:15px;

    line-height:1.8;

    opacity:.9;

}