/*
 * ===================================================================
 * LAYOUT & STYLING
 * ===================================================================
 */

/* Constrain width for text-based sections */
.constrained-content {
    max-width: 1200px !important;
	margin-right: auto !important;
}


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

.ast-theme-transparent-header .ast-builder-menu-1 {
    background-color: #3B6B00 !important;
    border-radius: 50px;
    padding: 10px 35px !important;
}

body:not(.ast-theme-transparent-header) .ast-builder-menu-1 {
    background-color: #e7e6e0 !important;
    border-radius: 50px;
    padding: 10px 25px !important;
}


/*
 * ===================================================================
 * FINAL HERO SECTION & ARROW (NESTED STRUCTURE)
 * ===================================================================
 */

/* 1. Sets up the main "Row Layout" container as a flexbox */
.home-hero-section-container > .kt-row-column-wrap {
  min-height: 90vh;
  position: relative; 
  display: flex;
  flex-direction: column;
  justify-content: space-between; 
}

/* 2. Styles the FIRST section (containing the heading and CTA button) */
#home-hero-top-section {
  flex-grow: 1; /* Tells this section to take up all available space */
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Centers the heading/CTA vertically */
  align-items: center;
	padding-top: 30vh;
}

/* 3. Styles the SECOND section (containing the arrow) */
.home-hero-section-container .wp-block-kadence-section:nth-child(2) {
  display: flex;
  justify-content: center; /* Centers the arrow horizontally */
}

/* 4. Positions the scroll down arrow button */
.hero-scroll-down-arrow {
  position: relative;
  transform: translateY(50%);
  z-index: 10;
  margin: 0 auto;
}

.hero-scroll-down-arrow a.kb-button:active,
.hero-scroll-down-arrow a.kb-button:focus {
  /* Make arrow slightly darker green when clicked */
  background-color: black !important; 
  color: #FFFFFF !important; 
}

.hero-scroll-down-arrow a.kb-button:hover {
	background-color: black !important; 
  color: #FFFFFF !important; 
}

/* Ensure the SVG icon also stays white */
.hero-scroll-down-arrow a.kb-button:active svg,
.hero-scroll-down-arrow a.kb-button:focus svg {
    fill: #FFFFFF !important;
	color: #FFFFFF !important; 
}
/*
 * ===================================================================
 * HEADING & CIRCLE STYLES
 * ===================================================================
 */

/* Styles for the main hero heading */
#h2-people-first {
  color: #fff;
  font-family: 'Dela Gothic One', sans-serif;
  text-transform: none;
  text-align: center;
  font-weight: 500;
  line-height: 5.5rem;
}

/* Shared styles for the SPAN tags that will be circled */
.hero-circle, .not-circle, #connect-circle {
  position: relative;
  text-transform: none;
  font-family: 'Dela Gothic One', sans-serif;
  font-weight: 500;
}

/* =================================================================== LEADERS WITH IMPACT ===================================================================*/
#leaders-with-impact-inner {
	max-width: 1600px !important;
	width: 100% !important;
}

#divider-column {
  width: 100% !important;
}

#leaders-inner-2 {
	width: 100%;
}

#leaders-wi-3-col {
	width: fit-content;
}

/*
 * ===================================================================
 * CIRCLE GRAPHIC POSITIONING
 * ===================================================================
 */

.hero-circle::before {
    content: '';
    position: absolute;
    z-index: -1;
    left: 52%;
    transform: translateX(-50%);
    background-image: url('https://diversifiedland.com/wp-content/uploads/2025/07/Circle-1-newest.svg');
    background-size: contain;
    background-repeat: no-repeat;
    top: -53%;
    width: 118%;
    height: 400%;
}

.h2-not-newcomers {
    color: #fff !important;
    font-family: 'Dela Gothic One' !important;
    text-transform: none !important;
    text-align: center;
    font-weight: 500 !important;
}

.not-circle::before {
    content: '';
    position: absolute;
    z-index: -1;
    left: 50%;
    transform: translateX(-50%);
    background-image: url('https://diversifiedland.com/wp-content/uploads/2025/07/circle-2.svg');
    background-size: contain;
    background-repeat: no-repeat;
    top: 0%;
    width: 120%;
    height: 350%;
}

.bottom-contact {
    font-size: 2rem;
    color: #fff !important;
    font-family: 'Dela Gothic One' !important;
    text-align: center;
    font-weight: 500 !important;
    line-height: 4rem;
}

#home-bottom-contact {
	    text-transform: capitalize !important;
}

#services-bottom-contact {
	text-transform: none !important;
}

#connect-circle::before {
    content: '';
    position: absolute;
    z-index: -1;
    left: 56%;
    transform: translateX(-50%);
    background-image: url('https://diversifiedland.com/wp-content/uploads/2025/07/circle-3.svg');
    background-size: contain;
    background-repeat: no-repeat;
    top: -25%;
    width: 119%;
    height: 400%;
}

/*
 * ===================================================================
 * GLOBAL FIXES
 * ===================================================================
 */

/*
 * MOBILE FIX FOR TESTIMONIAL SECTION CENTERING
 */

/* Only apply this on screens 768px wide or smaller */
@media (max-width: 768px) {
  #testimonials-mobile-section {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: none !important; /* Allow it to be full width */
  }
}

/*
 * ===================================================================
 *  TESTIMONIALS SECTION * ===================================================================
 */

#testimonials-mobile-heading {
	margin-bottom: 0px;
	margin-left: 44px;
}

/* Force mobile testimonial track width */
#mobile-testimonials .splide__track,
#mobile-testimonials .splide__list {
  width: 100%;
  overflow: visible !important; /* Allow slides to be seen */
}

/* 1. Main full-width container for the section */
.testimonial-section-container {
  padding-top: 60px;
  padding-bottom: 60px;
}

/* 2. Constrains and centers the inner content container */
.constrained-content > .kt-inside-inner-col > .wp-block-kadence-column {
    width: 100% !important;
}

/* 3. Sets the default alignment for the testimonial section */
#testimonials-section-main {
  text-align: left;
}

/* 4. Fix for carousel slide width calculation */
#testimonials-list .kt-blocks-testimonial-carousel-item {
  width: 100% !important;
}

/* 5. Main testimonial quote text */
#testimonials-list .kt-testimonial-content {
  text-transform: none;
  margin-bottom: 2rem;
}

/* 6. Author's name style */
#testimonials-list .kt-testimonial-name {
  color: #2A2C56;
  font-family: 'DM Sans', sans-serif;
  font-size: 1.2rem;
  line-height: 1.3;
  font-weight: 600;
  text-transform: none;
  margin-bottom: 0.25rem;
}

/* 7. Green divider line */
#testimonials-list .kt-testimonial-occupation::before {
  content: '';
  display: block;
  border-top: 1px solid #3B6B00;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  width: 100%;
}

/* 7.5. Green divider line */
#testimonials-mobile-row .kt-testimonial-occupation::before {
  content: '';
  display: block;
  border-top: 1px solid #3B6B00;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  width: 100%;
}

/* 8. Website link style */
#testimonials-list .kt-testimonial-occupation a {
  color: #3B6B00;
  text-decoration: none;
  font-size: 1rem;
  font-family: sans-serif;
  text-transform: capitalize;
}

/* 8.5. Website link style */
#testimonials-mobile-row .kt-testimonial-occupation a {
  color: #3B6B00;
  text-decoration: none;
  font-size: 1rem;
  font-family: sans-serif;
  text-transform: lowercase;
}

/*
 * --- Carousel Arrow Styles ---
 */

/* 9. Desktop styles for the arrows */
#testimonials-list .splide__arrow {
  background-color: #3B6B00;
  border-radius: 50%;
  opacity: 1;
  width: 77px !important;
  height: 77px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
	border: none;
}

#testimonials-list .splide__arrow svg {
  fill: #FFFFFF;
  width: 30px;
  height: 30px;
}

#testimonials-list .splide__arrow:hover {
  background-color: #2a4c00;
}

#testimonials-list .splide__arrow--prev {
  left: -90px;
}

#testimonials-list .splide__arrow--next {
  right: -90px;
}


/* 10. === RESPONSIVE FIX === Overrides for Tablet & Mobile screens */
@media (max-width: 768px) {
  #testimonials-list .splide__arrow {
    /* Make the arrows smaller */
    width: 45px !important;
    height: 45px !important;
  }

  #testimonials-list .splide__arrow svg {
    /* Make the icon inside smaller */
    width: 20px;
    height: 20px;
  }

  #testimonials-list .splide__arrow--prev {
    /* Bring the arrow in from the edge */
    left: -15px;
  }

  #testimonials-list .splide__arrow--next {
    /* Bring the arrow in from the edge */
    right: -15px;
  }
}

/*
 * ===================================================================
 * ADDS ROUNDED CORNERS TO THE CONTACT PAGE VIDEO POSTER IMAGE
 * ===================================================================
 */
#videopress-player-N5GTl0mJ, /* Corrected with a lowercase L */
#videopress-player-N5GTl0mJ div,
#videopress-player-N5GTl0mJ video,
#videopress-player-N5GTl0mJ img {
  border-radius: 15px !important;
  overflow: hidden !important;
}

.hero-video {
	border-radius: 15px !important;
  overflow: hidden !important;
}

/*
 * ===================================================================
 * CUSTOM STYLES FOR CONTACT let's connect section
 * ===================================================================
 */

.card-text-no-padding h3,p {
	margin: 0px !important;
}

/*
 * ===================================================================
 * CUSTOM STYLES FOR DLM CONTACT FORM (WPFORMS #724)
 * ===================================================================
 */

#wpforms-724 {
    background-color: #2A2C56;
    border-radius: 15px;
    padding: 40px;
    max-width: 100%;
}

#contact-form-section {
	width: 100%;
}

#wpforms-724 .wpforms-field-container {
    display: flex;
    flex-direction: column;
}

#wpforms-724 .wpforms-field-medium {
    max-width: 100% !important;
}

#wpforms-724 .wpforms-field input,
#wpforms-724 .wpforms-field textarea {
    background-color: #FFFFFF;
    border: none !important;
    border-radius: 10px;
    padding: 20px 55px;
    width: 100% !important;
}

#wpforms-724 .wpforms-field-name input,
#wpforms-724 .wpforms-field-email input {
    height: 3.5rem;
}

#wpforms-724 .wpforms-field textarea {
    height: 150px;
}

#wpforms-724 .wpforms-field-label {
    font-family: 'DM Sans', sans-serif;
    font-size: 20px;
    font-weight: 900;
    color: #FFFFFF;
    margin-bottom: 8px;
}

#wpforms-724 .wpforms-field input::placeholder,
#wpforms-724 .wpforms-field textarea::placeholder {
    color: #000;
    font-family: 'DM Sans', sans-serif;
    font-size: 20px;
    font-weight: 900;
    opacity: 1;
}

#wpforms-724 .wpforms-field input::-moz-placeholder,
#wpforms-724 .wpforms-field textarea::-moz-placeholder {
    color: #000;
    font-family: 'DM Sans', sans-serif;
    font-size: 20px;
    font-weight: 900;
    opacity: 1;
}
#wpforms-724 .wpforms-field input:-ms-input-placeholder,
#wpforms-724 .wpforms-field textarea:-ms-input-placeholder {
    color: #000;
    font-family: 'DM Sans', sans-serif;
    font-size: 20px;
    font-weight: 900;
    opacity: 1;
}

#wpforms-724 .wpforms-submit-container {
	margin-bottom: 15px;
}

#wpforms-724 .wpforms-submit-container .wpforms-submit {
    background-color: #FFFFFF;
    color: #000;
    border: none !important;
    border-radius: 10px;
    font-family: 'DM Sans', sans-serif;
    font-weight: 900;
    height: auto;
    width: 100%;
    max-width: 315px;
    padding: 25px;
    font-size: 20px;
}

#wpforms-724 .wpforms-submit-container .wpforms-submit:hover {
    background-color: #f0f0f0;
    cursor: pointer;
}

/*
 * ===================================================================
 * MOBILE PADDING ADJUSTMENTS FOR CONTACT FORM
 * ===================================================================
 */

/* Only apply these styles on screens 768px wide or smaller */
@media (max-width: 768px) {

  /* Reduce padding on the main form container */
  #wpforms-724 {
    padding: 20px;
  }

  /* Reduce left/right padding inside the input fields */
  #wpforms-724 .wpforms-field input,
  #wpforms-724 .wpforms-field textarea {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/*
 * ===================================================================
 * CUSTOMIZE ASTRA SCROLL-TO-TOP BUTTON (Neutral Colors)
 * ===================================================================
 */

/* Target the button by its ID */
#ast-scroll-top {
  /* Semi-transparent dark grey background */
  background-color: rgba(50, 50, 50, 0.7) !important; 
  border-radius: 50%; /* Keep it circular */
}

/* Target the arrow icon inside the button */
#ast-scroll-top .ast-icon svg {
  fill: #FFFFFF !important; /* White icon color */
}

/* Optional: Slightly darker on hover */
#ast-scroll-top:hover {
  background-color: rgba(30, 30, 30, 0.8) !important;
}