asdasd/*
 Theme Name:   Shandy's Catering Child Theme
 Theme URL:    https://generatepress.com
 Description:  Shandy's Catering Child Theme
 Author:       Kembangi
 Author URL:   https://kembangi.com
 Template:     generatepress
 Version:      0.3
 Last Updated: March 2025
*/

/* TABLE OF CONTENTS
1. Theme Tweaks
2. Utilities
3. Typography
4. Global Styles
5. Fluent Forms
6. CSS Grid
*/

/*** 1. THEME TWEAKS ***/

  /* Site wrapper */
	.site-wrapper {
		width: 100%;
		max-inline-size: 1408px;
		margin-inline: auto;
		padding-inline: clamp(1rem, 0.9518rem + 0.241vw, 1.25rem);
		background-color: var(--white) !important;
	} 

	/* Set the main content area height to a minimum of 65vh */
	#main {
	min-height: 65vh;
	}

	/* Remove default padding on content area */
	.site-content, #content {
	padding: 0px;
	}

/* Post Editor Width (BACKEND) */
	.post-type-post .block-editor-block-list__layout {
 	max-width: 728px !important;
 	margin-inline: auto !important;
	padding-inline: 200px !important;
	}

	.post-type-post .edit-post-visual-editor__post-title-wrapper .editor-post-title {
	max-width: 728px !important;
	margin-inline: auto !important;
	padding-inline: 200px !important;
	}

	/* Container Padding Overrides */
	/**.inside-header {
	padding-inline: 0px !important;
	padding: 0px !important;
	}

	/**
	.site-header {
	padding-inline: clamp(1rem, 0.848rem + 0.758vw, 1.5rem) !important;
	}**/


/* FLUID GRID */
/* @link https://utopia.fyi/grid/calculator?c=400,16,1.125,1920,18,1.067,10,3,400-1200&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,2xl,m,12 */

:root {
  --grid-max-width: 78.75rem;
  --grid-gutter: var(--space-s-2xl, clamp(1rem, -0.6279rem + 6.5116vw, 4.5rem));
  --grid-columns: 12;
}

.u-container {
  max-width: var(--grid-max-width);
  padding-inline: var(--grid-gutter);
  margin-inline: auto;
}

.u-grid {
  display: grid;
  gap: var(--grid-gutter);
}

/* FLUID CLAMP CALCULATOR */
/* Use this calculator to generate any number of custom fluid tokens, 
and extract the CSS to use in your projects. These tokens can be applied to typography, 
space or any other CSS property that accepts a length unit. */

/* @link https://utopia.fyi/clamp/calculator?a=400,1920,16—48 */

:root {
  --fluid-16-48: clamp(1rem, 0.4737rem + 2.1053vw, 3rem);
}


/* FLUID SPACE */

/* @link https://utopia.fyi/space/calculator?c=400,16,1.125,1920,18,1.067,10,3,400-1200&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
  --space-3xs: clamp(0.25rem, 0.2336rem + 0.0658vw, 0.3125rem);
  --space-2xs: clamp(0.5rem, 0.4836rem + 0.0658vw, 0.5625rem);
  --space-xs: clamp(0.75rem, 0.7171rem + 0.1316vw, 0.875rem);
  --space-s: clamp(1rem, 0.9671rem + 0.1316vw, 1.125rem);
  --space-m: clamp(1.5rem, 1.4507rem + 0.1974vw, 1.6875rem);
  --space-l: clamp(2rem, 1.9342rem + 0.2632vw, 2.25rem);
  --space-xl: clamp(3rem, 2.9013rem + 0.3947vw, 3.375rem);
  --space-2xl: clamp(4rem, 3.8684rem + 0.5263vw, 4.5rem);
  --space-3xl: clamp(6rem, 5.8026rem + 0.7895vw, 6.75rem);

  /* One-up pairs */
  --space-3xs-2xs: clamp(0.25rem, 0.1678rem + 0.3289vw, 0.5625rem);
  --space-2xs-xs: clamp(0.5rem, 0.4013rem + 0.3947vw, 0.875rem);
  --space-xs-s: clamp(0.75rem, 0.6513rem + 0.3947vw, 1.125rem);
  --space-s-m: clamp(1rem, 0.8191rem + 0.7237vw, 1.6875rem);
  --space-m-l: clamp(1.5rem, 1.3026rem + 0.7895vw, 2.25rem);
  --space-l-xl: clamp(2rem, 1.6382rem + 1.4474vw, 3.375rem);
  --space-xl-2xl: clamp(3rem, 2.6053rem + 1.5789vw, 4.5rem);
  --space-2xl-3xl: clamp(4rem, 3.2763rem + 2.8947vw, 6.75rem);

  /* Custom pairs */
  --space-s-l: clamp(1rem, 0.6711rem + 1.3158vw, 2.25rem);
}

	/** SPACE MARGIN **/

 	.flow > * + * {
	margin-block-start: var(--flow-space, 1em);
	}
	
	.prose {
	--flow-space: var(--space-m-l);
	}
	
	.prose :is(h1, blockquote) {
	--flow-space: var(--space-m);
	}
	
	.prose :is(h2 + *, h3 + *, h4 + *) {
	--flow-space: var(--space-s);
	}

/*** 3. TYPOGRAPHY ***/
  /* <weight>: Use a value from 400 to 700 */
  /* <uniquifier>: Use a unique and descriptive class name */

.lato-light {
  font-family: "Lato", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.lato-regular {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.lato-bold {
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.lato-light-italic {
  font-family: "Lato", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.lato-regular-italic {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.lato-bold-italic {
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.poppins-extralight {
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.poppins-light {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.poppins-regular {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.poppins-medium {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.poppins-semibold {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.poppins-bold {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.poppins-extralight-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-style: italic;
}

.poppins-light-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.poppins-regular-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.poppins-medium-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.poppins-semibold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: italic;
}

.poppins-bold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: italic;
}


  :root {
	/*these HAVE TO match what is in the CUSTOMIZER > TYPOGRAPHY. Pull in Font Families using Font Manager. Set Headline-Font as 'All Headings', set body-font as HTML */
	--headline-font: "Poppins", sans-serif;
	--subtitle-font: "Lato", sans-serif;
	--body-font: "Lato", sans-serif;
	--link-font: "Inter", sans-serif;
}

/* DEFAULT BODY / Paragraph Font Settings */
p {
	font-size: var(--fs-body);
	font-weight: 400;
	line-height: 1.5;
	margin-bottom: 1.5rem;
	font-family: var(--body-font);
}

/* Default Headings weight, margin, font-family */

h1 {
	font-weight: 800;
	font-family: var(--headline-font);
	margin-bottom: .5em;
	color: var(--text);
}

h2, h3, .gb-headline-xxl, .gb-headline-xl, .gb-headline-h1, .gb-headline-h2, .gb-headline-h3 {
	font-weight: 800;
	margin-bottom: .5em;
	font-family: var(--headline-font);
}

h4, h5, h6, .gb-headline-h4, .gb-headline-h5, .gb-headline-h6 {
	font-weight: 700;
	margin-bottom: .5em;
	font-family: var(--headline-font);

}

/* FLUID FONT SIZE */

/* @link https://utopia.fyi/type/calculator?c=400,16,1.125,1920,18,1.067,10,3,400-1200&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
  --fs-text-xxs: clamp(0.7023rem, 0.6434rem + 0.2355vw, 0.9261rem);
  --fs-text-xs: clamp(0.7901rem, 0.738rem + 0.2085vw, 0.9882rem);
  --fs-text-s: clamp(0.8889rem, 0.8453rem + 0.1742vw, 1.0544rem);
  --fs-body: clamp(1rem, 0.9671rem + 0.1316vw, 1.125rem);
  --fs-text-m: clamp(1.125rem, 1.1052rem + 0.0793vw, 1.2004rem);
  --fs-text-l: clamp(1.2656rem, 1.2616rem + 0.016vw, 1.2808rem);
  --fs-h6: clamp(1.3666rem, 1.4389rem + -0.0602vw, 1.4238rem);
  --fs-h5: clamp(1.4582rem, 1.6396rem + -0.1512vw, 1.6018rem);
  --fs-h4: clamp(1.5559rem, 1.8668rem + -0.2591vw, 1.802rem);
  --fs-h3: clamp(1.6601rem, 2.1239rem + -0.3865vw, 2.0273rem);
  --fs-h2: clamp(1.7713rem, 2.4147rem + -0.5362vw, 2.2807rem);
  --fs-h1: clamp(1.89rem, 2.7436rem + -0.7113vw, 2.5658rem);
  --fs-hxl: clamp(2.0167rem, 3.1154rem + -0.9156vw, 2.8865rem);
  --fs-hxxl: clamp(2.1518rem, 3.5356rem + -1.1532vw, 3.2473rem);
}

 /* For browsers that don't support clamp */
 @supports not (font-size: clamp(1rem, 1vi, 1rem)) {
	:root {
		  
		  --fs-text-xxs: 0.79rem;
		  --fs-text-xs: 0.79rem;
		  --fs-text-s: 0.89rem;
		  --fs-body: 1rem;
		  --fs-text-m: 1.13rem;
		  --fs-text-l: 1.27rem;
		  --fs-h6: 1.42rem;
		  --fs-h5: 1.6rem;
		  --fs-h4: 1.8rem;
		  --fs-h3: 2.03rem;
		  --fs-h2: 2.28rem;
		  --fs-h1: 2.57rem;
		  --fs-hxl: 2.89rem;
		  --fs-hxxl: 3.25rem;
	}
	
	@media screen and (min-width: 3600px) {
	  :root {
			  --fs-text-xxs: 0.72rem;
			  --fs-text-xs: 0.72rem;
			  --fs-text-s : 0.9rem;
			  --fs-body: 1.13rem;
			  --fs-text-m: 1.41rem;
			  --fs-text-l: 1.76rem;
			  --fs-h6: 2.2rem;
			  --fs-h5: 2.75rem;
			  --fs-h4: 3.43rem;
			  --fs-h3: 4.29rem;
			  --fs-h2: 5.36rem;
			  --fs-h1: 6.71rem; 
			  --fs-hxl: 8.39rem;
			  --fs-hxxl: 10.48rem;
	font-family: var(--body-font);
	font-size: var(--fs-h5);
}

/* BLOG POST - UL MARKER TAKEAWAYS SECTION STYLING */
	.keytakeaways ~ ul {
		margin-left: 0px;
		list-style: none;
	}
	
	.keytakeaways ~ ul li {
		margin-bottom: 1rem;
		border-left: 4px solid var(--brand-alt);
		padding-left: 16px;
		font-family: var(--body-font);
		font-size: 1rem;
		border-radius: 4px;
	}
	
	ul, ol, li {
		font-family: var(--body-font);
		font-size: var(--fs-body);
		padding-inline-start: 0;
	}
	
	li ::marker {
		color: var(--brand-alt);
	}
	*/
	
	ol ::marker {
		font-family: var(--link-font);
		content: /*"# "*/ counter(list-item) ": ";
		font-size: 1rem;}

	blockquote {
		padding-inline-start: 1em;
		border-inline-start: 0.3em solid;
	}
	
	/* Body background color (outside wrapper) */
	body {
		background-color: var(--white) !important;
	}


/* Button Global Line Height */
.gb-button {
	line-height: 1em;
}

/* Remove Bottom Margin on Last Paragraph */
.gb-container p:last-child:last-of-type {
	margin-bottom: 0px;
}

.block-editor-block-list__layout .gb-container p:nth-last-child(2) {
	margin-bottom: 0px;
}
  
/*** COLOUR DECLARATION ***/
:root {
	/* LIGHT THEME PALETTE */
		--off-white: #fcf5e6; 
		--white: #fffefd;
		--primary-lightest: #b8d7c5;
		--primary-lighter: #58a177;
		--primary-light: #13a64f;
		--primary: #11783c;
		--primary-dark: #0e6030;
		--primary-darker: #0a4824;
		--primary-darkest: #073018;
		--primary-50: #f0fdf5;
		--primary-100: #dbfde8;
		--primary-200: #baf8d3;
		--primary-300: #84f1b0;
		--primary-400: #47e186;
		--primary-500: #1ec964;
		--primary-600: #13a64f;
		--primary-hover: #146738;
		--primary-focus: #135430;
		--secondary-lightest: #f5cbb3;
		--secondary-lighter: #eea983;
		--secondary-light: #e77c50;
		--secondary: #e26136;
		--secondary-dark: #d24324;
		--secondary-darker: #af321f;
		--secondary-darkest: #71261d;
		--action: #0158a3;
		--action-alt: #0c8eeb;
		--brand: #11783c;
		--brand-alt: #84f1b0;
		--squash: #781811;
		--squash-alt: #4b0904;
		--text-light: #13a64f;
		--text: #2c3e50;
		--text-dark: #161f28;
	}
	
/*** 2. UTILITIES ***/

/*** ------------------------------------------------------------------- ***/

/** BACK-TO-TOP BUTTON POSITIONING **/
.generate-back-to-top, .generate-back-to-top:visited {
	position: fixed;
	bottom: 40px;
	right: 35px;
	width: 50px;
	height: 50px;
	line-height: 50px;
	border-radius: 14px;
  text-align: center;
	z-index: 10;
  transition: opacity 300ms ease-in-out;
  opacity: 0.1;
  transform: translateY(1000px);
  font-size: 20px;
}

.generate-back-to-top__show {
    opacity: 1;
    transform: translateY(0);
}

/** SLIDE UP ANIMATION **/
@media (prefers-reduced-motion: no-preference) {
  .animate {
    opacity: 0;
    transform: translateY(100px);
    transition: opacity 1s ease, transform 0.6s ease;
    will-change: opacity, transform;
  }

  .animate.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* Disable animation in the editor preview */
  .editor-styles-wrapper .animate {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/** MOBILE ACTION BAR **/
.mobile-action-bar {
	position: fixed;
	width: 100%;
	bottom: 0;
	z-index: 2000;
}

.mobile-action-bar > *:not(:last-child) {
border-right: 1px solid var(--secondary);
}

/* Primary Navigation Styling */
/*.nav-float-right #site-navigation {
	margin-left: 0;
}

/*.main-navigation {
	width: 100%;
	background: var(--white);
}

#primary-menu {
	width: 100%;
	color: var(--primary);
}

.main-navigation li:nth-last-child(1) {
	margin-left: auto;
}

.main-navigation li:first-child {
	margin-left: auto;
}

/** CTA BUTTON ON NAVIGATION BAR **/

/**@media (min-width: 1025px) {

	/*Natural State*/
	/**.main-navigation .main-nav ul li.nav-cta a {
		background: var(--primary) !important;
		color: var(--primary) !important;
		padding: 0.8em 1em;
		margin-left: 16px;
		margin-right: 40px;
		border-radius: 4px;
		line-height: 1;
		font-weight: 600;
		text-transform: uppercase;
	}
	/*Hover State*/
	/**.main-navigation .main-nav ul li.nav-cta a:hover {
		background: var(--primary) !important;
		color: var(--primary) !important;
	}
}

@media (max-width: 1024px) {
	.main-navigation .main-nav ul li.nav-cta a {
		margin-left: 0px;
	}
}

/* NAVIGATION BAR - LINE ON HOVER */

/**.main-navigation .main-nav ul li a {
	color: var(--primary);
    border-bottom: 4px solid transparent;
}

.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li[class*="current-menu-"] > a {
    border-bottom: 2px solid var(--primary);

}

/* MOBILE MENU - SLIDEOUT NAVIGATION */
/**#generate-slideout-menu:before {
	position: absolute;
	width: 100%;
	height: 100%;
	content: '';
	background-color: #042f18;
	background-image: url('https://shandyscatering.id/wp-content/uploads/2025/04/mobile-bg.webp');
	background-position: center center;
	background-size: cover;
	opacity: 0.755;
}

/** BACK TO TOP **/
.generate-back-to-top, .generate-back-to-top:visited {
	position: fixed;
	bottom: 40px;
	right: 35px;
	width: 50px;
	height: 50px;
	line-height: 50px;
	border-radius: 14px;
  	text-align: center;
	z-index: 10;
  transition: opacity 300ms ease-in-out;
  opacity: 0.1;
  transform: translateY(1000px);
  font-size: 20px;
}

.generate-back-to-top__show {
    opacity: 1;
    transform: translateY(0);
}

/*** STICKY FLOATING SIDEBAR ***/
.sticky-content-track .gb-inside-container {
	height: 100%;
	padding-bottom: 15em; !important;
	position: relative; !important;
}

.sticky-content-wrapper {
	position: sticky;
	/*	margin-top: 200px;*/
	top: 10em; !important;
	bottom: auto; !important;
}

/* Line Limits */
.line-limit-3, .line-limit-2 {
	display: -webkit-box;
	-webkit-box-orient:vertical;
	overflow: hidden;
}

.line-limit-3 {
	-webkit-line-clamp: 3;
}

.line-limit-2 {
	-webkit-line-clamp: 2;
}

/* Aspect Ratios */
.ar-16-9, .ar-9-16, .ar-4-3, .ar-1-1, .ar-3-2 {
	object-fit: cover;
}

.ar-16-9 {
	aspect-ratio: 16/9;
}

.ar-9-16 {
	aspect-ratio: 9/16;
}

.ar-4-3 {
	aspect-ratio: 4/3;
}

.ar-1-1 {
	aspect-ratio: 1/1;
}

.ar-3-2 {
	aspect-ratio: 3/2;
}


/* No Underline */
.no-ul, .no-ul a {
	text-decoration: none;
}

/* Border Radius */
:root {
	--radius-xs: .125rem;
	--radius-s: .25rem;
	--radius-m: .5rem;
	--radius-l: 1rem;
	--radius-xl: 1.5rem;
	--radius-xxl: 2rem;
	--radius-50: 50%;
	--radius-circle: 50%;
}


/*** 4. GLOBAL STYLES ***/

/* SECTIONS */
.section-d {
	padding: clamp(1.5rem, 1.4277rem + 0.3614vw, 1.875rem) clamp(1rem, 0.9518rem + 0.241vw, 1.25rem);
}

.section-xs {
	padding: clamp(0.75rem, 0.7139rem + 0.1807vw, 0.9375rem) clamp(0.75rem, 0.7139rem + 0.1807vw, 0.9375rem);
}

.section-s {
	padding: clamp(1rem, 0.9518rem + 0.241vw, 1.25rem) clamp(1rem, 0.9518rem + 0.241vw, 1.25rem);
}

.section-m {
	padding: clamp(2rem, 1.9036rem + 0.4819vw, 2.5rem) clamp(1.5rem, 1.4277rem + 0.3614vw, 1.875rem);
}

.section-l {
	padding: clamp(3rem, 2.8554rem + 0.7229vw, 3.75rem) clamp(2rem, 1.9036rem + 0.4819vw, 2.5rem);
}

.section-xl {
	padding: clamp(4rem, 3.8072rem + 0.9639vw, 5rem) clamp(3rem, 2.8554rem + 0.7229vw, 3.75rem);
}

.section-2xl {
	padding: clamp(6rem, 5.7108rem + 1.4458vw, 7.5rem) clamp(3rem, 2.8554rem + 0.7229vw, 3.75rem);
}

/* HELPER CLASSES */

/* Standard Shadow(s) */

.shadow-standard {
	box-shadow: 0px 5px 16px -5px rgba(33, 33, 33, 0.2);
	transition: all .2s ease-in;
}

.shadow-standard:hover {
	box-shadow: 0px 8px 32px 0px rgba(33, 33, 33, 0.1);
}

/* Max Width(s) */

.max-width-1024 {
	max-width: 1024px;
}

.max-width-768 {
	max-width: 768px;
}

.max-width-640 {
	max-width: 640px;
}

.max-width-480 {
	max-width: 480px;
}

/* Margin Auto */

.margin-auto{
	margin-left: auto;
	margin-right: auto;
}

/* Position Properties */

.relative{
	position: relative;
}

.absolute{
	position:absolute;
	top: 0px;
	left: 0px;
}

.sticky{
	position: sticky;
	top: 24px;
}

/* CUSTOM CODE */
.scroll-grid {
	grid-template-columns: none;
	grid-auto-flow: column;
	grid-auto-columns: 300px;
	overflow-x: scroll;
	scroll-snap-type: x mandatory;
}

.scroll-grid > div {
	scroll-snap-align: start;
}

/*OWL CAROUSEL CUSTOM NAVIGATION*/

.main-content {
    position: relative;
    .owl-theme {
        .custom-nav {
            position: absolute;
            top: 20%;
            left: 0;
            right: 0;
            .owl-prev, .owl-next {
                position: absolute;
                height: 100px;
                color: inherit;
                background: none;
                border: none;
                z-index: 100;

                i {
                    font-size: 2.5rem;
                    color: var(--primary-300);
                }
            }

            .owl-prev {
                left: 0;
            }

            .owl-next {
                right: 0;
            }
        }
    }
}



/* Auto-Numbering on Heading */
.reasons {
	counter-reset: reasons;
}

.reasons-card {
	counter-increment: reasons;
}

.reasons-card__heading {
	display: flex;
	align-items: center;
	gap: 0.5em;
}

.reasons-card__heading::before {
	content:counter(reasons);
	width: 4rem;
	aspect-ratio: 1/1;
	background-color: var(--primary-400);
	display: grid;
	place-items: center;
	color: var(--dark-primary);
	border-radius: 50vw;
	border: 1px solid var(--primary-600);
}

/* Auto-Alternate Card */

.reasons > * > *:last-child {
	order: -1;
}

/* Desktop Only */
@media (min-width: 767px) {
 .reasons > *:nth-child(even) > *:last-child {	
		order: 1;
}
}

/* Auto-Numbering on Image */
.reasons-card__media {
	position: relative;
	overflow: hidden;

}

.reasons-card__media::before {
 content: counter(reasons);
	position: absolute;
	font-size: 200px;
	line-height: 0.75rem;
	inset-inline-end: -10px;
	inset-block-end: -10px;
	font-weight: 900px;
	color: var(--primary);
}


/* Make the UL that contains your list items the actual grid container */
div#gb-accordion-content-c725e42a > ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* For 3 equal columns */
    gap: 20px; /* Optional: Add some spacing between grid items */
    list-style: disc; /* Ensure bullets are explicitly set, though they should be by default */
    list-style-position: outside; /* Ensure bullets are outside the content */

    margin: 0; /* Keep margin at 0 if you want */
    padding-left: 1.5em; /* <--- ADD THIS to create space for bullet points */
    /* You can also add padding-top, padding-right, padding-bottom if needed */
}

/* Ensure the LI children behave well within the grid */
div#gb-accordion-content-c725e42a > ul > li {
    margin: 0; /* Keep li margins at 0 */
    /* You might want to remove padding-left from li if it's interfering with alignment
       if the bullet point is now showing due to ul's padding */
}