/* aboutBanner css */
.aboutBanner { padding: 210px 0; background-color: var(--colorPrimaryLight); position: relative; z-index: 1; overflow: clip; text-align: center; }
.aboutBannerInner .subTextXl { color: var(--colorText); }
.aboutBannerInner { width: 70%; margin: 0 auto; }
.aboutBanner:before { content: ''; position: absolute; width: 500px; aspect-ratio: 1; border: 100px solid var(--colorPrimary); background-color: var(--colorPrimaryLight); border-radius: 50%; top: -250px; right: -250px; }
.aboutBanner:after { content: ''; position: absolute; width: 500px; aspect-ratio: 1; border: 100px solid var(--colorPrimary); background-color: var(--colorPrimaryLight); border-radius: 50%; bottom: -250px; left: -250px; }
section.textBgImage.infoText:before { bottom: 10px; top: auto; }

/* textBgImage css */
.textBgImage { position: relative; z-index: 1; padding: 150px 0 850px 0; }
.textBgImg { position: absolute; width: 100%; height: 100%; z-index: -1; top: 0; left: 0; }
.textBgImg img { width: 100%; height: 100%; object-fit: cover; }
.textBoxHeading { display: flex; align-items: center; gap: 50px; }
.textBoxHeading .heading8xl { line-height: 0.9; width: 50%; }
.textBox .subTextMd { width: 70%; margin: 30px 0 0 0; }

/* halfImageText css */
.halfImageText { padding: 150px 0 200px 0; background-color: var(--colorSecondary); position: relative; z-index: 1; }
.halfImageText:before { content: ''; position: absolute; width: 150px; height: 150px; background: url(https://bloop.co.in/wallaroorise/wp-content/uploads/2026/06/04.gif)center center no-repeat; top: 0; left: calc(45% - 75px); top: 200px; z-index: 1; }
.halfContainerImage { position: absolute; width: 45%; height: 700px; }
.halfContainerImage img { width: 100%; height: 100%; object-fit: cover; }
.halfImageTextInner { width: 40%; margin-left: auto; margin-top: 70px; }
.halfImageTextInner h3 { color: var(--colorPrimary); }

/* titleGrid css */
.titleGrid { background-color: var(--colorBg); padding: 220px 0; }
.GridListTopIcon { width: 100px; height: 100px; display: flex; align-items: center; justify-content: center; }
.GridListTop { display: flex; gap: 50px; align-items: center; }
.GridListTop .heading5xl { color: var(--colorSecondary); margin: 0; }
.titleGridTop .heading8xl { color: var(--colorSecondary); }
.titleGridTop { width: 80%; }
.titleGridListing { margin: 80px 0 0 0; }
.titleGridListing .col-lg-6:first-child .titleGridImage img { object-position: 0 -50px; }
.titleGridListing .col-lg-6:nth-child(2) .titleGridImage img { object-position: 0 -80px; }
.titleGridListing .col-lg-6:nth-child(3) .titleGridImage img { object-position: 0 -70px; }
.titleGridList .subTextMd { color: var(--colorText); line-height: 1.3; }
.titleGridListInner { padding: 40px; border-top: 1px solid var(--colorPrimary); height: auto; position: absolute; bottom: 0; left: 0; width: 100%; background-color: #FFF9F3; transform: translateY(130px); max-height: 300px; transition: all 0.3s; }
.titleGridList .subTextMd { margin: 20px 0 0 0; opacity: 0; visibility: hidden; transition: all 0.3s; }
.titleGridList { position: relative; overflow: clip; border: 1px solid var(--colorPrimary); }
.titleGridList:hover .titleGridListInner { transform: translateY(0); }
.titleGridList:hover span.subTextMd { opacity: 1; visibility: visible; }
.titleGridImage { height: 450px; }

/* threeTowns css */
.threeTowns { padding: 200px 0; background-color: var(--colorPrimaryLight); position: relative; z-index: 1; overflow: clip; }
.threeTowns:before { content: ''; position: absolute; width: 375px; height: 125px; background: url(https://bloop.co.in/wallaroorise/wp-content/uploads/2026/06/08.gif) center center no-repeat; top: 0; right: 0; }
.threeTowns:after { content: ''; position: absolute; width: 375px; height: 125px; background: url(https://bloop.co.in/wallaroorise/wp-content/uploads/2026/06/07.gif) center center no-repeat; bottom: 0; left: 0; }
.threeTownsTop .subTextMd { color: var(--colorText); margin: 30px 0 0 0; width: 85%; }
.threeTownsHoriWrap { margin: 80px 0 0 0; position: relative; }
.threeTownsHoriListing:before { content: ''; position: absolute; width: 120vw; height: 2px; background-color: var(--colorPrimary); top: 42px; left: 0; opacity: 0.2; }
.threeTownsHoriListing:after { content: ''; position: absolute; width: var(--line-width); ; height: 2px; background-color: var(--colorPrimary); top: 42px; left: 0; }
.HoriListImage { width: 100%; height: 250px; border-radius: 13px; overflow: clip; margin: 25px 0 0 0; }
.HoriListImage img { width: 100%; height: 100%; object-fit: cover; }
.HoriListText .heading5xl { color: var(--colorSecondary); margin: 0; }
.HoriListText .subTextXl { color: var(--colorText); }
.threeTownsHoriListing { display: flex; gap: 70px; padding: 100px 0 0 0; position: relative; }
.orangeLogo { position: absolute; top: 0; left: 0; }
.threeTownsHoriList { position: relative; opacity: 0.2; transition: all 0.5s ease; width: 33%; }
.threeTownsHoriList:before { content: ''; position: absolute; width: 30px; height: 30px; background-color: var(--colorPrimary); transform: scale(0.5) rotate(45deg); top: -72px; transition: all 0.5s ease; }
.threeTownsHoriListing { --line-width: 0px; }
.threeTownsHoriList.active { opacity: 1; }
.threeTownsHoriList.active:before { transform: rotate(45deg) scale(1); opacity: 1; }

/* cardWrapper css */
.cardWrapper { padding: 200px 0 100px; background-color: var(--colorSecondary); }
.cardWrapperTop { text-align: center; }
.cardWrapperTop .heading8xl { color: var(--colorPrimary); }
#cards { list-style: none; padding-left: 0; display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(var(--cards), var(--cardHeight)); gap: var(--cardMargin); margin-bottom: var(--cardMargin); margin: 80px auto 0 auto; max-width: 90%; }
#card1 { --index: 1; }
#card2 { --index: 2; }
#card3 { --index: 3; }
#card4 { --index: 4; }
.cardss { position: sticky; top: 80px; padding-top: calc(var(--index) * var(--cardTopPadding)); }
.card-body { box-sizing: border-box; padding: 50px; border-radius: 0; box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.1); height: 650px; transition: all 0.5s; background-color: var(--colorBg); position: relative; }
.card-body:before { content: ''; position: absolute; bottom: 0; right: 0; width: 100px; height: 100px; background-size: contain !important; }
.cardss:first-child .card-body:before { background: url(https://bloop.co.in/wallaroorise/wp-content/uploads/2026/06/01.gif)center center no-repeat; }
.cardss:nth-child(2) .card-body:before { background: url(https://bloop.co.in/wallaroorise/wp-content/uploads/2026/06/06.gif)center center no-repeat; }
.cardss:nth-child(3) .card-body:before { background: url(https://bloop.co.in/wallaroorise/wp-content/uploads/2026/06/02.gif)center center no-repeat; }
.cardss:last-child .card-body:before { background: url(https://bloop.co.in/wallaroorise/wp-content/uploads/2026/06/03.gif)center center no-repeat; }
.cardContent { display: flex; align-items: flex-start; justify-content: space-between; }
.cardImage { width: 60%; height: 100%; }
.cardText { width: 35%; padding: 50px 0 0 0; }
.cardContent { display: flex; align-items: flex-start; justify-content: space-between; height: 100%; }
.cardImage img { width: 100%; height: 100%; object-fit: cover; }
.cardText .subTextMd { color: var(--colorBlack); position: relative; padding: 30px 0 0 0; margin: 30px 0 0 0; }
.cardText .subTextMd:before { content: ''; position: absolute; width: 90%; height: 1px; background-color: var(--colorPrimary); top: 0; left: 0; }

/* ctaWrapper css */
.ctaWrapper { background-color: var(--colorPrimary); padding: 200px 0; position: relative; z-index: 1; overflow: clip; }
.ctaWrapperBg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; mix-blend-mode: soft-light; z-index: -1; }
.ctaWrapperBg img { width: 100%; height: 100%; object-fit: cover; }
.ctaWrapperInner { text-align: center; }
.ctaWrapperInner .subTextMd { display: block; width: 40%; margin: 20px auto 40px auto; }