/* 'Poppins'-regular - latin */

* { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
     box-sizing: border-box; 
}

html {
    overflow-x: hidden;
    overflow-y: scroll;
}

body {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;   /*  text-size-adjust: none;*/
    position: relative; 
	display: block;
    overflow-x: hidden;
}

table {
    table-layout: fixed;
    width: 100%;
}

 h1,  h2,  h3,  h4,  h5, h6 {
    font-family: 'Poppins', sans-serif;
    margin: 0;
}

.uppercase {
    text-transform: uppercase;
}

 h1 {
    font: normal normal 600 60px/60px 'Poppins';
    color: #FFFFFF;
    margin-block-start: 0.3em;
    margin-block-end: 0.3em;
}

 h1.blue {
    color: #00838C;
}

h2 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 30px;
  line-height: 40px;
  color: #294150;
  letter-spacing: -1px;
}

 h3 {
    font: normal normal 500 40px/39px 'Poppins';
    color: #284151;
    line-height: normal;
}
 h3.white {
    color: white;
}

 h3.cyan {
    color: #00838C;
}

 h4{
    font: normal normal 500 35px/40px 'Poppins';
    color: #7C7C7C;
}

 h5 {
    color: white;
    font: normal normal 600 20px/35px 'Poppins';
}

a {
    text-decoration: none;
    color: #00838C;
}

a:hover {
    color: #8aa23b;
}

.green {
    color: #8aa23b;
}

.purple {
    color: #8F00FF;
}

p, label, input, textarea, button,  li {
    font: normal normal normal 21px/40px 'Poppins';
    color: #294150;
    font-weight: 400;
    border: none;
    margin: 0;
    line-height: initial;
}

ul {
    padding-inline-start: 20px;
    margin: 0;
}
ul.dashed {
    list-style-type: none;
}
ul.dashed > li {
    text-indent: -20px;
    padding-left: 20px;
    padding-bottom: 20px;
}
ul.dashed > li:before {
    content: "-";
    margin-right: 10px;
}

button {
    width: 100%;
}

.larger_paragraph {
    font: normal normal normal 30px/50px 'Poppins';
}

.smaller_paragraph {
    font: normal normal normal 18px/30px 'Poppins';
}
.even_smaller_paragraph {
    font: normal normal normal 14px/20px 'Poppins';
    margin-top: 0;
}
p.white, a.white {
    color: white;
}
p.blue {
    color: #284151;
}
p.nav {
    font: normal normal normal 16px/20px 'Poppins';
}


.contact_form input[type=text],.contact_form input[type=tel], .contact_form textarea{
    background: #F5F8FA 0% 0% no-repeat padding-box;
    border: 1px solid #CBD6E2;
    width: 100%;
    min-height: 40px;
    box-sizing: border-box;
    padding: 10px;
}

.contact_form textarea {
    min-height: 100px;
}

.white_button {
    text-align: center;
    display: inline-block;
    border: 1px solid #00838C;
    border-radius: 13px;
    color: #00838C;
    padding: 18px 75px;
    font-size: 24px;
    font-weight: 500;
    background-color: #ffffff;
    cursor: pointer;
}

.white_button:hover {
    background-color: #0b5561;
    color:#ffffff;
}

/* new website*/

menu {
    padding:0px;
    width: 100%;
    height: 76px;
    border: 1px solid #CBCBCB;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    opacity: 1;
    z-index: 10;
    margin: 0px;
    position: fixed;
    top: 0px;
}


  /** new menu **/
  .hamburger {
    position: fixed;
    z-index: 100;
    width: auto;
    top: 23px;
    right: 41px;
    padding: 4px;
    background: transparent;
    cursor: pointer;
    font: normal normal normal 14px/18px 'Poppins';
    color: #AFAFAF;
  }

  .hamburger i {
    font-size: 20px;
    margin-left: 10px;
    text-align: center;
    position: relative;
    top: 3px;

  }

  .closeIcon {
    display: none;
  }
  .menu {
    z-index: 98;
    transform: translateX(100%);
    transition: transform 1.2s;
    width: 100%;
    height: 100vh;
    background-color: transparent;
    position: fixed;
  }
  .menu_content {
    position: fixed;
    /*transform: translateX(100%);
    transition: transform 1.2s;*/
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
    background: #F0F2F5;
    width: 60%;
    padding: 80px 40px;
    overflow-y: scroll;
  }

  .showMenu {
    transform: translateX(0);
  }
  /* end new hamburger menu*/

.quick_links {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.quick_links .ql_column {
    padding-left: 2%;
    font-size: 14px;
    min-width: 230px;
    margin-bottom: 40px;
}
.quick_links .ql_column a {
    display: block;
    text-align: left;
    font: normal normal normal 18px/50px 'Poppins';
    letter-spacing: 0px;
    color: #284151;
    padding: 0;
    border: none;
    margin-bottom: 1px;
}
.quick_links .ql_column a:hover {
    color : #00858c;
}
.quick_links .ql_column h4{
    font: normal normal 600 18px/34px 'Poppins';
    letter-spacing: 0px;
    color: #A5B4BE;
    text-transform: uppercase;
    margin-bottom: 1px;
    margin-top: 0;
}
.fixed-position {
    position: fixed;
 }

 .menu__label {
    position: fixed;
    right: 80px;
    top: 30px;
    z-index: 20;
    font: normal normal normal 14px/18px 'Poppins';
    letter-spacing: 0px;
    color: #AFAFAF;
    opacity: 1;
}
header .logo img {
    width: 150px;
    position: fixed;
    top: 20px;
    left: 40px;
}
.nav_email{
    position: absolute;
    top: 29px;
    left: 0;
    right: 0;
    width: 300px;
    color: #707070;
    margin-left: auto;
    margin-right: auto;
    font: normal normal normal 14px/19px Segoe UI;
}
.nav_support_buttons{
    position: fixed;
    top: 19px;
    right: 200px;
    display: inline-flex;
}
a.gray_button, .gray_button{
    text-align: left;
    font: normal normal normal 14px/18px 'Poppins';
    letter-spacing: 0px;
    color: #AFAFAF;
    opacity: 1;
    border: 1px solid #AFAFAF;
    border-radius: 22px;
    padding: 10px 20px;
    margin-right: 20px;
    cursor: pointer;
}
.gray_button:hover{
    background-color: #f3f3f3;
    color: #515151;
}
.light_white_button {
    text-align: left;
    font: normal normal normal 16px/18px 'Poppins';
    letter-spacing: 0px;
    color: white;
    opacity: 1;
    border: 1px solid white;
    border-radius: 30px;
    padding: 15px 25px;
    display: inline-block;
    background-color: transparent;
    width: -moz-fit-content;
    width: fit-content;
}
.light_white_button:hover {
    background-color: white;
    color:#00838C;
}
.plain_white_button {
    font: normal normal normal 18px/18px 'Poppins';
    letter-spacing: 0px;
    color: black;
    opacity: 1;
    border: 1px solid white;
    border-radius: 50px;
    padding: 20px 40px;
    display: inline-block;
    background-color: white;
    text-align: center;
    cursor: pointer;
}
.nav_login_register{
    position: fixed; 
    top: 25px;
    right: 140px;
}
.nav_login_register p, .nav_login_register a{
    display: inline-block;
    color: #AFAFAF;
}
.gray_link{
    font: normal normal normal 14px/18px 'Poppins';
    letter-spacing: 0px;
    color: #AFAFAF;
    opacity: 1;
    padding: 5px;
}
.white_link{
    font: normal normal normal 14px/18px 'Poppins';
    letter-spacing: 0px;
    color: white;
    opacity: 1;
    padding: 5px;
}
/* search */
.search-click, input[type=text]:not(.form-control).search-click {
    border: 1px solid #F0F2F5;
    outline: none;
    background-size: 22px;
    background-position: 13px;
    border-radius: 22px;
    background-color:#F0F2F5 ;
    /*height: fit-content;*/
    padding: 10px;
    transition: all 0.5s;
    position: fixed;
    left: 220px;
    overflow: hidden;
    top: 17px;
    padding-left: 40px;
    font: normal normal normal 16px/19px 'Poppins';
    letter-spacing: 0px;
    color: #818181;
    width: auto;
  }
  
  .search-click:focus, input[type=text]:not(.form-control).search-click:focus {
    width: 300px;
    height: max-content;
    padding-left: 50px;
  }

  .search-click input {
    background: transparent;
    border: 1px solid #ccc;
    outline: none;
    position: absolute;
    width: 300px;
    height: 50px;
    left: 0%;
    padding: 10px;
  }
  .search_icon{
    position: absolute;
    top: 28px;
    left: 235px;
    color: #616161;
    z-index: 1;
    cursor: pointer;
  }
  .search_icon_lighter{
    color: #CBC9C9;
    padding: 5px;
    cursor: pointer;
  }
  .autocom-box .search_icon_lighter {
    margin-right: 10px;
  }

  .search-input .autocom-box{
    padding: 0;
    opacity: 0;

    background-color: white;
    color: black;
    width: 345px;

    top: 59px;
    left: 220px;
    position: fixed;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    transition: all 0.5s;
    border: 1px solid #CBC9C9;
    border-radius: 20px;
    z-index: 10;
}
  
.search-input.active .autocom-box{
    padding: 10px 8px;
    opacity: 1;
}  
.autocom-box a{
    padding: 0 12px;
    cursor: pointer;
    border-radius: 3px;
    color: #818181;
}

#first-suggestion {
    position: absolute;   
    top: 57px;
    left: 220px;
    background-color: white;
    flex-direction: column;
    width: 320px;
    padding: 20px;
    border: 1px solid #CBC9C9;
    border-radius: 20px;
    display: none;
    z-index: 99;
}
#first-suggestion a, .autocom-box a {
    font: normal normal normal 16px/40px 'Poppins';
    color: #8A8A8A;
    position: relative;
    z-index: 100;
}
  /* end menu */
  /* second nav*/
.second_nav {
    background: #FBFBFC 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 6px #00000029;
    border: 1px solid #CBCBCB;
    opacity: 1;
    margin-top: 76px; /* original spacing so the second nav sits below the fixed header */
    padding: 0 200px; /* shopping cart*/
    z-index: 5;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    min-height: 54px;
}

  .second_nav > a {
    float: left;
    font: normal normal 600 14px/18px 'Poppins';
    letter-spacing: 0px;
    color: #707070;
    text-transform: uppercase;
    text-align: center;
    padding: 19px 16px;
    text-decoration: none;
  }
  
  .menu_dropdown {
    float: left;
    overflow: hidden;
  }
  
  .menu_dropdown .dropbtn {
    font: normal normal 600 14px/18px 'Poppins';
    letter-spacing: 0px;
    color: #707070;
    text-align: left;
    border: none;
    outline: none;
    text-transform: uppercase;
    padding: 14px 16px;
    background-color: inherit;
    margin: 0;
    height: 100%;
  }
  
  .second_nav a:hover, .menu_dropdown:hover .dropbtn {
    background-color: white;
    color:#00838C;
  }
  
  .dropdown-content {
    display: none;
    text-transform: none;
    position: absolute;
    background-color: white;
    min-width: 160px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 6px #00000029;
  }

  .menu_dropdown:hover{
    box-shadow: 0px 4px 4px rgba(0,0,0,0.2);
  }
  
  .dropdown-content a {
    float: none;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    font: normal normal normal 14px/18px 'Poppins';
    letter-spacing: 0px;
    color: #707070;
    opacity: 1;
  }
  

  .menu_dropdown:hover .dropdown-content {
    display: block;

  }

  .shopping_container {
    min-width: 200px;
    position: absolute;
    top: 8.5px;
    right: 35px;
    display: inline-flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    color: #707070;
}
.shopping_cart_icon {
    padding: 10px;
}
.link {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 3;
  }
  /* new main banner*/
  .main_banner{
    width: 100%;
    /* height: 100%;
    min-height: calc(40vh - 136px)!important; */
    position: relative;
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    min-height: 300px;
    padding: 40px 8%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    background-image: url(./../../images/hero23.webp);
  }
  
  .main_banner_bridge{
    position: relative;
    min-height: 300px;
    flex-grow: 1;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: 20px;
  }

  .main_banner_bridge .domain_text {
    min-width: 500px;
  }

  .main_banner_bridge_small {
    /*padding: 40px;*/
    /*background-color: #d3eff1;*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-wrap: wrap;
    align-items: flex-start;
    border-radius: 5px;
    flex-grow: 1;
    flex-shrink: 2;
    gap: 20px;
    flex-basis: 47%;
    /*border: 1px solid #60AAAA;*/
  }

  .main_banner_bridge_small .domain_text {
    width: 100%;
    border: 1px solid #284151;
    border-radius: 0;
    padding: 30px 0 30px 20px;
    background-color: #F0F2F5;
  }

  .main_banner_bridge_small #button_submit_domain {
    height: 62px;
    background-color: #284151;
    color: white;
    border-radius: 0;
  }

  .main_banner_bridge_small p,
  .main_banner_bridge_small h5 {
    color: #284151;
  }

  .main_banner_bridge_small p {
    font-size: 14px;
  }

  .main_banner_bridge_small h5 {
    font-size: 25px;
  }
  .special_offer{
    border-radius: 5px;
    flex-basis: 49%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-grow: 1;
    position: relative;
  }

  #special_offer a{
    display: flex;
  }

  .special_offer img {
    width: 100%;
    border-radius: 5px;
  }
/*
  .Interactive_main_statement{
    margin-top: auto;
    display: table-cell;
    vertical-align: middle;
    width: 100%!important;
    height: calc(100vh)!important;

    object-fit: cover!important;
    object-position: top!important;

 }*/
 
 /*
.Interactive_main_statement_heading > h1{
	 letter-spacing: 0px;
	 color: #FFFFFF;
	 opacity: 1;
	 font-size: 40px;
     font-weight: 400;
     text-align: center;
 }
 
 .Interactive_main_statement_heading{	 
	 padding:1% 15vw 0px 15vw; 
 }
 
 .Interactive_main_statement_support{
	 padding-top: 20px;
	 width: 100%;
     text-align: center;
 }
 
 .Interactive_main_statement_support > h4{
	 letter-spacing: 0px;
	 color: #FFFFFF;
	 opacity: 1;
	 font-size: 18px;
     font-weight: 400;
 }
 */
 .Interactive_main_statement_search{
    display: flex!important;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
 }
 
 .Interactive_main_statement_form{	 
	 display: flex;
     align-items: center;
     justify-content: center;
     flex-wrap: nowrap;
     width: 100%;
 }
 .domain_text{
    font-family: 'Poppins', sans-serif;
    height: 100%;
    border-radius: 50px 0px 0px 50px;
    outline: none;
    border: none;
    letter-spacing: 0px;
    color:  #707070;
    padding: 35px 0 35px 40px;

    max-height: 30px;
    box-sizing: border-box;
 }
 #domains_domain_page .domain_text{
    min-width: 400px;
 }
 .Interactive_main_statement_form.small .domain_text {
    font: normal normal normal 20px/29px 'Poppins';
    padding: 27px 0 27px 40px;
 }
 .Interactive_main_statement_form.small input[type=submit] {
    height: 54px;
    font: normal normal 700 16px/22px 'Poppins';
 }

 .Interactive_main_statement_form.bigger_width,
 .domain_text.bigger_width{
    width: 100%;
 }
 .domain_text::placeholder { /* Most modern browsers support this now. */
    font: normal normal normal 18px/20px 'Poppins';
    letter-spacing: 0px;
    color: #D5D5D5;
 }

 .main_banner_bridge_small .domain_text::placeholder { 
    color: #BAB6B6;
 }
 .Interactive_main_statement_form > span{
	 padding-left: 30px;
     border-radius: 50px;
     width: 100;
	 letter-spacing: 0px;
	 color: #FFFFFF;
	 opacity: 1;
	 font-size: 32px;
     font-weight: 400;
 }
 
 .Interactive_main_statement_form input[type=submit] {
    height: 70px;
    border-radius: 0;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
    border: none;
    background-color: #8aa23b;
    text-align: left;
    font: normal normal 900 18px/22px 'Poppins';
    letter-spacing: 0px;
    color: #246978;
    text-transform: uppercase;
    padding: 0 50px;
    letter-spacing: 1px;
    font-weight: bold;
    cursor: pointer;
}

.Interactive_main_statement_links{
	 /*width: 75vw;*/
	 display: flex;
     flex-wrap: wrap;
     justify-content: center;
     align-items: center;
     align-content: center;
	 column-gap: 40px;
	 /*padding-top: 70px;*/
     margin-top: 2%;
	 /*margin-bottom: 10%;*/
}

.Interactive_main_statement_links > a {
	 color: #FFFFFF ;
	 border: 1px solid #FFFFFF;
	 border-radius: 33px;
     opacity: 1;
     padding: 15px 50px;
     margin-top: 39px;
	 transition-duration: 100ms;
} 
 
.Interactive_main_statement_links > a:hover {
	 color: #0990b0;
	 background-color: #FFFFFF;
} 
.main_banner_bridge p {
    font: normal normal normal 14px/18px 'Poppins';
    letter-spacing: 0px;
    color: #FFFFFF;
    opacity: 1;
    width: 100%;
}
.main_banner_bridge h1 {
    width: 100%;
}

/* product suggestion*/


.backup_suggestion{
    background: #195881 0% 0% no-repeat padding-box;
	flex-basis: 30%;
}
.hosting_suggestion, .backup_suggestion{
    border-radius: 5px;
    opacity: 1;
    padding: 40px;
    vertical-align: middle;
    flex-grow: 1;
    /* width: 40%; */
    margin: 0;
    display: flex;
    gap: 20px;
    flex-direction: column;
}
.hosting_suggestion{
    background: #284151 0% 0% no-repeat padding-box;
    flex-basis: 52%;
}
.hosting_suggestion > h4, .backup_suggestion > h4{
    text-transform: uppercase;
}
.backup_suggestion > p, .hosting_suggestion > p{
    color: white;
    text-align: left;
    font: normal normal normal 18px/34px 'Poppins';
    letter-spacing: 0px;
    color: #FFFFFF;
}
.other_products{
    display: table;
    width: 100%;
    border-spacing: 15px 8px;
}
.small_container{
    padding: 20px;
    flex-grow: 1;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-basis: 20%;
    transition-duration: 0.5s;
    position: relative;
}

.small_container.light_blue {
    background-color: #F5F8FA;
    border: 1px solid #CBD6E2;
    padding: 40px;
    gap: 20px;
}
.small_container.light_blue:hover {
    background-color: #27B8B8;
}
.small_container.light_blue h5{
    font: normal normal 600 25px/30px 'Poppins';
    color: #27B8B8;
}
.small_container.light_blue:hover h5,
.small_container.light_blue:hover p,
.small_container.light_blue:hover a {
    color: white;
}
.small_container_grey{
    min-width: 220px;
    padding: 20px;
    box-shadow: 0px 3px 6px #B5B5B529;
    border: 4px solid #E6E6E6;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    flex-direction: row;
    flex-wrap: wrap;
}
.small_container_grey:hover{
    background: #00838C 0% 0% no-repeat padding-box;
    border:4px solid white;
    outline: 3px solid #81BCC0;
}

.small_container.colored_container {
    width: 25%;
    padding: 20px 40px 20px 40px;
    min-width: 250px;
}
.small_container.colored_container p {
    margin-bottom:0;
}

.small_container .inner_product {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.colored_container h3 {
    font-size: 25px;
}
.small_container_grey:hover a{
    color: white !important;
}
.small_container_grey:hover p, .small_container_grey:hover h5{
    color: white !important;
}
.small_container  p.small_container_content{
    text-align: left;
    font: normal normal normal 18px/34px 'Poppins';
    letter-spacing: 0px;
}
.small_container_grey p.small_container_content {
    color: #707070;
}
.small_container h5 {
    margin: 0;
    text-align: left;
    font: normal normal bold 18px/22px 'Poppins';
    letter-spacing: 0px;
}
.small_container_grey h5 {
    color: #7B7B7B;
}
.blue_link{
    text-align: left;
    font: normal normal normal 18px/19px 'Poppins';
    letter-spacing: 0px;
    color: #00838C;
    opacity: 1;
    cursor: pointer;
    margin: 0;
}

a.grey_link{
    font: normal normal 600 16px/40px 'Poppins';
    color: #7C7C7C;
}
.inner_grid{
    max-width: 1600px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    gap: 30px;
    position: relative;
    z-index: 1;
}

 .container{
    padding: 80px 8%;
    position: relative;
    gap: 40px;
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
    justify-content: center;
}


.container_logo h4 {
    margin:0;
    font-size : 35px;
}
/* not sure*/
.not_sure{
    position: relative;
    background-image: url("./../../images/business-lady.webp");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: cover;
}


.not_sure_text {
    max-width: 800px;
    min-height: 650px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}
.not_sure_text>p{
    text-align: left;
    font: normal normal normal 22px/45px 'Poppins';
    letter-spacing: 0px;
    color: #FFFFFF;
    margin: 40px 0;
}
.not_sure_text>h4{
    text-align: left;
    font: normal normal normal 40px/49px 'Poppins';
    letter-spacing: 0px;
    color: #FFFFFF;
    text-transform: none;
    margin-top: 0;
}

 .container_reduced, .container_reduced{ 
    padding: 40px 8%;
}

 .product_suggestion{
    padding: 40px 20px;
}
.container_white{
    background-color:white;
}
.container_dark_blue{
    background-color:#284151;
}
.container_img {
    flex-basis: 43%;
    flex-grow: 1;
}
.container_img>img{
    border-radius: 10px;
    width: 100%;
    height: auto;
}
.big_img {
    min-width: 230px;
    max-width: 700px;
}
.medium_container .container_img>img {
    min-width: 0;
}
.container_text {
    vertical-align: middle;
    line-height: 40px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    flex-basis: 50%;
    flex-grow: 1;
    justify-content: center;
}


.container_text h3{
    font-size: 40px;
    font-weight: 500;

}


.row_flex {
    display: flex;
    flex-direction: row;
}
.left_separation{
    border-left: 1px solid white;
    padding: 16px 40px;
    flex-basis: auto;
    text-align: center;
    flex-grow: 0;
}
.left_separation h3{
    margin: 0;
}
.logo_margin{
    margin-right: 10px;
    flex-basis: auto;
    text-align: right;
    flex-grow: 0;
}

.logo_margin img {
    width: 200px;
    border-radius: 0;
    /*width: auto;*/
}

.container_blue{
    background-color:#122B39;
}
/* hosting*/
.container_grey{
    background-color:#F3F5F5;
	
}

/* cards and lists*/
.products_list{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    margin-top: 2%;
}
.product_item{
    opacity: 1;
    display: table-cell;
    text-align: center;
    font: normal normal normal 25px/40px 'Poppins';
    letter-spacing: 0px;
    color: #948d8d;
    padding:10px;
    cursor: pointer;
}
.product_item:hover{
    text-align: left;
    font: normal normal 600 25px/40px 'Poppins';
    letter-spacing: 0px;
    color: #00838C;
}
.selected_item{
    text-align: left;
    font: normal normal 600 25px/40px 'Poppins';
    letter-spacing: 0px;
    color: #00838C;
}
.not_selectable:hover{
    color: #C7C7C7;
}

.products_cards{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    width: 100%;
}

.product_card{
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 6px #00000029;
    border: 1px solid #D8D8D8;
    border-radius: 30px;
    opacity: 1;
    transition: padding-left 0.5s;
    /*height: fit-content;*/
    flex-grow: 1;
    max-width: 450px;
    width: 20%;
    /*min-width: 350px;*/
    min-width: 264px;
    margin-bottom: 20px;
}
.bigger_product_card {
    max-width: 515px;
}
.product_card_content{
    padding: 40px 40px 0px 40px;
}
.product_card_bottom {
    background-color: #E5E9EF;
    padding: 20px 40px;
    border-radius: 0 0 30px 30px;
    cursor: pointer;
}
.subtitle {
    font-size: 20px;
    font-weight: 400;
}
.container_title{
    width: 100%;
    gap: 30px;
    display: flex;
    flex-direction: column;
}
.product_card_bottom .blue_link{
    line-height: 35px;
    cursor: pointer;
    font-size: 17px;
}

.angle_icon {
    float: right;
    color: #00838C;
    display: inline-block;
}  

.product_card_content h5{
    text-align: left;
    font: normal normal 700 32px/42px 'Poppins';
    letter-spacing: 0px;
    color: #294150;
    opacity: 1;
    margin:0;
}

.product_card_content .starting-from-p,
.product_card_content .vat{
    text-align: left;
    font: normal normal 300 16px/35px 'Poppins';
    letter-spacing: 0px;
    color: #000000;
    opacity: 1;
    margin: 0;
}

.product_card_content .per-user-p{
    text-align: left;
    font: normal normal 300 30px/37px 'Poppins';
    letter-spacing: 0px;
    color: #8aa23b;
    opacity: 1;
    margin:0;
}

.product_card_content .price-h2{
    text-align: left;
    font: normal normal 600 30px/37px 'Poppins';
    letter-spacing: 0px;
    color: #8aa23b;
    opacity: 1;
    margin:0px;
}
.product_card_content .price, .container_text .price{
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

 .blue_button{
    font: normal normal normal 20px/24px 'Poppins';
    background: #294150 0% 0% no-repeat padding-box;
    border-radius: 50px;
    opacity: 1;
    text-align: center;
    color: white;
    text-align: center;
    padding: 20px;
    display: block;
    cursor: pointer;
    border: 1px solid #00838C;
}

.blue_button:disabled{
    cursor: unset;
    background-color: white;
    color: #00838C; 
}
.blue_button:hover {
    background-color: white;
    color:#00838C;
}
.blue_button.small {
    margin: 0;
    font-size: 16px;
    padding: 10px 20px;
}
.light_blue_button{
    font: normal normal normal 20px/24px 'Poppins';
    border: 1px solid #00838C;
    color: #00838C;
    border-radius: 50px;
    text-align: center;
    padding: 20px;
    display: block;
    max-width: 200px;
}
td .light_blue_button {
    margin-left: auto;
    margin-right: auto;
}

.hidden_element{
    display: none;
}

.inner_grid_stretch, .stretch{
    align-items: stretch;
}
.inner_grid_flex_start, .flex_start{
    align-items: flex-start;
}
.align_center {
    align-items: center;
    text-align: center;
}
.align_center p, .align_center div {
    text-align: center;
}
.justify_start{
    justify-content: flex-start;
}
.space_between{
    justify-content: space-between;
}
.center, .inner_grid_center{
    justify-content: center;
}
.certification{
    padding:4%;
}
.top_selling_products h4 {
    font: normal normal normal 30px/37px 'Poppins';
    letter-spacing: 0px;
}

/*testimonial slider*/
.trusted {
    margin-bottom: 5%;
    padding-left :20px;
    padding-top : 20px;

}
.mySlides {display:none}
.w3-left, .w3-right, .w3-badge {cursor:pointer}
.slider_dot {
    height: 8px;
    width: 8px;
    /* padding: 10px; */
    margin: 5px;
    border-radius: 10px;
    border: 1px solid #7C7C7C;
    background-color: transparent;
    margin-bottom: 5%;
}
.slider_dot:hover {
    background-color: #7C7C7C;
    cursor: pointer;
}
.slider_dots{
    width: 100%;
    display: flex;
    position: relative;
    /* color: black; */
    /* z-index: 10; */
    justify-content: left;
    padding-left: 20px;
}
.slider_dot_selected{
    background-color: #7C7C7C;
}
.container_slider{
    min-width: 600px;
    width: 45%;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: baseline;
    align-content: space-between;
    justify-content: space-between;
    flex-wrap: wrap;
}
.mySlides{
    width: 100%;
    min-height: 550px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
}
.testimonial_title{
    text-align: left;
    font: normal normal 600 22px/50px 'Poppins';
    letter-spacing: 0px;
    color: #7C7C7C;
}
.testimonial_person{
    font: normal normal 600 15px/50px 'Poppins';
    letter-spacing: 0px;
    color: #7C7C7C;
    opacity: 1;
}
.testimonial_content{
    text-align: left;
    font: normal normal normal 28px/50px 'Poppins';
    letter-spacing: 0px;
    color: #7C7C7C;
}
.slider__txt {
    padding:20px;
}
.slider_arrow{
    color:#7C7C7C;
    font-size: 35px
}
.slider_arrow:hover {
    cursor: pointer;
}
.star_icon{
    color : #7C7C7C;
    margin-right: 10px;
    margin-top: 20px;
}
/*Fin slider */
.white_arrow {
    color: white;
    display: flex;
    width: 100%;
    justify-content: flex-end;
}
.return_to_top {
	position: relative;
	margin-top: -60px;
    margin-left: auto;
    margin-right: auto;
    width: 140px;
    text-align: center;
    background-color: #274150;
    padding: 20px;
    border-radius: 5px 5px 0 0;
    cursor: pointer;
}
.return_to_top p{
    color: white;
}
footer {
	background: #0A1E2A 0% 0% no-repeat padding-box;
	width: 100%;
} 

footer .footer {
    width: 100%;
    box-sizing: border-box;
    padding: 80px 8%;
}
.footer .quick_links a{
    text-align: left;
    font: normal normal normal 14px/34px 'Poppins';
    letter-spacing: 0px;
    color: #FFFFFF;
}
.footer .quick_links h4{
    text-align: left;
    font: normal normal 600 14px/34px 'Poppins';
    letter-spacing: 0px;
    color: #B2B2B2;
    text-transform: uppercase;
    margin:0;
    text-shadow: none;
}
.footer .quick_links .ql_column{
    padding:0%;
    min-width: 200px;
}

.container img.banner_image {
    position: absolute; 
    top: 0;
    left: 0;
    right: 0;
    width: 100%!important;
    display: block;
    border-bottom: 4px solid #00838C;
    height: calc(79.5vh - 136px)!important
}

.banner {
    background-size: cover;
    background-position: top center;
    width: 100%;
    top: 0;
    left: 0;
    height: 100%;
    position: absolute;
    border-bottom: 7px solid #00838C;
}

.banner_frame {
    background-size: cover;
    background-position: top center;
    width: 100%;
    top: -250px;
    left: 0;
    height: 1100px;
    position: absolute;
    border-bottom: 4px solid #00838C;
}


.info-box-header h3 {
    margin: 0;
    text-align: left;
    font-size: 2em;
    font: normal normal 600 40px/50px 'Poppins';
    letter-spacing: 0px;
    color: #294150;

}

.small_banner_frame {
    width: 100%;
    height: 120%;
    background-size: cover;
    background-position: top center;
    top: 0;
    left: 0;
    position: absolute;
}

.asterisk{
    margin: 0 2% 1%;
    background-color: #F3F5F5;
    width: 100%;
}
.heading .ariane{
    text-align: left;
    color: #8aa23b;
    text-transform: uppercase;
}
.heading .ariane.cyan{ 
    color: #00838C;
}
.heading .subtitle{
    text-align: left;
    font: normal normal normal 20px/32px 'Poppins';
    letter-spacing: 0px;
    color: #FFFFFF;
    margin-top:0;
}

.heading .surtitle_top{
    font: normal normal normal 40px/40px 'Poppins';
    letter-spacing: 0px;
    color: #FFFFFF;
    margin-top: 20px;
}

.heading .subtitle_bottom{
    font: normal normal normal 30px/40px 'Poppins';
    letter-spacing: 0px;
    color: #FFFFFF;
    display: flex;
    margin-top: 0;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
}

.heading .subtitle_bottom p {
    margin: 0;
}

.heading{
    word-wrap: break-word;
    overflow-wrap: break-word;
    flex-grow: 1;
    max-width: 1000px;
    display: flex;
    max-width: 1000px;
    flex-direction: column;
}
.round {
    padding: 5px;
    border: 2px solid #FFFFFF;
    border-radius: 10px;
    width: 0%;
    margin-right: 10px!important;
}
.green_round {
    background-color: #25CD25;
}
.red_round {
    background-color: red;
}
.banner{
    padding: 3% 6%;
    min-height: calc(100vh - 230px)!important;
    gap: 60px;
}
.paragraph {
    width: 21%;
    vertical-align: middle;
    min-width: 226px;
    flex-grow: 1;
    display: flex;
    gap: 30px;
    flex-direction: column;
}
.paragraph h4 {
    margin-top: 0;
}
.product_description {
    margin:none;
    padding:20px 10px;
}

.product_description b {
    font-weight: 700;
    font-size: 16.5px;
}

.details{
    border-top : 1px solid #d3dddb;
}
.product_description table {
    width: 100%;
}
.product_description table td {
    padding: 10px 10px 10px 0;
    width: 60%;
}

.product_description table tr + tr td {
    border-top: 1px solid #d3dddb;
}

.product_description td, div {
    font-size: 15px;
    line-height: 22px;
    color: #294150;
}

.product_description .rows{
     border-top: 1px solid #d3dddb;
     padding: 10px 10px 10px 0;
     width: 100%;
}
.product_description .rows:first-child{
     border-top: 0px;
}
.sale_sign{
    background: #AF0F0F 0% 0% no-repeat padding-box;
    border: 2px solid #FFFFFF;
    border-radius: 10px;
    text-align: center;
    font: normal normal bold 22px/35px 'Poppins';
    letter-spacing: 0px;
    color: #FFFFFF;
    padding: 5px 20px;
    text-transform: uppercase;
    text-shadow: 1px 0 white;
    letter-spacing: 1px;
    font-weight: bold;
}
.sale_sign p {
    margin:0;
    font-weight: 500;
}
.sale_container{
    display: flex;
    width: 100%;
    justify-content: center;
    margin-top: -20px;
    margin-bottom: -31px;
}
.old_price {
    margin:0;
    text-decoration: line-through;
    font: normal normal 600 30px/37px 'Poppins';
    color: #464646;
}
.new_price{
    margin: -5px 0;
    font: normal normal 600 40px/49px 'Poppins';
    color: #AF0F0F;
}
.small_banner{
    background-color: #0b5561;
    padding: 60px 8%;
}
#multiple_people {
    background-image: url(./../../../images/blog-head.jpg);
    background-position: right;
    background-repeat: no-repeat;
    background-size: 100%;
}
#man_window {
    background-image: linear-gradient(to right, #024f54 20% , transparent),url(./../../../images/man_window.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
#hosting_girl {
    background-image: linear-gradient(to right, #024f54 2% , transparent),url(./../../../images/hosting-girlx2.jpg);
    background-position: 100% 13%;
    background-repeat: no-repeat;
    background-size: 50%;
}
.medium_banner{
    background-color: #024f54;
    padding: 60px 8%;
    min-height: 400px;
}
img.medium_banner_image {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
}
.domain_table tr:nth-child(even){
    background-color: #EFEDED ;
    border: 1px solid #DCDCDC;
}
.domain_table{
    width: 100%;
    background-color: #F6F6F6;
    border-spacing: 0;
    table-layout: fixed;
}
.domain_table td, .domain_table tr {
    word-wrap: break-word;         /* All browsers since IE 5.5+ */
    overflow-wrap: break-word;     /* Renamed property in CSS3 draft spec */
}

.domain_table .blue_button{
    margin:0px;
}
.domain_table .light_blue_button {
    max-width: none;
}
.domain_table td {
    padding:10px 20px;
}
.domain_table > tbody > tr > td:first-child,
.domain_table > tbody > tr > td:nth-child(3) {
    text-align: left;
    font: normal normal normal 22px/40px 'Poppins';
    letter-spacing: 0px;
    color: #7C7C7C;
    opacity: 1;
}
.domain_table > tbody > tr > td:nth-child(2) {
    text-align: left;
    font: normal normal normal 22px/40px 'Poppins';
    letter-spacing: 0px;
    color: #BABABA;
    opacity: 1;
}
.available {
    color: #00838C!important;
}
.domain_list .gray_button {
    min-width: 439px;
    text-align: center;
    font: normal normal normal 25px/30px 'Poppins';
    border-radius: 50px;
    letter-spacing: 0px;
    color: #868B8B;
    padding:25px;
}
.banner_button {
    flex-basis: fit-content;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: flex-start;
    flex-grow: 0;
}
.banner_button p {
    font: normal normal normal 30px/37px 'Poppins';
    letter-spacing: 0px;
    color: #FFFFFF;
    opacity: 1;
}
.banner_button .plain_white_button {
    text-align: center;
    font: normal normal bold 30px/37px 'Poppins';
    letter-spacing: 0px;
    color: #00838C;
    opacity: 1;
    padding: 20px 80px;
}

.medium_container .blue_button {
    /*width:300px;*/
}
.medium_container{
    box-shadow: 0px 3px 6px #B5B5B529;
    border: 1px solid #E6E6E6;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border-radius: 14px;
    padding: 40px;
    transition: padding-left 0.5s;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex-basis: 37%;
}
.medium_container h5{
    font: normal normal 600 25px/40px 'Poppins';
    color: #00838C;
    margin:0;
}
.medium_container.variation {
    box-shadow: -20px 18px #EEEEEE;
    border: 1px solid #CBD6E2;
    min-width: 400px;
}
#email_hosting_selected_price,
#web_hosting_selected_price {
    margin:0;
    padding-top: 0;
}
.select_white {
    background: transparent;
    border: 1px solid #D5D5D5;
    border-radius: 8px;
    opacity: 1;
    width: 100%;
    padding: 20px;
    font: normal normal normal 25px/35px 'Poppins';
    letter-spacing: 0px;
    color: #7C7C7C;
    position: relative;
    appearance: none;
    z-index: 2;
}
.hh {
    position:absolute;
    top:22px;
    right:30px;
    color:grey;
    z-index: 1;
    }
.sel {
    position: relative; 
    width: 100%;
}
#select_products_list {
    background-color: white;
    margin-bottom: 20px;
}
.select_products_list {
    display: none;
}
.select_products_list .hh {
    color: #00838C;
    z-index: 2;
}
.text_align_right {
    text-align: right;
}
.text_align_center {
    text-align: center;
}
.border {
    border: 1px solid #D9DEE1;
}
.buttons {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}
 .no_gap {
    gap: 0!important;
}
 .inner_grid_smaller_gap,   .gap_10{
    gap:10px;
}
 .gap_20{
    gap:20px;
}
 .inner_grid_medium_gap,   .gap_40 {
    gap:40px;
}
 .inner_grid_big_gap,  .big_gap,   .gap_60 {
    gap:60px;
}
 .container_bigger_gap,  .bigger_gap,   .gap_80 {
    gap:80px;
}
 .gap_100{
    gap: 100px;
}
.full_width {
    width: 100%;
}
.container_text_img {
    display: flex;
    flex-grow: 1;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 40px;
    flex-basis: 47%;
}
.container_text_right,
.container_text_left {
    width: 30%;
}
.container_text_right {
    padding: 80px 80px 80px 40px;
}
.container_text_left {
    padding: 80px 60px 80px 80px;
}
.small_container_text_img .container_img{
    flex-basis: 30%;
    min-width: 200px;
    max-width: 300px;
}
.small_container_text_img .container_text {
    width: 45%;
    min-width: 40%;
} 
.container_text_img .container_text {
    flex-basis: 52%;
} 
.square {
    border-radius: 0!important;
}

.grey_box_shadow {
    box-shadow: -20px 20px 0 6px #EEEEEE;
}
.cyan.container_text_img {
    background: #aed139 0% 0% no-repeat padding-box;
    border-radius: 30px;
    height: 100%;
}
.blue.container_text_img {
    background: #294150 0% 0% no-repeat padding-box;
    border-radius: 30px;
    height: 100%;
}

.container_text_img .container_img {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    flex-basis: 30%;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    position: relative;
}

.container_background {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}
.right_round_border .container_background{
    border-radius: 0 30px 30px 0;
}
.left_round_border .container_background{
    border-radius: 30px 0 0 30px;
}

.green.colored_container{
    background-color: #82DD6A;
}
.light_blue.colored_container{
    background-color: #1DD1EC;
}
.cyan.colored_container {
    background-color: #19AA93;
}
.no_padding_top_bottom {
    padding-top: 5px;
    padding-bottom: 5px;
}
.scroll {
    overflow-x: auto; /* show scroll bar when needed */ 
    width: 100%;
}
#table_domain_prices td{
    text-align: left;
    width: 100px;
}

.card {
    display: flex;
    gap: 10px;
    flex-direction: column;
    padding: 40px 80px;
    border-radius: 20px;
    background-color: #154a5f;
    width: 100%;
    min-height: 120px;
    margin-top: -120px;
    box-shadow: 0px 3px 6px #00000029;
    justify-content: center;
}
.required:after {
    content:" *";
    color: red;
  }
  /* Set the size of the div element that contains the map */
#map {
    height: 400px; /* The height is 400 pixels */
    width: 100%; /* The width is the width of the web page */
    margin-top: 40px;
}
.cookie_compliance_bar {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}
img.mini_logo {
    width: 15px;
    margin-top: 8px;
}
.logo_text {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
}
.product_table {
    width: 100%;
    transform: translate3d(0, 0, 0);
    border-spacing: 0;
    font: normal normal normal 14px/30px 'Poppins';
    table-layout: auto;
}
.product_table p{
    font: normal normal normal 14px/30px 'Poppins';
    color: #22303A;
}
.product_table .light_blue_button {
    padding: 10px 40px;
    width: -moz-fit-content;
    width: fit-content;
    font: normal normal normal 14px/30px 'Poppins';
}
.product_table tr{
    background-color: white ;
}

.product_table tr:nth-child(even){
    background-color: #F3F4F5 ;
}
.product_table td {
    text-align: left;
    padding: 20px;

    vertical-align: top;
    width: 100px;
}
.product_table tr:not(:last-child) td:not(:first-child), .product_table tr th:not(:first-child){
    padding-left: 60px;
}
.product_table th {
    text-align: left;
    padding: 20px;

    color: #00838C;
}
.product_table tr:last-child td:first-child {
    border-radius: 0 0 0 15px;
}
.product_table tr:last-child td:last-child {
    border-radius: 0 0 15px 0;
}
.product_table th:first-child {
    border-radius: 15px 0 0 0;
}

.product_table th:last-child {
    border-radius: 0 15px 0 0;
}
.product_table th:not(:first-child),
.product_table tr td:not(:first-child){
    border: 1px solid #C9CACA;
    border-style: none none none solid;
}
.container_product_table {
    width: 100%;
}

.inner_grid.border{
    border: 1px solid #C9CACA;
    border-radius: 15px;
  }
.bg_grey {
    background-color: #F3F4F5;
}
.bg_white {
    background-color: white;
}
.absolute {
    position: absolute;
}
.domain_container {
    display: flex;
    width: 100%;
}
.paragraph img {
    width: 200px;
    height: auto;
}
/* The Modal (background) */
 .modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 3; /* Sit on top */
    padding-top: 141px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  }
  
  /* Modal Content */
  .modal_content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    border: 1px solid #888;
    max-width: 1300px; 
    padding: 60px;
  }
  
  /* The Close Button */
  .icon_close {
    color: #aaaaaa;
    font-size: 47px;
    font-weight: bold;
    position: absolute;
    right: 30px;
    top: 15px;
  }
  
  .icon_close:hover,
  .icon_close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
  }

  .contact_form {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .contact_form .line {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
  }

  .contact_form .line .column, .column {
    flex-basis: 48%;
    flex-grow: 1;
    display: flex;
    gap: 15px;
    flex-direction: column;
  }
  /* End Contact */
  /* Start FAQ */
  .faq-content {
    width: 100%;
  }
  
  .faq-question {
    padding: 20px 0 37px;
    border-bottom: 1px solid #B8B8B8;
  }
  
 .faq-content .panel-title p {
    font-size: 24px;
    position: relative;
    margin: 0;
    padding: 17px 10px 0 64px;
    display: block;
    cursor: pointer;
    color: #00838C;
    font: normal normal 300 30px/34px 'Poppins';
  }
  
  .faq-content .panel-content {
    font-size: 20px;
    padding: 0px 14px;
    margin: 0 40px;
    height: 0;
    overflow: hidden;
    z-index: -1;
    position: relative;
    opacity: 0;
    -webkit-transition: .4s ease;
    -moz-transition: .4s ease;
    -o-transition: .4s ease;
    transition: .4s ease;
    color: #7C7C7C;
    font: normal normal normal 18px/35px 'Poppins';
  }
  
  .faq-content .panel:checked ~ .panel-content{
    height: auto;
    opacity: 1;
    padding: 15px 26px 0;
  }
  
  .plus {
    position: absolute;
    margin-top: 12px;
    z-index: 5;
    font-size: 57px;
    -webkit-user-select: none;    
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    -webkit-transition: .2s ease;
    -moz-transition: .2s ease;
    -o-transition: .2s ease;
    transition: .2s ease;
    color: #00838C;
    cursor: pointer;
  }
  
  .faq-content .panel:checked ~ .panel-title .plus {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  
  .faq-content .panel {
    display: none;
  }
  /* End FAQ */

  /* search result page */
  .search_result {
    padding: 40px 0;
    gap: 20px;
    display: flex;
    flex-direction: column;
    border-bottom: 2px solid #DEDEDE;
}
.result_title {
    color: #27B8B8;
    font: normal normal 600 30px/37px 'Poppins';
}

.container_search {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    padding-bottom: 12px;
    border-bottom: 1px solid #707070;
}
.no_max_width {
    max-width: none;
}
  #modal_result, #contact_modal_result{
    display: none;
}

input#search_result_input {
    flex-grow: 1;
    font: normal normal 600 40px/49px 'Poppins';
    letter-spacing: 0px;
    color: #284151;
    background-color: white!important;
    outline: none;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;
}
i.fa.fa-search.search_result_icon {
    background-color: #27B8B8;
    color: white;
    padding: 10px;
    border-radius: 30px;
    -webkit-text-stroke: 2px #27B8B8; /* to make the font look thinner */
}
#pagination {
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: center;
    gap: 5px;
}

p.pagination_number {
    background-color: #CDF4F4;
    width: 40px;
    text-align: center;
    border-radius: 8px;
    color: #27B8B8;
    padding: 5px;
    cursor: pointer;
}

p.pagination_next, p.pagination_previous {
    background-color: #CDF4F4;
    padding: 5px 20px;
    border-radius: 8px;
    color: #27B8B8;
    cursor: pointer;
}

p.pagination_number.active {
    background-color: #27B8B8;
    color: white;
}

div#search_results {
    flex-grow: 1;
    width: 100%;
}


/* End specifi css whmcs*/
@media only screen and (max-width: 1024px) {

    .product_table {
        transform: inherit;
    }
    .product_table tr td {
        height: 150px;
        line-height: 25px;
        width: 140px;
    }
    .product_table th.headcol {
        height: 100px;
    }
    .headcol {
        position: absolute;
        width: 140px;
        left: 0;
        top: auto;
        border: none!important;
        border-top-width: 1px;
    }
      
    .container_product_table {
        border-radius: 0 20px 20px 0;
        overflow-x: scroll;
        margin-left: 140px;
        overflow-y: visible;
        padding: 0;
        border-left: 2px solid #dfdfdf;
    }    
    .inner_grid.border{
        border: 1px solid #C9CACA;
        border-radius: 20px;
    }
    .product_table tr:not(:last-child) td:not(:first-child),
    .product_table tr th:not(:first-child) {
        padding-left: 40px;
    }
    .product_table .light_blue_button {
        padding: 5px 15px;
        width: -moz-fit-content;
        width: fit-content;
        font: normal normal normal 14px/30px 'Poppins';
    }
    .product_table th:first-child {
        border-radius: 20px 0 0 0;
    }
    .product_table tr:last-child td:first-child {
        border-radius: 0 0 0 20px;
    }
    .product_table tr td:nth-child(2),
    .product_table th:nth-child(2){
        border-left: none;
    }
}

@media only screen and (max-width: 1400px) {
    .nav_support_buttons{
        display: none;
    }

}

@media only screen and (max-width: 1336px) {
.special_offer {
    flex-basis: 100%;
}

}
@media only screen and (max-width: 1330px) {
    .menu__box {
        overflow: scroll;
    }
    .search{
        display: none;
    }
}
@media only screen and (max-width: 1314px) {
    #nav_border2 {
        border-color: transparent;
    }
    .inner_grid {
        gap:30px;
    }
     .container_bigger_gap,   .big_gap,   .bigger_gap {
        gap: 80px;
    }

    .flex_direction_reverse_mobile {
        flex-direction: column-reverse;
    }
}

@media only screen and (max-width: 1314px) {
    .main_banner_bridge .domain_text {
        min-width: 350px;
    }

}

    
@media only screen and (max-width: 991px) {
    .banner_button{
        align-items: flex-start;
    }
}
@media only screen and (max-width: 990px) {
     .container_bigger_gap,   .big_gap,   .bigger_gap {
        gap: 40px;
    }
}

@media only screen and (max-width: 926px) {
    .select_products_list {
        display : block;
    }
    .products_list {
        display: none;
    }
}
@media only screen and (max-width: 970px) {

    .nav_login_register{
        display: none;
    }

}
@media only screen and (max-width: 840px) {
    #nav_border2 {
        display: none;
    }
}
@media only screen and (max-width: 836px) {
    #nav_border1 {
        border-color: transparent;
    }
}
@media only screen and (max-width: 836px) {
    #nav_border1 {
        display: none;
    }
}

@media only screen and (max-width: 1200px) {
    .card .Interactive_main_statement_form {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: nowrap;
        flex-direction: column;
    }
    .card .Interactive_main_statement_search{
        height: 100%;
    }
    .card .domain_text{
        border-radius: 10px ;
        margin-bottom: 10px;
    }
    
    .card .Interactive_main_statement_form input[type=submit]{
        border-radius: 10px ;
        padding:20px;
        text-align: center;
    }

    .card .Interactive_main_statement_form.bigger_width input[type=submit] {
        width:100%;
        max-width: unset;
    }

}

@media only screen and (max-width: 930px) {
    .main_banner_bridge .Interactive_main_statement_form {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: nowrap;
        flex-direction: column;
    }

    .main_banner_bridge .domain_text{
        border-radius: 10px ;
        margin-bottom: 10px;
        min-width: 70%;
    }
    
    .main_banner_bridge .Interactive_main_statement_form input[type=submit]{
        border-radius: 10px ;
        padding:20px;
        text-align: center;
        min-width: 70%;
    }

    .main_banner_bridge .Interactive_main_statement_form.bigger_width input[type=submit] {
        width:100%;
        max-width: unset;
    }

}

.main_banner_bridge h1 {
	font: normal normal 500 40px/39px 'Poppins';
}

@media only screen and (max-width: 600px) {
    .medium_banner{
        height:335px;
    }
     h5 {
        font-size: 20px;
    }
    .main_banner_bridge_small .Interactive_main_statement_form {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: nowrap;
        flex-direction: column;
    }

    .main_banner_bridge_small .domain_text{
        border-radius: 10px ;
        margin: 10px;
        min-width: 0;
        width: 100%;
    }
    
    .main_banner_bridge_small .Interactive_main_statement_form input[type=submit]{
        border-radius: 10px ;
        padding:20px;
        text-align: center;
        width: 100%;
        min-width: 0;
    }
    #subtitle_main_banner {
        display:none;
    }
     .product_suggestion {
        padding: 20px 3%;
    }
    .not_sure_text>p {
        font: normal normal normal 18px/45px 'Poppins';
    }
    .not_sure_text>h4 {
        font: normal normal normal 30px/37px 'Poppins';
    }
    .main_banner_bridge h1 {
        font-family: 'Poppins', sans-serif;
        font-weight: 700;
        font-size: 20px;
        line-height: 24px;
        text-align: left;
        margin-bottom: 0;
        width: 95%;
    }

    .plain_white_button, .banner_button .plain_white_button{
        font: normal normal normal 18px/15px 'Poppins';
        padding: 20px 40px;
    }
    .container_text>h4, .top_selling_products h4{
        font: normal normal normal 25px/37px 'Poppins';
    }
    .top_selling_products h4{
        margin-top: 20px;
    }
    .blue_link {
        font: normal normal normal 15px/19px 'Poppins';
    }
    .testimonial_content {
        font: normal normal normal 20px/40px 'Poppins';
    }
    .left_separation{
        margin-top:10px;
    }
    .logo_margin{
        padding: 0;
        text-align: center;
    }
    .mySlides {
        min-height: 520px; 
    }
    .banner_button a {
        font: normal normal bold 20px/37px 'Poppins';
        padding: 10px 20px;
    }
    .heading .title {
        font: normal normal bold 50px/40px 'Poppins';
        margin: 20px 0;
    }
    .heading .surtitle_top {
        font: normal normal normal 30px/40px 'Poppins';
    }
    .heading .subtitle_bottom {
        font: normal normal normal 20px/40px 'Poppins';
    }
    .domain_table > tbody > tr > td{
        font-size: 18px!important;
    }
    .light_blue_button,
    .domain_table .blue_button{
        font-size: 15px;
        padding: 10px;
    }
    .domain_table td {
        padding: 5px 10px;
    }
    .domain_list .gray_button {
        min-width: auto;
        padding: 15px 40px;
        font-size: 18px;
        margin: 0;
    }
    .select_white {
        font-size: 18px;
    }
    .banner_button {
        margin-top: 0;
    }
     .container {
        gap:20px;
    }
     .container_bigger_gap,  .big_gap,  .bigger_gap,  .gap_80 {
        gap: 60px;
    }
     .gap_60 {
        gap: 60px;
    }
     .gap_100 {
        gap: 100px;
    }
}

@media only screen and (max-width: 1024px) {
    .not_sure_text {
        min-height: 0;
    }
    .second_nav{
        display:none;
    }
    .hosting_suggestion{
        min-width: 0;
    }
    body > .contact_container {
        margin-top: 76px;
    }
    .main_banner, .first_container{
        margin-top: 76px;
    }
    .banner .heading .title {
        margin-top: 76px;
    }
     h1 {
        font: normal normal bold 50px/50px 'Poppins';
    }
     h3 {
        font: normal normal 600 25px/35px 'Poppins';
    }
    p, label, input, textarea, ul, li {
        font: normal normal normal 18px/30px 'Poppins'
    }
    .smaller_paragraph {
        font: normal normal normal 16px/30px 'Poppins'
    }
}
@media only screen and (max-width: 1190px) {
    .container_text_img .container_img {
        min-height: 263px;
        flex-basis: 100%;
        height: auto;
    }
    .cyan.container_text_img .container_text, .blue.container_text_img .container_text {
        width: 100%;
    }
    .right_round_border .container_background{
        border-radius: 0 0 30px 30px;
    }
    .left_round_border .container_background{
        border-radius: 30px 30px 0 0;
    }
    .container_text_right {
        padding: 10px 40px 60px 40px;
    }
    .container_text_left {
        padding: 40px 40px 10px 40px;
    }
}

@media only screen and (max-width: 768px) {
    .nav_email{
        display: none;
    }
    #menu_toggle_label{
        display: none;
    }
}

@media only screen and (max-width: 768px) {
    .menu_content{
        width: 100%;
    }
}

@media only screen and (max-width: 800px) {

    .card .domain_text{
        font-size: 15px;
        padding: 25px 25px;
    }
    .card .Interactive_main_statement_form input[type=submit] {
        font-size: 15px;
        padding: 10px;
        height: 50px;
    }
    .card .domain_text::placeholder { /* Most modern browsers support this now. */
        font-size: 15px;
    }
    .card .product_card{
        min-width: 250px;
    }
    .card {
        padding:20px;
    }
}
@media only screen and (max-width: 753px) {
    .left_separation{
        border:1px solid transparent;
        margin-top:0;
        padding: 0;
    }
}

@media only screen and (max-width: 700px) {
 h1 {
    font-size: 40px;
}
 h3 {
    font-size: 23px;
}
p, .heading .subtitle, .banner_button p {
    font-size: 18px;
}
p.smaller_paragraph {
    font-size: 16px;
}
}

@media only screen and (max-width: 660px) {
    #table_domain_prices td {
        text-align: center;
        width: auto;
        display: block;
    }
    #table_domain_prices tr {
        padding: 20px 0;
        display: block;
    }
}


@media only screen and (max-width: 714px) {
    .container_slider {
        min-width: 400px;
    }
}
@media only screen and (max-width: 665px) {
    #domains_domain_page .domain_text{
        min-width: 0;
    }
}
@media only screen and (max-width: 400px) {

    #domains_domain_page .domain_text{
        padding: 20px 0 20px 20px;
        font-size: 16px;
    }

    input#button_submit_domain {
        font-size: 12px;
        /*height: 40px;*/
    }
    #domains_domain_page #button_submit_domain {
        height: 40px;
    }

}
@media only screen and (max-width: 602px ){
    .certification .inner_grid {
        justify-content: center;
    }
    .medium_container.variation {
        min-width: unset;
        width: 100%;
    }
}
@media only screen and (max-width: 550px) {

    
    .not_selectable{
        display: none;
    }
    .medium_container .blue_button {
        width: auto;
    }
}
@media only screen and (max-width: 550px) {
    .medium_banner {
        height: 377px;
    }
    .main_banner_bridge_small #button_submit_domain {
        height: 52px;
        line-height: 14px;
    }

    .domain_text, .main_banner_bridge .domain_text{
        font-size: 15px;
        height: 50px;
        padding: 25px 20px;
        width: 100%;
        min-width: 0px;
    }
    .Interactive_main_statement_form input[type=submit], .main_banner_bridge .Interactive_main_statement_form input[type=submit]{
        font-size: 15px;
        padding: 10px;
        height: 50px;
        width: 100%;
        min-width: 0px;
    }
    .domain_text::placeholder { /* Most modern browsers support this now. */
        font-size: 15px;
    }
    .product_card{
        min-width: 250px;
    }
    .medium_container {
        padding: 20px;
    }
}

@media only screen and (max-width: 480px){
    .card {
        margin-top: -104px;
    }

}
@media only screen and (max-width: 470px){
    .product_card_content {
        padding: 25px 25px 0px 25px;
    }
    .product_card_content h5{
        font: normal normal 600 22px/34px 'Poppins';
    }
    .product_card_content .price-h2{
        font: normal normal 600 28px/37px 'Poppins'
    }
    .product_card_content .per-user-p {
        font: normal normal 300 25px/37px 'Poppins';
    }
     .container {
        padding: 40px 6%;
    }
     .container_reduced, .container_reduced{ 
        padding: 20px 6%;
    }
    .sale_sign {
        font-size: 18px;
        margin-bottom: 20px;
    }
     .container_bigger_gap,   .big_gap,   .bigger_gap {
        gap: 40px;
    }
    .not_sure_text {
        min-height: 0;
    }
}
@media only screen and (max-width: 410px){
    .container_slider {
        min-width: 300px;
    }  
}

@media only screen and (max-width: 383px) {
    .medium_banner {
        height: 440px;
    }
}
@media only screen and (max-width: 360px){
    .container_slider {
        min-width: 250px;
    }
}
@media only screen and (max-width: 341px){
    .container_slider {
        min-width: 200px;
    }
}
@media only screen and (max-width: 330px) {
    .quick_links .ql_column {
        min-width: 0;
    }

}

@media only screen and (max-width: 321px) {
    .medium_banner {
        height: 480px;
    }
}

@media only screen and (max-width: 450px){
    .medium_container h5 {
        font-size: 20px;
    }
    .select_white {
        font-size: 16px;
        padding: 10px;
    }
    .hh {
        top: 20px;
        right: 12px;
        font-size: larger!important;
    }
    p, .heading .subtitle {
        font-size: 18px;
    }
    .container_text>h4, .top_selling_products h4 {
        font-size: 25px;
    }
}
@media only screen and (max-width: 400px){
    .medium_container h5 {
        font-size: 18px;
    }
    .select_white {
        font-size: 12px;
        padding: 10px;
    }
    .hh {
        top: 20px;
        right: 12px;
        font-size: larger!important;
    }
    p, .heading .subtitle, li {
        font-size: 16px;
    }
    .container_text>h4, .top_selling_products h4 {
        font-size: 20px;
    }
}

@media only screen and (max-width: 440px){
    .card .domain_text{
        font-size: 12px;
    }
    .card .Interactive_main_statement_form input[type=submit] {
        min-width: 200px;
        font-size: 12px;
        padding: 5px
    }
    .card .domain_text::placeholder { /* Most modern browsers support this now. */
        font-size: 12px;
     }
     .card {
        padding: 10px;
     }
}

@media only screen and (max-width: 360px) {
.twitter_container {
    display: none;
}

}

@media only screen and (max-width: 330px) {
    .domain_text{
        font-size: 12px;
    }
    .Interactive_main_statement_form input[type=submit] {
        font-size: 12px;
        padding: 5px
    }
    .domain_text::placeholder { /* Most modern browsers support this now. */
        font-size: 12px;
     }
    .hosting_suggestion, .backup_suggestion{
        padding:20px;
    }
    .product_card {
        min-width: 150px;
    }
    .product_card_bottom {
        padding: 15px 28px;
    }
    .product_card_content{
        padding: 20px 20px 0px 20px;
    }
    .product_card_content .per-user-p {
        font: normal normal 300 20px/37px 'Poppins';
    }
    .blue_button {
        font: normal normal normal 15px/24px 'Poppins';
    }
    .product_card_content h5 {
        font: normal normal 600 18px/34px 'Poppins';
    }
    .product_description td {
        font-size: 12px;
        line-height: 18px;
    }
}


.free-domain-tag{
  position:absolute;
  top:-3px;
  right:0;
  font:600 13px/1 'Poppins',sans-serif;
  color:#111;
  padding:8px 18px;
  background:linear-gradient(160deg,#ffe34d 0%,#ffc400 52%,#ffaa00 100%);
  border-radius:0 30px 0 30px;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.2));
  z-index:2;
  overflow:hidden;                
}
/* corner fold */
.free-domain-tag::before{
  content:"";
  position:absolute;
  top:0; right:0;
  border:5px solid transparent;
  border-right-color:#d99400;
}
/* continuous shine strip */
.free-domain-tag::after{
  content:"";
  position:absolute;
  top:0; left:-100%;
  width:60%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);
  transform:skewX(-20deg);
  pointer-events:none;
  animation:shine 2.2s linear infinite;
}
@keyframes shine{
  0%   {left:-100%;}
  100% {left:160%;}
}
.product_card{position:relative;}

@media (max-width: 400px){
  .product_card { overflow: visible; }
  .free-domain-tag {
    top: -2px;
    right: 0;
    left: auto;
    transform: none;
    font-size: 11px;
    padding: 7px 18px;
    border-radius: 0 30px 0 30px !important;
    min-width: 110px;
    max-width: 98vw;
    white-space: nowrap;
    box-sizing: border-box;
  }
  .free-domain-tag::before { display: none; }
  /* Do NOT hide ::after for shine! */
}
@media (max-width: 360px){
  .free-domain-tag {
    font-size: 10px;
    min-width: 80px;
    padding: 6px 10px;
  }
}

/* ---------- push cards up on hover ---------- */
.product_card {
  transition: transform .20s ease;
}
.product_card:hover {
  transform: translateY(-18px);
}


<!-- VPS Configurator Styles -->
<style>
/* ===== VPS CONFIGURATOR STYLES ===== */
.vps-configurator-wrap {
    max-width: 800px;
    margin: 0 auto;
    padding: 3rem 2rem;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.vps-configurator-wrap h2 {
    margin-top: 0;
    margin-bottom: 0.5rem;
}

.configurator-content {
    margin-top: 2rem;
}

.slider-group {
    margin: 2rem 0;
    padding: 1.5rem;
    background: #f8f9fa;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.slider-group:hover {
    background: #f0f2f5;
    box-shadow: 0 2px 8px rgba(0, 102, 255, 0.1);
}

.slider-group label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    margin-bottom: 1rem;
    font-size: 1.1rem;
    color: #333;
}

.slider-label {
    color: #0066ff;
}

.spec-val {
    color: #28a745;
    font-size: 1.2rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    background: #e8f5e9;
    border-radius: 4px;
}

<style>
/* ===== VPS CONFIGURATOR STYLES ===== */
.vps-configurator-wrap {
    max-width: 900px;
    margin: 0 auto;
    padding: 3rem 2rem;
}

.vps-configurator-wrap h2 {
    margin-top: 0;
    margin-bottom: 0.5rem;
}

/* Layout Container */
.configurator-layout {
    margin: 2rem 0;
}

/* Sliders Container - The Box on Left */
.sliders-container {
    background: #ffffff;
    border-radius: 12px;
    padding: 2.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #e8e8e8;
}

/* Individual Slider Groups */
.slider-group {
    margin: 1.5rem 0;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #f0f0f0;
}

.slider-group:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.slider-group label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    margin-bottom: 1rem;
    font-size: 1rem;
    color: #333;
}

.slider-label {
    color: #0066ff;
    font-size: 1.05rem;
}

.spec-val {
    color: #0066ff;
    font-size: 1.1rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    background: #e6f2ff;
    border-radius: 6px;
}

/* Range Slider Styling */
input[type=range] {
    width: 100%;
    -webkit-appearance: none;
    height: 8px;
    background: linear-gradient(to right, #0066ff 0%, #0066ff 0%, #e8e8e8 0%, #e8e8e8 100%);
    border-radius: 4px;
    outline: none;
    margin: 0.5rem 0;
    transition: all 0.3s ease;
}

input[type=range]:hover {
    background: linear-gradient(to right, #0052cc 0%, #0052cc 0%, #d8d8d8 0%, #d8d8d8 100%);
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    background: #0066ff;
    border: 3px solid #ffffff;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 102, 255, 0.3);
    transition: all 0.2s ease;
}

input[type=range]::-webkit-slider-thumb:hover {
    background: #0052cc;
    transform: scale(1.15);
    box-shadow: 0 3px 10px rgba(0, 102, 255, 0.5);
}

input[type=range]::-moz-range-thumb {
    width: 22px;
    height: 22px;
    background: #0066ff;
    border: 3px solid #ffffff;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 102, 255, 0.3);
    transition: all 0.2s ease;
}

input[type=range]::-moz-range-thumb:hover {
    background: #0052cc;
    transform: scale(1.15);
    box-shadow: 0 3px 10px rgba(0, 102, 255, 0.5);
}

<!-- Replace the entire VPS CONFIGURATOR SECTION -->

<!-- ===== VPS CONFIGURATOR SECTION ===== -->
<section class="container container_grey gap_40">
    <div class="inner_grid">
        <div class="vps-configurator-wrap-compact">
            <h2 class="blue text-center">Configure Your Perfect Cloud Server</h2>
            <p class="text-center subtitle compact-subtitle">
                Customize your server resources to match your exact requirements.
            </p>

            <div class="configurator-layout-compact">
                <!-- LEFT SIDE: Sliders Box -->
                <div class="sliders-container-compact">
                    <!-- CPU Slider -->
                    <div class="slider-group-compact">
                        <label for="cpu-slider">
                            <span class="slider-label-compact">
                                <svg class="icon-inline" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <rect x="4" y="4" width="16" height="16" rx="2"/>
                                    <rect x="9" y="9" width="6" height="6"/>
                                    <line x1="9" y1="1" x2="9" y2="4"/>
                                    <line x1="15" y1="1" x2="15" y2="4"/>
                                    <line x1="9" y1="20" x2="9" y2="23"/>
                                    <line x1="15" y1="20" x2="15" y2="23"/>
                                    <line x1="20" y1="9" x2="23" y2="9"/>
                                    <line x1="20" y1="14" x2="23" y2="14"/>
                                    <line x1="1" y1="9" x2="4" y2="9"/>
                                    <line x1="1" y1="14" x2="4" y2="14"/>
                                </svg>
                                CPU Cores
                            </span>
                            <span class="spec-val-compact" id="cpu-val">0.5</span>
                        </label>
                        <input type="range" id="cpu-slider" min="0.5" max="12" step="0.5" value="0.5">
                        <div class="slider-markers-compact">
                            <span>0.5</span>
                            <span>12</span>
                        </div>
                    </div>

                    <!-- RAM Slider -->
                    <div class="slider-group-compact">
                        <label for="ram-slider">
                            <span class="slider-label-compact">
                                <svg class="icon-inline" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <path d="M2 10h20M2 14h20M6 6h12v12H6z"/>
                                </svg>
                                RAM Memory
                            </span>
                            <span class="spec-val-compact" id="ram-val">0.5 GB</span>
                        </label>
                        <input type="range" id="ram-slider" min="0.5" max="32" step="0.5" value="0.5">
                        <div class="slider-markers-compact">
                            <span>0.5 GB</span>
                            <span>32 GB</span>
                        </div>
                    </div>

                    <!-- Disk Slider -->
                    <div class="slider-group-compact">
                        <label for="disk-slider">
                            <span class="slider-label-compact">
                                <svg class="icon-inline" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <ellipse cx="12" cy="5" rx="9" ry="3"/>
                                    <path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/>
                                    <path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/>
                                </svg>
                                SSD Storage
                            </span>
                            <span class="spec-val-compact" id="disk-val">10 GB</span>
                        </label>
                        <input type="range" id="disk-slider" min="10" max="300" step="10" value="10">
                        <div class="slider-markers-compact">
                            <span>10 GB</span>
                            <span>300 GB</span>
                        </div>
                    </div>

                    <!-- Transfer Slider -->
                    <div class="slider-group-compact">
                        <label for="transfer-slider">
                            <span class="slider-label-compact">
                                <svg class="icon-inline" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <polyline points="17 11 12 6 7 11"/>
                                    <polyline points="17 18 12 13 7 18"/>
                                    <line x1="12" y1="6" x2="12" y2="18"/>
                                </svg>
                                Monthly Transfer
                            </span>
                            <span class="spec-val-compact" id="transfer-val">100 GB</span>
                        </label>
                        <input type="range" id="transfer-slider" min="100" max="5000" step="100" value="100">
                        <div class="slider-markers-compact">
                            <span>100 GB</span>
                            <span>5 TB</span>
                        </div>
                    </div>

                    <!-- Price Display -->
                    <div class="price-display-compact">
                        <div class="price-label-compact">ESTIMATED MONTHLY COST</div>
                        <div class="price-amount-lime-compact" id="total-price">�0.00</div>
                        <div class="price-note-compact">(VAT included)</div>
                    </div>
                </div>
            </div>

            <!-- Configuration Summary - Compact Grid -->
            <div class="config-summary-compact">
                <h3>Your Configuration Includes:</h3>
                <div class="config-features-grid">
                    <div class="feature-item">
                        <span class="checkmark">?</span> 99.9% Uptime SLA
                    </div>
                    <div class="feature-item">
                        <span class="checkmark">?</span> Full Root Access
                    </div>
                    <div class="feature-item">
                        <span class="checkmark">?</span> DDoS Protection
                    </div>
                    <div class="feature-item">
                        <span class="checkmark">?</span> Daily Backups
                    </div>
                    <div class="feature-item">
                        <span class="checkmark">?</span> 24/7 Irish Support
                    </div>
                    <div class="feature-item">
                        <span class="checkmark">?</span> Data Center Choice
                    </div>
                </div>
            </div>

            <!-- CTA -->
            <div class="configurator-cta-compact">
                <a class="blue_button" href__="/contact-us">Get Started with This Configuration</a>
                <p class="cta-subtext">Need help choosing? <a href__="/contact-us" class="blue_link">Contact our cloud experts</a></p>
            </div>
        </div>
    </div>
</section>

<!-- NEW: Trust Badges Section -->
<section class="container container_white gap_40">
    <div class="inner_grid">
        <div class="trust-badges">
            <div class="trust-badge">
                <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#7ED321" stroke-width="2">
                    <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
                    <path d="M9 12l2 2 4-4"/>
                </svg>
                <h4>GDPR Compliant</h4>
                <p>Full EU data protection</p>
            </div>
            <div class="trust-badge">
                <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#7ED321" stroke-width="2">
                    <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
                    <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
                </svg>
                <h4>ISO Certified</h4>
                <p>Industry standards met</p>
            </div>
            <div class="trust-badge">
                <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#7ED321" stroke-width="2">
                    <circle cx="12" cy="12" r="10"/>
                    <polyline points="12 6 12 12 16 14"/>
                </svg>
                <h4>99.9% Uptime</h4>
                <p>Guaranteed availability</p>
            </div>
            <div class="trust-badge">
                <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#7ED321" stroke-width="2">
                    <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
                    <circle cx="9" cy="7" r="4"/>
                    <path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
                    <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
                </svg>
                <h4>1000+ Customers</h4>
                <p>Trusted by businesses</p>
            </div>
        </div>
    </div>
</section>

Now here's the COMPACT CSS that makes it fit on one screen:


/* ===== COMPACT VPS CONFIGURATOR STYLES ===== */
.vps-configurator-wrap-compact {
    max-width: 700px;
    margin: 0 auto;
    padding: 1.5rem 1rem;
}

.vps-configurator-wrap-compact h2 {
    margin: 0 0 0.5rem 0;
    font-size: 1.8rem;
}

.compact-subtitle {
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
}

/* Sliders Container - Compact Box */
.sliders-container-compact {
    background: #ffffff;
    border-radius: 10px;
    padding: 1.5rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid #e8e8e8;
}

/* Compact Slider Groups */
.slider-group-compact {
    margin: 1rem 0;
    padding-bottom: 1rem;
    border-bottom: 1px solid #f5f5f5;
}

.slider-group-compact:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.slider-group-compact label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 500;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    color: #333;
}

.slider-label-compact {
    color: #0066ff;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.icon-inline {
    color: #0066ff;
    flex-shrink: 0;
}

.spec-val-compact {
    color: #0066ff;
    font-size: 0.95rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    background: #e6f2ff;
    border-radius: 4px;
}

/* Compact Range Sliders */
input[type=range] {
    width: 100%;
    -webkit-appearance: none;
    height: 6px;
    background: linear-gradient(to right, #0066ff 0%, #0066ff 0%, #e8e8e8 0%, #e8e8e8 100%);
    border-radius: 3px;
    outline: none;
    margin: 0.3rem 0;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    background: #0066ff;
    border: 2px solid #ffffff;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 102, 255, 0.3);
}

input[type=range]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: #0066ff;
    border: 2px solid #ffffff;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 102, 255, 0.3);
}

/* Compact Slider Markers */
.slider-markers-compact {
    display: flex;
    justify-content: space-between;
    margin-top: 0.3rem;
    font-size: 0.75rem;
    color: #999;
}

/* Compact Price Display - LIME GREEN */
.price-display-compact {
    text-align: center;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 2px solid #f0f0f0;
}

.price-label-compact {
    color: #666;
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    letter-spacing: 1px;
}

.price-amount-lime-compact {
    color: #7ED321;
    font-size: 2.8rem;
    font-weight: 600;
    margin: 0.3rem 0;
    line-height: 1;
    text-shadow: 0 2px 4px rgba(126, 211, 33, 0.15);
}

.price-note-compact {
    color: #999;
    font-size: 0.8rem;
    margin-top: 0.3rem;
}

/* Compact Configuration Summary */
.config-summary-compact {
    margin-top: 2rem;
    padding: 1.5rem;
    background: #f8f9fa;
    border-radius: 8px;
    border-left: 3px solid #0066ff;
}

.config-summary-compact h3 {
    margin: 0 0 1rem 0;
    color: #333;
    font-size: 1.1rem;
    font-weight: 500;
}

.config-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.feature-item {
    color: #555;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.checkmark {
    color: #7ED321;
    font-size: 1rem;
    font-weight: bold;
    flex-shrink: 0;
}

/* Compact CTA */
.configurator-cta-compact {
    text-align: center;
    margin-top: 1.5rem;
}

.configurator-cta-compact .blue_button {
    font-size: 1rem;
    padding: 0.85rem 2rem;
    display: inline-block;
}

.cta-subtext {
    margin-top: 0.75rem;
    font-size: 0.85rem;
    color: #666;
}

/* Trust Badges Section */
.trust-badges {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    text-align: center;
    padding: 2rem 0;
}

.trust-badge {
    padding: 1.5rem 1rem;
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid #e8e8e8;
    transition: all 0.3s ease;
}

.trust-badge:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.trust-badge svg {
    margin: 0 auto 1rem;
}

.trust-badge h4 {
    margin: 0 0 0.5rem 0;
    font-size: 1rem;
    color: #333;
}

.trust-badge p {
    margin: 0;
    font-size: 0.85rem;
    color: #666;
}

/* Responsive Design */
@media (max-width: 768px) {
    .vps-configurator-wrap-compact {
        padding: 1rem 0.75rem;
    }

    .vps-configurator-wrap-compact h2 {
        font-size: 1.5rem;
    }

    .sliders-container-compact {
        padding: 1.25rem;
    }

    .price-amount-lime-compact {
        font-size: 2.2rem;
    }

    .config-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .trust-badges {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .trust-badge {
        padding: 1rem 0.75rem;
    }
}

@media (max-width: 480px) {
    .config-features-grid {
        grid-template-columns: 1fr;
    }

    .trust-badges {
        grid-template-columns: 1fr;
    }
}

/* Smooth Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.slider-group-compact {
    animation: fadeIn 0.3s ease forwards;
}

.slider-group-compact:nth-child(1) { animation-delay: 0.1s; }
.slider-group-compact:nth-child(2) { animation-delay: 0.2s; }
.slider-group-compact:nth-child(3) { animation-delay: 0.3s; }
.slider-group-compact:nth-child(4) { animation-delay: 0.4s; }


/* ===== TWO-COLUMN LAYOUT ===== */
.configurator-layout-two-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 0.5rem;
}

/* Configuration Includes Section */
.config-includes-section {
    background: linear-gradient(135deg, #f8fafb 0%, #ffffff 100%);
    border: 1px solid #e1e8ed;
    border-radius: 10px;
    padding: 2rem;
    margin-top: 3rem;
}

.config-includes-title {
    color: #0066ff;
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 1.5rem 0;
    text-align: center;
}

.config-includes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
}

.include-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: #ffffff;
    border-radius: 6px;
    font-size: 0.9rem;
    color: #333;
    font-weight: 500;
    transition: all 0.2s ease;
}

.include-item:hover {
    transform: translateX(5px);
    box-shadow: 0 2px 8px rgba(0, 102, 255, 0.1);
}

.include-item svg {
    flex-shrink: 0;
}

/* CTA Section */
.configurator-cta {
    text-align: center;
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 2px solid #e1e8ed;
}

.cta-button-large {
    display: inline-block;
    padding: 1rem 2.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 102, 255, 0.2);
}

.cta-button-large:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 102, 255, 0.3);
}

.cta-subtext {
    margin-top: 1rem;
    color: #666;
    font-size: 0.9rem;
}

.inline-link {
    color: #0066ff;
    text-decoration: none;
    font-weight: 600;
}

.inline-link:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .config-includes-grid {
        grid-template-columns: 1fr;
    }
    
    .config-includes-section {
        padding: 1.5rem;
    }
    
    .cta-button-large {
        padding: 0.875rem 2rem;
        font-size: 1rem;
    }
}

body {
  margin: 0;
}

/* Banner */
.product-banner {
  width: 100%;
  height: 60vh;
  overflow: hidden;
  position: relative;
}

/* Carousel */
.carousel {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 1s ease-in-out;
}

/* Each slide */
.slide {
  flex: 0 0 100%;
  height: 100%;
  background-size: cover;
  background-position: center; 
  position: relative;
  border-radius: 15px;
}

.slide:nth-child(1) { 
    background-position: 80% center; 
}

.slide:nth-child(2) {
  background-position: 40% 41%; 
}

.slide:nth-child(3) {
  background-position: 65% center; /* Slightly more right */
}

/* Overlay */
.slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
}

/* Info Box */
.info-box {
  position: absolute;
  top: 50%;
  left: 5%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.89);
  padding: 1.5rem 2rem;
  border-radius: 12px;
  max-width: 450px;
  width: 60%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0 6px 25px rgba(0,0,0,0.25);
  z-index: 2;
}

.info-box h2 {
  color: #294150;
  font-size: 1.8rem;
  margin-bottom: 10px;
  line-height: 1.2;
}

.info-box p {
  color: #294150;
  margin-bottom: 15px;
  font-size: 1.1rem;
  line-height: 2;
}

.btn {
  background:#294150;
  color: #fff;
  padding: 10px 25px;
  text-decoration: none;
  border-radius: 30px;
  transition: 0.3s;
  align-self: flex-start;
}

.btn:hover {
  background: #8aa23b;
  color: #fff
}

/* Navigation dots */
.dots {
  position: absolute;
  bottom: 15px;
  width: 100%;
  text-align: center;
  z-index: 5;
}

.dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin: 0 6px;
  background: rgba(255,255,255,0.5);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.3s;
}

.dot.active {
  background: #00838C;
}

/* Responsive */
@media (max-width: 1024px) {
  .info-box {
    width: 70%;
    max-width: 450px;
    padding: 1.2rem 1.5rem;
  }
  .info-box h2 {
    font-size: 1.7rem;
  }
}

@media (max-width: 768px) {
  .product-banner {
    height: 50vh;
  }
  .info-box {
    width: 97%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
  }
  .btn {
    align-self: center;
  }
  .info-box h2 {
    font-size: 1.4rem;
  }
  .info-box p {
    font-size: 1rem;
  }
}


.red-text {
  color: red;
}



.faq-accordion {
max-width: 800px;
margin: 0 auto;
}

.faq-item {
margin-bottom: 15px;
border: 1px solid #e0e0e0;
border-radius: 8px;
overflow: hidden;
background: #fff;
}

.faq-question {
width: 100%;
text-align: left;
padding: 20px 25px;
background: #284151;
border: none;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 16px;
transition: background-color 0.3s ease;
}

.faq-question:hover {
background: #1f3441;
}

.faq-question strong {
flex: 1;
color: #fff;
}

.faq-icon {
font-size: 24px;
font-weight: bold;
color: #aed23b;
margin-left: 15px;
transition: transform 0.3s ease;
}

.faq-question[aria-expanded="true"] .faq-icon {
transform: rotate(45deg);
}

.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease, padding 0.3s ease;
padding: 0 25px;
}

.faq-answer.active {
max-height: 500px;
padding: 20px 25px;
}

.faq-answer p {
margin: 0;
color: #555;
line-height: 1.6;
}

.container_title h1 {
    font-size: 3.2rem;
    color: #294150;
}

.container_title h2 {
    font-size:  1.9rem;
    color: #294150;
    font-weight: 400;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.slide:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 3%;
    gap: 20px;
}

/* Info box stays on left */
.slide:first-child .info-box {
    display: flex;
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    flex-shrink: 0;
    max-width: 380px;
    width: 35%;
}

/* Acronis Products Container - aligned right */
.acronis-products {
    position: relative;
    z-index: 2;
    display: flex;
    gap: 15px;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    flex-grow: 1;
    max-width: 65%;
}

/* Make cards smaller for carousel */
.acronis-products .product_card {
    max-width: 600px;
    width: 30%;
    height:500px;
    min-width: 220px;
    margin-bottom: 0;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .acronis-products .product_card {
        max-width: 260px;
        min-width: 200px;
    }
    
    .slide:first-child .info-box {
        max-width: 320px;
    }
}

@media (max-width: 1024px) {
    .slide:first-child {
        flex-direction: column;
        padding: 30px 20px;
    }
    
    .slide:first-child .info-box {
        width: 90%;
        max-width: 500px;
    }
    
    .acronis-products {
        flex-direction: column;
        align-items: center;
        max-width: 100%;
        overflow-y: auto;
    }

    .acronis-products .product_card {
        width: 90%;
        max-width: 400px;
    }
}

@media (max-width: 768px) {
    .slide:first-child {
        min-height: 80vh;
    }

    .acronis-products {
        padding: 20px 0;
    }

    .acronis-products .product_card {
        width: 100%;
        max-width: 350px;
        min-width: 280px;
    }
}

.info-perfect-for h4 {
    font-size: 2.5rem;
    color: #0066ff;
    margin-top: 15px;
    line-height: 1.5;
}

strong h1 {
    font-size: 1.7rem;
    color: #172e3b;
    line-height: 0.8;
}

.info-intro p {
    font-size: 1.1rem;
    color: #555;
    line-height: 1.8;
    margin-bottom: 15px;
    line-height: norma;
}


/* Cloud Servers Section Specific Styles */
#cloud_servers {
    width: 100%;
}

#cloud_servers .inner_grid {
    max-width: 1400px !important;
    margin: 0 auto;
    padding: 0 20px;
}

#cloud_servers .container {
    width: 100%;
}

#cloud_servers .vps-configurator-wrap-compact {
    max-width: 800px !important;
    width: 100%;
    margin: 0 auto; /* Center the configurator */
}

#cloud_servers .sliders-container-compact {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 2rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Fix label layout to keep value on right */
#cloud_servers .slider-group-compact {
    margin-bottom: 2rem;
}

#cloud_servers .slider-group-compact label {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 0.75rem !important;
    width: 100%;
}

#cloud_servers .slider-label-compact {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
    flex-shrink: 0;
}

#cloud_servers .spec-val-compact {
    font-weight: 600 !important;
    color: #0066ff !important;
    min-width: 90px !important;
    text-align: right !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
    font-size: 1rem !important;
}

.vps-configurator-wrap-compact h2 {
    font-size: 2.5rem !important;
}

/* Make sliders bigger */
#cloud_servers input[type=range] {
    height: 10px !important;
}

#cloud_servers input[type=range]::-webkit-slider-thumb {
    width: 26px !important;
    height: 26px !important;
}

#cloud_servers input[type=range]::-moz-range-thumb {
    width: 26px !important;
    height: 26px !important;
}

/* ========== DEDICATED SERVER POPUP STYLES ========== */

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes slideUp {
    from {
        transform: translateY(30px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Overlay */
#dedicated-server-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease;
    padding: 20px; /* Add padding for mobile */
}

/* Popup Container */
#dedicated-server-popup {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 40px;
    border-radius: 16px;
    max-width: 500px;
    width: 90%;
    max-height: 90vh; /* Prevent popup from being too tall */
    overflow-y: auto; /* Add scroll if content is too long */
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 9999;
    animation: slideUp 0.4s ease;
}

/* Close Button */
.popup-close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    transition: all 0.3s ease;
}

.popup-close-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

/* Icon Container */
.popup-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Title */
.popup-title {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 15px;
    text-align: center;
    color:#ffffff;
}

/* Description Text */
.popup-text {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 30px;
    text-align: center;
    opacity: 0.95;
    color:#ffffff;
}

/* Button Container */
.popup-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Base Button Styles */
.popup-btn {
    padding: 14px 30px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Primary Button */
.popup-btn-primary {
    background: white;
    color: #667eea;
}

.popup-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* Secondary Button */
.popup-btn-secondary {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.popup-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.3);
}

.hidden_element {
    display: none !important;
}

/* Responsive Design */
@media only screen and (max-width: 600px) {
    
    #cloud_servers {
        display: block !important;
    }
    
    /* Keep the rest of the mobile styles */
    #cloud_servers .vps-configurator-wrap-compact {
        padding: 1rem 0.5rem;
        max-width: 100%;
    }
    
    #cloud_servers .sliders-container-compact {
        padding: 1rem;
        width: 100%;
        max-width: 100%;
    }
    
    #cloud_servers .slider-group-compact label {
        font-size: 0.85rem;
    }
    
    #cloud_servers .spec-val-compact {
        font-size: 0.9rem;
        min-width: 70px;
    }
    
    #cloud_servers .container {
        padding: 20px 3%;
    }
}
@media (max-width: 600px) {
    #dedicated-server-popup {
        padding: 30px 20px;
        width: 95%;
    }
    
    .popup-title {
        font-size: 24px;
    }
    
    .popup-text {
        font-size: 15px;
    }
    
    .popup-buttons {
        flex-direction: column;
    }
    
    .popup-btn {
        width: 100%;
    }
    
    .popup-icon {
        width: 56px;
        height: 56px;
    }
}


/* =====================================================================
   VMotion — CSS additions for the SEO fixes
   Revised 25 Aug 2026 against the LIVE css/main.css (96 KB, Poppins).

   An earlier version of this file was written against a stale local copy
   of main.css that still used Montserrat. The current stylesheet uses
   'Poppins' throughout (101 declarations, zero Montserrat), so every
   font shorthand below now matches it.

   ALREADY APPLIED — this block is appended to main.css. Upload this file
   as /css/main.css and nothing further is needed.
   Nothing here overrides an existing rule — it only adds new classes
   (h2.section_heading, h2.banner_subheading, h2.white, p.modal_heading,
   address.footer_nap), each reproducing an appearance the markup used to
   get from a tag that was semantically wrong.

   Every rule carries a real fallback stack. The previous stylesheet's
   `font: ... 'Poppins'` shorthands name no fallback, so if Poppins fails
   to load the browser drops to its default serif. header.php now loads
   Poppins from a <link> so that should not happen, but the fallbacks
   below mean these rules degrade to a sane sans-serif regardless.
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. Section headings promoted from <h3> to <h2>.

   Substantive section headings were marked up as <h3> while <h2> was
   used for prices, which left the document outline claiming the FAQ and
   compliance sections were minor sub-points. The tags are now correct.

   Values below are copied from the live h3 rules, including both
   breakpoints, so promoting the tag changes the outline and not the
   design. Live h3 is:
     h3               { font: normal normal 500 40px/39px 'Poppins'; color:#284151 }
     max-width:1024px { font: normal normal 600 25px/35px 'Poppins' }
     max-width:700px  { font-size: 23px }
   A bare h2 in this stylesheet is 30px/40px #294150 with -1px tracking,
   which is why the promotion needs its own class.
   Specificity 0,1,1 beats the bare `h2` rule.
   --------------------------------------------------------------------- */
h2.section_heading {
    font: normal normal 500 40px/39px 'Poppins', 'Segoe UI', Arial, sans-serif;
    color: #284151;
    letter-spacing: 0;
    line-height: normal;
}

h2.section_heading.white {
    color: #ffffff;
}

h2.section_heading.cyan {
    color: #00838C;
}

@media only screen and (max-width: 1024px) {
    h2.section_heading {
        font: normal normal 600 25px/35px 'Poppins', 'Segoe UI', Arial, sans-serif;
    }
}

@media only screen and (max-width: 700px) {
    h2.section_heading {
        font-size: 23px;
    }
}


/* ---------------------------------------------------------------------
   2. Homepage banner sub-heading.

   The homepage h1 now states the business ("Compliant Web Hosting &
   Cyber Security in Limerick") and the domain-search prompt above the
   search box was demoted from h1 to h2.

   Note this stylesheet defines .white only as h3.white / p.white /
   a.white — there is no h2.white and no bare .white — so an h2 in the
   dark banner would otherwise take the default h2 colour (#294150) and
   read as near-invisible against the near-black background.
   --------------------------------------------------------------------- */
h2.banner_subheading {
    font: normal normal 600 26px/34px 'Poppins', 'Segoe UI', Arial, sans-serif;
    color: #ffffff;
    letter-spacing: 0;
    margin: 0 0 14px;
}

/* Provided for any future h2 placed on a dark ground. */
h2.white {
    color: #ffffff;
}

@media only screen and (max-width: 700px) {
    h2.banner_subheading {
        font: normal normal 600 20px/28px 'Poppins', 'Segoe UI', Arial, sans-serif;
    }
}


/* ---------------------------------------------------------------------
   3. "Please call me" modal heading.

   includes/pls-call-me-modal.php is pulled in from header.php, i.e.
   before the page's own <h1>. Its <h3 class="cyan"> therefore placed a
   heading above the h1 in document order on every page of the site. It
   is now a <p>.

   The colour is set explicitly here: this stylesheet has no bare `.cyan`
   text rule, only `h3.cyan` (#00838C) plus a few background-related
   `.cyan.*` compounds — so a <p class="cyan"> would inherit no colour at
   all. #00838C is the value the old h3.cyan gave it.
   --------------------------------------------------------------------- */
p.modal_heading {
    font: normal normal 500 40px/39px 'Poppins', 'Segoe UI', Arial, sans-serif;
    color: #00838C;
    margin: 0;
}

@media only screen and (max-width: 1024px) {
    p.modal_heading {
        font: normal normal 600 25px/35px 'Poppins', 'Segoe UI', Arial, sans-serif;
        color: #00838C;
    }
}

@media only screen and (max-width: 700px) {
    p.modal_heading {
        font-size: 23px;
    }
}


/* ---------------------------------------------------------------------
   4. Footer name / address / phone block.

   The site previously published no address or phone number anywhere,
   which was the single largest gap for local search. includes/footer.php
   now emits an <address> element; this stylesheet has no address rules
   at all, so without these it would render in the browser default
   italic at the default size.
   --------------------------------------------------------------------- */
address.footer_nap {
    font: normal normal normal 16px/28px 'Poppins', 'Segoe UI', Arial, sans-serif;
    font-style: normal;
    color: #ffffff;
    margin: 0;
}

address.footer_nap strong {
    font-weight: 600;
}

address.footer_nap a {
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 2px;
}

address.footer_nap a:hover,
address.footer_nap a:focus-visible {
    color: #8aa23b;
}

@media only screen and (max-width: 700px) {
    address.footer_nap {
        font-size: 15px;
        line-height: 26px;
    }
}

/* ============================================================
   MANAGED SERVICES PAGE — added 2026-08-26
   Used only by /managed-services (managed-services.php).

   Palette taken from the existing site, no new colours introduced:
     #00838C  primary teal      (icons, labels, prices)
     #0b5561  dark teal         (selected tab + its panel border)
     #294150  slate             (headings)
     #707070  body grey         (NOT #7c7c7c — that is 4.17:1 on white and
                                 fails WCAG AA; #707070 clears it at 4.95:1)
     #e8e8e8  borders
     #f0f2f5  light grey ground
   Font stacks name Poppins with a real fallback, matching the rest
   of main.css. Poppins is loaded by includes/header.php via a
   <link>, NOT an @import — do not reintroduce the @import.
   ============================================================ */

/* ---------- hero button pair ---------- */
.ms_hero_actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    margin: 28px 0 0;
}
.ms_hero_actions .blue_button,
.ms_hero_actions .white_button {
    margin: 0;
}

/* ---------- tabs: shell ----------
   The four radio inputs are siblings that PRECEDE both .ms_tab_row and
   .ms_panels, which is what lets :checked ~ drive everything below in
   pure CSS. If you reorder the markup, these selectors stop matching. */
.ms_tabs {
    width: 100%;
    margin: 8px 0 0;
}

/* Visually hidden, still focusable and still operable by keyboard.
   Never use display:none here — that removes the inputs from the tab
   order and the radio group stops responding to arrow keys. */
.ms_tab_input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- tabs: the row ---------- */
.ms_tab_row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 -1px;
}
.ms_tab_btn {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 4px;
    padding: 18px 16px;
    background-color: #ffffff;
    border: 1px solid #e8e8e8;
    border-radius: 13px 13px 0 0;
    border-bottom-color: #ffffff;
    cursor: pointer;
    text-align: left;
    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}
.ms_tab_btn .fa {
    font-size: 20px;
    color: #00838C;
    margin: 0 0 2px;
    transition: color 140ms ease;
}
.ms_tab_btn__name {
    font: normal normal 600 17px/22px 'Poppins', 'Segoe UI', Arial, sans-serif;
    color: #294150;
    transition: color 140ms ease;
}
.ms_tab_btn__note {
    font: normal normal 400 13px/18px 'Poppins', 'Segoe UI', Arial, sans-serif;
    color: #707070;
    transition: color 140ms ease;
}
.ms_tab_btn:hover {
    background-color: #f0f2f5;
    border-color: #d5dade;
}
.ms_tab_btn:hover .ms_tab_btn__name {
    color: #00838C;
}

/* Active tab — joined to the panel below by a matching border colour. */
#ms_tab_websites:checked ~ .ms_tab_row .ms_tab_btn[for="ms_tab_websites"],
#ms_tab_security:checked ~ .ms_tab_row .ms_tab_btn[for="ms_tab_security"],
#ms_tab_servers:checked  ~ .ms_tab_row .ms_tab_btn[for="ms_tab_servers"],
#ms_tab_social:checked   ~ .ms_tab_row .ms_tab_btn[for="ms_tab_social"] {
    background-color: #0b5561;
    border-color: #0b5561;
}
#ms_tab_websites:checked ~ .ms_tab_row .ms_tab_btn[for="ms_tab_websites"] .fa,
#ms_tab_security:checked ~ .ms_tab_row .ms_tab_btn[for="ms_tab_security"] .fa,
#ms_tab_servers:checked  ~ .ms_tab_row .ms_tab_btn[for="ms_tab_servers"] .fa,
#ms_tab_social:checked   ~ .ms_tab_row .ms_tab_btn[for="ms_tab_social"] .fa,
#ms_tab_websites:checked ~ .ms_tab_row .ms_tab_btn[for="ms_tab_websites"] .ms_tab_btn__name,
#ms_tab_security:checked ~ .ms_tab_row .ms_tab_btn[for="ms_tab_security"] .ms_tab_btn__name,
#ms_tab_servers:checked  ~ .ms_tab_row .ms_tab_btn[for="ms_tab_servers"] .ms_tab_btn__name,
#ms_tab_social:checked   ~ .ms_tab_row .ms_tab_btn[for="ms_tab_social"] .ms_tab_btn__name {
    color: #ffffff;
}
#ms_tab_websites:checked ~ .ms_tab_row .ms_tab_btn[for="ms_tab_websites"] .ms_tab_btn__note,
#ms_tab_security:checked ~ .ms_tab_row .ms_tab_btn[for="ms_tab_security"] .ms_tab_btn__note,
#ms_tab_servers:checked  ~ .ms_tab_row .ms_tab_btn[for="ms_tab_servers"] .ms_tab_btn__note,
#ms_tab_social:checked   ~ .ms_tab_row .ms_tab_btn[for="ms_tab_social"] .ms_tab_btn__note {
    color: #cdebed;
}

/* Keyboard focus must be visible on the LABEL, because the input itself
   is clipped to 1px and its own outline would be invisible. */
.ms_tab_input:focus-visible ~ .ms_tab_row .ms_tab_btn[for="ms_tab_websites"],
.ms_tab_input:focus-visible ~ .ms_tab_row .ms_tab_btn[for="ms_tab_security"],
.ms_tab_input:focus-visible ~ .ms_tab_row .ms_tab_btn[for="ms_tab_servers"],
.ms_tab_input:focus-visible ~ .ms_tab_row .ms_tab_btn[for="ms_tab_social"] {
    outline: 2px dashed #294150;
    outline-offset: 2px;
}

/* ---------- tabs: the panels ---------- */
.ms_panels {
    background-color: #ffffff;
    border: 1px solid #0b5561;
    border-radius: 0 0 13px 13px;
}
.ms_panel {
    display: none;
    padding: 32px 30px;
}
#ms_tab_websites:checked ~ .ms_panels .ms_panel--websites,
#ms_tab_security:checked ~ .ms_panels .ms_panel--security,
#ms_tab_servers:checked  ~ .ms_panels .ms_panel--servers,
#ms_tab_social:checked   ~ .ms_panels .ms_panel--social {
    display: block;
}

.ms_panel_head {
    padding: 0 0 22px;
    margin: 0 0 26px;
    border-bottom: 1px solid #e8e8e8;
}
.ms_panel_title {
    font: normal normal 600 28px/34px 'Poppins', 'Segoe UI', Arial, sans-serif;
    color: #294150;
    margin: 0 0 10px;
}
.ms_panel_lede {
    font: normal normal 400 17px/27px 'Poppins', 'Segoe UI', Arial, sans-serif;
    color: #707070;
    margin: 0;
    max-width: 62em;
}
.ms_panel_body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 34px;
}
.ms_panel_sub {
    font: normal normal 600 13px/18px 'Poppins', 'Segoe UI', Arial, sans-serif;
    color: #00838C;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    margin: 0 0 14px;
}
.ms_panel_col ul {
    margin: 0;
    padding-left: 20px;
}
.ms_panel_col li {
    font: normal normal 400 16px/26px 'Poppins', 'Segoe UI', Arial, sans-serif;
    color: #294150;
    margin-bottom: 9px;
}
.ms_panel_col li:last-child {
    margin-bottom: 0;
}
.ms_panel_col p {
    font: normal normal 400 16px/26px 'Poppins', 'Segoe UI', Arial, sans-serif;
    color: #294150;
    margin: 0 0 14px;
}
/* Qualified with .ms_panel_col so it outranks `.ms_panel_col p` above,
   which would otherwise win on specificity. */
.ms_panel_col .ms_panel_price {
    font: normal normal 600 19px/28px 'Poppins', 'Segoe UI', Arial, sans-serif;
    color: #00838C;
    margin: 0 0 14px;
}
.ms_panel_col .blue_button {
    margin: 8px 0 0;
    font-size: 18px;
    padding: 14px 34px;
}

/* ---------- how it works: three steps ---------- */
.ms_steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    width: 100%;
}
.ms_step {
    background-color: #ffffff;
    border: 1px solid #e8e8e8;
    border-radius: 13px;
    padding: 28px 26px;
}
.ms_step_num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: #00838C;
    color: #ffffff;
    font: normal normal 600 19px/1 'Poppins', 'Segoe UI', Arial, sans-serif;
    margin: 0 0 16px;
}
.ms_step_title {
    font: normal normal 600 21px/28px 'Poppins', 'Segoe UI', Arial, sans-serif;
    color: #294150;
    margin: 0 0 10px;
}
.ms_step p {
    font: normal normal 400 16px/26px 'Poppins', 'Segoe UI', Arial, sans-serif;
    color: #707070;
    margin: 0;
}

/* ---------- text variant of the compliance table ----------
   .compliance_table (in backups-security.css) is built for tick and
   cross columns: centred cells, nowrap headers, and a hard 64px column
   width below 900px that would crush a sentence into a sliver.

   SPECIFICITY, do not simplify these selectors:
   includes/header.php loads main.css BEFORE backups-security.css, so on
   an equal-specificity tie the backups-security rule wins on source
   order. `.compliance_table--text tbody td` ties exactly with
   `.compliance_table tbody td` (0,1,2 each) and would lose. Naming the
   element and both classes lifts these to (0,2,3) so they win outright.
   The !important flags are only here because the base rules use them. */
table.compliance_table.compliance_table--text thead th {
    text-align: left !important;
    white-space: normal !important;
    vertical-align: middle !important;
    width: auto !important;
}
table.compliance_table.compliance_table--text tbody td {
    text-align: left !important;
    vertical-align: top !important;
    font: normal normal 400 15px/24px 'Poppins', 'Segoe UI', Arial, sans-serif !important;
    color: #294150 !important;
    padding: 16px 18px !important;
    width: auto !important;
}
/* Beats the 900px and 600px width clamps in backups-security.css. */
table.compliance_table.compliance_table--text .compliance_table__plan_col {
    width: auto !important;
}
table.compliance_table.compliance_table--text .compliance_table__req {
    width: 26% !important;
}
table.compliance_table.compliance_table--text tbody td strong {
    color: #294150 !important;
    font-weight: 600 !important;
}

/* ---------- responsive ---------- */
@media only screen and (max-width: 1024px) {
    .ms_tab_row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-bottom: 8px;
    }
    .ms_tab_btn {
        border-radius: 13px;
        border-bottom-color: #e8e8e8;
        padding: 15px 14px;
    }
    .ms_panels {
        border-radius: 13px;
    }
    .ms_panel {
        padding: 26px 22px;
    }
    .ms_panel_body {
        grid-template-columns: minmax(0, 1fr);
        gap: 26px;
    }
    .ms_panel_title {
        font-size: 24px;
        line-height: 30px;
    }
    .ms_steps {
        grid-template-columns: minmax(0, 1fr);
    }
    table.compliance_table.compliance_table--text .compliance_table__req {
        width: 30% !important;
    }
}

@media only screen and (max-width: 700px) {
    .ms_tab_row {
        grid-template-columns: minmax(0, 1fr);
    }
    .ms_tab_btn {
        flex-direction: row;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 4px 10px;
        padding: 13px 15px;
    }
    .ms_tab_btn .fa {
        margin: 0;
        font-size: 17px;
    }
    .ms_tab_btn__name {
        font-size: 16px;
    }
    .ms_tab_btn__note {
        font-size: 12px;
        flex-basis: 100%;
    }
    .ms_panel {
        padding: 22px 18px;
    }
    .ms_panel_title {
        font-size: 21px;
        line-height: 28px;
    }
    .ms_hero_actions .blue_button,
    .ms_hero_actions .white_button {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
        font-size: 19px;
    }
    /* Must outrank the 600px clamp in backups-security.css, which also
       targets tbody td with !important. */
    table.compliance_table.compliance_table--text tbody td {
        font-size: 13px !important;
        line-height: 21px !important;
        padding: 12px 10px !important;
    }
    table.compliance_table.compliance_table--text .compliance_table__req {
        width: 34% !important;
    }
}