/*
Theme Name: WelshInsurance
Theme URI: https://dev.snworks.com/whatsnew/wp-content/themes/WelshInsurance
Author: Synergy Web Design and Marketing - Lora Champion
Author URI: https://snwebdm.com/
Description: This theme works best with Elementor, although you can also use blocks with it (remove bottom section from functions.php to enable block editor). Recommended plugins: Elementor, Yoast, Contact7, woocommerce, ultimate member
Tags: blog, one-column, custom-background, custom-colors, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, full-width-template, sticky-post, theme-options, block-styles, wide-blocks
Version: 1:012422
Requires at least: 5.0
Tested up to: 5.8.3
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: whatsnew-raw
This theme, like WordPress, is licensed under the GPL.
Tested up to: 5.8
Requires PHP: 7.0
*/


h1, h2, h3, {

    font-family: "Inter", sans-serif;

}


p {

    font-family: "Inter", sans-serif;


}


.site-header {

    width: 100%;
    position: absolute;
    z-index: 6;
    opacity: 0.8;
}


/*REQUEST A QUOTE STICKY BOX CSS*/


.sticky-quote-box {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 100px; /* Adjust this value to clear your header */
    z-index: 999;
    align-self: flex-start; /* Required for sticky to work in flex containers */
}








/*HEADER CSS*/



/* Base menu link */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
    font-family: 'Inter';
    font-size: 19px;
    font-weight: 400;
    position: relative;
    z-index: 1;
    color: #fcfcfc;
    transition: color 0.25s ease-in-out;
}

/* Fade-in background layer */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: #063DBE;
    opacity: 0;
    z-index: -1;
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover state */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item:hover > a.mega-menu-link::before {
    opacity: 1;
}

/* Hover text color */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item:hover > a.mega-menu-link {
    color: #ffffff;
}

/* Override Max Mega Menu default hover bg */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:hover {
    background: transparent !important;
}









/*END OF MEGA MAX MENU CSS*/



/*Request a Quote form CSS*/
#wpcf7-f487-o1 input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required,
#wpcf7-f683-o1 input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required,
#wpcf7-f6-o1 input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required {
    border-radius: 8px;
    color: #001c63;
    border-style: solid;
    padding: 5px 8px;
    width: 100% !important;

}


#wpcf7-f486-o1 input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required {

    border-radius: 8px;
    color: #001c63;
    font-weight: 500;
    font-size: 18px;
    border: solid 2px;
    padding: 5px 8px;
    width: 100% !important;


}




#wpcf7-f487-o1 form.wpcf7-form.init,
#wpcf7-f683-o1 form.wpcf7-form.init,
#wpcf7-f6-o1 form.wpcf7-form.init {
    color: #ffffff !important;
}


#wpcf7-f486-o1 form.wpcf7-form.init {


    color: #001c63;


}






#wpcf7-f487-o1 textarea.wpcf7-form-control.wpcf7-textarea,
#wpcf7-f683-o1 textarea.wpcf7-form-control.wpcf7-textarea,
#wpcf7-f6-01 textarea.wpcf7-form-control.wpcf7-textarea {

    color: #001c63;
    border-radius: 8px;
}

/*wpcf7-f486-o1 - Contact An Agent Form CSS*/

#wpcf7-f486-o1 textarea.wpcf7-form-control.wpcf7-textarea {

    color: #001c63;
    border: solid 2px;
    border-radius: 8px;

}



#wpcf7-f486-o1.wpcf7 form.sent .wpcf7-response-output {

    border-color: #001c63;
    color: #001c63;

}





/*MESSAGE TEXTBOX*/

textarea.wpcf7-form-control.wpcf7-textarea {
    color: #001c63;
    border-radius: 8px;
    width: 100%;

}



#wpcf7-f487-o1.wpcf7 form.sent .wpcf7-response-output,
#wpcf7-f683-o1.wpcf7 form.sent .wpcf7-response-output,
#wpcf7-f6-01.wpcf7 form.sent .wpcf7-response-output {
    border-color: #b5e7ff;
    color: white;
}








/*SUBMIT BTN*/

input.wpcf7-form-control.wpcf7-submit.has-spinner {
    background-color: #063dbe;
    opacity: 90%;
    border-radius: 8px;
    /* text-align: center; */
    color: #ffffff;
    font-size: 18px;
    font-family: 'Inter';
    padding: 10px 25px;
    border: 2px solid;
}



label#form-text {

    color: #ffffff;

}






/* Specific label color for the Request a Quote form */
#wpcf7-f486-o1 label#form-text {

    color: #001c63 !important;
    font-weight: 500;
    width: 100%/*Makes message field as wide as form*/

}





.wpcf7-not-valid-tip {
    color: #759fff;
    font-size: 1em;
    font-weight: 600;
    display: block;
}



.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output {
    border-color: #ffffff;
    color: white;
}




/**********firefox - drop down font css**********/
/* Dropdown menu styling */


#wpcf7-f487-o1 select.wpcf7-form-control.wpcf7-select,
#wpcf7-f683-o1 select.wpcf7-form-control.wpcf7-select,
#wpcf7-f6-o1 select.wpcf7-form-control.wpcf7-select {
  font-family: "Inter", sans-serif !important; /* Ensure Montserrat is applied */
  font-size: 18px; /* Match the font size of the other inputs */
  font-weight: 500; /* Match the font weight */
  color: #21336a; /* Ensure the text color is consistent */
  padding: 5px; /* Match padding with other inputs */
  border: 1px solid rgba(0, 0, 0, 0.3); /* Match border style */
  border-radius: 8px;
  width: 100%; /* Ensure full-width like other inputs */
  background-color: #ffffff; /* Optional: Set a consistent background color */
  appearance: none; /* Removes default browser styling */
  -webkit-appearance: none; /* For WebKit browsers */
  -moz-appearance: none; /* For Firefox */

  /* Custom arrow styling */
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 6"%3E%3Cpath d="M0 0l5 6 5-6H0z" fill="%2321336a"%3E%3C/path%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
}

/* Dropdown options styling */
#wpcf7-f487-o1 select.wpcf7-form-control.wpcf7-select option,
#wpcf7-f683-o1 select.wpcf7-form-control.wpcf7-select option,
#wpcf7-f6-o1 select.wpcf7-form-control.wpcf7-select option {
  font-family: "Inter", sans-serif !important; /* Ensure Montserrat for options */
  font-size: 18px; /* Match the font size */
  color: #21336a; /* Consistent text color */
}








.btn-call {
    display: inline-flex;    /* Places icon and text-container side-by-side */
    align-items: center;     /* Vertically aligns icon with the text */
    justify-content: center;
    background-color: #001c63; 
    color: #ffffff;
    padding: 10px 25px;      
    border-radius: 50px;    
    text-decoration: none !important; /* Removes underline */
    gap: 12px;               /* Space between SVG and text */
    transition: transform 0.2s ease;
}

.text-container {
    display: flex;
    flex-direction: column;  /* Stacks the two spans vertically */
    align-items: flex-start; /* Aligns text to the left within the container */
    line-height: 1.2;        /* Tightens the gap between the two lines */
}

.call-text {
    font-size: 17px;         /* Smaller label */
    font-weight: 400;
    color: #cbd5e0;          /* Lighter grey/blue so it's readable */
}

.phone-text {
    font-size: 18px;         /* Larger phone number */
    font-weight: 700;
    color: #ffffff;
}

/* Hover effect so the user knows it's a button */
.btn-call:hover {
    background-color: #063dbe;
    transform: scale(1.02);
}



/*SMART SLIDER 3 CSS*/

.welsh-heading {


  opacity: 0;
  transform: translateY(30px);
  animation: fadeInDown 0.8s ease-out forwards;

}



@keyframes fadeInDown {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}





.slider-heading {


    opacity: 0;
    transform: translateX(40px);
    animation: fadeInRight 0.9s ease-out forwards;



}


@keyframes fadeInRight {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}





.slider-buttons {


    opacity: 0;
    transform: translateY(30px);
    animation: fadeInDownButtons 0.8s ease-out forwards;
    animation-delay: 0.85s;


}




@keyframes fadeInDownButtons {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

 
/*PARTNERS CSS*/




/*SERVICES CSS*/
/*mouse-tracking functionality*/


/* 1. Hide the button by default */
.service-card .learn-more-button {
    opacity: 0;
    transform: translateY(15px); /* Starts slightly lower */
    transition: opacity 0.4s ease, transform 0.4s ease !important;
    pointer-events: none; /* Prevents clicking the button while it's invisible */
}

/* 2. Show the button when the card is hovered */
.service-card:hover .learn-more-button {
    opacity: 1;
    transform: translateY(0); /* Slides up into place */
    pointer-events: auto; /* Makes it clickable on hover */
}

/* 3. Optional: Style the button to look good on the dark hover background */
.service-card:hover .learn-more-button .elementor-button {
    background-color: #ffffff !important; /* White button */
    color: #001a57 !important; /* Dark text (adjust to your brand blue) */
}





/* The Individual Service Cards */
.service-card {
    transition: background-color 0.5s ease, border-radius 0.5s ease, transform 0.3s ease;
    cursor: pointer;
}

/* Hover State for the Cards */


.service-card:hover h1, 
.service-card:hover h2, 
.service-card:hover h3, 
.service-card:hover h4, 
.service-card:hover h5, 
.service-card:hover h6, 
.service-card:hover p, 
.service-card:hover .elementor-heading-title, 
.service-card:hover .elementor-text-editor {
    color: #ffffff !important;
}


/* Make service card icons turn white on card hover */
.service-card:hover .elementor-icon i,
.service-card:hover .elementor-icon svg,
.service-card:hover .elementor-icon svg path {
    color: #ffffff !important;
    fill: #ffffff !important;
}




/*FOOTER CSS*/


.site-footer {

   

    background-color: #001c63;
    color: #ffffff;
    font-size: 18px;



}


.footer-text {

    color: white;
    font-size: 18px;




}




.service-items {
    color: #ffffff;
    font-size: 18px;
    text-decoration: underline;
    text-align: center;

}






/*FOOTER LOGO TICKER CSS */

.logo-ticker {
    overflow: hidden;
    padding: 1.5rem 0;
}


.logo-ticker-track {
    display: flex;
    align-items: center;
    gap: 3rem;
    width: max-content;
    animation: logo-ticker-scroll 40s linear infinite;
}


.logo-ticker-item {
    flex: 0 0 auto;
    width: clamp(120px, 25vw, 200px);
    display: flex;
    align-items: center;
    justify-content: center;
}


.logo-ticker-item .logo-img {
    max-width: 100%;
    max-height: 70px;
    width: auto;
    height: auto;
    object-fit: contain;
}


@keyframes logo-ticker-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}






/*REQUEST A QUOTE STICKY BOX CSS*/
/* Optional: Disable on mobile if it takes up too much space */
@media (max-width: 767px) {
    .sticky-quote-box {
        position: relative !important;
        top: 0 !important;
    }
}