/*
Theme Name: alexperry25
Author: Blue Smarty
Author URI: https://blue-smarty.com/
Version: 2025.09
Text Domain: alexperry25
*/



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: #606060;
	--link-color: rgb(255, 1, 1);
	--SiteBlue: #364F6B;
	--SiteGrey: #D9D9D9;
	--Ltgrey: #cbcbcb;
	--LtblueGrey: #f7f9fb;
	--White: #ffffff;
	--SiteBlueHov: #33899f;
	--SiteLightBlue: #4EABE7;
    --LightSkyBlue: #e3feff;
	--Background: #FFFFFF;
	/* --Footer: #15171A; */
	--Footer: #000000;
	--Yellow: #ebe99c;
	--Footercolor: #a1a1a1;
	--Green:#3FC1C9;
	--Orange: #fe8a03;
	/* --DkBlue: #092947; */
    --DkBlue: #072A38;
    --Black: #000000;
}

body {
	font-family: 'Open Sans', sans-serif;
	color:var(--maintxt);
	background-color: var(--Background);
	font-size: 16px;
    padding-top: 68px; /* Adjust according to header height to prevent content from being hidden */
}

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

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

h5.card-title {color: var(--Black);}

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000; /* Ensures it stays above other elements */
    background-color: white; /* Adjust as needed */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Optional: Adds a shadow for better visibility */
}


.card-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Space between elements ensures proper spacing */
    height: 100%; /* Ensure the card-body takes full height of the card */
}


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

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

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

.custom-thumbnail-class {
    width: 100%; /* Ensure the intrinsic width is maintained */
    max-width: 100%; /* Prevent it from overflowing its container */
    height: auto; /* Maintain aspect ratio */
    border-radius: 6px 6px 0 0;
}



h1, h2, h3, h4, h5 {
	 font-family: "Special Elite", system-ui;
}
h1 {
	font-size: 2.7rem;
    font-weight: 700;
	color: var(--Black);
}
@media (min-width: 576px) {
    h1 {
        font-size: 3.4rem; /* original larger font size */
    }
}
h2 {
	font-size: 2.5rem;
    font-weight: 700;
	color: var(--Black);
}
h3 {
	font-size: 2rem;
    font-weight: 700;
	color: var(--Black);
}
h5 {font-weight: 800;}

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

.bg-footerdark h2 {color:white}
.intro {font-size: 1.4rem;}
.bookpromotion p {font-size: 1.4rem;}
.blueboxtitle {font-size: 1.3rem;}

.postitalics {font-style: italic;}
.bold {font-weight: 700;}
.green {color: var(--Green);}
.black {color: var(--Black);}
.noborder {border: none!important}
/* .priceboxlist ul {list-style-type: none;} */
.priceboxlist ul {
    text-align: left;
    list-style-position: outside;
}
@media (min-width: 576px) {
    .priceboxlist ul {
    text-align: center;
    list-style-position: inside;
    }
}

.supersmalltxt {font-size:0.6rem}
.smalltxt {font-size:0.8rem}
.textsmall {font-size:0.6rem}
.textmed {font-size:1.3rem}
.textsmmed {font-size:1.1rem}
.white-text {color: white;}
.black-text {color: black!important;}

.border-bottom-custom-skyblue {border-bottom: 2px var(--Green) solid !important;}


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



/* Default styles for the custom-border class */
.custom-border1 {
    border: 1px solid var(--Green); /* Thin border */
    border-radius: 5px;
    padding: 15px;
}

.custom-border {
    border: 1px solid var(--Green); /* Thin border */
    border-radius: 5px;
    padding: 15px;
    position: relative; /* Required for pseudo-element positioning */
    overflow: hidden; /* Hide any overflow content */
    transition: box-shadow 0.3s ease-in-out; /* Add a smooth transition for the box-shadow property */
}

/* Add a pseudo-element for the shadow effect */
.custom-border::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%; /* Start the shadow effect from the left */
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0)); /* Vertical shadow gradient */
    transition: left 0.3s ease-in-out; /* Add a smooth transition for the left property */
}

/* Apply the shadow effect on hover */
.custom-border:hover::before {
    left: 100%; /* Move the shadow effect to the right */
    transition: left 0.3s ease-in-out; /* Add a smooth transition for the left property */
}




.btnbars {
    background: none;
	border: none;
	z-index: 9;
	align-self: end;
	margin-right: 1rem;
}


@media (min-width: 576px) { /* Adjusts for sm breakpoints and above */
    .inner-padding {
        padding-right: 15px; /* Adjust this value as needed */
    }
}


.navbar-nav ul {list-style:none;}

/* Base links for any WP menu */
.navbar-nav a {
  color: var(--White) !important;
  font-family: 'Poppins', sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 1rem 1rem;
  line-height: 3;
}

/* Hover */
.navbar-nav a:hover {
  color: var(--Green) !important;
}

/* Current / Active */
.navbar-nav .current-menu-item > a,
.navbar-nav .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-ltskyblue { background: var(--LightSkyBlue);}
.bg-blue { background: var(--SiteLightBlue);}
/* .bg-dkblue { background: var(--SiteBlue);} */
.bg-white { background: var(--White);}
.bg-black { background: var(--Black);}
.bg-vdark {background: var(--bw-dark);}
.bg-footerdark {background: var(--Footer);}
.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);}
.outlinedkblue {border: 3px solid var(--DkBlue);}
.outlinegreen {border: 3px solid var(--Green);}
.whitelabelicon {width:70px;height:auto;}
.invert-color {filter: invert(100%);}


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

.extended-center {margin-left:auto;margin-right:auto;}
.logosize { width: 280px;}
.smlogosize { width: 200px;}
.offcanvas-header { display: block!important;}

.txtonwhite {color: var(--SiteBlue)!important;}
.whitetxt {color: var(--White)}
.whitetxt h2 {color: var(--White)}
.whitetxt p {color: var(--White)}
.bluetxt {color:var(--SiteLightBlue)!important}
.margincenter {margin: auto;}
.blacktxt {color: var(--Black)}


.standard-box {
    background-size: cover;
    background-position: center;
    aspect-ratio: 16 / 9; /* Maintain aspect ratio */
    border-radius: 8px 8px 0 0;
    overflow: hidden;
    position: relative;
    text-decoration: none;
}

.standard-box .content {
    background: rgba(0, 0, 0, 0.6); /* Semi-transparent dark background */
    padding: 16px;
    bottom: 0;
    left: 0;
    position: absolute;
    color: var(--White); /* Title and icon color */
}

.standard-box h3 {
    font-size: 1.25rem;
    font-weight: bold;
    margin: 0;
}

.standard-box .arrow-icon {
    background-color: var(--Green); /* Green background for the box */
    padding: 0.7rem; /* Space inside the box */
    display: inline-flex; /* Ensures the arrow stays inside */
    justify-content: center; /* Centers the arrow horizontally */
    align-items: center; /* Centers the arrow vertically */
    z-index: 1; /* Ensures the box stays on top */
    position: relative; /* Positioning to stack properly */
}

.standard-box .arrow-icon i {
    font-size: 1.5rem; /* Adjust size of the arrow */
    color: var(--White) !important; /* Ensure the arrow is white */
    position: relative; /* Ensures proper layering */
    z-index: 2; /* Keeps the arrow above the background box */
}

.standard-box .arrow-icon svg {
    color: var(--White) !important; /* Overrides the default color */
    width: 1.5rem; /* Set the desired width */
    height: 1.5rem; /* Set the desired height */
    fill: var(--White) !important; /* Ensure the SVG arrow is white */
    z-index: 2; /* Ensure it stays above other elements */
    display: block; /* Ensures proper rendering in some browsers */
    position: relative; /* Ensures proper stacking within the container */
}



.standard-box:hover .content {
    background: rgba(7, 42, 56, 0.8); /* Slightly darker on hover */
}

.title-box {
    background-color:var(--DkBlue); /* Black background for the title */
    color: var(--White) !important; /* Ensure the title is white */
    padding: 1rem; /* Space inside the box */
    border-radius: 0 0 8px 8px; /* Optional: Rounded bottom corners to match the image */
    font-size: 1.25rem; /* Adjust the title size */
    line-height: 1.5; /* Improve readability */
    margin-top: -8px; /* Overlap the image slightly for a polished look */
}

.custom-equal-height {
    display: flex;
    flex-direction: column; /* Stack children vertically */
    justify-content: stretch; /* Ensure children take up equal space */
}

.additional-content {
    flex-grow: 1; /* Ensures this div stretches to fill remaining space */
    background-color:var(--DkBlue); /* Black background */
    color: var(--White); /* White text */
    padding: 1rem; /* Inner padding */
    border-radius: 8px; /* Optional rounded corners */
    font-size: 1rem; /* Adjust content text size */
    line-height: 1.5; /* Improve readability */
    text-align: left; /* Center text */
    display: flex; /* Flexbox for centering */
    justify-content: center; /* Center content horizontally */
    /* align-items: center; Center content vertically */
}

.vertical-boxes .standard-box {
    height: 200px; /* Or any height you prefer */
    background-size: cover;
    background-position: center;
    border-radius: 8px; /* Optional */
}
.vertical-boxes .content {
    padding: 1rem; /* Adjust as needed */
}


.custom-box {
    height: 330px; /* Adjust as needed */
    background-size: cover;
    background-position: center;
    border-radius: 8px 8px 0 0; /* Optional for rounded corners */
    overflow: hidden;
    position: relative;
}

.custom-box .black-section {
    background-color:var(--DkBlue); /* Black background */
    color: #fff; /* White text */
    font-size: 0.9rem; /* Adjust as needed */
    line-height: 1.4; /* Adjust for readability */
    height: 120px;
}

.black-section {
    min-height: 167px!important; /* Adjust this value as needed */
    display: flex;
    align-items: center; /* Vertically center content */
    justify-content: center; /* Optionally center text horizontally */
    text-align: center; /* Optional, for cleaner presentation */
}


.custom-box .content {
    height: 80px!important; /* Fixed height for the title/arrow bar */
    background: rgba(7, 42, 56, 0.5); /* Optional translucent background */
    color: white;
}

.custom-box .arrow-icon {
    background-color: var(--Green); /* Green background for the box */
    padding: 0.7rem; /* Space inside the box */
    display: inline-flex; /* Ensures the arrow stays inside */
    justify-content: center; /* Centers the arrow horizontally */
    align-items: center; /* Centers the arrow vertically */
    z-index: 1; /* Ensures the box stays on top */
    position: relative; /* Positioning to stack properly */
}

.custom-box .arrow-icon i {
    font-size: 1.5rem; /* Adjust size of the arrow */
    color: var(--White) !important; /* Ensure the arrow is white */
    position: relative; /* Ensures proper layering */
    z-index: 2; /* Keeps the arrow above the background box */
}

.custom-box .arrow-icon svg {
    color: var(--White) !important; /* Overrides the default color */
    width: 1.5rem; /* Set the desired width */
    height: 1.5rem; /* Set the desired height */
    fill: var(--White) !important; /* Ensure the SVG arrow is white */
    z-index: 2; /* Ensure it stays above other elements */
    display: block; /* Ensures proper rendering in some browsers */
    position: relative; /* Ensures proper stacking within the container */
}


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




.btn-brand {
	color: var(--White);
    border-radius: 5px;
    background-color: var(--Black);
    padding: 15px 40px;
    text-transform: uppercase;
    font-size: 1.1rem;
    font-weight: bold;
    width:13rem;
}
.btn-brand:hover {
	color: var(--Black);
    background-color: var(--Green);
}





/* footer */

#footer {
	background-color: var(--White);
	color:var(--bw-dark);
	font-size: 1rem;
}

#footer a {
	color:var(--bw-dark);
}

#footer a:hover {
	color: var(--Footercolor);
}



/* back to top */

#backtotop {
	display: inline-block;
	color: var(--Black);
	width: 50px;
	height: 50px;
	text-align: center;
	border-radius: 4px;
	position: fixed;
	bottom: 90px;
	right: 25px;
	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(--Black)!important;
}

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

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


svg.svg-inline--fa {color:var(--bw-dark);} 
svg.svg-inline--fa.fa-facebook-square {color: var(--bw-dark)!important;}
svg.svg-inline--fa.fa-instagram {color: var(--bw-dark)!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(--bw-dark)!important;}
svg.svg-inline--fa.fa-chevron-right {color:var(--White)!important;}
 

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;
}


/* animations */

/* fade in*/ 

.fade-in {
    opacity: 0;
    transition: opacity 0.5s ease-out;
}

.fade-in.visible {
    opacity: 1;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

/* slide in */
.slide-in-left, .slide-in-right {
    opacity: 0;
    transition: all 1.0s ease-out;
}

.slide-in-left {
    transform: translateX(-300px);
}

.slide-in-right {
    transform: translateX(300px);
}

.slide-in-left.visible, .slide-in-right.visible {
    opacity: 1;
    transform: translateX(0);
}

@keyframes slideInLeft {
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInRight {
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* slide up and fade in */

@keyframes slideUpFadeIn {
    from {
        opacity: 0;
        transform: translateY(30px); /* Adjust the value as needed */
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.slide-up-fade-in {
    opacity: 0;
    transform: translateY(300px);
    transition: opacity 1.0s ease, transform 0.5s ease;
}

.slide-up-fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}