/* //////////////////////////////////////////////////////////////////////////////////////////////////// */
/* Background Fill */

.section-bg-fill {
  width: 100%;
}

.section-bg-fill-creme {
  background-color: var(--creme);
}

.section-bg-fill-light-pink {
  background-color: var(--pink-light);
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////// */
/* Section */

.section {
  box-sizing: border-box;
  text-align: center;
  padding: 10.4rem 0;
}

@media (min-width: 768px) {
  .section {
    padding: 17.6rem 0;
  }
}

@media (min-width: 1280px) {
  .section {
    text-align: left;
  }
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////// */
/* Home - Services Section */

.section-services {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

@media (min-width: 1280px) {
  .section-services {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    justify-content: end;
    justify-items: end;
    align-content: start;
    align-items: start;
  }
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////// */
/* Home - Projects Section */

.section-projects {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 120rem;
  padding: 10.4rem 0 16.6rem 0;
  margin: auto;
}

@media (min-width: 1024px) {
  .section-projects {
    padding: 17.6rem 0 23.8rem 0;
  }
}

@media (min-width: 1280px) {
  .section-projects {
    align-items: flex-start;
    padding: 17.6rem 0 22.4rem 0;
  }
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////// */
/* Home - About Section */

.section-about {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 7.2rem;
  max-width: 120rem;
  margin: auto;
}

@media (min-width: 1280px) {
  .section-about {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    justify-content: start;
    justify-items: start;
    align-content: start;
    align-items: start;
    gap: 0;
  }
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////// */
/* Home - Pink Lady Section */

.section-pink-lady {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

@media (min-width: 1280px) {
  .section-pink-lady {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    justify-content: end;
    justify-items: end;
    align-content: start;
    align-items: start;
  }
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////// */
/* Home - Contact Section */

.section-contact {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 120rem;
  margin: auto;
}

@media (min-width: 1280px) {
  .section-contact {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    justify-content: start;
    justify-items: start;
    align-content: start;
    align-items: start;
  }
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////// */
/* Services - Card Section Left */

.section-card-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10.4rem 2.4rem 10.4rem 0;
}

@media (min-width: 768px) {
  .section-card-left {
    padding: 17.6rem 2.4rem 17.6rem 0;
  }
}

@media (min-width: 1280px) {
  .section-card-left {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    justify-content: start;
    justify-items: start;
    align-content: start;
    align-items: start;
    padding: 17.6rem 0;
  }
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////// */
/* Services - Card Section Right */

.section-card-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10.4rem 0 10.4rem 2.4rem;
}

@media (min-width: 768px) {
  .section-card-right {
    padding: 17.6rem 0 17.6rem 2.4rem;
  }
}

@media (min-width: 1280px) {
  .section-card-right {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    justify-content: end;
    justify-items: end;
    align-content: start;
    align-items: start;
    padding: 17.6rem 0;
  }
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////// */
/* Fleet - Section */

.section-fleet {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 120rem;
  padding: 10.4rem 0;
  margin: auto;
}

@media (min-width: 768px) {
  .section-fleet {
    padding: 17.6rem 0;
  }
}

@media (min-width: 1280px) {
  .section-fleet {
    align-items: flex-start;
  }
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////// */
/* Legal - Section */

.section-legal {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 120rem;
  padding: 10.4rem 0;
  margin: auto;
}

@media (min-width: 768px) {
  .section-legal {
    padding: 17.6rem 0;
  }
}

@media (min-width: 1280px) {
  .section-legal {
    align-items: flex-start;
  }
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////// */
/* Fleet - Crane Guide Section */

.section-fleet-crane-guide-container {
  height: auto;
  width: 100%;
  overflow: hidden;
}

.crane-guide {
  height: auto;
  width: 100%;
  pointer-events: none;
}

.crane-guide-tablet {
  display: none;
}

.crane-guide-desktop {
  display: none;
}

@media (min-width: 768px) {
  .crane-guide-mobile {
    display: none;
  }

  .crane-guide-tablet {
    display: inline-block;
  }
}

@media (min-width: 1280px) {
  .crane-guide-tablet {
    display: none;
  }

  .crane-guide-desktop {
    display: inline-block;
    border-radius: 3.6rem 0 3.6rem 0;
  }
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////// */
/* Image Container */

.section-image-container {
  height: auto;
  width: 100%;
  overflow: hidden;
}

@media (min-width: 768px) {
  .section-image-container {
    height: auto;
  }
}

@media (min-width: 1280px) {
  .section-image-container-left {
    grid-column: 1;
    grid-row: 1;
  }

  .section-image-container-right {
    grid-column: 2;
    grid-row: 1;
  }
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////// */
/* Section Image */

.section-image {
  height: auto;
  width: 100%;
}

@media (min-width: 1280px) {
  .section-image-left {
    border-radius: 0 3.6rem 0 0;
  }

  .section-image-right {
    border-radius: 3.6rem 0 0 0;
  }
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////// */
/* Section Image Mobile */

.section-image-mobile {
  height: auto;
  width: 100%;
  pointer-events: none;
}

@media (min-width: 768px) {
  .section-image-mobile {
    display: none;
  }
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////// */
/* Section Image Tablet */

.section-image-tablet {
  display: none;
  height: auto;
  width: 100%;
  pointer-events: none;
}

@media (min-width: 768px) {
  .section-image-tablet {
    display: inline-block;
  }
}

@media (min-width: 1024px) {
  .section-image-tablet {
    display: none;
  }
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////// */
/* Section Image Desktop */

.section-image-desktop {
  display: none;
  width: 100%;
  pointer-events: none;
}

@media (min-width: 1024px) {
  .section-image-desktop {
    display: inline-block;
  }
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////// */
/* Section Card Images */

.section-image-card-left {
  border-radius: 0 1.8rem 0 0;
}

@media (min-width: 768px) {
  .section-image-card-left {
    border-radius: 0 3.6rem 0 0;
  }
}

.section-image-card-right {
  border-radius: 1.8rem 0 0 0;
}

@media (min-width: 768px) {
  .section-image-card-right {
    border-radius: 3.6rem 0 0 0;
  }
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////// */
/* Text Box */

.section-text-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 2.4rem 2.4rem 0 2.4rem;
}

@media (min-width: 1280px) {
  .section-text-box {
    justify-content: flex-start;
    align-items: flex-start;
    max-width: 53.1rem;
    margin: 3.6rem 0 0 0;
  }
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////// */
/* Home - Services Section Text Box */

.section-services-text-box {
  margin: 3.6rem 2.4rem 0 2.4rem;
}

@media (min-width: 1280px) {
  .section-services-text-box {
    grid-column: 2;
    grid-row: 1;
    justify-self: start;
    margin: 3.6rem 0 0 7.2rem;
  }
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////// */
/* Home - Projects Section Text Box */

.section-projects-text-box {
  margin: 0 2.4rem;
}

@media (min-width: 1280px) {
  .section-projects-text-box {
    margin: 0 0 0 6rem;
  }
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////// */
/* Home - About Section Text Box */

.section-about-text-box {
  margin: 0 2.4rem;
}

@media (min-width: 1280px) {
  .section-about-text-box {
    grid-column: 2;
    grid-row: 1;
    margin: 3.6rem 0 0 7.2rem;
  }
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////// */
/* Home - Pink Lady Section Text Box */

.section-pink-lady-text-box {
  margin: 2.4rem 2.4rem 0 2.4rem;
}

@media (min-width: 1280px) {
  .section-pink-lady-text-box {
    grid-column: 1;
    grid-row: 1;
    margin: 3.6rem 7.2rem 0 0;
  }
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////// */
/* Contact Section Text Box */

.section-contact-text-box {
  margin: 2.4rem 0 0 0;
}

@media (min-width: 1280px) {
  .section-contact-text-box {
    margin: 3.6rem 0 0 3.6rem;
  }
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////// */
/* Services - Card Section Text Box Left */

@media (min-width: 1280px) {
  .section-card-left-text-box {
    margin: 3.6rem 0 0 7.2rem;
  }
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////// */
/* Services - Card Section Text Box Right */

@media (min-width: 1280px) {
  .section-card-right-text-box {
    margin: 3.6rem 7.2rem 0 0;
  }
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////// */
/* Fleet - Section Text Box */

.section-fleet-text-box {
  margin: 0 2.4rem 0 2.4rem;
}

@media (min-width: 1280px) {
  .section-fleet-text-box {
    margin: 0 0 0 3.6rem;
  }
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////// */
/* Fleet - Section Text Box Bottom */

.section-fleet-text-box-bottom {
  margin: 2.4rem 2.4rem 0 2.4rem;
}

@media (min-width: 768px) {
  .section-fleet-text-box-bottom {
    margin: 7.2rem 2.4rem 0 2.4rem;
  }
}

@media (min-width: 1280px) {
  .section-fleet-text-box-bottom {
    margin: 7.2rem 0 0 3.6rem;
  }
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////// */
/* Legal - Text Box */

.section-legal-text-box {
  margin: 0 2.4rem 0 2.4rem !important;
}

@media (min-width: 1280px) {
  .section-legal-text-box {
    max-width: 100% !important;
    margin: 0 !important;
  }
}

.section-legal-text-box-top {
  margin: 7.2rem 2.4rem 0 2.4rem !important;
}

@media (min-width: 1280px) {
  .section-legal-text-box-top {
    margin: 7.2rem 0 0 0 !important;
  }
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////// */
/* Title */

.section-title {
  font-family: montserrat, sans-serif;
  font-size: 2.4rem;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0 2.4rem 2.4rem 2.4rem;
}

.section-title-desktop {
  display: none;
}

@media (min-width: 768px) {
  .section-title {
    margin: 0 0 3.6rem 0;
  }
}

@media (min-width: 1280px) {
  .section-title-mobile {
    display: none;
  }

  .section-title-desktop {
    display: inline-block;
  }
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////// */
/* Text */

.section-text {
  margin-bottom: 2.4rem;
}

@media (min-width: 768px) {
  .section-text {
    margin-bottom: 7.2rem;
  }
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////// */
/* Legal - Text */

.section-legal-text {
  margin-bottom: 7.2rem !important;
}

.section-legal-text-bottom {
  margin-bottom: 0 !important;
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////// */
/* Section Contact Direct Options Text */

.section-contact-direct-options-text {
  margin-bottom: 1.2rem;
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////// */
/* CTA Container */

.section-cta-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2.4rem;
}

@media (min-width: 768px) {
  .section-cta-container {
    flex-direction: row;
    gap: 3.6rem;
  }
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////// */
/* CTAs */

.section-cta-one {
  color: var(--white);
  background-color: var(--grey);
  border-radius: 1.8rem 0 0 0;
}

.section-cta-one:active {
  color: var(--grey);
  background-color: var(--pink);
}

@media (min-width: 1280px) {
  .section-cta-one:hover {
    color: var(--grey);
    background-color: var(--pink);
  }

  .section-cta-one:active {
    color: var(--white);
    background-color: var(--grey);
  }
}

.section-cta-two {
  color: var(--white);
  background-color: var(--grey);
  border-radius: 0 0 1.8rem 0;
}

.section-cta-two:active {
  color: var(--grey);
  background-color: var(--pink);
}

@media (min-width: 1280px) {
  .section-cta-two:hover {
    color: var(--grey);
    background-color: var(--pink);
  }

  .section-cta-two:active {
    color: var(--white);
    background-color: var(--grey);
  }
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////// */
/* Home - About Section CTA one */

.section-about-cta-one {
  width: 22.323rem;
}

@media (min-width: 768px) {
  .section-about-cta-one {
    width: max-content;
  }
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////// */
/* Contact Form Container */

.section-contact-form-container {
  box-sizing: border-box;
  width: 100%;
  padding: 0 2.4rem;
}

@media (min-width: 1280px) {
  .section-contact-form-container {
    grid-column: 1;
    grid-row: 1;
    padding: 0;
  }
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////// */
/* Direct Options Container */

.section-contact-direct-options-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2.4rem;
  margin: 7.2rem 2.4rem;
}

@media (min-width: 1280px) {
  .section-contact-direct-options-container {
    grid-column: 2;
    grid-row: 1;
    align-items: flex-start;
    gap: 3.6rem;
    margin: 83.6rem 0 0 7.2rem;
  }
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////// */
/* Direct Options Links */

.direct-option-link {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.2rem;
  font-family: quicksand, sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  color: var(--grey);
}

.direct-option-link-icon {
  height: 2.4rem;
  width: 2.4rem;
  border-radius: 100rem;
  color: var(--grey);
  background-color: var(--creme);
  padding: 1.2rem;
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////// */
/* Contact Section Visit Container */

.section-contact-visit-container {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 2.4rem;
}

@media (min-width: 1280px) {
  .section-contact-visit-container {
    grid-column: 2;
    grid-row: 1;
    align-items: flex-start;
    padding: 0;
    margin: 21.6rem 0 0 7.2rem;
  }
}
