*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Times New Roman', Times, serif;
    font-size: 10px;
    text-decoration: none;
}

.page .navbar{
  height: 7vw;
  position: sticky;
  top: 0;
  width: 100%;
  background: #2A5795;
  display: flex;
  align-items: center;
  justify-content: space-around;
  z-index: 2;
}

.page .navbar .navbarlogo picture{
  display: block;
  height: 7vw;
  flex-grow: 1;
}

.page .navbar .navbarlogo picture img {
  display: block;
  height: 100%;
  width: 16vw;
}

.page .navbar .navbarelements {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-grow: 0.9;
}

.page .navbar .navbarelements a{
  text-decoration: none;
  color: white;
  font-size: clamp(2rem, 1.5vw, 6rem);
}

.page .navbar .navbarelements a:hover:not(.navbarelement5 a, .dropdownelements a){
  color: #F13B37;
}

.page .navbar .navbarelements .active a:not(.page .navbar .navbarelements .navbarelement2 .dropdownelements a){
  color: #F13B37;
}

.page .navbar .navbarelements i{
  font-size: clamp(2rem, 1.5vw, 6rem);
  margin-left: clamp(0.3rem, 0.3vw, 2rem);
}

.page .navbar .navbarelements button{
  padding: 1rem 2rem;
  background-color: #F13B37;
  cursor: pointer;
}

.page .navbar .navbarelements button a,
.page .navbar .navbarelements button i{
  color: white;
}

.page .navbar .navbarelements .navbarelement2{
  position: relative;
}

.page .navbar .navbarelements .navbarelement2 .dropdownelements{
  position: absolute;
  left: 0;
  top: 100%;
  background: #2A5795;
  height: clamp(20rem, 15vw, 60rem);
  width: clamp(20rem, 15vw, 60rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  opacity: 0;
  transform: translateY(-10px);
  visibility: hidden;
  transition: opacity 0.3s ease-out, transform 0.3s ease-out, visibility 0.3s ease-out;
}

.page .navbar .navbarelements .navbarelement2:hover .dropdownelements{
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

.page .navbar .navbarelements .navbarelement2 .dropdownelements .dropdownelement {
  width: 100%;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}


.page .navbar .navbarelements .navbarelement2 .dropdownelements .dropdownelement:hover{
  background: #F13B37;
}

.page .navbar .menubar{
  display: none;
}

.page .quotebanner {
    background: linear-gradient(to right, #218838, #2A97B9);
    max-width: 100vw;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: clamp(0.3rem, 1.5vw, 1.5rem);
    height: clamp(8rem, 10vw, 10rem);
    margin: 0;
    height: 5vw;
    z-index: 2;
}

.page .quotebanner .content {
    display: flex;
    align-items: center;
}

.page .quotebanner .icon {
    font-size: clamp(4rem, 5.3vw, 6rem);
}

.page .quotebanner .text h1{
    font-size: clamp(3rem, 5vw, 4rem);
}

.page .quotebanner .text span {
    font-size: clamp(2rem, 2.5vw, 2.8rem);
}

.page .quotebanner .button {
    background-color: #2FA7C9;
    color: white;
    padding: 9px 16px;
    text-decoration: none;
    border-radius: 50px;
    font-size: clamp(2rem, 2.5vw, 2.3rem);
    font-weight: normal;
    transition: background-color 0.3s;
}

.page .quotebanner .button:hover {
    background-color: #28a745;
}

.page .form-container {
  display: none;
  width: clamp(60rem, 90%, 90rem);
  height: clamp(39rem, 80%, 40rem);
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
}

.page .form-container.active {
  display: flex;
}

.page .form-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4);
  z-index: 9998;
}

.page .form-overlay.active {
  display: block;
}

.page .left-section {
  width: 50%;
  background-image: url("/Images/Common/Request-Form/webp/form-image-background.webp");
  background-size: cover;
  background-repeat: no-repeat;
  color: black;
  padding: 1rem;
}

.page .left-section picture img{
  height: 100%;
  width: 100%;
}

.page .right-section {
  width: 50%;
  padding: 3rem;
  background-image: url("/Images/Common/Request-Form/webp/form-background.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

.page .right-section h2 {
  margin-bottom: 2rem;
  font-size: 1.5rem;
  color: whitesmoke;
}

.page .close-button {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 3rem;
  height: 3rem;
  background-color: #ccc;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.page .close-button i {
  font-size: 2rem;
  color: white;
}

.page .close-button:hover {
  background-color: #d32f2f;
  transform: scale(1.1);
}

.page .close-button:active {
  transform: scale(0.95);
}

.page .request-form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.page .form-group {
  position: relative;
  margin-bottom: 1.5rem;
}

.page .form-group label {
  background-color: #2FA7C9;
  color: white;
  padding: 8px;
  border-radius: 4px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
  transition: background-color 0.3s ease;
  pointer-events: none;
}

.page .form-group input,
.page .form-group textarea {
  width: clamp(20rem, 40vw, 40rem);
  padding: 1rem 1rem 1rem 3.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1.3rem;
  outline: none;
  transition: border-color 0.3s ease, background-color 0.3s ease;
  background-color: #f5f5f5;
}

.page .form-group input:focus,
.page .form-group textarea:focus {
  border-color: #2FA7C9;
  background-color: #e0f7fa;
}

.page .form-group input:focus + label,
.page .form-group textarea:focus + label {
  background-color: #e0f7fa;
  color: #2FA7C9;
}

.page .form-group input:hover,
.page .form-group textarea:hover {
  background-color: #e3f2fd;
}

.page .form-group input:hover + label,
.page .form-group textarea:hover + label {
  background-color: #e3f2fd;
  color: #1e88e5;
}

.page textarea {
  resize: none;
}

.page .submit-button {
  background-color: #1e88e5;
  color: white;
  border: none;
  padding: 1rem;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  width: clamp(25rem, 80%, 40rem);
  transition: background-color 0.3s ease;
}

.page .submit-button:hover {
  background-color: #43a047;
}

.page .footer{
    width: 100%;
    height: clamp(15rem , 50vw, 93rem);
    background-image: url("/Images/Common/webp/footer/footer.png");
    background-repeat: no-repeat;
    background-size: cover;
}

.page .footer .footercontent{
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    padding-top: clamp(11rem, 12vw, 20rem);
}

.page .footer .footercontent img{
    height: clamp(48rem, 30vw, 50rem);
}

.page .footer .footercontent P{
    width: 50vw;
    color: whitesmoke;
    font-size: 2.5rem;
    text-decoration: none;
    font-size: clamp(2rem, 2vw, 4rem);
    line-height: clamp(2em, 4vw, 2.5em);
}
/* Responsive Media Queries */
@media (max-width: 320px) {
.page .navbar{
    height: clamp(4rem, 4%, 5rem);
    justify-content: space-between;
    position: sticky;
  }
  
  .page .navbar .navbarlogo picture{
    height: clamp(4rem, 14vw, 5rem);
  }
  
  .page .navbar .navbarlogo picture img {
    width: clamp(8rem, 30vw, 8rem);
  }
  
  .page .navbar .navbarelements {
    height: auto;
    width: 80vw;
    width: 20rem;
    display: none;
    flex-direction: column;
    background: #2A5795;
    position: absolute;
    top: 0;
    left: 0;
  }
  
  .page .navbar .navbarelements .navbarelement{
    margin-top: 3rem;
  }

  .page .navbar .navbarelements .navbarelement5{
    margin-bottom: 3rem;
  }

  .page .navbar .navbarelements .navbarelement a{
    font-size: 1.8rem;
  }
  
  .page .navbar .navbarelements .navbarelement2 i{
    font-size: 2rem;
  }
  
  .page .navbar .navbarelements button{
    padding: 1rem 2rem;
  }
  
  .page .navbar .navbarelements .navbarelement2 .dropdownelements{
    position: absolute;
    left: 0;
    top: 100%;
    background: #2A5795;
    height: 20rem;
    width: 20rem;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    z-index: 5;
    transform: translateX(-100%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }

  .page .navbar .navbarelements .navbarelement2 .dropdownelements.active{
    display: flex;
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}
  
  .page .navbar .navbarelements .navbarelement2:hover .dropdownelements{
    display: none;
  }
  
  .page .navbar .navbarelements .navbarelement2 .dropdownelements .dropdownelement {
    width: 100%;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  
  .page .navbar .navbarelements .navbarelement2 .dropdownelements .dropdownelement:hover{
    background: none;
  }

  .page .navbar .menubar{
    display: flex;
  }

  .page .navbar .menubar i{
    font-size: 3rem;
  }

.page .quotebanner {
    padding: 5px;
    height: 5rem;
}

.page .quotebanner .icon {
    font-size: 3rem;
}

.page .quotebanner .text h1{
    font-size: 1.5rem;
}

.page .quotebanner .text span {
    font-size: 0.8rem;
}

.page .quotebanner .button {
    padding: 4px 11px;
    font-size: 0.7rem;
}

.page .form-container {
  width: 30rem;
  height: 40rem;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.page .left-section {
  display: none;
  width: 50%;
  padding: 1rem;
}

.page .right-section {
  width: 100%;
  padding: 3rem;
  position: relative;
}

.page .right-section h2 {
  margin-bottom: 2rem;
  font-size: 1.5rem;
}

.page .close-button {
  top: 1.5rem;
  right: 1.5rem;
  width: 3rem;
  height: 3rem;
  cursor: none;
}

.page .close-button i {
  font-size: 2rem;
}

.page .close-button:hover {
  background-color: none;
  transform: none;
}

.page .form-group {
  margin-bottom: 1.5rem;
}

.page .form-group label {
  padding: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
}

.page .form-group input,
.page .form-group textarea {
  width: 27rem;
  padding: 1rem 1rem 1rem 3.5rem;
  font-size: 1.3rem;
}

.page .form-group input:hover,
.page .form-group textarea:hover {
  background-color: none;
}

.page .form-group input:hover + label,
.page .form-group textarea:hover + label {
  background-color: none;
  color: none;
}

.page .submit-button {
  padding: 1rem;
  font-size: 1rem;
  cursor: none;
  width: 25rem;
}

.page .submit-button:hover {
  background-color: none;
}

.page .footer{
    width: 100%;
    height: 50vw;
    background-image: url("/Images/Common/webp/footer/footer.png");
    background-repeat: no-repeat;
    background-size: cover;
}

.page .footer .footercontent{
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    padding-top: 15vw;
}

.page .footer .footercontent img{
    height: 26vw;
}

.page .footer .footercontent P{
    width: 50vw;
    font-size: 0.6rem;
    line-height: 2em;
}

.product-slide {
    height: 26vh;
  }
  
  .product-slide .productslide{
    gap: 8px;
    padding: 8px;
  }
  
  .product-slide .productslide img{
    height: 8vh;
  }
  
  .product-slide .productslide .content{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 65vw;
    color: white;
  }
  
  .product-slide .productslide .content h1{
    font-size: 1.5rem;
  }
  .product-slide .productslide .content p{
    font-size: 0.8rem;
  }
  
  .product-slide .productslide button{
    padding: 3px 8px;
    background: #2ecc71;
    color: white;
  }
  
  .product-slide .nav-dots {
    bottom: 8px;
  }
  
  .product-slide .dot {
    width: 8px;
    height: 10px;
    margin: 0 5px;
  }
}
/* Extra Small Devices (Phones, 321px - 575px) */
@media (min-width: 321px) and (max-width: 575.98px) {

  .page .navbar{
    height: clamp(5rem, 6vw, 6rem);
    justify-content: space-between;
    position: relative;
  }
  
  .page .navbar .navbarlogo picture{
    height: 100%;
  }
  
  .page .navbar .navbarlogo picture img {
    height: clamp(5rem, 12vw, 4rem);
    width: clamp(10rem, 32vw, 12rem);
  }
  
  .page .navbar .navbarelements {
    height: auto;
    width: clamp(20rem, 60vw, 30rem);
    display: none;
    flex-direction: column;
    background: #2A5795;
    position: absolute;
    top: 0;
    left: 0;
  }
  
  .page .navbar .navbarelements .navbarelement{
    margin-top: 3rem;
  }

  .page .navbar .navbarelements .navbarelement5{
    margin-bottom: 3rem;
  }

  .page .navbar .navbarelements .navbarelement a{
    font-size: 1.8rem;
  }
  
  .page .navbar .navbarelements .navbarelement2 i{
    font-size: 2rem;
  }
  
  .page .navbar .navbarelements button{
    padding: 1rem 2rem;
  }
  
  .page .navbar .navbarelements .navbarelement2 .dropdownelements{
    position: absolute;
    left: 0;
    top: 100%;
    background: #2A5795;
    height: 20rem;
    width: 20rem;
    display: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    opacity: 0;
    transform: translateY(-10px);
    visibility: hidden;
    transition: opacity 0.3s ease-out, transform 0.3s ease-out, visibility 0.3s ease-out;
  }

  .page .navbar .navbarelements .navbarelement2:focus-within .dropdownelements,
  .page .navbar .navbarelements .navbarelement2 .dropdownelements.active{
    display: flex;
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}
  
  .page .navbar .navbarelements .navbarelement2:hover .dropdownelements{
    display: none;
  }
  
  .page .navbar .navbarelements .navbarelement2 .dropdownelements .dropdownelement {
    width: 100%;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  
  .page .navbar .navbarelements .navbarelement2 .dropdownelements .dropdownelement:hover{
    background: none;
  }

  .page .navbar .menubar{
    display: flex;
  }

  .page .navbar .menubar i{
    font-size: clamp(3rem, 8vw, 4rem);
  }

.page .quotebanner {
    padding: clamp(0.3rem, 1.5vw, 1.5rem);
    height: clamp(5rem, 8vw, 5.5rem);
}

.page .quotebanner .icon {
    font-size: clamp(3rem, 5.3vw, 3.5rem);
}

.page .quotebanner .text h1{
    font-size: clamp(1.5rem, 5vw, 2.5rem);
}

.page .quotebanner .text span {
    font-size: clamp(0.8rem, 2.5vw, 1.8rem);
}

.page .quotebanner .button {
    padding: 5px 12px;
    font-size: clamp(0.8rem, 2.5vw, 1.8rem);
    font-weight: normal;
}

page .form-container {
  width: clamp(30rem, 80%, 40rem);
  height: clamp(39rem, 80%, 40rem);
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.page .left-section {
  display: none;
  width: 50%;
  padding: 1rem;
}

.page .right-section {
  width: 100%;
  padding: 3rem;
  position: relative;
}

.page .right-section h2 {
  margin-bottom: 2rem;
  font-size: 1.5rem;
}

.page .close-button {
  top: 1.5rem;
  right: 1.5rem;
  width: 3rem;
  height: 3rem;
  cursor: none;
}

.page .close-button i {
  font-size: 2rem;
}

.page .close-button:hover {
  background-color: none;
  transform: none;
}

.page .form-group {
  margin-bottom: 1.5rem;
}

.page .form-group label {
  padding: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
}

.page .form-group input,
.page .form-group textarea {
  width: clamp(27rem, 64vw, 37rem);
  padding: 1rem 1rem 1rem 3.5rem;
  font-size: 1.3rem;
}

.page .form-group input:hover,
.page .form-group textarea:hover {
  background-color: none;
}

.page .form-group input:hover + label,
.page .form-group textarea:hover + label {
  background-color: none;
  color: none;
}

.page .submit-button {
  padding: 1rem;
  font-size: 1rem;
  cursor: none;
  width: clamp(25rem, 90%, 40rem);
}

.page .submit-button:hover {
  background-color: none;
}

.page .footer{
    width: 100vw;
    height: clamp(15rem ,50vw, 30rem);
    background-image: url("/Images/Common/webp/footer/footer.png");
    background-repeat: no-repeat;
    background-size: cover;
}

.page .footer .footercontent{
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    padding-top: clamp(4rem, 10vw, 6rem);
}

.page .footer .footercontent img{
    height: clamp(8rem, 28vw, 14rem);
}

.page .footer .footercontent P{
    width: 48vw;
    font-size: clamp(0.6rem, 2vw, 1.2rem);
    line-height: 2em;
}

.products .productbanner {
    height: clamp(10rem, 42vw, 15rem);
  }
  
  .products .productbanner{
    gap: 8px;
    padding: 1rem;
  }
  
  .products .productbanner img{
    height: clamp(3rem, 18vw, 10rem);
  }
  
  .products .productbanner .content{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1rem, 3vw, 1.3rem);
    width: 65vw;
    color: white;
  }
  
  .products .productbanner .content h1{
    font-size: clamp(1rem, 4vw, 1.5rem);
  }
  .products .productbanner .content p{
    font-size: clamp(0.7rem, 2vw, 1rem);
  }
  
  .products .productbanner button{
    padding: 0.9vh 2vw;
    background: #2ecc71;
    color: white;
  }
}

/* Small Devices (Landscape Phones, 576px - 767px) */
@media (min-width: 576px) and (max-width: 767.98px){

  .page .navbar{
    height: clamp(5rem, 6vw, 6rem);
    justify-content: space-between;
    position: relative;
  }
  
  .page .navbar .navbarlogo picture{
    height: 100%;
  }
  
  .page .navbar .navbarlogo picture img {
    height: clamp(5rem, 6vw, 6rem);
    width: clamp(10rem, 32vw, 12rem);
  }
  
  .page .navbar .navbarelements {
    height: auto;
    width: clamp(20rem, 60vw, 30rem);
    display: none;
    flex-direction: column;
    background: #2A5795;
    position: absolute;
    top: 0;
    left: 0;
  }
  
  .page .navbar .navbarelements .navbarelement{
    margin-top: 3rem;
  }

  .page .navbar .navbarelements .navbarelement5{
    margin-bottom: 3rem;
  }

  .page .navbar .navbarelements .navbarelement a{
    font-size: 1.8rem;
  }
  
  .page .navbar .navbarelements .navbarelement2 i{
    font-size: 2rem;
  }
  
  .page .navbar .navbarelements button{
    padding: 1rem 2rem;
  }
  
  .page .navbar .navbarelements .navbarelement2 .dropdownelements{
    position: absolute;
    left: 0;
    top: 100%;
    background: #2A5795;
    height: 20rem;
    width: 20rem;
    display: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    opacity: 0;
    transform: translateY(-10px);
    visibility: hidden;
    transition: opacity 0.3s ease-out, transform 0.3s ease-out, visibility 0.3s ease-out;
  }

  .page .navbar .navbarelements .navbarelement2:focus-within .dropdownelements,
  .page .navbar .navbarelements .navbarelement2 .dropdownelements.active{
    display: flex;
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}
  
  .page .navbar .navbarelements .navbarelement2:hover .dropdownelements{
    display: none;
  }
  
  .page .navbar .navbarelements .navbarelement2 .dropdownelements .dropdownelement {
    width: 100%;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .page .navbar .navbarelements .navbarelement2 .dropdownelements .dropdownelement:hover{
    background: none;
  }

  .page .navbar .menubar{
    display: flex;
  }

  .page .navbar .menubar i{
    font-size: clamp(3rem, 8vw, 4rem);
  }

    .page .quotebanner {
        padding: clamp(0.3rem, 1.5vw, 1.5rem);
        height: clamp(5rem, 10vw, 7rem);
    }
    
    .page .quotebanner .icon {
        font-size: clamp(3rem, 5.3vw, 3.5rem);
    }
    
    .page .quotebanner .text h1{
        font-size: clamp(1.5rem, 5vw, 2.5rem);
    }
    
    .page .quotebanner .text span {
        font-size: clamp(0.8rem, 2.5vw, 1.8rem);
    }
    
    .page .quotebanner .button {
        padding: 5px 12px;
        font-size: clamp(0.8rem, 2.5vw, 1.8rem);
        font-weight: normal;
    }

    .page .form-container {
      width: clamp(40rem, 80%, 60rem);
      height: clamp(39rem, 80%, 40rem);
      overflow: hidden;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    
    .page .left-section {
      display: none;
      width: 50%;
      padding: 1rem;
    }
    
    .page .right-section {
      width: 100%;
      padding: 3rem;
      position: relative;
    }
    
    .page .right-section h2 {
      margin-bottom: 2rem;
      font-size: 1.5rem;
    }
    
    .page .close-button {
      top: 1.5rem;
      right: 1.5rem;
      width: 3rem;
      height: 3rem;
      cursor: none;
    }
    
    .page .close-button i {
      font-size: 2rem;
    }
    
    .page .close-button:hover {
      background-color: none;
      transform: none;
    }
    
    .page .form-group {
      margin-bottom: 1.5rem;
    }
    
    .page .form-group label {
      padding: 8px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 1rem;
    }
    
    .page .form-group input,
    .page .form-group textarea {
      width: clamp(37rem, 66vw, 50rem);
      padding: 1rem 1rem 1rem 3.5rem;
      font-size: 1.3rem;
    }
    
    .page .form-group input:hover,
    .page .form-group textarea:hover {
      background-color: none;
    }
    
    .page .form-group input:hover + label,
    .page .form-group textarea:hover + label {
      background-color: none;
      color: none;
    }
    
    .page .submit-button {
      padding: 1rem;
      font-size: 1rem;
      cursor: none;
      width: clamp(25rem, 80%, 40rem);
    }
    
    .page .submit-button:hover {
      background-color: none;
    }

    .page .footer{
        width: 100vw;
        height: clamp(15rem , 50vw, 40rem);
    }
    
    .page .footer .footercontent{
        padding-top: clamp(6rem, 12vw, 10rem);
    }
    
    .page .footer .footercontent img{
        height: clamp(14rem, 30vw, 22rem);
    }
    
    .page .footer .footercontent P{
        width: 48vw;
        font-size: clamp(1rem, 2vw, 1.6rem);
        line-height: 2em;
    }

    .products .productbanner {
        height: clamp(14rem, 45vw, 23rem);
      }
      
      .products .productbanner{
        gap: 20px;
        padding: 2.7rem;
      }
      
      .products .productbanner img{
        height: clamp(10rem, 18vw, 12rem);
      }
      
      .products .productbanner .content{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: clamp(1rem, 3vw, 1.3rem);
        width: 65vw;
        color: white;
      }
      
      .products .productbanner .content h1{
        font-size: clamp(1.5rem, 4.5vw, 2.3rem);
      }
      .product-slide .productslide .content p{
        font-size: clamp(1rem, 2.2vw, 1.8rem);
      }
      
      .products .productbanner button{
        padding: 0.8vh 1vw;
        background: #2ecc71;
        color: white;
      }
}

/* Medium Devices (Tablets, 768px - 991px) */
@media (min-width: 768px) and (max-width: 991.98px) {

  .page .navbar{
    height: clamp(6rem, 8vw, 8rem);
    justify-content: space-between;
    position: relative;
  }
  
  .page .navbar .navbarlogo picture{
    height: 100%;
  }
  
  .page .navbar .navbarlogo picture img {
    height: clamp(6rem, 8vw, 8rem);
    width: clamp(12rem, 34vw, 16rem);
  }
  
  .page .navbar .navbarelements {
    height: auto;
    width: 100%;
    display: none;
    flex-direction: column;
    background: #2A5795;
    position: absolute;
    top: 0;
    left: 0;
  }
  
  .page .navbar .navbarelements .navbarelement{
    margin-top: 3rem;
  }

  .page .navbar .navbarelements .navbarelement5{
    margin-bottom: 3rem;
  }

  .page .navbar .navbarelements .navbarelement a{
    font-size: 1.8rem;
  }
  
  .page .navbar .navbarelements .navbarelement2 i{
    font-size: 2rem;
  }
  
  .page .navbar .navbarelements button{
    padding: 1rem 2rem;
  }
  
  .page .navbar .navbarelements .navbarelement2 .dropdownelements{
    position: absolute;
    left: 0;
    top: 100%;
    background: #2A5795;
    height: 20rem;
    width: 20rem;
    display: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    opacity: 0;
    transform: translateY(-10px);
    visibility: hidden;
    transition: opacity 0.3s ease-out, transform 0.3s ease-out, visibility 0.3s ease-out;
  }

  .page .navbar .navbarelements .navbarelement2:focus-within .dropdownelements,
  .page .navbar .navbarelements .navbarelement2 .dropdownelements.active{
    display: flex;
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}
  
  .page .navbar .navbarelements .navbarelement2:hover .dropdownelements{
    display: none;
  }
  
  .page .navbar .navbarelements .navbarelement2 .dropdownelements .dropdownelement {
    width: 100%;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .page .navbar .navbarelements .navbarelement2 .dropdownelements .dropdownelement:hover{
    background: none;
  }

  .page .navbar .menubar{
    display: flex;
  }

  .page .navbar .menubar i{
    font-size: clamp(4rem, 8vw, 6rem);
  }

    .page .quotebanner {
        padding: clamp(0.3rem, 1.5vw, 1.5rem);
        height: clamp(5rem, 10vw, 7rem);
    }
    
    .page .quotebanner .icon {
        font-size: clamp(3rem, 5.3vw, 3.5rem);
    }
    
    .page .quotebanner .text h1{
        font-size: clamp(1.5rem, 5vw, 2.5rem);
    }
    
    .page .quotebanner .text span {
        font-size: clamp(0.8rem, 2.5vw, 1.8rem);
    }
    
    .page .quotebanner .button {
        padding: 5px 12px;
        font-size: clamp(0.8rem, 2.5vw, 1.8rem);
        font-weight: normal;
    }

    .page .form-container {
      width: clamp(60rem, 90%, 90rem);
      height: clamp(39rem, 80%, 40rem);
      overflow: hidden;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    
    .page .left-section {
      width: 50%;
      padding: 1rem;
    }
    
    .page .right-section {
      width: 50%;
      padding: 3rem;
      position: relative;
    }
    
    .page .right-section h2 {
      margin-bottom: 2rem;
      font-size: 1.5rem;
    }
    
    .page .close-button {
      top: 1.5rem;
      right: 1.5rem;
      width: 3rem;
      height: 3rem;
      cursor: none;
    }
    
    .page .close-button i {
      font-size: 2rem;
    }
    
    .page .close-button:hover {
      background-color: none;
      transform: none;
    }
    
    .page .form-group {
      margin-bottom: 1.5rem;
    }
    
    .page .form-group label {
      padding: 8px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 1rem;
    }
    
    .page .form-group input,
    .page .form-group textarea {
      width: clamp(20rem, 40vw, 40rem);
      padding: 1rem 1rem 1rem 3.5rem;
      font-size: 1.3rem;
    }
    
    .page .form-group input:hover,
    .page .form-group textarea:hover {
      background-color: none;
    }
    
    .page .form-group input:hover + label,
    .page .form-group textarea:hover + label {
      background-color: none;
      color: none;
    }
    
    .page .submit-button {
      padding: 1rem;
      font-size: 1rem;
      cursor: none;
      width: clamp(25rem, 80%, 40rem);
    }
    
    .page .submit-button:hover {
      background-color: none;
    }

    .page .footer{
        width: 100%;
        height: clamp(15rem , 50vw, 48rem);
    }
    
    .page .footer .footercontent{
        padding-top: clamp(6rem, 12vw, 11rem);
    }
    
    .page .footer .footercontent img{
        height: clamp(14rem, 30vw, 27rem);
    }
    
    .page .footer .footercontent P{
        width: 48vw;
        font-size: clamp(1.6rem, 2vw, 2rem);
        line-height: 2em;
    }
    
    .products .productbanner {
        height: clamp(23rem, 55vw, 28.5rem);
      }
      
      .products .productbanner{
        gap: 23px;
        padding: 3rem;
      }
      
      .products .productbanner img{
        height: clamp(14rem, 18vw, 18rem);
      }
      
      .products .productbanner .content{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: clamp(1rem, 3vw, 1.3rem);
        width: 65vw;
        color: white;
      }
      
      .products .productbanner .content h1{
        font-size: clamp(2rem, 6vw, 3rem);
      }
      .products .productbanner .content p{
        font-size: clamp(1.5rem, 3vw, 2rem);
      }
      
      .products .productbanner button{
        padding: 0.8vh 2.5vw;
        background: #2ecc71;
        color: white;
      }
}

/* Large Devices (Small Desktops, 992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .page .quotebanner {
        padding: clamp(0.3rem, 1.5vw, 1.5rem);
        height: clamp(5rem, 10vw, 7rem);
    }
    
    .page .quotebanner .icon {
        font-size: clamp(3rem, 5.3vw, 3.5rem);
    }
    
    .page .quotebanner .text h1{
        font-size: clamp(1.5rem, 5vw, 2.5rem);
    }
    
    .page .quotebanner .text span {
        font-size: clamp(0.8rem, 2.5vw, 1.8rem);
    }
    
    .page .quotebanner .button {
        padding: 5px 12px;
        font-size: clamp(0.8rem, 2.5vw, 1.8rem);
        font-weight: normal;
    }

    .page .footer{
        width: 100%;
        height: clamp(15rem , 50vw, 58rem);
    }
    
    .page .footer .footercontent{
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        padding-top: clamp(6rem, 12vw, 15rem);
    }
    
    .page .footer .footercontent img{
        height: clamp(14rem, 30vw, 30rem);
    }
    
    .page .footer .footercontent P{
        width: 48vw;
        font-size: clamp(1.6rem, 2vw, 2rem);
        line-height: clamp(2em, 4vw, 2.5em);
    }
    
    .products .productbanner {
        height: clamp(26rem, 30vw, 30rem);
      }
      
      .products .productbanner{
        gap: 23px;
        padding: 3rem;
      }
      
      .products .productbanner img{
        height: clamp(13rem, 19vw, 20rem);
      }
      
      .products .productbanner .content{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: clamp(1rem, 3vw, 1.3rem);
        width: 65vw;
        color: white;
      }
      
      .products .productbanner .content h1{
        font-size: clamp(4rem, 8vw, 3rem);
      }
      .products .productbanner .content p{
        font-size: clamp(2rem, 4.5vw, 2.3rem);
      }
      
      .products .productbanner button{
        padding: 1vh 2.8vw;
        background: #2ecc71;
        color: white;
      }
}

/* Extra Large Devices (Laptops, 1200px - 1599px) */
@media (min-width: 1200px) and (max-width: 1599.98px) {
    .page .quotebanner {
        padding: clamp(0.3rem, 1.5vw, 1.5rem);
        height: clamp(7rem, 10vw, 8rem);
    }
    
    .page .quotebanner .icon {
        font-size: clamp(3rem, 5.3vw, 4rem);
    }
    
    .page .quotebanner .text h1{
        font-size: clamp(2rem, 5vw, 3rem);
    }
    
    .page .quotebanner .text span {
        font-size: clamp(1.8rem, 2.5vw, 2rem);
    }
    
    .page .quotebanner .button {
        padding: 7px 14px;
        font-size: clamp(1.8rem, 2.5vw, 2rem);
        font-weight: normal;
    }

    .page .footer{
        width: 100%;
        height: clamp(15rem , 50vw, 78rem);
    }
    
    .page .footer .footercontent{
        padding-top: clamp(11rem, 12vw, 18rem);
    }
    
    .page .footer .footercontent img{
        height: clamp(27rem, 30vw, 38rem);
    }
    
    .page .footer .footercontent P{
        width: 48vw;
        font-size: clamp(2rem, 2vw, 4rem);
        line-height: clamp(2em, 4vw, 2.5em);
    }
}