body #breadcrumbs .arrow-holder {
background-color: #ffffff4f;
}
body #breadcrumbs .arrow-holder .arrow {
stroke: var(--white);
}
body #breadcrumbs a,
body #breadcrumbs {
color: var(--body-bg);
}
body #breadcrumbs span.breadcrumb_last {
color: var(--body-bg);
}
body #breadcrumbs span span:not(.breadcrumb_last) {
opacity: 0.5;
transition: 0.5s ease;
margin-right: 5px;
}
body #breadcrumbs span span:not(:first-child) {
margin-left: 5px;
}
body #breadcrumbs a:hover {
color: var(--body-bg);
}
body #breadcrumbs span span:not(.breadcrumb_last):hover {
opacity: 1;
}
body .breadcrumb {
border: 0px;
padding-top: clamp(10px, 4rem, 40px);
} .section1 {
border-radius: 0px 0px 40px 40px;
height: calc(100dvh - var(--header-height));
min-height: 650px;
}
.section1 .background {
left: 0;
top: 0;
height: 100%;
}
.section1 .background video,
.section1 .background img {
object-fit: cover;
display: block;
height: 100%;
width: 100%;
}
.section1 .title {
margin-bottom: clamp(20px, 4rem, 40px);
}
.section1 .heading1 {
color: var(--body-bg);
margin-bottom: clamp(30px, 5.5rem, 55px);
max-width: clamp(450px, 80rem, 800px);
}
.section1 .scroll-down {
margin-bottom: clamp(30px, 7.4rem, 74px);
width: clamp(25px, 5rem, 50px);
animation: upDown 2s linear infinite;
}
.section1 .view-services-btn {
margin-right: 8px;
color: var(--secondary-color);
border-color: var(--white);
background-color: var(--white);
}
.section1 .view-services-btn:hover {
background-color: var(--primary-color);
border-color: var(--primary-color);
color: var(--white);
}
@keyframes upDown {
0% {
transform: translateY(0px);
}
25% {
transform: translateY(5px);
}
50% {
transform: translateY(0px);
}
75% {
transform: translateY(-5px);
}
100% {
transform: translateY(0px);
}
} .section2 .asset-holder {
--shape-width: clamp(50px, 11.3rem, 113px);
width: var(--shape-width);
right: clamp(40px, 8rem, 80px);
top: calc(-3.1 * var(--shape-width) / 2);
}
.section2 .asset-holder:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) scale(1.6) rotate(0deg);
display: block;
background-image: url(//akal.life/wp-content/uploads/2024/04/text-purple.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
animation: rotate 15s linear infinite;
will-change: transform;
}
@keyframes rotate {
0% {
transform: translate(-50%, -50%) scale(1.6) rotate(0deg);
}
100% {
transform: translate(-50%, -50%) scale(1.6) rotate(360deg);
}
}
.section2 .row2 {
padding-top: clamp(60px, 12rem, 120px);
padding-bottom: clamp(60px, 12rem, 120px);
background-color: var(--white);
}
.section2 .title {
margin-bottom: clamp(20px, 4rem, 40px);
}
.section2 .row .row-heading,
.section2 .row .description {
margin-bottom: clamp(15px, 3rem, 30px);
}
.section2 .row-column img {
border-radius: 30px;
}
.section2 .main-btn {
margin-bottom: 10px;
line-height: 1.4;
}
.section2 .heading1 {
margin-bottom: clamp(15px, 3rem, 30px);
}
.section2 .row1 {
margin-top: clamp(60px, 12rem, 120px);
margin-bottom: clamp(60px, 12rem, 120px);
}
@media (min-width: 992px) {
.section2 .row1 .column1 {
padding-right: clamp(30px, 12.5rem, 125px);
}
.section2 .row2 .column2 {
padding-left: clamp(30px, 12.5rem, 125px);
}
}
@media (max-width: 1400px) and (min-width: 992px) {
.section2 .row1 .column1 {
padding-right: 8.5rem;
}
.section2 .row2 .column2 {
padding-left: 8.5rem;
}
}
@media (max-width: 991px) {
.section2 :is(.row1, .row3) {
flex-direction: column;
}
.section2 .row2 .container {
flex-direction: column-reverse;
}
.section2 .row-column {
width: 100%;
}
.section2 .title {
margin-top: 4rem;
}
}
@media (max-width: 767px) {
.section1 .scroll-down {
margin-top: 5rem;
}
}
@media (max-width: 550px) {
.section2 .asset-holder {
--shape-width: 7rem;
}
.section2 .row2 {
margin-top: 8rem;
margin-bottom: 8rem;
}
.section2 .main-btn {
padding-left: 3rem;
padding-right: 3rem;
}
.view-services-btn {
margin-bottom: 10px;
}
.section2 :is(.row1, .row3) {
margin-bottom: 10rem;
}
.section2 .asset-holder {
top: calc(-4.4 * var(--shape-width) / 2);
}
}