/* General styles */
BODY {
    background-image: url(../../../../images/hosting_watchers_bg_01.gif) !important;
    background-repeat: repeat;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

/* there is a glitch somewhere that makes inputs invisible. Can't find it sofar */
/* had to fix with this: */
textarea {
    background-color: #f4f4f4 !important;
    border-radius: 5px !important;
    border: 1px solid #ccc !important;
    padding: 10px;
}

select,
input {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    background-color: #f4f4f4 !important;
    border-radius: 5px !important;
    border: 1px solid #ccc !important;
    /*min-height: 30px;*/
    /*max-height: 30px;*/
    padding: 0px 2px 2px 10px !important;
    font-weight: normal;
}

/* End of General styles */

#g-navigation {
    border-bottom: 1px #4e4e4e solid !important;
}

/* Header styles */
#g-header {
    background-image: none;
}

.g-owlcarousel-item-content-container {
    width: 90% !important;
    margin: 0px auto !important;
}

.owlCarousel .g-owlcarousel-item-content {
    box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
    background-color: #2a2a2a3e;
    border-top-left-radius: 25px;
    border-bottom-right-radius: 25px;
    background-repeat: no-repeat;
    box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px !important;
    width: 100% !important;
}

@media screen and (min-width: 576px) {
    .owlCarousel .g-owlcarousel-item-content h1 {
        color: #bdbdbd;
        font-size: 2vi !important;
        line-height: 50px !important;
    }
}

@media screen and (min-width: 768px) {
    .owlCarousel .g-owlcarousel-item-content h1 {
        color: #bdbdbd;
        font-size: 3vi !important;
        line-height: 60px !important;
    }
}

@media screen and (min-width: 992px) {
    .owlCarousel .g-owlcarousel-item-content h1 {
        color: #bdbdbd;
        font-size: 3vi !important;
        line-height: 60px !important;
    }
}

@media screen and (min-width: 1200px) {
    .owlCarousel .g-owlcarousel-item-content h1 {
        color: #bdbdbd;
        font-size: 4vi !important;
        line-height: 85px !important;
    }
}

/* add 768px; 992px; 1200px */
.owlCarousel .g-owlcarousel-item-content h1,
h2 {
    color: #bdbdbd;
    font-weight: bold;
    /* text-shadow: 1px 1px 2px #ffffff; */
}

.backgroundArrow {
    background: url("/images/design/arrow-down-01.png") no-repeat bottom center;
    height: 50px;
}

/* End of Header styles */

/* Navigatiom styles */
.customNavigation {
    border-bottom: 1px #ff0000 solid !important;
}

.customNavigationMenu A {
    color: #666 !important;
}

.customNavigationMenu A:hover {
    color: #00b8f0 !important;
}

.customBreadcrumbs {
    margin: 0px !important;
    padding: 0px !important;
    background-color: #363636;
    font-size: 12px;
    color: #ccc;
}

.customBreadcrumbs span {
    padding: 0 !important;
    margin: 0 !important;
}

.customBreadcrumbs A {
    color: #76cfff;
    padding: 0 7px 0 0 !important;
    margin: 0 !important;
}

.customBreadcrumbs A:hover {
    color: #00b8f0;
}

.customBreadcrumbs ol,
li {
    padding: 0 !important;
    margin: 0 !important;
}

/* Footer navigation styles  */
.customFooterNavigation {
    color: #ccc;
    font-size: 12px;
}

.customFooterNavigation A {
    font-size: 12px;
    /* display: block; */
    /* height: 10px; */
    /* line-height: 10px; */
    padding: 0px 15px 0px 5px !important;
    margin: 3px;
}

.customFooterNavigation A:hover {
    color: #c6f06b !important;
    border-left: 1px #898989 solid !important;
    /* text-decoration: none !important; */
}

.customFooterNavigation li {

    /* height: 12px; */
}

/* End of Footer navigation styles  */
/* End of Navigatiom styles */

/* Graphstyles */
/*.Voltaire{ 
	display: flex; 
	position: static; 
    flex-direction: column; 
    border: solid red 3px; 
    margin: 0 auto 1em auto; 
    width: 100% !important; 
    min-width: 0; 
} 
.Voltaire CANVAS{ 
	 
}*/
/* End of Graphstyles */

/* Member page & user & login styles */
.loginLinkStyle {
    margin: inherit;
}

.loginLinkStyle A {
    color: #6d6d6d !important;
    text-decoration: none;
}

.loginLinkStyle i {
    padding-right: 15px;
}

.loginLinkStyle div {
    line-height: 14px;
}

.loginPageStyles input[type="text"] {
    color: #363636;
    width: 30vw;
}

.loginPageStyles input[type="password"] {
    color: #0070c0;
    max-width: 30vw;
}

/*.loginPageStyles button .btn, */
/*.btn-primary { */
/*  width: 200px; */
/*  height: 40px; */
/*  padding: 10px !important; */
/*  border-radius: 7px !important; */
/*  background-color: #363636 !important; */
/*} */
.loginPageStyles input {
    width: 180px;
}

.loginPageStyles .inputbox {
    width: 180px !important;
}

.loginPageStyles fieldset {
    clear: left;
    border: 1px #5b5b5b dotted;
    border-radius: 15px;
    padding: 17px 10px 10px 50px;
    background-color: #6d6d6d57;
}

.loginPageStyles .login-description {
    margin-bottom: 15px;
}

.loginPageStyles .login-description img {
    float: left;
    padding-right: 10px;
}

/* End of Member page & user & login styles */


/* Page styles */
/* 
    Theses styles are also for Fabrik lists becausae I can't apply style to a
    Fabrik list directly, so I need to apply style to the the page via menu
    properties and use this style to tweak the Fabrik List/Form on this page
*/
.FabrikFormCustomization .plg-yesno {
    /*border: 1px #ccc solid;*/
    max-height: 32px;
    margin: 0px;
}
/* End of Page styles */



.slidingBanner {
    border: 1px #ccc solid;
    border-radius: 5px;
    background-color: #e1fff4;
}

/* 6 best providers */
.providerTopWinners {
    margin: 35px auto 10px auto !important;
    width: 80%;
}

.providerTopWinners A {
    color: rgb(198, 240, 107) !important;
    text-decoration: none;
}

.providerTopWinners H3 {
    text-align: center;
}

.providerTopWinners .fabrik_groupdata {
    margin: 3px 15px;
}

.providerTopWinners .fabrikNav {
    visibility: hidden;
    display: none;
    height: 0;
}

.providerTopWinners .fabrik_actions {
    visibility: hidden;
    display: none;
    height: 0;
}

.providerTopWinners .fabrikDivElement {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.providerTopWinners .fabrik_divrow {
    background-color: hsla(0, 0%, 83%, 0.155);
    text-align: center;
    border-top-left-radius: 15px;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 15px 25px,
        rgba(0, 0, 0, 0.05) 0px 5px 10px;
}

.providerTopWinners .fabrik_row {
    /*height: 90px;*/
}

.providerTopWinners .list_provider_cumulative_score___total_score {
    margin-bottom: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    /* Remove fixed border size to prevent distortion */
    border: 0.8em solid #00b8f0;
    border-radius: 50%;
    /*background-color: #6f0;*/
    color: rgb(198, 240, 107) !important;
    font-weight: bold;
    text-align: center;
    /*text-shadow: rgba(255, 255, 255, 0.5) 0px 3px 3px;*/
    
    /* Dynamic size */
    font-size: 1.5em;
    width: auto;
    height: auto;
    aspect-ratio: 1 / 1;
    padding: 0.8em;
    /* controls how much space around the number */
    box-sizing: border-box;
    
    /* Prevent flex parents from distorting shape */
    flex: 0 0 auto;
    
    box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset,
        rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset,
        rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px,
        rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px,
        rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

.providerTopWinners .list_provider_cumulative_score___provider_link {
    font-weight: bold;
    font-size: 1.2em;
}

.providerMainContainer .g-title {
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
        rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    padding-left: 15px;
    background-color: #f4f4f4;
}

.providerMainContainer UL {
    text-align: left;
}

.providerMainContainer .list-footer {
    visibility: hidden;
    display: none;
    height: 0;
}

.providerMainContainer .fabrik_actions {
    visibility: hidden;
    display: none;
    height: 0;
}

.providerMainContainer .fabrik___heading {
    visibility: hidden;
    display: none;
    height: 0;
}

.providerMainContainer .fabrik_element {
    padding: 3px;
    margin: 3px;
    font-size: 14px;
    box-sizing: border-box;
    width: 100%;
}

.providerMainContainer h3 {
    color: #656769;
}

/* badge style */
.badge {
    padding: 0 10px 0 0;
}

/* badge at the top of review container */
.badgeTop {
    margin-top: -55px;
    text-align: left;
    padding-left: 15px;
}

.ratingsFabrikTable .listfilter INPUT {
    border: 1px #999999 solid;
    max-width: 100px;
    height: 30px;
    padding-left: 3px;
    font-size: 0.8em;
    float: left;
}

.ratingsFabrikTable .listfilter SELECT {
    max-width: 60px;
    height: 30px;
    padding-left: 3px;
    font-size: 0.8em;
    float: left;
    border-radius: 3px;
}

.winner {
    border: 3px green solid !important;
}

.totalScore {
    margin: 5px 10px;
    background-color: #f4f4f4;
    padding-bottom: 10px;
    border-bottom: 1px #cf0 solid;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px,
        rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}

/* this is had to copy from the browser and override it in order to remove border-bottom */
.table> :not(caption)>*>* {
    padding: 0.5rem 0.5rem;
    background-color: var(--bs-table-bg);
    border-bottom: none !important;
    border-bottom-width: 0px;
    border-bottom-style: solid;
    border-bottom-color: rgb(223, 227, 231);
}

.totalScore h2 {
    margin: 0 0 20px 0;
    min-height: 80px;
    font-weight: bold;
    text-align: center;
    background-color: #efefef;
    border-bottom: 1px solid #e5e5e5;
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px,
        rgba(0, 0, 0, 0.07) 0px 2px 2px,
        rgba(0, 0, 0, 0.07) 0px 4px 4px,
        rgba(0, 0, 0, 0.07) 0px 8px 8px,
        rgba(0, 0, 0, 0.07) 0px 16px 16px;

    display: flex;
    /* enables vertical alignment */
    align-items: center;
    /* vertically centers text + image */
    justify-content: center;
    /* centers content horizontally */
    gap: 10px;
    /* space between text and image */
}

.totalScore h2 a {
    font-size: 0.8em !important;
}

.totalScore h2 a:hover {
    color: #33cc00;
}

.totalScore h2 img {
    height: 1.2em;
    /*scales with the heading’s font size*/
    /* width: 20%; */
    /* height: auto; */
    /* margin-right: 30px; */
    /*opacity: 0.85;*/
}

.totalScore h2 span {
    /* color: #0070c0;
    background-color: #c6f06b;
    border: 6px #8a8a8a solid;
    padding: 10px;
    border-radius: 15px; */
}

.totalScore h2 span A {
    /*color: #00b8f0 !important;*/
}

.totalScore h3 {
    margin: 10px;
    font-size: 18px;
    text-align: center;
}

.totalScore h6 {
    margin: -14px 0 0 13px;
    font-size: 0.7em;
    text-align: left;
    color: #636363;
}

.totalScore LI {
    margin: 10px 0px 3px 0;
    line-height: 20px !important;
}

details summary {
    cursor: pointer;
    font-weight: bold;
    padding: 10px;
    background-color: #efefef;
    border: 1px solid #e4e4e4 rounded;
}

details .content {
    padding: 10px;
    /* border: 1px solid #ccc; */
    border-top: none;
}

@media screen and (min-width: 576px) {
    .totalScore h2 {
        font-size: 1.2vi !important;
    }
}

@media screen and (min-width: 768px) {
    .totalScore h2 {
        font-size: 2.3vi !important;
    }
}

@media screen and (min-width: 992px) {
    .totalScore h2 {
        font-size: 2vi !important;
    }
}

@media screen and (min-width: 1200px) {
    .totalScore h2 {
        font-size: 2.2vi !important;
    }
}

/* add 768px; 992px; 1200px */

.totalScoreLogos {
    margin: 5px 10px;
    display: flex;
    flex-wrap: wrap;
    /* wrap to next row */
    justify-content: center;
    /* center the row */
    gap: 1rem;
    /* space between logos */
    padding: 1rem 0;
}

.totalScoreLogos a {
    display: flex;
    align-items: center;
}

.totalScoreLogos img {
    height: 30px;
    /* uniform height */
    width: auto;
    /* keep natural aspect ratio */
    object-fit: contain;
    /* prevents stretching */
    transition: transform 0.2s ease;
}

.totalScoreLogos img:hover {
    transform: scale(1.05);
    /* subtle hover effect */
}





.totalScoreReviewerLogos {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin: 10px 0;
    padding: 0;
    text-align: center;
}

/* Reviewr pannel with logos/templorary text links */
.totalScoreReviewerLogos span {
    /* this is for the Reviewer logos to be centered */
    flex-basis: 44%;
    /*flex-basis: auto;*/
    /*min-width: fit-content; */
    /*min-width: -webkit-fill-container; */
    /*border-width: 1px;*/
    /*border-color: transparent;*/
    /*border-bottom-right-radius: 5px;*/
    padding: 0px 3px;
    margin: 5px 7px;
    /*background-color: #ccc;*/
    background-color: transparent;
    /*background-color: #00b8f0;*/
    align-self: center;
    /*box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 3px, rgba(0, 0, 0, 0.05) 0px 2px 5px; */
    /*box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;*/
}

/* Note: images are inside SPAN which is already set to 44% width. */
.totalScoreReviewerLogos IMG {
    margin: 5px 5px 5px 10px;
    height: 20px;
    /* width: fit-content; */
    /* max-width: 84%; */
    /* this is for not making the logos too large */
    /* float: left; */
}

.totalScoreReviewerLogos A {
    /* color: #c6f06b; */
    color: #fff;
    display: block;
}

/*@media screen and (min-width: 576px) { */
/*  .totalScoreReviewerLogos span{ */
/*    font-size: 1vw !important; */
/*  }*/
/*    .totalScoreReviewerLogos IMG { */
/*        height: 30px;*/
/*        width: fit-content;*/
/*    }*/
/*} */
/*@media screen and (min-width: 768px) { */
/*  .totalScoreReviewerLogos span{ */
/*    font-size: 1.3vw !important; */
/*    font-weight: bold; */
/*  } */
/*  .totalScoreReviewerLogos IMG { */
/*        height: 40px;*/
/*        width: fit-content;*/
/*    }*/
/*} */
/*@media screen and (min-width: 992px) { */
/*  .totalScoreReviewerLogos span{ */
/*    font-size: 1.5vw !important; */
/*    font-weight: bold; */
/*  } */
/*  .totalScoreReviewerLogos IMG { */
/*        height: 50px;*/
/*        width: fit-content;*/
/*    }*/
/*} */
/*@media screen and (min-width: 1200px) { */
/*  .totalScoreReviewerLogos span{ */
/*    font-size: 1vw !important; */
/*    font-weight: bold; */
/*  }*/
/*  .totalScoreReviewerLogos IMG { */
/*        height: 60px;*/
/*        width: fit-content;*/
/*    }*/
/*} */



.totalScoreVerdict {
    clear: left;
    border-top: 1px #999999 solid;
    margin: 15px;
}

.totalScoreVerdict UL {
    list-style-type: none;
    padding: 0px;
    margin: 0;
}

.totalScoreVerdict LI {
    padding: 5px !important;
    margin: 12px 0px !important;
    background-color: #e7e7e7;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 2px,
        rgba(0, 0, 0, 0.05) 0px 2px 5px;
}

.totalScoreVerdict LI:hover {
    background-color: #cbf3c4;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 5px,
        rgba(0, 0, 0, 0.05) 0px 3px 6px;
}

.totalScoreVerdictFormatting {
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-weight: bolder;
    color: #666;
}

.totalScoreNumber {
  margin-bottom: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* Remove fixed border size to prevent distortion */
  border: 0.8em solid #33cc00;
  border-radius: 50%;
  background-color: #6f0;
  color: rgb(255, 0, 149);
  font-weight: bold;
  text-align: center;
  text-shadow: #33cc00 0px 3px 3px;

  /* Dynamic size */
  width: auto;
  height: auto;
  aspect-ratio: 1 / 1;
  padding: 0.8em; /* controls how much space around the number */
  box-sizing: border-box;

  /* Prevent flex parents from distorting shape */
  flex: 0 0 auto;
}

.totalScoreNumber p {
  font-size: 2em;   /* make the number large */
  margin: 0;
  padding: 0;
  line-height: 1;
}


.totalScoreReviewer {
    font-size: 16px;
    margin: 5px 0;
    padding: 0px;
    font-weight: bold;
}

.totalScoreReviewer A {
    color: #0070c0;
}

/* Simple styles */
.lineHeightSmall{
    line-height: 13px;
}
.regularFont{
    font-weight: normal;
}
.fontSizeSmaller{
    font-size: smaller;
}
.icon-yes {
    background-image: url("/images/icons/yes.png");
}

.icon-no {
    background-image: url("/images/icons/no.png");
}

.fabrikForm label.btn.active.btn-danger {
    background-color: red;
}

.fabrikForm label.btn.active.btn-success {
    background-color: green;
}

.fabrikForm label.btn:not(.active) {
    background-color: lightgray;
}

.BGTrans {
    background-color: transparent !important;
}

.paddingMiddle {
    padding: 15px !important;
}

.textColorWhite {
    color: #fff;
}

.customeCenter {
    text-align: center;
}

/* End of Simple styles */

/* Modifiers */

/* Joomla styles modifires */
.com-content-article,
.item-page {
    background-color: white;
    padding: 15px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px,
        rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px,
        rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

.page-header {
    margin: 0;
    padding: 10px;
    background-color: #d8d8d8;
}

/* End of Joomla styles modifires */

/* Gantry modifiers */
.g-copyright A {
    color: white;
}

.g-copyright A:hover {
    color: #c6f06b;
}

/* This css style is set on Gantry Base Outline Page Settings in Body Attributes */
.g-helium-style #g-navigation {
    background-color: #363636 !important;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px,
        rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px,
        rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

/* end of Gantry modifiers */

/* Page styles */
.startPageStyles #g-intro {
    /*border-bottom: 3px red solid;*/
    padding: 0px;
    margin: 0px;
    background-image: url();
}

.reviewPage select {
    padding: 5px;
    margin: 0px;
}

.reviewPage {
    .fabrikElement,
    .col-sm-3,
    label {
        padding: 2px;
        margin: 1px;
        max-height: 30px;
    }
}

/* End of Page styles */
/* End of Modifiers */

/* Fabrik List Styles */
.labelLineHeightMod .fabrikgrid_radio{
    line-height: 1.2 !important;
    padding: 2px 15px 2px 5px !important;
}

/* Thius will align filter drop-downs to the left */
.eistfilter,
.pull-left {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
}

.list_hosting_features___featurevalue {
    margin-left: 0;
}

/* Makes sure Farbrik list heading titles stay in one line */
.fabrik_ordercell span {
    white-space: nowrap !important;
    white-space: -moz-pre-wrap;
    /* Firefox */
    white-space: -o-pre-wrap;
    /* Opera */
    white-space: pre-wrap;
    /* Chrome */
    word-wrap: break-word;
    /* IE */
}


/* End of Fabrik List Styles */


/* CTA box styles */

/* CTA Banner Container */
.cta-box {
    background-color: #6b6b6b;
    /* Bright contrast against dark background */
    color: #333333;
    padding: 2rem;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    margin: 3rem auto;
    max-width: 800px;
}

/* CTA Heading */
.cta-box h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: #222222;
    font-weight: 700;
}

/* CTA Paragraph */
.cta-box p {
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
    line-height: 1.6;
    color: #444444;
}

/* CTA Button */
.cta-box .btn-primary {
    background-color: #00bcd4;
    /* Vibrant accent */
    color: #ffffff;
    font-size: 1.1rem;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.3s ease;
}

.cta-box .btn-primary:hover {
    background-color: #0097a7;
    color: #ffffff;
}

/* CTA Footer Note */
.cta-box p:last-of-type {
    font-size: 0.9rem;
    margin-top: 1rem;
    color: #666666;
}


/* CTA Banner Container */
/* created by chatGPT */
.cta-banner {
    background: linear-gradient(135deg, #00b8f0, #37d0ff);
    /* bold gradient */
    color: #fff;
    padding: 2rem 1.5rem;
    text-align: center;
    border-radius: 1rem;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    max-width: 900px;
    margin: 2rem auto;
    position: relative;
    overflow: hidden;
}

/* Subtle overlay pattern */
.cta-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url('https://www.transparenttextures.com/patterns/cubes.png');
    opacity: 0.08;
    pointer-events: none;
}

/* Heading */
.cta-banner h2 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: #c6f06b;
}

/* Supporting text */
.cta-banner p {
    font-size: 1.125rem;
    margin-bottom: 1.5rem;
    line-height: 1.6;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* CTA button */
.cta-banner .cta-button {
    display: inline-block;
    background: #fff;
    color: #0077ff;
    font-size: 1.125rem;
    font-weight: 600;
    padding: 0.85rem 2rem;
    border-radius: 999px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.cta-banner .cta-button:hover {
    background: #f5f5f5;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

/* Responsive */
@media (max-width: 600px) {
    .cta-banner h2 {
        font-size: 1.5rem;
    }

    .cta-banner p {
        font-size: 1rem;
    }

    .cta-banner .cta-button {
        font-size: 1rem;
        padding: 0.75rem 1.5rem;
    }
}

/* Emphasized span */
.cta-banner span.highlight {
    font-style: italic;
    /*text-decoration: underline;*/
    padding: 5px;
    text-decoration-thickness: 2px;
    /* makes underline a bit stronger */
    text-underline-offset: 3px;
    /* keeps underline from hugging text */
}


/* end of CTA box styles */