.section1 {
padding: clamp(60px, 12rem, 120px) 0;
}
.section1 .title,
.section1 .heading1 {
margin-bottom: clamp(10px, 2rem, 20px);
}
.section1 .text1 {
max-width: 840px;
}
.section1 .row {
margin-top: clamp(60px, 12rem, 120px);
}
.section1 .row .column1 {
background-color: var(--white);
padding: clamp(10px, 2rem, 20px);
border-radius: 30px;
}
.section1 .row .tabs-btn {
padding: clamp(5px, 1.5rem, 15px) clamp(7.5px, 1.5rem, 15px);
border-radius: 30px;
transition: 0.5s ease;
margin-right: clamp(5px, 1rem, 10px);
line-height: 1.2;
}
.section1 .row .tabs-btn.active {
background-color: var(--primary-color);
color: var(--white);
}
.section1 .row .tabs-btn:before {
content: "";
width: 0;
height: clamp(12px, 2.3rem, 23px);
background-image: url(//akal.life/wp-content/uploads/2024/04/check-white.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
display: block;
margin-right: clamp(5px, 1rem, 10px);
transition: 0.5s ease;
}
.section1 .row .tabs-btn.active:before {
min-width: clamp(12px, 2.3rem, 23px);
}
.section1 .faq-container {
padding: clamp(12px, 2.4rem, 24px) clamp(15px, 3rem, 30px);
background-color: var(--white);
border-radius: 30px;
margin-bottom: 5px;
transition: 0.5s ease;
}
.section1 .faq-container:not([data-category="category1"]) {
display: none;
}
.section1 .faq-container.active {
border-radius: 20px;
}
.section1 .faq-container .description-holder {
height: 0px;
transition: 0.5s ease;
}
.section1 .faq-container.active .description-holder {
margin-top: clamp(10px, 2rem, 20px);
}
.section1 .faq-container.active .description-holder {
height: var(--height); }
.section1 .faq-container .faq-title {
transition: 0.5s;
line-height: 1.35;
}
.section1 .faq-container.active .faq-title,
.section1 .faq-container .faq-title:hover {
color: var(--primary-color);
}
.section1 .faq-container .description {
font-size: clamp(13px, 1.6rem, 16px);
}
.section1 .faq-container svg,
.section1 .faq-container svg path {
transition: 0.5s ease;
}
.section1 .faq-container.active svg path {
stroke: var(--primary-color);
}
.section1 .faq-container.active svg {
transform: rotate(180deg);
}
@media (min-width: 768px) {
.section1 .row .column1 {
width: 25%;
}
.section1 .row .column2 {
width: 75%;
padding-left: clamp(30px, 12.5rem, 125px);
padding-right: clamp(60px, 15rem, 150px);
}
.section1 .row .column1 {
height: fit-content;
position: sticky;
top: 130px;
}
.section1 .row1 .column1 {
width: 60%;
max-width: 867px;
margin-left: auto;
}
.section1 .row1 .column2 {
width: 40%;
}
.section1 .asset-holder {
position: relative;
right: clamp(20px, 4rem, 40px);
}
}
@media (max-width: 767px) {
.section1 .row {
display: block;
}
.section1 .row .row-column {
width: 100%;
}
.section1 .row .column1 {
margin-bottom: 5rem;
}
.section1 .row1 {
display: block;
}
.section1 .row1 .column2 {
justify-content: start;
}
.section1 .asset-holder {
right: 2rem;
margin-top: 6rem;
margin-left: 5rem;
position: relative;
}
}
@media (max-width: 550px) {
.section1 .faq-container svg,
.section1 .faq-container svg path {
min-width: 22px;
min-height: 22px;
padding-left: 5px;
}
}