/*======================================
Theme Name: AboveMedia
Theme URI: https://divicake.com/
Description: A bespoke website by AboveMedia
Version: 1.0
Author: AboveMedia
Author URI: https://AboveMedia.co.uk
Template: Divi
======================================*/


/* You can add your own CSS styles here. Use !important to overwrite styles if needed. */

/*==========================================================*/
/* ANCHOR SCOLL FIX  */
.anchor-offset {
  scroll-margin-top: 120px; /* Adjust this value based on your header's height */
}


/*==========================================================*/
/* TEXT TO VIEWPORT WIDTH   */
.fluid-text {
  font-size: clamp(18px, 5vw, 60px);
  line-height: 1.2;
  white-space: nowrap;
}


/*==========================================================*/
/* TEXT HIGHLIGHT   */
.am_span_highlight {
background-color: #910000;
padding: 5px;
display: inline;
}

/*==========================================================*/
/* NAV FORCE FIX 
.et_pb_menu_0_tb_header.et_pb_menu .et-menu-nav li ul.sub-menu {
margin-top: 0px !important;
}
*/

/* =========================== */
/* UNIVERSAL SUBMENU FIX — DESKTOP ONLY */
/* =========================== */

@media (hover: hover) {
  .et_pb_menu .et-menu-nav li {
      position: relative;
  }

  .et_pb_menu .et-menu-nav li ul.sub-menu {
      position: absolute;
      left: 0;
      top: 100%;
      width: 250px;
      background: white;
      z-index: 999;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease-in-out, top 0.3s ease-in-out;
      margin-top: 0px !important;
      pointer-events: none;
  }

  .et_pb_menu .et-menu-nav li:hover > ul.sub-menu {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      top: 100%;
  }
}


/*==========================================================*/
/* NAV FORCE FIX 
.et_pb_menu_0_tb_header.et_pb_menu .et-menu-nav li ul.sub-menu {
margin-top: 0px !important;
}
*/

/* =========================== */
/* UNIVERSAL SUBMENU HOVER FIX */
/* =========================== */

/* Ensure each menu item can position dropdowns */
.et_pb_menu .et-menu-nav li {
    position: relative;
}

/* Style the dropdown submenu */
.et_pb_menu .et-menu-nav li ul.sub-menu {
    position: absolute;
    left: 0;
    top: 100%;
    width: 250px;
    background: white;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, top 0.3s ease-in-out;
    margin-top: 0px !important; /* Remove unwanted spacing */
}

/* Make the submenu appear on hover */
.et_pb_menu .et-menu-nav li:hover > ul.sub-menu {
    opacity: 1;
    visibility: visible;
    top: 100%;
}

/* Optional: Make submenu wider & centered */
.et_pb_menu .et-menu li ul {
    min-width: 400px;
    text-align: center;
}

/* Make each submenu item fill full width and align */
.et_pb_menu .et-menu li ul li {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

/* Text styling for submenu links */
.et_pb_menu .et-menu li ul li a {
    display: block;
    width: 100%;
    text-align: center;
    white-space: nowrap;
    padding: 12px 20px;
}

/* Remove default nested nav padding */
.nav li li {
    padding: 0 0px;
}


/*==========================================================*/
/*========   NAV CORRECTIONS.  =====================*/

@media (max-width: 1044px) {
  /* Hide Desktop Menu */
  .et_pb_menu__menu {
    display: none !important;
  }

  /* Show Mobile (Hamburger) Menu */
  .et_mobile_nav_menu {
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin: 0 6px;
  }

  /* Ensure Mobile Menu is Hidden by Default */
  .et_mobile_nav_menu .et_mobile_menu {
    top: 100%;
    padding: 5%;
    display: none; /* Hide initially */
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
  }

  /* When Mobile Menu is Open, Show it */
  .et_mobile_nav_menu .mobile_nav.opened .et_mobile_menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Ensure Hamburger Icon is Clickable */
  .mobile_menu_bar {
    display: block !important;
    cursor: pointer;
  }

  /* Enable submenu interactivity on mobile */
  .et_pb_menu .et-menu-nav li ul.sub-menu {
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
    position: relative;
    top: auto;
  }

  .et_pb_menu .et-menu-nav li:hover > ul.sub-menu {
    opacity: 1;
    visibility: visible;
    top: auto;
  }
}

/* Ensure Desktop Menu is Visible Above 1045px */
@media (min-width: 1045px) {
  .et_pb_menu__menu {
    display: flex !important;
  }

  .et_mobile_nav_menu {
    display: none !important;
  }
}



/*==========================================================*/
/* ================= STACK IN 2s on MOBILES =================  */
@media (max-width: 768px) {
    .am-2stack {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
    }

    .am-2stack .et_pb_column {
        width: calc(50% - 5px) !important; /* Ensures two equal columns per row */
        margin-bottom: 10px !important; /* Adds spacing between rows */
    }

    /* Make sure only the first column in each row has right margin */
    .am-2stack .et_pb_column:nth-child(odd) {
        margin-right: 10px !important;
    }

    /* Ensure second column in each row has no extra right margin */
    .am-2stack .et_pb_column:nth-child(even) {
        margin-right: 0 !important;
    }

    /* Remove any unexpected padding/margin that Divi might be adding */
    .am-2stack .et_pb_column > div {
        margin: 0 !important;
        padding: 0 !important;
    }
}





/*==========================================================*/
/* ================= BULLET LIST ICONS =================  */
/*bullet fix indent on text
ul li{
text-indent: -1em;
} */

/* FONT ICONS
 * SOLID STAR:  
 * THUMBS UP: 
 * ARROW : A
 * Reference: https://www.elegantthemes.com/blog/resources/elegant-icon-font
 */


/* Bullet checklist Blue ICON with normal Text */
.pa-bullet-list-blue {
    list-style-type: none !important;
    padding-left: 0!important; /* Remove default padding */
    padding-bottom: 0!important; /* Remove default padding */
    margin-left: 0 !important; /* Force left margin to 0 */
    margin-bottom: 0 !important; /* Force bottom margin to 0 */
	text-align: left; /* Ensure the list itself is left-aligned */

}

/* Remove the default marker */
.pa-bullet-list-blue li::marker {
    content: none;
}

.pa-bullet-list-blue li {
    position: relative; /* Needed for the pseudo-element */
    padding-left: 30px; /* Space for the tick symbol */
    color: #666; /* Grey text */
    font-weight: 600; /* Semi-bold */
    font-size: 18px; /* 18px font size */
    margin-bottom: 0px; /* Spacing between list items */
	text-align: left; /* Ensure the list itself is left-aligned */
}

.pa-bullet-list-blue li:before {
    content: '\e052'!important; /* Custom icon */
    color:#0c71c3; /* Red tick */
    font-family: 'ETMODULES'!important; /* Custom font */
    position: absolute;
    left: 0; /* Adjust this value to move icon further left */
    top: 2px; /* Adjust this value to move icon further down */
    font-size: 18px; /* Match font size */
    line-height: 1.2; /* Adjust line height */
}

/*=====================*/
/* Bullet checklist red text with tick */
.pa-bullet-list-red {
    list-style-type: none !important;
    padding-left: 0!important; /* Remove default padding */
    padding-bottom: 0!important; /* Remove default padding */
    margin-left: 0 !important; /* Force left margin to 0 */
    margin-bottom: 0 !important; /* Force bottom margin to 0 */
	 text-align: left; /* Ensure the list itself is left-aligned */
}

/* Remove the default marker */
.pa-bullet-list-red li::marker {
    content: none;
}

.pa-bullet-list-red li {
    position: relative; /* Needed for the pseudo-element */
    padding-left: 30px; /* Space for the tick symbol */
    color: #e02b20; /* Red text */
    font-weight: 600; /* Semi-bold */
    font-size: 18px; /* 18px font size */
    margin-bottom: 10px !important; /* Spacing between list items */
	text-align: left; /* Ensure the list itself is left-aligned */

}

.pa-bullet-list-red li:before {
    content: '\e052'!important; /* Custom icon */
    color: #e02b20; /* Red tick */
    font-family: 'ETMODULES'!important; /* Custom font */
    position: absolute;
    left: 0; /* Adjust this value to move icon further left */
    top: 2px; /* Adjust this value to move icon further down */
    font-size: 18px; /* Match font size */
    line-height: 1.2; /* Adjust line height */
}

/*=====================*/

/*bullet checklist 1*/
.pa-bullet-list-1 ul {
list-style-type: none!important;
}

.pa-bullet-list-1 ul li:before {
content: '\e052'!important;
color: #2cba6c;
font-family: 'ETMODULES'!important;
margin-right: 10px;
margin-left: -14px;
font-size: 1.2em!important;
}

/*bullet checklist 2*/
.pa-bullet-list-2 ul {
list-style-type: none!important;
}

.pa-bullet-list-2 ul li:before {
content: '\e052'!important;
color: #e02b20;
font-family: 'ETMODULES'!important;
margin-right: 10px;
margin-left: -14px;
font-size: 1.2em!important;
}

/* Bullet checklist white */
.pa-bullet-list-white ul {
    list-style-type: none !important;
	padding-left: 0!important; /* Remove default padding */
    margin-left: 0 !important; /* Force left margin to 0 */
    text-align: left; /* Ensure the list itself is left-aligned */

}

.pa-bullet-list-white ul li {
    position: relative; /* Needed for relative positioning of icon */
    color: white; /* White text */
    font-size: 18px; /* Font size for text */
    margin-bottom: 10px; /* Spacing between list items */
    padding-left: 30px; /* Space for the icon */
	text-align: left; /* Ensure the list itself is left-aligned */
}

.pa-bullet-list-white ul li:before {
    content: '\e052'; /* Custom icon */
    color: white; /* White icon */
    font-family: 'ETMODULES'!important; /* Custom font */
    position: absolute;
    left: 0; /* Adjust this value to move icon further left */
    top: 13px; /* Align icon vertically */
    transform: translateY(-50%); /* Adjust vertical alignment */
    font-size: 5px; /* Icon size */
    line-height: 1; /* Adjust line height for icon alignment */
}

/* Bullet checklist YELLOW */
.pa-bullet-list-yellow ul {
    list-style-type: none !important;
	padding-left: 0!important; /* Remove default padding */
    margin-left: 0 !important; /* Force left margin to 0 */
	text-align: left; /* Ensure the list itself is left-aligned */	
}

.pa-bullet-list-yellow ul li {
    position: relative; /* Needed for relative positioning of icon */
    color: white; /* White text */
    font-size: 18px; /* Font size for text */
    margin-bottom: 10px; /* Spacing between list items */
    padding-left: 30px; /* Space for the icon */
	text-align: left; /* Ensure the list itself is left-aligned */
}

.pa-bullet-list-yellow ul li:before {
    content: '\e052'; /* Custom icon */
    color: #efb754; /* YELLOW icon */
    font-family: 'ETMODULES'!important; /* Custom font */
    position: absolute;
    left: 0; /* Adjust this value to move icon further left */
    top: 13px; /* Align icon vertically */
    transform: translateY(-50%); /* Adjust vertical alignment */
    font-size: 1.2em; /* Icon size */
    line-height: 1; /* Adjust line height for icon alignment */
}

/* Indent the text sections */
.brian-text-01 {
    margin-left: 30px; /* Indent the entire text block */
    margin-bottom: 20px; /* Gap under the entire text block */
}


/* ********* AFTER ICON ************* */
.am_after_icon::after {
    content: '\5a'; /* Custom tick icon Z*/
    font-family: 'ETMODULES'; /* Divi icon font */
    color: #efb754; /* Yellow tick */
    font-size: 1.2em; /* Adjust size if needed */
    margin-left: 10px; /* Space between text and tick */
    display: inline-block; /* Keeps it on the same line */
    vertical-align: middle; /* Aligns it properly with text */
}

/* ===================== AM Price List Styling ===================== */

.AM_PL_price-list {
    max-width: 1000px; /* Wider layout on desktop */
    width: 90%;
    margin: auto;
    background: #530e07;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(145, 0, 0, 1);
}

/* Headings - Larger, Bold, and All Caps */
.AM_PL_price-list h2 {
    text-align: center;
    margin-bottom: 30px;
    font-size: 30px; /* Increased font size */
    color: #efb754; /* YELLOW */
    font-weight: bold;
    text-transform: uppercase; /* Converts text to all caps */
}



/* Styling each row */
.AM_PL_price-item {
    display: flex;
    justify-content: space-between;
    padding: 15px 0;
    border-bottom: 1px solid #ddd;
}

.AM_PL_price-item:last-child {
    border-bottom: none;
}

/* Left-aligned description with extra spacing */
.AM_PL_description {
    flex: 1;
    text-align: left;
    font-size: 20px;
    padding-right: 100px; /* More spacing for wider screens */
}

/* Right-aligned prices */
.AM_PL_price {
    width: 150px;
    text-align: right;
    font-weight: bold;
    font-size: 20px;
}



/* Adjust spacing for second heading */
.AM_PL_price-list h2:nth-of-type(2) {
    margin-top: 60px; /* More space above Upholstery Cleaning */
}

/* Styling for the Minimum Spend Note */
.AM_PL_note {
    font-size: 18px;
    text-align: center;
    margin-top: 25px;
    font-style: italic;
}

/* Responsive Adjustments for Mobile */
@media (max-width: 768px) {
    .AM_PL_price-list {
        max-width: 100%;
        padding: 20px;
    }

    .AM_PL_description {
        padding-right: 40px; /* Less spacing on mobile */
    }

    .AM_PL_price {
        width: auto;
        text-align: left;
    }

    .AM_PL_price-list h2 {
        font-size: 24px; /* Slightly smaller headers on mobile */
    }
}



/*==========================================================*/
/* ================= INSTA FEED REMOVE HEADER  =================  */
#sb_instagram .sb_instagram_header, .sb_instagram_header {
display: none !important;
}

/*==========================================================*/
/* =================FOOTER PADDING =================  */

#main-footer {
display: none !important;
}



/*==========================================================*/
/*--- Abovemedia Link Text ---*/
.am-gradient-text {
  /* Fallback: Set a background color. */
  background-color: lilac;
	
  font-weight: 900;
  
  /* Create the gradient. */
  background-image: linear-gradient(90deg, #AC33FF, #FFFFFF);
  
  /* Set the background size and repeat properties. */
  background-size: 100%;
  background-repeat: repeat;

  /* Use the text as a mask for the background. */
  /* This will show the gradient as a text color rather than element bg. */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; 
  -moz-background-clip: text;
  -moz-text-fill-color: transparent;
}