/* *****************************************************

    ** Custom Stylesheet **

    Any custom styling you want to apply should be
    defined here.

***************************************************** */


@font-face {
    font-display: swap;
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    src: url('/assets/fonts/open-sans-family/open-sans-family-300.eot'); /* IE9 Compat Modes */
    src: url('/assets/fonts/open-sans-family/open-sans-family-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('/assets/fonts/open-sans-family/open-sans-family-300.woff2') format('woff2'), /* Super Modern Browsers */
    url('/assets/fonts/open-sans-family/open-sans-family-300.woff') format('woff'), /* Modern Browsers */
    url('/assets/fonts/open-sans-family/open-sans-family-300.ttf') format('truetype'), /* Safari, Android, iOS */
    url('/assets/fonts/open-sans-family/open-sans-family-300.svg#OpenSans') format('svg'); /* Legacy iOS */
}

@font-face {
    font-display: swap;
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: url('/assets/fonts/open-sans-family/open-sans-family-regular.eot'); /* IE9 Compat Modes */
    src: url('/assets/fonts/open-sans-family/open-sans-family-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('/assets/fonts/open-sans-family/open-sans-family-regular.woff2') format('woff2'), /* Super Modern Browsers */
    url('/assets/fonts/open-sans-family/open-sans-family-regular.woff') format('woff'), /* Modern Browsers */
    url('/assets/fonts/open-sans-family/open-sans-family-regular.ttf') format('truetype'), /* Safari, Android, iOS */
    url('/assets/fonts/open-sans-family/open-sans-family-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}

@font-face {
    font-display: swap;
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    src: url('/assets/fonts/open-sans-family/open-sans-family-600.eot'); /* IE9 Compat Modes */
    src: url('/assets/fonts/open-sans-family/open-sans-family-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('/assets/fonts/open-sans-family/open-sans-family-600.woff2') format('woff2'), /* Super Modern Browsers */
    url('/assets/fonts/open-sans-family/open-sans-family-600.woff') format('woff'), /* Modern Browsers */
    url('/assets/fonts/open-sans-family/open-sans-family-600.ttf') format('truetype'), /* Safari, Android, iOS */
    url('/assets/fonts/open-sans-family/open-sans-family-600.svg#OpenSans') format('svg'); /* Legacy iOS */
}

@font-face {
    font-display: swap;
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 400;
    src: url('/assets/fonts/raleway-family/raleway-family-regular.eot'); /* IE9 Compat Modes */
    src: url('/assets/fonts/raleway-family/raleway-family-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('/assets/fonts/raleway-family/raleway-family-regular.woff2') format('woff2'), /* Super Modern Browsers */
    url('/assets/fonts/raleway-family/raleway-family-regular.woff') format('woff'), /* Modern Browsers */
    url('/assets/fonts/raleway-family/raleway-family-regular.ttf') format('truetype'), /* Safari, Android, iOS */
    url('/assets/fonts/raleway-family/raleway-family-regular.svg#Raleway') format('svg'); /* Legacy iOS */
}

@font-face {
    font-display: swap;
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 700;
    src: url('/assets/fonts/raleway-family/raleway-family-700.eot'); /* IE9 Compat Modes */
    src: url('/assets/fonts/raleway-family/raleway-family-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('/assets/fonts/raleway-family/raleway-family-700.woff2') format('woff2'), /* Super Modern Browsers */
    url('/assets/fonts/raleway-family/raleway-family-700.woff') format('woff'), /* Modern Browsers */
    url('/assets/fonts/raleway-family/raleway-family-700.ttf') format('truetype'), /* Safari, Android, iOS */
    url('/assets/fonts/raleway-family/raleway-family-700.svg#Raleway') format('svg'); /* Legacy iOS */
}

/* Start CSS rules for entire platform */
.primary-bg-color    { background:#fff!important; }
header.header,	
section#main-body   { background:#fff!important; }
section#footer      { background:#fff; }
/* End CSS rules for entire platform */

/* Start CSS Rules for /templates/custom/includes/customTemplates/homepage-custom-module.tpl */
.sep { border-bottom:solid 1px #ccc; width:75%; margin:2rem auto; display:block; height:1px; font-size:0; line-height:0; clear:both; }

.HomepageAddonWrapper   { float:left; display:block; clear:both; width:100%;}

@media ( max-device-width : 480px) {
    .HomepageAddonWrapper .col-xs-4 { width:100%; margin-bottom: 0.75em;}    
    .HomepageAddonWrapper .footerSectionTitle  { font-size:2.2rem;}
    .welcomeWrapper h2,
    .HomepageAddonWrapper h2    { font-size:2.6rem; margin:10px 0;}
    .footerAddonWrapper .col-md-4,
    .copyrightFooter .col-md-4  { max-width: 100%; flex: 0 0 100%; }
}

@media ( min-device-width : 481px) and ( max-device-width : 1024px) {
    .HomepageAddonWrapper .col-xs-4 { width: 49%; }   
    .copyrightFooter .col-md-4  { width:100%; text-align:left;}
}

@media ( min-device-width : 1025px) {
    /*.HomepageAddonWrapper .col-xs-4 { width: 32.33333333%; }*/
    .HomepageAddonWrapper .col-xs-4 { width: 24%; }
    .copyrightFooter .col-md-4:last-child      { text-align:right;}
}

@media (min-device-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1320px;

    }
    .row-product-selection  { flex-direction: column;}

    #order-premium_comparison .price-table-container .price-table {
        width: 320px !important;
        min-width: 320px !important;
    }
}

@media (min-device-width: 1600px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1520px;

    }
    .row-product-selection  { flex-direction: column;}
    
    #order-premium_comparison .price-table-container .price-table {
        width: 320px !important;
        min-width: 320px !important;
    }
}

.HomepageAddonWrapper .homeModuleDescription      { margin-top:10px; margin-bottom: 2em; }
.welcomeWrapper h3,
.HomepageAddonWrapper h3,
.welcomeWrapper h2,
.HomepageAddonWrapper h2    { margin:15px 0;}

.HomepageAddonWrapper .homeModuleDescription,
.welcomeWrapper p           { font-size:1rem; }
.homeModuleSectionWrapper   { background: #fff; border-radius: 5px; margin: 0.5%; padding: 8px 15px; border: solid 1px #ccc; box-shadow: 0px 0px 5px 0px #ddd; }
.homeModuleSectionWrapper:hover   { box-shadow:0px 0px 5px 1px #ccc;}

.keyFeaturesList                { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
.keyFeaturesList .homeModuleSectionWrapper { display: flex; flex-direction: column; flex: none; min-width: 18rem !important; max-width: 18rem !important; width: auto; justify-content: space-between; flex-wrap: wrap; }
.keyFeaturesList .homeModuleSectionWrapper .btn { display: flex; flex: inherit; align-self: flex-start; margin-top: auto; margin-bottom: 0.5em; }
/* End CSS Rules for /templates/custom/includes/customTemplates/homepage-custom-module.tpl */

/* Start CSS Rules for /templates/custom/includes/customTemplates/footer-addon.tpl */
.footerAddonWrapper .footerList         { padding-left: 0px!important; margin-bottom: 2.5rem; }
.footerAddonWrapper { /*display:block; min-height:200px; position:relative; clear:both; float:left; width:100%; margin-bottom:2em;*/}
.footerAddonWrapper .col-xs-3       { min-width:220px; /* min-height:180px; */ }
.footerAddonWrapper p   { margin-bottom:.5rem!important; }
.footerAddonWrapper a   { color:#fff; }

.footerAddonWrapper .footerList,
.footerAddonWrapper .contactLinks ul,
.footerAddonWrapper .socialMediaLinks ul    { list-style-type:none; }

.footerAddonWrapper .footerSectionTitle     { margin-bottom: 1rem; border-bottom: solid 1px #888; padding-bottom: .5rem; }
.noScroll   { overflow:hidden!important;}
/* End CSS Rules for /templates/custom/includes/customTemplates/footer-addon.tpl */

/* Start CSS Rules for /templates/custom/includes/customTemplates/header-addon.tpl */
.carousel-item {
    height: 60vh; /* Default height: 60% of viewport height */
    min-height: 400px; /* Ensure a minimum height for mobile */
    max-height: 600px; /* Avoid excessive height for large screens */
    display: flex;
    justify-content: center;
    align-items: center;
}

.carousel-item.christmasSale  {
    background: url('../img/campaigns/christmas_sale_header_4.png') no-repeat top center #000; background-size: auto 100%; background-blend-mode: screen;
}
.carousel-item.winterSale  {
    background: url('../img/campaigns/winter_sale_banner.webp') no-repeat center right #000; 
    background-size: auto 110% ;
}
.carousel-item.everGreenSale  {
    background: url('../img/campaigns/evergreen_sale_banner_v1.webp') no-repeat center right #000; 
    background-size: auto 110% ;
}

.carousel-item.springSale  {
    background: url('../img/campaigns/spring_sale_banner.jpg') no-repeat center right #000; 
    background-size: auto 110% ;
}

.carousel-item.blackFriday  {
    
    background: url('../img/campaigns/cyber-week-bg.jpg') no-repeat center center #000; background-size: auto 100%; background-blend-mode: screen;
}

.carousel-item.cyberMondaySale  {
    
    background: url('../img/campaigns/cyber-week-bg.jpg') no-repeat center center #000; background-size: auto 100%; background-blend-mode: screen;
}

.carousel-item.cloud  {
    background: url('../img/slide-1-header.webp') no-repeat center center #fff; background-size: auto 100%;
}

/* .customHeader.cloud         { text-align: center; height: 480px; display: block; margin: 0 auto;  clear:both; } 
.customHeader.cloud .customHeaderContent  { width: 100%; display: block; float: left; min-width: 200px; border-radius: 5px; padding: 10px; margin: 10px auto; max-width: 530px; box-sizing: border-box; background: rgba(255,255,255,0.4); } */

.carousel-item.cloud .customHeaderContent ul     { text-align:left; padding:1em 0 0 0;}
.carousel-item.cloud .customHeaderContent ul li  { display:inline-block; margin:5px;}
.carousel-item.cloud .customHeaderContent h1     { margin: 5px 0;}
.carousel-item.cloud .explorePackages            { text-align:left;}
.carousel-item.cloud .explorePackages a          { background:#0e5077; border-radius:3px; color:#fff; padding:8px 20px; display:inline-block; }

.customHeader.blackFriday              { background-color: #000; }
.customHeader.blackFriday .customHeaderContainer      { }

/* Adjustments for mobile devices */
@media (max-width: 768px) {
    .carousel-item.blackFriday {
        height: 40vh; /* 40% of viewport height */
        min-height: 320px; /* Reduce the minimum height for smaller screens */
    }
}


/* End CSS Rules for /templates/custom/includes/customTemplates/header-addon.tpl */

/* Start patch for solving the floating elements caused by customHeader wrapper */
.home-shortcuts     { clear:both;}
/* End patch for solving the floating elements caused by customHeader wrapper */

.copyrightFooter .col-xs-6 p { line-height:2em;}

/* Start CSS rules for MCE content for lists */
.mceContent .chapterList    {
    margin-top: 1rem;
}

.mceContent .chapterList ol {
	counter-reset: item;
	margin-bottom:10px!important;
}

.mceContent .chapterList li {
	display: block;
	font-size:24px;
}

.mceContent .chapterList.noTitleChapters li {
	display: block;
	font-size:1rem;
}

.mceContent .chapterList p,
.mceContent .chapterList li li,
.mceContent .chapterList li p,
.mceContent .chapterList li li * {
	font-size:1rem;
	line-height:1.4rem;
	margin-bottom: 5px;
}

.mceContent .chapterList ol li h3 {
	display:inline-block;
	margin:0 0 10px 0;
}

.mceContent .chapterList li:before {
	content: counters(item, ".") ". ";
	counter-increment: item;
	float: left;
    margin-left: -50px;
    text-align: right;
    width: 45px;
    padding-right: 5px;
}
.mceContent .chapterList li li li:before {
    margin-left: -60px;
    width: 55px;
}
/* End CSS rules for MCE content for lists */


.home-shortcuts {
    margin: 0;
    /* background: #25a2c7; */
    /* background: #282f35; */
    background: #4b687e;
    color: #fff
}

.home-shortcuts ul {
    list-style-type: none;
    margin: 0;
    padding: 0
}

.home-shortcuts li {
    float: left;
    width: 24%;
    padding: 5px 3px;
    /* border-right: 1px solid #0e88b0; */
    border-right: 1px solid #fff;
    font-size: .9em;
    text-align: center;
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap
}

.home-shortcuts li:first-child {
    /* border-left: 1px solid #0e88b0; */
    border-left: 1px solid #fff;
}

.home-shortcuts li a {
    display: block;
    color: #fff;
    text-decoration: none
}

.home-shortcuts li i {
    font-size: 22px
}

.home-shortcuts li p {
    margin: 2px 0 0;
    text-transform: uppercase;
}

.home-shortcuts li span {
    display: none;
}

.home-shortcuts li:hover span {
    display: inline-block;
}

.home-shortcuts .lead {
    margin: 0;
    line-height: 55px;
}

@media (max-width: 992px) {
    .home-shortcuts ul {
        text-align:center;
    }
}

@media (max-width: 767px) {
    .home-shortcuts li {
        display:block;
        float: none;
        width: 100%;
        border-right: 0;
        border-bottom: 1px solid #0e88b0;
    }

    .home-shortcuts li:first-child {
        border-left: 0;
    }

    .home-shortcuts li:last-child {
        border: 0;
    }

    .home-shortcuts ul:hover li {
        width: 100%;
    }
}

@media (min-width: 768px) and (max-width: 991px){
	.hidden-sm {
	    display: none!important;
	}
	.helpCards {
	    flex: 0 0 100%;
	    max-width: 100%;
	}
    
}

@media (min-width: 1200px){
	.main-navbar-wrapper	{
		min-height: 38px;
	}   
}


/* Menu */
header.header .navbar a.pr-4,
header.header .navbar a.dropdown-toggle {
	color:#fff;
}

header.header .logo-img {
    max-width: 400px;
    max-height: 50px;
}

.main-navbar-wrapper	{
	margin-bottom: 0;
    background-color: #0e5077;
    border: 0;
    /* min-height: 38px; */
    font-family: Raleway,"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 15px;
}


h1, h2, h3, h4, h5, h6 {
    font-family: Raleway,"Helvetica Neue",Helvetica,Arial,sans-serif;
    /* font-weight: 700; */
}

.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6 {
    margin-bottom: .5rem;
    font-weight: 500;
    line-height: 1.2
}

.h1,h1 {
    font-size: 2rem
}

.h2,h2 {
    font-size: 1.75rem
}

.h3,h3 {
    font-size: 1.5rem
}

.h4,h4 {
    font-size: 1.3rem
}

.h5,h5 {
    font-size: 1.15rem
}

.h6,h6 {
    font-size: 1rem
}


.home-domain-search  { 
    /* background: #d2e3fa!important; */
    margin-bottom: 0!important;
    padding: 0!important;
 }

.home-domain-search .container {
    margin-top: 1rem;
}
.home-domain-search .cType_1 {
    border-radius: 1rem;
}

.home-domain-search .input-group-wrapper:hover	{ box-shadow: 0px 0px 0px 2px #ccc; }
.home-domain-search h2{
    font: bold 2.6rem Raleway;
    text-align: left!important;
}

.tld-logos li  {
    color: #7e381c;
}

.product-selection-sidebar .list-group 				{ border-radius:0; }
.product-selection-sidebar h3						{ font-size:1.2rem; margin-bottom:0; }
.product-selection-sidebar h3 i						{ color:#888; }
.product-selection-sidebar .card-minimise			{ cursor:pointer!important; }
.product-selection-sidebar .list-group a	  		{ font-size:.9rem; }
.list-group-item									{ border: none; border-bottom: 1px solid #ccc; }
.list-group-item:last-child							{ border-bottom:none; }
.product-selection-sidebar .list-group-item.active 	{ background-color: #465054; border-color: #465054; }
.nav-item.cart-button-wrapper						{ margin:0!important; }
.cart-btn											{ background-color: #0e5077; color: #fff; }
header.header .toolbar .nav-link					{ border:none; padding: 0.5rem; }
.menu-trigger-button span							{ color:#0e5077; font-size:1.5rem; }

footer.footer 	        { padding: 3rem 0 1rem 0; }
.footer .back-to-top	{ background: #555; border-radius: 5px; padding: 5px; text-align: center; width: 2rem; margin: 0 auto; }


/* .homeProducts .card-columns 		{ } */
/* .homeProducts .card-columns .card	{ min-height:20rem; } */

.btn-primary {
    color: #fff;
    background-color: #0e5077;
    border-color: #0e5077;
}

/* .darkBluePremiumHeaderMenu  {
    background-color: #0e5077;
} */
 
.darkBluePremiumHeaderMenu .dropdown-item   {
    padding: .25rem .5rem;
}
.darkBluePremiumHeaderMenu li a
{
    padding-right:1.5rem;
}

.headerMenuDropdownItem {
    display: flex; justify-content: space-between; align-items: center;
}

.darkBluePremiumHeaderMenu .headerMenuIcon {
    flex: 1; 
    text-align: center; 
    padding-right: 10px;
    width: 2.5rem;
    max-width: 2.5rem;
}

.darkBluePremiumHeaderMenu .headerMenuIcon i {
    color: #0e5077;
    font-size: 1.2rem;
}

.headerMenuItemContent {
    flex: 9;
}

.darkBluePremiumHeaderMenu .dropdown-item .drowdownItemTitle   {
    font-weight: bold; 
    color:#0e5077;
}

.darkBluePremiumHeaderMenu .dropdown-item .drowdownItemDescription {
    font-size: .7rem; 
    font-weight:normal; 
    color:#000;
    margin-bottom: 0;
}

/* .primary-content > div:first-of-type {
    display: none;
} */

div:has(> strong:contains("Dev License:")) {
    display: none;
}

.modern-list {
    display: flex;
    flex-wrap: wrap;
    line-height: 2rem;
    padding: 0;
}
.feature-item {
    flex: 1 1 50%; /* Two columns */
    display: flex;
    align-items: center;
    font-size: 1.1rem;
    color: #333;
}
.header-order-button {
    display: inline-block;
    margin-top: 1rem;
    padding: 1rem 2rem;
    font-size: 1rem;
    font-weight: bold;
    color: #fff;
    background-color: #000;
    border: none;
    border-radius: 0.5rem;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.header-order-button:hover {
    background-color: #000;
    transform: scale(1.05);
    color: #fff;
    text-decoration: none;
}

.header-order-button .arrow-icon {
    margin-left: 1rem;
    transition: margin-left 0.3s ease;
}

.header-order-button:hover .arrow-icon {
    margin-left: 1.5rem;
}
.features-title {
    font-size: 1.6rem !important;
    margin-bottom: 1rem !important;
}

.bold   {
    font-weight: bold;
}

.feature-icon {
    margin-right: 0.5rem;
    color: #7e381c;
}
.flex-container {
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    flex-wrap: wrap;
}
.price-table {
    
    transition: all 0.3s ease;
    /* box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); */
}
.price-table:hover {
    transform: scale(1.05);
}
.order-button   {
    overflow: hidden;
    /* background: linear-gradient(to bottom,  #006699 0%,#004c66 100%)!important; */
}
.order-button:hover   {
    /* background: linear-gradient(to bottom,  #006699 0%,#004c66 100%)!important; */
    transition: all 0.3s ease; /* Smooth transition */
    
}
.arrow-icon {
    position: absolute;
    right: 30px; /* Position the arrow icon off-screen to the right */
    top: 50%;
    transform: translateY(-50%);
    opacity: 0; /* Hide the arrow initially */
    transition: all 0.3s ease; /* Smooth transition */
    width: 0;
    font-size: 1.2rem;
}

.order-button:hover .arrow-icon {
    right: 20px; /* Bring the arrow icon inside the button on hover */
    opacity: 1; /* Make the arrow visible */
    width: 1rem;
}

.tooltip-icon {
    margin-left: 8px;
    cursor: pointer;
    /* color: #0e5077; */
    color: #a9b1b5;
  }
.tooltip-text {
    display: none;
    position: absolute;
    background-color: #0e5077;
    border: 1px solid #0e5077;
    color:#fff;
    padding: 10px;
    border-radius: 3px;
    z-index: 1000;
}
.tooltip-container:hover .tooltip-text {
    display: block;
}

.howCanWeHelpCardsWrapper,
.yourAccountCardspWrapper,
.welcomeWrapper, 
.HomepageProductGroups,
.HomepageAddonWrapper   {
    border-radius: .75rem;
    margin: 1rem auto;
    padding: 2rem 3rem;
}

.howCanWeHelpCardsWrapper,
.yourAccountCardspWrapper,
.welcomeWrapper, 
.HomepageAddonWrapper   {
    background: rgb(244, 248, 252);
}

.howCanWeHelpCardsWrapper h2,
.yourAccountCardspWrapper h2,
.HomepageProductGroups h2,
.welcomeWrapper h2, 
.HomepageAddonWrapper h2 {
    font: bold 2.6rem Raleway;
    margin: 10px 0;
    font-weight: bold;
    color:#000;
}

.howCanWeHelpCardsWrapper .action-icon-btns,
.yourAccountCardspWrapper .action-icon-btns   { margin-top: 2rem!important; margin-bottom: 1rem!important; }


.HomepageProductGroups .button    {
    color: #fff;
    border: none;
    padding: .75rem 2rem;
    display: inline-block;
    width: auto!important;
    transition: background-color 0.3s ease-in-out, transform 0.2s ease-in-out;
}
.HomepageProductGroups .button.black    {
    background: #000;   
}

.HomepageProductGroups .button:hover{
    transform: scale(1.05);
}

.HomepageProductGroups .button.blue    {
    background: #0e5077;
}

.HomepageProductGroups .card    {
    border-radius:.5rem;
}

.card-columns.homeCards {
    display: flex;
    justify-content: space-evenly; /* Ensures even spacing across the container */
    flex-wrap: wrap; /* Allows cards to wrap to the next line */
}

.homeCards .card {
    display: flex !important;
    text-align: left;
    flex: 1 !important;
    min-width: 16rem;
    flex-direction: row;
}

.homeCards .card-body    {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}

.homeCards .card img {
    width: 100%;
    border-radius: 1rem;
    margin-bottom: 20px; /* Adds spacing below the image */
}

.homeCards .card h3 {
    margin-bottom: 10px; /* Adds space below the title */
    font-size: 1.5rem; /* Ensures consistent font size */
}

.homeCards .card p {
    margin-bottom: 10px; /* Adds consistent spacing between paragraphs */
}

.homeCards .card .btn {
    margin-top: auto; /* Ensures the button is always at the bottom */
    align-self: stretch; /* Makes the button stretch across the card width */
    text-align: center; /* Centers the text inside the button */
}

.homeCards .card .startFromPrice {
    font-size: 3rem;
}



.homeCards .card .productGroupHeadline {
    min-height: 50px; /* Set a minimum height for all <p> elements */
    display: flex; /* Enable flexible alignment */
    align-items: center; /* Vertically center the text */
    justify-content: left; /* Center the text horizontally */
    margin: 10px 0; /* Consistent spacing for paragraphs */
}

.homeCards .card .productGroupTagline {
    
}


.homeProducts .sep {    
    border-bottom: solid 1px #d5ba32!important;
}

section#main-body {
    padding: 1rem 0!important
}


.productEnhancerHeader .left-column {
    display: flex;
    flex-direction: column; /* Stack Box 1 and Box 3 vertically */
    width: 50%; /* Left column takes 50% width */
    height: 100%; /* Full height of container */
}

.productEnhancerHeader .right-column {
    width: 50%; /* Right column takes 50% width */
    height: 100%; /* Full height of container */
}

.productEnhancerHeader .box {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    /* border: 1px solid black;
    font-size: 20px;
    font-weight: bold; */
    box-sizing: border-box;
}

.productEnhancerHeader .box1, .productEnhancerHeader .box3 {
    flex: 1; /* Each box in the left column takes equal height */
}

.productEnhancerHeader .box2 {
    height: 100%; /* Full height of the container */
    justify-content: flex-end;
}

.productEnhancerHeader .custom-image    {
    height: 100%;
    width: auto!important;
    max-height: 30rem;
    /* max-height: 26rem; */
    border-radius: 1rem;
    max-width: max-content;
}

.productEnhancerHeader .box3   {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: wrap;
    justify-content: flex-start;
}

/* Mobile Layout: Flatten nested structure and stack boxes vertically */
@media (max-width: 768px) {
    .productEnhancerHeader .container {
        flex-direction: column; /* Stack all boxes vertically */
    }

    .productEnhancerHeader .left-column, .productEnhancerHeader .right-column {
        display: contents; /* Flatten the structure for proper order */
    }

    .productEnhancerHeader .box {
        width: 100%; /* Full width for mobile */
        height: auto; /* Adjust height automatically */
    }

    .productEnhancerHeader .left-column .box:first-child {
        margin-top: 1rem!important;
    }
    
    .productEnhancerHeader .left-column .box:last-child {
        margin-bottom: .5rem!important;
    }

    .productEnhancerHeader .box1 {
        order: 1; /* First box */
    }

    .productEnhancerHeader .box2 {
        order: 2; /* Second box */
    }

    .productEnhancerHeader .box3 {
        order: 3; /* Third box */
        margin-bottom: 1rem!important;
    }
    
    .productEnhancerHeader .feature-item   {
        /* flex-wrap: wrap; */
        flex: 1 1 100%;
    }

    .productEnhancerHeader .box   {
        padding: .5rem 2rem!important;
        flex-direction: column;
    }

    .productEnhancerHeader .custom-headline   {
        margin-bottom: 0rem!important;
        font-size: 2.2rem!important;
    }

    .productEnhancerHeader .custom-image-wrapper img  {
        border-radius: 1rem!important;
        width: 100%!important;
    }
    #tagline {
        padding: .5rem 2rem!important;
        margin-bottom: .5rem!important;
    }   
    #plansList {
        padding: .5rem 2rem!important;
        margin-bottom: .5rem!important;
    }

}

@media (min-width: 768px) and (max-width: 1024px) {
    #plansList,
    .productEnhancerHeader .left-column    {
        padding: 1.8rem 2.5rem!important;
    }
    .productEnhancerHeader .feature-item {
        font-size: .9rem;
    }
    .productEnhancerHeader .modern-list {
        line-height: 1.6rem;
    }
    .productEnhancerHeader .features-title{
        font-size: 1.3rem !important;
    }
    .productEnhancerHeader .custom-headline  {
        font-size: 2.2rem!important;
        margin-bottom: 1rem!important;
    }
}
@media (min-width: 1025px) and (max-width: 1400px) {
    .productEnhancerHeader .left-column    {
        padding: 1.8rem 2.5rem!important;
    }
    .productEnhancerHeader .feature-item {
        font-size: .9rem;
    }
    .productEnhancerHeader .modern-list {
        line-height: 1.6rem;
    }
    .productEnhancerHeader .features-title{
        font-size: 1.3rem !important;
    }
    .productEnhancerHeader .custom-headline  {
        font-size: 2.5rem!important;
        margin-bottom: 1rem!important;
    }
    
    .homeCards .card    {
        min-width: 18rem;
    }

    .cType_1 .homeCards .card   {
        min-width: 18rem;
    }
    .cType_2 .homeCards .card   {
        min-width: 16rem;
        
    }
}
/* 
.navbar .container{
    margin: 0;
    padding: 0;
}

.navbar-brand.mr-3  {
    max-width: 70%;
    flex: 8;
}
.navbar-brand.mr-3 .logo-img    {
    max-width: 250px;
}

.navbar .fa.fa-language  {
    color: #0e5077;
    font-size: 1.5rem;
}
.navbar .fa.fa-shopping-cart.fa-fw {
    color: #0e5077;
    font-size: 1.2rem;
    line-height: 1.5rem;
} */


/* CSS Rules for Campaigns */
/* Christmas Sale Campaigns */
/* Responsive Design */
@media (max-width: 768px) {
    .content-column,
    .text-center {
        flex-basis: 100%; /* Stack columns vertically on smaller screens */
        max-width: 100%;
    }

    .percentage-text {
        font-size: 4rem;
    }

    .cta-button {
        padding: 10px 20px;
        font-size: 1rem;
    }
    
    .carousel-item.christmasSale {
        background: url(../img/campaigns/christmas_sale_header_4.png) no-repeat top left #000!important;
        background-size: auto 100%;
        background-blend-mode: screen;
    }
    .carousel-item.winterSale  {
        /* background: url('../img/slide-1-header.webp') no-repeat top center #000;  */
        background-size: auto 100% ;
    }

    .carousel-item {
        height: auto!important;
        min-height: fit-content!important;
        max-height: fit-content!important;
    }
    .christmas-discount {
        font-size: 10rem;
    }
}

#snowflakes-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Allows interaction with underlying elements */
    z-index: 9999; /* Ensure it stays above other elements */
    overflow: hidden; /* Prevent snowflakes from creating scrollbars */
}

@keyframes fall {
    0% {
        top: -10px; /* Start just above the container */
    }
    100% {
        top: 100vh; /* Move to the bottom of the viewport */
    }
}

@keyframes sway {
    0%, 100% {
        transform: translateX(0); /* No sway initially */
    }
    50% {
        transform: translateX(20px); /* Sway 20px left or right */
    }
}

.snowflake {
    position: absolute;
    top: -10px; /* Ensure they start above the viewport */
    color: white;
    font-size: 10px;
    opacity: 0.8;
    animation: fall 15s linear infinite, sway 5s ease-in-out infinite; /* Falling and swaying */
}



/* Container styling */
.metallic-effect-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.christmas-discount {
    color: #c90100;
    font-weight: bold;
    text-shadow: 3px 3px 0px #fff;
    position: relative;
}

.winter-discount {
    color: #000;
    font-weight: bold;
    text-shadow: 3px 3px 0px #fff;
    position: relative;
}

.everGreenSale .winter-discount {
    color: #fff!important;
    text-shadow: none!important;
}

/* Responsive Design */
@media (min-width: 321px) and (max-width: 768px) {
    .winter-discount {
        font-size: 10rem;
    }
    .christmas-discount {
        font-size: 10rem;
    }
}

@media (max-width: 480px) {
    .claimDealWrapper    {
        flex-wrap: wrap;
    }
}
@media (max-width: 768px) {
    .christmas-discount {
        font-size: 10rem;
        line-height: 11rem;
    }
    .winter-discount {
        font-size: 10rem;
        line-height: 11rem;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .christmas-discount {
        font-size: 13rem;
        line-height: 14rem;
    }
    .winter-discount {
        font-size: 13rem;
        line-height: 14rem;
    }
}
@media (min-width: 1025px) and (max-width: 1400px) {
    .christmas-discount {
        font-size: 14rem;
        line-height: 15rem;
    }
    .winter-discount {
        font-size: 14rem;
        line-height: 15rem;
    }
}

@media (min-width: 1401px) {
    .christmas-discount {
        font-size: 16rem;
        line-height: 17rem;
    }
    .winter-discount {
        font-size: 16rem;
        line-height: 17rem;
    }
    .carousel-item.christmasSale  {
        background: url('../img/campaigns/christmas_sale_header_4.png') no-repeat top center #000; 
        /* background: url('../img/slide-1-header.webp') no-repeat top center #000;  */
        background-size: auto 100% ;
    }

    .cyberMondaySale .slideTitle {
        font-size: 4.5rem!important;
    }
    
}

@media (min-width: 1401px) and (max-width: 1600px) {
    .cyberMondaySale .slideTitle,
    .everGreenSale .slideTitle{
        font-size: 4.5rem!important;
    }
}

@media (min-width:1920px){
    .carousel-item.winterSale  {
        background-size: 120% auto ;
    }
}
/* Metallic gradient text styling */
.metallic-text {
    font-size: 16rem; /* Large font size */
    font-weight: bold;
    font-family: Arial, sans-serif;
    color: #fff;
    background: linear-gradient(
        135deg,
        #4a90e2 0%,   /* Deep blue */
        #a0b9ff 20%,  /* Light blue */
        #ffd700 40%,  /* Gold */
        #ff8c00 60%,  /* Orange */
        #4a90e2 80%   /* Blue (back to deep blue for looping) */
    );
    background-size: 300%; /* Makes the gradient larger for animation */
    background-clip: text;
    -webkit-background-clip: text; /* For WebKit browsers */
    -webkit-text-fill-color: transparent; /* Transparent to show gradient */
    text-shadow: 
        1px 1px 2px rgba(0, 0, 0, 0.8),    /* Inner shadow for depth */
        0 0 10px rgba(255, 255, 255, 0.6); /* Outer glow effect */
    animation: metallic-gradient-move 3s linear infinite; /* Gradient animation */
}

/* Gradient Animation */
@keyframes metallic-gradient-move {
    0% {
        background-position: 0%;
    }
    100% {
        background-position: 100%;
    }
}



/* General Carousel Styling */
.carousel-item {
    height: 60vh; /* Default height: 60% of viewport height */
    min-height: 400px; /* Ensure a minimum height for mobile */
    max-height: 600px; /* Avoid excessive height for large screens */
    display: flex!important;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.carousel-item.blackFriday {
    background-color: #000;
}

/* Responsive Flexbox Layout */
.content-column ul {
    margin-bottom: 20px;
}

.content-column .d-flex {
    display: flex;
    gap: 20px;
}

/* Call-to-Action Button */
.cta-button {
    background: #000;
    color: #fff;
    text-decoration: none;
    padding: 15px 30px;
    font-size: 1.2rem;
    border-radius: 5px;
    transition: background-color 0.3s ease-in-out, transform 0.2s ease-in-out;
    min-width: 180px !important;
    text-align: center;
}

.cta-button.red {
    background-color: #d90000; /* Intense dark red */
}
.cta-button.red:hover {
    background-color: #b80000;
}
.cta-button:hover {
    background-color: #b80000;
    color:#fff;
    text-decoration: none;
    transform: scale(1.05);
}

/* Percentage Visual */
.percentage-container {
    margin-top: 20px;
    display: inline-block;
    /* animation: pulse 2s infinite; */
}

.percentage-text {
    font-size: 16rem;
    font-weight: bold;
    /* color: #ffd700; */
    text-shadow: 0 0 10px #ffd700, 0 0 20px #ff7700;
    /* animation: glow 1.5s infinite alternate; */
    background: linear-gradient(135deg, #ff0, #f00, #220ca2, #ff0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.percentage-animation {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 5px solid transparent;
    border-radius: 50%;
    border-top-color: #ffd700;
    border-right-color: #ff7700;
    animation: spin 1.5s linear infinite;
}

/* Countdown Timer */
.counter {
    font-size: 1rem;
    font-weight: bold;
    color: #fff;
}

/* Glow Effect */
@keyframes glow {
    from {
        text-shadow: 0 0 10px #ffd700, 0 0 20px #ff7700;
    }
    to {
        text-shadow: 0 0 20px #ff7700, 0 0 40px #ff2200;
    }
}

/* Spin Animation */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Pulse Effect */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

.upToDiscount       {
    
    font-size: 1rem;
}

.flexWrapper    {
    display: flex;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.flexWrapper-Content    {
    flex: 6;
    padding-right: 1rem;
    /* min-width: 20rem; */
    
}
.flexWrapper-Image  {
    flex: 4;
    /* overflow: hidden; */
    /* min-width: 20rem; */
    margin-bottom: 1rem;
}

@media (min-width: 769px) and (max-width: 1024px) {
    .howCanWeHelpCardsWrapper,
    .yourAccountCardspWrapper,
    .welcomeWrapper, 
    .HomepageProductGroups,
    .HomepageAddonWrapper   {
        padding: 2rem;
    }
    .homeCards .card {
        min-width: 18rem;
    }
}

@media (max-width: 768px) {
    .flexWrapper    {
        flex-direction: column;
    }
    .flexWrapper-Content    {
        order: 1;
        padding-right: 0!important;
    }
    .flexWrapper-Image  {
        order: -1;
    }
    #header .navbar.navbar-light .container   {
        flex-direction: column;
    }
    
    .howCanWeHelpCardsWrapper,
    .yourAccountCardspWrapper,
    .welcomeWrapper, 
    .HomepageProductGroups,
    .HomepageAddonWrapper   {
        padding: 2rem;
    }

    .headerMenuItemContent {
        white-space: normal;
    }
    
    .darkBluePremiumHeaderMenu .dropdown-item .drowdownItemDescription {
        white-space: normal;
    }
}

@media (max-width: 360px) {
    #order-premium_comparison .price-table-container .price-table   {
        min-width: 16rem!important;
        width:auto!important;
    }
    .header.header .logo-img {
        max-width: 300px;
        
    }
    
}

@media (min-width: 361px) and (max-width: 480px) {
    #order-premium_comparison .price-table-container .price-table   {
        min-width: 20rem!important;
        width:auto!important;
    }
}

@media (max-width: 480px) {
    .card-columns.homeCards { 
        flex-direction: column;
    }
    
    .copyrightFooter .col-6.col-lg  {
        flex: 0 0 100%;
        max-width: fit-content;
        text-align: left!important;
    }

    .howCanWeHelpCardsWrapper,
    .yourAccountCardspWrapper,
    .welcomeWrapper, 
    .HomepageProductGroups,
    .HomepageAddonWrapper   {
        padding: 1rem;
    }

    /* .main-container.price-01    {
        padding: 0!important;
    } */

    .features-title {
        font-size: 1.3rem !important;
    }

    /* .winterSale {
        background: #fff!important;
    } */
    .winterSale .col-md-6.content-column {
        padding: 0!important;
    }

    .winterSale .col-md-6.content-column h1  {
        font-size: 3.5rem;
    }
    
    .winterSale .discountContent  {
        flex-wrap: wrap;
    }

    .winterSale .winter-discount {
        font-size: 7rem;
    }

    .slideTitle {
        font-size: 2.5rem;
        
    }
    .winterSale .counter {
        background: none!important;
        padding: 0!important;
        color: #000!important;
    }
}


/* .winterSale .claimDealWrapper .cta-button.red   {
} */


/* .winterSale .col-md-6.content-column {
    
} */

.winterSale .slideTitle {
    /* font-weight: bold; color: #d90000; */
    color: #000;
    font-weight: bold;
    text-shadow: 3px 3px 0px #fff;
    font-size: 5rem; 
}
    
.springSale .slideTitle {
    color: #455e16;
    font-weight: bold;
    text-shadow: 3px 3px 0px #e3da74;
    font-size: 5rem;
}

.springSale .cta-button.red {
    background-color: #455e16;
}

.cyberMondaySale .slideTitle,
.everGreenSale .slideTitle {
    color: #fff!important;
    text-shadow: none!important;
}
.discountContent{
    display: flex; align-items: center; justify-content: space-between; border-radius: 1rem; padding: 1rem 2rem;
}
.winterSale .discountContent  {
    background: rgb(255, 255, 255, 0.4); 
}

.springSale .discountContent {
    background: none!important;
    padding: 1rem 2rem 1rem 0!important;
}

.everGreenSale .discountContent {
    background: none!important;
    padding: 0 0 .75rem 0!important;
}

.winterSale .counterWrapper {
    margin-top: 10px; 
    font-size: 1rem; 
}
.winterSale .counter    {
    color: #000;
    /* background: rgba(0, 0, 0, 0.7); */
    display: inline-block;
    /* padding: .3rem 1rem; */
    border-radius: .5rem;
    font-size: 1rem;
    font-weight: bold;
}
.everGreenSale .counter {
    color: #fff!important;
    /* background: rgba(0, 0, 0, 0.8)!important;
    padding: .2rem .5rem!important; */
}

.copyrightFooter    {
    justify-content: space-between;
    margin-bottom: 1rem;
}

.copyrightFooter .col-6.col-lg:last-child { 
    text-align: right;
}   

.cType_1    { background:#f4f8fc;}
.cType_2    { background:#f2e5be;}

.cType_1 .sep { border-bottom: solid 1px #c4daff!important; }
.cType_2 .sep { border-bottom: solid 1px #d5ba32!important; }


.carouselPromoFeatures {
    list-style: none; padding: 0; font-size: 1.2rem; color: #000; margin-bottom: 0px; flex: 5;
}

.carouselPromoFeatures li {
    background: #fff;
    padding: .3rem .7rem;
    border-radius: .5rem;
    color: #000;
    display: inline-block;
    margin: .2rem;
    /* padding-right: 2rem; */
}

.carouselPromoFeatures li i {
    color: #000; margin-right: .5rem;
}

.btn-block+.btn-block   {
    margin-top: 0;
}