/*
Theme Name: Aaron Mays
Theme URI: https://example.com
Description: Child theme for Hello Elementor
Author: Aaron Mays
Author URI: https://aaronmays.com
Template: hello-elementor
Version: 1.0.0
*/

html,
body {
  overflow-x: hidden;
}

.page-content {
    width: 100%;
}

/* ==============================
   BODY OFFSETS
   ============================== */

/* Body offset to account for sticky header */
body {
    margin: 120px 0 0 0;
}

/* Push header bar down when the WP menu is present */
body.logged-in header > .elementor-element {
    margin-top: 32px;
}

/* WP menu is taller at this breakpoint so push the header bar and body offset down further */
@media screen and (max-width: 782px) {
    body {
        margin: 131px 0 0 0;
    }
    body.logged-in header > .elementor-element {
        margin-top: 46px;
    }
}

/* Margins change from 30px to 24px so reduce the body offset margin slightly */
@media screen and (max-width: 767px) {
    body {
        margin: 120px 0 0 0;
    }
}

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

/* Initional header styles before scrolling */
header > .elementor-element {
  height: 120px;
  transition: height 0.3s ease, padding 0.3s ease;
}

/* Styles that'll apply on scroll */
header > .elementor-element.shrink {
  height: 85px;
}

/* Add a heavy underline to the active menu item */
header .elementor-nav-menu .elementor-item-active {
    box-shadow: 0 1px 0 0 #A8A39C !important;
}

/* Remove the box-shadow that Elementor is defaulting to */
@media screen and (max-width: 1024px) {
    header .elementor-nav-menu--dropdown .elementor-item-active {
        box-shadow: none;
    }
}

/* Reposition the tablet dropdown menu */
@media screen and (max-width: 1024px) {
    header .elementor-nav-menu--dropdown {
        position: absolute;
        top: 30px;
        right: 0px;
    }
}

/* Reposition the mobile dropdown menu */
@media screen and (max-width: 767px) {
    header .elementor-nav-menu--dropdown {
        position: absolute;
        top: 0;
        right: 4px;
        z-index: 9999;
    }
}

/* Add a border separator in the mobile dropdown menu */
header .elementor-nav-menu--dropdown .menu-item {
    border-top: 1px solid #6A7E84;
}
header .elementor-nav-menu--dropdown .menu-item:first-child {
    border-top: none;
}

/* Adjust dropdown menu styles */
header .elementor-nav-menu--dropdown .menu-item a {
    padding: 12px 24px !important;
    transition: background-color 0.3s ease;
}
header .elementor-nav-menu--dropdown .menu-item a:hover {
    background-color: #404A4D !important;
}

/* Adding a border under the header */
header > div::after {
    content: "";
    background: #3F4A61;
    height: 1px;
    width: calc(100vw - 60px);
    position: absolute;
    bottom: 0;
    left: 30px;
}

@media screen and (max-width: 767px) {
    header > div::after {
        width: calc(100vw - 48px);
        left: 24px;
    }
}

/* ==============================
   MAIN CONTENT AREA
   ============================== */    

/* Set a default amount of space so the footer is always positioned at the bottom of the page*/
main {
    min-height: calc(100vh - 262px);
    overflow: hidden;
}

/* Take the WP menu into account if logged in */
body.logged-in main {
    min-height: calc(100vh - 294px);
}

/* Adjust for a taller WP menu at this breakpoint */
@media screen and (max-width: 782px) {
    /* Take the WP menu into account if logged in */
    body.logged-in main {
        min-height: calc(100vh - 312px);
    }
}

/* ==============================
   CARDS
   ============================== */

.card .card-text {
    max-width: 440px;
}

.tags-container .tag {
  display: inline-flex;
  width: auto;
  flex: 0 0 auto;
  align-items: center;
}

.tags-container .tag p {
    margin: 0;
}

/* ==============================
   BUTTONS
   ============================== */

.elementor-widget-button.text-link.ui-icon-arrow .elementor-button-content-wrapper::after {
    content: '';
    display: inline-block;
    width: 20px;
    height: 12px;
    margin: 0 0 0 4px;
    transition: all 0.3s ease;
    background-image: url('data:image/svg+xml,<svg width="20" height="13" viewBox="0 0 20 13" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 6.02226H8.52725H18.1445M12.4836 11.0445L18.9989 6.02294L12.4836 1.00005" stroke="%2378949D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

.elementor-widget-button.text-link.ui-icon-arrow .elementor-button-content-wrapper:hover::after {
    margin: 0 0 0 8px;
}

.elementor-widget-button.text-link.ui-icon-arrow.green .elementor-button-content-wrapper:hover::after {
    background-image: url('data:image/svg+xml,<svg width="20" height="13" viewBox="0 0 20 13" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 6.02226H8.52725H18.1445M12.4836 11.0445L18.9989 6.02294L12.4836 1.00005" stroke="%2389A9B3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

.elementor-widget-button.ui-icon-arrow svg {
    width: 20px;
    height: 12px;
}

.elementor-widget-button.ui-icon-external-site svg {
    width: 14px;
    height: 14px;
}

/* ==============================
   TYPOGRAPHY
   ============================== */

.elementor-widget-text-editor p:last-child {
    margin-bottom: 0;
}

/* ==============================
   CIRCLE BACKGROUND IMAGES
   ============================== */

.circle-background-image {
  pointer-events: none;
}

/* ==============================
   TESTIMONIAL CAROUSEL
   ============================== */
.testimonials .swiper-wrapper {
    left: 30px;
}

.testimonials .elementor-swiper-button {
    background-color: #A8A39C;
    border-radius: 26px;
    width: 52px;
    height: 52px;
    top: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.testimonials .elementor-swiper-button:hover {
    background-color: #BDB8B0;
}

.testimonials .elementor-swiper-button-prev svg {
    rotate: 180deg;
}

.testimonials .elementor-swiper-button svg {
    width: 20px !important;
    height: 12px !important;
}

/* ==============================
   LOGO GRID
   ============================== */

.logos-card h2 {
    max-width: 500px;
}

@media screen and (max-width: 1024px) {
    .logos-card h2,
    .logos-card p {
        max-width: 440px;
        margin: 0 auto;
    }
}

.logo-grid {
    max-height: 1700px;
    transition: max-height 1s ease;
}

.logo-grid.expanded {
    max-height: 5000px;
}

@media screen and (max-width: 1024px) {
    .logo-grid {
        max-height: 2400px;
    }

    .logo-grid.expanded {
        max-height: 5000px;
    }
}

@media screen and (max-width: 767px) {
    .logo-grid {
        max-height: 3700px;
    }

    .logo-grid.expanded {
        max-height: 10000px;
    }
}

.logo-grid.expanded .logo-button-expand {
    display: none;
}

/* Bottom fade overlay */
.logo-grid::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 500px;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(
    to top,
    rgba(253, 253, 253, 1) 30%,
    rgba(253, 253, 253, 0) 100%
  );
  transition: opacity 0.3s ease;
}

/* Hide gradient when expanded */
.logo-grid.expanded::after {
  opacity: 0;
}

/* ==============================
   ELEMENTOR FORMS
   ============================== */

.elementor-form input[type="text"],
.elementor-form input[type="email"],
.elementor-form textarea {
    font-weight: 500;
    padding: 12px 20px !important;
    background-color: #F3F7FF !important;
}

.elementor-form input[type="text"]::placeholder,
.elementor-form input[type="email"]::placeholder,
.elementor-form textarea::placeholder {
  color: #55627B !important;
  opacity: 1 !important;
}

.elementor-form .elementor-button:hover {
    background-color: #CFCAC3 !important;
}

.elementor-form .elementor-button .elementor-button-text {
    color: #242A3D !important;
}

.elementor-form .elementor-message {
    font-weight: 500;
    padding: 12px 0 0;
}

.elementor-form .elementor-message::before {
    display: none;
}

.elementor-form .elementor-mark-required .elementor-field-label:after {
    color: #bdb8b0;
}

/* ==============================
   FOR FORMSPREE FORMS
   ============================== */

.contact-form {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  font-family: "Montserrat", sans-serif;
}

.contact-form .form-group {
  margin-bottom: 24px;
}

.contact-form label {
  display: block;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #BDB8B0;
  font-family: "Montserrat", sans-serif;
}

.contact-form .required {
  color: #BDB8B0;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 16px 20px;
  border-radius: 12px;
  background: #F3F7FF;
  border: none;
  box-shadow: none;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
  line-height: 1.4;
  font-weight: 500;
  transition: all .3s;
}

/* Remove iOS default inner shadows */
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  box-shadow: none;
}

/* Placeholder styling */
.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: #55627B;
  opacity: 1;
  font-size: 18px;
  font-weight: 500;
  font-family: "Montserrat", sans-serif;
}

/* Button */
.contact-form button {
  background: #BDB8B0;
  color: #242A3D;
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 13px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 20px 34px;
  border-radius: 100px;
  border: none;
  box-shadow: none;
  cursor: pointer;
  transition: all .3s;
  appearance: none;
  -webkit-appearance: none;
}

.contact-form button:hover {
  background: #CFCAC3;
  color: #242A3D;
}

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

footer .elementor-nav-menu .elementor-item-active:hover {
    color: #f3f7ff !important;
}

/* ==============================
   CONTACT PAGE
   ============================== */

/* Vertically center the body content */
body.page-id-63 main {
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.no-motion {
  transform: translate3d(0,0,0) !important;
}