@charset "utf-8";
/*
    -------------------------------------------------------------------
        Theme Name: ELC Benefits 2026
        Theme URI: https://Elc2026Benefits.com
        Author: Olo Group
        Author URI: https://ologroup.com
        Description: Custom theme for Elc2026Benefits.com
        Tags: custom, Estee Lauder
        Version: 1.0
        Requires at least: 5.0
        Tested up to: 6.2
        Requires PHP: 7.3
    -------------------------------------------------------------------
*/

/* General Imports
-------------------------------------------------------------------*/
@import url('css/bootstrap.css');
@import url('fonts/css/all.css');
@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* Root
-------------------------------------------------------------------*/
:root {
    --white: #FFF;
	--grey-dark: #0f5e87;
	--grey-med: #B7B5B3;
	--grey-light: #E5E7E6;
    --blue-dark: #0f2554;
	--newgray: #4b7588;
}

/* HTML
-------------------------------------------------------------------*/
html {
    font-size: 62.5%;
    font-family: "Libre Franklin", sans-serif;
}

body {
    background: var(--grey-light);
    font-size: 2.3rem;
    font-weight: 300;
}

.container {
    max-width: 768px;
}

.core-format ul li {
	background-image: url('images/icon-list.png');
	background-repeat: no-repeat;
	background-position: left .4em;
	background-repeat: no-repeat;
	padding-left: 16px;
}

.core-format ul.toc li {
	background-image: url('images/icon-list.png');
	background-repeat: no-repeat;
	background-position: left .4em;
	background-repeat: no-repeat;
	padding-left: 16px;
}

@media (max-width: 766px) {
	    .core-format ul li {line-height: 1.2;}
    }

.btn-custom {
    background-color: var(--blue-dark);
    color: var(--white);
    border-color: var(--blue-dark);
    font-size: 1.8rem;
}

.btn-custom:hover {
    background-color: var(--grey-dark);
    color: var(--white);
    border-color: var(--grey-dark);
}

.form-control {
    font-size: 1.8rem;
}

/* Background Colors
-------------------------------------------------------------------*/
.bg-blue-dark {
    background: var(--blue-dark);
    color: var(--white);
}

.core-format a {
    font-weight: 600;
    color: #0f2554;
    text-decoration: none;
    background: none;
}



.bg-maintoc {background-color: #f2eddd;}
    .bg-maintoc h2 {color: #182752;}
    .bg-maintoc a {color: var(--grey-dark); text-decoration: none; background: none;}
    .bg-maintoc ul {list-style: none; line-height: 1.2;}

.bg-core {
    min-height: 910px;
    background-color: #f2eddd; 
    background-position: bottom right; 
    background-repeat: no-repeat; 
    background-size: contain; 
    padding-bottom: 45px;
}
    .bg-core h2 {color: #0f2554;}
    .bg-core .bg-goback a {background-color:#4b7588;}

.bg-insurance {
    min-height: 910px;
    background-color: #fbf7e2; 
    background-position: bottom right; 
    background-repeat: no-repeat; 
    background-size: contain; 
    padding-bottom: 105px;
}
    .bg-insurance h2 {color: #0f2554;}
    .bg-insurance .bg-goback a {background-color: #4b7588;}

.bg-wellness {
    min-height: 910px;
    background-color: #f3eecc; 
    background-position: bottom right; 
    background-repeat: no-repeat; 
    background-size: contain; 
    padding-bottom: 45px;
}
    .bg-wellness h2 {color: #0f2554;}
    .bg-wellness .bg-goback a {background-color: #4b7588;}

.bg-support {
    min-height: 910px;
    background-color: #fdf9e9; 
    background-position: bottom right; 
    background-repeat: no-repeat; 
    background-size: contain; 
    padding-bottom: 45px;
}
    .bg-support h2 {color: #0f2554;}
    .bg-support .bg-goback a {background-color: #4b7588;}

.bg-financial {
    min-height: 910px;
    background-color: #eeeee1; 
    background-position: bottom right; 
    background-repeat: no-repeat; 
    background-size: contain; 
    padding-bottom: 45px;
}
    .bg-financial h2 {color: #0f2554;}
    .bg-financial .bg-goback a {background-color: #4b7588;}

.bg-additional {
    min-height: 910px;
    background-color: #faf8eb; 
    background-position: bottom right; 
    background-repeat: no-repeat; 
    background-size: contain; 
    padding-bottom: 45px;
}
    .bg-additional h2 {color: #0f2554;}
    .bg-additional .bg-goback a {background-color: #4b7588;}


/* Headings
-------------------------------------------------------------------*/
h1 {font-size: 8rem; line-height: 1; font-weight: 300;}
h2 {font-size: 8rem;  font-weight: 300; line-height: .9; letter-spacing: -1px;}

    @media (max-width: 766px) {
	    h2 {font-size: 6rem;}

        span.main-title {display: block; margin-bottom: 10px;}
        img.main-logo {max-width: 70%;}
    }

h3 {font-size: 2.2rem;  font-weight: 700; line-height: 1; color: var(--newgray);}
.text-white {color: #4b7588 !important;}
h4 {font-size: 2.6rem; font-weight: 400; line-height: 1; color: var(--grey-dark);}

@media (max-width: 768px) {
    h4, h2 {
        padding-left: 3rem !important;
        padding-right: 3rem !important;
    }
}

.bg-blue-dark.sticky-top {
    line-height: 1;
}

sup {
    top: -0.5em ;
    font-size: .5em;
}

p.small-italic {font-size: 1.6rem; font-style: italic; max-width: 55%;}
p.width-adjust {max-width: 80%;}

@media (max-width: 768px) {
    p.small-italic, p.width-adjust {max-width: 65%;}
}

/* Desktop styling */
@media (min-width: 800px) {
    .carousel-control-prev-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
    }
    .carousel-control-next-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
    }
}

/* Mobile styling */
@media (max-width: 768px) {
    .carousel-control-prev,
    .carousel-control-next {
        width: 15%;
        opacity: 0.9;
    }

    .carousel-control-prev-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23999' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
    }

    .carousel-control-next-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23999' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
    }

    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        transform: scale(1.3);
        xfilter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.4)); /* softer shadow since icons are lighter */
        padding: 10px;
    }

    .carousel-control-prev:active .carousel-control-prev-icon,
    .carousel-control-next:active .carousel-control-next-icon {
        transform: scale(1.4);
        background-color: rgba(255, 255, 255, 0.6);
    }
}


/* Carousel
-------------------------------------------------------------------*/
.carousel-control-prev, .carousel-control-next {
    position: fixed !important;
}


.core-format ul {
    list-style: none;
    padding: 0;
    margin: 0 0 1.2em 0;
}

.core-format p {
    margin: 0 0 1.1em 0;
    line-height: 1.2;
}

.core-format strong, .core-format .bold, .core-format b {
    font-weight: 600;
}

.bg-goback a {
    color: var(--white);
    display: inline-block;
    border-radius: 10px;
    padding: .75em 1em;
    font-size: 1.6rem;
    text-decoration: none;
}

.bg-goback-tos a {
    color: var(--white);
    display: inline-block;
    border-radius: 10px;
    padding: .75em 1em;
    font-size: 1.6rem;
    text-decoration: none;
    /* background: rgba(255, 255, 255, .25); */
    background-color: var(--blue-dark);
}

.bg-goback-tos {
    padding-left: 1em;
}

.start-15 {
    left: 5% !important;
}

.top-25 {
    top: 50% !important;
}

.top-75 {
    top: 75% !important;
}

@media (max-width: 766px) {
    .top-25 {bottom: 10% !important; top: 80% !important}
    .start-15 {left: 2% !important;}

}