:root {
    --neutral: #e9e4d8;
    --accent: #DBC078;
    --shade: #CDA742;
    --tint: #e6d6a8;
    --anchor: #363333;
    --gray: #4a4949;}


    @font-face {
        font-family: "Special";
        src:url("/links/PoiretOne-Regular.ttf");}

    
    @font-face {
            font-family: "Bold";
            src:url("/links/Raleway-VariableFont_wght.ttf");}

    @font-face {
            font-family: "Normal";
            src:url("/links/Raleway-VariableFont_wght.ttf");}
    
    @font-face {
            font-family: "Light";
            src:url("/links/Lato-Light.ttf");}

            h1, h2, h3, h4, h5, h6 {
              font-family: Bold;
              font-weight: 620 !important;
            }
            
            h1 {
              font-size: clamp(2.75rem, 3.2vw, 5rem);
            }
            h2 {
              font-size: clamp(2.75rem, 4vw, 3.5rem);
            }
            h3 {
              font-size: clamp(2.5rem, 4vw, 3rem);
            }
            h4 {
              font-size: clamp(1.9rem, 3.5vw, 2.5rem);
            }
            h5 {
              font-size: clamp(1.75rem, 3vw, 2rem);
            }
            h6 {
              font-size: clamp(.875rem, 2.5vw, 1.5rem);
            }
            
            p {
              font-family: Normal;
              font-size: clamp(1.2rem, 1.5vw, 1.6rem);
              line-height: 1.25;
            }



body {
    background-color: var(--neutral) !important;
    overflow-x: hidden;
    cursor: url('/links/wand.png') 16 16, auto !important;

}

button, a {
    cursor: url('/links/wand.png') 16 16, auto !important;
}
.sparkle {
  position: fixed;
  width: 8px;
  height: 8px;
  background: radial-gradient(circle, #f7d87b, transparent);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  animation: sparkleFade 0.2s linear;
}

@keyframes sparkleFade {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.5); }
}

@media screen and (min-width: 992px) {
#navbarNav  { 
        display:none !important;
    }
}
nav {padding-bottom: 20px !important;
padding-top:20px !important;
@media screen and (min-width: 992px) {
    

padding-left: 20% !important;
padding-right: 20% !important;}}

.nav-link {color: var(--shade);
font-family: special; 
font-size: 1.2rem;
font-weight: 500;}

#herosection {overflow-x: hidden;
    background-color: var(--neutral) !important;

}


.herotext {color: var(--shade);
    font-weight: 900 !important;
    margin-bottom: 50px;
    line-height: 1.1 !important;
    
}
.light {color: var(--gray);
font-weight: 220;
font-size: 2.65rem;}

.btn{ background-color: var(--accent);
border: 2px solid var(--shade);
box-shadow: 0px 0px var(--shade);
filter: drop-shadow(8px 8px 5px var(--tint));
padding-left: 5rem;
padding-right: 5rem;
padding-top: 1.5rem !important;
padding-bottom: 1rem !important;
font-size: 1.2rem;
font-weight: 900;
border-radius: 3px;
color: var(--neutral);}

.btn:hover {background-color: var(--tint);
color: var(--shade);
border-color: var(--shade)}

#heroimage {
    clip-path: circle(66% at 40% 50%);
    position: relative !important;
    width: 100% !important;
    height: 100%;
}

#headlinesection {position: relative;
overflow-y: hidden;
padding-right: 4% !important;
padding-left: 4% !important;}



@media screen and (max-width: 992px) {

#herosection {background-color: var(--accent);
padding-bottom: 5% !important;}
.herotext{text-align: center;
font-size: 2.75rem;}



#heroimage {
    clip-path: circle(70% at 50% 0%);
    position: relative;
}
}






#heroimagewrapper {margin-bottom: 0px;
padding-bottom: 0px !important;}

#lowerwrapper {background-color: var(--accent);
    position: relative;
    padding: 2%;
border-radius: 00px 50px 0px 0px;
box-shadow: 0px 10px 10px var(--shade);
position: relative;
box-shadow : 10px -00px 0px var(--shade);
z-index: 5;}

@media screen and (min-width: 572px) {
#lowerwrapper::after
{
    content: ""; 
    clip-path: circle(40% at 40% 50%);
    position: absolute; 
    top: 0px;
    left: -20%;
    width: 100%;
    height: 100%;

    opacity: .65;
    background-color: var(--neutral);
    z-index: -1; /* Ensures the overlay is above the image but behind text/content */
}
}

#servicesubhead {padding-left: 5%;
    padding-right: 5%;
    padding: 2%;
border-radius: 25px;

text-align: right;
color: var(--neutral);


font-weight: 750 !important;
opacity: 1;
font-family: bold;
}
.gold {color: var(--shade);
   
    };


.service-card {color: var(--shade);
background-color: var(--neutral);
z-index: 2 !important;
padding: 5%;
min-height: 30vh;
border-radius: 25px;}
.service-head {font-weight: 900 !important;
    color: var(--shade);
font-family: special;}
.service-text {color: var(--gray);
font-weight: 200}

#about {padding-left: 5% !important;
padding-right: 5% !important;
background-color: var(--neutral);

color: var(--gray)}

#about {p {font-weight: 200}}

.services-row {
    height: auto;
    z-index: 2;
}
#aboutimage {clip-path: circle(40% at 50% 50%);
left: 50%;
top: 50%;;
width: 510%;}
#aboutheader {font-weight: 900 !important; color: var(--accent);
 }
 .testimonials-wrapper {background-color: var(--tint);
}
 .testimonials {
background-color: var(--accent) !important;  
clip-path: circle(65% at 50% 50%) !important;}
.test-header {font-weight: 850 !important;
    opacity: .9;
    padding-lefT: 20%;
    padding-right: 20%;
    padding-top:20px;
color: var(--neutral);}


.quote-card{color: var(--gray) !important;
font-weight: 200;
strong {font-weight: 800 !important;}}





@media screen and (max-width: 572px) {
    .test-header {
    padding-top: 50px}

    }

    .flip-wrapper {
        perspective: 1000px;
        display: flex;
        justify-content: center;
        width: 100%;
        border-radius: 20px !important;
      }
      
      /* Controls card size */
      .flip-inner {
        width: 100%;
        aspect-ratio: 11.5 /13; /* 👈 Match your image’s aspect ratio */
        position: relative;
        transform-style: preserve-3d;
        transition: transform 0.8s ease-in-out;
      }
      
      /* Both faces match */
      .flip-front,
      .flip-back {
        position: absolute;
        width: 100%;
        height: 100%; /* 👈 Match height via aspect-ratio container */
                border-radius: 20px !important;
        backface-visibility: hidden;
        justify-content: center !important;
        padding-top: 2px !important;

        overflow: hidden;
      }
      
      /* Front (image) */
      .flip-front svg {
        width: 100%;
        height: 100%;
        border-radius: 20px !important;
        object-fit: fill; /* ✅ Show entire image */
        object-position: center !important;
      
      }
      
      /* Back (text) */
      .flip-back {
        transform: rotateY(180deg);
        background: var(--neutral);
        padding: 1rem;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: center;
        border-radius: 20px !important;
        filter: drop-shadow(2px 2px 1px var(--shade));
      }
      
      /* Image defines height */
      .flip-svg {
        width: 100%;
        height: 70%;
        border-radius: 20px;
        display: block;
      }
      
      /* Back face */
      .flip-back {
        transform: rotateY(180deg);
        background: var(--neutral);
        border-radius: 20px;
        padding-top: 2rem !important;
    
        padding: 2rem !important;
        box-sizing: border-box;
        
      }
      .flip-front {background-color: var(--accent);
    filter: drop-shadow(2px 2px 1px var(--neutral));}

.flip-back::after {
        content:'';
        position: absolute;
        top: -20%;
        left: 100%;
        width: 0%;
        border-right: 5px solid var(--tint);
        rotate: -30deg;
        height: 100%;
        z-index: -1;
    
     
        opacity: .8;

    }
    .flip-back::before {
        content:'';
        position: absolute;
        top: -20%;
        left: 105%;
        width: 0%;
        border-right: 5px solid var(--tint);
        rotate: -30deg;
        height: 100%;
        z-index: -1;
    
     
        opacity: .8;

    }
      
      /* Flip trigger */
      .flip-wrapper.flip-active .flip-inner {
        transform: rotateY(180deg);
      }


    @media (min-width: 768px) and (max-width: 991.98px) {
        .flip-inner {
            width: 100%;
            aspect-ratio: 10 / 2.8; /* 👈 Match your image’s aspect ratio */
            position: relative;
            transform-style: preserve-3d;
            transition: transform 0.8s ease-in-out;
          }

        }      
        
    @media (min-width: 577px) and (max-width: 768px) {
            .flip-inner {
                width: 100%;
                aspect-ratio: 10 / 7; /* 👈 Match your image’s aspect ratio */
                position: relative;
                transform-style: preserve-3d;
                transition: transform 0.8s ease-in-out;
              }
    
            }   
            
                    
        @media (max-width: 576){
            .flip-inner {
                width: 100%;
                    aspect-ratio: 115 / 1 !important;/* 👈 Match your image’s aspect ratio */
                position: relative;
                transform-style: preserve-3d;
                transition: transform 0.8s ease-in-out;
              }
    
            } 

  #footerwrapper {background-color: var(--neutral)!important;

.btn {background-color: var(--neutral);
border-color: var(--accent);
border-width: 2px;
filter: none;
color: var(--accent);}
p {font-family: special;
    font-size: 1rem;
    color: var(--gray)}

}

.contact-form-container {
    background-color: var(--shade) !important;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    max-width: 90%;
    width: 100%;
    color: var(--neutral);
    margin: 20px auto;
    font-family: special;
    
  }

  .contact-form-container h1 {
    text-align: center;
    margin-bottom: 30px;
    font-family: bold;
    font-weight: 900 !important;
    color: var(--neutral);
  }

  .contact-form-container button {
    width: 100%;
    background-color: var(--neutral);
    border: none;
    padding: 12px;
    color: var(--shade);
    font-size: 16px;
    font-weight: bold;
    border-radius: 5px;
  }

  .contact-form-container button:hover {
    background-color: var(--tint);
  }

  .form-control {background-color:var(--neutral);}

#herosection {
  button:active, .btn:active {background-color: var(--shade) !important;
  border-color: var(--neutral) !important}
  }

  #aboutimgwrapper {position: relative;}

  #aboutimgwrapper::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--accent);
    z-index: 0;
    clip-path: circle(40% at 50% 50%)
  }