/*
Theme Name: GiftedSofia Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/


@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}

.nav-dropdown a, .sub-menu a{
    text-transform: capitalize;
}

.woocommerce-loop-product__title a{
    text-transform: uppercase;
}

.ysm-search-widget .search-form{
    width: 100%;
}

.nav-dropdown-col{
    display: flex !important;
    flex-direction: column;
    border-right: none !important;
}



/*!* Hide second-level dropdowns initially *!*/
/*.nav-dropdown-col .sub-menu {*/
/*    display: none;*/
/*}*/

/*!* When parent has active class, show the dropdown *!*/
/*.nav-dropdown-col.active > .sub-menu {*/
/*    display: block;*/
/*}*/

/*!* Style for the arrow *!*/
/*.nav-dropdown-col > a:after {*/
/*    content: '\f107';  !* This is the angle-down icon code *!*/
/*    font-family: 'fl-icons' !important;*/
/*    margin-left: 5px;*/
/*    font-size: 16px;*/
/*    opacity: 0.7;*/
/*}*/

/*!* Rotate arrow when dropdown is active *!*/
/*.nav-dropdown-col.active > a:after {*/
/*    transform: rotate(180deg);*/
/*    display: inline-block;*/
/*}*/

/* Style for the arrow with transition */
.nav-dropdown-col > a:after {
    content: '\f107';
    font-family: 'fl-icons' !important;
    margin-left: 5px;
    font-size: 16px;
    opacity: 0.7;
    transition: transform 0.3s ease;
    display: inline-block;
}

/* Rotate arrow when dropdown is active */
.nav-dropdown-col.active > a:after {
    transform: rotate(180deg);
}

/* Add smooth animation to submenu */
.nav-dropdown-col .sub-menu {
    display: block;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.3s ease-out;
}

/* Show submenu when active */
.nav-dropdown-col.active > .sub-menu {
    max-height: 500px; /* Adjust this value based on your content */
    opacity: 1;
}

.nav-dropdown .menu-item-has-children>a, .nav-dropdown .nav-dropdown-col>a, .nav-dropdown .title>a{
    font-size: 1em;
    color: inherit;
}

.button.alt, .button.checkout, .checkout-button, .secondary{
    color: #000;
}