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



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; */
    --maintxt: #000000;
	--link-color: rgb(255, 1, 1);
    --redtext: rgb(255, 1, 1);
	--SiteBlue: #082439;
	--SiteGrey: #D9D9D9;
    --SiteLightGrey: #e4e4e4;
	--Ltgrey: #cbcbcb;
	--LtblueGrey: #f7f9fb;
	--White: #ffffff;
	--SiteBlueHov: #33899f;
	--SiteLightBlue: #4EABE7;
	--Background: #FFFFFF;
	/* --Footer: #15171A; */
	--Footer: #000000;
	--Yellow: #ebe99c;
	--Footercolor: #a1a1a1;
	--Green:#add24e;
	--Orange: #fe8a03;
	--DkBlue: #092947;
    --Black: #000000;
}

body {
	font-family: 'Open Sans', sans-serif;
	color:var(--maintxt);
	background-color: var(--Background);
	font-size: 18px;
}

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

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

h5.card-title {color: var(--Black);}
.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);}


h1, h2, h3, h4, h5 {
	font-family: 'Raleway', sans-serif;
}
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: 2.5rem;
    font-weight: 700;
	font-family: 'Raleway', sans-serif;
	line-height:1.2;
    margin-top: 30px;
    color: #333;
    border-bottom: 2px solid #333;
    padding-bottom: 5px;
    }
}


.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);}
.red {color: var(--redtext);font-weight:bold;}
.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;
    }
}

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


.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;
}
/* Starting from the 'sm' breakpoint (default is 576px for Bootstrap 4 and 5) */
/* @media (min-width: 576px) {
    .btnbars {
        margin-right: 5rem;
    }
} */

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


.navbar-nav {
    gap: 20px; /* Space between menu items */
    list-style: none;
    padding: 0;
    margin: 0;
}

.navbar-nav li {
    display: inline-block;
}

.navbar-nav a {
    text-decoration: none;
    color: var(--White);
    font-size: 16px;
    font-weight: 500;
    padding: 5px 10px;
}

.btnbars {
    background: none;
    border: none;
    cursor: pointer;
    position: relative; /* To allow precise positioning */
    top: -10px; /* Adjust this value to move the button up */
    transform: translateY(-50%); /* Center vertically within its container */
}

@media (min-width: 992px) {
    .btnbars {
        top: 0; /* Reset for larger screens */
        transform: none; /* No vertical adjustment needed for desktop */
    }
}


.offcanvas-body {
    padding: 20px;
}

/* Desktop Inline Menu: Active Item */
@media (min-width: 992px) {
    .navbar-nav .current-menu-item a {
        color: var(--SiteLightBlue); /* Set the active color */
        font-weight: bold; /* Optional: Make the active item stand out */
        text-decoration: none; /* Optional: Add an underline for emphasis */
    }

    .navbar-nav .current-menu-item a:hover {
        color: var(--SiteLightBlue); /* Optional: Change color on hover */
       
    }
}


/* Offcanvas Menu (Mobile) */
@media (max-width: 991px) {
    .offcanvas .navbar-nav {
        display: flex;
        flex-direction: column; /* Stack items vertically */
        gap: 10px; /* Add spacing between items */
        padding-left: 0; /* Remove default padding */
        margin-bottom: 0; /* Remove default margin */
        list-style: none; /* Remove bullets */
    }

    .offcanvas .navbar-nav li {
        width: 100%; /* Full width for each item */
    }

    .offcanvas .navbar-nav a {
        text-align: left; /* Align text to the left */
        padding: 10px 15px; /* Add padding for better clickability */
        text-decoration: none; /* Remove underline */
        color: var(--White); /* Use a white color for links */
        font-size: 16px; /* Adjust font size */
    }

    .offcanvas .navbar-nav a:hover {
        background: rgba(255, 255, 255, 0.1); /* Add a subtle hover effect */
    }
}

.menu-download-icon > a {
    align-items: center;
}

.menu-download-icon > a img {
    vertical-align: middle; /* Aligns the icon with the text baseline */
    margin-right: 8px;      /* Adds space between the icon and text */
}

.menu-download-icon > a::before {
    content: '';
    display: inline-block;
    background: url(/wp-content/uploads/2025/01/download_icon.webp) no-repeat center center;
    background-size: contain;
    width: 20px;
    height: 20px;
    margin-right: 8px; /* Space between icon and text */
    vertical-align: middle; /* Align icon with text */
    position: relative; /* Isolates positioning changes */
    /* transform: translateY(3px);  */
}





.menu-item a {
    color: var(--White)!important;
	font-family: 'Poppins', sans-serif;
	font-size: 0.9rem;
    font-weight: 500;
	padding: 0.4rem 1rem;
    line-height: 1.6;
    border: 1px solid white;
}
@media (max-width: 768px) { /* Adjust breakpoint as needed */
    .menu-item a {
        line-height: 4; /* Increased line-height for mobile */
    }
}
.menu-item a:hover {
    color: var(--SiteLightBlue) !important;
}
.menu-item.current-menu-item a, /* WordPress default */
.menu-item.active a { /* Custom active class */
    color: var(--SiteLightBlue) !important;
    font-weight: bold;
}

a.nav-link {
    color:var(--White)!important;
	font-family: 'Poppins', sans-serif;
	font-size: 0.9rem;
    font-weight: 500;
	padding: 1rem 1rem;
}
a.nav-link:hover {
	color: var(--SiteLightBlue)!important;
}

li.nav-item.active a {
	color: var(--SiteLightBlue)!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-lightgrey { background: var(--SiteLightGrey);}
.bg-ltbluegrey { background: var(--LtblueGrey);}
.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%);}

.bulletmargins > ul > li {padding-top:2rem;}
.bulletmargins > ul > li > ul > li {padding-top:1rem}

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

.extended-center {margin-left:auto;margin-right:auto;}
.logosize { width: 260px;}
.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)}
.border-black {border: 1px solid #000000 !important;}

.carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}


  .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: 60px;
    width: 80px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 13px;
}

@media (min-width: 576px) { 
    /* Adjusts for sm breakpoints and above */
    .info-box-icon2 {
        height: 80px;
}
}
.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(--Green);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;
}


.menu-toggle {
	background-color: var(--SiteLightBlue);
	color: white;
	border: none;
	border-radius: 0;
	padding: 1rem 1.5rem;
	font-family: 'Cardo';
	font-size: 1.8rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	transition: background-color 0.3s ease;
	width: 100%;
}

.menu-toggle:hover {
	background-color: var(--Black);
}

.menu-toggle svg {
	margin-left: 1rem;
	transition: transform 0.3s ease;
}



.btn-brand {
	color: var(--White);
    border-radius: 0px;
    background-color: var(--SiteLightBlue);
    padding: 10px 30px;
    text-transform: uppercase;
    font-size: 0.8rem;
    font-weight: bold;
}
.btn-brand:hover {
	color: var(--White);
    background-color: var(--SiteBlue);
}

.btn-black {
	color: var(--White);
    border-radius: 0px;
    background-color: var(--Black);
    padding: 10px 30px;
    text-transform: uppercase;
    font-size: 0.8rem;
    font-weight: bold;
}
.btn-black:hover {
	color: var(--White);
    background-color: var(--SiteBlue);
}

.btnmidsize {width:12rem;}

.position-relative {
    position: relative;
}

.top-left-image {
    position: absolute;
    top: -50px; /* Adjust as needed */
    left: -50px; /* Adjust as needed */
}

.plusimage250size {width:100px;height:auto}

@media (max-width: 768px) {
    .mobile-hide {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .mobile-show {
        display: block !important;
    }
}



/* footer */

#footer {
	background-color: var(--Footer);
	color: #ffffff;
	font-size: 1rem;
}

#footer a {
	color: #d9d9d9;
}

#footer a:hover {
	color: #fff;
}

.footertxt {font-size:0.8rem}
.footercolor {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;
}


/* Styling for the discs */
.greybkg2 {
    position: relative; /* This is needed to position the half-discs correctly */
    background-color: #f1f1f1;
}

.greybkg2::before {
	content: '';
    position: absolute;
    width: 25px; /* Half the width of the full disc */
    height: 50px; /* Full height of the disc */
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--Green); /* Color of the disc */
    z-index: 1; /* To ensure it appears above the timeline line */
}

/* Shift the left half-discs to the right to overlap the timeline line */
.row.justify-content-start .greybkg2::before {
    left: calc(103% - 17.5px); /* Half of the width of the timeline line */
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
}

/* Shift the right half-discs to the left to overlap the timeline line */
.row.justify-content-end .greybkg2::before {
    right: calc(103% - 18.5px); /* Half of the width of the timeline line */
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
}

/* Media query for mobile devices */
@media (max-width: 768px) {
    /* Hide the half-discs on mobile */
    .greybkg2::before {
        display: none;
    }

    /* Reposition the timeline line to the left */
    .timeline-line {
        left: 0;
        width: 4px; /* Optional: Make the line thicker for mobile visibility */
		margin-left:7px;
    }

    /* Ensure greybkg boxes are to the right of the timeline line */
    .row .greybkg2 {
        margin-left: 4px; /* Or enough space to clear the timeline line */
    }

    /* Additional adjustments for mobile layout */
    .row.justify-content-start,
    .row.justify-content-end {
        justify-content: flex-start; /* Align all boxes to the right of the line */
    }
}


svg.svg-inline--fa {color:var(--SiteLightBlue);} 
svg.svg-inline--fa.fa-facebook-square {color: var(--SiteLightBlue)!important;}
svg.svg-inline--fa.fa-instagram {color: var(--SiteLightBlue)!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(--SiteLightBlue)!important;}
svg.svg-inline--fa.fa-chevron-right {color:var(--White)!important;}
 
.info-box-icon2 > svg.svg-inline--fa {color:var(--SiteLightBlue);}
.info-box-icon2 > .fa-sharp.fa-solid {color:var(--SiteLightBlue);}
.info-box-icon2 > .fa-regular {color:var(--SiteLightBlue);}
.info-box-icon2 > .fa-solid {color:var(--SiteLightBlue);}
.col-standard > .fa-solid, .col-resort > .fa-solid {color:var(--SiteLightBlue);}
.col-standard > .fa-solid.fa-circle-xmark {color:red}




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


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


/* table */

.whitelabelsolutiontable {
    width: 100%;
    table-layout: fixed;
    /* Other styles as needed */
}

.whitelabelsolutiontable tr {line-height:2}

table.whitelabelsolutiontable .col-title {
    width: calc(80% - 1rem); /* Adjust the 1rem to account for padding or borders */
	font-size: 1.3rem;
}

table.whitelabelsolutiontable .col-standard, .col-resort {
    width: calc(10% - 1rem); /* Adjust as needed */
}

@media (min-width: 768px) {
    table.whitelabelsolutiontable .col-title {
        width: calc(80% - 1rem);
    }

    table.whitelabelsolutiontable .col-standard, .col-resort {
        width: calc(10% - 1rem);
    }
}


.custom-table {
    width: 100%;
    border-collapse: collapse;
}
.custom-table td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: left;
}
.custom-table td:first-child {
    width: 66.66%;
}
.custom-table td:nth-child(2) {
    width: 33.33%;
}


/* 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);
}


.wpforms-form button[type=submit] {
    background-color:var(--Black) !important;
    border-color:var(--Black) !important;
    color:var(--White) !important;
    transition: background 0.3s ease-in-out;
}
 
.wpforms-form button[type=submit]:hover {
    background-color:var(--Black) !important;
}


/* .embed-responsive-item {
    width: 67vw;
    height: 25vw;
} */

.embed-responsive-item {
    width: 100%;
    height: 485px; /* Default to a fixed height on larger screens */
}

/* Adjust the iframe size on smaller screens */
@media (max-width: 768px) {
  .embed-responsive-item {
      height: 485px; /* Smaller height for mobile devices */
  }
}


.responsive-image {
    width: 100%;
    height: 500px; /* Default height for desktop */
    object-fit: cover; /* Ensures the image covers the area while maintaining aspect ratio */
}

@media (max-width: 768px) { /* For mobile devices */
    .responsive-image {
        height: 450px; /* Adjusted height for mobile */
        min-width: 320px; /* Adjusted width for mobile */
        margin: 0 auto; /* Centers the image */
        object-fit: cover;
    }
}



/* responsive featured images */
.featured-image-container {
    position: relative;
    width: 100%;
    height: auto;
}

.featured-image-container img {
    width: 100%;
    height: auto;
    object-fit: cover; /* Ensure the image covers the container */
}

@media (max-width: 768px) {
    .featured-image-container {
        padding-top: 100%; /* This creates a square container */
    }

    .featured-image-container img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}




.file-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

hr {
    border: none;
    border-top: 1px solid #000;
    margin: 20px 0;
}

.file-item {
    margin: 10px 0;
}

.file-link {
    display: flex;
    align-items: center;
    padding: 15px;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.file-link:hover {
    background-color: #f7f7f7;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.file-details {
    flex-grow: 1;
    font-size: 16px;
    color: #333;
}

.file-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #666;
}

.file-type,
.file-size {
    white-space: nowrap;
}

.file-download-icon {
    width: 20px;
    height: auto;
    margin-left: 10px;
}

.file-meta.text-right {
    text-align: right;
}



/* modal discalimer popup */
.modal-content {
    border-radius: 8px;
    overflow: hidden;
}

.modal-header {
    background-color: var(--SiteLightBlue);
    color: white;
}

.modal-footer {
    justify-content: space-between;
}

#acceptDisclaimer {
    background-color: #28a745;
    border-color: #28a745;
}

#declineDisclaimer {
    background-color: #dc3545;
    border-color: #dc3545;
}


/* Tick icon for bullets */
.tick-list {
    list-style: none; /* Remove default bullet points */
    padding: 0;
  }
  
  .tick-list li {
    position: relative;
    padding-left: 25px; /* Space for the icon */
  }
  
  .tick-list li::before {
    content: "✔"; /* Tick symbol */
    position: absolute;
    left: 0;
    color: green; /* Tick color */
    font-weight: bold;
  }
  
  /* Cross icon for bullets */
  .cross-list {
    list-style: none; /* Remove default bullet points */
    padding: 0;
  }
  
  .cross-list li {
    position: relative;
    padding-left: 25px; /* Space for the icon */
  }
  
  .cross-list li::before {
    content: "✖"; /* Cross symbol */
    position: absolute;
    left: 0;
    color: red; /* Cross color */
    font-weight: bold;
  }

  /* Roman numerals list */
 
  .lowercase-roman-list {
    list-style-type: lower-roman; /* Use lowercase Roman numerals */
    padding-left: 40px;
    margin: 10px 0;
  }
  .lowercase-roman-list li {
    padding-left: 20px;
    margin: 10px 0;
  }