@import url('https://fonts.googleapis.com/css2?family=Catamaran:wght@100;200;300;400;500;600;700;800;900&family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Allison&display=swap');
:root{
    --color-bg: #F3EEE8;
    --color-surface: #FAF8F5;
    --color-text: #41413F;
    --color-text-muted: #77736F;
    --color-primary: #68786E;
    --color-primary-light: #AAB5A4;
    --color-primary-hover: #58675E;
    --color-secondary: #DFC3A8;
    --color-secondary-light: #EBD8C6;
    --color-border: #DDD7D0;
    --color-on-primary: #FFFFFF;
    --clr1: var(--color-primary-light);
    --clr2: var(--color-primary);
    --clr3: var(--color-text);
    --clr4: var(--color-text);
    --clr5: var(--color-text);
    --bs-body-bg: var(--color-bg);
    --bs-body-color: var(--color-text);
    --bs-border-color: var(--color-border);
    --bs-link-color: var(--color-primary);
    --bs-link-hover-color: var(--color-primary-hover);
    --slide: 40rem;
    --header: 10rem;
    --banner: 20rem;
}
@media (min-width: 375px){
    :root{
        --slide: 32rem;
    }
}
@media (min-width: 425px){
    :root{
        --slide: 35rem;
    }
}
@media (min-width: 768px){
    :root{
        --slide: 45rem;
        --header: 12rem;
        --banner: 28rem;
    }
}
@media (min-width: 992px){
    :root{
        --slide: 50rem;
    }
}
@media (min-width: 1200px){
    :root{
        --slide: 55rem;
    }
}
@media (min-width: 1500px){
    :root{
        --slide: 60rem;
    }
}
html {
	box-sizing: border-box;
	font-size: 62.5%;
	font-size-adjust: 100%;
	margin-right: 0 !important;
	-ms-overflow-style: scrollbar;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}
*,
*::before,
*::after {
	box-sizing: inherit;
}
html,
body {
	height: 100%;
}
body {
    background-color: var(--color-bg);
	color: var(--clr5);
	font-family: 'Inter', sans-serif;
	font-size: 1.6rem;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-weight: 400;
	line-height: 1.5;
}
body::-webkit-scrollbar{
    width: 4px;
}
body::-webkit-scrollbar-track {
    background-color: var(--color-bg);
}
body::-webkit-scrollbar-thumb {
    background-color: var(--clr2);
}
::-moz-selection {
	background-color: var(--clr2);
	color: var(--color-bg);
}
::selection {
	background-color: var(--clr2);
	color: var(--color-bg);
}
a,
a:hover,
a:focus{
    text-decoration: none;
}
a{
    color: var(--clr5);
}
button{
    border: none;
    outline: none;
    background-color: transparent;
}
ul{
    padding: 0;
    margin: 0;
    list-style-type: none;
}
p{
    font-family: 'Inter', sans-serif;
}
i{
    font-weight: 400!important;
}
address{
    line-height: 1;
}
figure,
address{
    margin: 0;
}
.ovrClose{
    overflow-y: hidden!important;
}
.min{
    min-height: 50vh;
}
@font-face {
    font-family: pill;
    src: url(../fonts/magnolia_sky.ttf);
}
header,
#header{
    position: relative;
}
.equal [class^="col"] {
    display: flex;
}
@media (min-width: 768px){
    .jc-center{
        justify-content: center;
    }
}
@media (min-width: 992px){
    .jc-center{
        justify-content: flex-start;
    }
}
.handWritting{
    font-family: 'Allison', cursive;
    font-size: 4rem;
    line-height: 1;
    font-weight: 500;
}
.transition3s{
    transition: all .3s ease;
}
.responsiveImage{
    max-width: 100%;
    width: 100%;
    display: block;
    height: auto;
}
.coverImage{
    object-fit: cover;
    height: 100%;
}
.containImage{
    object-fit: contain;
    height: 100%;
}
.wh100{
    width: 100%;
    height: 100%;
}
.boxShadow{
    box-shadow: rgb(65 65 63 / 0.12) 0px 8px 24px;
}
.padding{
    padding: 5rem 0;
    position: relative;
}
@media (min-width: 1200px){
    .padding{
        padding: 8rem 0;
    }
} 
.elipsis{
    white-space: nowrap; 
    width: 100%; 
    overflow: hidden;
    text-overflow: ellipsis; 
    display: block;
}
.form-control{
    box-shadow: none;
    outline: none;
    padding: 1rem;
    font-size: 1.6rem;
}
.headerSide{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--header);
}
.logo{
    max-width: 15rem;
    width: 100%;
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
}
@media (min-width: 768px){
    .logo{
        max-width: 18rem;
    }
}
@media (min-width: 1400px){
    .logo{
        max-width: 20rem;
    }
}
.headerContactInfo{
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
@media (min-width: 1200px){
    .headerContactInfo{
        column-gap: 3rem;
    }
}
@media (min-width: 1400px){
    .headerContactInfo{
        column-gap: 5rem;
    }
}
.hcitem{
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    height: 100%;
    position: relative;
}
.hcitem:not(:first-child)::before{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -2.4rem;
    width: 1px;
    background-color: var(--color-border);
}
.hcitemicon{
    width: 4rem;
    height: 4rem;
    font-size: 1.8rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    color: var(--color-text);
    background-color: var(--color-secondary-light);
    border: 1px solid var(--color-border);
}
.hcitem .content{
    max-width: calc(100% - 4rem);
    width: 100%;
    padding-left: 1rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    height: 100%;
}
.hcitem .content span{
    display: block;
    font-size: 1.4rem;
    font-weight: 600;
}
.hcitem .content a{
    font-size: 1.4rem;
    font-weight: 500;
}
.hcitem .content a:hover{
    color: var(--clr2);
}
.menuLinks{
    background-color: var(--clr3);
    border-radius: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 7.6rem;
    margin-top: 1rem;
    position: relative;
    z-index: 2;
}
.menuLinks ul{
    max-width: 85%;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 100%;
    padding: 0 1rem;
}
@media (min-width: 1400px){
    .menuLinks ul{
        padding: 0 3rem;
        max-width: 80%;
    }
}
.menuLinks li{
    height: 100%;
    display: inline-flex;
    align-items: center;
}
.mainA{
    background-image: linear-gradient(to right, var(--color-secondary), var(--color-secondary) 50%, var(--color-bg) 50%);
  background-size: 200% 100%;
  background-position: -100%;
  display: inline-block;
  position: relative;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: all 0.3s ease-in-out;
  font-size: 1.4rem;
  font-weight: 600;
}
@media (min-width: 1200px){
    .mainA{
        font-size: 1.6rem;
    }
}
.mainA:before{
    content: '';
    background: var(--color-secondary);
    display: block;
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 0;
    height: .2rem;
    transition: all 0.3s ease-in-out;
}
.mainA:hover {
   background-position: 0;
}
.mainA:hover::before{
    width: 100%;
}
.contactLink{
    max-width: 15%;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--clr2);
    font-size: 1.4rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--color-on-primary);
    border-radius: 0 1rem 1rem 0;
}
@media (min-width: 1400px){
    .contactLink{
        max-width: 20%;
        font-size: 1.6rem;
    }
}
.contactLink:hover{
    background-color: var(--color-primary-hover);
    color: var(--color-on-primary);
}
.contactLink i{
    margin-right: 1rem;
}
@media (min-width: 992px){
    .slide{
        margin-top: -4rem;
    }
}
.slideSide{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    position: relative;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: var(--slide);
}
.slideSide:before{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    max-width: 100%;
    width: 100%;
    background-color: var(--clr3);
    opacity: .8;
}
.slideSideText{
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    max-width: 100%;
    width: 100%;
    position: relative;
    z-index: 2;
    border-radius: 1rem;
}
@media (min-width: 375px){
    .slideSideText{
        max-width: 90%;
    }
}
@media (min-width: 425px){
    .slideSideText{
        max-width: 80%;
    }
}
@media (min-width: 768px){
    .slideSideText{
        max-width: 50rem;
    }
}
@media (min-width: 1400px){
    .slideSideText{
        max-width: 70rem;
    }
}
.slideSideText h1{
    margin-bottom: 1rem;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-bg);
}
@media (min-width: 768px){
    .slideSideText h1{
        font-size: 3.5rem;
    }
}
@media (min-width: 1400px){
    .slideSideText h1{
        font-size: 5.5rem;
    }
}
.slideSideText p{
    font-size: 1.4rem;
    color: var(--color-bg);
}
@media (min-width: 576px){
    .slideSideText p{
        font-size: 1.6rem;
    }
}
@media (min-width: 1400px){
    .slideSideText p{
        font-size: 1.8rem;
    }
}
.slideLink{
    display: inline-block;
    border-radius: 0.4rem;
    padding: 1.2rem 3rem;
    background-color: var(--clr2);
    font-size: 1.4rem;
    font-weight: 500;
    position: relative;
    margin-top: 1rem;
    text-transform: uppercase;
    overflow: hidden;
    z-index: 0;
    color: var(--color-on-primary);
}
@media (min-width: 576px){
    .slideLink{
        font-size: 1.6rem;
    }
}
.slideLink:before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 100%;
    background-color: var(--color-primary-hover);
    z-index: -1;
    transition: all .3s linear;
}
.slideLink:hover{
    color: var(--color-on-primary);
    background-color: var(--color-primary-hover);
}
.slideLink:hover:before{
    right: 0;
}
.owl-slide .owl-item.active .slideLine {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    animation-name: fadeInLeft;
    animation-delay: .6s;
}
.owl-slide .owl-item.active h1 {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    animation-name: fadeInDown;
    animation-delay: 1.2s;
}
.owl-slide .owl-item.active p {
    -webkit-animation-duration: 1s;
    animation-duration: 1.2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    animation-name: fadeInLeft;
    animation-delay: 1.8s;
}
.owl-slide .owl-item.active .slideLink {
    -webkit-animation-duration: 1s;
    animation-duration: 1.4s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    animation-name: fadeInUp;
    animation-delay: 2.4s;
}
.slideLine{
    margin-bottom: 1rem;
}
.circle{
    width: .4rem;
    height: .4rem;
    border-radius: 50%;
    background-color: var(--clr1);
    display: inline-block;
}
.line{
    height: .4rem;
    border-radius: 20rem;
    width: 6rem;
    background-color: var(--clr2);
    display: inline-block;
}
.menuIcon{
    width: 3.8rem;
    height: 3.5rem;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
.menuIcon span{
    max-width: 45%;
    width: 100%;
    height: .2rem;
    background-color: var(--color-text);
    display: inline-flex;
    transition: all .3s ease;
    border-radius: 20rem;
}
.menuIcon span:nth-child(2){
    margin: .3rem 0;
}
.pn span:first-child{
    transform: rotate(45deg) translateY(-0.1rem);
    transform-origin: 0;
}
.pn span:last-child{
    transform: rotate(-45deg) translateY(0.1rem);
    transform-origin: 0;
}
.pn span:nth-child(2){
    transform: translateX(-1rem);
    opacity: 0;
}
.aboutText{
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 2rem;
}
@media (min-width: 576px){
    .aboutText{
        padding: 3rem 5rem;
    }
}
@media (min-width: 768px){
    .aboutText{
        padding: 4rem 2rem;
    }
}
@media (min-width: 992px){
    .aboutText{
        padding: 0 0 0 2rem;
    }
}
@media (min-width: 1400px){
    .aboutText{
        padding: 0 0 0 5rem;
    }
}
.aboutTextHead{
    margin-bottom: 2rem;
}
.aboutTextHead span{
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--clr2);
    margin-bottom: 1rem;
    display: block;
}
.aboutTextHead h2{
    font-size: 2rem;
    font-weight: 800;
    margin: 0;
}
@media (min-width: 576px){
    .aboutTextHead h2{
        font-size: 2.2rem;
    }
}
@media (min-width: 768px){
    .aboutTextHead h2{
        font-size: 2.8rem;
    }
}
@media (min-width: 992px){
    .aboutTextHead h2{
        font-size: 3rem;
    }
}
@media (min-width: 1400px){
    .aboutTextHead h2{
        font-size: 3.5rem;
    }
}
.aboutText .content{
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}
.contentIconText{
    border: 1px solid var(--color-border);
    max-width: 13rem;
    width: 100%;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    position: relative;
    background-color: var(--color-surface);
}
@media (min-width: 768px){
    .contentIconText{
        height: 100%;
    }
}
@media (min-width: 992px){
    .contentIconText{
        height: auto;
    }
}
.contentIconText:before{
    content: "";
    position: absolute;
    top: 1rem;
    right: -1rem;
    width: 100%;
    height: 100%;
    background-color: var(--color-border);
    z-index: -1;
    border-radius: .5rem;
}
.contentIcon{
    max-width: 5rem;
    width: 100%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1rem;
}
.contentIconText h3{
    font-size: 2.5rem;
    font-weight: 900;
    margin-bottom: 0;
}
.contentIconText p{
    font-size: 1.6rem;
    margin: 0;
    opacity: 1;
    color: var(--color-text-muted);
}
.contentText{
    max-width: 100%;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
@media (min-width: 768px){
    .contentText{
        max-width: calc(100% - 3rem);
        padding-left: 3rem;
    }
}
.contentText p{
    font-size: 1.6rem;
}
.aboutServiceList{
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1rem;
    margin-top: 1rem;
}
@media (min-width: 768px){
    .aboutServiceList{
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 992px){
    .aboutServiceList{
        grid-template-columns: repeat(1, 1fr);
    }
}
@media (min-width: 1200px){
    .aboutServiceList{
        grid-template-columns: repeat(1, 1fr);
    }
}
@media (min-width: 1400px){
    .aboutServiceList{
        grid-template-columns: repeat(2, 1fr);
    }
}
.serviceListItem p{
    margin: 0;
    font-size: 1.6rem;
}
.serviceListItem p i{
    color: var(--clr2);
    margin-right: .5rem;
}
@font-face{
    font-family: signature;
    src: url(../fonts/signature.ttf);
}
.contentTextBottom{
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
}
@media (min-width: 768px){
    .contentTextBottom{
        flex-direction: initial;
        align-items: center;
    }
}
.signature{
    max-width: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    margin-bottom: 1rem;
}
@media (min-width: 768px){
    .signature{
        max-width: 20rem;
        margin-bottom: 0;
    }
}
.signature p{
    margin: 0;
    font-size: 4rem;
    font-family: signature;
    color: var(--clr3);
    line-height: 1;
}
@media (min-width: 768px){
    .signature p{
        font-size: 5.6rem;
    }
}
.aboutLinks{
    max-width: 100%;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
@media (min-width: 768px){
    .aboutLinks{
        max-width: calc(100% - 20rem);
    }
}
.linkButton{
    display: inline-block;
    border-radius: 0.4rem;
    padding: 1.2rem 3rem;
    background-color: var(--clr2);
    font-size: 1.4rem;
    font-weight: 500;
    position: relative;
    margin-top: 1rem;
    text-transform: uppercase;
    overflow: hidden;
    z-index: 0;
    color: var(--color-on-primary);
}
@media (min-width: 576px){
    .linkButton{
        font-size: 1.6rem;
    }
}
.linkButton:before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 100%;
    background-color: var(--color-primary-hover);
    z-index: -1;
    transition: all .3s linear;
}
.linkButton:hover{
    color: var(--color-on-primary);
    background-color: var(--color-primary-hover);
}
.linkButton:hover:before{
    right: 0;
}
.aboutImage{
    max-width: 100%;
    width: 100%;
    border-radius: 1rem;
    overflow: hidden;
    display: flex;
}
@media (min-width: 992px){
    .aboutImage{
        height: 100%;
    }
}
.cursor {
    position: fixed;
    background-color: var(--clr2);
    width: 1rem;
    height: 1rem;
    border-radius: 100%;
    transition: 0.3s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform,
        0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity;
    user-select: none;
    pointer-events: none;
    z-index: 10000;
    transform: scale(1);

    &.active {
        opacity: 1;
        transform: scale(1);
        background-color: var(--clr1);
    }

    &.menu-active {
        opacity: 1;
        transform: scale(1);
        background-color: var(--clr1);
    }

    &.hovered {
        opacity: 1;
        background-color: var(--clr1);
    }
}

.cursor-follower {
    position: fixed;
    border: 1px solid var(--clr2);
    width: 3rem;
    height: 3rem;
    border-radius: 100%;
    transition: 0.6s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform,
        0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity, 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) background;
    user-select: none;
    pointer-events: none;
    z-index: 10000;
    transform: translate(2px, 2px);

    &.active {
        opacity: 1;
        transform: scale(2);
        border: 1px solid var(--clr1);
    }

    &.menu-active {
        opacity: 1;
        transform: scale(2);
        border: 1px solid var(--clr1);
    }

    &.hovered {
        opacity: 1;
        border: 1px solid var(--clr1);
    }

}
.generalHeads{
    margin-bottom: 4rem;
}
.generalHeads h2{
    font-size: clamp(2rem, 1.5932rem + 2.0339vw, 3.5rem);
    font-weight: 900;
}
.generalHeads p{
    margin: 0;
    font-size: clamp(1.4rem, 1.3458rem + 0.2712vw, 1.6rem);
    color: var(--color-text-muted);
}
.flip-card {
    background-color: transparent;
    width: 100%;
    height: 30rem;
    perspective: 1000px;
    margin-bottom: 2rem;
}  
.flip-card-inner{
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner{
    transform: rotateY(-180deg);
} 
.flip-card-front, .flip-card-back{
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 1rem;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
} 
.flip-card-front{
    background-color: var(--color-surface);
    border-radius: 1rem;
} 
.flip-card-front:before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--clr3);
    opacity: .8;
    border-radius: 1rem;
}
.flip-card-back{
    background-color: var(--clr3);
    transform: rotateY(-180deg);
}
.flip-card-front{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3rem;
    background-color: var(--color-surface);
}
.flip-card-back{
    padding: 0 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
@media (min-width: 992px){
    .flip-card-back{
        padding: 0 5rem;
    }
}
@media (min-width: 1200px){
    .flip-card-back{
        padding: 0 1rem;
    }
}
.innerItem,
.innerItem2{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex: 1;
    width: 100%;
}
.innerIcon{
    max-width: 7rem;
    width: 100%;
    height: 7rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1rem;
}
.innerItem h3{
    flex: 1;
}
.innerItem h3,
.innerItem2 h3{
    font-size: clamp(1.5rem, 1.4186rem + 0.4068vw, 1.8rem);
    font-weight: 600;
    color: var(--color-bg);
    margin: 0;
    width: 100%;
}
.innerItem h3 a,
.innerItem2 h3 a{
    color: var(--color-bg);
}
.innerItem h3:hover a,
.innerItem2 h3:hover a{
    color: var(--clr1);
}
.innerItem2 p{
    font-size: clamp(1.4rem, 1.3458rem + 0.2712vw, 1.6rem);
    color: var(--color-bg);
    margin-top: 1rem;
    margin-bottom: 0;
    font-weight: 400;
}
.serviceLink{
    font-size: 1.6rem;
    display: inline-block;
    margin-top: 1rem;
    color: var(--clr1);
    font-weight: 500;
}
@media (min-width: 1400px){
    .mt10{
        margin-top: 10rem;
    }
}
.services .blob{
    position: absolute;
    max-width: 70rem;
    width: 100%;
    top: -14rem;
    right: 5rem;
    z-index: -1;
}
.services .blob2{
    position: absolute;
    max-width: 60rem;
    width: 100%;
    bottom: -15rem;
    left: -3rem;
    z-index: -1;
}
.services{
    overflow: hidden;
}
.contactIndex{
    background-image: url(../images/parallax.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    padding: 5rem 0;
    position: relative;
    margin-top: 5rem;
}
.contactIndex:before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--clr3);
    opacity: .8;
}
.contactIndexText{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
}
@media (min-width: 768px){
    .contactIndexText{
        max-width: 60rem;
    }
}
@media (min-width: 992px){
    .contactIndex{
        padding: 8rem 0;
    }
    .contactIndexText{
        max-width: 70rem;
    }
}
@media (min-width: 1400px){
    .contactIndexText{
        max-width: 80rem;
    }
}
.contactIndexText h3{
    color: var(--color-bg);
    margin-bottom: 1rem;
    font-size: clamp(2rem, 1.5932rem + 2.0339vw, 3.5rem);
    font-weight: 800;
}
.contactIndexText p{
    font-size: 1.6rem;
    color: var(--color-bg);
}
.contactIndexText a{
    display: inline-block;
    border-radius: .4rem;
    padding: 1.5rem 3rem;
    font-size: 1.6rem;
    border: 1px solid var(--color-primary);
    background-color: var(--color-primary);
    color: var(--color-on-primary);
    margin-top: 1rem;
}
.contactIndexText a:hover{
    background-color: var(--color-primary-hover);
    border: 1px solid var(--color-primary-hover);
    color: var(--color-on-primary);
}
/* Modern Team Section */
.team-modern {
    position: relative;
    background-color: var(--color-bg);
}

.team-header-wrapper {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 3.5rem;
    gap: 2rem;
}

.team-heads {
    margin-bottom: 0;
    max-width: 60rem;
}

.team-badge-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background-color: rgba(104, 120, 110, 0.12);
    color: var(--color-primary);
    font-size: 1.3rem;
    font-weight: 600;
    padding: 0.6rem 1.4rem;
    border-radius: 50rem;
    margin-bottom: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.team-badge-tag i {
    font-size: 1.5rem;
}

.team-header-actions {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.team-splide-arrows {
    display: flex;
    align-items: center;
    gap: 1rem;
    position: static;
}

.splide__arrow.team-arrow {
    position: static;
    transform: none;
    width: 4.6rem;
    height: 4.6rem;
    border-radius: 50%;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    font-size: 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    opacity: 1;
}

.splide__arrow.team-arrow:hover:not(:disabled) {
    background-color: var(--color-primary);
    color: #ffffff;
    border-color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(104, 120, 110, 0.25);
}

.splide__arrow.team-arrow:disabled,
.splide__arrow.team-arrow.is-disabled {
    opacity: 0.35;
    cursor: not-allowed;
    box-shadow: none;
}

.team-all-link {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    background-color: var(--color-primary);
    color: var(--color-on-primary);
    font-size: 1.45rem;
    font-weight: 600;
    padding: 1.2rem 2.4rem;
    border-radius: 50rem;
    box-shadow: 0 4px 14px rgba(104, 120, 110, 0.2);
    text-decoration: none;
}

.team-all-link:hover {
    background-color: var(--color-primary-hover);
    color: var(--color-on-primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(104, 120, 110, 0.3);
}

.team-all-link i {
    transition: transform 0.3s ease;
}

.team-all-link:hover i {
    transform: translateX(4px);
}

/* Modern Card */
.modernTeamCard {
    background: var(--color-surface);
    border: 1px solid rgba(104, 120, 110, 0.12);
    border-radius: 2rem;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 10px 30px -10px rgba(65, 65, 63, 0.06);
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
}

.modernTeamCard:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px -15px rgba(65, 65, 63, 0.12);
    border-color: rgba(104, 120, 110, 0.25);
}

.modernTeamCardMedia {
    position: relative;
    width: 100%;
    padding-top: 105%;
    overflow: hidden;
    background-color: var(--color-border);
    display: block;
}

.modernTeamCardPhoto {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
}

.modernTeamCard:hover .modernTeamCardPhoto {
    transform: scale(1.08);
}

.modernTeamCardOverlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(30, 35, 32, 0.75) 0%, rgba(30, 35, 32, 0.2) 50%, rgba(30, 35, 32, 0) 100%);
    opacity: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 2rem;
    transition: opacity 0.35s ease;
}

.modernTeamCard:hover .modernTeamCardOverlay {
    opacity: 1;
}

.modernTeamCardBtn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: rgba(250, 248, 245, 0.95);
    color: var(--color-primary);
    font-size: 1.35rem;
    font-weight: 600;
    padding: 0.8rem 1.8rem;
    border-radius: 50rem;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
    transform: translateY(12px);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    backdrop-filter: blur(8px);
}

.modernTeamCard:hover .modernTeamCardBtn {
    transform: translateY(0);
}

.modernTeamBadge {
    position: absolute;
    top: 1.4rem;
    left: 1.4rem;
    background: rgba(250, 248, 245, 0.92);
    backdrop-filter: blur(10px);
    color: var(--color-primary);
    font-size: 1.2rem;
    font-weight: 600;
    padding: 0.5rem 1.2rem;
    border-radius: 50rem;
    border: 1px solid rgba(104, 120, 110, 0.15);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    z-index: 2;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.modernTeamBadge i {
    color: var(--color-primary);
    font-size: 1.4rem;
}

.modernTeamCardBody {
    padding: 2.2rem 2.2rem 2rem 2.2rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.modernTeamCardMeta {
    margin-bottom: 1rem;
}

.modernTeamCardTitle {
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 0.3rem 0;
    line-height: 1.3;
}

.modernTeamCardTitle a {
    color: var(--color-text);
    font-weight: 500;
    text-decoration: none;
}

.modernTeamCardTitle a span {
    font-weight: 700;
    color: var(--color-primary);
}

.modernTeamCardTitle a:hover {
    color: var(--color-primary);
}

.modernTeamCardRole {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block;
}

.modernTeamCardBio {
    font-size: 1.45rem;
    color: var(--color-text-muted);
    line-height: 1.6;
    margin-bottom: 2rem;
    flex: 1;
}

.modernTeamCardBio p {
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.modernTeamCardFooter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 1.4rem;
    border-top: 1px solid rgba(221, 215, 208, 0.6);
    margin-top: auto;
}

.modernTeamSocial {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.modernTeamSocial a {
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 50%;
    background-color: var(--color-bg);
    color: var(--color-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    transition: all 0.25s ease;
    text-decoration: none;
}

.modernTeamSocial a:hover {
    background-color: var(--color-primary);
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(104, 120, 110, 0.25);
}

.modernTeamLink {
    width: 3.8rem;
    height: 3.8rem;
    border-radius: 50%;
    background-color: rgba(104, 120, 110, 0.1);
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    text-decoration: none;
}

.modernTeamCard:hover .modernTeamLink,
.modernTeamLink:hover {
    background-color: var(--color-primary);
    color: #ffffff;
    transform: translateX(3px);
}

/* Legacy teamBox backwards compatibility */
.teamBox {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-bottom: 4rem;
}

.teamSocial {
    margin-top: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 1.5rem;
}

.teamSocial a {
    font-size: 1.6rem;
}

.teamSocial a:hover {
    color: var(--clr2);
}

/* Splide Pagination Customization for Team */
.team-modern .splide__pagination {
    position: relative;
    bottom: 0;
    margin-top: 3rem;
    gap: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.team-modern .splide__pagination__page {
    width: 10px;
    height: 10px;
    background: var(--color-border);
    opacity: 0.7;
    transition: all 0.3s ease;
    border-radius: 50rem;
    border: none;
    margin: 0;
}

.team-modern .splide__pagination__page.is-active {
    width: 32px;
    background: var(--color-primary);
    opacity: 1;
    border-radius: 50rem;
}
/* Modern Comment / Testimonial Section */
.comment-modern {
    background-color: var(--color-surface);
    position: relative;
    padding: 8rem 0;
}

.comment-header-wrapper {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 3.5rem;
    gap: 2rem;
}

.comment-heads {
    max-width: 60rem;
}

.comment-badge-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background-color: rgba(104, 120, 110, 0.12);
    color: var(--color-primary);
    font-size: 1.3rem;
    font-weight: 600;
    padding: 0.6rem 1.4rem;
    border-radius: 50rem;
    margin-bottom: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.comment-badge-tag i {
    font-size: 1.5rem;
}

.comment-rating-summary {
    background: var(--color-bg);
    padding: 0.8rem 1.6rem;
    border-radius: 50rem;
    border: 1px solid var(--color-border);
    font-size: 1.35rem;
    color: var(--color-text);
}

.comment-rating-summary .stars-summary i {
    color: #E6A100;
    font-size: 1.5rem;
}

.comment-splide-arrows {
    display: flex;
    align-items: center;
    gap: 1rem;
    position: static;
}

.splide__arrow.comment-arrow {
    position: static;
    transform: none;
    width: 4.6rem;
    height: 4.6rem;
    border-radius: 50%;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    font-size: 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    opacity: 1;
}

.splide__arrow.comment-arrow:hover:not(:disabled) {
    background-color: var(--color-primary);
    color: #ffffff;
    border-color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(104, 120, 110, 0.25);
}

.splide__arrow.comment-arrow:disabled,
.splide__arrow.comment-arrow.is-disabled {
    opacity: 0.35;
    cursor: not-allowed;
    box-shadow: none;
}

/* Modern Comment Card */
.modernCommentCard {
    background: var(--color-bg);
    border: 1px solid rgba(104, 120, 110, 0.12);
    border-radius: 2rem;
    padding: 3.2rem 3rem 2.8rem 3rem;
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 10px 30px -10px rgba(65, 65, 63, 0.04);
}

.modernCommentCard:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px -15px rgba(65, 65, 63, 0.1);
    border-color: rgba(104, 120, 110, 0.25);
}

.modernCommentQuoteIcon {
    position: absolute;
    top: 2.2rem;
    right: 2.6rem;
    font-size: 4.2rem;
    color: rgba(104, 120, 110, 0.14);
    pointer-events: none;
    line-height: 1;
}

.modernCommentHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.8rem;
}

.modernCommentRatings {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.modernCommentRatings .star {
    font-size: 1.8rem;
    line-height: 1;
}

.modernCommentRatings .star-filled {
    color: #E6A100;
}

.modernCommentRatings .star-empty {
    color: var(--color-border);
}

.modernCommentVerified {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-primary);
    background: rgba(104, 120, 110, 0.1);
    padding: 0.4rem 1rem;
    border-radius: 50rem;
}

.modernCommentVerified i {
    font-size: 1.3rem;
}

.modernCommentBody {
    font-size: 1.55rem;
    color: var(--color-text);
    line-height: 1.7;
    font-style: italic;
    margin-bottom: 2.2rem;
    flex: 1;
}

.modernCommentBody p {
    margin: 0;
}

.modernCommentAuthor {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    padding-top: 1.8rem;
    border-top: 1px solid rgba(221, 215, 208, 0.6);
    margin-top: auto;
}

.modernCommentAvatar {
    width: 4.8rem;
    height: 4.8rem;
    border-radius: 50%;
    background: var(--color-surface);
    border: 2px solid var(--color-primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.8rem;
    overflow: hidden;
    flex-shrink: 0;
}

.modernCommentAvatar img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.modernCommentAuthorInfo h3 {
    font-size: 1.65rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 0.2rem 0;
}

.modernCommentAuthorInfo span {
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--color-text-muted);
    display: block;
}

/* Splide Pagination for Comments */
.comment-modern .splide__pagination {
    position: relative;
    bottom: 0;
    margin-top: 3rem;
    gap: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.comment-modern .splide__pagination__page {
    width: 10px;
    height: 10px;
    background: var(--color-border);
    opacity: 0.7;
    transition: all 0.3s ease;
    border-radius: 50rem;
    border: none;
    margin: 0;
}

.comment-modern .splide__pagination__page.is-active {
    width: 32px;
    background: var(--color-primary);
    opacity: 1;
    border-radius: 50rem;
}
.blogBox{
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-bottom: 2rem;
}
.blogBoxImage{
    border-radius: 1rem;
    overflow: hidden;
}
@media (min-width: 768px){
    .blogBoxImage{
        height: 25rem;
    }
}
.blogBoxImage img{
    transition: all .3s ease;
}
@media (min-width: 768px){
    .blogBoxImage img{
        height: 100%;
        object-fit: cover;
    }
}
.blogBox:hover .blogBoxImage img{
    transform: scale(1.2);
    -webkit-filter: brightness(70%);
}
.blogBox .content{
    padding: 2rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    background-color: var(--color-surface);
    max-width: 90%;
    width: 100%;
    margin: -10rem auto 0 auto;
    border-radius: 1rem;
    position: relative;
    z-index: 1;
}
.blogBox .content h3{
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: .5rem;
    line-height: 2.4rem;
}
@media (min-width: 992px){
    .blogBox .content h3{
        font-size: 1.7rem;
    }
}
.blogBox:hover .content h3 a{
    color: var(--clr2);
}
.blogBox .content p{
    font-size: 1.5rem;
    color: var(--color-text-muted);
    flex: 1;
}
.blogLink{
    display: inline-block;
    font-size: 1.5rem;
    font-weight: 500;
    position: relative;
    color: var(--clr2);
    align-self: flex-start;
}
.blogLink:after{
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: -.5rem;
    height: .2rem;
    background-color: var(--clr2);
    transition: all .3s ease;
}
.blogLink:hover{
    color: var(--clr2);
}
.blogLink:hover::after{
    right: 0;
}
.blogBox:hover .blogLink:after{
    right: 0;
}
#toTop {
    position: fixed;
    z-index: 10;
    bottom: 2rem;
    right: 2rem;
    width: 5rem;
    height: 5rem;
    background-color: var(--clr2);
    color: var(--color-on-primary);
    transition: all .3s ease;
    border-radius: 0.3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.5rem;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transform: translateY(-5rem);
    overflow: hidden;
}
#toTop:hover{
    background-color: var(--color-primary-hover);
    color: var(--color-on-primary);
}
.toTopShow {
    visibility: visible!important;
    opacity: 1!important;
    pointer-events: all!important;
    transform: translateY(0)!important;
}
#loader{
    position: fixed;
    z-index: 300;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(243 238 232 / .9);
    backdrop-filter: blur(5px);
}
.loaderSide{
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 18rem;
    width: 100%;
}
@media (min-width: 576px){
    .loaderSide{
        max-width: 20rem;
    }
}
@media (min-width: 768px){
    .loaderSide{
        max-width: 22rem;
    }
}
@media (min-width: 1200px){
    .loaderSide{
        max-width: 24rem;
    }
}
@media (min-width: 1400px){
    .loaderSide{
        max-width: 25rem;
    }
}
.loaderSide figure{
    margin-bottom: 2rem;
}
.loaderLine{
    height: .2rem;
    background-color: var(--color-border);
    width: 100%;
    position: relative;
}
.loaderLine:before{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 7rem;
    background-color: var(--clr2);
    transition: all .3s ease;
    animation: moveLine 2s linear infinite;
}
@keyframes moveLine {
    0% {
      left: 0;
    }
    50% {
      left: calc(100% - 7rem);
    }
    100% {
      left: 0;
    }
}
.cursor,
.cursor-follower{
    visibility: hidden;
}
/* ==========================================================================
   MODERN FOOTER & CTA BANNER STYLES
   ========================================================================== */

/* Top CTA Section */
.footerCtaSection {
    background-color: var(--color-bg);
    position: relative;
    padding-bottom: 0;
    margin-bottom: -5rem;
    z-index: 10;
}

.footerCtaCard {
    background: linear-gradient(135deg, var(--color-primary-hover) 0%, var(--color-primary) 100%);
    border-radius: 2.4rem;
    padding: 3.5rem 4rem;
    box-shadow: 0 20px 45px -10px rgba(88, 103, 94, 0.35);
    position: relative;
    overflow: hidden;
}

.footerCtaCard::before {
    content: "";
    position: absolute;
    top: -50%;
    right: -20%;
    width: 35rem;
    height: 35rem;
    background: radial-gradient(circle, rgba(223, 195, 168, 0.25) 0%, rgba(223, 195, 168, 0) 70%);
    pointer-events: none;
    border-radius: 50%;
}

.footerCtaBadge {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: rgba(250, 248, 245, 0.18);
    backdrop-filter: blur(8px);
    color: #FAF8F5;
    font-size: 1.3rem;
    font-weight: 600;
    padding: 0.5rem 1.4rem;
    border-radius: 50rem;
    margin-bottom: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.footerCtaBadge i {
    color: var(--color-secondary);
}

.footerCtaText h2 {
    color: #FAF8F5;
    font-size: clamp(2.2rem, 1.8rem + 1.2vw, 3.2rem);
    font-weight: 800;
    margin-bottom: 0.8rem;
    line-height: 1.25;
}

.footerCtaText p {
    color: rgba(250, 248, 245, 0.88);
    font-size: 1.55rem;
    margin: 0;
    max-width: 58rem;
}

.footerCtaButtons {
    display: inline-flex;
    align-items: center;
    gap: 1.2rem;
    flex-wrap: wrap;
}

.footerCtaBtn {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    background-color: var(--color-secondary);
    color: var(--color-text);
    font-size: 1.5rem;
    font-weight: 700;
    padding: 1.3rem 2.6rem;
    border-radius: 50rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
    text-decoration: none;
}

.footerCtaBtn:hover {
    background-color: #ffffff;
    color: var(--color-primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.footerCtaPhone {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    background-color: rgba(250, 248, 245, 0.15);
    color: #FAF8F5;
    font-size: 1.5rem;
    font-weight: 600;
    padding: 1.3rem 2.4rem;
    border-radius: 50rem;
    border: 1px solid rgba(250, 248, 245, 0.25);
    text-decoration: none;
}

.footerCtaPhone:hover {
    background-color: rgba(250, 248, 245, 0.3);
    color: #ffffff;
    transform: translateY(-2px);
}

/* Modern Footer Base */
#footer.modern-footer {
    padding: 11rem 0 3.5rem 0;
    background-color: var(--clr3);
    position: relative;
}

.footerLogo {
    max-width: 15rem;
    width: 100%;
    display: inline-block;
    margin-bottom: 0.5rem;
}

.footerLogo img {
    max-height: 16rem;
    width: auto;
    display: block;
    object-fit: contain;
}

.footerBrandDesc {
    color: rgba(243, 238, 232, 0.75);
    font-size: 1.45rem;
    line-height: 1.65;
    margin-top: 1.6rem;
    margin-bottom: 2.2rem;
}

.fbox h4 {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-bg);
    position: relative;
    margin-bottom: 2.4rem;
    display: inline-block;
}

.fbox h4::before {
    display: none;
}

.fbox h4::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -0.8rem;
    width: 3.5rem;
    height: 0.3rem;
    border-radius: 50rem;
    background-color: var(--color-secondary);
}

.footerUl {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.footerLi {
    padding: 0;
    transition: transform 0.25s ease;
}

.footerLi a {
    color: rgba(243, 238, 232, 0.75);
    font-size: 1.5rem;
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: color 0.25s ease;
}

.footerLi a i {
    font-size: 1.4rem;
    color: var(--color-secondary);
    transition: transform 0.25s ease;
}

.footerLi:hover {
    transform: translateX(6px);
}

.footerLi:hover a {
    color: #ffffff;
}

.footerLi:hover a i {
    transform: translateX(3px);
}

/* Contact List */
.fContactList {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
}

.fContactSide {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    background: rgba(243, 238, 232, 0.04);
    padding: 1.2rem 1.5rem;
    border-radius: 1.4rem;
    border: 1px solid rgba(243, 238, 232, 0.08);
    transition: all 0.3s ease;
    margin-bottom: 0 !important;
}

.fContactSide:hover {
    background: rgba(243, 238, 232, 0.08);
    border-color: rgba(223, 195, 168, 0.3);
    transform: translateY(-2px);
}

.fContactIcon {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    background-color: var(--color-primary);
    flex-shrink: 0;
    transition: all 0.3s ease;
    overflow: hidden;
}

.fContactIcon::before {
    display: none;
}

.fContactSide:hover .fContactIcon {
    background-color: var(--color-secondary);
    color: var(--color-text);
}

.fContactIcon i {
    font-size: 1.8rem;
}

.fContactText {
    max-width: none;
    padding-left: 0;
    padding-right: 0 !important;
}

.fContactText span {
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--color-secondary);
    margin-bottom: 0.2rem;
}

.fContactText a,
.fContactText p {
    font-size: 1.45rem;
    color: #FAF8F5;
    font-weight: 500;
    margin: 0;
    line-height: 1.4;
}

.fContactText a:hover {
    color: var(--color-secondary);
}

/* Modern Form Input */
.modernFooterForm {
    margin-top: 1.5rem;
}

.footerInputWrapper {
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(243, 238, 232, 0.06);
    border: 1px solid rgba(243, 238, 232, 0.15);
    border-radius: 50rem;
    padding: 0.4rem 0.4rem 0.4rem 1.6rem;
    transition: all 0.3s ease;
}

.footerInputWrapper:focus-within,
.footerInputWrapper:hover {
    border-color: var(--color-secondary);
    background: rgba(243, 238, 232, 0.1);
    box-shadow: 0 0 20px rgba(223, 195, 168, 0.15);
}

.footerInput {
    border: none;
    background: transparent;
    color: #FAF8F5;
    font-size: 1.45rem;
    width: 100%;
    outline: none;
    padding: 0.8rem 0;
}

.footerInput::placeholder {
    color: rgba(243, 238, 232, 0.45);
}

.footerSubmit {
    width: 4.2rem;
    height: 4.2rem;
    border-radius: 50%;
    background-color: var(--color-secondary);
    color: var(--color-text);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    transition: all 0.3s ease;
    flex-shrink: 0;
    cursor: pointer;
    padding: 0;
}

.footerSubmit:hover {
    background-color: #ffffff;
    color: var(--color-primary-hover);
    transform: scale(1.06);
}

/* Social Media Icons */
.footerSocialMedia h5 {
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 1.2rem;
    color: var(--color-bg);
}

.socialLinks {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.socialLinks a {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background-color: rgba(243, 238, 232, 0.06);
    color: rgba(243, 238, 232, 0.85);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 1.8rem;
    border: 1px solid rgba(243, 238, 232, 0.1);
    transition: all 0.3s ease;
}

.socialLinks a::before {
    display: none;
}

.socialLinks a:hover {
    background-color: var(--color-secondary);
    color: var(--color-text);
    border-color: var(--color-secondary);
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

/* Footer Bottom Deep Bar */
.deep {
    margin-top: 5rem;
    border-top: 1px solid rgba(243, 238, 232, 0.12);
    padding-top: 2.8rem;
}

.deepInner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.deep p {
    font-size: 1.4rem;
    font-weight: 400;
    color: rgba(243, 238, 232, 0.65);
    margin: 0;
}

.pillCredit {
    color: var(--color-secondary);
    font-size: 1.9rem;
    font-family: pill;
    transition: all 0.3s ease;
    text-decoration: none;
}

.pillCredit:hover {
    color: #ffffff;
}

@media (max-width: 991px) {
    .footerCtaCard {
        padding: 3rem 2.5rem;
    }
    .footerCtaButtons {
        margin-top: 1.5rem;
    }
    #footer.modern-footer {
        padding-top: 9rem;
    }
}
.backdrop{
    position: fixed;
    top: var(--header);
    left: 100%;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(65 65 63 / 0.5);
    backdrop-filter: blur(5px);
    z-index: 200;
    transition: all .3s linear;
}
.mobileMenu{
    position: fixed;
    top: var(--header);
    left: -100%;
    max-width: 25rem;
    width: 100%;
    height: 100%;
    transition: all .3s linear;  
    z-index: 250;
    background-color: var(--color-surface);  
    overflow: hidden;
}
@media (min-width: 576px){
    .mobileMenu{
        max-width: 30rem;
    }
}
@media (min-width: 768px){
    .mobileMenu{
        max-width: 35rem;
    }
}
.mobileMenuSide{
    padding: 1rem 1rem 2rem 1rem;
    overflow-y: auto;
    height: calc(100% - var(--header));
    width: 100%;
    display: flex;
    flex-direction: column;
    flex: 1;
    border-top: 1px solid var(--color-border);
}
.mobileli{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.4rem;
}
.mobileli:hover,
.mobileli:hover a,
.mobileDrops a:hover{
    color: var(--clr2);
}
.mobileli i{
    transition: all .3s ease;
}
.mobileli:hover i{
    transform: rotate(90deg);
}
.mobilea{
    font-size: 1.4rem;
    width: 100%;
}
@media (min-width: 375px) {
    .mobileli{
        font-size: 1.5rem;
    }
    .mobilea{
        font-size: 1.5rem;
    }
}
@media (min-width: 425px) {
    .mobileli{
        font-size: 1.6rem;
    }
    .mobilea{
        font-size: 1.6rem;
    }
}
.mobileli:not(:last-child){
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 1rem;
}
.left0{
    left: 0;
}
.mobileDrops{
    background-color: var(--color-bg);
    display: none;
    padding: 1rem;
    margin-bottom: 1rem;
}
.mobileDrops a{
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 1.4rem;
}
.mobileDrops a:not(:last-child){
    margin-bottom: 1rem;
}
@media (min-width: 375px) {
    .mobileDrops a{
        font-size: 1.5rem;
    }
}
@media (min-width: 425px) {
    .mobileDrops a{
        font-size: 1.6rem;
    }
}
/* ==========================================================================
   ULTRA-MODERN UNIQUE HERO BANNER DESIGN
   ========================================================================== */
.banner {
    background: linear-gradient(135deg, #1C241E 0%, #2A362D 45%, #425245 100%) !important;
    min-height: 32rem !important;
    height: auto !important;
    padding: 7rem 0 8rem 0 !important;
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    border-bottom-left-radius: 3.5rem;
    border-bottom-right-radius: 3.5rem;
    box-shadow: 0 20px 50px -10px rgba(28, 36, 30, 0.35);
    margin-bottom: 3.5rem;
}

/* Floating Glow Effects */
.banner::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -10%;
    width: 45rem;
    height: 45rem;
    background: radial-gradient(circle, rgba(223, 195, 168, 0.18) 0%, rgba(223, 195, 168, 0) 70%);
    border-radius: 50%;
    pointer-events: none;
    animation: bannerGlow 9s ease-in-out infinite alternate;
}

.banner::after {
    content: "";
    position: absolute;
    bottom: -40%;
    right: -5%;
    width: 42rem;
    height: 42rem;
    background: radial-gradient(circle, rgba(170, 181, 164, 0.22) 0%, rgba(170, 181, 164, 0) 70%);
    border-radius: 50%;
    pointer-events: none;
}

@keyframes bannerGlow {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(40px, 25px) scale(1.12); }
}

.bannerSide {
    height: auto !important;
    min-height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    position: relative !important;
    z-index: 5 !important;
    padding: 0 !important;
}

/* Pill Tag Badge */
.bannerSide::before {
    content: "✦ İDİL PSİKOLOJİ";
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: rgba(250, 248, 245, 0.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--color-secondary);
    font-size: 1.25rem;
    font-weight: 700;
    padding: 0.55rem 1.6rem;
    border-radius: 50rem;
    border: 1px solid rgba(223, 195, 168, 0.35);
    margin-bottom: 1.6rem;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* H1 Page Title */
.bannerSide h1 {
    font-size: clamp(3.2rem, 2.5rem + 2.8vw, 5.2rem) !important;
    font-weight: 900 !important;
    color: #FAF8F5 !important;
    margin-top: 0 !important;
    margin-bottom: 2rem !important;
    line-height: 1.15 !important;
    letter-spacing: -1px !important;
    text-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
    position: relative !important;
}

/* Breadcrumb Navigation Pill */
.bannerSide ul {
    display: inline-flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    column-gap: 2.2rem !important;
    row-gap: 0.6rem !important;
    background: rgba(250, 248, 245, 0.1) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(250, 248, 245, 0.22) !important;
    border-radius: 50rem !important;
    padding: 0.8rem 2.4rem !important;
    margin-top: 0.5rem !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12) !important;
}

.bannerSide ul li {
    font-size: 1.45rem !important;
    color: rgba(250, 248, 245, 0.85) !important;
    font-weight: 500 !important;
    display: inline-flex !important;
    align-items: center !important;
}

.bannerSide ul li:first-child::before {
    content: "\ee2c";
    font-family: 'remixicon' !important;
    font-size: 1.5rem;
    color: var(--color-secondary);
    margin-right: 0.6rem;
}

.bannerSide ul li:not(:last-child):after {
    content: "\ea6e" !important;
    font-family: 'remixicon' !important;
    position: absolute !important;
    top: 50% !important;
    right: -1.5rem !important;
    transform: translateY(-50%) !important;
    font-size: 1.4rem !important;
    color: rgba(223, 195, 168, 0.6) !important;
    background: transparent !important;
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
}

.bannerSide ul li a {
    color: rgba(250, 248, 245, 0.85) !important;
    font-size: 1.45rem !important;
    font-weight: 500 !important;
    transition: all 0.25s ease !important;
    text-decoration: none !important;
}

.bannerSide ul li a:hover {
    color: #ffffff !important;
}

.bannerActive {
    color: var(--color-secondary) !important;
    font-weight: 700 !important;
}
.sBox{
    position: relative;
    margin-bottom: 2rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    transition: all .3s ease;
}
.sBoxImage{
    width: 100%;
    border-radius: 1rem 1rem 0 0;
    overflow: hidden;
    position: relative;
}
.sBoxIcon{
    width: 5rem;
    height: 5rem;
    border-radius: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--clr3);
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    padding: 1rem;
}
.sBox .content{
    width: 100%;
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 2rem;
    border-radius: 0 0 1rem 1rem;
    background-color: var(--color-surface);
}
.sBox .content h3{
    font-size: 1.6rem;
    font-weight: 600;
    margin-bottom: 1rem;
}
@media (min-width: 1200px){
    .sBox .content h3{
        font-size: 1.8rem;
    }
}
.sBox .content p{
    font-size: 1.6rem;
    color: var(--color-text-muted);
    opacity: 1;
    flex: 1;
}
.sLink{
    display: inline-block;
    font-size: 1.6rem;
    font-weight: 500;
}
.sBox:hover{
    box-shadow: rgb(65 65 63 / 0.12) 0px 8px 24px;
}
.sBox:hover .s1{
    transform: scale(1.1);
}
.sBox:hover .sBoxIcon{
    background-color: var(--clr2);
}
.sBox:hover .content h3 a{
    color: var(--clr2);
}
.sBox:hover .sLink{
    color: var(--clr2);
}
.serviceImage{
    margin-bottom: 2rem;
    border-radius: 1rem;
    overflow: hidden;
    max-width: 100%;
    width: 100%;
}
@media (min-width: 992px){
    .serviceImage{
        height: 30rem;
    }
}
.serviceImage img{
    object-fit: cover;
}
.serviceHead{
    margin-bottom: 2rem;
}
.serviceHead h2{
    font-size: clamp(1.8rem, 1.6222rem + 0.8889vw, 2.4rem);
    font-weight: 900;
    margin: 0;
}
.serviceMediumText{
    margin-bottom: 2rem;
}
@media (min-width: 992px){
    .serviceMediumText{
        margin-bottom: 0;
    }
    .serviceMediumText,
    .serviceHead{
        padding: 0 1.5rem;
    }
}
.serviceMediumText b{
    color: var(--clr4)!important;
}
.serviceMediumText p{
    font-size: 1.5rem;
    color: var(--color-text);
    line-height: 2.7rem;
    margin-bottom: 2rem;
}
@media (min-width: 992px){
    .serviceMediumText p{
        font-size: 1.6rem;
    }
}
.sticky{
    position: sticky;
    top: 1rem;
}
.serviceSubMenu{
    border-radius: 1rem;
    padding: 2rem;
    background-color: var(--color-surface);
    margin-bottom: 2rem;
}
.sactive{
    background-color: var(--clr2)!important;
    color: var(--color-bg)!important;
}
.sactive:before{
    display: none!important;
}
.serviceSubMenu a{
    border-radius: .4rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    padding: 1.5rem 1rem;
    font-size: 1.4rem;
    background-color: var(--color-bg);
    position: relative;
    z-index: 1;
    overflow: hidden;
    transition: all .6s ease;
}
@media (min-width: 1400px){
    .serviceSubMenu{
        padding: 3rem;
    }
    .serviceSubMenu a{
        font-size: 1.5rem;
    }
}
.serviceSubMenu a i{
    font-size: 1.2rem;
    margin-right: .5rem;
}
.serviceSubMenu a:hover::before{
    width: 100%;
}
.serviceSubMenu a:hover{
    color: var(--color-bg);
}
.serviceSubMenu a:before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 0;
    background-color: var(--clr2);
    transition: all .6s linear;
    z-index: -1;
}
.serviceSubMenu a:not(:last-child){
    margin-bottom: 1rem;
}
.serviceContacts{
    padding: 3rem 3rem 0 3rem;
    border-radius: 1rem;
    background-color: var(--color-surface);
}
.serviceContactImage{
    width: 100%;
}
.serviceContacts p{
    font-size: 1.6rem;
    font-style: italic;
    color: var(--color-text-muted);
}
.serviceContacts a{
    font-size: 1.4rem;
    color: var(--clr2);
    background-color: var(--color-secondary-light);
    border-radius: 0.4rem;
    padding: 1rem 2rem;
    display: inline-block;
    margin-top: 1rem;
}
.serviceContacts a:hover{
    background-color: var(--color-secondary);
    color: var(--clr2);
}
.ekipImage{
    max-width: 100%;
    width: 100%;
    margin-bottom: 2rem;
    border-radius: 1rem;
    overflow: hidden;
}
.jc-start{
    justify-content: flex-start;
}
@media (min-width: 992px){
    .jc-start{
        padding: 0 1.5rem;
    }
}
.star{
    font-size: 1.8rem;
}
.star-filled{
    color: var(--clr2);
}
.serviceDetailsDiv{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 1.5rem;
    column-gap: 2rem;
    flex-wrap: wrap;
    row-gap: 1rem;
}
.serviceDetailsDiv li{
    font-size: 1.5rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    font-weight: 500;
}
.serviceDetailsDiv i{
    margin-right: .5rem;
    color: var(--clr2);
}
.serviceDetailsDiv li span{
    text-transform: capitalize;
    margin-right: .5rem;
}
@media (min-width: 992px){
    .serviceDetailsDiv{
        padding: 0 1.5rem;
    }
}
.contactContentItem{
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.contactContentIcon{
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 0.3rem;
    background: var(--color-primary-light);
    color: var(--color-text);
    justify-content: center;
    align-items: center;
    display: flex;
    font-size: 1.6rem;
}
.contactContentHead{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    max-width: calc(100% - 3.5rem);
    width: 100%;
    padding-left: 1rem;
}
.contactContentHead h3{
    margin: 0;
    font-size: 1.6rem;
}
.contactBox{
    margin-bottom: 2rem;
}
.contactBox h2{
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 2rem;
}
@media (min-width: 768px){
    .contactBox h2{
        font-size: 2.2rem;
    }
}
.contactContentList{
    padding: 1rem 0 1rem 4.5rem;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.contactContentList:before{
    content: "";
    position: absolute;
    top: 0;
    left: 1.6rem;
    bottom: 0;
    width: .2rem;
    background-color: var(--clr2);
}
.contactContentList a{
    font-size: 1.5rem;
    transition: all .3s ease;
}
.contactContentList a:hover{
    color: var(--clr2);
}
.contactContentList a:not(:last-child){
    margin-bottom: .5rem;
}
.contactBox .form-group{
    margin-bottom: 1rem;
}
.contactBox .form-group label{
    font-size: 1.4rem;
    font-weight: 500;
    margin-bottom: 1rem;
}
.contactBox .form-control{
    outline: none;
    box-shadow: none;
    background-color: var(--color-bg);
    border: none;
    padding: 1.2rem 1rem;
    font-size: 1.5rem;
    transition: all .3s ease;
}
.contactBox .form-control:hover{
    background-color: var(--color-secondary-light);
}
.contactSubmit{
    display: inline-block;
    border-radius: 0.4rem;
    background-color: var(--clr2);
    font-size: 1.6rem;
    padding: 1.2rem 2.5rem;
    color: var(--color-on-primary);
    font-weight: 500;
    transition: all .3s ease;
}
.contactSubmit:hover{
    background-color: var(--color-primary-hover);
    color: var(--color-on-primary);
}
.contactBox .socialLinks a{
    width: 4rem;
    height: 4rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 1.6rem;
    background-color: rgb(65 65 63 / .1);
    border-radius: 50%;
    color: var(--clr4);
    position: relative;
    overflow: hidden;
}
.contactBox .socialLinks a:before{
    content: "";
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    transition: all .3s ease;
    background-color: var(--clr2);
}
.contactBox .socialLinks a i{
    position: relative;
}
.contactBox .socialLinks a:hover:before{
    top: 0;
}
.contactBox .socialLinks a:hover{
    color: var(--color-bg);
}
.galeriImage{
    width: 100%;
    margin-bottom: 2rem;
    border-radius: 1rem;
    overflow: hidden;
}
.swal2-popup {
    font-size: 1.5rem!important;
}
.swal2-actions button{
    outline: none!important;
    box-shadow: none!important;
}
.accordion-button{
    padding: 2rem;
    font-size: 1.6rem;
    outline: none!important;
    box-shadow: none!important;
}
.accordion-button:focus{
    outline: none!important;
}
.accordion-body{
    padding: 2rem;
    font-size: 1.5rem;
}
.aboutDetailHead{
    margin-bottom: 2rem;
}
.aboutDetailHead h2{
    font-size: clamp(1.8rem, 1.6222rem + 0.8889vw, 2.4rem);
    font-weight: 900;
    margin: 0;
}
.aboutDetail p{
    font-size: 1.5rem;
    color: var(--color-text);
    line-height: 2.7rem;
    margin-bottom: 2rem;
}
@media (min-width: 992px){
    .aboutDetail p{
        font-size: 1.6rem;
    }
}
.aboutItems{
    margin-bottom: 5rem;
}
.notFound{
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
}
@media (min-width: 768px){
    .notFound{
        max-width: 50rem;
    }
}
/* İdil brand states for shared controls and third-party components. */
a:hover, a:focus-visible { color: var(--color-primary-hover); }
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
    outline: 2px solid var(--color-primary-hover);
    outline-offset: 3px;
}
#footer { color: var(--color-bg); }
#footer :focus-visible, .menuLinks :focus-visible {
    outline-color: var(--color-secondary);
}
#footer a:hover { color: var(--color-secondary); }
#footer .socialLinks a:hover { color: var(--color-on-primary); }
.form-control, .contactBox .form-control, .fbox .form-control {
    background-color: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-border);
    caret-color: var(--color-primary);
}
.form-control::placeholder { color: var(--color-text-muted); opacity: 1; }
.form-control:hover, .contactBox .form-control:hover, .fbox .form-control:hover {
    background-color: var(--color-bg);
}
.form-control:focus, .contactBox .form-control:focus, .fbox .form-control:focus {
    color: var(--color-text);
    background-color: var(--color-surface);
    border-color: var(--color-primary);
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    box-shadow: none;
}
#footer .form-control:focus { outline-color: var(--color-secondary); }
.form-control:disabled, button:disabled {
    background-color: var(--color-border);
    color: var(--color-text);
}
.accordion {
    --bs-accordion-bg: var(--color-surface);
    --bs-accordion-color: var(--color-text);
    --bs-accordion-border-color: var(--color-border);
    --bs-accordion-btn-bg: var(--color-surface);
    --bs-accordion-btn-color: var(--color-text);
    --bs-accordion-active-bg: var(--color-secondary-light);
    --bs-accordion-active-color: var(--color-text);
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2341413F'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    --bs-accordion-btn-active-icon: var(--bs-accordion-btn-icon);
}
.accordion-button:focus-visible, .swal2-actions button:focus-visible {
    outline: 2px solid var(--color-primary-hover)!important;
    outline-offset: -3px;
}
.swal2-popup, .swal2-validation-message {
    background: var(--color-surface)!important;
    color: var(--color-text)!important;
}
.swal2-title, .swal2-html-container { color: var(--color-text)!important; }
.swal2-styled.swal2-confirm, .swal2-styled.swal2-deny, .swal2-styled.swal2-cancel {
    background: var(--color-primary)!important;
    color: var(--color-on-primary)!important;
}
.swal2-styled.swal2-confirm:hover, .swal2-styled.swal2-deny:hover, .swal2-styled.swal2-cancel:hover {
    background: var(--color-primary-hover)!important;
}
.swal2-icon { color: var(--color-primary)!important; border-color: var(--color-primary-light)!important; }
.swal2-icon.swal2-error [class^='swal2-x-mark-line'],
.swal2-icon.swal2-success [class^='swal2-success-line'] { background: var(--color-primary)!important; }
.swal2-icon.swal2-success .swal2-success-ring { border-color: var(--color-primary-light)!important; }
.swal2-success-circular-line-left, .swal2-success-circular-line-right, .swal2-success-fix {
    background: var(--color-surface)!important;
}
.swal2-container.swal2-backdrop-show, .mfp-bg { background: rgb(65 65 63 / .85); }
.mfp-content, .mfp-title, .mfp-counter, .mfp-close, .mfp-preloader, .mfp-preloader a { color: var(--color-bg)!important; }
.mfp-figure:after { background: var(--color-text); box-shadow: 0 0 8px rgb(65 65 63 / .6); }
.mfp-arrow-left:before { border-right-color: var(--color-text); }
.mfp-arrow-left:after { border-right-color: var(--color-bg); }
.mfp-arrow-right:before { border-left-color: var(--color-text); }
.mfp-arrow-right:after { border-left-color: var(--color-bg); }
.splide__pagination__page, .owl-theme .owl-dots .owl-dot span { background: var(--color-border); }
.splide__pagination__page.is-active, .owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span { background: var(--color-primary); }
.splide__arrow, .owl-theme .owl-nav [class*='owl-'] { background: var(--color-secondary-light); color: var(--color-text); }
.splide__arrow svg { fill: var(--color-text); }
.splide__arrow:hover, .owl-theme .owl-nav [class*='owl-']:hover { background: var(--color-secondary); color: var(--color-text); }
/* Decorative raster shapes retain their dimensions and use the brand's sage tone. */
.services .blob img, .services .blob2 img, .contentIcon img {
    filter: grayscale(1) sepia(.2) hue-rotate(45deg) saturate(.5);
}
/* #77736F falls below 4.5:1 on both brand backgrounds; small copy uses the accessible text token. */
.entry-content p, .sBox .content p, .blogBox .content p,
.generalHeads p, .contentIconText p, .serviceContacts p,
.form-control::placeholder { color: var(--color-text); }

.mfp-preloader a:hover, .mfp-close:hover, .swal2-close:hover { color: var(--color-secondary)!important; }
.swal2-close { color: var(--color-text); }

/* Refined two-level header and navigation */
#header {
    position: relative;
    z-index: 210;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
}
.headerUtility {
    min-height: 4.2rem;
    background: var(--color-text);
    color: var(--color-bg);
}
.headerUtilityInner {
    min-height: 4.2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
}
.headerUtilityInner > p {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin: 0;
    color: var(--color-bg);
    font-size: 1.25rem;
    letter-spacing: .02em;
}
.headerUtilityInner > p span {
    width: .7rem;
    height: .7rem;
    flex: 0 0 .7rem;
    border-radius: 50%;
    background: var(--color-primary-light);
    box-shadow: 0 0 0 .4rem rgb(170 181 164 / .15);
}
.headerUtility .headerContactInfo {
    gap: 2.4rem;
    min-width: 0;
}
.headerUtility .hcitem {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    color: var(--color-bg);
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1.2;
}
.headerUtility a.hcitem:hover {
    color: var(--color-secondary);
}
.headerUtility .hcitem i {
    color: var(--color-primary-light);
    font-size: 1.5rem;
}
.headerUtility .hcitem:not(:first-child)::before {
    top: 50%;
    bottom: auto;
    left: -1.2rem;
    height: 1.4rem;
    background: rgb(243 238 232 / .22);
    transform: translateY(-50%);
}
.headerMain {
    background: rgb(243 238 232 / .96);
    backdrop-filter: blur(12px);
}
.headerMain .headerSide {
    height: 9.2rem;
    gap: 2.5rem;
}
.headerMain .logo {
    max-width: 13.5rem;
    flex: 0 0 13.5rem;
}
.headerMain .logo a {
    display: block;
    width: 100%;
}
.headerMain .menuLinks {
    width: auto;
    height: 100%;
    flex: 1 1 auto;
    justify-content: center;
    margin: 0;
    background: transparent;
    border-radius: 0;
}
.headerMain .menuLinks ul {
    width: auto;
    max-width: none;
    justify-content: center;
    gap: 1.35rem;
    padding: 0;
}
.headerMain .menuLinks li {
    height: auto;
}
.headerMain .mainA {
    padding: 1rem 0;
    background: none;
    color: var(--color-text-muted);
    -webkit-text-fill-color: currentColor;
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: .01em;
    white-space: nowrap;
}
.headerMain .mainA::before {
    left: 50%;
    bottom: .35rem;
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background: var(--color-secondary);
    opacity: 0;
    transform: translate(-50%, .5rem);
    transition: opacity .25s ease, transform .25s ease;
}
.headerMain .mainA:hover,
.headerMain .mainA:focus-visible,
.headerMain .mainA.is-active {
    color: var(--color-primary-hover);
}
.headerMain .mainA:hover::before,
.headerMain .mainA:focus-visible::before,
.headerMain .mainA.is-active::before {
    width: .45rem;
    opacity: 1;
    transform: translate(-50%, 0);
}
.headerActions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex: 0 0 auto;
}
.headerMain .contactLink {
    width: auto;
    max-width: none;
    height: 4.8rem;
    gap: 1rem;
    padding: 0 1.8rem;
    border-radius: 4rem;
    background: var(--color-primary);
    box-shadow: 0 .8rem 2rem rgb(104 120 110 / .18);
    color: var(--color-on-primary);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: none;
}
.headerMain .contactLink i {
    margin: 0;
    font-size: 1.7rem;
    transition: transform .25s ease;
}
.headerMain .contactLink:hover {
    background: var(--color-primary-hover);
    color: var(--color-on-primary);
    transform: translateY(-2px);
    box-shadow: 0 1rem 2.4rem rgb(88 103 94 / .24);
}
.headerMain .contactLink:hover i {
    transform: translate(2px, -2px);
}
.slide,
.banner {
    margin-top: 0 !important;
}

@media (min-width: 1200px) {
    .headerMain .headerSide { gap: 3.5rem; }
    .headerMain .logo { max-width: 14.5rem; flex-basis: 14.5rem; }
    .headerMain .menuLinks ul { gap: 1.8rem; }
    .headerMain .mainA { font-size: 1.35rem; }
    .headerMain .contactLink { padding: 0 2.2rem; font-size: 1.35rem; }
}
@media (min-width: 1400px) {
    .headerMain .headerSide { height: 10rem; gap: 4.5rem; }
    .headerMain .logo { max-width: 15.5rem; flex-basis: 15.5rem; }
    .headerMain .menuLinks ul { gap: 2.4rem; }
    .headerMain .mainA { font-size: 1.45rem; }
}

/* Mobile navigation drawer */
.menuIcon {
    width: 4.8rem;
    height: 4.8rem;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-surface);
    transition: background-color .25s ease, border-color .25s ease;
}
.menuIcon:hover,
.menuIcon:focus-visible {
    background: var(--color-secondary-light);
    border-color: var(--color-secondary);
}
.menuIcon span {
    max-width: none;
    width: 1.9rem;
    height: .2rem;
    background: var(--color-text);
}
.menuIcon span:nth-child(2) { width: 1.4rem; margin: .4rem 0 .4rem .5rem; }
.menuIcon.pn span:first-child,
.menuIcon.pn span:last-child,
.menuIcon.pn span:nth-child(2) { transform: none; opacity: 1; }
.backdrop {
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgb(65 65 63 / .48);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .3s ease, visibility .3s ease;
}
.backdrop.left0 {
    left: 0;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.mobileMenu {
    top: 0;
    right: 0;
    left: auto;
    max-width: 40rem;
    height: 100dvh;
    background: var(--color-surface);
    border-left: 1px solid var(--color-border);
    box-shadow: -2rem 0 5rem rgb(65 65 63 / .12);
    transform: translateX(100%);
    transition: transform .35s cubic-bezier(.65, 0, .35, 1);
}
.mobileMenu.left0 {
    left: auto;
    transform: translateX(0);
}
.mobileMenuHeader {
    height: 9rem;
    padding: 1.5rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--color-border);
}
.mobileMenuHeader figure {
    width: 12.5rem;
}
.mobileMenuClose {
    width: 4.4rem;
    height: 4.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    color: var(--color-text);
    background: var(--color-bg);
    font-size: 2.2rem;
    transition: background-color .25s ease, transform .25s ease;
}
.mobileMenuClose:hover {
    background: var(--color-secondary-light);
    transform: rotate(6deg);
}
.mobileMenuSide {
    height: calc(100dvh - 9rem);
    padding: 2rem;
    border: 0;
}
.mobileul {
    padding-bottom: 2rem;
}
.mobileli,
.mobilea {
    color: var(--color-text);
    font-size: 1.6rem;
    font-weight: 600;
}
.mobileli {
    min-height: 4.8rem;
}
.mobileGroup {
    display: block;
}
.mobileSubmenuToggle {
    width: 100%;
    min-height: 4.8rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--color-text);
    font-size: 1.6rem;
    font-weight: 600;
    text-align: left;
}
.mobileSubmenuToggle i {
    transition: transform .25s ease;
}
.mobileSubmenuToggle[aria-expanded="true"] i {
    transform: rotate(90deg);
}
.mobileli:not(:last-child) {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--color-border);
}
.mobileli:hover,
.mobileli:hover a,
.mobileDrops a:hover {
    color: var(--color-primary-hover);
}
.mobileDrops {
    margin: 0;
    padding: 1rem 1.5rem;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
}
.mobileDrops a {
    color: var(--color-text-muted);
    font-size: 1.45rem;
}
.mobileMenuFooter {
    margin-top: auto;
    padding-top: 2rem;
    border-top: 1px solid var(--color-border);
}
.mobileAppointment {
    width: 100%;
    height: 5.2rem;
    padding: 0 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: .8rem;
    background: var(--color-primary);
    color: var(--color-on-primary);
    font-size: 1.5rem;
    font-weight: 600;
}
.mobileAppointment:hover {
    background: var(--color-primary-hover);
    color: var(--color-on-primary);
}
.mobileQuickContact {
    margin-top: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    color: var(--color-text-muted);
    font-size: 1.4rem;
}
@media (max-width: 991.98px) {
    .headerMain .headerSide { height: 9rem; }
    .headerMain .logo { max-width: 13rem; flex-basis: 13rem; }
}
@media (max-width: 424.98px) {
    .mobileMenu { max-width: calc(100% - 2rem); }
}

/* Editorial hero */
.slide {
    position: relative;
    overflow: hidden;
    background: var(--color-bg);
}
.owl-slide .owl-stage {
    display: flex;
}
.owl-slide .owl-item {
    display: flex;
}
.slideSide {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 58rem;
    padding: 5.5rem 0 6.5rem;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: radial-gradient(circle at 12% 40%, rgb(232 237 232 / 0.55) 0%, transparent 55%),
                radial-gradient(circle at 88% 70%, rgb(245 235 225 / 0.6) 0%, transparent 50%),
                var(--color-bg);
}
.heroWatermarkLogo {
    position: absolute;
    top: 50%;
    left: -4%;
    transform: translateY(-50%) rotate(-7deg);
    width: clamp(48rem, 52vw, 76rem);
    height: auto;
    opacity: 0.055;
    pointer-events: none;
    z-index: 1;
    user-select: none;
    transition: opacity 0.3s ease, transform 0.6s ease;
    filter: drop-shadow(0 20px 40px rgba(142, 159, 135, 0.1));
}
.heroWatermarkLogo img {
    display: block;
    width: 100%;
    height: auto;
}
.slideSide::before {
    display: none;
}
.slideSide > .container {
    position: relative;
    z-index: 2;
}
.slideGrid {
    display: grid;
    grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
    align-items: center;
    gap: clamp(4rem, 6vw, 8rem);
}
.slideSideText {
    width: 100%;
    max-width: 55rem;
    height: auto;
    padding: 1rem 0;
    justify-content: center;
}
.heroIntroMark {
    margin-bottom: 2rem;
    display: inline-flex;
    align-items: center;
    position: relative;
    width: 6.5rem;
    height: 1rem;
}
.heroIntroMark::before,
.heroIntroMark::after,
.heroIntroMark span {
    content: "";
    position: absolute;
    top: 50%;
    border-radius: 5rem;
    transform: translateY(-50%);
}
.heroIntroMark::before {
    left: 0;
    width: .8rem;
    height: .8rem;
    background: var(--color-primary-light);
}
.heroIntroMark::after {
    left: 1.3rem;
    width: 3.6rem;
    height: .3rem;
    background: var(--color-primary);
}
.heroIntroMark span {
    right: 0;
    width: .7rem;
    height: .7rem;
    background: var(--color-secondary);
}
.slideSideText h1 {
    max-width: 11ch;
    margin: 0 0 2rem;
    color: var(--color-text);
    font-size: clamp(3.5rem, 4.3vw, 6.2rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.035em;
}
.slideSideText p {
    max-width: 49rem;
    margin: 0;
    color: var(--color-text-muted);
    font-size: clamp(1.5rem, 1.2vw, 1.75rem);
    line-height: 1.75;
}
.heroActions {
    margin-top: 3rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.2rem;
}
.slideLink {
    min-height: 5.2rem;
    padding: 0 2.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin: 0;
    border-radius: 5rem;
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: .01em;
    text-transform: none;
}
.slideLink {
    background: var(--color-primary);
    color: var(--color-on-primary);
    box-shadow: 0 1rem 2.5rem rgb(104 120 110 / .2);
}
.slideLink::before {
    display: none;
}
.slideLink i {
    transition: transform .25s ease;
}
.slideLink:hover {
    background: var(--color-primary-hover);
    color: var(--color-on-primary);
    transform: translateY(-2px);
}
.slideLink:hover i {
    transform: translateX(3px);
}
.slideVisual {
    position: relative;
    min-height: 48rem;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border: .9rem solid var(--color-surface);
    border-radius: 2.8rem 2.8rem 9rem 2.8rem;
    box-shadow: 0 2.5rem 6rem rgb(65 65 63 / .14);
}
.slideVisual::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, transparent 48%, rgb(65 65 63 / .28) 100%);
}
.heroLogoCard {
    position: absolute;
    left: -3.5rem;
    bottom: 2.8rem;
    z-index: 3;
    width: 11rem;
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border);
    border-radius: 1.6rem;
    background: rgb(250 248 245 / .94);
    box-shadow: 0 1.5rem 3.5rem rgb(65 65 63 / .16);
    backdrop-filter: blur(8px);
}
.heroLogoCard img {
    display: block;
    width: 100%;
    height: auto;
}
.heroShape {
    position: absolute;
    z-index: 2;
    border-radius: 50%;
    pointer-events: none;
}
.heroShapeSage {
    top: 2.5rem;
    right: 2.5rem;
    width: 8rem;
    height: 8rem;
    border: 1px solid rgb(250 248 245 / .72);
    box-shadow: inset 0 0 0 1.5rem rgb(170 181 164 / .68);
}
.heroShapeNude {
    right: 3.5rem;
    bottom: 3rem;
    width: 2.2rem;
    height: 2.2rem;
    background: var(--color-secondary);
    box-shadow: 0 0 0 1rem rgb(223 195 168 / .25);
}
.heroDecoration {
    position: absolute;
    display: block;
    border-radius: 50%;
    pointer-events: none;
}
.heroDecorationOne {
    width: 24rem;
    height: 24rem;
    left: -12rem;
    bottom: -13rem;
    border: 1px solid var(--color-secondary);
}
.heroDecorationTwo {
    width: 12rem;
    height: 12rem;
    top: 3rem;
    left: 43%;
    background: rgb(235 216 198 / .35);
    filter: blur(1px);
}
.owl-slide .owl-nav {
    position: absolute;
    right: max(2rem, calc((100% - 1320px) / 2 + 2.5rem));
    bottom: 8.5rem;
    z-index: 5;
    display: flex;
    gap: .8rem;
}
.owl-slide .owl-nav button.owl-prev,
.owl-slide .owl-nav button.owl-next {
    width: 4.4rem;
    height: 4.4rem;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgb(243 238 232 / .55);
    border-radius: 50%;
    background: rgb(250 248 245 / .88);
    color: var(--color-text);
    font-size: 1.7rem;
    backdrop-filter: blur(8px);
}
.owl-slide .owl-nav button.owl-prev:hover,
.owl-slide .owl-nav button.owl-next:hover {
    border-color: var(--color-secondary);
    background: var(--color-secondary-light);
    color: var(--color-text);
}
.owl-slide .owl-dots {
    position: absolute;
    left: 50%;
    bottom: 2.2rem;
    z-index: 5;
    transform: translateX(-50%);
}
.owl-slide .owl-dots .owl-dot span {
    width: .7rem;
    height: .7rem;
    margin: .5rem;
    background: var(--color-border);
    transition: width .25s ease, background-color .25s ease;
}
.owl-slide .owl-dots .owl-dot.active span {
    width: 2.4rem;
    border-radius: 2rem;
    background: var(--color-primary);
}
.owl-slide .owl-item.active .heroIntroMark,
.owl-slide .owl-item.active h1,
.owl-slide .owl-item.active p,
.owl-slide .owl-item.active .heroActions {
    animation-name: fadeInUp;
    animation-duration: .7s;
    animation-fill-mode: both;
}
.owl-slide .owl-item.active .heroIntroMark { animation-delay: .08s; }
.owl-slide .owl-item.active h1 { animation-delay: .16s; }
.owl-slide .owl-item.active p { animation-delay: .24s; }
.owl-slide .owl-item.active .slideLink { animation: none; }
.owl-slide .owl-item.active .heroActions { animation-delay: .32s; }
.owl-slide .owl-item.active .slideVisual {
    animation: fadeInRight .8s .12s both;
}

@media (max-width: 1199.98px) {
    .slideGrid { gap: 4rem; }
    .slideVisual { min-height: 43rem; }
    .heroLogoCard { left: -2.5rem; }
}
@media (max-width: 991.98px) {
    .slideSide { min-height: 0; padding: 4rem 0 5.5rem; }
    .slideGrid { grid-template-columns: 1fr; gap: 3.5rem; }
    .slideSideText { max-width: 68rem; padding: 0; }
    .slideSideText h1 { max-width: 13ch; }
    .slideVisual { min-height: 40rem; border-radius: 2.4rem 2.4rem 7rem 2.4rem; }
    .heroLogoCard { left: 2rem; bottom: 2rem; width: 9rem; }
    .owl-slide .owl-nav { right: 4rem; bottom: 8rem; }
    .heroDecorationTwo { left: auto; right: -4rem; top: 18rem; }
    .heroWatermarkLogo {
        width: clamp(38rem, 75vw, 55rem);
        left: 50%;
        top: 35%;
        transform: translate(-50%, -50%) rotate(-5deg);
        opacity: 0.045;
    }
}
@media (max-width: 575.98px) {
    .slideSide { padding: 3rem 0 5rem; }
    .slideSideText h1 { font-size: clamp(3.1rem, 10vw, 4.2rem); }
    .heroIntroMark { margin-bottom: 1.5rem; }
    .heroActions { align-items: stretch; }
    .slideLink { min-height: 5rem; padding: 0 1.8rem; }
    .slideVisual { min-height: 31rem; border-width: .6rem; border-radius: 2rem 2rem 5rem 2rem; }
    .heroLogoCard { width: 7.8rem; padding: 1rem 1.2rem; }
    .heroShapeSage { top: 1.5rem; right: 1.5rem; width: 6rem; height: 6rem; box-shadow: inset 0 0 0 1.1rem rgb(170 181 164 / .68); }
    .owl-slide .owl-nav { right: 2.7rem; bottom: 7rem; }
    .owl-slide .owl-nav button.owl-prev,
    .owl-slide .owl-nav button.owl-next { width: 4rem; height: 4rem; }
    .heroWatermarkLogo {
        width: 32rem;
        top: 25%;
        opacity: 0.04;
    }
}
@media (prefers-reduced-motion: reduce) {
    .owl-slide .owl-item.active .heroIntroMark,
    .owl-slide .owl-item.active h1,
    .owl-slide .owl-item.active p,
    .owl-slide .owl-item.active .heroActions,
    .owl-slide .owl-item.active .slideVisual {
        animation: none;
    }
}

/* Home service cards */
.services .equal {
    row-gap: 2.4rem;
}
.serviceCard {
    position: relative;
    width: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: 2.2rem 2.2rem 5rem 2.2rem;
    background: var(--color-surface);
    box-shadow: 0 1.4rem 3.5rem rgb(65 65 63 / .07);
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.serviceCard:hover,
.serviceCard:focus-within {
    border-color: var(--color-primary-light);
    transform: translateY(-.7rem);
    box-shadow: 0 2rem 4.5rem rgb(65 65 63 / .13);
}
.serviceCardMedia {
    position: relative;
    height: 20rem;
    display: block;
    overflow: hidden;
    background: var(--color-primary-light);
}
.serviceCardMedia::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgb(65 65 63 / .04) 35%, rgb(65 65 63 / .5) 100%);
}
.serviceCardPhoto {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .65s cubic-bezier(.2, .7, .2, 1);
}
.serviceCard:hover .serviceCardPhoto,
.serviceCard:focus-within .serviceCardPhoto {
    transform: scale(1.07);
}
.serviceCardNumber {
    position: absolute;
    left: 1.8rem;
    bottom: 1.5rem;
    z-index: 2;
    color: var(--color-bg);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: .12em;
}
.serviceCardArrow {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 2;
    width: 4.2rem;
    height: 4.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgb(243 238 232 / .62);
    border-radius: 50%;
    background: rgb(250 248 245 / .9);
    color: var(--color-text);
    font-size: 1.8rem;
    backdrop-filter: blur(8px);
    transition: background-color .3s ease, color .3s ease, transform .3s ease;
}
.serviceCard:hover .serviceCardArrow,
.serviceCard:focus-within .serviceCardArrow {
    background: var(--color-primary);
    color: var(--color-on-primary);
    transform: rotate(8deg);
}
.serviceCardBody {
    position: relative;
    z-index: 1;
    padding: 2.4rem 2.2rem 2.6rem;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
}
.serviceCardHeading {
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: 5.4rem;
    display: flex;
    align-items: center;
    gap: 1.3rem;
}
.serviceCardIcon {
    width: 5.2rem;
    height: 5.2rem;
    flex: 0 0 5.2rem;
    margin: 0;
    padding: 1.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 1.5rem;
    background: var(--color-primary);
    box-shadow: 0 .8rem 1.8rem rgb(104 120 110 / .2);
}
.serviceCardIcon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.serviceCardHeading h3 {
    margin: 0;
    color: var(--color-text);
    font-size: clamp(1.7rem, 1.4vw, 2rem);
    font-weight: 700;
    line-height: 1.3;
}
.serviceCardHeading h3 a {
    color: inherit;
}
.serviceCardHeading h3 a:hover {
    color: var(--color-primary-hover);
}
.serviceCardBody > p {
    position: relative;
    z-index: 1;
    margin: 1.8rem 0 2rem;
    color: var(--color-text-muted);
    font-size: 1.45rem;
    line-height: 1.75;
    flex: 1;
}
.serviceCard .serviceLink {
    position: relative;
    z-index: 2;
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    color: var(--color-primary-hover);
    font-size: 1.4rem;
    font-weight: 700;
}
.serviceCard .serviceLink i {
    font-size: 1.6rem;
    transition: transform .25s ease;
}
.serviceCard .serviceLink:hover {
    color: var(--color-text);
}
.serviceCard .serviceLink:hover i {
    transform: translateX(.4rem);
}
.serviceCardWatermark {
    position: absolute;
    right: -1.5rem;
    bottom: -3.8rem;
    z-index: 0;
    width: 10rem;
    height: auto;
    opacity: .09;
    pointer-events: none;
    filter: grayscale(1);
    transform: rotate(-5deg);
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .serviceCardBody { padding: 2.2rem 1.8rem 2.4rem; }
    .serviceCardHeading { align-items: flex-start; flex-direction: column; }
    .serviceCardHeading h3 { font-size: 1.7rem; }
}
@media (max-width: 767.98px) {
    .serviceCardMedia { height: 22rem; }
}
@media (max-width: 575.98px) {
    .services .equal { row-gap: 1.8rem; }
    .serviceCard { border-radius: 1.8rem 1.8rem 4rem 1.8rem; }
    .serviceCardMedia { height: 21rem; }
    .serviceCardBody { padding: 2.2rem 2rem 2.4rem; }
    .serviceCardHeading { min-height: 5rem; }
    .serviceCardIcon { width: 4.8rem; height: 4.8rem; flex-basis: 4.8rem; }
}
@media (prefers-reduced-motion: reduce) {
    .serviceCard,
    .serviceCardPhoto,
    .serviceCardArrow {
        transition: none;
    }
}

/* Home introduction panel */
.about {
    background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-surface) 100%);
}
.aboutPanel {
    position: relative;
    padding: 2.8rem;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: 3.2rem 3.2rem 8rem 3.2rem;
    background: var(--color-surface);
    box-shadow: 0 2rem 5rem rgb(65 65 63 / .08);
}
.aboutPanel::before {
    content: "";
    position: absolute;
    right: -10rem;
    bottom: -10rem;
    width: 27rem;
    height: 27rem;
    border: 1px solid var(--color-secondary-light);
    border-radius: 50%;
    pointer-events: none;
}
.aboutVisual {
    position: relative;
    height: 100%;
    min-height: 52rem;
}
.about .aboutImage {
    width: 100%;
    height: 52rem;
    margin: 0;
    overflow: hidden;
    border: .8rem solid var(--color-bg);
    border-radius: 2.4rem 2.4rem 7rem 2.4rem;
    background: var(--color-primary-light);
    box-shadow: 0 1.8rem 4rem rgb(65 65 63 / .13);
}
.about .aboutImage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s cubic-bezier(.2, .7, .2, 1);
}
.aboutPanel:hover .aboutImage img {
    transform: scale(1.025);
}
.aboutVisualAccent {
    position: absolute;
    top: 2.2rem;
    right: 2.2rem;
    width: 7rem;
    height: 7rem;
    border: 1px solid rgb(250 248 245 / .7);
    border-radius: 50%;
    box-shadow: inset 0 0 0 1.3rem rgb(223 195 168 / .6);
    pointer-events: none;
}
.about .contentIconText {
    position: absolute;
    right: -2rem;
    bottom: 3rem;
    z-index: 3;
    max-width: 19rem;
    min-height: 10rem;
    padding: 1.6rem 1.8rem;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 1.4rem;
    border: 1px solid var(--color-border);
    border-radius: 1.8rem;
    background: rgb(250 248 245 / .95);
    box-shadow: 0 1.5rem 3rem rgb(65 65 63 / .15);
    backdrop-filter: blur(10px);
}
.about .contentIconText::before {
    display: none;
}
.about .contentIcon {
    width: 4.8rem;
    height: 4.8rem;
    flex: 0 0 4.8rem;
    margin: 0;
    padding: .9rem;
    border-radius: 1.4rem;
    background: var(--color-secondary-light);
}
.about .contentIconText h3 {
    margin: 0;
    color: var(--color-text);
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
}
.about .contentIconText p {
    margin: .45rem 0 0;
    color: var(--color-text-muted);
    font-size: 1.2rem;
    line-height: 1.2;
}
.about .aboutText {
    position: relative;
    z-index: 2;
    height: auto;
    padding: 3rem 2rem 3rem clamp(4rem, 5vw, 7rem);
}
.about .aboutTextHead {
    position: relative;
    margin-bottom: 2.6rem;
    padding-bottom: 2.4rem;
}
.about .aboutTextHead::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 7rem;
    height: .3rem;
    border-radius: 4rem;
    background: linear-gradient(90deg, var(--color-primary) 0 68%, var(--color-secondary) 68% 100%);
}
.about .aboutTextHead span {
    width: auto;
    margin: 0 0 1.8rem;
    padding: .8rem 1.3rem;
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--color-secondary);
    border-radius: 4rem;
    background: var(--color-secondary-light);
    color: var(--color-text);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: .04em;
}
.about .aboutTextHead h2 {
    max-width: 14ch;
    margin: 0;
    color: var(--color-text);
    font-size: clamp(3rem, 3.4vw, 4.8rem);
    font-weight: 750;
    line-height: 1.13;
    letter-spacing: -.03em;
}
.about .aboutText .content {
    display: block;
}
.about .contentText {
    max-width: 100%;
    padding: 0;
}
.about .contentText > p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 1.55rem;
    line-height: 1.8;
}
.about .aboutServiceList {
    margin-top: 2.2rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.5rem;
}
.about .serviceListItem p {
    min-height: 4rem;
    margin: 0;
    padding: .8rem 1rem;
    display: flex;
    align-items: center;
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 1.35rem;
    line-height: 1.35;
}
.about .serviceListItem p i {
    margin-right: .7rem;
    color: var(--color-primary);
}
.about .contentTextBottom {
    margin-top: 2.6rem;
    padding-top: 2.4rem;
    border-top: 1px solid var(--color-border);
}
.about .signature p {
    color: var(--color-text);
}
.about .linkButton {
    min-height: 4.8rem;
    margin: 0;
    padding: 0 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .7rem;
    border-radius: 4rem;
    background: var(--color-primary);
    color: var(--color-on-primary);
    font-size: 1.3rem;
    text-transform: none;
    box-shadow: 0 .8rem 2rem rgb(104 120 110 / .17);
}
.about .linkButton::before {
    display: none;
}
.about .linkButton:hover {
    background: var(--color-primary-hover);
    color: var(--color-on-primary);
    transform: translateY(-2px);
}
@media (max-width: 1199.98px) {
    .aboutPanel { padding: 2.2rem; }
    .aboutVisual,
    .about .aboutImage { min-height: 48rem; height: 48rem; }
    .about .aboutText { padding: 2.5rem 1rem 2.5rem 4rem; }
    .about .aboutServiceList { grid-template-columns: 1fr; }
}
@media (max-width: 991.98px) {
    .aboutPanel { border-radius: 2.6rem 2.6rem 6rem 2.6rem; }
    .aboutVisual,
    .about .aboutImage { min-height: 43rem; height: 43rem; }
    .about .contentIconText { right: 2rem; }
    .about .aboutText { padding: 5rem 2rem 2.5rem; }
    .about .aboutTextHead h2 { max-width: 18ch; }
    .about .aboutServiceList { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    .aboutPanel { padding: 1.2rem; border-radius: 2rem 2rem 4.5rem 2rem; }
    .aboutVisual,
    .about .aboutImage { min-height: 32rem; height: 32rem; }
    .about .aboutImage { border-width: .5rem; border-radius: 1.7rem 1.7rem 4.5rem 1.7rem; }
    .aboutVisualAccent { top: 1.5rem; right: 1.5rem; width: 5.5rem; height: 5.5rem; box-shadow: inset 0 0 0 1rem rgb(223 195 168 / .6); }
    .about .aboutText { padding: 3.5rem 1rem 2rem; }
    .about .aboutTextHead { margin-bottom: 2.2rem; padding-bottom: 2rem; }
    .about .aboutTextHead span { font-size: 1.15rem; }
    .about .aboutTextHead h2 { font-size: clamp(2.7rem, 9vw, 3.8rem); }
    .about .aboutServiceList { grid-template-columns: 1fr; }
    .about .contentTextBottom { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
    .about .aboutImage img,
    .about .linkButton {
        transition: none;
    }
}