/*! modern-normalize v1.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
/*
Document
========
*/
/**
Use a better box model (opinionated).
*/
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap");
*,
*::before,
*::after {
  box-sizing: border-box;
}

/**
Use a more readable tab size (opinionated).
*/
:root {
  -moz-tab-size: 4;
  -o-tab-size: 4;
     tab-size: 4;
}

/**
1. Correct the line height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
*/
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/*
Sections
========
/*
Grouping content
================
*/
/**
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
*/
hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
}

/*
Text-level semantics
====================
*/
/**
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr[title] {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/**
Add the correct font weight in Edge and Safari.
*/
b,
strong {
  font-weight: bolder;
}

/**
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
2. Correct the odd 'em' font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
Add the correct font size in all browsers.
*/
small {
  font-size: 80%;
}

/**
Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
*/
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
Tabular data
============
*/
/**
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
*/
table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
}

/*
Forms
=====
*/
/**
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
Remove the inheritance of text transform in Edge and Firefox.
1. Remove the inheritance of text transform in Firefox.
*/
button,
select {
  /* 1 */
  text-transform: none;
}

/**
Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

/**
Remove the inner border and padding in Firefox.
*/
::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
Restore the focus styles unset by the previous rule.
*/
:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
Remove the additional ':invalid' styles in Firefox.
See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737
*/
:-moz-ui-invalid {
  box-shadow: none;
}

/**
Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
*/
legend {
  padding: 0;
}

/**
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
  vertical-align: baseline;
}

/**
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/**
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type=search] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to 'inherit' in Safari.
*/
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Interactive
===========
*/
/*
Add the correct display in Chrome and Safari.
*/
summary {
  display: list-item;
}

a {
  text-decoration: none;
}

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

a:active {
  text-decoration: none;
}

h2 {
  margin: 0;
}

body {
  line-height: 1.428571429;
  color: #222;
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
  background-color: #f5f5f5;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  margin: 0; /* Ensure no unwanted margins */
  padding: 0; /* Ensure no default padding */
  padding-top: 70px;
  box-sizing: border-box; /* Include borders/padding in width calculations */
  width: 100%; /* Make sure the body takes the full viewport width */
  overflow-x: hidden; /* Prevent horizontal scroll caused by overflow content */
}


.header-background {
  background-color: #f5f5f5;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.15);
}


.nav {
  margin: 0 auto;
  width: 100%;
  max-width: 1400px;
  display: flex;
  font-weight: bold;
  font-size: 1rem;
  height: 100%;
}
.nav .dropbtn {
  width: 100%;
  display: block;
  text-decoration: none;
  color: inherit;
  font-size: 1rem;
  color: #222;
  text-align: center;
  text-transform: uppercase;
  transition: 0.2s;
  height: 100%;
  padding: 6px;
}
.nav .dropdown {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
}
.nav .dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 200px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}
@media only screen and (max-width: 1300px) {
  .nav .dropdown {
    display: none;
  }
  .nav .dropdown .dropbtn {
    display: none;
  }
  .nav .mobile-hidden {
    display: none;
    /* .sub-list {
      a {
        width:60%;
        margin-left:auto;
        margin-right:auto;
        margin-top:10px;
        margin-bottom:10px;
        border-radius:15px;
        padding:0;
        font-size:0.9rem;
      &:hover {
        background-color:#666;
        color:#fff;
      }
      }
    } */
  }
  .nav .mobile-hidden span {
    display: block;
    text-decoration: none;
    color: inherit;
    font-size: 1rem;
    color: #222;
    text-align: center;
    text-transform: uppercase;
    width: 100%;
    transition: 0.2s;
    line-height: 60px;
    padding-left: 10px;
  }
  .nav .mobile-hidden span a {
    display: contents;
  }
  .nav .mobile-hidden span::after {
    float: right;
    right: 10%;
    content: "+";
  }
  .nav .mobile-hidden .slide {
    clear: both;
    width: 100%;
    height: 0px;
    overflow: hidden;
    text-align: center;
    transition: height 0.4s ease;
    background-color: #f5f5f5;
    border-radius: 15px;
  }
  .nav .mobile-hidden .slide li {
    margin: 1rem;
    width: 100%;
    text-align: left;
  }
  .nav .mobile-hidden .slide li a::before {
    float: left;
    left: 10%;
    content: "  -  ";
    padding-right: 10px;
  }
  .nav .mobile-hidden .slide li a:last-child {
    padding: 0;
    width: 100%;
    text-align: left;
  }
  .nav .mobile-hidden #touch {
    position: absolute;
    opacity: 0;
    height: 0px;
    cursor: pointer;
  }
  .nav .mobile-hidden #touch:checked + .slide {
    height: 400px;
    padding: 0;
  }
}

/* Alternating colors for mobile menu list items */
#mobileMenu ul li:nth-child(odd) {
  background-color: #f1f3f5;
}

#mobileMenu ul li:nth-child(even) {
  background-color: #ffffff;
}


@media only screen and (min-width: 1300px) {
  .nav .mobile-hidden {
    display: none;
  }
  .nav .mobile-hidden .dropdown {
    display: inline-block;
  }
}
.nav .dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
.nav .dropdown-content a:hover {
  background-color: #494949;
}
.nav .dropdown:hover .dropdown-content {
  display: block;
}
.nav .dropdown:hover .dropbtn {
  background-color: #3658aa;
}
.nav__toggle {
  position: absolute;
  cursor: pointer;
  margin: 0rem 1rem;
  right: 0;
  padding-top: 20px;
}
.nav svg {
  width: 1.5rem;
  fill: #101010;
}
.nav .close {
  display: none;
}
.nav .menu {
  margin-top: 0;
}
.nav__checkbox {
  display: none;
}
.nav__menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  text-align: center;
  justify-content: space-evenly;
  padding: 10px 0 10px 0;
  margin: 0;
}
.nav__menu .phone {
  display: block;
  margin-right: 0;
}
.nav__menu li {
  list-style: none;
  display: none;
  margin: 0;
  width: 85%;
}
.nav__menu li:first-child {
  display: block;
}
.nav__menu li:first-child img {
  width: 90%;
  fill: gray;
}
.nav__menu a {
  display: block;
  text-decoration: none;
  color: inherit;
  font-size: 1rem;
  color: #222;
  text-align: center;
  text-transform: uppercase;
  width: 100%;
  transition: 0.2s;
  line-height: 60px;
}
.nav__menu a:last-child {
  padding: 7px;
}
.nav__menu a:hover {
  background-color: #3658aa;
  color: #fff;
}

#nav__checkbox:checked ~ ul.nav__menu li {
  display: block;
  width: 90%;
}
#nav__checkbox:checked ~ ul.nav__menu li:first-child {
  margin: 1rem;
}

#nav__checkbox:checked ~ label.nav__toggle .close {
  display: block;
}

#nav__checkbox:checked ~ label.nav__toggle .menu {
  display: none;
}

.header-container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: 0 auto;
  padding: 13px;
}
.header-container > * {
  text-align: center;
  flex: 1 1 100%;
}
.header-container > * ul {
  padding: 0;
}
.header-container > * ul li {
  list-style: none;
  width: 100%;
  padding: 0;
}
.header-container > * ul li a {
  font-size: 1.5rem;
  font-weight: normal;
  color: #666;
  font-weight: 700;
  transition: all 0.25s;
}
.header-container > * img {
  width: 100%;
}

@media only screen and (min-width: 1300px) {
  .header-container {
    width: 90%;
  }
  .header-container > *:nth-child(1) {
    flex: 1 1 25%;
  }
  .header-container > *:nth-child(2) {
    flex: 1 1 50%;
  }
  .header-container > *:nth-child(2) img {
    width: auto;
    max-width: 400px;
  }
  .header-container > *:nth-child(3) {
    flex: 1 1 25%;
  }
  .header-container > * ul li {
    padding: 10px 0;
  }
  .nav__toggle {
    display: none;
  }
  .nav__menu {
    flex-direction: row;
    width: 100%;
  }
  .nav__menu li {
    display: block;
  }
}
.main-nav .header-container li a {
  display: initial;
}

@media screen and (max-width: 600px) {
  .header-container {
    padding: 0 15px; /* Adds padding to both sides */
  }

  .header-container a {
    font-size: 18px; /* Adjust font size for smaller screens */
  }
  
  .header-container img {
    max-width: 80%; /* Restricts logo width */
    height: auto;
  }
}

.header-container img {
  max-height: 100px;
  width: auto;
}

@media (max-width: 768px) {
  .header-container img {
      max-height: 50px;
      width: auto;
  }
}


.main-nav ul {
  font-weight: bold;
  text-transform: uppercase;
  margin: 0;
  padding: 0;
  justify-content: space-around;
  display: flex;
}

.main-nav li {
  position: relative;
  display: inline-block;
  list-style: none;
  gap: 5px;
}

.main-nav li a {
  display: block;
  padding: 2em 2.6em;
  color: #222;
  text-decoration: none;
  transition: background 0.2s;
}

.main-nav li a:not(:only-child):after {
  display: inline-block;
  padding-left: 0.3rem;
}

.main-nav li a:hover {
  color: white;
  background: #3658aa;
}

.main-nav .header-background {
  background-color: #ffffff;
  box-shadow: 0 0.5rem 0.5rem rgba(0, 0, 0, 0.3);
}

.main-nav .header {
  margin: 0 auto;
  width: 98%;
}

.main-nav .top-level {
  margin: 0;
  z-index: 1;
}

.main-nav .second-level,
.third-level {
  min-width: 20rem;
  background-color: #f1f1f1;
  border-radius: 0.3rem;
  display: block;
  z-index: 1;
}

.main-nav .second-level li a {
  padding: 1.3em;
}

.main-nav .top-level li:hover .second-level {
  left: 0;
}

.main-nav .second-level:before {
  content: "";
  position: absolute;
  top: -12px;
  left: 2rem;
  border-bottom: 0.8rem solid #57a;
  border-left: 0.8rem solid transparent;
  border-right: 0.8rem solid transparent;
}

.main-nav .second-level {
  position: absolute;
  top: 100%;
  left: -999rem;
  display: block;
}

.main-nav .second-level li {
  position: relative;
  display: block;
  border: 1px solid #dddddd;
}

.main-nav .second-level li a {
  margin: 0;
}

.main-nav .second-level li:hover .third-level {
  left: 100%;
}

.main-nav .third-level:before {
  content: "";
  position: absolute;
  top: 1rem;
  left: -0.8rem;
  border-bottom: 0.8rem solid transparent;
  border-top: 0.8rem solid transparent;
  border-right: 0.8rem solid #57a;
}

.main-nav .third-level {
  position: absolute;
  left: -999rem;
  top: 0;
  display: block;
  background-color: #dddddd;
}

.main-nav .third-level li {
  border: 1px solid #f1f1f1;
} /* 
@media only screen and (max-device-width:1400px) {
  .main-nav {
    display:none;
  }
  .second-nav {
    display:block;
  }
}
@media only screen and (min-device-width:1400px) {
  .second-nav {display:none;}
  .main-nav {display:block;}
} */
@media only screen and (max-device-width: 1200px) {
  .main-nav ul {
    flex-wrap: wrap;
    width: 100%;
  }
  .main-nav ul li {
    width: 100%;
  }
} 







.default-button3 {
  letter-spacing: 0.1em;
  cursor: pointer;
  line-height: 45px;
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
  font-family: "Open Sans", sans-serif;
}
.default-button3:hover {
  text-decoration: none;
}

.effect01 {
  color: #FFF;
  background-color: #3658aa;
  overflow: hidden;
  position: relative;
  transition: all 0.3s ease-in-out;
  padding: 15px 40px;
  font-size: 1rem;
  border: 0px solid #000;
}
.effect01:hover, .effect01 .active {
  background-color: #000;
  color: #fff;
  text-decoration: underline;
}
.effect01::after {
  background: #000;
  border: 0px solid #000;
  content: "";
  height: 150px;
  left: -75px;
  opacity: 0.8;
  position: absolute;
  top: -50px;
  transform: rotate(35deg);
  width: 50px;
  transition: all 2s cubic-bezier(0.075, 0.82, 0.165, 1); /*easeOutCirc*/
  z-index: 1;
}
.effect01:hover::after {
  background-color: #000;
  border: 20px solid #000;
  opacity: 0;
  left: 120%;
  transform: rotate(40deg);
}

.content {
  padding: 0;
  background: #f5f5f5;
}
.content .picture-title-home {
  font-size: 35px;
  text-transform: uppercase;
  color: #fff;
  background: rgb(0, 3, 151);
  background: linear-gradient(90deg, rgb(0, 2, 109) 0%, rgb(0, 62, 133) 38%, rgb(0, 62, 133) 60%, rgb(0, 2, 109) 100%);
  padding: 70px 0 70px 0;
  margin: 0;
  text-align: center;
  width: 100%;
  max-height: -moz-fit-content;
  max-height: fit-content;
  min-height: 550px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  -o-object-fit: contain;
     object-fit: contain;
  /*TOP PICTURE SECTION*/
  /*BOTTOM PICTURE SECTION*/
  /*BOTTOM PICTURE SECTION*/
}
.content .picture-title-home h1.pageHead {
  font-size: 40px;
  line-height: 1em;
  font-weight: normal;
  text-transform: uppercase;
  font-weight: bold;
  color: #fff;
  width: 100%;
  text-align: center;
  margin: 0 auto 0.5em auto;
  max-width: 1200px;
  word-wrap: break-word;
}
.content .picture-title-home p {
  line-height: 35px;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  text-transform: none;
  font-size: 23px;
}
.content .picture-title-home h2.orange {
  font: bold 30px/1em;
  text-transform: uppercase;
  margin: 20px 0 24px 0;
  color: #484848;
  text-align: center;
  width: 100%;
}
.content .picture-title-home .content-slider {
  width: 100%;
  padding-bottom: 15px;
}
.content .picture-title-home .slider {
  height: 100px;
  width: 100%;
  overflow: visible;
  position: relative;
  text-align: center;
}
.content .picture-title-home .mask {
  overflow: hidden;
  height: 100px;
}
@media screen and (max-width: 1080px) {
  .content .picture-title-home .mask {
    height: 250px;
  }
  .content .picture-title-home .slider {
    height: 230px;
  }
}
.content .picture-title-home .slider ul {
  margin: 0;
  padding: 0;
  position: relative;
}
.content .picture-title-home .slider li {
  width: 100%;
  height: auto;
  position: absolute;
  top: -325px;
  list-style: none;
}
.content .picture-title-home .slider .quote {
  font-size: 35px;
  font-style: italic;
  width: 100%;
}
.content .picture-title-home .slider .source {
  font-size: 20px;
  text-align: right;
}
.content .picture-title-home .slider li.top-anim1 {
  animation: top-cycle 20s linear infinite;
}
.content .picture-title-home .slider li.top-anim2 {
  animation: top-cycle2 20s linear infinite;
}
.content .picture-title-home .slider li.top-anim3 {
  animation: top-cycle3 20s linear infinite;
}
.content .picture-title-home .slider li.top-anim4 {
  animation: top-cycle4 20s linear infinite;
}
.content .picture-title-home .slider li.top-anim5 {
  animation: top-cycle5 20s linear infinite;
}
.content .picture-title-home .slider li.top-anim6 {
  animation: top-cycle6 20s linear infinite;
}
.content .picture-title-home .slider li.top-anim7 {
  animation: top-cycle7 20s linear infinite;
}
.content .picture-title-home .slider li.top-anim8 {
  animation: top-cycle8 20s linear infinite;
}
.content .picture-title-home .slider li.bottom-anim1 {
  animation: bottom-cycle 20s linear infinite;
}
.content .picture-title-home .slider li.bottom-anim2 {
  animation: bottom-cycle2 20s linear infinite;
}
.content .picture-title-home .slider li.bottom-anim3 {
  animation: bottom-cycle3 20s linear infinite;
}
.content .picture-title-home .slider li.bottom-anim4 {
  animation: bottom-cycle4 20s linear infinite;
}
@keyframes top-cycle {
  0% {
    top: 0px;
  }
  4% {
    top: 0px;
  }
  16% {
    top: 0px;
    opacity: 1;
    z-index: 0;
  }
  20% {
    top: 325px;
    opacity: 0;
    z-index: 0;
  }
  21% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
  50% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
  92% {
    top: -325px;
    opacity: 0;
    z-index: 0;
  }
  95% {
    top: -325px;
    opacity: 0;
  }
  100% {
    top: 0px;
    opacity: 1;
  }
}
@keyframes top-cycle2 {
  0% {
    top: -325px;
    opacity: 0;
  }
  14% {
    top: -325px;
    opacity: 0;
  }
  16% {
    top: 0px;
    opacity: 1;
  }
  22% {
    top: 0px;
    opacity: 1;
  }
  26% {
    top: 0px;
    opacity: 1;
    z-index: 0;
  }
  30% {
    top: 325px;
    opacity: 0;
    z-index: 0;
  }
  26% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
  100% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
}
@keyframes top-cycle3 {
  0% {
    top: -325px;
    opacity: 0;
  }
  18% {
    top: -325px;
    opacity: 0;
  }
  22% {
    top: 0px;
    opacity: 1;
  }
  26% {
    top: 0px;
    opacity: 1;
  }
  30% {
    top: 0px;
    opacity: 1;
    z-index: 0;
  }
  34% {
    top: 325px;
    opacity: 0;
    z-index: 0;
  }
  38% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
  100% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
}
@keyframes top-cycle4 {
  0% {
    top: -325px;
    opacity: 0;
  }
  30% {
    top: -325px;
    opacity: 0;
  }
  34% {
    top: 0px;
    opacity: 1;
  }
  38% {
    top: 0px;
    opacity: 1;
  }
  42% {
    top: 0px;
    opacity: 1;
    z-index: 0;
  }
  46% {
    top: 325px;
    opacity: 0;
    z-index: 0;
  }
  50% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
  100% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
}
@keyframes top-cycle5 {
  0% {
    top: -325px;
    opacity: 0;
  }
  42% {
    top: -325px;
    opacity: 0;
  }
  46% {
    top: 0px;
    opacity: 1;
  }
  50% {
    top: 0px;
    opacity: 1;
  }
  54% {
    top: 0px;
    opacity: 1;
    z-index: 0;
  }
  58% {
    top: 325px;
    opacity: 0;
    z-index: 0;
  }
  62% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
  100% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
}
@keyframes top-cycle6 {
  0% {
    top: -325px;
    opacity: 0;
  }
  54% {
    top: -325px;
    opacity: 0;
  }
  58% {
    top: 0px;
    opacity: 1;
  }
  62% {
    top: 0px;
    opacity: 1;
  }
  64% {
    top: 0px;
    opacity: 1;
    z-index: 0;
  }
  68% {
    top: 325px;
    opacity: 0;
    z-index: 0;
  }
  72% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
  100% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
}
@keyframes top-cycle7 {
  0% {
    top: -325px;
    opacity: 0;
  }
  64% {
    top: -325px;
    opacity: 0;
  }
  68% {
    top: 0px;
    opacity: 1;
  }
  72% {
    top: 0px;
    opacity: 1;
  }
  76% {
    top: 0px;
    opacity: 1;
    z-index: 0;
  }
  80% {
    top: 325px;
    opacity: 0;
    z-index: 0;
  }
  84% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
  100% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
}
@keyframes top-cycle8 {
  0% {
    top: -325px;
    opacity: 0;
  }
  76% {
    top: -325px;
    opacity: 0;
  }
  80% {
    top: 0px;
    opacity: 1;
  }
  84% {
    top: 0px;
    opacity: 1;
  }
  96% {
    top: 0px;
    opacity: 1;
    z-index: 0;
  }
  100% {
    top: 325px;
    opacity: 0;
    z-index: 0;
  }
}
@keyframes bottom-cycle {
  0% {
    top: 0px;
  }
  4% {
    top: 0px;
  }
  16% {
    top: 0px;
    opacity: 1;
    z-index: 0;
  }
  20% {
    top: 325px;
    opacity: 0;
    z-index: 0;
  }
  21% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
  50% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
  92% {
    top: -325px;
    opacity: 0;
    z-index: 0;
  }
  96% {
    top: -325px;
    opacity: 0;
  }
  100% {
    top: 0px;
    opacity: 1;
  }
}
@keyframes bottom-cycle2 {
  0% {
    top: -325px;
    opacity: 0;
  }
  16% {
    top: -325px;
    opacity: 0;
  }
  20% {
    top: 0px;
    opacity: 1;
  }
  24% {
    top: 0px;
    opacity: 1;
  }
  36% {
    top: 0px;
    opacity: 1;
    z-index: 0;
  }
  40% {
    top: 325px;
    opacity: 0;
    z-index: 0;
  }
  41% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
  100% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
}
@keyframes bottom-cycle3 {
  0% {
    top: -325px;
    opacity: 0;
  }
  36% {
    top: -325px;
    opacity: 0;
  }
  46% {
    top: 0px;
    opacity: 1;
  }
  56% {
    top: 0px;
    opacity: 1;
  }
  76% {
    top: 0px;
    opacity: 1;
    z-index: 0;
  }
  80% {
    top: 325px;
    opacity: 0;
    z-index: 0;
  }
  81% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
  100% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
}
@keyframes bottom-cycle4 {
  0% {
    top: -325px;
    opacity: 0;
  }
  76% {
    top: -325px;
    opacity: 0;
  }
  80% {
    top: 0px;
    opacity: 1;
  }
  84% {
    top: 0px;
    opacity: 1;
  }
  96% {
    top: 0px;
    opacity: 1;
    z-index: 0;
  }
  100% {
    top: 325px;
    opacity: 0;
    z-index: 0;
  }
}
.content hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top-color: currentcolor;
  border-top-style: none;
  border-top-width: 0px;
  border-top: 1px solid #eeeeee;
}
.content span {
  text-align: left;
  width: 100%;
  display: block;
}
.content h2 {
  font: 30px/1em;
  text-transform: uppercase;
  margin: 20px 0 24px 0;
  color: #484848;
  text-align: center;
}
.content h3 {
  font: 300 24px/1em;
  color: #2b3087;
  margin: 10px 0 20px 0;
  text-transform: uppercase;
  width: 100%;
  text-align: center;
}
.content h2.orange {
  font-size: 30px;
  font-weight: bold;
  text-transform: uppercase;
  margin: 20px 0 24px 0;
  color: #484848;
  text-align: center;
}
.content h3.orange {
  font: bold 24px/1em;
  color: #484848;
  margin: 10px 0 20px 0;
  text-transform: uppercase;
}
.content h3.orange a {
  font: bold 24px/1em;
  color: #484848;
  margin: 10px 0 20px 0;
  text-transform: uppercase;
}
.content h4.orange {
  font: bold 16px/16px;
  color: #484848;
  text-transform: uppercase;
  margin: 0 0 22px 0;
  text-align: left;
}
.content .big-city-title {
  text-align: center;
  background-image: url(/pic/city-skyline2.png);
  font-size: 18px;
  color: #000;
  padding-top: 20px;
  padding-bottom: 20px;
  line-height: 150%;
}
.content .big-city-title h1 {
  text-align: center;
  font-size: 40px;
  line-height: 120%;
}
.content .big-city-picture {
  width: 100%;
  font-size: 20px;
  text-transform: uppercase;
  color: #000;
  margin-top: 0;
  margin: 0;
  text-align: center;
  line-height: 200%;
  background-color: #c8c8c8;
}
.content .big-city-picture img {
  width: 100%;
}
.content .wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.15);
  padding: 20px 0 20px 0;
  position: relative;
  background: #ffffff;
  /* -------------------------- START SALES MANAGERS -------------------------- */
  /* --------------------------- END SALES MANAGERS --------------------------- */
}
.content .wrapper .pageHead {
  font-size: 30px;
  text-transform: uppercase;
  margin-left: auto;
  margin-right: auto;
  color: #222;
  text-align: center;
}
.content .wrapper .main-section {
  width: 100%;
  max-width: 1170px;
  text-align: center;
  flex-wrap: wrap;
  display: flex;
  padding: 10px;
}
.content .wrapper .main-section .locations {
  display: block;
  width: 100%;
  padding-top: 20px;
}
.content .wrapper .main-section .locations a {
  color: #007bff;
  text-decoration: none;
  background-color: transparent;
}
.content .wrapper .main-section .locations a:hover {
  color: #484848;
  text-decoration: underline;
}
.content .wrapper .main-section .iconSprite {
  background-image: url("https://www.rentacomputer.com/images/icons/all-icon-sprites.webp");
}
.content .wrapper .main-section .facebookIcon2 {
  background-position: -96px -204px;
  width: 32px;
  height: 32px;
}
.content .wrapper .main-section .twitterIcon2 {
  background-position: -32px -204px;
  width: 32px;
  height: 32px;
}
.content .wrapper .main-section .linkedInIcon2 {
  background-position: -160px -204px;
  width: 32px;
  height: 32px;
}
.content .wrapper .main-section .visaIcon {
  background-position: -62px -16px;
  width: 88px;
  height: 30px;
}
.content .wrapper .main-section .masterCardIcon {
  background-position: -150px -16px;
  width: 50px;
  height: 30px;
}
.content .wrapper .main-section .discoverIcon {
  background-position: -200px -16px;
  width: 47px;
  height: 30px;
}
.content .wrapper .main-section .amxIcon {
  background-position: -247px -16px;
  width: 30px;
  height: 30px;
}
.content .wrapper .main-section .hover-animation {
  display: inline-block;
  position: relative;
  color: #484848;
}
.content .wrapper .main-section .hover-animation:after {
  content: "";
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #484848;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}
.content .wrapper .main-section .hover-animation:hover:after {
  transform: scaleX(1);
  transform-origin: bottom left;
}
.content .wrapper .main-section h2 {
  width: 100%;
  padding: 10px;
}
.content .wrapper .main-section span {
  padding: 10px;
}
.content .wrapper .main-section h1 {
  font-size: 2rem;
  text-align: center;
  padding: 5px;
  width: 100%;
}
.content .wrapper .accordion {
  width: 100%;
}
.content .wrapper .accordion > input[type=checkbox] {
  display: none;
}
.content .wrapper .accordion .content {
  overflow-y: hidden;
  height: 0;
  transition: height 0.3s ease;
  display: flex;
}
.content .wrapper .accordion .content p {
  text-align: left;
}
.content .wrapper .accordion .content > * {
  flex: 1 1 50%;
}
@media only screen and (max-device-width: 816px) {
  .content .wrapper .accordion .content > * {
    flex: 1 1 100%;
  }
  .content .wrapper .accordion .content > * p {
    width: 100%;
  }
}
.content .wrapper .accordion > input[type=checkbox]:checked ~ .content {
  height: auto;
  overflow: visible;
}
.content .wrapper .accordion label {
  display: block;
}
.content .wrapper .accordion {
  margin-bottom: 0.5em;
}
.content .wrapper .accordion > input[type=checkbox]:checked ~ .content {
  padding: 20px;
  border: 1px solid #e8e8e8;
  border-top: 0;
}
.content .wrapper .accordion .handle {
  margin: 0;
  font-size: 1.125em;
  line-height: 1.2em;
}
.content .wrapper .accordion label {
  color: #333;
  cursor: pointer;
  font-weight: bold;
  padding: 20px;
  border-radius: 15px;
  background: #e8e8e8;
}
.content .wrapper .accordion label:hover,
.content .wrapper .accordion label:focus {
  background: #3658aa;
  transition: 0.7s;
  color: #ffffff;
  box-shadow: 3px -3px 5px #494949;
}
.content .wrapper #member-container {
  width: 100%;
  text-align: center;
}
.content .wrapper .member {
  display: inline-grid;
  width: 20%;
  height: 80%;
  margin: 10px;
  border-top: 1px solid #484848;
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
  background-color: #f9f9f9;
  position: relative;
  transition: ease all 0.5s;
  min-height: 530px;
}
.content .wrapper .member:hover {
  border-top: 1px solid #484848;
}
.content .wrapper .member img {
  width: 50%;
  height: auto;
  margin: 15px auto;
  display: block;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
}
.content .wrapper .member h2 {
  color: #424242;
  text-align: center;
  width: 100%;
  display: block;
  margin: 10px auto;
  font-family: "Roboto", sans-serif;
  font-size: 18px;
  font-weight: 300;
}
.content .wrapper .who {
  font-family: "Roboto", sans-serif;
  font-size: 13px;
  color: #484848;
  text-align: center;
  display: block;
  max-width: 60%;
  margin: -2px auto;
  padding: 6px;
  font-weight: 300;
}
.content .wrapper .member-text {
  width: 80%;
  text-align: center;
  margin: 12px auto;
  font-family: "Roboto", sans-serif;
  font-size: 12px;
  color: #424242;
  min-height: 140px;
}
@media only screen and (max-device-width: 1300px) {
  .content .wrapper .member {
    width: 40%;
  }
}
@media only screen and (max-device-width: 768px) {
  .content .wrapper .member {
    width: 80%;
  }
}
.content .wrapper .flex-col-3 {
  display: flex;
  flex-wrap: wrap;
  min-width: 25ch;
  margin: 0 auto;
  width: 80%;
  gap: 10px;
  width: 100%;
}
.content .wrapper .flex-col-3 > * {
  flex: 1 1 30%;
}
.content .wrapper .flex-col-3 > * a img {
  margin-left: auto;
  margin-right: auto;
  width: auto;
  display: inline-block;
  -o-object-fit: scale-down;
     object-fit: scale-down;
}
.content .wrapper .flex-col-3 span {
  min-height: 230px;
}
.content .wrapper .flex-col-3 img {
  max-width: 200px;
  max-height: 200px;
  min-height: 200px;
  -o-object-fit: scale-down;
     object-fit: scale-down;
}
.content .wrapper .flex-col-3 ul li {
  font-size: 18px;
  text-align: left;
  font-weight: 700;
  color: #007bff;
  text-decoration: none;
  background-color: transparent;
}
.content .wrapper .flex-col-3 ul li a:link {
  color: #007bff;
}
.content .wrapper .flex-col-3 ul li a:visited {
  color: #007bff;
}
.content .wrapper .flex-col-3 .circle-border picture {
  width: 100%;
  height: auto;
  max-width: 230px;
  border-radius: 100%;
  border: 3px solid #ddd;
  background: none;
  font-size: 40px;
  color: #484848;
  display: inline-block;
  padding: 30px;
}
.content .wrapper .flex-col-3 .circle-border img {
  min-width: 80px;
  width: 100%;
}
@media only screen and (max-device-width: 968px) {
  .content .wrapper .flex-col-3 > * {
    flex: 1 1 50%;
  }
  .content .wrapper .flex-col-3 span {
    min-height: 140px;
  }
}
.content .wrapper .flex-bigger-left-col {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  text-align: center;
}
.content .wrapper .flex-bigger-left-col > *:nth-child(1) {
  flex: 1 1 55%;
}
.content .wrapper .flex-bigger-left-col > *:nth-child(2) {
  flex: 1 1 35%;
}
.content .wrapper .flex-bigger-left-col img {
  width: 100%;
  border-radius: 15px;
}
.content .wrapper .flex-col-2 {
  display: flex;
  flex-wrap: nowrap;
  min-width: 25ch;
  gap: 20px;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .mobile-header-offset {
    margin-top: 50px;
  }
}

@media (min-width: 769px) {
  .mobile-header-offset {
      margin-top: 40px; /* Adjust this value to match your header's height */
  }
}



/* Default settings for .flex-col-2 (for larger screens) */
.flex-col-2 {
  display: flex;
  flex-wrap: nowrap;       /* Side-by-side columns */
  min-width: 25ch;         /* This may be fine on large screens */
  gap: 20px;
  text-align: center;
  width: 100%;
}

/* For very small screens (up to 480px) – force stacking and remove extra width */
@media screen and (max-width: 480px) {
  .flex-col-2 {
    flex-direction: column;
    flex-wrap: wrap;
    min-width: 0 !important; /* Remove the fixed minimum width */
    width: 100%;
    gap: 0;                  /* Remove gaps if they push content off-screen */
  }
  .flex-col-2 .col {
    width: 100%;
    margin: 0;
    padding: 10px 0;
    box-sizing: border-box;
  }
  /* Remove any fixed aspect ratio on image containers */
  .flex-col-2 .image-col {
    aspect-ratio: auto !important;
    height: auto !important;
    width: 100%;
  }
  .flex-col-2 .image-col picture img {
    object-fit: cover !important;
    width: 100% !important;
    height: auto !important;
  }
}

/* For screens larger than 480px – keep columns side-by-side */
@media screen and (min-width: 481px) {
  .flex-col-2 {
    flex-direction: row;
    flex-wrap: nowrap;
    min-width: auto; /* Let the content decide width on larger screens */
    width: 100%;
  }
  .flex-col-2 .col {
    flex: 1;
    padding: 10px;
    box-sizing: border-box;
  }
  .flex-col-2 .image-col picture img {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
}

/* Additional override for screens up to 768px if using .responsive-flex */
@media screen and (max-width: 768px) {
  .responsive-flex {
    flex-direction: column !important;
  }
  .responsive-flex .col {
    width: 100% !important;
    padding: 10px 0 !important;
    margin: 0 !important;
  }
}

.content .wrapper .flex-col-2 .color-change {
  font-weight: bold;
  color: #484848;
}
.content .wrapper .flex-col-2 #more {
  display: none;
}
.content .wrapper .flex-col-2 #dots {
  padding: none;
  margin: 0;
}
.content .wrapper .flex-col-2 .read-more {
  font-size: 1em;
  color: blue;
  border: none;
  background-color: transparent;
}
.content .wrapper .flex-col-2 .read-more:hover {
  color: #484848;
  -webkit-text-decoration: underline #484848;
          text-decoration: underline #484848;
  transition: 0.7s ease;
}
.content .wrapper .flex-col-2 ul li a:visited {
  color: #1924f0;
}
.content .wrapper .flex-col-2 ul li a:hover {
  color: #484848;
}
.content .wrapper .flex-col-2 .col ul li {
  text-align: left;
}
.content .wrapper .flex-col-2 span {
  min-height: 220px;
}
.content .wrapper .flex-col-2 span a:visited {
  color: #1924f0;
}
.content .wrapper .flex-col-2 span a:hover {
  color: #484848;
}
.content .wrapper .flex-col-2 h2.orange {
  font-size: 24px;
  font-weight: bold;
  text-transform: uppercase;
  margin: 20px 0 24px 0;
  color: #484848;
  text-align: center;
}
.content .wrapper .flex-col-2 h3.orange {
  font: bold 24px/1em;
  color: #484848;
  margin: 10px 0 20px 0;
  text-transform: uppercase;
}
.content .wrapper .flex-col-2 h3.orange a {
  text-align: center;
  font: bold 24px/1em;
  margin: 10px 0 20px 0;
  text-transform: uppercase;
  text-decoration: none;
}
.content .wrapper .flex-col-2 h3.orange a:hover {
  color: #484848;
  -webkit-text-decoration: underline #484848;
          text-decoration: underline #484848;
}
.content .wrapper .flex-col-2 h4.orange {
  font: bold 16px/16px;
  color: #484848;
  text-transform: uppercase;
  margin: 0 0 22px 0;
  text-align: left;
}
.content .wrapper .flex-col-2 h2 {
  font: 30px/1em;
  text-transform: uppercase;
  margin: 20px 0 24px 0;
  color: #484848;
}
.content .wrapper .flex-col-2 a:hover {
  color: #484848;
  -webkit-text-decoration: #484848 underline;
          text-decoration: #484848 underline;
}
.content .wrapper .flex-col-2 > *:nth-child(1) {
  flex: 1 1 50%;
}
.content .wrapper .flex-col-2 > *:nth-child(1) img {
  max-width: 500px;
  max-height: 350px;
  min-height: 350px;
  -o-object-fit: scale-down;
     object-fit: scale-down;
  width: 100%;
}
.content .wrapper .flex-col-2 > *:nth-child(1) figure img {
  max-width: 30%;
  max-height: -moz-fit-content;
  max-height: fit-content;
  min-height: -moz-fit-content;
  min-height: fit-content;
  -o-object-fit: contain;
     object-fit: contain;
}
.content .wrapper .flex-col-2 > *:nth-child(1) .flex-col-2 > * img {
  width: 100%;
}
.content .wrapper .flex-col-2 > *:nth-child(2) {
  flex: 1 1 50%;
}
.content .wrapper .flex-col-2 > *:nth-child(2) img {
  max-width: 500px;
  max-height: 350px;
  min-height: 350px;
  -o-object-fit: scale-down;
     object-fit: scale-down;
  width: 100%;
}
.content .wrapper .flex-col-2 > *:nth-child(2) figure img {
  max-width: 30%;
  max-height: -moz-fit-content;
  max-height: fit-content;
  min-height: -moz-fit-content;
  min-height: fit-content;
  -o-object-fit: contain;
     object-fit: contain;
}
.content .wrapper .flex-col-2 > *:nth-child(2) .flex-col-2 > * img {
  width: 100%;
}
.content .wrapper .flex-col-2 > * span,
.content .wrapper .flex-col-2 > * a {
  text-align: left;
  font-weight: 100;
}
.content .wrapper .flex-col-2 a:hover {
  color: #484848;
  -webkit-text-decoration: #484848 underline;
          text-decoration: #484848 underline;
}
.content .wrapper .flex-col-2 a img {
  width: 450px;
  height: 300px;
  -o-object-fit: scale-down;
     object-fit: scale-down;
}
@media only screen and (max-device-width: 1300px) {
  .content .wrapper .flex-col-2 a img {
    width: 100%;
    height: auto;
    -o-object-fit: fill;
       object-fit: fill;
  }
  .content .wrapper .flex-col-2 img {
    width: 100%;
    height: auto;
  }
}
@media only screen and (max-device-width: 625px) {
  .content .wrapper .flex-col-2 {
    flex-wrap: wrap;
  }
}
.content .wrapper .list-column {
  display: flex;
  gap: 5px;
  margin: 0 auto;
  width: 80%;
  flex-wrap: wrap;
  text-align: left;
}
.content .wrapper .list-column > * {
  flex: 1 1 24.5%;
}
@media only screen and (max-device-width: 365px) {
  .content .wrapper .list-column > * {
    flex: 1 1 100%;
  }
}
.content .wrapper .home-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 2em;
  padding: 25px;
  min-width: 25ch;
  width: 100%;
}
.content .wrapper .home-nav span {
  min-height: 300px;
}
.content .wrapper .home-nav span a:visited {
  color: #1924f0;
}
.content .wrapper .home-nav span a:hover {
  color: #484848;
}
.content .wrapper .home-nav > * {
  flex: 1 1 20%;
}
.content .wrapper .home-nav .home-nav-col {
  width: 100%;
  height: auto;
}
.content .wrapper .home-nav .home-nav-col ul {
  min-height: 220px;
  padding-left: 0;
  text-align: left;
}
.content .wrapper .home-nav .home-nav-col ul li {
  font-size: 0.9rem;
}
.content .wrapper .home-nav .home-nav-col ul li a {
  font-size: 1.3em;
  font-weight: 700;
  background: transparent;
}
.content .wrapper .home-nav .home-nav-col h3 a {
  font-size: 22px;
  font-weight: 300 bold;
  color: #2b3087;
  margin: 10px 0 20px 0;
  text-transform: uppercase;
}
.content .wrapper .home-nav .home-nav-col h3 a:hover {
  -webkit-text-decoration: underline #484848;
          text-decoration: underline #484848;
}
.content .wrapper .home-nav .home-nav-col a img {
  width: 240px;
  height: 155px;
  -o-object-fit: scale-down;
     object-fit: scale-down;
}
.content .wrapper .home-nav .home-nav-col img {
  width: 100%;
  max-height: 250px;
  min-height: 250px;
  -o-object-fit: scale-down;
     object-fit: scale-down;
}
@media only screen and (max-device-width: 1300px) {
  .content .wrapper .home-nav .home-nav-col a img {
    width: 100%;
    height: auto;
    -o-object-fit: fill;
       object-fit: fill;
  }
}
@media only screen and (max-device-width: 670px) {
  .content .wrapper .home-nav > * {
    flex: 1 1 100%;
  }
  .content .wrapper .home-nav span {
    min-height: 150px;
  }
}
/* main.css */
@media screen and (max-width: 768px) {
  .mobile-view { display: block; }
  .desktop-view { display: none; }
}

@media screen and (min-width: 769px) {
  .mobile-view { display: none; }
  .desktop-view { display: block; }
}

/* Hide the mobile-only content on screens wider than 768px */
.mobile-only {
  display: block;
}

@media screen and (min-width: 769px) {
  .mobile-only {
      display: none;
  }
}

/* Mobile header container styling */
.mobile-view .header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px; /* Increased horizontal padding */
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #fff;  /* Matches desktop header */
  z-index: 1000;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Mobile action buttons update */
.mobile-view .mobile-action-button {
  /* Change the background color to match your desktop accent color */
  background-color: #1d4a8d;
  color: #fff;
  border-radius: 3px; /* Similar to desktop's button styling */
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* (Optional) If you want the mobile header to include the "Request a Quote" button,
   add an extra element in the HTML and style it similarly to desktop */
   .mobile-view .quote-btn-header {
    background-color: black;
    color: #ee2e24;
    padding: 4px 8px;
    border-radius: 3px;
    text-decoration: none;
    margin-left: 10px; /* Space it away from the other buttons */
  }

/* Hide desktop-only content on screens narrower than 769px */
.desktop-only {
  display: none;
}

@media screen and (min-width: 769px) {
  .desktop-only {
      display: block;
  }
}

.content .wrapper .sponsor {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.content .wrapper .sponsor h3 {
  font: 300 24px/1em;
  color: #2b3087;
  margin: 10px 0 20px 0;
  text-transform: uppercase;
  width: 100%;
}
.content .wrapper .sponsor .col {
  flex: 1 1 20%;
  text-align: center;
}
.content .wrapper .sponsor .col li {
  list-style-type: none;
}
.content .wrapper .flex-col-6 {
  display: flex;
}
.content .wrapper .flex-col-6 > * {
  flex: 1 1 16.67%;
  flex-direction: column;
  padding: 10px;
  flex-wrap: wrap;
  border-radius: 15px;
  background-color: #fff;
  margin: 5px;
  min-width: 186px;
}
.content .wrapper .flex-col-6 > * img {
  width: 50%;
  min-height: 90px;
  -o-object-fit: scale-down;
     object-fit: scale-down;
}
.content .wrapper .flex-col-6 > * span {
  text-align: center;
}
@media only screen and (max-device-width: 1200px) {
  .content .wrapper .flex-col-6 {
    flex-wrap: wrap;
  }
}
.content .gray-gradient {
  min-height: 260px;
  background: rgb(57, 57, 57);
  background: linear-gradient(90deg, rgb(57, 57, 57) 0%, rgb(161, 161, 161) 38%, rgb(172, 172, 172) 60%, rgb(57, 57, 57) 100%);
}
.content .gray-gradient2 {
  background: rgb(47, 47, 47);
  background: linear-gradient(45deg, rgb(34, 34, 34) 0%, rgb(136, 136, 136) 25%, rgb(78, 78, 78) 40%, rgb(172, 172, 172) 50%, rgb(78, 78, 78) 60%, rgb(136, 136, 136) 75%, rgb(34, 34, 34) 100%);
}
.content .blue-gradient {
  min-height: 260px;
  background: rgb(0, 3, 151);
  background: linear-gradient(90deg, rgb(0, 2, 109) 0%, rgb(0, 62, 133) 38%, rgb(0, 62, 133) 60%, rgb(0, 2, 109) 100%);
}

#testimonial-display {
  max-width: 80%; /* Limit width for readability */
  text-align: center;
  margin: 0 auto;
  min-height: 100px; /* Ensure consistent height even with short text */
}

#testimonial-display h3 {
  margin: 10px 0; /* Add spacing between text and author */
}

.content .blue-background {
  background-image: url(/pic/blue-background2.jpg);
  min-height: 260px;
  width: 100%;
  padding: 10px;
  background-repeat: no-repeat;
  background-size: cover;
}
.content .parallax {
  /* The image used */
  background-image: url("/pic/adamdog.jpg");
  z-index: 1;
  /* Set a specific height */
  min-height: 260px;
  width: 100%;
  padding: 10px;
  text-align: center;
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: 50% 80%;
  background-size: cover;
  -webkit-background-size: cover;
}
.content .parallax .parallax-container {
  margin: 0 auto;
  width: 60%;
  text-align: left;
}
.content .parallax .parallax-container p {
  font-size: 1.3em;
}
.content .parallax .parallax-container .pageHead {
  font-size: 40px;
  line-height: 1em;
  font-weight: 400;
  text-transform: uppercase;
  font-weight: 700;
  color: #fff;
  width: 100%;
  text-align: center;
  margin: 0 auto 0.5em auto;
  max-width: 1200px;
  padding-top: 30px;
}
.content .parallax h2 {
  color: white;
  font-weight: bold;
  padding-top: 75px;
  padding-bottom: 10px;
  margin-bottom: 20px;
  font: 30px/1em;
  text-align: center;
}
.content .parallax h3 {
  color: white;
  font-weight: bold;
  padding-top: 75px;
  padding-bottom: 50px;
  font: 300 24px/1em;
  margin: 10px 0 20px 0;
  text-transform: uppercase;
}
.content .parallax h2.left {
  text-align: left;
  padding-top: 20px;
}
.content .parallax h1 {
  color: white;
  text-align: left;
  font-weight: bold;
  padding-top: 15px;
  padding-bottom: 10px;
  margin-bottom: 20px;
  font: 32px/1em;
  text-transform: uppercase;
}
.content .parallax p {
  color: white;
  font: 300 20px/1em;
  text-align: left;
}

.wrapper {
  display: flex;
  align-items: center;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.15);
  padding: 20px 0 20px 0;
  position: relative;
  background: #f5f5f5;
}
.wrapper .tabcontent {
  padding: 20px;
}
.wrapper .container {
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}
.wrapper .container i {
  float: left;
  width: 100%;
}
@media screen and (max-device-width: 468px) {
  .wrapper .container .container {
    width: 100%;
  }
}
.wrapper .container h2 {
  font: 30px/1em;
  text-transform: uppercase;
  margin: 20px 0 24px 0;
  color: #484848;
  text-align: left;
}
.wrapper .container .row::after {
  content: " ";
  display: table;
}
.wrapper .container .row .col-lg-6 {
  width: 50%;
  float: left;
}
.wrapper .container .row .col-lg-6 .table1 {
  padding-bottom: 20px;
  display: flex;
  flex-direction: row;
  overflow: visible;
  border-collapse: collapse;
  overflow-x: auto;
}
.wrapper .container .row .col-lg-6 .table1 tr {
  height: 36px;
  vertical-align: middle;
  border-bottom: 1px solid #e9e9e9;
}
.wrapper .container .row .col-lg-6 .table1 td {
  font: 300 14px;
  color: #000;
  padding: 0 5px;
}
.wrapper .container .row .col-lg-6 .table1 td:first-child {
  width: 290px;
}
.wrapper .container .row .col-lg-6 .table1 td a {
  color: #1924f0;
  text-transform: uppercase;
  transition: all 0.25s;
  font-weight: bold;
}
.wrapper .container .row .col-lg-6 .table1 td a:hover {
  color: #494949;
  -webkit-text-decoration: underline #494949;
          text-decoration: underline #494949;
}
@media only screen and (max-device-width: 968px) {
  .wrapper .container .row .col-lg-6 {
    width: 100%;
    align-content: center;
    display: flex;
  }
}
.wrapper .w3-modal {
  z-index: 100;
  display: none;
  padding-top: 20px;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
}
.wrapper .w3-modal-content {
  margin: auto;
  background-color: #fff;
  position: absolute;
  padding: 0;
  outline: 0;
  max-width: 80%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.wrapper .w3-card-4, .wrapper .w3-hover-shadow:hover {
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2), 0 4px 20px 0 rgba(0, 0, 0, 0.19);
}
.wrapper .w3-animate-top {
  position: relative;
  animation: animatetop 0.4s;
}
.wrapper .w3-container, .wrapper .w3-panel {
  padding: 0.01em 16px;
}
.wrapper .w3-bar .w3-button {
  white-space: normal;
}
.wrapper .w3-dropdown-hover.w3-mobile, .wrapper .w3-dropdown-hover.w3-mobile .w3-btn, .wrapper .w3-dropdown-hover.w3-mobile .w3-button, .wrapper .w3-dropdown-click.w3-mobile, .wrapper .w3-dropdown-click.w3-mobile .w3-btn, .wrapper .w3-dropdown-click.w3-mobile .w3-button {
  width: 100%;
}
.wrapper .w3-button:hover {
  color: #000 !important;
  background-color: #ccc !important;
}
.wrapper .w3-btn, .wrapper .w3-button {
  border: none;
  display: inline-block;
  padding: 8px 16px;
  vertical-align: middle;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background-color: inherit;
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
  opacity: 0.4;
}
.wrapper .w3-btn, .wrapper .w3-button {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.wrapper .w3-disabled, .wrapper .w3-btn:disabled, .wrapper .w3-button:disabled {
  cursor: not-allowed;
  opacity: 0.3;
}
.wrapper .w3-dropdown-hover:hover > .w3-button:first-child, .wrapper .w3-dropdown-click:hover > .w3-button:first-child {
  background-color: #ccc;
  color: #000;
}
.wrapper .w3-bar-block .w3-dropdown-hover .w3-button, .wrapper .w3-bar-block .w3-dropdown-click .w3-button {
  width: 100%;
  text-align: left;
  padding: 8px 16px;
}
.wrapper .w3-display-topright {
  position: absolute;
  right: 0;
  top: 0;
}
.wrapper .w3-padding {
  padding: 8px 16px !important;
}
.wrapper .button1 {
  text-align: center;
  text-align: center;
  margin: 0 auto;
  display: block;
}
.wrapper .button1 #g-recaptcha-response {
  display: block !important;
  position: absolute;
  margin: -78px 0 0 0 !important;
  width: 302px !important;
  height: 76px !important;
  z-index: -999999;
  opacity: 0;
}

#testimonial-display {
  max-width: 80%; /* Limit width for readability */
  text-align: center;
  margin: 0 auto;
  min-height: 100px; /* Ensure consistent height even with short text */
}

#testimonial-display h3 {
  margin: 10px 0; /* Add spacing between text and author */
}

@media screen and (max-width: 600px) {
  .blue-gradient {
    padding: 20px; /* Add padding to prevent the section from touching the edges */
  }

  .parallax-container h2.orange {
    font-size: 2.2em; /* Adjust heading font size for smaller screens */
  }

  .parallax-container h3 {
    font-size: 16px; /* Adjust the font size of the testimonial text */
    line-height: 1.5; /* Add line height for readability */
  }

  #testimonial-display h3 {
    font-size: 1em; /* Adjust font size for smaller screens */
    line-height: 1.5;
  }

  .parallax-container h2.orange:last-of-type {
    margin-top: 15px; /* Add margin above the last h2 element */
  }

  .parallax-container a.default-button {
    font-size: 14px; /* Slightly smaller for mobile */
    padding: 10px 20px; /* Adjust padding for smaller buttons */
    margin: 20px 0; /* Add margin for spacing around the button */
    color: #ffffff; /* White text */
    background: #003366; /* Same dark blue background */
    box-shadow: none; /* Remove shadow for a cleaner mobile look */
  }

  .parallax-container a.default-button:hover {
    background: #00509e; /* Brighter blue for hover */
    color: #ffffff; /* Ensure text remains visible */
  }
}

.product-list h2 {
  font-size: 1.75rem; /* Slightly smaller than the main page heading */
  color: #333; /* Neutral, accessible color */
  font-weight: bold; /* Ensures it stands out */
  text-align: center; /* Aligns heading with the product list */
  margin-bottom: 1.5rem; /* Adds spacing below the heading */
  margin-top: 1rem; /* Adds spacing above the heading */
}

 
.product-card {
  max-width: 320px;
  padding: 15px;
  box-sizing: border-box;
}

/* Recommended Uses */
.recommended-uses {
  white-space: nowrap; /* Prevent wrapping to a new line */
  font-size: 1.2rem; /* Adjust font size if needed */
  line-height: 1.5; /* Adjust line height to fit within its container */
  display: inline-block; /* Ensures it remains inline */
}


.specs-uses-card {
  padding: 15px;
  margin-top: 20px; /* Adjusts spacing from the product description */
  margin-bottom: -75px;
}

.specs-uses-card h3 {
  margin-bottom: 5px; /* Adjusts spacing between heading and list */
  font-size: 1.1em;
  color: #333;
  font-weight: bold;
  margin-top: 0; /* Removes top margin for consistency */
}

.specs-uses-card ul {
  list-style-type: disc;
  padding-left: 20px;
  margin: 0 0 -75px; /* Adds a negative bottom margin to reduce space */
}

.specs-uses-card ul li {
  margin-bottom: 5px;
  font-weight: 500;
}

.product-description {
  margin-top: 20px;
}

/* Benefits Section Styles */
.benefits-section-wrapper {
  background-color: #f9f9f9;
  padding: 40px 20px;
}

.benefits-section-wrapper h2 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 20px;
  color: #333;
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin: 0 auto;
  max-width: 1200px;
}

.benefit-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.benefit-item i {
  font-size: 2rem;
  color: #007bff;
  margin-bottom: 10px;
}

.benefit-item p {
  font-size: 1rem;
  color: #555;
  line-height: 1.5;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
  .benefits-section-wrapper {
    padding: 20px 10px;
  }

  .benefits-grid {
    grid-template-columns: 1fr;
  }

  .benefit-item {
    padding: 15px;
  }

  .benefit-item i {
    font-size: 1.5rem;
  }

  .benefit-item p {
    font-size: 0.9rem;
  }
}


/* Link Styling for Benefit Item Text and CTA */
.benefits-section-wrapper a {
  color: #007BFF; /* Updated to blue */
  font-weight: bold;
  text-decoration: underline;
  transition: color 0.3s;
}

.benefits-section-wrapper a:hover {
  color: #0056b3; /* Darker blue on hover */
}

/* Custom Wrapper Styles for Tips Section */
.tips-section {
  background-color: #f5f5f5;
  padding: 3em 1.5em;
  text-align: center;
}

.tips-container {
  max-width: 1200px;
  margin: 0 auto;
}

.tips-section h2 {
  font-size: 2rem;
  color: #333;
  margin-bottom: 1.5em;
}

.tips-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2em;
}

.tips-item {
  background-color: #ffffff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1.5em;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tips-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.tips-item h3 {
  font-size: 1.25rem;
  color: #007bff;
  margin-bottom: 1em;
}

.tips-item p {
  font-size: 1rem;
  color: #555;
  margin-bottom: 1.5em;
  line-height: 1.6;
}

.tips-button {
  display: inline-block;
  padding: 0.75em 1.5em;
  background-color: #2a5db0;
  color: #ffffff;
  text-decoration: none;
  border-radius: 5px;
  font-size: 1rem;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.tips-button:hover {
  background-color: #204e8a;
  transform: translateY(-2px);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .tips-section {
      padding: 2em 1em;
  }

  .tips-item p {
      font-size: 0.9rem;
  }
}



/* Product Image */
.image-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 180px;
  height: 180px;
}

.image-container img {
  width: 100%; /* Ensure the image scales with container */
  height: auto; /* Maintain aspect ratio */
  object-fit: cover; /* Crop if needed to maintain uniform dimensions */
  aspect-ratio: 4 / 3; /* Reserve the exact ratio to prevent layout shifts */
}


/* Product Details */
.product-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.product-details a {
color: #003399;
}

.product-details h3 {
  font-size: 1.5em;
  color: #007bff;
}

/* Horizontal Details */
.horizontal-details {
  display: flex;
  gap: 2em;
  justify-content: space-between;
  flex-wrap: wrap; /* Allow details to wrap on smaller screens */
}

.horizontal-details > div {
  flex: 1;
  min-width: 180px; /* Ensure elements shrink gracefully */
}

.horizontal-details h4 {
  font-size: 1.2em;
  margin-bottom: 0.5em;
  font-weight: bold;
}

.horizontal-details ul {
  list-style: disc;
  padding-left: 1.5em;
  margin: 0;
  text-align: left;
}

.horizontal-details ul li {
  font-size: 1em;
  margin-bottom: 0.5em;
}

/* Price Block and Quote Button Section */
.quote-container {
  position: absolute;
  top: 3em;
  right: 1.5em;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5em;
  text-align: right;
}

.price-block {
  padding: 0 0.5em;
}

@media (max-width: 768px) {
  .price-block {
    padding: 0 0.5em;
    margin-left: 40%;
    width:100%;
  }
  
  .price-button {
    box-shadow: none;
    text-decoration: none;
    display: inline-block;
    padding: 15px 40px;
    margin: 0 auto;
    border-radius: 5px;
    text-transform: uppercase;
    color: #ffffff; /* White text for contrast */
    background: #003366; /* Darker blue for better contrast */
    border: none;
    box-sizing: border-box;
    transition: all 0.25s;
    font-size: 1rem;
    text-align: center;
    opacity: 1;
    font-weight: bold;
    margin-left: 40%;
    width:100%;
  }
  
}

.price-block p {
  margin: 0;
  font-size: 1.25em;
  color: #666;
}

.price-block p strong {
  font-size: 2em;
  color: #333;
}

.default-button {
  box-shadow: none;
  text-decoration: none;
  display: inline-block;
  padding: 15px 40px;
  margin: 0 auto;
  border-radius: 5px;
  text-transform: uppercase;
  color: #ffffff; /* White text */
  background: #003366; /* Dark blue background for better contrast */
  border: none;
  box-sizing: border-box;
  transition: all 0.25s;
  font-size: 1rem;
  text-align: center;
  opacity: 1;
  font-weight: bold;
}

.default-button:hover {
  background: #00509e;
  color: #ffffff !important;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}




/* Scoped Wrapper for Laptops Section */
.laptops-section {
  background-color: #f9f9f9; /* Example background */
  padding: 20px;
  margin: 0 auto;
  width: 100%; /* Prevent horizontal overflow */
  box-sizing: border-box; /* Include padding in width calculations */
  overflow-x: hidden; /* Prevent horizontal scrolling */
}



/* Image Container */
.laptops-section .image-container {
  width: 200px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  overflow: hidden;
}

.laptops-section .image-container img {
  max-width: 100%;
  max-height: 100%;
}

/* Product Details */
.laptops-section .product-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Headings */
.laptops-section .product-details h3 {
  font-size: 1.5rem;
  color: #333;
}

/* Horizontal Details */
.laptops-section .horizontal-details {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.laptops-section .horizontal-details h4 {
  font-size: 1.2rem;
  margin-bottom: 5px;
}

.laptops-section .horizontal-details ul {
  list-style-type: disc;
  padding-left: 20px;
  margin: 0;
}

/* Price and CTA */
.laptops-section .quote-container {
  text-align: right;
  margin-top: 10px;
}

.laptops-section .default-button {
  background: #007bff;
  color: #fff;
  text-decoration: none;
  padding: 10px 20px;
  border-radius: 5px;
  font-weight: bold;
  display: inline-block;
  transition: background 0.3s;
}

.laptops-section .default-button:hover {
  background: #0056b3;
}



/* Laptops Container Styling */
.laptops-container {
  width: 100%;
  max-width: 100%; /* Prevent horizontal scrolling */
  padding: 0; /* Remove extra spacing */
  margin: 0 auto; /* Center content */
  box-sizing: border-box; /* Include padding and border in width */
  overflow-x: hidden; /* Eliminate horizontal scrolling */
}

/* Scoped Wrapper for Laptops Section */
.laptops-container .laptops-section {
  background-color: #f9f9f9; /* Example background */
  padding: 20px;
  margin: 0 auto;
  width: 100%; /* Prevent overflow */
  box-sizing: border-box; /* Include padding in width calculations */
}



/* Image Container */
.laptops-container .laptops-section .image-container {
  width: 200px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  overflow: hidden;
}

.laptops-container .laptops-section .image-container img {
  max-width: 100%;
  max-height: 100%;
}

/* Product Details */
.laptops-container .laptops-section .product-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Headings */
.laptops-container .laptops-section .product-details h3 {
  font-size: 1.5rem;
  color: #333;
}

/* Horizontal Details */
.laptops-container .laptops-section .horizontal-details {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.laptops-container .laptops-section .horizontal-details h4 {
  font-size: 1.2rem;
  margin-bottom: 5px;
}

.laptops-container .laptops-section .horizontal-details ul {
  list-style-type: disc;
  padding-left: 20px;
  margin: 0;
}

/* Price and CTA */
.laptops-container .laptops-section .quote-container {
  text-align: right;
  margin-top: 10px;
}

.laptops-container .laptops-section .default-button {
  background: #007bff;
  color: #fff;
  text-decoration: none;
  padding: 10px 20px;
  border-radius: 5px;
  font-weight: bold;
  display: inline-block;
  transition: background 0.3s;
}

.laptops-container .laptops-section .default-button:hover {
  background: #0056b3;
}



.laptops-container .laptops-section .specs-uses-card {
  margin: 20px 0; /* Properly spaced margins */
  padding: 15px; /* Uniform padding */
}

/* Product Card Styles */
.product-card-horizontal {
  display: flex;
  max-width: 95%; /* Reduce width slightly for margin space */
  margin: 0 auto; /* Center horizontally with equal spacing on left and right */
  align-items: center;
  gap: 2em;
  background: #ffffff;
  padding: 1.5em; /* Equal padding on all sides */
  border-radius: 8px;
  border: 1px solid #ddd;
  margin-bottom: 2em;
  position: relative;
  flex-wrap: wrap; /* Allow wrapping for smaller screens */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Added for consistency */
  box-sizing: border-box; /* Ensure padding is included in the width calculation */
}



/* Laptops Section Specific Styles */
.laptops-section .product-card-horizontal,
.laptops-container .laptops-section .product-card-horizontal {
  display: flex;
  flex-wrap: wrap; /* Ensures responsiveness */
  gap: 20px;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #fff;
  margin-bottom: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Responsive Adjustments */
@media (max-width: 1024px) {
  .product-card-horizontal,
  .laptops-section .product-card-horizontal,
  .laptops-container .laptops-section .product-card-horizontal {
    flex-direction: column; /* Stack elements vertically */
    align-items: flex-start;
    text-align: center; /* Center-align text for better readability */
  }

  .image-container {
    align-self: center;
    width: 150px; /* Standardize image dimensions for smaller screens */
    height: 150px;
    margin: 0 auto;
  }

  .horizontal-details {
    flex-direction: column; /* Stack specifications, uses, and models vertically */
    gap: 15px; /* Add spacing between sections */
  }

  .quote-container {
    position: static;
    align-self: center;
    text-align: center;
    margin-top: 1em;
  }

  .price-block {
    text-align: center;
  }

  .default-button {
    width: 100%; /* Make button full-width for smaller screens */
    text-align: center;
  }
}

/* Further Adjustments for Smaller Screens */
@media (max-width: 768px) {
  .product-card-horizontal,
  .laptops-section .product-card-horizontal,
  .laptops-container .laptops-section .product-card-horizontal {
    padding: 1em;
    gap: 1em;
  }

  .product-details h3 {
    font-size: 1.2em; /* Adjust font size */
  }

  .horizontal-details h4 {
    font-size: 1em; /* Adjust font size */
  }

  .price-block p strong {
    font-size: 1.8em; /* Slightly reduce size on smaller screens */
  }
}

/* Specs and Uses Card */
.laptops-section .specs-uses-card {
  margin: 20px 0; /* Properly spaced margins */
  padding: 15px; /* Uniform padding */
}

.green-section {
  background-color: #e1f3e3; /* Slightly darker light green for improved contrast */
  padding: 3em 1.5em; /* Adds spacing around the content */
  text-align: center; /* Centers text content */
  border-radius: 12px; /* Rounded corners for a modern look */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
  margin: 2em auto; /* Adds spacing above and below */
  max-width: 1200px; /* Ensures content doesn't stretch too wide on large screens */
}

.green-section h2 {
  font-size: 2rem;
  color: #1b5e20; /* Darker green for better contrast */
  margin-bottom: 0.5em; /* Adds space below the heading */
}

.green-section h3 {
  font-size: 1.5rem;
  color: #2e7d32; /* Darker green for subheading contrast */
  margin-bottom: 1em; /* Adds space below the subheading */
}

.green-section p {
  font-size: 1rem;
  line-height: 1.6;
  color: #1b5e20; /* Darker green for body text contrast */
  margin-bottom: 1.5em; /* Space between paragraphs */
}

.primary-button {
  display: inline-block;
  padding: 0.75em 1.5em;
  background-color: #1b5e20; /* Darker green for button background */
  color: #ffffff; /* High-contrast white text */
  font-size: 1rem;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.3s ease, transform 0.2s ease; /* Smooth hover effects */
}

.primary-button:hover {
  background-color: #145214; /* Even darker green on hover */
  transform: translateY(-2px); /* Subtle lift effect */
}

.container {
  max-width: 1100px; /* Adjusts the width for better content alignment */
  margin: 0 auto; /* Centers the container horizontally */
  padding: 0 1.5em; /* Adds padding for smaller screens */
}

.rental-tiers-section {
  background-color: #f9f9f9;
  padding: 3em 1.5em;
  text-align: center;
}

.rental-tiers-section h2 {
  font-size: 2rem;
  color: #1A1A1A;
  margin-bottom: 0.5em;
}

.rental-tiers-section .subtext {
  font-size: 1.2rem;
  color: #262626;
  margin-bottom: 2em;
}


.flex-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5em;
  justify-content: center;
}

.tier-card {
  background: #ffffff; /* White for maximum readability */
  border: 1px solid #ddd; /* Light border for separation */
  border-radius: 8px; /* Rounded corners for a modern look */
  padding: 1.5em; /* Comfortable spacing inside the card */
  max-width: 320px; /* Limit card width for consistency */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover animations */
}

.tier-card:hover {
  transform: translateY(-5px); /* Slight lift on hover */
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15); /* Stronger shadow on hover */
}


.tier-card img, 
.grid-item img, 
.accessories-grid-item img {
  width: 100%; /* Scales to fit the container */
  height: auto; /* Maintains the aspect ratio */
  max-height: 300px; /* Prevents large images from overflowing */
  object-fit: contain; /* Ensures the entire image fits within the space */
  margin-bottom: 1em; /* Adds spacing below the image */
  border-radius: 4px; /* Optional: keeps consistent styling */
}


.tier-card h3 {
  font-size: 1.5rem;
  color: #007bff;
  margin-bottom: 0.5em;
}

.tier-card .price {
  font-size: 1.25rem;
  font-weight: bold;
  color: #388e3c;
  margin-bottom: 0.5em;
  text-align: center;
}

.tier-card p {
  font-size: 1rem;
  color: #555;
  margin-bottom: 1em;
}

.cta-button {
  display: inline-block;
  width: 80%; /* Consistent width for all buttons */
  padding: 0.75em 0; /* Adjust padding for consistent height */
  background-color: #2a5db0; /* Matches the background color from <li> */
  color: #ffffff; /* White text for maximum contrast */
  font-size: 1rem;
  text-align: center; /* Ensures text is centered */
  text-decoration: none;
  border-radius: 5px; /* Rounded corners for uniform styling */
  transition: background-color 0.3s ease, transform 0.2s ease;
  margin: 0 auto; /* Centers button within the card */
}

.cta-button:hover {
  background-color: #204e8a; /* Darker blue for hover state */
  transform: translateY(-2px); /* Slight lift effect */
}



.geo-note { 
  font-size: 1rem; /* Maintain readable font size */
  color: #333; /* Darker gray for better contrast */
  margin-top: 2em; /* Keep spacing consistent */
}


.bulk-laptop-rentals {
  background-color: #f5f5f5;
  padding: 3em 1.5em;
}

.content-section {
  max-width: 1200px;
  margin: 0 auto;
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2em;
  align-items: center;
}

.text-column {
  color: #333;
  line-height: 1.6;
}

.text-column h2 {
  font-size: 2rem;
  color: #007bff;
  margin-bottom: 1em;
}

.text-column p {
  font-size: 1rem;
  margin-bottom: 1.5em;
}

.image-column picture img {
  max-width: 100%;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .text-column {
    text-align: center;
  }

  .cta-button {
    width: 80%; /* Ensures buttons are centered and uniform */
    margin: 1em auto;
  }
}

.peripheral-rentals-section {
  background-color: #f9f9f9;
  padding: 3em 1.5em;
  text-align: center;
}

.peripheral-rentals-section h2 {
  font-size: 2rem;
  color: #333;
  margin-bottom: 1em;
}

.grid-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5em;
  justify-content: center;
}

.grid-item {
  background: #ffffff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1.5em;
  max-width: 320px;
  text-align: left;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%; /* Ensures consistent item height */
}

.grid-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}


.grid-item h3 {
  font-size: 1.25rem;
  color: #007bff;
  margin-bottom: 0.5em;
  text-align: center;
}

.grid-item p {
  font-size: 1rem;
  color: #555;
  margin-bottom: 1em;
  line-height: 1.6;
  flex-grow: 1; /* Ensures equal spacing of content */
}




.bulk-rentals-section {
  background-color: #ffffff;
  padding: 3em 1.5em;
}

.bulk-rentals-content {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.bulk-rentals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2em;
  align-items: center;
  text-align: left; /* Ensures text aligns correctly */
}

.bulk-rentals-text h2 {
  font-size: 2rem;

  margin-bottom: 0.5em;
}

.bulk-rentals-text h3 {
  font-size: 1.5rem;
 
  margin-bottom: 1em;
}

.bulk-rentals-text p {
  font-size: 1rem;
  line-height: 1.6;
  color: #555;
  margin-bottom: 1.5em;
}

.bulk-rentals-image img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle depth */
}


/* Mobile Adjustments */
@media (max-width: 768px) {
  .bulk-rentals-grid {
      grid-template-columns: 1fr;
      text-align: center; /* Ensures mobile-friendly alignment */
  }

  .bulk-rentals-text {
      margin-bottom: 2em;
  }
}

/* Mobile version for smaller screens */
@media (max-width: 768px) {
  .compact-blue-gradient {
      flex-direction: column; /* Stack content vertically */
      min-height: auto; /* Let height adjust based on content */
      padding: 15px; /* Slightly reduce padding for smaller screens */
      background-color: #1d4a8d;
      text-align: center; /* Center-align text */
      color: #ffffff;
  }
}



.customer-stories {
  background: linear-gradient(90deg, rgb(0, 2, 109) 0%, rgb(0, 62, 133) 38%, rgb(0, 62, 133) 60%, rgb(0, 2, 109) 100%);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 0;
}

.customer-stories-container {
  max-width: 800px;
  width: 90%;
  text-align: center;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.customer-stories-title {
  font-size: 2em;
  margin-bottom: 20px;
  color: #ffffff;
}

.testimonial-box {
  min-height: 140px; /* Ensures consistent height */
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 20px;
}

.testimonial-text {
  font-size: 1.2em;
  line-height: 1.5;
  margin: 0;
}

.testimonial-author {
  font-size: 1em;
  margin-top: 10px;
  color: #ffcc00; /* Gold star color */
}

.customer-stories-button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #ffcc00;
  color: rgb(0, 62, 133);
  font-weight: bold;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s, color 0.3s;
}

.customer-stories-button:hover {
  background-color: rgb(0, 62, 133);
  color: white;
}

@media screen and (max-width: 600px) {
  .customer-stories-title {
      font-size: 1.8em;
      color: #ffffff;
  }

  .testimonial-text {
      font-size: 1em;
  }

  .customer-stories-button {
      font-size: 0.9em;
      padding: 8px 16px;
  }
}



/* Desktop-Only Styles */
@media only screen and (min-width: 768px) {

  /* Section with blue gradient background */
  .compact-blue-gradient {
    display: flex; /* Show the section on desktop */
    min-height: 180px; /* Adjust height for compactness */
    background: #1d4a8d;
    align-items: center; /* Vertical centering */
    justify-content: center; /* Horizontal centering */
    padding: 20px; /* Add padding for spacing */
    color: #fff; /* White text for contrast */
}

  /* Content wrapper */
  .compact-content {
    text-align: center;
    max-width: 75%; /* Limit content width */
  }

  /* Heading styles */
  .compact-heading {
    font-size: 1.8rem;
    margin-bottom: 10px;
    line-height: 1.2;
    font-weight: bold;
  }

  /* Paragraph styles */
  .compact-paragraph {
    font-size: 1rem;
    margin-bottom: 15px;
    line-height: 1.4;
    color: #e0e0e0;
    max-width: 1200px;
  }

  /* Button styles */
  .compact-button {
    display: inline-block;
    padding: 10px 20px;
    font-size: 1rem;
    background-color: #007BFF;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
  }

  .compact-button:hover {
    background-color: #0056b3;
  }
}



/* Main desktop header styling */
.nav-flex-col-25 {
  flex: 1 1 25%
}
.nav-flex-col-75 {
  flex: 1 1 75%;
  flex-wrap:wrap;
}
.desktop-header {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #fff;
  color: red;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  padding: 10px 20px;
  display: flex;
  justify-content: center;
}

/* Header container */
.desktop-header-container {
  max-width: 1400px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 10px;
  box-sizing: border-box;
  position: relative;
  margin-left: -250px; 
}

/* Logo */
.desktop-logo {
  flex-shrink: 0;
  padding-top: 10px;
  margin-left: -120px;
  object-fit: contain;
}

.desktop-logo img {
  max-height: 85px;
  max-width: 450px;
  margin-right: 45px;
}

/* Navigation styling */
.desktop-nav {
  flex-grow: 1;
  margin-left: -55px;
  font: 400 14px / 30px 'Audiowide', sans-serif;
}

.desktop-nav-list {
  display: flex;
  justify-content: flex-start;
  gap: 15px; /* Adjust spacing between links */
  padding: 0;
  list-style: none;
}

/* Ensure dropdown menus are positioned correctly */
.desktop-nav-list .dropdown {
  position: relative;
}

.desktop-nav-list li {
  position: relative;
}

/* Links inside navigation */
.desktop-nav-list a {
  padding: 5px 10px;
  font-size: 0.9rem;
  text-decoration: none;
  color: #333;
  white-space: nowrap;
}

/* Hover effect */
.desktop-nav-list a:hover {
  color: black; /* Optional: Change link color on hover */
}

/* Dropdown menu (main and nested) */
.dropdown-menu {
  display: none; /* Hidden by default */
  position: absolute;
  top: 100%; /* Position below the parent item */
  left: 0;
  width: 240px; /* Adjust width for longer text */
  background-color: #ffffff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  list-style: none;
  padding: 0;
  margin: 0;
  z-index: 1000;
  border-radius: 4px;
  flex-direction: column; /* Stack items vertically */
  visibility: hidden; /* Prevent flickering on page load */
  opacity: 0; /* Invisible by default */
  transition: opacity 0.3s ease, visibility 0.3s ease; /* Smooth transition */
}

/* Dropdown menu items */
.dropdown-menu li {
  margin: 0;
  border-bottom: 1px solid #ddd;
}

.dropdown-menu li:last-child {
  border-bottom: none; /* Remove border for the last item */
}

.dropdown-menu li:nth-child(odd) {
  background-color: #f1f3f5;
}

.dropdown-menu li:nth-child(even) {
  background-color: #ffffff;
}

.dropdown-menu a {
  display: block;
  padding: 10px 20px; /* Adjust padding for more space */
  color: #333;
  font-size: 0.9rem;
  text-decoration: none;
  text-align: left;
  transition: background-color 0.3s ease, color 0.3s ease;
  white-space: normal; /* Allow text to wrap within the box */
  word-wrap: break-word; /* Handle long words gracefully */
}

/* Hover effect for dropdown items */
.dropdown-menu a:hover {
  background-color: black;
  color: #fff;
}

/* Show dropdown menu on hover */
.dropdown:hover .dropdown-menu {
  display: flex; /* Show dropdown menu */
  flex-direction: column; /* Ensure vertical stacking */
  visibility: visible; /* Ensure visibility */
  opacity: 1; /* Fade-in effect */
}

/* Nested dropdown menu */
.dropdown-menu .dropdown-menu {
  display: none; /* Hide nested dropdowns by default */
  position: absolute;
  top: 0; /* Align with parent item */
  left: 100%; /* Position to the right of the parent dropdown */
  width: 200px; /* Adjust width for nested dropdown */
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Hide all dropdown menus, including nested ones, by default */
.dropdown-menu,
.dropdown-menu .dropdown-menu {
  display: none !important; /* Ensure dropdown is hidden */
  visibility: hidden !important; /* Ensure it's invisible */
  opacity: 0 !important; /* Ensure no fade-in until triggered */
}


/* Show the main dropdown on hover */
.dropdown:hover > .dropdown-menu {
  display: flex !important; /* Show the main dropdown menu */
  visibility: visible !important;
  opacity: 1 !important;
}

/* Show nested dropdowns only when their parent <li> is hovered */
.dropdown-menu li:hover > .dropdown-menu {
  display: flex !important; /* Show nested dropdowns */
  visibility: visible !important;
  opacity: 1 !important;
}

/* Ensure nested dropdown menu items stack vertically */
.nested-dropdown-menu {
  display: none; /* Hide by default */
  position: absolute;
  top: 0; /* Align with the parent item */
  left: 100%; /* Position to the right of the parent dropdown */
  min-width: 300px; /* Adjust width for longer text */
  background-color: #ffffff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 1000;
  list-style: none; /* Remove bullets */
  padding: 0;
  margin: 0;
  flex-direction: column; /* Stack items vertically */
}

/* Ensure dropdown items align properly */
.nested-dropdown-menu li {
  display: block; /* Ensure list items are block elements */
  width: 100%; /* Ensure they span the full width of the dropdown */
}

/* Links inside nested dropdown */
.nested-dropdown-menu li a {
  display: block; /* Make links block-level elements */
  padding: 10px 20px; /* Adjust padding for spacing */
  color: #333;
  text-decoration: none;
  text-align: left; /* Align text to the left */
  white-space: nowrap; /* Prevent wrapping */
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Show nested dropdown on hover */
.dropdown-menu li:hover > .nested-dropdown-menu {
  display: flex; /* Show the nested dropdown */
  visibility: visible;
  opacity: 1;
}

/* Hover effect for nested dropdown items */
.nested-dropdown-menu li a:hover {
  background-color: #007BFF;
  color: #fff;
}


/* Actions Container */
.desktop-actions {
  display: flex;
  justify-content: flex-end; /* Align to the right of the header */
}

/* Stacked Container for Phone and Email */
.action-container {
  display: flex;
  flex-direction: column; /* Stack items vertically */
  gap: 5px; /* Space between phone and email */
  text-align: right; /* Align text to the right */
}

/* Phone and Email Links */
.action-link {
  font-size: 20px;
  color: #1d4a8d; /* White text */
  text-decoration: none;
  background-color: #ffffff; /* Blue background */
  padding: 5px 10px; /* Add padding for button-like feel */
  margin-left: 5px;
  border-radius: 4px; /* Rounded corners */
  display: flex; /* Align icon and text */
  align-items: center; /* Center icon and text vertically */
  gap: 5px; /* Space between icon and text */
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  font-weight: bold;
}

/* Hover Effect */
.action-link:hover {
  background-color: #1d4a8d; /* Darker blue on hover */
  color: #ffffff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

/* Icon Styling */
.action-icon {
  fill: currentColor; /* Match icon color to text */
  height: 20px;
  width: 20px;
  margin-left:0px;
}


/* Action buttons */
.action-button {
  background-color: #1d4a8d; /* Matching background color */
  color: white;
  border-radius: 50%; /* Circular shape */
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 40px;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.action-button:hover {
  background-color: #163d6e; /* Darker shade for hover */
}

/* Quote button */
.quote-btn {
  background-color: #1d4a8d;
  color: #fff;
  padding: 8px 16px;
  border-radius: 4px;
  text-decoration: none;
  position: center;
}

.quote-btn:hover {
  background-color: #163d6e;
}

/* Quote Header button */
.quote-btn-header {
  background-color: black;
  padding: 4px 8px;
  border-radius: 5px;
  text-decoration: none;
  margin-right: 20px;  /* Shifts the button 20px left from the screen edge */
}

.quote-btn-header:hover {
  background-color: #163d6e;
}



/* Mobile Styles: Hide Desktop Header */
@media only screen and (max-width: 767px) {
  .desktop-header-container {
    display: none; /* Hide header on mobile devices */
  }
}

ul.custom-bullets {
  list-style: none; /* Remove default bullet points */
  padding-left: 0; /* Remove default padding */
}

ul.custom-bullets li {
  position: relative; /* Position for the `::before` pseudo-element */
  margin-bottom: 10px; /* Add spacing between items */
  padding-left: 20px; /* Space for the arrow */
  color: white; /* Text color */
}

ul.custom-bullets li::before {
  content: "→"; /* Unicode for a right arrow */
  position: absolute;
  left: 0; /* Align the arrow to the left */
  color: #ee2e24; /* Arrow color */
  font-size: 1.2em; /* Arrow size */
  line-height: 1; /* Match line height of text */
  top: 50%; /* Start by vertically centering */
  transform: translateY(-65%); /* Slight adjustment upwards */
}

/* Fix horizontal scroll issue */
.info-section {
  background-color: black;
  padding: 20px;
  color: white;
  overflow-x: hidden; /* Prevents content from overflowing */
  max-width: 100%; /* Ensures the section doesn’t exceed the screen width */
}

.info-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px; /* Ensures content doesn’t overflow */
  width: 100%; /* Forces it to stay inside viewport */
  box-sizing: border-box; /* Includes padding in width calculation */
}

.info-col {
  flex: 1;
  min-width: 300px;
  padding: 10px;
  box-sizing: border-box; /* Ensures proper width handling */
}

/* Make sure images inside info-col do not cause overflow */
.info-col img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Ensure text doesn’t exceed the screen width */
.info-col h3, 
.info-col h4, 
.info-col p {
  max-width: 100%; 
  word-wrap: break-word; /* Prevents long words from extending beyond screen */
}

/* For smaller screens, stack columns vertically */
@media screen and (max-width: 600px) {
  .info-container {
      flex-direction: column;
  }
}

.carousel-slide img {
  width: 100%;
  height: auto;
  display: block;
}

.carousel-caption-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  color: white;
  font-size: 48px;
  font-weight: bold;
  text-align: center;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
  padding: 0 10px;
  max-width: 90%;
  line-height: 1.2;
}

.carousel-caption-overlay a {
  color: white;
  text-decoration: none;
}

@media only screen and (max-width: 768px) {
  .carousel-caption-overlay {
    font-size: 16px;
    transform: translate(-50%, -50%);
  }
  .carousel-slide img {
    margin-top: 50px;
  }
}

@media only screen and (max-width: 480px) {
  .carousel-caption-overlay {
    font-size: 16px;
    transform: translate(-50%, -50%);
  }
}




/*# sourceMappingURL=main.css.map */