@import url("https://fonts.googleapis.com/css2?family=Jost:wght@400;500;700;900&display=swap");

/*===== VARIABLES =====*/

:root {
  --blue-primary: #072659;
  --orange-primary: #ee5512;
  --text-color: #4d4d4d;
  --blue-background: #e1edf8;
  --heading-font: "Jost", sans-serif;
  --paragraph-font: "Jost", sans-serif;
}

/*===== RESETS =====*/

*,
::after,
::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  margin: 0;
  overflow-x: hidden;
  font-family: var(--paragraph-font);
}

.for-overflow {
  overflow-x: hidden;
}

ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
}

/*===== UTILITY CLASSES =====*/

.container {
  width: 85%;
  max-width: 1200px;
  margin-inline: auto;
}

.section-padding {
  padding-block: 3rem;
}

h1 {
  font-weight: 900;
  font-size: clamp(2.25rem, 0.9626rem + 2.6856vw, 3.3125rem);
  font-family: var(--heading-font);
  text-shadow: 0 0 4px rgb(0 0 0 / 40%);
  color: white;
}

.ask-btn {
  border: 1px solid white;
  background-color: transparent;
  color: white;
  font-size: 1.1rem;
  font-family: var(--heading-font);
  padding-block: 1.75rem;
  padding-inline: 3.5rem;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.ask-btn:hover {
  color: var(--orange-primary);
  background-color: white;
}

.section-heading {
  font-family: var(--heading-font);
  font-weight: 900;
  font-size: clamp(1.25rem, 0.9255rem + 1.4423vw, 2.1875rem);
  color: var(--blue-primary);
  text-align: center;
  margin-bottom: 3rem;
}

/*===== SHOWCASE STYLES =====*/

.showcase .showcase-image {
  width: 100%;
  height: clamp(27rem, 10.415rem + 34.5972vw, 40.6875rem);
  background-color: var(--blue-primary);
  position: relative;
}

.showcase .showcase-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.showcase .showcase-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--blue-primary);
  opacity: 0.72;
}

header {
  position: absolute;
  top: 0;
  width: min(85%, 1200px);
  left: 50%;
  transform: translateX(-50%);
  padding-block: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

header ul {
  display: flex;
  gap: 3rem;
  font-family: var(--heading-font);
}

header a {
  text-decoration: none;
  color: white;
  position: relative;
  transition: all 0.3s ease;
}

header a::after {
  content: "";
  position: absolute;
  bottom: -20%;
  width: 0;
  height: 1px;
  background-color: var(--orange-primary);
  transition: width 0.3s ease;
}

header a:hover {
  color: var(--orange-primary);
}

header a:hover::after {
  width: 100%;
}

header .call {
  display: flex;
  gap: 1rem;
  font-size: 1.1rem;
  font-family: var(--heading-font);
  font-weight: 900;
  text-shadow: 0 0 4px rgb(0 0 0 / 40%);
  color: white;
}

.showcase .showcase-body {
  width: min(1200px, 85%);
  position: absolute;
  top: clamp(17rem, 6.9278rem + 21.0111vw, 25.3125rem);
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
}

.showcase .showcase-body .main-message {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.showcase .showcase-body span {
  display: block;
  color: var(--orange-primary);
  text-shadow: 0 0 4px rgb(0 0 0 / 40%);
}

.showcase .showcase-body .showcase-body-image {
  width: min(29vw, 377px);
  height: min(40vw, 395px);
  background-image: url("../images/internet-3.svg");
  background-repeat: no-repeat;
  background-size: contain;
  position: relative;
}

.showcase .showcase-body .showcase-body-image .pulsating {
  width: clamp(3.125rem, -2.8577rem + 12.4803vw, 8.0625rem);
  height: clamp(3.125rem, -2.8577rem + 12.4803vw, 8.0625rem);

  position: absolute;
  top: clamp(5.75rem, 2.2664rem + 7.267vw, 8.625rem);
  left: clamp(4.125rem, 2.0045rem + 4.4234vw, 5.875rem);
  display: flex;
  align-items: center;
  justify-content: center;
}

.showcase .showcase-body .showcase-body-image .pulsating .inner {
  width: clamp(3.125rem, 1.156rem + 4.1074vw, 4.75rem);
  height: clamp(3.125rem, 1.156rem + 4.1074vw, 4.75rem);
  background-color: white;
  border-radius: 50%;
  position: relative;
  display: grid;
  place-items: center;
  isolation: isolate;
}

.showcase .showcase-body .showcase-body-image .pulsating .inner img {
  position: absolute;
  z-index: 1;
}

.inner::after,
.inner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-color: white;
}

.inner::before {
  z-index: -2;
  opacity: 0.4;
  transform: scale(1.5);
}

.inner::after {
  opacity: 0.7;
  z-index: -1;
  transform: scale(1.3);
}

/*===== PRICING STYLES =====*/

.price .container {
  width: clamp(45rem, 29.8101rem + 31.6456vw, 57.5rem);
  height: 600px;
  --multiplier: 1;
  position: relative;
  isolation: isolate;
  margin-bottom: 3rem;
}

.price .container .price-card {
  width: clamp(15rem, 8.9241rem + 12.6582vw, 20rem);

  background-color: white;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  border-radius: 10px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: all 0.5s ease;
  cursor: pointer;
  padding-block: 3.25rem;
  font-family: var(--heading-font);
}

.price .container .price-card:nth-child(2) {
  left: clamp(15rem, 10.7468rem + 8.8608vw, 18.5rem);
}

.price .container .price-card:nth-child(3) {
  right: 0;
  z-index: -1;
}

.price .container .price-card[data-activeprice] {
  z-index: 2;
  transform: scale(1.2) translateY(0);
  top: 11%;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  --multiplier: 1.05;
}

.price .container .price-card .package-title {
  width: fit-content;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.price .container .price-card .package-title .package-name {
  font-size: calc(1rem * var(--multiplier));
  font-weight: 400;
  color: var(--text-color);
}

.price .container .price-card .package-title .package-bandwidth {
  font-size: calc(32px * var(--multiplier));
  font-weight: 900;
  color: var(--orange-primary);
}

.price .container .price-card .package-title .underline {
  width: calc(60px * var(--multiplier));
  height: 3px;
  border-radius: 50px;
  background-color: var(--blue-primary);
  margin-block: 0.5rem;
}

.price .container .price-card .package-title .package-price {
  display: flex !important;
  flex-direction: column;

  line-height: 1;
  color: var(--orange-primary);
  width: fit-content;
  margin-inline: auto;
  align-items: center;
}

.price .container .price-card .package-title .package-price .actual-price {
  font-size: calc(28px * var(--multiplier));
  font-weight: 900;
  font-family: var(--heading-font);
}

.price .container .price-card .price-card-body {
  margin-top: 0.75rem;
  color: var(--text-color);
  width: 180px;
  margin-inline: auto;
  text-align: center;
  font-size: calc(1rem * var(--multiplier));
}

.price .container .price-card .price-cta {
  margin-top: 2rem;
  width: fit-content;
  margin-inline: auto;
}

.price .container .price-card .price-cta button {
  font-size: 1rem;
  font-family: var(--heading-font);
  padding-block: 1.5rem;
  padding-inline: 3rem;
  border-radius: 50px;
  background-color: transparent;
  border: 1px solid var(--orange-primary);
  color: var(--orange-primary);
  cursor: pointer;
}

.price .container .price-card[data-activeprice] .price-cta button {
  background: var(--orange-primary);
  color: white;
}

/*===== FEATURES STYLES =====*/

.features {
  background-color: var(--blue-background);
  padding-block: 3rem;
}

.features .container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: clamp(45.625rem, 10.6883rem + 72.7848vw, 74.375rem);
}

.features .container .feature-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.features .container .feature-card .feature-icon {
  width: clamp(8.125rem, 6.606rem + 3.1646vw, 9.375rem);
  height: clamp(8.125rem, 6.606rem + 3.1646vw, 9.375rem);
  background-color: white;
  border-radius: 50%;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  display: grid;
  place-items: center;
}

.features .container .feature-card h3 {
  font-weight: 700;
  font-size: clamp(1.1rem, 0.9177rem + 0.3797vw, 1.25rem);
  font-family: var(--heading-font);
  color: var(--blue-primary);
  text-align: center;
}

/*===== LOCATIONS STYLES =====*/

.locations {
  width: 100vw;

  background-color: var(--blue-primary);
  background-image: url("../images/internet-4.webp");
  background-repeat: no-repeat;
  background-size: cover;
  padding-bottom: 3rem;
}

.locations .section-heading {
  text-align: start;
  color: white;
}

.locations .areas {
  width: 516px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  font-size: 18px;
  text-transform: uppercase;
  margin-bottom: 3rem;
}

.locations .areas .area {
  margin-bottom: 0.75rem;
  display: flex;
  gap: 0.75rem;
  align-items: center;
  color: white;
}

.locations .areas .area i {
  color: var(--orange-primary);
}

/*===== USES STYLES =====*/

.uses .uses-image {
  width: 650px;
  height: 596px;
  margin-inline: auto;
  position: relative;
}

.uses .uses-image img {
  width: 100%;
  aspect-ratio: 650 / 596;
}

.uses .uses-image .use-title {
  position: absolute;
  font-size: 24px;
  font-weight: 700;
  color: var(--blue-primary);
  text-align: center;
  line-height: 1;
}

.uses .uses-image .meeting {
  top: 180px;
  left: 20px;
}

.uses .uses-image .cbc {
  top: 185px;
  right: 20px;
}

.uses .uses-image .entertainment {
  left: 245px;
  bottom: -35px;
}

/*===== TESTIMONIALS STYLES =====*/

.testimonials .section-heading {
  margin-bottom: 3rem;
}

.testimonials .testimonial-icon {
  width: 70px;
  margin-inline: auto;
  margin-bottom: 2rem;
}

.testimonials .testimonial-icon img {
  width: 100%;
  aspect-ratio: 95 / 63;
}

.testimonials .container {
  position: relative;
}

.testimonials .container .controls > div {
  position: absolute;
  width: 39px;
  height: 39px;
  color: var(--orange-primary);
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  top: 40%;
  transform: translateY(-50%);
  cursor: pointer;
  transition: all 0.2s ease;
}

.control[data-activecontrol] {
  color: var(--text-color) !important;
  pointer-events: none;
}

.testimonials .container .controls > div:hover {
  transform: scale(1.2) translateY(-50%);
}

.testimonials .container .controls .right-control {
  right: 0;
}

.testimonials .container .testimonial-body {
  padding-inline: clamp(3rem, -5.1702rem + 12.766vw, 6rem);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.testimonials .container .carousel {
  width: clamp(49rem, 17.3404rem + 49.4681vw, 60.625rem);
  overflow: hidden;
  margin-inline: auto;
}

.testimonials .container .carousel .carousel-inner {
  display: flex;
  width: 200%;

  transition: all 0.5s ease;
  transform: translate(0);
}

.testimonials .container .testimonial-body .testimonial-card {
  padding: 1rem;
  padding-inline: 2rem;
  text-align: center;
  font-family: var(--heading-font);
  font-size: 17px;
  color: var(--text-color);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 320px;
}

.testimonials .container .testimonial-body .testimonial-card h4 {
  font-weight: 700;
  color: var(--blue-primary);
}

/*===== FAQ STYLES =====*/

.faq {
  background-color: var(--blue-background);
}

.faq .jumbotron {
  display: flex;
  justify-content: space-around;
  font-family: var(--heading-font);
  color: var(--blue-primary);
}

/*===== accordion =====*/

.jumbotron .group-three {
  width: 42%;
}

.jumbotron .group-three > div {
  width: 100%;
  text-align: start;
  margin-bottom: 1.25rem;
}

.jumbotron .accordion__label {
  text-align: start;
  color: var(--orange-primary);
  display: block;
  gap: 1.5rem;
  align-items: center;
  font-size: clamp(1rem, 0.9135rem + 0.3846vw, 1.25rem);
  font-weight: var(--small-heading-weight);
  padding: 1rem 0rem 1rem 3rem;
  border: solid 1px var(--blue-primary);
  cursor: pointer;
  text-decoration: none;
  position: relative;

  border-radius: 50px;
}

.question {
  color: var(--blue-primary);
}

.jumbotron .accordion__label::after {
  content: "\f0d7";
  position: absolute;
  top: 40%;
  transform: translateY(-40%);
  right: 10%;
  width: 12px;
  height: 12px;
  /*border: 3px solid var(--red-primary);
    border-top: none;
    border-right: none;
    rotate: -45deg;*/
  font-weight: 900;
  font-family: "Font Awesome 5 Free";
  color: var(--orange-primary);
  transform: content 0.3s ease;
}

.jumbotron .jumbotron-card {
  display: none;
}

.jumbotron .jumbotron-card .jumbtron-para {
  padding-inline: 3rem;
  width: 100%;
  border: solid 1px var(--blue-primary);
  border-top: none;
  border-bottom-right-radius: 50px;
  border-bottom-left-radius: 50px;
}

.jumbotron .jumbtron-para p {
  padding-top: 0.75rem;
  line-height: 1.5;
  border-top: none;
  height: fit-content;
  border-top: none;
  overflow: hidden;
  transition: height 0.5s ease, padding 0.3s linear;
  font-size: 18px;
  padding-bottom: 1.5rem;
}

.jumbotron .accordion__input {
  display: none;
}

.jumbotron .accordion__input:checked ~ .jumbotron-card {
  display: block;
}

.jumbotron .accordion__input:checked ~ .accordion__label {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  border-bottom: none;
}

.jumbotron .accordion__input:checked ~ .jumbotron-card .jumbtron-para p {
  border-top: 1px dotted var(--blue-primary);
}

.jumbotron .accordion__input:checked ~ .accordion__label::after {
  transform: translateY(50%) rotate(0.5turn);
}

/*===== FOOTER STYLES =====*/

footer {
  color: white;
  background-color: var(--blue-primary);
}

footer .upper-footer {
  display: flex;

  padding-bottom: 3rem;
  border-bottom: 1px solid white;
  justify-content: space-between;
}

footer .upper-footer .footer-logo {
  flex-basis: 25%;
}

footer .upper-footer .other-footer-content {
  display: flex;
  justify-content: space-between;
  flex-grow: 1;
}

footer .upper-footer h3 {
  margin-bottom: 1rem;
}

footer .upper-footer .links {
  grid-column-start: 5;
  grid-column-end: 6;
  justify-self: end;
}

footer .upper-footer .links ul {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

footer .upper-footer .links ul a {
  text-decoration: none;
  color: white;
  transition: all 0.3s ease;
}

footer .upper-footer .links ul a:hover {
  color: var(--orange-primary);
}

footer .upper-footer .location {
}

footer .upper-footer .location p {
  margin-bottom: 0.5rem;
}

footer .upper-footer .support {
}

footer .upper-footer .support > div {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

footer .upper-footer .support div:nth-child(2) i {
  font-size: 1.1rem;
}

footer .upper-footer .social {
  width: 25px;
  height: 25px;
  background-color: white;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-top: 0.75rem;
  transition: all 0.3s ease;
}

footer .upper-footer .social a {
  color: var(--blue-primary);
  transition: all 0.3s ease;
}

footer .upper-footer .social a:hover {
  color: var(--orange-primary);
}

footer .lower-footer {
  padding-top: 3rem;
  text-align: center;
}

/*===== MEDIA QUERIES =====*/

/*===== HEADER =====*/

@media screen and (max-width: 767px) {
  header {
    width: clamp(20.625rem, 2.824rem + 79.1155vw, 40.75rem);
  }

  header ul {
    display: none;
  }
}

@media screen and (max-width: 429px) {
  header .call {
    display: none;
  }
}

/*===== SHOWCASE =====*/

@media screen and (min-width: 1400px) {
  .showcase .showcase-image {
    height: 47vw;
  }
}

@media screen and (max-width: 767px) {
  .showcase .showcase-body {
    justify-content: center;
    text-align: center;
  }

  .showcase .showcase-body .showcase-body-image {
    display: none;
  }

  .showcase .showcase-image img {
    object-position: right -9rem bottom 0;
  }
}

@media screen and (max-width: 459px) {
  .showcase .showcase-body .main-message h1 {
    font-size: 1.75rem;
  }
}

/*===== PRICE =====*/

@media screen and (max-width: 767px) {
  .price .container {
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    width: 100%;
  }

  .price .container .price-card {
    position: static;
    transform: none;
    width: 320px;
  }
}

/*===== FEATURES =====*/

@media screen and (max-width: 767px) {
  .features .container {
    grid-template-columns: repeat(2, 1fr);
    grid-row-gap: 2rem;
    width: 90%;
  }

  .features .container .feature-card .feature-icon {
    width: 150px;
    height: 150px;
  }

  .features .container .feature-card h3 {
    font-size: 1.25rem;
  }
}

@media screen and (max-width: 459px) {
  .features .container {
    display: flex;
    flex-direction: column;
  }
}

/*===== LOCATIONS =====*/

@media screen and (max-width: 1099px) {
  .locations {
    background-position: left clamp(-30rem, -46.0243rem + 58.2701vw, -6rem) bottom 0;
  }
}

@media screen and (max-width: 767px) {
  .locations .container {
    width: clamp(18.75rem, -0.7095rem + 86.4865vw, 40.75rem);
  }
}

@media screen and (max-width: 440px) {
  .locations {
    background-position: left;
  }

  .locations .section-heading {
    text-align: center;
  }

  .locations .container {
    grid-column-gap: 1rem;
    text-align: center;
  }

  .locations .areas {
    width: 350px;
    font-size: 17px;
  }
}

/*===== USES =====*/

@media screen and (max-width: 767px) {
  .uses .uses-image {
    width: clamp(21.875rem, 5.3309rem + 73.5294vw, 40.625rem);
    height: clamp(20rem, 4.7794rem + 67.6471vw, 37.25rem);
  }

  .uses .uses-image .use-title {
    font-size: clamp(1rem, 0.5588rem + 1.9608vw, 1.5rem);
  }

  .uses .uses-image .meeting {
    top: clamp(6.25rem, 1.8382rem + 19.6078vw, 11.25rem);
    left: clamp(0.3125rem, -0.5147rem + 3.6765vw, 1.25rem);
  }

  .uses .uses-image .cbc {
    top: clamp(6.5625rem, 2.1507rem + 19.6078vw, 11.5625rem);
    right: clamp(0.3125rem, -0.5147rem + 3.6765vw, 1.25rem);
  }

  .uses .uses-image .entertainment {
    bottom: clamp(-1.5625rem, -1.011rem + -2.451vw, -2.1875rem);
    left: clamp(7.8125rem, 1.1949rem + 29.4118vw, 15.3125rem);
  }
}

/*===== TESTIMONIAL =====*/

@media screen and (max-width: 1023px) {
  .testimonials .container {
    width: 90%;
  }
  .testimonials .container .testimonial-body {
    grid-template-columns: repeat(2, 1fr);
  }

  .testimonials .container .carousel {
    width: clamp(27rem, -4.1321rem + 83.0189vw, 49rem);
  }

  .testimonials .container .carousel .carousel-inner {
    width: 300%;
  }

  .testimonials .container .testimonial-body .testimonial-card {
    width: unset;
    flex-basis: 50%;
  }
}

@media screen and (max-width: 599px) {
  .testimonials .container .testimonial-body {
    grid-template-columns: repeat(1, 1fr);
  }

  .testimonials .container .carousel {
    width: clamp(13.75rem, -1.625rem + 68.3333vw, 24rem);
  }

  .testimonials .container .carousel .carousel-inner {
    width: 600%;
  }

  .testimonials .container .testimonial-body .testimonial-card {
    padding-inline: 1rem;
  }
}

/*===== FAQ =====*/

@media screen and (max-width: 1199px) {
  .faq .jumbotron {
    justify-content: space-between;
  }

  .jumbotron .group-three {
    width: 438px;
  }

  .faq .container {
    width: clamp(57.625rem, 22.1507rem + 55.4286vw, 63.6875rem);
  }
}

@media screen and (max-width: 1023px) {
  .faq .container {
    width: 90%;
  }

  .faq .jumbotron {
    flex-direction: column;
    align-items: center;
  }
}

@media screen and (max-width: 459px) {
  .jumbotron .group-three {
    width: clamp(21.25rem, -0.35rem + 96vw, 27.25rem);
  }

  .jumbotron .accordion__label {
    padding: clamp(2rem, -1.6rem + 16vw, 3rem);
  }

  .jumbotron .jumbotron-card .jumbtron-para {
    padding-inline: clamp(2rem, -1.6rem + 16vw, 3rem);
  }

  .jumbotron .accordion__label::after {
    right: clamp(1.5625rem, -2.7125rem + 19vw, 2.75rem);
  }
}

/*===== FOOTER =====*/

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

@media screen and (max-width: 900px) {
  footer .upper-footer .location {
    justify-self: start;
  }
}

@media screen and (max-width: 850px) {
  footer .upper-footer {
    flex-direction: column;
    gap: 2rem;
  }
}

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

@media screen and (max-width: 599px) {
  footer .upper-footer {
    display: grid;
    width: fit-content;
    margin-inline: auto;
  }

  footer .upper-footer .other-footer-content {
    flex-direction: column;
    gap: 2rem;
  }

  footer .upper-footer .footer-logo {
  }

  footer .upper-footer .links {
  }

  footer .upper-footer .location {
  }

  footer .upper-footer .support {
  }
}

@media screen and (max-width: 460px) {
  footer .upper-footer .footer-logo,
  footer .upper-footer .links,
  footer .upper-footer .location,
  footer .upper-footer .support {
  }
}