/*
Theme Name: LucyPratt2025
Author: Blue Smarty
Author URI: https://blue-smarty.com/
Version: 2025.10
Text Domain: lucypratt2025
*/

html {
	scroll-behavior: smooth;
	font-size: 1.1rem;
}

html, body{
	overflow-x: hidden !important;   
	padding-right: 0!important; 
}


/*VARS*/

:root {
	/* --bw-dark: #1A1A1A; */
	--bw-dark: #15171A;
	--mainColor: #a0a785;
	--maintxt: #081F3F;
	--link-color: rgb(255, 1, 1);
	/* --SiteBlue: #0873b3; */
    --SiteBlue: #7c9db1;
	--SiteGrey: #D9D9D9;
	--Silver: #d5d5d5;
	--Ltgrey: #cbcbcb;
	--LtblueGrey: #f7f9fb;
	--White: #ffffff;
	--SiteBlueHov: #33899f;
	--SiteLightBlue: #4EABE7;
	--White: #FFFFFF;
	/* --Footer: #081F3F; */
    --Footer: #e9e9e9;    
	--Yellow: #F4FFC7;
	/* --Footercolor: #a1a1a1; */
	--Footercolor: #4EABE7;
	--Green:#add24e;
	--sliderbkg: #262626;
	--DkBlue: #141e2c;
}

body {
	/* font-family: 'Open Sans', sans-serif; */
    font-family: 'Raleway', sans-serif;
	color:var(--maintxt);
	background-color: var(--Background);
	font-size: 0.9rem;
}

body a {
	color: var(--maintxt);
	text-decoration: none;
}

body a:hover {
	color: var(--Ltgrey);
	text-decoration: none;
}



h5.card-title {color: var(--DkBlue);font-size:1.6rem;min-height:6rem}
@media only screen and (max-width: 768px) {
    h5.card-title {min-height:0rem}
}

.card-body > p { color: var(--bw-dark);}

a > h5.card-title:hover {color: var(--SiteBlue);}

.card-body > p > span.postitalics.bold > a {color: var(--SiteBlue);}
.card-body > p > span.postitalics.bold > a:hover {color: var(--SiteBlueHov);}


h1, h2, h3, h4, h5 {
	font-family: 'Raleway', sans-serif;
}
h1 {
	font-size: 3.4rem;
    font-weight: 300;
	color: var(--SiteBlue);
}
h1.display-1 {color:var(--Yellow)}
h1.display-2 {color:var(--Yellow)}

h2 {
	font-size: 2.5rem;
    font-weight: 300;
	color: var(--SiteBlue);
}
h5 {font-weight: 800;}

.largetitle {font-size: 3.4rem;
    font-weight: 700;
	font-family: 'Raleway', sans-serif;
	line-height:1.2;
	color: var(--bw-dark);
}

.MainHeading p {font-size:1.4rem}
.intro {font-size: 1.4rem;}
.bookpromotion p {font-size: 1.4rem;}
.blueboxtitle {font-size: 1.3rem;}
.bluehrdbl {border-top: 3px #4EABE7 solid;border-bottom: 3px #4EABE7 solid}
.bluehr {border-top: 3px #4EABE7 solid;}

.postitalics {font-style: italic;}
.bold {font-weight: 700;}
.blue {color: var(--SiteBlue);}
.noborder {border: none!important}

.smalltxt {font-size:0.8rem}
.textsmall {font-size:0.6rem}
.textmed {font-size:1.3rem}
.textsmmed {font-size:1.1rem}
.text-titles {
color: var(--maintxt);
margin-top: 0.5rem;
}

.greentxt {color:var(--Green);font-weight:bold;}
.iconsizesm {width: 1.8rem;}



.btnbars {background: none;
	border: none;
	z-index: 9;
	align-self: end;
	margin-right: 1rem;
}
/* Starting from the 'sm' breakpoint (default is 576px for Bootstrap 4 and 5) */
@media (min-width: 576px) {
    .btnbars {
        margin-right: 5rem;
    }
}


/* ul#menu-menu-1 a {
    color: var(--White);
}
ul#menu-menu-1 a:hover {
    color: var(--SiteLightBlue);
} */

.offcanvas-body ul li.menu-item {
    padding: 0.5rem 0px;
    font-size: 1.2rem;
}


/* Style for menu items with children */
.offcanvas-body ul li.menu-item-has-children > a {
    position: relative;
}

/* Add right arrow icon to menu items that have a child */
.offcanvas-body ul li.menu-item-has-children > a:after {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;

    /* This colour will be used by the SVG via currentColor */
    color: var(--SiteBlue); /* or var(--MainTxt) */

    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'><path fill='currentColor' d='M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z'/></svg>");

    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    position: absolute;
    right: -30px;
    top: 5px;
    transition: transform 0.3s ease;
}

/* Style for when the sub-menu is visible */
.offcanvas-body ul li.menu-item-has-children > a:hover:after {
    color: var(--MainTxt);
}


/* Hide second-level menu items and Indent second-level menu items */
.offcanvas-body ul li ul.sub-menu {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
    margin-left: 0px; /* Adjust as needed for the desired indentation */
	margin-top:10px;
	background-color: var(--SiteGrey);
	padding-left: 20px;
	border-radius: 6px;
}

.offcanvas-body ul li ul.sub-menu li a {color: var(--maintxt)!important;}
.offcanvas-body ul li ul.sub-menu li a:hover {color: var(--DkBlue)!important;font-weight: 600;}


.image-caption {
    text-align: center;
    font-size: 14px;
    color: #666;
    margin-top: 5px;
}

/* slider offset */
.slider-offset {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    border: 0;
    margin-top: -90px;
    z-index: -9;
}

/* Mobile override */
@media (max-width: 767px) {
    .slider-offset {
        margin-top: -211px;
    }
}


/* a.nav-link {
    color:var(--White)!important;
	font-family: 'NexaLight';
	font-size: 0.9rem;
    font-weight: 500;
	padding: 1rem 1rem;
}
a.nav-link:hover {
	color: var(--Ltgrey)!important;
}

li.nav-item.active a {
	color: var(--Green)!important;
	font-weight: bold;
}  */

.slideout a {text-decoration: none;color:var(--bw-dark);}

.btn-close-white {
    filter: invert(1) grayscale(100%) brightness(200%);
}

.bg-light { background: #f1f1f1;}
.bg-grey { background: var(--SiteGrey);}
.bg-ltbluegrey { background: var(--LtblueGrey);}
.bg-blue { background: var(--SiteLightBlue);}
.bg-white { background: var(--White);}
.bg-vdark {background: var(--bw-dark);}
.bg-white {background: var(--White);color: var(--bw-dark);}
.bg-dkblue {background: var(--DkBlue);color: var(--White);}
.bg-green {background: var(--Green);color: var(--White);}
.sliderbkg {background-color: var(--sliderbkg);}
/* CSS for mobile screens to adjust the height and padding of the slider container */
@media (max-width: 768px) {
    .sliderbkg {
        height: 350px; /* Adjust this value based on your needs */
        padding-top: 20px; /* Padding above the images */
        padding-bottom: 20px; /* Padding below the images */
        display: flex;
        align-items: center; /* Centers the carousel vertically */
        justify-content: center; /* Centers the carousel horizontally */
    }
}


.mainservices {background: var(--Silver);}


@media (min-width: 1800px) {
	.container-extended {
		max-width: 1536px;
	}
}

.extended-center {margin-left:auto;margin-right:auto;}
.navlogo { width:6rem}
.smlogosize { width: 300px;}
.offcanvas-header { display: block!important;}

.logotxt {font-family: 'Raleway', sans-serif; font-size: 4rem; font-weight:300;color:var(--White);line-height:1}
.logotxt2 {font-family: 'Raleway', sans-serif; font-size: 3rem; font-weight:200;color:var(--SiteBlue);}
.txtonwhite {color: var(--SiteBlue)!important;}
.whitetxt {color: var(--White)}
.whitetxt h2 {color: var(--White)}
.whitetxt p {color: var(--White)}
.bluetxt {color:var(--SiteBlue)!important}
.margincenter {margin: auto;}

.logo-white { color: var(--White); }
.logo-black { color:var(--SiteBlue); }

.burger-white { color: var(--White); }
.burger-black { color: #000; }





  .info-box-icon {
    background-color: #B8CE3E;
    border-style: none;
    height: 100px;
    width: 100px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 13px;
}

.info-box-icon2 {
    background-color:var(--White);
    border-style: none;
    height: 80px;
    width: 80px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 13px;
}

.colgap {
    margin-left: 10px;
    margin-right: 10px;
}


/* FAQS */
.btn.collapsed .rotate-icon {
    transform: rotate(0deg);
    transition: transform 0.4s linear;
}
.btn .rotate-icon {
    margin-left: 10px;
    transform: rotate(90deg);
    transition: transform 0.4s linear;
}

.faqcard {background-color: var(--SiteLightBlue);border:none!important; --bs-card-border-color: transparent !important;}
.faqcardbtn {font-size:1.4rem;text-decoration: none;border: none;color: var(--White);}
.btn-link.faqcardbtn:hover {
    color: var(--White);
}
.faq.card-body {
    background-color: var(--SiteBlue);	
	border-bottom-left-radius: 0.375rem;;
	border-bottom-right-radius: 0.375rem;;
}
.faq.card-body p {
    color: white;
}

.btn-primary {
    background-color: var(--SiteBlue);
    border-color: var(--SiteBlue);
    color: #fff;
}
.btn-primary:hover {
    background-color: var(--SiteBlueHov);
    border-color: var(--SiteBlueHov);
    color: #fff;
    text-decoration: none;
}

.btn-brand {
	color: var(--White);
    border-radius: 5px;
    background-color: var(--SiteBlue);
    padding: 9px 40px;
    text-transform: uppercase;
    font-size: 1rem;
    /* font-weight: bold; */
}
.btn-brand:hover {
	color: var(--White);
    background-color: var(--DkBlue);
    text-decoration: none;
}

.wpforms-form button[type=submit], button.wpforms-page-button {
    background-color: var(--SiteBlue) !important;
    border-color: var(--SiteBlue) !important;
    color: #fff !important;
    border-radius: 5px;
    padding: 9px 40px!important;
    text-transform: uppercase;
}
 
.wpforms-form button[type=submit]:hover, button.wpforms-page-button:hover {
    background-color:var(--DkBlue) !important;
}


.loader {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #4EABE7; /* Blue */
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 2s linear infinite;
    position: relative;
    left: 50%;
    top: 50%;
    margin: -60px 0 0 -60px;
    display: none; /* Hidden by default */
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* footer */
#footer {
    margin: 5em 0 0;
    padding: 2em 0 5em;
    color: var(--maintxt);
}

footer h1, footer h2 { color: var(--maintxt); font-size: 1.8rem;}
footer h3 { color:var(--maintxt);     font-size: 1.5rem;}
footer a { color:var(--maintxt); text-decoration: none; }
footer a:hover, footer a:active { color: #bbb; text-decoration: underline; }

#footer hr {
    border: 0;
    border-top: 1px solid var(--maintxt);
}

.footer-social {
    font-size: 2rem;
    margin-right: 0.5rem;
}

#footer {
background-color: var(--Footer);
}

ul#menu-footer-menu {
    list-style: none;
    padding: 0;
}

#menu-footer-menu li {
    padding-left: 0;
}

#menu-footer-menu li>a {
    padding-left: 0;
}

/* back to top */

#backtotop {
	display: inline-block;
	color: var(--Silver);
	width: 50px;
	height: 50px;
	text-align: center;
	border-radius: 4px;
	position: fixed;
	bottom: 30px;
	right: 15px;
	transition: background-color .3s, opacity .5s, visibility .5s;
	opacity: 0;
	visibility: hidden;
	z-index: 1000;
}

#backtotop svg, #backtotop i {
	width: 100%;
	height: 100%;
}

#backtotop:hover {
	cursor: pointer;
	color: var(--Silver)!important;
}

#backtotop:active {
	color: var(--Silver);
}

#backtotop.show {
	opacity: 1;
	visibility: visible;
}


svg.svg-inline--fa {color:var(--White)!important;} 
svg.svg-inline--fa.burger-black path {fill: #000 !important;}
svg.svg-inline--fa.fa-house {color: var(--SiteBlue)!important;}
svg.svg-inline--fa.fa-search {color: var(--SiteBlue)!important;padding:10px}

svg.svg-inline--fa.fa-facebook-square {color: var(--maintxt)!important;}
svg.svg-inline--fa.fa-twitter-square {color: var(--maintxt) !important;}
svg.svg-inline--fa.fa-instagram-square {color: var(--maintxt)!important;}
svg.svg-inline--fa.fa-envelope-square {color: var(--maintxt)!important;}


/* svg.svg-inline--fa:hover {
	color: var(--White)!important;
} */
svg.svg-inline--fa.fa-facebook-square:hover {color: var(--SiteGrey)!important;}
svg.svg-inline--fa.fa-instagram:hover {color: var(--SiteGrey)!important;}
.svg-inline--fa.fa-chevron-square-up {color:var(--Silver)!important;}
 
.info-box-icon2 > svg.svg-inline--fa {color:var(--Green);}


.embed-container { 
	position: relative; 
	padding-bottom: 56.25%;
	overflow: hidden;
	max-width: 100%;
	height: auto;
} 

.embed-container iframe,
.embed-container object,
.embed-container embed { 
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.wp-block-embed-youtube iframe {
    aspect-ratio: 16/9 !important;
    width: 100% !important;
    height: auto !important;
}

.embed-responsive {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 65%; /* Aspect ratio 16:9 */
}
.embed-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}



li.custom-bullet {
    list-style-type: none;
    background: url('/wp-content/uploads/2023/09/bullet.png') no-repeat left 4px;
    padding-left: 45px; /* Adjust as needed */
    background-size: 20px; /* Adjust as needed */
	font-style: italic;
    font-weight: 500;
}

.footer-logos img {
    max-height: 70px;
    margin-right: 40px;
}


/* Make the carousel responsive and center items vertically */
/* Ensure the carousel inner takes up the desired amount of space and is flexible */
.carousel-inner {
    display: flex;
    align-items: center; /* This will vertically center the items */
    overflow: hidden; /* Prevent any overflow from the carousel */
}

/* Individual carousel items */
.carousel-item {
    width: 100%; /* Ensure each item takes up the full width of the container */
    justify-content: center;
    flex: none; /* Prevent flexbox from shrinking or growing the items */
}

/* Images within carousel items */
.carousel-item img {
    width: auto; /* Maintain original image width */
    max-height: 60vh; /* Adjust based on your needs, ensures images are not too tall */
    object-fit: contain; /* Preserve aspect ratio */
}

/* Further adjustments for image sizes on larger screens, if necessary */
@media (min-width: 992px) {
    .carousel-item img {
        max-height: 500px; /* Example fixed max-height for larger screens */
        max-width: 100%; /* Ensure the image width does not exceed the carousel width */
    }
}

/* Adjustments for smaller screens */
@media (max-width: 768px) {
    .carousel-item img {
        max-height: 300px; /* Smaller max-height for mobile devices */
    }
}

/* Carousel indicators adjustment if needed */
.carousel-indicators {
    bottom: -3rem !important;
}

/* CSS to hide carousel indicators on screens smaller than 768px */
@media (max-width: 768px) {
    .carousel-indicators {
        display: none;
    }
}


.border-bottom2 {
    border-bottom: 2px solid #6d6d6d !important;
}
.border-top2 {
    border-top: 2px solid #6d6d6d !important;
}


.logo-slider {
    overflow: hidden;
    white-space: nowrap;
    display: flex; /* Make the logo slider a flex container */
    align-items: center; /* Vertically center the items (logos) in the container */
    height: 100%; /* Adjust this as needed, ensuring it has a defined height for vertical alignment to work */
}

.slide-track {
    display: flex;
    gap: 7rem; /* Adjust this value for the gap between logos */
    animation: scroll-logo 10s linear infinite; /* Control speed here */
    flex-wrap: nowrap; /* Prevent wrapping of items to ensure a single row */
}

.slide-track > a {width: 200px;}
.slide-track > a > img {width: 100%; height: auto;}

/* Pause animation on hover */
.logo-slider:hover .slide-track {
    animation-play-state: paused;
}

@keyframes scroll-logo {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%); /* Adjust this based on the total width of all logos for a smooth loop */
    }
}

.logo img {
    display: block;
    width: 200px; /* Set your desired logo width */
    height: auto;
}

.logo {
    display: flex; /* Make each logo a flex container */
    justify-content: center; /* Center its content (the image) horizontally */
    align-items: center; /* Center its content (the image) vertically */
    width: 200px; /* This ensures the anchor tag matches the image width */
}



/* gallery */

.gallery-image-container {
	width: calc(25% - 30px);
	margin: 15px;
	position: relative;
}

.gallery-image-container__33 {
	width: calc(33.33% - 30px);
}

@media( max-width: 768px) {
	.gallery-image-container__33 {
		width: calc(50% - 30px);		
	}
	.gallery-image-container {
		width: calc(50% - 30px);
		margin: 0 15px 25px 9px;
	}
}

.gallery-image-container__25 {
	width: calc(25% - 30px);
}

@media( max-width: 768px) {
	.gallery-image-container__25 {
		width: calc(50% - 30px);
	}
}

.gallery-image-container__100 {
	width: 100%;
	margin: 0;
}

.gallery-image-container:after {
	content: "";
	display: block;
	padding-bottom: 100%;
}

.gallery-image {
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
}

.gallery-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}


/* Fixed-height thumbnail box */
.art-thumb-wrapper {
    width: 100%;
    height: 280px; /* adjust to taste (200–350px is typical) */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Make the image fill the box */
.art-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}