/* ================================
   HEADER MENU STYLING
   ================================ */

/* Align the menu container properly */
.et_pb_menu__wrap {
    display: flex !important;
    justify-content: flex-start !important;
    width: 100% !important;
}

.et_pb_menu .et_pb_menu__menu>nav {
    width: 100% !important;
}

/* Style the list within the menu */
.et_pb_menu .et_pb_menu__menu, 
.et_pb_menu .et_pb_menu__menu>nav, 
.et_pb_menu .et_pb_menu__menu ul {
    display: flex !important;
    list-style: none !important;
    padding: 0;
    margin: 0;
    width: 100% !important; 
    align-items: center !important; 
}

/* Style individual list items */
.et_pb_menu__menu ul li {
    margin: 0 0px !important;
}

/* Align the last two menu items to the right */
.et_pb_menu__menu ul li:nth-last-child(2) {
    margin-left: auto !important;
}

.et_pb_menu__menu ul li:last-child {
    margin-left: 0 !important; /* Reset the margin for the last item */
}


/* Style the phone number menu item with "Free Consultation" text */
.et_pb_menu__menu ul li.headphone {
    position: relative;
}

.et_pb_menu__menu ul li.headphone a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
}

.et_pb_menu__menu ul li.headphone a::before {
    content: "Book A Call";
    color: #14365F;
    font-size: 12px; /* Adjust the font size as needed */
    margin-bottom: 5px; /* Space between the text and the phone number */
    text-align: center;
    display: block;
}

.et_pb_menu__menu ul li.headphone a span {
    color: #032836; 
    font-size: 18px !important;
}


/* Contact Us menu item styled as a button */
.et_pb_menu__menu ul li.contactbutton a {
    background-color: white !important;
    color: #032836 !important;
    padding: 10px 20px !important;
    border-radius: 25px !important;
    text-decoration: none !important;
    border: 2px solid #032836 !important;
    display: inline-block; /* Ensure the button only takes up the necessary space */
    line-height: normal !important; /* Reset line height to ensure proper vertical alignment */
    height: 40px !important; /* Set a specific height for the button */
    display: flex; /* Use flexbox for vertical alignment */
    align-items: center; /* Center the text vertically */
}

/* Hover effect for Contact Us button */
.et_pb_menu__menu ul li.contactbutton a:hover {
    background-color: #032836 !important;
    color: white !important;
    border: 2px solid white !important;
}

/* Desktop Dropdown Styling */
@media (min-width: 981px) {
    .et_dropdown_animation_fade.et_pb_menu ul li:hover>ul {
        -webkit-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;
        display: flex !important;
        flex-direction: column !important;
        width: 300px !important;
    }
}

/* Mobile Styles */
@media only screen and (max-width: 980px) {
    .et_pb_menu .et_pb_menu__menu>nav>ul {
        display: none !important; 
    }
    
    .et_pb_menu__wrap,
    .et_pb_menu .et_pb_menu__menu, 
    .et_pb_menu .et_pb_menu__menu>nav, 
    .et_pb_menu .et_pb_menu__menu ul {
        display: block !important;
        width: auto !important;
    }

    .et_pb_menu__menu ul li {
        margin: 10px 0 !important;
    }

    .et_pb_menu__menu ul li.headphone,
    .et_pb_menu__menu ul li.contactbutton {
        text-align: center;
    }

    .et_pb_menu__menu ul li.headphone a,
    .et_pb_menu__menu ul li.contactbutton a {
        display: block;
        width: 100%;
    }

    .et_pb_menu__menu ul li.headphone a span {
        font-size: 18px !important;
    }

    /* Mobile-specific styling for hamburger menu items */
    .et_mobile_menu li.headphone a::before {
        content: "Free Consultation";
        color: #E3D19E !important;
        font-size: 12px;
        margin-bottom: 5px;
        display: block;
        text-align: center;
    }

    .et_mobile_menu li.headphone {
        color: #fff !important;
        font-size: 20px !important;
        text-align: center;
    }

    .et_mobile_menu li.contactbutton a {
        background-color: white !important;
        color: #032836 !important;
        padding: 10px 20px !important;
        border-radius: 25px !important;
        text-decoration: none !important;
        border: 2px solid #032836 !important;
        display: block;
        height: auto;
        line-height: normal !important;
        text-align: center;
    }

    .et_mobile_menu li.contactbutton a:hover {
        background-color: #032836 !important;
        color: white;
        border: 2px solid white !important;
    }

    /* Override Divi's important styles for specific menu items */
    .et_pb_menu_0_tb_header.et_pb_menu ul li.contactbutton a {
        color: inherit !important; /* Ensures the color we set is respected */
    }
}

/* Override Divi's important styles for specific menu items */
.et_pb_menu_0_tb_header.et_pb_menu ul li.contactbutton a {
    color: inherit !important; /* Ensures the color we set is respected */
}

/* Ensure dropdown submenu stretches to 100% width */
.et_pb_menu .sub-menu {
    width: 100%; 
    background-color: inherit !important; 
    padding: 0 !important; 
    margin: 0 !important;
    box-shadow: none !important; 
}

.et_pb_menu .sub-menu li {
    width: 100% !important; 
    padding: 10px 20px !important;
    background-color: inherit !important; 
}


/* ================================
   TOP PAGE SECTION
   ================================ */

/* Default: Desktop */
.top-page-section {
    margin-top: 0px;
}

/* Tablet and Mobile */
@media (max-width: 980px) {
    .top-page-section {
        margin-top: 0;
    }
}

/* Grid Layout */
/* Flip Grid Layout */
.chm-flip-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .chm-flip-grid {
    grid-template-columns: 1fr; /* stack on mobile */
  }
}

.chm-flip-card {
  cursor: pointer;
}

/* Card Base */
.chm-flip-card {
  position: relative;
  width: 100%;
  padding-top: 100%; /* perfect square */
  perspective: 1000px;
}

.chm-flip-content {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

/*.chm-flip-card:hover .chm-flip-content {
  transform: rotateY(180deg);
}*/

.chm-flip-card.flipped .chm-flip-content {
  transform: rotateY(180deg);
}



.chm-front,
.chm-back {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border-radius: 15px;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Front side */
.chm-front {
  padding: 20px;
  font-size: 1.8em;   /* larger headline */
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
  font-family: 'Montserrat', sans-serif;
  display: flex;
  justify-content: flex-start;  /* left align horizontally */
  align-items: center;          /* vertical center */
  text-align: left;	
  background-image: url('/wp-content/uploads/2025/10/diamond.png')!important;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%; /* adjust as needed */
}

.chm-front::after {
  content: "Tap Here";
  position: absolute;
  bottom: 12px;
  right: 18px;
  font-size: 0.6em;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  font-family: 'Open Sans', sans-serif;
  text-transform: uppercase;
}


/* Back side */
.chm-back {
  background: #2B2E2F;
  color: #fff;
  transform: rotateY(180deg);
  font-size: 1.3em;   /* body size */
  font-weight: 400;
  line-height: 1.6;
  font-family: 'Open Sans', sans-serif;

  padding: 25px;
  display: flex;
  justify-content: center;   /* horizontal center */
  align-items: center;       /* vertical center */
  text-align: left;          /* keep text left-aligned inside */

  background-image: url('/wp-content/uploads/2025/10/diamond.png')!important;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%; /* match your front side look */
}

.chm-btn {
  display: inline-block;
  margin-top: 20px;
  padding: 10px 18px;
  background: #fff;
  color: #2B2E2F;
  font-weight: 600;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.3s ease;
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
  font-size: 0.85em;
}

.chm-btn:hover {
  background: #1C657C;  /* match your blue tone */
  color: #fff;
}


/* Unique Front Colors (Updated to Vanessa's Palette) */
.card1 .chm-front { background: #103946; } /* Main blue */
.card2 .chm-front { background: #1C657C; } /* Lighter blue */
.card3 .chm-front { background: #104638; } /* Blue-green accent */
.card4 .chm-front { background: #394610; } /* Earthy green */
.card5 .chm-front { background: #142C43; } /* Deep navy from logo */
.card6 .chm-front { background: #5F8FB5; } /* Medium blue for visual lift */
.card7 .chm-front { background: #316789; } /* Gray-blue from diamond (matches tagline) */
.card8 .chm-front { background: #103946; } /* Reuse main blue for balance */
.card9 .chm-front { background: #1C657C; } /* Lighter blue repeat */


/* Add this to Divi Theme Options > Custom CSS, or your child theme stylesheet */
.custom-bullet-list ul li {
    list-style: none; /* Remove default bullet */
    position: relative;
    padding-left: 1.5em; /* Space for custom icon */
	margin-left: -1.5em;
}

.custom-bullet-list ul li::before {
    content: "\35"; /* ETmodules icon code */
    font-family: ETmodules !important;
    font-weight: 400 !important;
    color: #64A7DB; /* Custom bullet color */
	font-size: 1.4em;
    position: absolute;
    left: 0;
    top: 0;
}

/* Reveal on Scroll */
/* Initial State (Frontend) */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Active State */
.reveal-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Override for Divi Visual Builder */
body.et-fb .reveal-on-scroll {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/*Footer Quick Links*/
.footer-quick-links {
  text-align: left;
}
.footer-quick-links h4 {
  font-size: 1.1rem;
  margin-bottom: 10px;
  color: #333;
}
.footer-quick-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-quick-links li {
  margin: 5px 0;
}
.footer-quick-links a {
  color: #fff;
  text-decoration: none;
}
.footer-quick-links a:hover {
  color: #0073aa;
  text-decoration: underline;
}