@media (max-width: 768px) {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

/* Header Styles */
#header {
  height: 200px; /* adjust as needed */
  width: 100%; /* adjust as needed */
}

  h2 {
    font-size: 1.4rem;
  }

  h3 {
    font-size: 1.5rem;
  }

  h4 {
    font-size: 1.5rem;
  }

    h2.text {
      padding: 0;
    padding-top: 16px;
    padding-bottom: 3px;
    }

  .orange-logo {
    width: 330px;
    height: 130px;
    background-size: 300px 131px;
  }

  .content {
    padding: 20px;
    width: auto;
    margin: 0 auto;
    overflow: hidden;
  }

  /* First Section: Three columns */
  .first-section {
    display: grid;
    grid-column: span 12; /* Full width */
    grid-template-columns: repeat(1, 1fr);
  }

  .second-section {
    display: grid;
    grid-column: span 12; /* Full width */
    grid-template-columns: repeat(1, 1fr);
  }

  .grid-item-four-columns .img {
    width: 100%;
    height: auto; /* Maintain aspect ratio */
    border-radius: 10px 10px 0 0; /* Keep your existing border-radius */
    object-fit: cover; /* Optional: Ensures image covers the area nicely */
  }

  .grid-item-two-columns .column-left {
    width: 100%;
  }

  .rightContainer .rating img {
    width: auto; /* Allows the image to scale down on smaller screens */
  }

  /* Base styles (mobile-first) */
  #reviews {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center align items for a neater look */
    height: auto; /* Let the height adjust to the content */
  }

  #reviews .image {
    width: 80%; /* Adjust as needed, 100% for full width */
    height: auto; /* Maintain aspect ratio */
    border-radius: 10px 10px 0 0;
    object-fit: cover; /* Ensures image covers the area nicely */
    margin-bottom: 0 auto 10px; /* Space below the image */
  }

  #reviews .headerContainer {
    display: flex;
    justify-content: space-between;
    width: 100%; /* Full width for stars and review text */
    max-width: 100%;
    padding: 0 10px; /* Adjust padding as needed */
    box-sizing: border-box; /* Include padding in width calculation */
  }

  #reviews .leftContainer {
    max-width: 100%;
    display: flex; /* If you want the container to be a flexbox */
    flex-direction: column;
    align-items: center; /* This will center the children */
  }

  #reviews .name,
  #reviews .date {
    font-size: 1.5rem;
  }

  #reviews .rightContainer {
    width: 100%; /* Full width for stars and review text */
    max-width: 100%;
    padding: 0 10px; /* Adjust padding as needed */
    box-sizing: border-box; /* Include padding in width calculation */
  }

  .rightContainer .rating {
    display: flex; /* Use flexbox */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    width: 100%; /* Take full width of the container */
    height: auto; /* Adjust height as needed */
    margin-top: 10px;
  }

  .rightContainer .rating img {
    width: auto; /* Keep the image scalable */
    height: auto;
  }

  .review {
    width: 100%; /* Full width */
    margin-top: 10px; /* Space above the review text */
  }

  #domainpage > .content {
    padding: 10px; /* Example padding */
  }

  .benefits {
    grid-template-columns: 1fr; /* Single column for smaller screens */
  }

  .benefits.iceland {
    grid-template-columns: repeat(1, 1fr);
  }

  .benefits li::before {
    content: "•"; /* Bullet symbol */
    color: black; /* You can change the color later */
    position: absolute;
    left: 0;
  }

  .affiliate-list {
    grid-template-columns: 1fr; /* Single column grid */
    margin: 0;
    padding-left: 0;
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .affiliate-list li {
    font-size: 1rem;
  }

  .affiliatevideo {
    padding: 10px;
  }

  .affiliatevideo > iframe {
    width: 100%;
  }

  .imgbanner {
    width: 100%; /* Make the image width responsive */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Display image as a block-level element */
    max-width: 100%; /* Ensure image doesn't exceed its original size */
  }
  
  .logodoc {
  width: 100%;
  height: auto; /* Maintain aspect ratio */
  display: block; /* Display image as a block-level element */
}

  .image-right img {
    width: 125px; /* Set your desired width */
    height: 88px; /* Set your desired height */
  }

  .btc-right img {
    width: 100px; /* Set your desired width */
    height: 70px; /* Set your desired height */
  }

  .mobile-only {
    display: block; /* This makes the element visible in mobile view */
  }

  .content-section-readmore {
    display: block; /* Disable Flexbox */
    width: 100%;
    align-items: flex-start; /* Align vertically */
    margin-bottom: 10px; /* Spacing between sections */
    margin-right: 10px;
    padding: 10px;
    border: 3px solid #af7b48;
    background: #9c6e40;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Adjust as needed */
    overflow: hidden;
  }

  .content-image-readmore {
    width: 150px;
    height: 150px;
    float: left;
    margin-right: 5px;
    border-right: 3px solid #a48050;
    border-bottom: 3px solid #a48050;
  }
  
  .content-section-readmore > .content-text > h2 {
    font-size: 1.3rem;
    margin: 0;
  }

  .content-section-readmore > .content-text > h4 {
    font-size: 1.3rem;
    margin: 0;
  }

  .content-section-readmore > .content-text > p {
    font-size: 1rem;
    margin: 0;
    text-align: justify;
  }

  .content-section {
    display: block;
    padding-left: 10px;
    padding-right: 20px;
    overflow: visible;
  }

  .content-section > .content-image {
    float: left;
    width: 100px;
    height: 100px;
    margin: 20px;
    border: 0px solid #b8d4b84d;
    border-radius: 10px;
  }

  .content-section > .content-text > h2 {
    font-size: 1.3rem;
    padding-top: 16px;
    padding-bottom: 3px;
  }
  
  .content-section > .content-text > h4 {
    font-size: 1.3rem;
    padding-top: 16px;
    padding-bottom: 3px;
  }

  .content-section > .content-text > p {
    font-size: 1.2rem;
    margin-top: 0;
    padding: 5px;
    padding-bottom: 15px;
    text-align: justify;
  }

  .content-section > .content-text {
    margin: 0;
    margin-top: 3px;
    padding: 0;
  }

  .company-container .history {
    padding-top: 5px;
  }

  .greenseal-container {
    display: none;
  }

  /* Content split null on responsive */

  .company-container {
    display: block; /* Disable Flexbox */
  }

  .company-container .content-image {
    float: left;
    margin-right: 10px;
    width: 150px;
    height: 150px;
    border: 0;
  }

  .content-split > .menu {
    display: none; /* Hides the menu */
  }

  .content-split > .content {
    flex: 1 0 100%; /* Takes up the full width */
  }

  /* NAV Responsive */

#nav {
  display: none; /* Hide by default */
}

#nav.show {
  display: block; /* Show when hamburger is clicked */
  border-top: 0px solid #75af7c;
  border-bottom: 10px solid #ffbb1c;
}


.hamburger-menu {
    display: block;
    background-color: #539141;
    background: linear-gradient(to bottom, #4d4d4d, #1e2d20);
    color: white;
    text-align: left;
    padding: 10px 0;
    border-top: 4px solid #75af7c;
    border-bottom: 7px solid #ffbb1c;
  }
  
.hamburger-menu ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center; /* Align items vertically */
}

.hamburger-menu ul li {
    margin-right: 5px;
}

.hamburger-menu ul li:first-child {
    font-size: 1.3rem; /* Adjust as needed */
}

.hamburger-icon {

  color: white;
  font-family: "Roboto", sans-serif;
  font-size: 0.8rem;
}

.hamburger-icon:hover {
  cursor: pointer;
}

.hamburger-icon > ul {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
    display: flex;
}

.hamburger-icon > ul > li {
    margin-right: 0px;
    margin-left: 15px;
    padding: 5px;
}

/* Hover effect */

.hamburger-icon a {
  display: inline-block;
  padding: 5px 2px; /* Adjust padding for sizing */
  color: white;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color 0.3s; /* Smooth transition for hover */
}

.hamburger-icon a:hover {
  background-color: #ffbb1c; /* Adjust hover color */
}

  
  .dropdown-toggle {
    display: inline-block;
    margin-left: 10px;
    margin-right: 10px;
    cursor: pointer;
    width: 30px;
    text-align: center;
    font-size: 1rem; /* Adjust as needed */
    line-height: 1; /* Adjust line height to align with the text */
    padding: 5px 10px;
    border-radius: 3px;
    background: #ffbb1c;
  }

  .dropdown-toggle.invisible {
    visibility: hidden;
  }

#subnav {
display: block;
}

.vertical_menu {
width: 100%;
}

  nav li:hover .company,
  nav li:hover .hosting,
  nav li:hover .domains {
    display: none;
  }

  nav ul {
    flex-direction: column;
  }

  nav li {
    display: flex;
    align-items: center;
  }

  nav > ul > li {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Adjust as needed */
  }

  nav > ul > li a {
    flex-grow: 1; /* Ensure the link takes available space */
    display: inline-block; /* Inline-block for alignment */
    text-align: left;
    padding-left: 50px; /* Adjust as needed */
  }

  nav > ul > li > a,
  nav > ul > li > .dropdown-toggle {
    display: inline-block; /* Make the link and toggle inline-block */
  }

  nav a {
    display: block; /* Make the entire area clickable */
    width: 100%; /* Fill the entire width of the list item */
  }

  nav .company,
  nav .hosting,
  nav .domains {
    position: absolute; /* Position the dropdown absolutely */
    width: 100%; /* Full width of the parent li */
    display: none; /* Hidden initially */
    left: 0; /* Align to the left edge of the li */
    top: 100%; /* Position right below the li */
    z-index: 1; /* Ensure it's on top */
  }

  nav li.show-dropdown > .company,
  nav li.show-dropdown > .hosting,
  nav li.show-dropdown > .domains {
    display: block; /* Expands the nav when shown */
  }

  #vpsgrid > li {
    flex: 0 0 100%; /* Each item takes the full width */
    max-width: 100%; /* Reset max-width for mobile screens */
  }

  .pricing_table > li {
    flex-basis: 100%; /* One item per row */
    max-width: 100%; /* One item per row */
  }

  .pricing_table li.active {
    transform: scale(1);
  }

  /* Adjusting Domain Pricing Table */

  .price-item {
    flex: 1 0 calc(50% - 60px); /* Adjust for two items per row on smaller screens */
    max-width: calc(50% - 20px);
  }

  .price-items {
    padding: 5px;
  }
  .domain-name {
    font-size: 0.8rem;
    color: #333;
    font-weight: 600;
  }

  .domain-price {
    font-size: 0.8rem;
    color: #6a6a6a;
    font-weight: 500;
  }

  .tg {
    font-size: 1rem;
  }

  .testimonial-section {
    flex-direction: column;
    align-items: center;
  }

  .testimonial-image {
    margin-right: 0;
    margin-bottom: 20px;
    border-left: 10px solid #eee;
    border-right: 10px solid #eee;
  }

  .testimonial-header {
    width: 100%;
    flex-wrap: nowrap;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .testimonial-title {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .testimonial-title h4,
  .testimonial-title img,
  .textlink {
    margin-bottom: 10px;
  }

  .content-section-testimonymore {
    display: block; /* Disable Flexbox */
    width: 100%;
    align-items: flex-start; /* Align vertically */
    margin-bottom: 10px; /* Spacing between sections */
    margin-right: 10px;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Adjust as needed */
    overflow: hidden;
  }

  .content-image-testimonymore {
    width: 150px;
    height: 150px;
    float: left;
    margin-right: 10px;
    border: 4px solid #658d4b;
    background: #7daf5d;
    border-radius: 5px;
  }

  .content-section-testimonymore > .content-text > h4 {
    font-size: 1.4rem;
    margin-bottom: 10px;
    margin-top: 0;
  }

  .content-section-testimonymore > .content-text > p {
    font-size: 1.2rem;
    margin: 0;
    text-align: left;
  }

  .testimonials-list {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 5px;
    list-style: none;
    padding: 0;
    padding-bottom: 10px;
    margin: auto; /* Center the grid horizontally */
    width: fit-content; /* Fit the width to the content */
  }

  .testimonials-list li {
    font-family: "Roboto", sans-serif;
    font-size: 1.1rem;
    color: #374423;
    padding-left: 10px; /* Space for custom bullet */
    position: relative;
  }

  .testimonials-list li::before {
    content: ""; /* Bullet symbol */
    color: black; /* You can change the color later */
    position: absolute;
    left: 0;
  }

  hr.testimonial-hr {
    background-color: #6f9c40;
  }
 
.faq-item {
    display: block;
}
.faq-number {
    font-size: 20px;
    width: 100%;
    max-width: 100%;
    height: 40px;
    border-radius: 10px;
    margin-bottom: 10px;
    margin
}


  .footer {
    padding: 30px; /* Increased padding for more space */
  }

  .footer a::before {
    left: -15px; /* Slightly closer on smaller screens */
  }

  /* Space around ul elements */
  .footer ul {
    margin-top: 0;
    margin-bottom: 20px;
  }

  .footer .container {
   
    align-items: flex-start; /* Align items to start for better readability */
  }

  .footer-section {
    flex-basis: 100%; /* Full width on small screens */
    
    margin-bottom: 20px; /* Space between sections */
  }
  
  /* Modal Content */
.modal-content {
  width: 80%; /* Could be more or less, depending on screen size */
}
/* Discount Coupon */
.discount-coupon {
  font-size: 2.2rem; /* Increased font size */
}

/* Percentage Text */
.percentage-text {
  font-size: 1.2rem; /* Larger font size */
  font-weight: bold;
}

/* Billing Cycle */
.billing-cycle-container {
    display: block;
}

.billing-cycle-container label {
    display: block;
    margin: 3px 5%; /* Adjust margins for proper spacing */
    line-height: 2;
}

.billing-cycle-container label::before {
    left: 8px;
    top: 8px;
    width: 27px;
    height: 27px;
}
.billing-cycle-container label::after {
    left: 12px;
    top: 12px;
    width: 19px;
    height: 19px;
}

}


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

/* If the screen is lower or equal to 1920 lets adjust the dropdown a bit */

/* Dropdown links */
nav .company a,
nav .hosting a,
nav .domains a {
  padding: 13px 20px; /* Slightly more vertical padding */
  font-size: 1.1rem; /* Adjust font size for better fit */
 
}

}