.section1 .row1 {
margin: clamp(60px, 12rem, 120px) auto;
}
.section1 .heading1 {
margin: clamp(20px, 4rem, 40px) 0;
}
.section1 .asset-holder {
position: relative;
right: clamp(20px, 4rem, 40px);
}
.section1 .heading2 {
margin-bottom: clamp(20px, 4rem, 40px);
} .section1 .column1 .details {
font-size: clamp(12px, 1.4rem, 14px);
}
.section1 .column1 .date-holder {
margin-right: clamp(7px, 1.5rem, 15px);
}
.section1 .column1 .event-details {
margin-top: clamp(12px, 2rem, 20px);
}
.section1 :is(.location-holder, .date-holder) svg {
margin-right: clamp(5px, 1rem, 10px);
width: clamp(12px, 3.4rem, 34px);
height: clamp(12px, 3.4rem, 34px);
}
.section1 .column1 :is(.location-holder, .date-holder) svg path {
transition: 0.5s ease;
}
.section1 .column1 .article:hover :is(.location-holder, .date-holder) svg path {
fill: var(--primary-color);
}
.section1 .column1 .article .blog-heading {
display: -webkit-box;
max-width: 100%;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin-top: 10px;
transition: 0.5s ease;
font-size: clamp(18px, 2.2rem, 22px);
}
.section1 .column1 .article:hover .blog-heading {
color: var(--primary-color);
}
.section1 .column1 .article .entry-content {
display: -webkit-box;
max-width: 100%;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin-top: clamp(7px ,1.5rem, 15px);
margin-bottom: clamp(7px, 3.5rem, 35px);
}
.section1 .column1 .article .entry-content figure {
display: none;
}
.section1 .column1 .article .entry-content * {
color: var(--text-color);
font-weight: 300;
font-size: clamp(12px, 1.4rem, 14px);
line-height: 1.4;
}
.section1 .column1 .article {
padding: clamp(10px, 2rem, 20px);
background-color: var(--white);
border-radius: 10px;
}
.section1 .column1 .post-tags {
top: clamp(15px, 3rem, 30px);
left: clamp(15px, 3rem, 30px);
border-radius: 100px;
background-color: var(--body-bg);
padding: clamp(5px, 1rem, 10px) clamp(10px, 2rem, 20px);
}
.section1 .column1 .post-tags span {
font-size: clamp(7px, 1.4rem, 14px);
}
.section1 .column1 .post-thumbnail img {
max-height: 450px;
object-fit: cover;
}
.section1 .article .post-thumbnail {
border-radius: 20px;
}
.section1 .post-thumbnail img {
transition: var(--main-transition);
}
.section1 .article:hover .post-thumbnail img {
transform: scale(1.15);
}
.section1 .article .post-thumbnail:before {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 60%;
display: block;
background: linear-gradient(180deg, rgba(184, 37, 218, 0.00) 0%, rgba(184, 37, 218, 0.62) 100%);
opacity: 0;
transition: 0.5s ease;
pointer-events: none;
transition-delay: 0.3s;
z-index: 2;
}
.section1 .article:hover .post-thumbnail:before {
opacity: 0.6;
} .section1 .column2 .blog-heading {
color: #000;
margin: 10px 0px;
transition: 0.5s ease;
}
.section1 .column2 .post-thumbnail img {
height: 100%;
border-radius: 20px;
height: clamp(95px, 18.5rem, 185px);
object-fit: cover;
}
.section1 .column2 .entry-content {
display: -webkit-box;
max-width: 100%;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.section1 .column2 .entry-content * {
color: var(--text-color);
font-weight: 300;
font-size: clamp(12px, 1.4rem, 14px);
line-height: 1.4;
}
.section1 .column2 .details {
color: #000;
font-size: clamp(12px, 1.4rem, 14px);
line-height: 1;
}
.section1 .column2 .date-holder {
margin-bottom: 10px;
}
.section1 .column2 .content-holder {
padding-right: clamp(20px, 4rem, 40px);
}
.section1 .column2 .article:not(:last-child) {
margin-bottom: clamp(30px, 6rem, 60px);
padding-bottom: clamp(30px, 6rem, 60px);
border-bottom: 1px solid #FDB924;
}
.section1 .column2 .article :is(.location-holder, .date-holder) svg path {
transition: 0.5s ease;
}
.section1 .column2 .article:hover :is(.location-holder, .date-holder) svg path {
fill: var(--primary-color);
}
.section1 .column2 .article:hover .blog-heading {
color: var(--primary-color);
}
.section1 .row2 .column2 .entry-content figure {
display: none;
}
@media (min-width: 768px) {
.section1 .row2 .column2 {
padding-left: clamp(70px, 14rem, 140px);
}
.section1 .row1 .column1 {
width: 60%;
max-width: 867px;
margin-left: auto;
}
.section1 .row1 .column2 {
width: 40%;
}
}
@media (max-width: 991px) {
.section1 .row2 .column2 {
padding-left: 10rem;
}
.section1 .column1 .post-thumbnail img {
max-height: 250px;
}
}
@media (max-width: 767px) {
.section1 .row1 {
display: block;
}
.section1 .row1 .column2 {
justify-content: start;
}
.section1 .asset-holder {
right: 2rem;
margin-top: 6rem;
margin-left: 5rem;
}
.section1 .row2 {
display: block;
}
.section1 .row2 .row-column {
width: 100%;
}
.section1 .row2 .column2 {
padding-left: 0;
}
.section1 .row2 .column2 {
margin-top: 8rem;
}
}
@media (max-width: 550px) {
.section1 .asset-holder {
margin-left: 4rem;
}
} .section2 {
padding-top: clamp(75px, 15rem, 150px);
padding-bottom: clamp(50px, 10rem, 100px);
}
.section2 .row1 {
max-width: 840px;
margin: 0 auto;
}
.section2 :is(.heading1, .link-holder) {
margin: clamp(20px, 4rem, 40px) 0;
}
.section2 .link-holder a {
position: relative;
padding: clamp(5px, 1.5rem, 15px) clamp(7.5px, 1.5rem, 15px);
border-radius: 30px;
transition: 0.5s ease;
display: flex;
align-items: center;
margin: 0 10px;
color: var(--secondary-color);
}
.section2 .link-holder a:hover {
background-color: var(--white);
}
.section2 .link-holder a.active {
background-color: var(--white);
}
.section2 .link-holder a.active:before {
content: "";
width: clamp(12px, 2.3rem, 23px);
height: clamp(12px, 2.3rem, 23px);
background-image: url(//akal.life/wp-content/uploads/2024/04/check.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
display: block;
margin-right: clamp(5px, 1rem, 10px);
transition: 0.5s ease;
}
.section2 .article-holder {
gap: clamp(10px, 2rem, 20px);
}
.section2 .article-holder .post {
flex-basis: 32%;
}
.section2 .details {
font-size: clamp(12px, 1.4rem, 14px);
line-height: 1;
}
.section2 .date-holder {
margin-right: clamp(7px, 1.5rem, 15px);
}
.section2 .event-details {
margin-top: clamp(12px, 2rem, 20px);
}
.section2 :is(.location-holder, .date-holder) svg {
margin-right: clamp(5px, 1rem, 10px);
width: clamp(12px, 3.4rem, 34px);
height: clamp(12px, 3.4rem, 34px);
}
.section2 :is(.location-holder, .date-holder) svg path {
transition: 0.5s ease;
}
.section2 .article:hover :is(.location-holder, .date-holder) svg path {
fill: var(--primary-color);
}
.section2 .article .blog-heading {
display: -webkit-box;
max-width: 100%;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin-top: 10px;
transition: 0.5s ease;
font-size: clamp(18px, 2.2rem, 22px);
}
.section2 .article:hover .blog-heading {
color: var(--primary-color);
}
.section2 .article .entry-content {
display: -webkit-box;
max-width: 100%;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin-top: clamp(7px ,1.5rem, 15px);
margin-bottom: clamp(7px, 3.5rem, 35px);
}
.section2 .article .entry-content figure {
display: none;
}
.section2 .article .entry-content * {
color: var(--text-color);
font-weight: 300;
font-size: clamp(12px, 1.4rem, 14px);
line-height: 1.4;
}
.section2 .article {
padding: clamp(10px, 2rem, 20px);
background-color: var(--white);
border-radius: 10px;
}
.section2 .post-tags {
top: clamp(15px, 3rem, 30px);
left: clamp(15px, 3rem, 30px);
border-radius: 100px;
background-color: var(--body-bg);
padding: clamp(5px, 1rem, 10px) clamp(10px, 2rem, 20px);
}
.section2 .post-tags span {
font-size: clamp(7px, 1.4rem, 14px);
}
.section2 .post-thumbnail img {
max-height: clamp(150px, 27.5rem, 275px);
object-fit: cover;
}
.section2 .article .post-thumbnail {
border-radius: 20px;
}
.section2 .post-thumbnail img {
transition: var(--main-transition);
}
.section2 .article:hover .post-thumbnail img {
transform: scale(1.15);
}
.section2 .article .post-thumbnail:before {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 60%;
display: block;
background: linear-gradient(180deg, rgba(184, 37, 218, 0.00) 0%, rgba(184, 37, 218, 0.62) 100%);
opacity: 0;
transition: 0.5s ease;
pointer-events: none;
transition-delay: 0.3s;
z-index: 2;
}
.section2 .article:hover .post-thumbnail:before {
opacity: 0.6;
}
.section2 .pagination-holder * {
font-size: clamp(12px, 1.4rem, 14px);
font-weight: 300;
color: #000;
}
.section2 .page-numbers:not(.next, .prev) {
width: clamp(25px, 5rem, 50px);
height: clamp(25px, 5rem, 50px);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.section2 .current {
background-color: var(--primary-color);
color: var(--white);
}
.section2 .pagination-holder {
margin-top: clamp(20px, 4rem, 40px);
}
@media (max-width: 767px) {
.section2 .article-holder {
gap: 1rem;
}
.section2 .article-holder .post {
flex-basis: 49%;
}
}
@media (max-width: 550px) {
.section2 .article-holder {
gap: 0;
}
.section2 .article-holder .post {
flex-basis: 100%;
}
.section2 .post:not(:last-child) {
margin-bottom: 3rem;
}
}