@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
/*------------------------------------------------*/
/* Global STYLES */
/*------------------------------------------------*/

a, a:link, a:visited, a:active {
    color:#ed174e;
    text-decoration: none; 
	-webkit-transition:all ease .3s; transition:all ease .3s;
}

a:hover {
    color:#666;
    text-decoration: none;
	-webkit-transition:all ease .3s; transition:all ease .3s;
}

body {

}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.3;
    margin: 0 0 14px 0;
}

h1 {
    font-size: 40px;
	color:#222;
	font-weight:800;
	font-family: "Montserrat", serif;
}

h2 {
    font-size: 30px;
	color:#ed174e;
	font-weight:500;
	
}

h3 {
    font-size: 22px;
    color: #333;
	font-weight:400;
}

h4 {
    font-size: 18px;
    color: #111;
}

h5  {
    font-size: 14px;
    color: #111;
}

h6  {
    font-size: 13px;
    color: #666;
}

p {
    margin: 0 0 25px 0;
}

hr {
    clear: both;
    height: 0;
    border: solid #ed174e;
    border-width: 1px 0 0;
    margin: 20px 0 20px 0;
}

div, p {line-height:24px; font-size:17px;font-family: "Montserrat", serif;}

td {color:#222;padding:5px;line-height:18px; font-size:16px;font-family: "Montserrat", serif;}

ul li {
    font-size: 16px; 
	color:#222;
	margin-bottom: 8px;

	}

li {

    line-height:1.3;
	}

ol li {
    list-style-type: decimal;
    margin-bottom: 8px;
	font-size:  16px; 
}

ol ol {
    margin-top: 8px;
    margin-left: 30px;
}

    ol ol li {
        list-style-type: lower-roman;
    }

    ol ol ol li {
        list-style-type: lower-alpha;
    }

ol ul li {
    list-style-type: lower-roman;
}


/*------------------------------------------------*/
/* Responsive Video and Image STYLE */
/*------------------------------------------------*/

img {
	max-width: 100%;
	height:auto;
}


.video {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

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

.video-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.video-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}


.imglg{ transition: all .2s ease-in-out; }
.imglg:hover { transform: scale(1.02); }



.page-break-section {box-shadow:none !important;}


/*------------------------------------------------*/
/* NAVIGATION — FINAL CLEAN BUILD                 */
/*------------------------------------------------*/


/* ==============================================
   NAVBAR TOGGLER (Mobile Button)
   ============================================== */

.navbar-toggler {
    margin-bottom: 3px;
    margin-top: -70px; /* Adjust if needed */
}

.navbar-toggler:focus {
    outline: none;
    box-shadow: none;
}


/* ==============================================
   CARET (CUSTOM)
   ============================================== */



/* Custom caret */
#dnnMenu .dropdown-toggle {
    position: relative;
    padding-right: 30px;
}

#dnnMenu .dropdown-toggle::after {
    display: none !important;
}

@media (min-width: 993px) {
    #dnnMenu .dropdown:hover > .has-dropdown::before {
        transform: translateY(-50%) rotate(225deg);
        border-color: #ed174e;
    }
}

/* ==============================================
   CARET (CUSTOM) — FIXED
   ============================================== */

#dnnMenu .has-dropdown {
    position: relative;
    padding-right: 30px;
}

/* Custom caret */
#dnnMenu .has-dropdown::before {
    content: "";
    position: absolute;
    right: 0px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-right: 2px solid #999;
    border-bottom: 2px solid #999;
    transform: translateY(-50%) rotate(45deg);
    transition: all 0.25s ease;
}

@media (max-width: 992px) {

    #dnnMenu .has-dropdown::before {
        right: 18px;   /* 👈 push it in from edge */
    }

}

/* Hover */
#dnnMenu .has-dropdown:hover::before {
    border-color: #ed174e;
}

/* Open (mobile toggle) */
#dnnMenu li.show > .has-dropdown::before {
    transform: translateY(-50%) rotate(225deg);
    border-color: #ed174e;
}

/* ==============================================
   TOP LEVEL NAV
   ============================================== */

#dnnMenu .topLevel {
    list-style: none;
    padding: 0;
    margin: 0;
}

#dnnMenu .topLevel > li {
    position: relative;
}

#dnnMenu .topLevel > li > a {
    position: relative;
    text-transform: uppercase;
    padding: 8px 14px;
    margin: 0 8px;
    color: #111;
    font-size: 15px;
    font-weight: 500;
    display: inline-block;
    transition: color 0.3s ease;
}

/* Hover / Active */
#dnnMenu .topLevel > li > a:hover,
#dnnMenu .topLevel > li.active > a {
    color: #282b3a;
}



/* ==============================================
   UNDERLINE ANIMATION
   ============================================== */

#dnnMenu .topLevel > li > a::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: #ed174e;
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

#dnnMenu .topLevel > li > a:hover::after,
#dnnMenu .topLevel > li.active > a::after {
    width: 100%;
    left: 0;
    transform: none;
}



/* ==============================================
   DESKTOP DROPDOWN (HOVER-DRIVEN)
   ============================================== */

@media (min-width: 993px) {

    /* Base dropdown */
    #dnnMenu .dropdown-menu {
        display: none;
        border-radius: 0;
        background: #f5f5f5;
        padding: 0;
        margin-top: 0;
        border: none;
        min-width: 220px;
        box-shadow: 0 10px 25px rgba(0,0,0,.08);

        opacity: 0;
        transform: translateY(10px);
        transition: all 0.25s ease;
    }

    /* Show level 1 */
   #dnnMenu .dropdown:hover > .dropdown-menu,
#dnnMenu .dropdown.show > .dropdown-menu {
    display: block;
}

    /* Show nested levels */
    #dnnMenu .dropdown-menu li {
        position: relative;
        border-bottom: 1px solid #e1e1e1;
    }

    #dnnMenu .dropdown-menu li:last-child {
        border-bottom: none;
    }

    #dnnMenu .dropdown-menu li:hover > .dropdown-menu {
        display: block;
        position: absolute;
        left: 100%;
        top: 0;
        opacity: 1;
        transform: translateY(0);
    }

    /* Dropdown links */
    #dnnMenu .dropdown-menu li > a {
        display: block;
        padding: 10px 16px;
        color: #333;
        font-size: 15px;
        transition: background 0.2s ease, color 0.2s ease;
    }

    #dnnMenu .dropdown-menu li > a:hover {
        background: #e9e9e9;
        color: #111;
    }
}



/* ==============================================
   MOBILE NAV
   ============================================== */

@media (max-width: 992px) {

    #dnnMenu .topLevel {
        width: 100%;
        text-align: center;
    }

    #dnnMenu .topLevel > li {
        width: 100%;
        border-top: 1px solid rgba(0,0,0,0.1);
    }

    #dnnMenu .topLevel > li > a {
        padding: 14px 0;
        width: 100%;
        display: block;
    }

    /* Remove underline */
    #dnnMenu .topLevel > li > a::after {
        display: none !important;
    }

    /* Mobile dropdown */
    #dnnMenu .dropdown-menu {
        display: none;
        position: static;
        box-shadow: none;
        background: #eeeeee;
    }

    /* Show when toggled */
    #dnnMenu li.show > .dropdown-menu {
        display: block;
    }

    #dnnMenu .dropdown-menu li > a {
        text-align: center;
        padding: 12px 0;
        border-bottom: 1px solid rgba(0,0,0,0.05);
    }

    #dnnMenu .dropdown-menu li:last-child > a {
        border-bottom: none;
    }
}


@media (min-width: 993px) {

    #dnnMenu .dropdown:hover > .dropdown-menu,
    #dnnMenu .dropdown.active:hover > .dropdown-menu {
        display: block;
        opacity: 1;
        transform: translateY(0);
    }

}

#dnnMenu .topLevel > li > a {
    position: relative;
    z-index: 1;
}

#dnnMenu .topLevel > li > a::after {
    z-index: 0;
}


/*------------------------------------------------*/
/* Global Button Styles */
/*------------------------------------------------*/

.StartButton a:link, .StartButton a:visited {
  padding: 12px;
  text-align: center;
  color: #FFF;
  font-size:1.1rem;
  display: block;
  width: 280px;
  background:#282b3a;
  border: 1px solid #282b3a;
  margin:3px 0 3px 0;
  border-radius:42px;
  -webkit-transition:all ease .5s; transition:all ease .5s;
}

.StartButton a:hover, .StartButton a:active {
  padding: 12px;
  text-align: center;
  color: #282b3a;
  font-size:1.1rem;
  display: block;
  width: 280px;
  background:#FFF;
  border: 1px solid #DDD;
  margin:3px 0 3px 0;
  border-radius:42px;
  -webkit-transition:all ease .5s; transition:all ease .5s;
}

.FeatureButton a {
  position: relative;
  overflow: hidden;
  padding: 12px;
  text-align: center;
  color: #ed174e;
  font-size: 20px;
  display: block;
  width: 100%;
  background: #FFF;
  border: 1px solid #DDD;
  margin: 3px 0;
  border-radius: 20px;
  transition: all ease .5s;
}

/* Hover state */
.FeatureButton a:hover {
  color: #FFF;
  background: #ed174e;
  border-color: #ed174e;
}

/* ✨ Shimmer effect */
.FeatureButton a::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.6) 50%,
    rgba(255,255,255,0) 100%
  );
  transform: skewX(-20deg);
}

/* Animate shimmer on hover */
.FeatureButton a:hover::before {
  animation: shimmer 0.9s forwards;
}

/* ✨ Keyframes */
@keyframes shimmer {
  0% {
    left: -75%;
  }
  100% {
    left: 125%;
  }
}



.MoreButton a:link, .MoreButton a:visited {
  padding: 15px;
  text-align: center;
  color: #FFF;
  font-size:26px;
  display: block;
  width: 100%;
  background:transparent;
  border: 2px solid #EEE;
  margin:3px 0 3px 0;
  -webkit-transition:all ease .5s; transition:all ease .5s;
}

.MoreButton a:hover, .MoreButton a:active {
  padding: 15px;
  text-align: center;
  color:#ca0e3c;
  font-size:26px;
  display: block;
  width: 100%;
  background:#FFF;
  border: 2px solid #EEE;
  margin:3px 0 3px 0; 
  -webkit-transition:all ease .5s; transition:all ease .5s;
}



/*------------------------------------------------*/
/* Header STYLES */
/*------------------------------------------------*/

.headerwrap {
  background: #FFF;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.3);
  position:relative;
  z-index:1;
}
/* Logo container */
.logo {
  text-align: center;
  margin: 0 auto;
  position: relative;
  padding:17px 0;
}

/* Default styles for both logos */
.logo img {
  height: auto;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Show full logo on desktop */
.logo-full {
  max-width: 300px;
  display: inline-block;
}
.logo-x {
  display: none;
  max-width: 60px;
}

/* Mobile swap */
@media (max-width: 768px) {
  .logo-full {
    display: none;
  }
  .logo-x {
    display: inline-block;
    animation: fadeInX 0.6s ease;
  }
}

/* Simple fade-in effect for X */
@keyframes fadeInX {
  0% { opacity: 0; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1); }
}

/* Optional pulse when toggling mobile menu */
@keyframes pulseX {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 2px #ed174e); }
  50% { transform: scale(1.1); filter: drop-shadow(0 0 6px #ed174e); }
}

.navbar-toggler:focus + .logo .logo-x,
.navbar-toggler:active + .logo .logo-x {
  animation: pulseX 0.6s ease;
}


.menupad {padding-top:20px;}


.contactwrap {background:linear-gradient(90deg,#000,#111,#000);}
.contacttext {text-align:center;font-size:28px;padding:17px 0;}


.contacttext ul {list-style:none;margin:0;padding:0;text-align:right;}
.contacttext li ul {margin:0;}
.contacttext li  {margin:0;display:inline-block;color:#EEE;}

.contacttext li a:link, .contacttext li a:visited {font-weight:400;font-size:18px;padding:0 6px 0 6px;color:#EEE;  -webkit-transition:all ease .5s; transition:all ease .5s;}
.contacttext li a:hover, .contacttext li a:active {font-weight:400;color:#FFF;font-size:18px;padding:0 6px 0 6px; -webkit-transition:all ease .5s; transition:all ease .5s;}





/*------------------------------------------------*/
/* Main Content STYLES */
/*------------------------------------------------*/


/*Two step lead form*/

.breadcrumb {font-size:.7rem;font-style:italic;color:#333;position:relative;bottom:10px;left:10px;}
.breadcrumb a {font-size:.7rem;font-style:italic;color:#333;}
.showcasewrap .breadcrumb {
  position: absolute;
  top: 10px;
  left: 100px;
  bottom: auto;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  color: rgba(40, 43, 58, .78);
}

.showcasewrap .breadcrumb a {
  color: rgba(40, 43, 58, .78);
}

.showcasewrap .breadcrumb-marker {
  color: #ed174e;
  font-size: .85rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
}

.breadcrumb a:hover {
  color: #555;
}
.showcasewraphome {
  background: linear-gradient(45deg, #FEFEFE, #ff8e44, #f91362, #35126a, #FEFEFE);
  padding:5%;
}

.showcasewrap {
  background: linear-gradient(45deg, #FEFEFE, #ff8e44, #f91362, #35126a, #FEFEFE);
  padding:20px 5%;
  position:relative;
}


.showcasebox {
    position: relative;
    display: inline-block;
    background: #f4f6fd;
    border: 1px solid #efefef;
    border-radius: 5px;
    text-align: center;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
	width:100%;
    margin-bottom:75px;
	
}

.showcasebox::after {
    content: '';
    position: absolute;
    bottom: -50px; /* Adjust this to position the triangle */
    right: 50%; /* Position the triangle horizontally */
    transform: translateX(50%); /* Center the triangle */
    width: 0;
    height: 0;
    border-left: 50px solid transparent; /* Left side of the triangle */
    border-right: 50px solid transparent; /* Right side of the triangle */
    border-top: 50px solid #f4f6fd; /* The triangle's color (matches the box) */
}


.showcasetext {text-align:left;padding:2rem;}
.showcasetext h1 {color:#282b3a;font-size:20px;letter-spacing:1px;font-weight:600;font-family: "Montserrat", serif;line-height:1.3;margin-bottom:15px;}
.showcasetext h2 {color:#282b3a;font-size:1rem;font-weight:400;font-family: "Montserrat", serif;line-height:1.1;margin-bottom:15px;}



.redborder {border-bottom:1px solid #e90249;}


/* ==============================
   Get Started Lightbox Styles
   ============================== */

body.lightbox-open {
    overflow: hidden;
}

/* Overlay */
.lightbox-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    background: linear-gradient( 45deg, rgba(254,254,254,.25), rgba(255,142,68,.45), rgba(249,19,98,.55), rgba(53,18,106,.75), rgba(0,0,0,.85) );
    backdrop-filter: blur(6px);
}

/* Prevent gradient layers from blocking clicks */
.lightbox-overlay::before,
.lightbox-overlay::after {
    pointer-events: none;
}

/* Modal container — SINGLE SCROLL CONTAINER */
.lightbox-inner {
    background: #fff;
    max-width: 640px;
    width: calc(100% - 2rem); /* prevents edge slam */
    height: 810px;
    padding: 3rem 1.5rem 1.5rem 1.5rem;
    border-radius: 12px;
    position: relative;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 20px 60px rgba(0,0,0,.35);
}

.lightbox-inner::after {
    content: "";
    display: block;
    height: 140px; /* scroll runway */
}

/* Close button */
.lightbox-close {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #e90249;
    color: #fff;
    border: none;
    font-size: 26px;
    font-weight: 600;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 6px 18px rgba(233,2,73,.45), 0 0 0 3px rgba(233,2,73,.15);
}

/* Wrapper — no scroll logic */
.lightbox-form-wrapper {
    padding: 0 0 1rem 0;
}

/* Iframe — FIXED HEIGHT */
.lightbox-form-wrapper iframe {
    width: 100%;
    border: none;
}
@media (max-width: 768px) {

    .lightbox-overlay {
        align-items: flex-start;
    }

    .lightbox-inner {
        margin: 0;
        padding: 4rem 1rem 1rem;
        border-radius: 0;
    }

    .lightbox-form-wrapper iframe {
        height: 1000px; /* ensure full form */
    }

    .lightbox-close {
        width: 50px;
        height: 50px;
        font-size: 30px;
    }
}


/*------------------------------------------------*/
/* DOMAIN SECTION STYLES */
/*------------------------------------------------*/

.domainwrap {
  background: #282b3a;
  padding: 2rem 0;
  overflow: hidden;
}

.icon-large {
  font-size: 48px;
  color: #f1f1f1;
}

.registertext h2 {
  font-weight: 900;
  font-size: 2.1rem;
  line-height: 1.1;
  color: #f1f1f1;
  margin: 0;
  text-shadow: 0 0 8px #eee, 1px 1px 0px #999;
}

.registertext h2 span {
  font-weight: 400;
  font-size: 1.1rem;
  color: #f1f1f1;
}

/* Domain checker input layout refinement */
.domainchecker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

/* Input (80%) and select (20%) side by side */
.domainchecker input[type="text"] {
  flex: 1 1 75%;
  min-width: 250px;
  height: 50px;
  border-radius: 15px;
  border: 1px solid #2e3039;
  background: #f1f1f1;
  color: #666;
  padding: 0 15px;
  transition: all 0.3s ease;
}

.domainchecker select {
  flex: 0 0 20%;
  min-width: 100px;
  height: 50px;
  border-radius: 15px;
  border: 1px solid #2e3039;
  background: #f1f1f1;
  color: #666;
  transition: all 0.3s ease;
}

/* Button on new line with spacing */
.domainchecker input[type="submit"] {
  flex: 1 1 100%;
  height: 50px;
  margin-top: 10px;
  border-radius: 15px;
  border: 1px solid #2e3039;
  background: #484c60;
  color: #f1f1f1;
  text-transform: uppercase;
  transition: all 0.4s ease;
}

.domainchecker input[type="submit"]:hover {
  background: #484c60;
  color: #e5dbac;
  box-shadow: 0 0 10px rgba(229, 219, 172, 0.3);
}

/* MOBILE RESPONSIVE */
@media (max-width: 768px) {
  .registertext {
    justify-content: center !important;
    text-align: center;
    margin-bottom: 1.2rem;
  }
  .registertext h2 {
    font-size: 1.8rem;
  }
  .domainchecker {
    flex-direction: column;
  }

  .domainchecker input[type="text"],
  .domainchecker select,
  .domainchecker input[type="submit"] {
    width: 100%;
    flex: 1 1 100%;
    height: 30px;
    padding:1rem;
  }
}

.icon-large {
    font-size: 50px; /* Adjust the size as needed */
    color: #f1f1f1; /* Apply the color */
}
.registertext {text-align:center;margin:0 auto;}

.registertext h2 {
    font-size: 38px; /* Adjust header size */
    color: #f1f1f1; /* Text color */
    margin: 0; /* Remove default margin */
    line-height:24px;
}

.registertext h2 span {
    font-size: 18px; /* Subheading size */
    color: #f1f1f1; /* Subheading color */
}

.servicewrap{
    background:url('images/service-responsive_bg.webp') repeat-x top center #eff0ee;
    background-attachment:fixed;
    padding:5% 5% 10% 5%;
}

.servicetext {text-align:center;padding-top:75px;padding-bottom:150px;}
.serviceimg {max-width:920px;}
.servicetext h2 {font-size:30px;color:#282b3a;line-height:2.3rem;font-weight:600;}
.servicetext h2 span {font-size:20px;color:#282b3a;font-weight:400;}

.servicetext h2 a:link, .servicetext h2 a:visited {font-weight:400;color:#ed174e;}

.servicetext h2 a:hover, .servicetext h2 a:active {font-weight:400;color:#ed174e;}

.servicetext h3 a:link, .servicetext h3 a:visited {font-weight:400;color:#282b3a;}
.servicetext h3 a:hover, .servicetext h3 a:active {font-weight:400;color:#ed174e;}

.servicetext img {
  max-width: 100%;   /* let it scale with the container */
  height: auto;      /* maintain aspect ratio */
}

/* If you want a cap for desktop only */
@media (min-width: 992px) {
  .servicetext img {
    max-width: 920px; /* or 500px if that’s your design */
  }
}



.servicebox {
  background: rgba(255,255,255,0.65);
  backdrop-filter: blur(6px);
  box-shadow: 0 0px 25px rgba(0,0,0,0.1);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  perspective: 1000px;
  position: relative;
  overflow: visible;   /* ✅ allow icons to float outside */
}

.servicebox:hover {
  transform: translateY(-10px) rotateX(4deg) rotateY(-3deg);
  box-shadow: 0 20px 35px rgba(0,0,0,0.25);
}

.servicebox img.w-100.h-100 {
  width: 100%;
  height: auto;        /* maintain aspect ratio */
  object-fit: cover;   /* crop nicely instead of stretching */
  display: block;
}


.servicearea {padding:1.8rem;}

.servicearea img {
  margin: -100px auto 0 auto;
  border-radius: 50%;
  border: #FFF 5px solid;
  box-shadow: 0 0 20px 1px rgba(0,0,0,0.2);
  position: relative;
  z-index: 5;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* subtle glow behind each circle */
.servicearea img::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(rgba(242,3,76,0.3), transparent 70%);
  transform: translate(-50%, -50%);
  z-index: -1;
}
.servicearea h3 {font-weight:600;font-size:2rem;padding-top:25px;}
.servicearea h4 {font-weight:400; color:#ed174e;font-size:1.4rem;line-height:1.2;}
.servicearea p {font-size:18px;}

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

.servicearea li h4 a {
  position: relative;
  display: inline-block;
  font-size: 16px;
  color: #666;
  font-weight: 300;
  padding: 4px 15px 4px 7px;
  border-radius: 4px;
  transition: color 0.3s ease, padding-left 0.3s ease;
  overflow: hidden;
  z-index: 1;
}

/* Background highlight overlay */
.servicearea li h4 a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background: linear-gradient(to right, rgba(241,241,241,0) 0%, #E1E1E1 100%);
  transition: width 0.4s ease;
  z-index: -1;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;

}

/* Hover state */
.servicearea li h4 a:hover {
  color: #ed174e;
  padding-left: 17px;
}

/* Animate the background in from left to right */
.servicearea li h4 a:hover::before {
  width: 100%;
}
/* Mobile adjustments */
@media (max-width: 768px) {
  .servicearea img {
    width: 120px;   /* smaller circle size */
    height: 120px;  /* keep square so border-radius stays circular */
    margin: 20px auto 0 auto; /* Bring inside the box instead of overlapping */
    border-width: 4px;
  }

  .servicebox {
    margin-top: 40px;  /* add spacing so boxes don't crash into each other */
    transform: none !important; /* remove tilt on hover for mobile */
  }

  .servicearea {
    padding: 20px; /* reduce padding so text fits nicely */
  }

  .servicearea h3 {
    font-size: 22px;
  }

  .servicearea h4 {
    font-size: 18px;
  }

  .servicearea p {
    font-size: 16px;
  }
}


.reportwrap {
    background-image:url('images/report-responsive_bg.jpg');
    width:100%;
    background-size:cover;
    background-position:center center;
    padding-top:100px;
    padding:75px 5%;
}

.reporttext { padding-top:25px;}
.reporttext h2 {color:#FFF;font-size:42px; font-weight:400;margin-bottom:7px;}
.reporttext p {color:#e5dbac;font-size:24px; line-height:32px;}
.reporttext ul {list-style:disc;color:#FFF;margin:20px 0;}
.reporttext li {padding:10px;font-size:18px;color:#FFF;}


.reportimg {
    position: relative; /* Ensures the image and background square align correctly */
    display: inline-block;
    z-index: 10;
    margin:-100px auto 75px auto;
}

.reportimg::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 105%; /* Adjust size as needed */
    height: 105%; /* Adjust size as needed */
    background-color: #111; /* Set your desired background color */
    transform: translate(-50%, -50%) rotate(-5deg); /* Centers and rotates the square */
    z-index: 0; /* Places the square behind the image */
    border-radius: 4px; /* Optional: rounds the edges slightly */
}

.reportimg img {
    display: block; /* Removes inline spacing for images */
    max-width: 100%; /* Ensures responsiveness */
    height: auto;
    z-index: 10;
    position: relative;
}


.gradborder {height:15px;background:linear-gradient(90deg,#661269,#f61263,#ff624e);}

.reputationwrap {
  background:#1a1e2f;
  padding:0 5%;
  margin-bottom:-10px;
  overflow:hidden; /* keeps backgrounds and content inside */
  position:relative;
}
.reputationtext {padding: 75px 0;}

.reputationtext h3 {color:#f1f1f1;font-size:84px;font-weight:800;line-height:100px;padding-top:50px;}
.reputationtext h4 {color:#e5dbac;font-size:26px;font-weight:600;line-height:30px;}
.reputationtext p {color:#f1f1f1;font-size:20px;font-weight:300;line-height:28px;}

.reputationtext ul {padding:0;margin:0;list-style:none;}
.reputationtext ul li {margin:0;}
.reputationtext li {color:#f1f1f1;font-size:15px;font-weight:300;line-height:24px;text-align:center;padding:5px 0}



/* NEW: specifically wrap the image container */
.hero-phone-wrapper {
  overflow:hidden;
  position:relative;
  width:100%;
  max-width:100%;
}

/* Your existing rotation animation */
.hero-phone {
  display:block;
  width:100%;
  transform-origin: bottom left;
  transform: rotate(-15deg) translateX(0px);
  opacity:0;
  transition: transform 1s cubic-bezier(0.25,0.8,0.25,1), opacity 1s ease-out;
}

.hero-phone.in-view {
  transform: rotate(10deg) translateX(0);
  opacity:1;
}

.testimonialwrap {
    background-image:url('images/testimonial-responsive_bg.jpg');
    background-color:#1a1e2f;
    width:100%;
    background-size:cover;
    background-position:bottom center;
    padding:9% 0;
    margin-top:-2px;
    border-top: 1px solid #1a1e2f;
}

/* Homenews container styles */
.homenews {
    border-radius: 25px;
    overflow: hidden; /* Ensures image and text stay within the box */
    background-color:#282b3a; /* Semi-transparent background */
    position: relative; /* For positioning child elements */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%; /* Adjust width as needed */
    aspect-ratio: 4/3; /* Maintain aspect ratio */
    -webkit-transition:all ease .5s; transition:all ease .5s;
    margin: 1rem 0;
}

.homenews:hover {
    background-color:#f91362; /* Semi-transparent background */
    -webkit-transition:all ease .5s; transition:all ease .5s;
    }

/* Image wrapper and styles */
.homenews-image {
    position: absolute; /* Positions the image behind the content */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Hides any overflow */
}

.homenews-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image fills the container responsively */
    mix-blend-mode: overlay; /* Applies blend mode */
    opacity: 0.2; /* Adjust transparency for the overlay effect */
}

/* Content styles */
.homenews-content {
    position: relative; /* Stacks above the image */
    z-index: 1; /* Ensures it's above the image */
    color:#DDD; /* Text color */
    text-align: center;
    padding: 15px;
    text-align:left;
}

.homenews-content h3 a:link, .homenews-content a:visited {
    font-size: 1.5rem;
    margin: 0 0 10px;
    color:#DDD;
}

.homenews-content h3 a:hover, .homenews-content a:active{
    font-size: 1.5rem;
    margin: 0 0 10px;
    color:#FFF;
}

.homenews-content p {
    font-size: 1rem;
    margin: 0 0 10px;
    color:#DDD;
}

.homenews-readmore a:link, .homenews-readmore a:visited {
    font-size: 0.9rem;
    color:#ff624e;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease;
}

.homenews-readmore a:hover, .homenews-readmore a:active {
    color: #fff; 
}



/*------------------------------------------------*/
/* Back Pages STYLES */
/*------------------------------------------------*/

/* Showcase header back page STYLES */

.showcasewrapbk {
    background: linear-gradient(45deg, #FEFEFE, #ff8e44, #f91362, #35126a, #FEFEFE);
	padding:30px;
}

.showcaseheading h1 {
    color: #fefefe;
    font-size:50px;
    font-weight:500;
    max-width:980px;
    line-height:1.2;
    text-shadow:1px 1px 2px #000;
    letter-spacing:1px;
}

.showcaseheading h1 span{
    color: #fefefe;
    font-size:24px;
    font-weight:400;
    display:inline-block;
    text-shadow:1px 1px 2px #000; 
}

.showcaseheading ul {margin:10px 0 0 0;padding:10px 0 0 0;list-style:none;border-top:1px solid #ed174e;}
.showcaseheading ul li {margin:0;}
.showcaseheading li {display:inline-block;color:#ed174e;font-size:15px;font-weight:600;letter-spacing:1px;}
.showcaseheading li h4 a:link, .showcaseheading li h4 a:visited {padding:4px 7px 4px 7px; display:inline-block;color:#111;font-size:15px;font-weight:300; -webkit-transition:all ease .5s; transition:all ease .3s; }
.showcaseheading li h4 a:hover, .showcaseheading li h4 a:active {text-decoration:underline;padding:4px 7px 4px 7px;display:inline-block;color:#222;font-size:15px;font-weight:300; -webkit-transition:all ease .5s; transition:all ease .3s;}

.ShowcaseButton a {
  display: block;
  width: 100%;
  height: 100%;
  color: #ed174e !important;
  text-decoration: none;
  font-weight: inherit;
  font-size: inherit;
  letter-spacing: inherit;
}

.ShowcaseButton  {
  position: relative;
  overflow: hidden;
  padding: 15px 0;
  cursor: pointer;
  letter-spacing: 1px;
  text-align: center;
  width: 100%;
  font-weight: 600;
  color: #ed174e;
  font-size: 1.3rem;
  border: 1px solid #EEE;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 25px;
  transition: all ease .3s;
  box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.2);
}

/* Hover color shift */
.ShowcaseButton:hover {
  color: #ed174e;
  background: rgba(255, 255, 255, 0.7);
  border-color: #EEE;
}

/* ✨ Shimmer overlay */
.ShowcaseButton::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.8) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-20deg);
  opacity: 0.7;
  pointer-events: none;
}

/* Trigger shimmer on hover */
.ShowcaseButton:hover::before {
  animation: shimmer-light 1.2s forwards;
}

/* ✨ Shimmer animation */
@keyframes shimmer-light {
  0% {
    left: -75%;
  }
  100% {
    left: 125%;
  }
}

/* Compact back-page showcase */
.showcasewrap {
  padding: 32px 4% 8px;
}

.showcaseheading h1 {
  font-size: clamp(34px, 4vw, 44px);
  line-height: 1.05;
  margin: 0 0 6px;
  padding: 4px 0 6px;
}

.showcaseheading h1 span {
  font-size: clamp(17px, 1.8vw, 21px);
  line-height: 1.2;
  margin-top: 4px;
}

.showcaseheading ul {
  margin: 6px 0 0;
  padding: 6px 0 0;
}

.showcaseheading li h4 {
  margin: 0;
  line-height: 1.1;
}

.showcaseheading li h4 a:link,
.showcaseheading li h4 a:visited,
.showcaseheading li h4 a:hover,
.showcaseheading li h4 a:active {
  padding: 2px 6px;
}

.showcaseheading img {
  max-height: 220px;
  width: auto;
  object-fit: contain;
}

.showcaseheading .ShowcaseButton {
  padding: 10px 0;
  font-size: 1.05rem;
}

.showcaseheading .ShowcaseButton.mt-5 {
  margin-top: 1rem !important;
}


/* Main Service Card back page STYLES */

.featuredservicebox{background:rgba(255,255,255,0.7);backdrop-filter:blur(6px);box-shadow:none;}
.featuredservicebox h2 {font-weight:700;color:#ed174e;font-size:28px;}

/* Custom Web Design back page STYLES */

.webservicebg {
    background:url('images/web-services-design-hosting-development_web-express_kalispell-mt-usa.jpg');
    width:100%;
    background-size:cover;
    background-position:center top;
    padding:10% 0;
    border-bottom-left-radius:35px;
    border-bottom-right-radius:35px;
}

.webservicebox {
    background:#262626;
    padding:25px;
    margin:250px 0;
}

.webservicebox h3 {font-size:42px;font-weight:600;}

.webservicebox h3 a:link, .webservicebox h3 a:visited {color:#ed174e;transition: all 0.3s ease;padding-left:0;}
.webservicebox h3 a:hover, .webservicebox h3 a:active {color:#DDD;transition: all 0.3s ease;padding-left:0;}

.webservicebox img a, .webservicebox img a:hover {padding-left:0;}

.webservicebox h3 {font-size:25px;font-weight:400;color:#ed174e;}

.webservicebox p {color:#DDD;font-weight:400;}

.webservicebox ul {color:#DDD;font-weight:400;list-style:none;margin:0;padding:0;}
.webservicebox li {color:#CCC;font-weight:400;padding-bottom:15px;}

.webservicebox a:link, .webservicebox a:visited {color:#e5dbac;padding-left:0;transition: all 0.3s ease;}
.webservicebox a:hover, .webservicebox a:active {color:#EEE;padding-left:7px;transition: all 0.3s ease;}

.webservicecol {background:#111;padding:1.7rem;border-radius:22px;border:1px solid #444;}

.webserviceimage {margin-top:-150px;}


.articleswrap {padding:100px 0;}


/* Custom Web Design back page STYLES */

.webdesignbg {
    background:url('images/website-design_responsive_bg.jpg');
    width:100%;
    background-size:cover;
    background-position:center top;
    padding:10% 0;
    border-bottom-left-radius:35px;
    border-bottom-right-radius:35px;
}

.customnumberbox {text-align:center;font-size:96px;background:#282b3a;height:175px;width:175px; padding:10px 10px 10px 10px;border-radius:50%;box-shadow:0 -10px 15px 1px rgba(0,0,0,0.2);margin-bottom:20px;}

/* Hosting back page STYLES */

.hostingbg {
    background:url('images/hosting-managed-content_responsive_bg.jpg');
    width:100%;
    background-size:cover;
    background-position:center top;
    padding:10% 0;
    border-bottom-left-radius:35px;
    border-bottom-right-radius:35px;
}

.hostbox {margin-top:-90px;}
.hostpricetext h4 {font-size:96px;font-weight:300; line-height:50px;color:#ed174e;}
.hostpricetext h4 span {font-size:36px;font-weight:300;color:#666;}
.hostingplus {font-size:220px;font-weight:300;color:#DDD;margin-top:75px;display:block;}
.customnumberbox {text-align:center;font-size:96px;background:#282b3a;height:175px;width:175px; padding:10px 10px 10px 10px;border-radius:50%;box-shadow:0 -10px 15px 1px rgba(0,0,0,0.2);margin-bottom:20px;}

/* Hosting back page STYLES */
.webdevbg {
    background:url('images/custom-website-web-development_responsive_bg.jpg');
    width:100%;
    background-size:cover;
    background-position:center top;
    padding:10% 0;
    border-bottom-left-radius:35px;
    border-bottom-right-radius:35px;
}


.webdevbox {margin:30px 0;}
.webdevpricetext h4 {font-size:96px;font-weight:300; line-height:50px;color:#ed174e;}
.webdevpricetext h4 span {font-size:36px;font-weight:300;color:#666;}

/* Email back page STYLES */

.emailbg {
    background:url('images/email-services_responsive_bg.jpg');
    width:100%;
    background-size:cover;
    background-position:center top;
    padding:10% 0;
    border-bottom-left-radius:35px;
    border-bottom-right-radius:35px;
}

/* Domain back page STYLES */

.domainbg {
    background:url('images/domain-registration_responsive_bg.jpg');
    width:100%;
    background-size:cover;
    background-position:center top;
    padding:10% 0;
    border-bottom-left-radius:35px;
    border-bottom-right-radius:35px;
}



/* Landing eCommerce back page STYLES */

.ecommercelandingbg {
    background:url('images/ecommerce-web-design-payment-forms_responsive_bg.jpg');
    width:100%;
    background-size:cover;
    background-position:center top;
    padding:10% 0;
    border-bottom-left-radius:35px;
    border-bottom-right-radius:35px;
}

.ecombox {
  background:#282b3a;
  padding: 15px;
  border: 1px solid #222;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.FeatureButton {
  margin-top: auto; /* Pushes button to the bottom of the flex container */
  padding-bottom: 0; /* Remove if you don't want extra space */
}

.FeatureButton a.btn {
  display: block;
  width: 100%;
}

.ecombox p {color:#EEE;}

.ecombox h4 {color:#d8cea9;font-size:19px;padding-top:12px;}

.ecombox h3 {color:#ed174e;font-size:24px;font-weight:400;}

.ecombox ul {margin:0 0 0 15px;list-style:disc;}

.ecombox li {color:#EEE;font-size:.9rem;padding-bottom:9px;}

/* Ecommerce back page STYLES */

.ecommercebg {
    background:url('images/ecommerce-shopping-cart-development_website-express.jpg');
    width:100%;
    background-size:cover;
    background-position:center top;
    padding:10% 0;
    border-bottom-left-radius:35px;
    border-bottom-right-radius:35px;
}

.ecommercebox {margin-top:0;}
.ecommercepricetext h4 {font-size:96px;font-weight:300; line-height:50px;color:#ed174e;}
.ecommercepricetext h4 span {font-size:36px;font-weight:300;color:#666;}



/* Payment back page STYLES */

.paymentbg {
    background:url('images/merchant-credit-card-payments-gateway_website-express_kalispell-mt.jpg');
    width:100%;
    background-size:cover;
    background-position:center top;
    padding:10% 0;
    border-bottom-left-radius:35px;
    border-bottom-right-radius:35px;
}

.paymentsbox {


}

.paymentsbox h2 {font-size:28px;font-weight:800;padding-top:15px;}
.paymentsbox h3 {font-size:18px;font-weight:600;padding-top:8px;}
.payments p {font-size:17px; line-height:22px;}
.paymentsbox ul {list-style:none;margin:0;padding:0;}
.paymentsbox li  {font-size:14px;color:#666;}
.paymentsbox li h4 {font-size:14px;color:#666;}

.paymentsbox li a:link, .paymentsbox li a:visited {font-size:14px;color:#666;text-decoration:underline;}
.paymentsbox li a:hover, .paymentsbox li a:active {font-size:14px;color:#ed174e;text-decoration:underline;}

.paymentsbox li h4 a:link, .paymentsbox li h4 a:visited {font-size:14px;color:#666;text-decoration:underline;}
.paymentsbox li h4 a:hover, .paymentsbox li h4 a:active {font-size:14px;color:#ed174e;text-decoration:underline;}



/* Payment back page STYLES */

.merchantbg {
    background:url('images/merchant-account_responsive_bg.jpg');
    width:100%;
    background-size:cover;
    background-position:center top;
    padding:10% 0;
    border-bottom-left-radius:35px;
    border-bottom-right-radius:35px;
}

.merchanttext h2 {color:#EEE;font-size:46px;font-weight:900;}
.merchanttext h3 {color:#ed174e;}
.merchanttext p{color:#EEE;}

.merchantbtn {overflow:hidden;margin-bottom:25px;}


.merchantbtn a:link span, .merchantbtn a:visited span {font-size:24px;}
.merchantbtn a:hover span, .merchantbtn a:active span {font-size:24px;}

.merchantbtn a:link, .merchantbtn a:visited {
    background:url('images/low-rate_merchant-payment-processing-account-application.jpg');
    width:100%;
    color:#EEE;
    text-align:center;
    padding:120px 0;
    background-size:cover;
    font-size:54px;
    line-height:50px;
    display:block;
    -webkit-transition:all ease .5s; transition:all ease .5s;
}

.merchantbtn a:hover, .merchantbtn a:active {
    background:url('images/low-rate_merchant-payment-processing-account-application.jpg');
    width:100%;
    color:#ed174e;
    text-align:center;
    padding:120px 0;
    background-size:cover;
    font-size:54px;
    line-height:50px;
    display:block;
    transform: scale(1.02);  
    -webkit-transition:all ease .5s; transition:all ease .5s;

}


/* WebPay back page STYLES */

.webpaybg {
    background:url('images/webpay-gateway-services_responsive_bg.jpg');
    width:100%;
    background-size:cover;
    background-position:center top;
    padding:10% 0;
    border-bottom-left-radius:35px;
    border-bottom-right-radius:35px;
}

.mainwrap {
	padding: 0  0 50px 0;
	background:#fdfdfd;
}

.twocolwrap {
	padding: 50px 0 50px 0;
	background:#fdfdfd;
}

.webpaytoolbox {
    border-radius:35px;
    background:#f6f4f5;
    padding:35px;
    box-shadow: 0 0 20px 1px rgba(0,0,0,0.1);
    margin:35px 0 65px 0;
}

.webpaytoolboximg {
  background-image: url('images/Webpay-payment-gateway_responsive_bg.jpg');
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  height: 100%; /* or use fixed px/rem/vh height if needed */
  padding-bottom:45%;
  border-radius:18px;
}

.webpaytoolbox ul {list-style:none;margin:0 0 20px 0;padding:0;}
.webpaytoolbox h4 {font-size:1.6rem;color:#ed174e;}

.webpaytoolbox h3 {font-size:26px; border-bottom:1px solid #DDD;padding:10px; margin-bottom:15px;font-weight:600;}
.webpaytoolbox h2 {font-size:46px;line-height:1.1;padding-top:20px;color:#1b1b1b;font-weight:800;}

.webpaytoolbox li h4 span {font-size:.8rem;color:#1b1b1b;}
.webpaytoolbox li h4 a:link, .webpaytoolbox li h4  a:visited {font-size:.8rem;color:#1b1b1b;}
.webpaytoolbox li h4  a:hover, .webpaytoolbox li h4  a:active {font-size:.8rem;color:#666;}

/* Marketing back page STYLES */

.marketingbg {
    background:url('images/marketing-branding-logo_responsive_bg.webp');
    width:100%;
    background-size:cover;
    background-position:center top;
    padding:20% 0;
}


.marketingbox {margin-top:75px;}
.marketingbox h2 {font-size:1.8rem;color:#282b3a;font-weight:400;}
.marketingbox h2 span {font-size:4rem;color:#282b3a;font-weight:800;}

.marketingbox h3 {color:#555;font-weight:600;font-size:22px;}


.marketingbox p {font-size:1rem; line-height:1.2;}
.marketingbox ul {list-style:circle;margin-left:20px;padding:0;}
.marketingbox li {padding:3px 0 0 0;font-size:.9rem;margin:0}


.marketcapturebox h2 {font-size:3rem;font-weight:800;}
.marketcapturebox h3 {font-size:1.7rem;font-weight:800;}
.marketcapturebox h4 {font-size:1.4rem;font-weight:800;color:#ed174e;}

.needhelp li {font-size:1.6rem;}



/* ICON WRAPPER */
.package-icon-wrap{
    width:95px;
    height:95px;
    margin:0 auto 20px;
    border-radius:24px;
    background:#fff;
    box-shadow:0 12px 30px rgba(0,0,0,.08);
    padding:16px;

    display:flex;
    align-items:center;
    justify-content:center;
}

.package-icon-wrap img{
    width:100%;
    height:auto;
    object-fit:contain;
}


/* Marketing Package Table Styles */


.pricing-table {
    background: #fff;
    padding: 0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
}

/* GRID STRUCTURE */
.group-header,
.table-header,
.table-row {
    display: grid;
    grid-template-columns: 2fr repeat(3, 1fr);
    align-items: center;
}


/* =========================
   GROUP HEADER
========================= */

.group-header {
    margin-bottom: 10px;
}

.group {
    text-align: center;
    color: #fff;
    font-weight: 600;
    padding: 10px;
    margin:0 3px;
}

.group.customer {
    grid-column: 2 / span 2;
    background: linear-gradient(45deg, #ff8e44, #f91362);
}

.group.managed {
    grid-column: 4;
    background: linear-gradient(45deg, #35126a, #35126a);
}


.group-title {
    display:flex;
    align-items:center;
    gap:10px;
    font-size:24px;
    font-weight:600;
    color:#222;
}

.group-icon {
    width:52px;
    height:52px;
    border-radius:50%;
    background:#FFF;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid #EEE;
    font-size:30px;
}

/* ==============================
   MANAGED LEVELS
============================== */

.managed-levels-wrap{
    background:linear-gradient(
        180deg,
        #2f0d63 0%,
        #26114f 100%
    );
    padding:60px;
    border-radius:24px;
    color:#fff;
    box-shadow:0 25px 60px rgba(0,0,0,.18);
}

.managed-levels-wrap h2{
    font-size:42px;
    font-weight:800;
    margin-bottom:15px;
}

.managed-levels-wrap h2 span{
    color:#c7b9ff;
}

.managed-levels-wrap p{
    color:rgba(255,255,255,.85);
    max-width:850px;
    margin:auto;
}

.managed-label{
    display:inline-block;
    background:#4c3fb5;
    color:#fff;
    padding:8px 18px;
    border-radius:50px;
    font-size:12px;
    font-weight:700;
    letter-spacing:1px;
    margin-bottom:15px;
    text-transform:uppercase;
}

/* ==============================
   TABLE
============================== */

.managed-levels-table{
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    margin-bottom:0;
    border:none;
}

.managed-levels-table thead th{
    background:#533681;
    color:#fff;
    text-align:center;
    padding:22px 15px;
    border:none;
    font-weight:600;
    font-size:15px;
}

.managed-levels-table thead span{
    display:block;
    margin-top:6px;
}

.managed-levels-table thead i{
    display:block;
    font-size:24px;
    margin-bottom:8px;
    color:#b8a8ff;
}

.managed-levels-table tbody td{
    text-align:center;
    padding:24px 16px;
    vertical-align:middle;
    border-color:#ececf3;
}

/* ==============================
   ROW COLORS
============================== */

.starter-row{
    background:#fafbfe;
}

.essential-row{
    background:#f6f7fc;
}

.power-row{
    background:#f1f3fc;
}

.elite-row{
    background:#ebeffd;
}

/* ==============================
   PACKAGE LABELS
============================== */

.tier-name{
    width:180px;
}

.tier-name h3{
    font-size:20px;
    font-weight:800;
    letter-spacing:.5px;
    text-transform:uppercase;
    margin:0;
    color:#1f2740;
}

/* ==============================
   SERVICE CELLS
============================== */

.managed-levels-table tbody h5{
    font-weight:800;
    color:#1f2740;
    margin-bottom:4px;
}

.managed-levels-table tbody small{
    display:block;
    color:#777;
    font-size:13px;
}

.managed-levels-table tbody td i{
    display:block;
    font-size:34px;
    margin-bottom:12px;
}

/* CHANNEL COLORS */

.fa-share-nodes{
    color:#5d4ccf;
}

.fa-envelope-open-text{
    color:#6c63ff;
}

.fa-file-lines{
    color:#7a6fff;
}


/* FEATURE CELL */

.managed-feature{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}

/* GREEN CIRCLE */

/* FEATURE ICON */

.managed-feature-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:12px;
    width:auto;
    height:auto;
    background:none;
    border:none;
}

/* GREEN CHECK */

.managed-feature-icon i{
    font-size:22px;
    color:#7acb7a;
    line-height:1;
}

/* QUANTITY */

.managed-feature h5{
    font-size:28px;
    font-weight:800;
    color:#1f2740;
    margin-bottom:4px;
}

/* DESCRIPTION */

.managed-feature small{
    font-size:13px;
    color:#777;
    display:block;
}


/* ==============================
   BUNDLE COLUMN
============================== */

.bundle-col{
    background:#33156a !important;
}

.bundle-cell{
    background:#CCC;
    color:#111;
    position:relative;
}

.bundle-cell::before{
    content:"";
    position:absolute;
    inset:8px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:14px;
    pointer-events:none;
}

.bundle-cell i{
    font-size:32px;
    margin-bottom:12px;
    color:#c7b9ff;
}

.bundle-cell h4{
    display:inline-block;
    background:rgba(255,255,255,.10);
    padding:8px 18px;
    border-radius:50px;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:1px;
    font-weight:700;
    margin-bottom:15px;
}

.bundle-save{
    font-size:24px;
    font-weight:800;
    color:#f91362;
    line-height:1.2;
}

.bundle-save span{
    display:block;
    color:#9ef1bb;
    font-size:18px;
    margin-top:8px;
}

.bundle-cell small{
    display:block;
    margin-top:10px;
    color:#111;
    font-size:12px;
}

/* ==============================
   HOVER EFFECT
============================== */

.managed-levels-table tbody tr{
    transition:.25s ease;
}

.managed-levels-table tbody tr:hover{
    background:#f7f8ff;
}

/* ==============================
   FOOTNOTE
============================== */

.managed-pricing-note{
    text-align:center;
    margin-top:35px;
}

.managed-pricing-note h4{
    color:#fff;
    margin-bottom:15px;
}

.managed-pricing-note p{
    max-width:900px;
    margin:auto;
}

/* ==============================
   MOBILE
============================== */

@media(max-width:768px){

    .managed-levels-wrap{
        padding:25px;
    }

    .managed-levels-wrap h2{
        font-size:30px;
    }

    .managed-levels-table,
    .managed-levels-table thead,
    .managed-levels-table tbody,
    .managed-levels-table tr,
    .managed-levels-table td{
        display:block;
        width:100%;
    }

    .managed-levels-table thead{
        display:none;
    }

    .managed-levels-table tr{
        margin-bottom:25px;
        border-radius:18px;
        overflow:hidden;
        box-shadow:0 10px 25px rgba(0,0,0,.08);
    }

    .managed-levels-table td{
        text-align:center;
        padding:18px;
        border:none;
    }

    .tier-name{
        width:100%;
        background:#2f0d63;
    }

    .tier-name h3{
        color:#1f2740;
        font-size:24px;
    }

    .managed-levels-table tbody h5{
        font-size:22px;
    }

    .managed-levels-table tbody td i{
        font-size:28px;
    }

    .bundle-cell{
        background:linear-gradient(
            180deg,
            #311260,
            #45208d
        );
        border-top:2px solid rgba(255,255,255,.12);
    }

    .bundle-save{
        font-size:20px;
    }
}


/* =========================
   HEADER ROW
========================= */

.table-header {

}
.table-wrapper {
    overflow:auto;
    max-height:80vh;
}
.table-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: linear-gradient(45deg, #ff8e44, #f91362);
    color: #fff;
    border-bottom:2px solid #ed174e;
    box-shadow:0 4px 10px rgba(0,0,0,0.05);
}
.table-header .plan.proplus {
    background: #35126a;
}
.table-header div {
    padding: 12px;
    text-align: center;
    font-weight:600;
    font-size:1.1rem;
}

/* =========================
   FEATURE COLUMN
========================= */

.col-base {
    background: #fff7f2;
}

.col-pro {
    background: #fff0f5;
    font-weight: 600;
}

.col-proplus {
    background: #f5f2ff;
}

/* FULL HEIGHT FIX */
.table-row > div {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.feature-col {
    justify-content: flex-start !important;

}



/* =========================
   ROWS
========================= */
/* FULL WIDTH GROUP ROW */
.table-group-row {
    display: block; /* break out of grid */
    width: 100%;
    background: #f7f7f7;
    padding: 14px 20px;
    font-weight: 600;
    font-size: 14px;
    color: #333;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}



.table-row div {
    padding: 5px;
    text-align: left;
}

.table-row:nth-child(even) {
    background: #fafafa;
}


/* =========================
   ADDON BAND
========================= */

.addon-band {
    background: #35126a;
    padding: 30px;
    border-radius: 10px;
    justify-content: space-between;
    gap: 20px;
}

.addon {
    flex: 1;
    background: rgba(255,255,255,0.2);
    padding: 20px;
    text-align: center;
    color: #fff;
    border-radius: 8px;
    font-weight: 500;
    transition: 0.3s;
}

.addon:hover {
    transform: translateY(-5px);
    background: rgba(255,255,255,0.3);
}




/* =====================================
   PRICE CARD CORE
===================================== */

.price-card{
    background:#fff;
    border-radius:22px;
    padding:40px 32px;
    box-shadow:0 20px 50px rgba(0,0,0,.08);
    position:relative;
    height:100%;
    display:flex;
    flex-direction:column;
    transition:.35s ease;

}

.price-card:hover{
    transform:translateY(-8px);
    box-shadow:0 30px 70px rgba(0,0,0,.12);
}


/* =====================================
   PACKAGE COLORS
===================================== */

.price-card.base{
    border-top:5px solid #ff8e44;
    background:linear-gradient(180deg,#fff,#fff8f3);
}

.price-card.pro{
    border-top:8px solid #f91362;
    background:linear-gradient(180deg,#fff,#fff3f8);
    transform:scale(1.04);
    z-index:3;
}

.price-card.proplus{
    border-top:5px solid #35126a;
    background:linear-gradient(180deg,#fff,#f8f6ff);
}
/* ==========================================
   FLOATING CIRCLE ICON
   ========================================== */

.package-icon-wrap{
    position:absolute;
    top:-62px;
    left:50%;
    transform:translateX(-50%);
    width:160px;
    height:160px;
    border-radius:50%;
    background:#fff;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:20;
}

/* IMAGE */
.package-icon-wrap img{
    width:80%;
    height:auto;
    display:block;
}


/* ==========================================
   PACKAGE SHADOW COLORS
   ========================================== */

.price-card.base .package-icon-wrap{
    border:3px solid #ff8e44;
}

.price-card.pro .package-icon-wrap{
    border:3px solid #ed174e;

}

.price-card.proplus .package-icon-wrap{
    border:3px solid #35126a;

}


/* ==========================================
   FLOATING PRO BADGE
   ========================================== */

.pricing-badge{
    position:absolute;
    top:110px;
    left:50%;
    transform:translateX(-50%);
    background:#f91362;
    color:#fff;
    font-size:10px;
    font-weight:700;
    letter-spacing:.5px;
    padding:0 12px;
    border-radius:999px;
    white-space:nowrap;
    z-index:30;
    text-transform:uppercase;
}


/* PRO CARD NEEDS MORE TOP SPACE */
.price-card.pro{
    padding-top:135px;
}

.price-card.base,
.price-card.proplus{
    padding-top:110px;
}



/* =====================================
   HEADINGS
===================================== */

.price-card h5{
    text-align:center;
    font-size:24px;
    font-weight:700;
    margin-bottom:12px;
}

.price{
    text-align:center;
    font-size:48px;
    font-weight:800;
    line-height:1;
    margin-bottom:10px;
}

.price span{
    font-size:18px;
    opacity:.6;
}

.setup-fee{
    text-align:center;
    font-size:14px;
    font-weight:600;
    color:#777;
    margin-bottom:12px;
}

.tagline{
    text-align:center;
    font-size:15px;
    color:#ed174e #ed174e
    margin-bottom:20px;
}

.trust-line{
    text-align:center;
    font-size:14px;
    font-weight:600;
    color:#999;

    margin-bottom:25px;
}

.price-card small {padding-bottom:7px;font-size:13px;}


/* =====================================
   FEATURE GROUPS
===================================== */

.feature-group{
    margin-bottom:22px;
    padding-bottom:18px;
    border-bottom:1px solid rgba(0,0,0,.06);
}

.feature-group:last-of-type{
    border-bottom:none;
}

.feature-group h6{
    font-size:13px;
    font-weight:800;
    letter-spacing:1px;
    text-transform:uppercase;
    color:#1d1d1d;
    margin-bottom:14px;
}

.feature-group ul{
    list-style:none;
    padding:0;
    margin:0;
}

/* FEATURE ITEMS */

.feature-group li {
    display: flex;
    align-items: flex-start;
    gap: 2px;
    margin-bottom: 12px;
    line-height: 1.4;
    font-weight:600;
}


/* Keep the check aligned */

.feature-group li i {
    flex-shrink: 0;
    margin-top: 4px;
    color: #7dbd3b;
}


/* Main feature text */

.feature-group li {
    flex-wrap: wrap;
}


/* Feature description */

.feature-group li span {
    display: block;
    width: 100%;
    padding-left: 23px;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 400;
    color: #777;
}

@media (max-width: 991px) {
    .feature-group h6{
    font-size:13px;
    font-weight:800;
    letter-spacing:1px;
    text-transform:uppercase;
    color:#1d1d1d;
    margin-bottom:14px;
    text-align:center;
}
    .feature-group {
        text-align: center;
    }

    .feature-group ul {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .feature-group li {
        justify-content: center;
        text-align: center;
        max-width: 280px;
    }

    .feature-group li span {
        padding-left: 0;
        text-align: center;
    }

}
/* =====================================
   BUTTON
===================================== */

.btn-pricing{
    margin-top:auto;

    display:block;

    text-align:center;

    padding:16px;

    border-radius:14px;

    font-weight:700;
    text-decoration:none;

    transition:.3s;
}

.btn-pricing.dark{
    background:#212636;
    color:#fff;
}

.btn-pricing.primary{
    background:#f91362;
    color:#fff;
}

.btn-pricing:hover{
    transform:translateY(-2px);
    color:#fff;
}


/* =====================================
   MOBILE
===================================== */

@media(max-width:991px){

    .price-card.pro{
        transform:none;
    }

    .price-card{
        margin-bottom:25px;
    }

}

/* FEATURE GROUP INSIDE CARDS */
.feature-group {
    text-align: left;
}

.feature-group h6 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px;
    letter-spacing:1px;
    color: #444;
    text-transform: uppercase;
}

.feature-group ul {
    list-style: none;
    padding: 0;
}

.feature-group li {
    margin-bottom: 10px;
    font-size: 14px;
}

.feature-group li span {
    display: block;
    font-size: 12px;
    color: #777;
}



.section-break h2 {
    font-weight:700;
    font-size:28px;
    color:#222;
}

.section-break p {
    font-size:15px;
    max-width:600px;
    margin:0 auto;
}

.divider-line {
    width:60px;
    height:3px;
    background:#ed174e;
    margin:20px auto 0;
    border-radius:2px;
}



/* ==========================================
   PRO+ MANAGED GROWTH SECTION
   ========================================== */

.managed-growth-section {
    background: linear-gradient( 180deg, #35126a, #241042 );
    border-radius: 24px;
    padding: 70px 50px;
    color: #fff;
    box-shadow: 0 25px 60px rgba(53,18,106,.25);
    margin-top:-100px;
}

/* HEADER */

.managed-label {
    display: inline-block;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.2);
    padding: 8px 18px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

.managed-header h2 {
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 20px;
    color:#f91362;
}

.managed-header h2 span {
    display: block;
    color: #d7b7ff;
}

.managed-header p {
    max-width: 850px;
    margin: auto;
    opacity: .9;
    font-size: 18px;
}

/* SERVICE CARDS */

.managed-service-card {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 20px;
    padding: 35px 25px;
    height: 100%;
    transition: .3s;
}

.managed-service-card:hover {
    transform: translateY(-8px);
    background: rgba(255,255,255,.12);
}

.managed-service-card i {
    font-size: 34px;
    color:#FFF;
    margin-bottom: 20px;
}

.managed-service-card h5 {
    font-weight: 700;
    margin-bottom: 15px;
    color:#FFF;
}

.managed-service-card p {
    font-size: 14px;
    opacity: .85;
    line-height: 1.7;
     color:#FFF;
}

/* FOOTER */

.managed-footer {
    border-top: 1px solid rgba(255,255,255,.15);
    padding-top: 40px;
}

.managed-footer h4 {
    font-weight: 700;
    margin-bottom: 15px;
    color:#FFF;
}

.managed-footer p {
    max-width: 800px;
    margin: auto auto 25px;
    opacity: .9;
}

/* CTA */

.btn-managed-growth {
    display: inline-block;
    background: linear-gradient( 45deg, #ff8e44, #f91362 );
    color: #fff !important;
    text-decoration: none;
    padding: 16px 34px;
    border-radius: 999px;
    font-weight: 700;
    transition: .3s;
}

.btn-managed-growth:hover {
    transform: translateY(-3px);
    color: #fff;
}

.best-for {
    margin: 18px 0 22px;
    padding: 12px 14px;
    background: rgba(0,0,0,.03);
    border-left: 3px solid currentColor;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.6;
    color: #666;
}

.best-for strong {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
    color: #222;
}

/* Package color accents */

.price-card.base .best-for {
    border-color: #ff8e44;
}

.price-card.pro .best-for {
    border-color: #f91362;
}

.price-card.proplus .best-for {
    border-color: #35126a;
}

/* PRO+ Managed Addons */
.managed-addon-block {
    margin: 20px 0;
    padding: 18px;
    background: #f8f5ff;
    border: 1px solid rgba(61,18,106,.12);
    border-radius: 14px;
}

.managed-addon-block h6 {
    color: #35126a;
    margin-bottom: 14px;
}

.addon-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.addon-tags span {
    background: #35126a;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 999px;
}

.managed-note {
    font-size: 12px;
    line-height: 1.6;
    color: #666;
    margin: 0;
}


/* ==========================================
   PRO+ CHANNEL BLOCK
   ========================================== */

.managed-addon-block {
    margin: 22px 0;
    padding: 20px;
    background: #f8f5ff;
    border: 1px solid rgba(53,18,106,.12);
    border-radius: 16px;
}

.managed-addon-block h6 {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #35126a;
    margin-bottom: 18px;
}


/* CATEGORY */

.addon-category {
    margin-bottom: 18px;
}


/* CATEGORY TITLE */

.addon-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700 !important;
    color: #35126a;
    margin-bottom: 20px;
}

.addon-label i {
    color: #f91362;
    width: 18px;
    text-align: center;
}


/* BADGES */

.addon-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.addon-tags span {
    background: #fff;
    color: #35126a;
    border: 1px solid rgba(53,18,106,.12);
    font-size: 11px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 999px;
}


/* NOTE */

.managed-note {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid rgba(53,18,106,.08);
    font-size: 12px;
    line-height: 1.6;
    color: #666;
}


/* ==========================================
   PRICING ASSURANCE BLOCK
   ========================================== */

.pricing-assurance {
    margin-top: 60px;
    padding: 35px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0,0,0,.06);
}

.assurance-item{
    text-align:center;
    padding:20px;
}

.assurance-item i{
    font-size:40px;
    margin-bottom:15px;

    background:linear-gradient(
        45deg,
        #ff8e44,
        #f91362,
        #35126a
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.assurance-item h6{
    font-size:16px;
    font-weight:700;
    margin-bottom:12px;
    color:#111;
}

.assurance-item p{
    font-size:14px;
    color:#666;
    line-height:1.6;
    margin:0;
}


/* TABLE ENHANCEMENTS */
.table-section-title {
    background: #eee;
    padding: 10px 15px;
    font-weight: 600;
    font-size: 14px;
}
.feature-title {padding-right:15px;}
.feature-title h4 {font-size:15px;font-weight:bold;margin-bottom:0;}
.feature-title span {font-size:13px;font-weight:400;}


.feature-col span {
    font-size: 12px;
    color: #777;
}

.feature-group i {
    color: #8be36b;
    margin-right: 6px;
}

.feature-row i.fa-check {
    color: #8be36b;
    font-size: 16px;
}

.table-row.feature-row i.fa-check {
    color: #8be36b;
    font-size: 16px;

    background: rgba(139, 227, 107, 0.1);
    border-radius: 50%;

    width: 26px;
    height: 26px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.table-row.feature-row > div:not(.feature-col) {
    display: flex;
    align-items: center;
    justify-content: center;
}


.follow-data h3 {color:#666;font-weight:bold;font-size:28px;}
.follow-data h2 {color:#ed174e;line-height:1.1;font-size:24px;}


.gradient-text {
  background: linear-gradient(45deg, #ff8e44, #ff8e44, #f91362, #35126a, #35126a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text; /* For future browser compatibility */
  color: transparent;
  line-height:1;
}

.printingbg {
    background:url('images/print-design-print-materials-brochure-business-cards_responsive_bg.jpg');
    width:100%;
    background-size:cover;
    background-position:center top;
    padding:10% 0;
    border-bottom-left-radius:35px;
    border-bottom-right-radius:35px;
}



/*------------------------------------------------*/
/* @Print Services STYLES */
/*------------------------------------------------*/

.printblock {
	background:#FFF;
	box-shadow:0 0 25px 0px rgba(0,0,0,0.2);
	margin: 30px 0 30px 0;
}

.printblock img {
	width:100%;
	height:auto;
}

.printpad {
	padding:15px;
}
.printimg {
	overflow:hidden;
	background:#f2f2f2;
	min-height:300px;


}
.printblock h2 {
	color:#222;
	font-family: 'Roboto', sans-serif;
	font-size:24px;
	padding:10px 0 10px 0;
	font-weight:600;
}

.printblock h2 span {
	display:inline-block;
	font-weight:400;
	font-size:20px;
}

.printblock ul {
	margin:6px 0 10px 0;
	padding:0;
	list-style:none;
	
}

.printblock ul li {
	margin:0;
}

.printblock li {
	font-size:16px;
	padding:3px 0 3px 0;
}

.printblock li span {
	font-size:16px;
	font-weight:600;
}

.printblock h4 {
	color:#222;
	font-family: 'Roboto', sans-serif;
	font-size:17px;
	padding:20px 0 0 0;
	border-top:1px solid #CC0000;
	margin-top:5px;
	font-weight:600;
}

.printblock p {
	color:#222;
	font-family: 'Roboto', sans-serif;
	font-size:15px;
}

.printblock table {
	border-top:1px solid #DDD;
}
.printblock .table-bordered > thead > tr > th  {
	padding:4px;
	text-align:center;
}
.printblock .table-bordered > tbody > tr > td  {
	padding:2px;
	text-align:center;
}

.printblock th {
	color:#222;
	font-size:15px;
	padding:4px;
	background:#EEE;
}

.printblock td {
	color:#222;
	font-size:13px;
	
}

.printblock td span {
	color:#cc0000;
	font-size:13px;
}



/* Online Forms back page STYLES */


.formbg {
    background:url('images/secure-forms_responsive_bg.jpg');
    width:100%;
    background-size:cover;
    background-position:center top;
    padding:10% 0;
}


.mainwrap {
	padding: 0  0 50px 0;
	background:#fdfdfd;
}


.form-email-to {display:none;}

/*------------------------------------------------*/
/* Side scroller jump to top box STYLES */
/*------------------------------------------------*/

.jumpbox {
  right:0;
  width:50px;
  height:50px;
  background:rgba(255,255,255,0.5);
  position: fixed;
  top: 84%;
  -webkit-transform: translateY(-15%);
  -ms-transform: translateY(-15%);
  transform: translateY(-15%);
  z-index: 1000;
  padding-top:12px;
  box-shadow:0 0 15px 0 rgba(0,0,0,0.3);
}

.jumpbox a:link, .jumpbox a:visited {font-size:30px;color:#666;}
.jumpbox a:hover, .jumpbox a:active {font-size:30px;color:#ed174e;}


/*------------------------------------------------*/
/* About Page Timeline STYLES */
/*------------------------------------------------*/

.timeline {
  position: relative;
  margin: 0 auto;
  padding: 2rem 0;
}

.timeline::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: repeating-linear-gradient(
    to bottom,
    #999,
    #999 8px,
    transparent 8px,
    transparent 16px
  );
  transform: translateX(-50%);
  z-index: 1;
}

.timeline-item {
  position: relative;
  margin-bottom: 5rem; /* extra space for image overlap */
  width: 50%;
}

.timeline-item.left { left: 0; text-align: right; }
.timeline-item.right { left: 50%; text-align: left; }

.timeline-content {
  background: #fff;
  padding: 2rem 1.25rem 1.25rem;
  border-radius: 8px;
  box-shadow: 0 0 8px rgba(0,0,0,0.1);
  max-width: 100%;
  margin: 0 auto;
  position: relative;
  z-index: 0;
}

/* Marker positioned at center, overlapping top of box */
.timeline-marker {
  position: absolute;
  top: -60px; /* half of image height (120px) */
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

.timeline-marker img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(0,0,0,0.25);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .timeline::before { left: 30px; }
  .timeline-item { width: 100%; text-align: left; }
  .timeline-marker { left: 30px; transform: none; }
  .timeline-content { max-width: 100%; margin-left: 80px; }
}

.sticky-image {
  position: sticky;
  top: 100px; /* distance from top of viewport before it "sticks" */
  z-index: 2; /* keeps it above backgrounds but below navbars */
}







/* ==========================================
   WEB EXPRESS CONTENT SYSTEM
   Reusable for blogs, articles, guides,
   service pages, local SEO pages
   ========================================== */

/* SECTION WRAPPER */
.content-section {
    padding: 80px 0;
}

/* EYEBROW / CATEGORY */
.content-eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #f91362;
    margin-bottom: 15px;
}

/* MAIN HEADINGS */
.content-section h1,
.content-section h2 {
    font-weight: 800;
    line-height: 1.15;
    color: #212636;
    margin-bottom: 20px;
}

.content-section h1 {
    font-size: clamp(36px, 5vw, 58px);
}

.content-section h2 {
    font-size: clamp(28px, 4vw, 42px);
}

/* ACCENT TEXT */
.content-highlight,
.content-section h1 span,
.content-section h2 span {
    color: #f91362;
}

/* SUBTEXT / LEADS */
.content-lead {
    font-size: 20px;
    line-height: 1.7;
    color: #555;
    max-width: 850px;
}

/* BODY COPY */
.content-section p {
    font-size: 17px;
    line-height: 1.8;
    color: #444;
    margin-bottom: 24px;
}

/* LISTS */
.content-section ul,
.content-section ol {
    padding-left: 24px;
    margin-bottom: 30px;
}

.content-section li {
    font-size: 16px;
    line-height: 1.7;
    color: #444;
    margin-bottom: 10px;
}

/* CONTENT CARDS */
.content-card {
    background: #fff;
    border-radius: 20px;
    padding: 35px;
    box-shadow: 0 12px 35px rgba(0,0,0,.06);
    height: 100%;
    transition: all .3s ease;
}

.content-card:hover {
    transform: translateY(-6px);
}

/* ICONS */
.content-icon {
    font-size: 32px;
    color: #f91362;
    margin-bottom: 20px;
}

/* CALLOUT BLOCK */
.content-callout {
    background: linear-gradient(
        135deg,
        rgba(255,142,68,.08),
        rgba(249,19,98,.08)
    );
    border-left: 4px solid #f91362;
    border-radius: 16px;
    padding: 30px;
    margin: 40px 0;
}

.content-callout h3,
.content-callout h4 {
    margin-bottom: 12px;
}

/* CTA BUTTON */
.btn-content {
    display: inline-block;
    padding: 16px 32px;
    border-radius: 999px;
    background: linear-gradient(
        45deg,
        #ff8e44,
        #f91362
    );
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    transition: all .3s ease;
}

.btn-content:hover {
    transform: translateY(-3px);
    color: #fff;
}

/* QUOTES */
.content-quote {
    font-size: 24px;
    font-style: italic;
    color: #212636;
    border-left: 4px solid #f91362;
    padding-left: 25px;
    margin: 40px 0;
}

/* MOBILE */
@media(max-width:768px){

    .content-section {
        padding: 50px 0;
    }

    .content-lead {
        font-size: 18px;
    }

    .content-section p,
    .content-section li {
        font-size: 15px;
    }

    .content-card {
        padding: 25px;
    }

}


/*------------------------------------------------*/
/* Footer Content STYLES */
/*------------------------------------------------*/


.footertopwrap {
	background:#363843;
    padding:35px 0
}

.footerwrap {
	background:#272934;
    padding:10px 0 5px 0;
}

.footerlinks {font-size:14px;color:#DDD;text-align:center;}

.footerlinks p {padding-top:10px;line-height:22px;font-size:15px;color:#DDD;}

.footerlinks ul {margin:0;padding:0;list-style:none;}
.footerlinks ul li {padding:0;}

.footerlinks li {padding:5px 0;text-align:left;color:#FFF;}
.footerlinks li a:link, .footerlinks li a:visited {padding-left:10px; color:#DDD;font-size:14px;font-weight:300;-webkit-transition:all ease .5s; transition:all ease .5s;}
.footerlinks li a:hover, .footerlinks li a:active {padding-left:15px;color:#FFF;font-size:14px;font-weight:300;-webkit-transition:all ease .5s; transition:all ease .5s;}
.footerlinks  a:link, .footerlinks  a:visited {color:#DDD;font-size:18px;font-weight:400;-webkit-transition:all ease .5s; transition:all ease .5s;}
.footerlinks  a:hover, .footerlinks  a:active {color:#FFF;font-size:18px;font-weight:400;-webkit-transition:all ease .5s; transition:all ease .5s;}

.login {color:#CCC;font-size:11px;}
.login li {color:#DDD;font-size:11px;}

a.login:visited {color:#CCC; font-size:11px; text-decoration:none;}
a.login:active {color:#CCC; font-size:11px; text-decoration:none;}
a.login:link {color:#CCC; font-size:11px; text-decoration:none;}
a.login:hover {color:#DDD; font-size:11px; text-decoration:underline;}

.copyright {font-family: "Montserrat", serif;font-size: 11px;color: #CCC;text-align:center;padding:5px;}

a.copyright:visited {color: #CCC; font-size:11px; text-decoration:none;}
a.copyright:active {color: #CCC; font-size:11px; text-decoration:none;}
a.copyright:link {color: #CCC; font-size:11px; text-decoration:none;}
a.copyright:hover {color: #DDD; font-size:11px; text-decoration:underline;}

.wecontrol {
    text-align: center;
    font-size: 11px;
    padding-top: 10px; 
	color: #CCC;
}

.wecontrol ul  { 
  padding:0;
  margin:0;
}

.wecontrol ul li { 
  display: inline; 
  color: #CCC;
  margin:0;
}

.wecontrol ul li a
{
   text-decoration: none;
   padding: 3px;
   color: #CCC;
}

.wecontrol ul li a:hover {
    color: #DDD;
    text-decoration:underline;
}

/*------------------------------------------------*/
/* @media Display STYLES */
/*------------------------------------------------*/


/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {

}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
/* Logo container */
.logo {
  text-align: center;
  margin: 0 auto;
  position: relative;
  padding:14px 0 7px 0;
}
 .menupad {padding:0;}

/* Homepage Domain Form Fields STYLES */
input.domainchecker[type="submit"] {background:#484c60;color:#f1f1f1;padding:0 15px;text-transform:uppercase;width:100%;}
input.domainchecker[type="submit"]:hover {background:#f1f1f1;color:#f1f1f1;padding:0 20px;text-transform:uppercase;width:100%;}
.contacttext ul {list-style:none;margin:0;padding:0;text-align:center;}
.footerlinks li {padding:5px 0;text-align:left;color:#FFF;margin-left:25px;}

/* Backpage Showcase STYLES */
.showcaseheading li {display:block;color:#ed174e;font-size:15px;font-weight:600;letter-spacing:1px;}

.featuredservicebox{box-shadow:0 0 15px 1px rgba(0,0,0,0.2);backdrop-filter:blur(0);margin:0 18px;}

.showcasewrap {
  padding: 34px 18px 6px;
}

.showcaseheading h1 {
  font-size: 30px;
  line-height: 1.05;
  text-align: center;
  padding: 4px 0 6px;
}

.showcaseheading h1 span {
  font-size: 16px;
  line-height: 1.2;
}

.showcaseheading img {
  max-height: 150px;
}

.showcaseheading .ShowcaseButton.mt-5 {
  margin-top: .75rem !important;
}

.showcaseheading ul {
  margin-top: 6px;
  padding-top: 6px;
  text-align: center;
}

.showcaseheading li {
  display:block;
  font-size: 13px;
}

.showcaseheading li  {
  display:block;
  font-size: 13px;
  color:#FFF !important;

}.showcaseheading li h4 a  {
  display:block;
  font-size: 13px;
  color:#FFF !important;
}

.showcasewrap .breadcrumb {
  left: 18px;
}

}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
    .contacttext li a:link, .contacttext li a:visited {
        font-weight: 400;
        font-size: 15px;
        padding: 0 3px 0 3px;
        color: #EEE;
        -webkit-transition: all ease .5s;
        transition: all ease .5s;
    }

    .contacttext li a:hover, .contacttext li a:active {
        font-weight: 400;
        color: #FFF;
        font-size: 15px;
        padding: 0 3px 0 3px;
        -webkit-transition: all ease .5s;
        transition: all ease .5s;
    }

    .marketingbox h2 {
        font-size: 1.4rem;
        color: #282b3a;
        font-weight: 400;
    }

    .marketingbox h2 span {
        font-size: 2rem;
        color: #282b3a;
        font-weight: 800;
    }

    .reputationtext h3 {
        color: #f1f1f1;
        font-size: 44px;
        font-weight: 800;
        line-height: 52px;
        padding-top: 50px;
    }

    .reputationtext h4 {
        color: #e5dbac;
        font-size: 20px;
        font-weight: 600;
        line-height: 26px;
    }
    /*Marketing Page & Feature Table Adjustments*/

    .table-header div {
        padding: 12px;
        text-align: center;
        font-weight: 600;
        font-size: .9rem;
        line-height: 1;
    }

    .marketingbg {
        background: url('images/marketing-branding-logo_responsive_bg.webp');
        width: 100%;
        background-size: cover;
        background-position: center top;
        padding: 40% 0;
    }
}

/* ==========================================
   MARKETING FORM CARD
   ========================================== */

.marketing-form-card {
    background: #fff;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,.10);
    margin-bottom: 40px;
}


/* HEADER IMAGE */

.marketing-form-card img {
    width: 100%;
    display: block;
    height: auto;
}


/* CONTENT */

.marketing-form-content {
    padding: 40px;
    background: linear-gradient( 180deg, #ffffff, #f8f9fb );
}


/* LABEL */

.marketing-form-content .eyebrow {
    display: inline-block;
    margin-bottom: 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #ed174e;
}


/* HEADING */

.marketing-form-content h2 {
    font-size: 38px;
    font-weight: 800;
    line-height: 1.15;
    color: #212636;
    margin-bottom: 16px;
}

.marketing-form-content h2 span {
    display: block;
    color: #f91362;
}


/* BODY */

.marketing-form-content p {
    max-width: 650px;
    font-size: 16px;
    line-height: 1.7;
    color: #555;
    margin: 0;
}


/* MOBILE */

@media(max-width:768px) {

    .marketing-form-content {
        padding: 28px;
    }

    .marketing-form-content h2 {
        font-size: 28px;
    }
}
/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {
    
    /*Marketing Page & Feature Table Adjustments*/
    .needhelp li {font-size:1.1rem;}
    .feature-col-text {font-size:14px !important;line-height:1;text-align:center !important;}
    .feature-title {padding-right:15px;}
    .feature-title h4 {font-size:15px;font-weight:bold;margin-bottom:0;}
    .feature-title span {font-size:13px;font-weight:400; line-height:1.1; display:block;}
    
    .group-title {
        display:flex;
        align-items:center;
        gap:10px;
        font-size:20px;
        font-weight:600;
        color:#222;
    }

    .group-icon {
        width:40px;
        height:40px;
        border-radius:50%;
        background:#FFF;
        display:flex;
        align-items:center;
        justify-content:center;
        border:1px solid #EEE;
        font-size:22px;
    }
}

/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) {

}

@media only screen and (max-width : 992px) {
  /* Replace these selectors with all your background classes */
  .webservicebg,
  .hostingbg,
  .webdevbg,
  .domainbg,
  .emailbg,
  .webdesignbg,
  .merchantbg,
  .aboutbg,
  .webpaybg,
  .printingbg,
  .formbg,
  .ecommercelandingbg, 
  .paymentbg {
    background: #f1f1f1 !important;  /* plain gray */
    background-image: none !important; /* remove heavy photo */
    background-size: initial !important;
    background-position: initial !important;
    border-radius:0;
  }
}