/* ! footer start */
.footer-container {
  position: relative;
  /* This makes .el use it as a reference */
  align-self: flex-end;
  flex-direction: column;
  justify-content: space-between;
  margin: auto;
  background: rgb(30, 30, 30);
  overflow: hidden;
  /* optional: prevent .el from overflowing */
  place-items: center;
  width: 100%;

}

.social-buttons-footer {
  display: flex;
  gap: 1.25vw;
  margin-top: 3vh;
}

@media (max-width:1100px) {
  .social-buttons-footer {
    gap: 1.5vw;
    margin-top: 2.5vh;
  }

}

@media (max-width:900px) {
  .social-buttons-footer {
    gap: 2vw;
    margin-top: 2.25vh;
  }

}

@media (max-width:700px) {
  .social-buttons-footer {
    gap: 2.5vw;
    margin-top: 1.75vh;
  }

}

.social-btn-footer {
  border: none;
  font-weight: bold;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
}

.social-btn-footer i {
  font-size: 2.25vw;
  color: rgb(255, 255, 255);
  /* or any px/rem value */
}

@media (max-width:1100px) {
  .social-btn-footer i {

    font-size: 2.5vw !important;
  }

}

@media (max-width:900px) {
  .social-btn-footer i {

    font-size: 3.5vw !important;
  }

}

@media (max-width:700px) {
  .social-btn-footer i {

    font-size: 5.5vw !important;
  }

}


/* Different colors for each */
.social-btn-footer.youtube:hover i {
  color: #ff0000 !important;
}

.social-btn-footer.linkedin:hover i {
  color: #0a66c2 !important;
}

.social-btn-footer.instagram:hover i {
  color: #e4405f !important;
}


.footer-up {
  padding-top: 2vh;
  display: flex;
  flex-direction: row;
  width: 100%;
}

@media (max-width:1100px) {
  .footer-up {

    padding-top: 2vh;
  }

}

@media (max-width:900px) {
  .footer-up {

    padding-top: 2vh;
  }

}

@media (max-width:700px) {
  .footer-up {

    padding-top: 1vh;
  }

}

.contact-info {
  display: flex;
  flex-direction: column;
  margin-top: 2vh;
  margin-left: 2.5vw;
  margin-right: 2.5vw;
  font-weight: bold;
  z-index: 2;
}

@media (max-width:1100px) {
  .contact-info {

    margin-top: 1.5vh;
    margin-left: 2.75vw;
    margin-right: 2.75vw;
  }

}

@media (max-width:900px) {
  .contact-info {

    margin-top: 1vh;
    margin-left: 3vw;
    margin-right: 5vw;
  }

}

@media (max-width:700px) {
  .contact-info {

    margin-top: 0.75vh;
    margin-left: 2.5vw;
    margin-right: 4.5vw;
  }

}

.phone-code {
  font-size: 2.25vw;
  /* or larger if you want */
}

@media (max-width:1100px) {
  .phone-code {
    font-size: 2.35vw;
    /* or larger if you want */
  }

}

@media (max-width:900px) {
  .phone-code {
    font-size: 2.5vw;
    /* or larger if you want */
  }

}

@media (max-width:700px) {
  .phone-code {
    font-size: 3.6vw;
    /* or larger if you want */
  }

}

.phone-number {
  font-size: 4.5vw;
  /* keep it standard or adjust as needed */
  font-weight: bold;
}

@media (max-width:1100px) {
  .phone-number {
    font-size: 4.7vw;
    /* or larger if you want */
  }

}

@media (max-width:900px) {
  .phone-number {
    font-size: 5vw;
    /* or larger if you want */
  }

}

@media (max-width:700px) {
  .phone-number {
    font-size: 7.2vw;
    /* or larger if you want */
  }

}

.phone {
  display: flex;
  flex-direction: column;
  text-align: left;
  color: #b31917;
  line-height: 8vh;
}

@media (max-width:1100px) {
  .phone {
    line-height: 6vh;
    /* or larger if you want */
  }

}

@media (max-width:900px) {
  .phone {
    line-height: 4vh;
    /* or larger if you want */
  }

}

@media (max-width:700px) {
  .phone {
    line-height: 3.5vh;
    /* or larger if you want */
  }

}

@media (max-width: 900px) and (hover: hover) and (pointer: fine) {
  .phone {
    line-height: 6vh;
    /* or larger if you want */
  }
}



.email {
  text-align: left;
  font-weight: bold;
  font-size: 1.25vw;
  color: rgb(255, 255, 255);
  margin-top: 4vh;
  /* ← moves email downward */
}

@media (max-width:1100px) {
  .email {
    font-size: 1.35vw;
    margin-top: 2vh;
    /* or larger if you want */
  }

}

@media (max-width:900px) {
  .email {
    font-size: 1.6vw;
    margin-top: 1vh;
    /* or larger if you want */
  }

}

@media (max-width:700px) {
  .email {
    font-size: 2.25vw;
    margin-top: 0.75vh;
    /* or larger if you want */
  }

}

.address {
  text-align: left;
  font-weight: bold;
  font-size: 1.25vw;
  color: rgb(255, 255, 255);
}

@media (max-width:1100px) {
  .address {
    font-size: 1.35vw;

    /* or larger if you want */
  }

}

@media (max-width:900px) {
  .address {
    font-size: 1.6vw;

    /* or larger if you want */
  }

}

@media (max-width:700px) {
  .address {
    font-size: 2.25vw;
    /* or larger if you want */
  }

}

.links {
  flex: 2;
  width: 100%;
  /* Makes the grid fill horizontally */
  display: grid;
  column-gap: 2.25vw;
  grid-template-columns: repeat(auto-fit, minmax(1vw, auto));
  position: relative;
  z-index: 2;
  margin-top: 2vh;
  margin-right: 1vw;
}

@media (max-width:1100px) {
  .links {
    margin-top: 1.5vh;
    column-gap: 1vw;
    /* or larger if you want */
  }

}

@media (max-width:900px) {
  .links {
    margin-top: 1vh;
    column-gap: 0.75vw;
    /* or larger if you want */
    grid-template-columns: repeat(2, 1fr);
  }

}

@media (max-width:700px) {
  .links {
    margin-top: 0.75vh;
    column-gap: 2.5vw;
    /* or larger if you want */
    grid-template-columns: repeat(2, 1fr);
    /* 3 columns */
  }

}


.links-column .title {
  color: rgb(255, 255, 255);
  font-weight: 500;
  font-size: 1.25vw;
  z-index: 2;
  position: relative;
  display: inline-block;
}

@media (max-width:1100px) {
  .links-column .title {
    font-size: 1.35vw;

    /* or larger if you want */
  }

}

@media (max-width:900px) {
  .links-column .title {
    font-size: 1.6vw;
    max-width: 14vw;
    /* or larger if you want */
  }

}

@media (max-width:700px) {
  .links-column .title {
    font-size: 2.4vw;
    /* or larger if you want */
  }

}

.links-column .title:hover {
  text-decoration: underline;
}

.links-column ul {
  list-style: outside;
  color: #b31917;
  margin-top: 1vh;
}

@media (max-width:1100px) {
  .links-column ul {
    margin-top: 0.75vh;
    /* or larger if you want */
  }

}

@media (max-width:900px) {
  .links-column ul {
    margin-top: 0.5vh;
    /* or larger if you want */
  }

}

@media (max-width:700px) {
  .links-column ul {
    margin-top: 0.25vh;
    /* or larger if you want */
  }

}

.links-column ul li {
  margin-bottom: 1vh;
  font-size: 1vw;
  max-width: 10vw;
}

@media (max-width:1100px) {
  .links-column ul li {
    /* or larger if you want */
    margin-bottom: 0.75vh;
    font-size: 1.1vw;
    max-width: 12vw;
  }

}

@media (max-width:900px) {
  .links-column ul li {
    /* or larger if you want */
    margin-bottom: 0.5vh;
    font-size: 1.25vw;
    max-width: 14vw;
  }

}

@media (max-width:700px) {
  .links-column ul li {
    /* or larger if you want */
    margin-bottom: 0.25vh;
    font-size: 2vw;
    max-width: 15vw;
  }

}

.links-column ul li a {
  color: #b31917;
}

.links-column ul li a:hover {
  text-decoration: underline;
}

/* Style for the button */
.to-top-button {
  background-color: rgb(255, 255, 255);
  border: none;
  padding: 1.5vh 1.25vw;
  font-size: 1.5vw;
  border-radius: 2vw;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s;
  margin-left: 38vw;
  color: #000;
  width: 8.5vw;
}

@media (max-width:1100px) {
  .to-top-button {
    /* or larger if you want */
    padding: 1.25vh 1.3vw;
    font-size: 1.65vw;
    margin-left: 30vw;
    width: 9vw;
    border-radius: 2.25vw;
  }

}

@media (max-width:900px) {
  .to-top-button {
    /* or larger if you want */
    padding: 1vh 1.4vw;
    font-size: 1.8vw;
    margin-left: 20vw;
    width: 10vw;
    border-radius: 2.5vw;
  }

}

@media (max-width:700px) {
  .to-top-button {
    /* or larger if you want */
    padding: 0.8vh 1.45vw;
    font-size: 2vw;
    margin-left: 12vw;
    width: 10.5vw;
    border-radius: 2.75vw;
  }

}

.to-top-button:hover {
  background-color: #b31917;
  color: #ffffff;
}

/* ! footer end */
/* ! copyright start */
/* Container for layout */

.copyright-container {
  position: relative;
  /* This makes .el use it as a reference */
  display: flex;
  width: 100%;
  flex-direction: row;
  place-items: center;
  gap: 2vw;
  padding-bottom: 2vh;
  z-index: 2;
}

@media (max-width:1100px) {
  .copyright-container {
    /* or larger if you want */
    gap: 1.5vw;
    padding-bottom: 1.5vh;

  }

}

@media (max-width:900px) {
  .copyright-container {
    /* or larger if you want */
    gap: 2.5vw;
    padding-bottom: 1vh;
  }

}

@media (max-width:700px) {
  .copyright-container {
    /* or larger if you want */
    gap: 3vw;
    padding-bottom: 0.5vh;

  }

}

:root {
  --size: 0.75vw;
}

@media (min-width: 2500px) {
  :root {
    /* or larger if you want */
    --size: 0.6vw;
  }

}

@media (min-width: 3800px) {
  :root {
    /* or larger if you want */
    --size: 0.4vw;
  }

}

@media (max-width:1100px) {
  :root {
    /* or larger if you want */
    --size: 1.2vw;
  }

}

@media (max-width:900px) {
  :root {
    /* or larger if you want */
    --size: 1.5vw;
  }

}

@media (max-width:700px) {
  :root {
    /* or larger if you want */
    --size: 3vw;
  }

}

.el {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  z-index: 0;
  /* behind everything else */

  background: conic-gradient(from 180deg at 50% 70%,
      hsla(100, 100%, 100%) 0deg,
      #947811 72deg,
      #8a0909 144deg,
      #0d3683 216deg,
      #077026 288deg,
      hsla(30, 60%, 98%) 1turn);

  mask: radial-gradient(circle at 50% 50%, white 2px, transparent 2.5px) 50% 50% / var(--size) var(--size),
    url("https://assets.codepen.io/605876/noise-mask.png") 256px 50% / 256px 256px;
  mask-composite: intersect;
  animation: flicker 20s infinite linear;

}

@keyframes flicker {
  to {
    mask-position: 50% 50%, 0 50%;
  }
}

.copyright-container p {
  font-size: 1.25vw;
  color: rgb(255, 255, 255);
}

@media (max-width:1100px) {
  .copyright-container p {
    /* or larger if you want */
    font-size: 1.4vw;
  }

}

@media (max-width:900px) {
  .copyright-container p {
    /* or larger if you want */
    font-size: 1.7vw;
  }

}

@media (max-width:700px) {
  .copyright-container p {
    /* or larger if you want */
    font-size: 2vw;
  }

}

.logo {
  position: relative;
  z-index: 1;
}

.logo img {
  height: 24vh;
  margin-left: 4vw;
}

@media (max-width:1100px) {
  .logo img {
    height: 22vh;
    margin-left: 3.5vw;
  }

}

@media (max-width:900px) {
  .logo img {
    height: 12vh;
    margin-left: 3vw;
  }

}

@media (max-width:700px) {
  .logo img {
    height: 10vh;
    margin-left: 2vw;
  }

}

/* Center text can shrink if needed */