@font-face {
    font-family: 'Helvetica Oblique';
    src: url('../fonts/Helvetica-Oblique.ttf') format('truetype');
    font-style: italic;
}

@font-face {
    font-family: 'Helvetica Rounded Bold';
    src: url('../fonts/helvetica-rounded-bold-5871d05ead8de.otf') format('opentype');
    font-weight: bold;
}

@font-face {
    font-family: 'Helvetica';
    src: url('../fonts/Helvetica.ttf') format('truetype');
}

@font-face {
    font-family: 'Helvetica Bold';
    src: url('../fonts/Helvetica-Bold.ttf') format('truetype');
    font-weight: bold;
}

@font-face {
    font-family: 'Helvetica Bold Oblique';
    src: url('../fonts/Helvetica-BoldOblique.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'Helvetica Compressed';
    src: url('../fonts/helvetica-compressed-5871d14b6903a.otf') format('opentype');
}

@font-face {
    font-family: 'Helvetica Light';
    src: url('../fonts/helvetica-light-587ebe5a59211.ttf') format('truetype');
    font-weight: lighter;
}

body,
h6,
button,
input[type="submit"],
input[type="email"],
input[type="reset"],
input[type="button"],
input,
button,
select,
textarea {
    font-family: "Helvetica", Arial, Helvetica, Tahoma, sans-serif;
}

h1,
h2,
h3,
h4,
h5,
.impact-text,
nav .navbar-nav .nav-link,
.slide-btn {
    font-family: "Georgia", Arial, Helvetica, Tahoma, sans-serif;
}

.text-sans {
    font-family: sans-serif;
}

h1 {
    line-height: 60px;
    letter-spacing: 0px;
    font-weight: 800;
    font-size: 55px;
}

.slide-btn {
    text-transform: uppercase;
    font-weight: 800;
    border-radius: 0;
    box-shadow: 0 4px 0px #b69e5b;
}

.schedule .card {
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.32);
    border-top: 4px solid #b69e5b;
    border-bottom: 4px solid #b69e5b;
}

.schedule .card h2 {
    font-size: 30px;
    font-style: italic;
    color: #b69e5b;
}

.find-more h3 {
    color: #b69e5b !important;
    font-weight: bold;
    font-size: 22px;
}

.bg-video {
    width: 100%;
    position: absolute;
    bottom: 50%;
    z-index: -1;
    background: #000;
    transform: translateY(50%);
}

.on-tv h2 {
    font-size: 36px;
    line-height: 44px;
    margin-bottom: 0;
}

.column-head {
    font-size: 12px;
    line-height: 16px;
}

.footer-menu li {
    list-style: none;
    position: relative;
}

.footer-menu li a::after {
    content: '>';
    position: absolute;
    right: 24px;
    top: 0;
    font-family: cursive;
}

.footer-menu li a {
    text-decoration: none;
    margin-bottom: 8px;
    display: inline-block;
}

.dropdown-toggle:hover .dropdown-menu {
    display: block;
}
.dropdown-toggle::after{
    content: none !important;
}
.themeheader{
    color: #b69e5b !important;
}
.menu_nav >li{
    font-size: 14px;
    border-bottom: 1px solid #e4e4e4;
    border-top: 0;
    padding: 5px 6px;
    text-align: left;
}
.bgheadbachata{
    background-image: url("../images/dance_pages_banner.jpg");
    background-position: 50% 0px;
    display: block;
    opacity: 1;
    padding-bottom: 120px;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
.danceinfo_bg{
    background-image: url("../images/arthur_murray_dance_classes_raleigh_north-carolina_image-02.jpg");
    background-position: 50% 0px;
    display: block;
    opacity: 1;
    padding-bottom: 120px;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
.bgheadbachild{
    background-image: url("../images/arthur-murray-dance-lessons-kids-raleigh-north-carolina-image.jpg");
    background-position: 50% 0px;
    display: block;
    opacity: 1;
    padding-bottom: 120px;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
.bgheaddncquestion{
    background-image: url("../images/dance-questions.jpg");
    background-position: 50% 0px;
    display: block;
    opacity: 1;
    padding-bottom: 120px;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
.bgheadsingle{
    background-image: url("../images/bg-single-dancing.jpg");
    background-position: 50% 0px;
    display: block;
    opacity: 1;
    padding-bottom: 120px;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 10% 20%;
    background-attachment: fixed;
}
.bgheadcalender{
    background-image: url("../images/arthur-murray-dance-classes-raleigh-north-carolina-image-calendar.jpg");
    background-position: 50% 0px;
    display: block;
    opacity: 1;
    padding-bottom: 120px;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
.bgheadmerengue{
    background-image: url("../images/dance-classes-raleigh-north-carolina-image.jpg");
    background-position: 50% 0px;
    display: block;
    opacity: 1;
    padding-bottom: 120px;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
.bgheadbachata_2{
    background-image: url("../images/dance-process.jpg");
    background-position: 50% 0px;
    display: block;
    opacity: 1;
    padding-bottom: 120px;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
.bgimfsection{
    padding-left:0%;
    padding-right:0%;
    margin-top:0px;
    margin-bottom:0px;
    background-image: url("../images/danceanimatedsec.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    background-attachment: fixed;

}
.dance_style_head_left{
    color: #b69e5b !important;
    font-family: 'Edwardian Script ITC';
    color: white !important;
}
.dance_style_head{
    color: #b69e5b !important;
    font-family: 'Edwardian Script ITC';
    font-size: 12rem;
    line-height: 0.5em;
    padding-right: 4%;
    margin-top: 1%;
    background-attachment: fixed;
}

.fancy-heading .heading-text {
    float: none;
    margin-left: 0;
}
.btn-red{
    background-color: #b69e5b;
    color: #fff;
    padding: 0.6em 3.5em;
    border-radius: 3px;
    margin-top: 2em;
    font-size: 1em;
}
.btn-red:hover{
    background-color: #b69e5b;
    color: white !important;
    padding: 0.6em 3.5em;
    border-radius: 3px;
    margin-top: 2em;
    font-size: 1em;
}
/* ===== ENHANCED DROPDOWN MENU STYLING ===== */
/* Hide all dropdown menus by default */
.dropdown-menu,
#danceDropdown,
#danceinfo,
#aboutnav,
ul.dropdown-menu {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Show dropdown menus on hover - multiple selectors for maximum compatibility */
.nav-item.dropdown:hover .dropdown-menu,
.nav-item.dropdown:hover #danceDropdown,
.nav-item.dropdown:hover #danceinfo,
.nav-item.dropdown:hover #aboutnav,
.dropdown:hover .dropdown-menu,
.dropdown:hover #danceDropdown,
.dropdown:hover #danceinfo,
.dropdown:hover #aboutnav,
.navbar-nav .nav-item.dropdown:hover .dropdown-menu,
.navbar-nav .nav-item.dropdown:hover #danceDropdown,
.navbar-nav .nav-item.dropdown:hover #danceinfo,
.navbar-nav .nav-item.dropdown:hover #aboutnav {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Enhanced dropdown menu styling to match website theme */
.nav-item.dropdown .dropdown-menu,
.dropdown .dropdown-menu,
#danceDropdown,
#danceinfo,
#aboutnav {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    z-index: 9999 !important;
    min-width: 220px !important;
    background-color: #fff !important;
    border: 2px solid #b69e5b !important;
    border-radius: 0 !important;
    box-shadow: 0 4px 12px rgba(182, 158, 91, 0.3) !important;
    margin-top: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    font-family: "Helvetica", Arial, Helvetica, Tahoma, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
}

/* Enhanced dropdown items styling */
.dropdown-menu .dropdown-item,
#danceDropdown .dropdown-item,
#danceinfo .dropdown-item,
#aboutnav .dropdown-item {
    display: block !important;
    width: 100% !important;
    padding: 12px 20px !important;
    clear: both !important;
    font-weight: 400 !important;
    color: #333 !important;
    text-align: left !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    background-color: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid #f0f0f0 !important;
    transition: all 0.3s ease !important;
    font-family: "Helvetica", Arial, Helvetica, Tahoma, sans-serif !important;
    font-size: 14px !important;
    position: relative !important;
}

/* Remove border from last item */
.dropdown-menu .dropdown-item:last-child,
#danceDropdown .dropdown-item:last-child,
#danceinfo .dropdown-item:last-child,
#aboutnav .dropdown-item:last-child {
    border-bottom: none !important;
}

/* Enhanced hover effects for dropdown items */
.dropdown-menu .dropdown-item:hover,
#danceDropdown .dropdown-item:hover,
#danceinfo .dropdown-item:hover,
#aboutnav .dropdown-item:hover {
    color: #fff !important;
    background-color: #b69e5b !important;
    transform: translateX(5px) !important;
    box-shadow: 0 2px 8px rgba(182, 158, 91, 0.4) !important;
}

/* Add subtle arrow indicator on hover */
.dropdown-menu .dropdown-item:hover::before,
#danceDropdown .dropdown-item:hover::before,
#danceinfo .dropdown-item:hover::before,
#aboutnav .dropdown-item:hover::before {
    content: '→' !important;
    position: absolute !important;
    left: 8px !important;
    color: #b69e5b !important;
    font-weight: bold !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
}

.dropdown-menu .dropdown-item:hover::before,
#danceDropdown .dropdown-item:hover::before,
#danceinfo .dropdown-item:hover::before,
#aboutnav .dropdown-item:hover::before {
    opacity: 1 !important;
}

/* Ensure the dropdown container has proper positioning */
.nav-item.dropdown,
.dropdown {
    position: relative !important;
}

/* Mobile responsiveness - hide hover effects on mobile */
@media (max-width: 767.98px) {
    .nav-item.dropdown:hover .dropdown-menu,
    .dropdown:hover .dropdown-menu {
        display: none !important;
    }
}

/* Additional specificity to override Bootstrap */
.navbar-nav .nav-item.dropdown:hover .dropdown-menu {
    display: block !important;
}

/* Ensure dropdown menus are visible when parent is hovered */
.navbar-nav .nav-item.dropdown:hover > .dropdown-menu {
    display: block !important;
}

/* Additional hover states for better compatibility */
.navbar-nav .nav-item.dropdown:hover ul.dropdown-menu {
    display: block !important;
}

/* Ensure the nav-link doesn't interfere with dropdown */
.navbar-nav .nav-item.dropdown .nav-link {
    cursor: pointer !important;
}

/* Enhanced transition effects */
.navbar-nav .dropdown .dropdown-menu,
.dropdown-menu,
#danceDropdown,
#danceinfo,
#aboutnav {
    transition: all 0.3s ease !important;
    transform-origin: top center !important;
}

/* Universal dropdown hover rules - these should work regardless of timing */
.dropdown:hover .dropdown-menu {
    display: block !important;
}

.nav-item.dropdown:hover .dropdown-menu {
    display: block !important;
}

/* Specific ID-based rules */
#danceDropdown {
    display: none !important;
}

.dropdown:hover #danceDropdown {
    display: block !important;
}

#danceinfo {
    display: none !important;
}

.dropdown:hover #danceinfo {
    display: block !important;
}

#aboutnav {
    display: none !important;
}

.dropdown:hover #aboutnav {
    display: block !important;
}

/* Ensure all dropdown menus are hidden by default */
ul.dropdown-menu {
    display: none !important;
}

/* Show dropdown menus on parent hover */
.dropdown:hover ul.dropdown-menu {
    display: block !important;
}

.nav-item.dropdown:hover ul.dropdown-menu {
    display: block !important;
}

.font-25{
    font-size: 25px !important;
}
.fz36{
    font-size: 36px !important;
}
/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.z-flip-card {
    background-color: transparent;
    width: 300px;
    height: 200px;

    perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.z-flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.z-flip-card:hover .z-flip-card-inner {
    transform: rotateY(180deg);
}

/* Position the front and back side */
.z-flip-card-front, .z-flip-card-back {
    position: absolute;
    width: 100%;
    height: 150%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.z-flip-card-front {
    background-color: #bbb;
    color: black;
}

/* Style the back side */
.z-flip-card-back {
    background-color: #b69e5b;
    color: white;
    transform: rotateY(180deg);
    height: 400px;
}

/* Make all h1 elements in z-flip-card-back italic */
.z-flip-card-back h1 {
    font-style: italic !important;
}

.text-uppercase{
    text-transform: capitalize;
}
@media screen and (max-width: 600px){
    .dance_style_head_left{
        color: #b69e5b !important;
        text-transform: lowercase;
        font-size: 2rem;
        font-family: 'Edwardian Script ITC';
        color: white !important;
    }
    .dance_style_head{
        color: #b69e5b !important;
        text-transform: lowercase;
        font-family: 'Edwardian Script ITC';
        font-size: 6rem;
        line-height: 0.5em;
        padding-right: 4%;
        margin-top: 1%;
    }
}

/* Mobile burger menu fixes */
.navbar-toggler {
    border: none !important;
    padding: 0.5rem 0.75rem !important;
    font-size: 1.25rem !important;
    line-height: 1 !important;
    background-color: transparent !important;
    border-radius: 0.375rem !important;
    transition: box-shadow 0.15s ease-in-out !important;
    min-height: 44px !important;
    min-width: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1) !important;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}

.navbar-toggler:active {
    background-color: rgba(255, 255, 255, 0.1) !important;
    transform: scale(0.95) !important;
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.25) !important;
    outline: none !important;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    display: inline-block !important;
    width: 1.5em !important;
    height: 1.5em !important;
    vertical-align: middle !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 100% !important;
    pointer-events: none !important;
}

/* Mobile dropdown menu styling */
@media (max-width: 767.98px) {
    .navbar-collapse {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1000 !important;
        background-color: #343a40 !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
        margin-top: 0 !important;
        padding: 1rem 0 !important;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
    }
    
    .navbar-toggler {
        display: block !important;
    }
    
    .navbar-collapse.collapse {
        display: none !important;
    }
    
    .navbar-collapse.collapse.show {
        display: block !important;
    }
    
    .navbar-nav .nav-link {
        color: #fff !important;
        padding: 0.75rem 1rem !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0.1) !important;
        -webkit-touch-callout: none !important;
        -webkit-user-select: none !important;
        user-select: none !important;
        cursor: pointer !important;
    }
    
    .navbar-nav .nav-link:active {
        background-color: rgba(255, 255, 255, 0.1) !important;
    }
    
    .navbar-nav .dropdown-menu {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        position: static !important;
        float: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background-color: rgba(255, 255, 255, 0.1) !important;
    }
    
    .navbar-nav .dropdown.show .dropdown-menu {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Ensure dropdowns work on mobile */
    .navbar-nav .dropdown:hover .dropdown-menu {
        display: block !important;
    }
    
    .navbar-nav .dropdown .dropdown-menu {
        display: none !important;
        position: static !important;
        float: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background-color: rgba(255, 255, 255, 0.1) !important;
    }
    
    .navbar-nav .dropdown.show .dropdown-menu {
        display: block !important;
    }
    
    /* Prevent dropdown clicks from closing main menu */
    .navbar-nav .dropdown-menu {
        pointer-events: auto !important;
    }
    
    .navbar-nav .dropdown-item {
        pointer-events: auto !important;
    }
}



/* Ensure mobile menu is properly positioned */
@media (max-width: 767.98px) {
    .offcanvas-end {
        width: 100% !important;
        max-width: 350px !important;
    }
    
    .navbar-toggler {
        display: block !important;
    }
    
    .navbar-collapse {
        display: none !important;
    }
}

/* Additional mobile dropdown fixes */
@media (max-width: 767.98px) {
    /* Ensure dropdown toggles work properly */
    .navbar-nav .dropdown-toggle {
        cursor: pointer !important;
        user-select: none !important;
        -webkit-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
    }
    
    /* Prevent dropdown parent links from navigating */
    .navbar-nav .dropdown-toggle[href="#"] {
        pointer-events: auto !important;
    }
    
    /* Ensure dropdown arrows show on mobile */
    .navbar-nav .dropdown-toggle::after {
        content: "▼" !important;
        margin-left: 0.5em !important;
        font-size: 0.8em !important;
        transition: transform 0.2s ease !important;
        display: inline-block !important;
    }
    
    .navbar-nav .dropdown.show .dropdown-toggle::after {
        transform: rotate(180deg) !important;
        content: "▲" !important;
    }
    
    /* Ensure dropdowns stay open when clicking inside */
    .navbar-nav .dropdown-menu {
        pointer-events: auto !important;
    }
    
    .navbar-nav .dropdown-item {
        pointer-events: auto !important;
    }
    
    /* Prevent event bubbling for dropdown toggles */
    .navbar-nav .dropdown-toggle {
        pointer-events: auto !important;
    }
    
    /* Simple show/hide for dropdowns */
    .navbar-nav .dropdown-menu {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        position: static !important;
        float: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background-color: rgba(255, 255, 255, 0.1) !important;
    }
    
    .navbar-nav .dropdown.show .dropdown-menu {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Visual feedback for open dropdowns */
    .navbar-nav .dropdown.show {
        background-color: rgba(255, 255, 255, 0.1) !important;
    }
    
    .navbar-nav .dropdown.show .dropdown-toggle {
        background-color: rgba(255, 255, 255, 0.2) !important;
    }
}

/* Simple show/hide for dropdowns */
.navbar-nav .dropdown-menu {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    position: static !important;
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.navbar-nav .dropdown.show .dropdown-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    background-color: rgba(255, 255, 255, 0.2) !important;
    border: 2px solid red !important;
}

/* Debug styling - make dropdowns very visible */
.navbar-nav .dropdown.show {
    background-color: rgba(255, 0, 0, 0.3) !important;
    border: 2px solid yellow !important;
}

.navbar-nav .dropdown.show .dropdown-toggle {
    background-color: rgba(0, 255, 0, 0.3) !important;
    color: yellow !important;
    font-weight: bold !important;
}

.navbar-nav .dropdown-item {
    color: #fff !important;
    padding: 0.75rem 2rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.1) !important;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    cursor: pointer !important;
}

.navbar-nav .dropdown-item:active {
    background-color: rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
}

.navbar-nav .dropdown-item:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
}