/*
  Based on TailwindCSS recommendations,
  consider using classes instead of the `@apply` directive
  @see https://tailwindcss.com/docs/reusing-styles#avoiding-premature-abstraction
*/
/*
 * Tailwind Custom CSS for OutreachGuy
 * This file contains custom styles using Tailwind's @apply directive
 * 
 * This file uses Tailwind's @apply directive to apply utility classes to custom CSS.
 * The @apply directive is a feature of Tailwind CSS that allows you to extract common utility patterns.
 * These linting warnings about "Unknown at rule @apply" can be safely ignored as they are valid in the
 * context of Tailwind CSS processing.
 */

/* ===== IMPORTS ===== */
@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap");

/* ===== BASE STYLES ===== */
*,
::after,
::before {
  @apply box-border;
}
@media (prefers-reduced-motion: no-preference) {
  :root {
    @apply scroll-smooth;
  }
}
body {
  @apply text-[#2b4350] min-h-screen flex flex-col leading-[1.6] text-base font-normal leading-normal text-[#212529] bg-white m-0;
  font-family: Poppins, sans-serif !important;
  background: #fff !important;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

/* Hide scrollbar but allow scrolling */
.scrollbar-hide {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
.scrollbar-hide::-webkit-scrollbar {
  @apply hidden; /* Chrome, Safari and Opera */
}

/* Carousel styles */
.example-slides,
.testimonial-slides {
  @apply w-full max-w-full scroll-smooth overscroll-x-contain touch-pan-x m-0 p-0;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.example-slide,
.testimonial-slide {
  @apply snap-center w-full min-w-full max-w-full shrink-0 m-0 pr-0;
}

/* Active dot styling */
.example-dot.active,
.testimonial-dot.active {
  @apply bg-[#4CADB5] scale-[1.2];
}

/* Ensure container doesn't overflow */
.mobile-tab-content {
  @apply w-full max-w-full overflow-hidden m-0 p-0;
}

/* Fix for container width */
.mobile-tab-content > div {
  @apply w-full max-w-full m-0 p-0;
}
/* ===== TYPOGRAPHY ===== */
p {
  @apply text-lg leading-[1.8rem] mt-0 mb-4 mt-0 mb-4;
}
.container {
  @apply max-w-[1300px] w-full mx-auto px-4;
}

/* Mobile-specific styles */
@media (max-width: 767px) {
  .desktop-only {
    @apply hidden;
  }
  .mobile-reverse {
    @apply flex-col-reverse;
  }
  .mobile-stack {
    @apply flex flex-col;
  }
  .mobile-slider {
    @apply overflow-x-auto scroll-smooth;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .mobile-slide {
    @apply snap-start shrink-0 w-[90%] mr-2.5;
  }
  .mobile-indicator {
    @apply flex justify-center mt-[15px];
  }
  .mobile-indicator-dot {
    @apply h-2 w-2 bg-[#bbb] mx-[5px] my-0 rounded-[50%];
  }
  .mobile-indicator-dot.active {
    @apply bg-[#4CADB5];
  }
  .mobile-accordion-header {
    @apply cursor-pointer bg-[#f8f9fa] font-semibold mb-[5px] p-[15px] rounded-[5px];
  }
  .mobile-accordion-content {
    @apply max-h-0 overflow-hidden transition-[max-height] duration-[0.3s] ease-[ease-out] px-[15px] py-0;
  }
  .mobile-accordion-content.active {
    @apply max-h-[500px] p-[15px];
  }
}
.modal {
  @apply hidden fixed z-[1000] w-full h-full overflow-auto bg-[rgba(0,0,0,0.9)] pt-[60px] left-0 top-0 pt-0;
}
.modal-content {
  @apply block w-6/12 max-h-[80vh] object-contain relative -translate-y-2/4 m-auto top-2/4;
}
.close {
  @apply absolute text-white text-[40px] font-[bold] transition-[0.3s] cursor-pointer right-[35px] top-5;
}
.close:hover,
.close:focus {
  @apply text-[#bbb] no-underline cursor-pointer;
}
a {
  @apply text-[#2b4350] no-underline hover:text-[#2b4350] text-[#fee01d] underline hover:text-[#fee01d];
}
a:not([href]):not([class]),
a:not([href]):not([class]):hover {
  @apply text-inherit no-underline;
}
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
  @apply font-medium leading-[1.2] mt-0 mb-2;
}
.h1,
h1 {
  @apply text-[calc(1.375rem_+_1.5vw)];
}
.h5,
h5 {
  @apply text-xl;
}
.h6,
h6 {
  @apply text-base;
}
.section-title {
  @apply text-center font-extrabold text-[calc(1.375rem_+_1.5vw)] mb-8;
}

/* ===== DISPLAY CLASSES ===== */
.display-1 {
  @apply text-[calc(1.625rem_+_4.5vw)] font-light leading-[1.2];
}
.display-2 {
  @apply text-[calc(1.575rem_+_3.9vw)] font-light leading-[1.2];
}
.display-3 {
  @apply text-[calc(1.525rem_+_3.3vw)] font-light leading-[1.2];
}
.display-4 {
  @apply text-[calc(1.475rem_+_2.7vw)] font-light leading-[1.2];
}
.display-5 {
  @apply text-[calc(1.425rem_+_2.1vw)] font-light leading-[1.2];
}
.display-6 {
  @apply text-[calc(1.375rem_+_1.5vw)] font-light leading-[1.2];
}
@media (min-width: 1200px) {
  .display-1 {
    @apply text-[5rem];
  }
  .display-2 {
    @apply text-7xl;
  }
  .display-3 {
    @apply text-[4rem];
  }
  .display-4 {
    @apply text-[3.5rem];
  }
  .display-5 {
    @apply text-5xl;
  }
  .display-6 {
    @apply text-[2.5rem];
  }
}
.outreach-btn {
  @apply bg-[#FEE01D] text-white font-semibold py-2 px-4 rounded-md transition-all duration-300 ease-in-out;
}
.outreach-btn:hover {
  @apply transform -translate-y-[1px] shadow-[0_2px_4px_rgba(0,0,0,0.1)];
}
.outreach-btn-outline {
  @apply border border-[#FEE01D] text-[#2B4350] font-semibold py-2 px-4 rounded-md transition-all duration-300 ease-in-out;
}
.outreach-btn-outline:hover {
  @apply bg-[#FEE01D] text-white transform -translate-y-[1px] shadow-[0_2px_4px_rgba(0,0,0,0.1)];
}

/* ===== BUTTONS ===== */
.btn-outreach {
  @apply bg-[#FEE01D] text-[#241C15] font-semibold transition-all duration-[0.3s] ease-[ease-in-out] px-6 py-2 rounded-md hover:-translate-y-px hover:shadow-[0_4px_8px_rgba(0,0,0,0.1)];
}
.btn-outreach-lg {
  @apply bg-[#FEE01D] text-[#241C15] font-semibold text-lg transition-all duration-[0.3s] ease-[ease-in-out] px-8 py-3 rounded-md hover:-translate-y-0.5 hover:shadow-[0_6px_12px_rgba(0,0,0,0.15)];
}
.btn-outreach-outline {
  @apply text-[#241C15] bg-transparent font-semibold transition-all duration-[0.3s] ease-[ease-in-out] px-6 py-2 rounded-md border-2 border-solid border-[#FEE01D] hover:bg-[#FEE01D] hover:-translate-y-px hover:shadow-[0_4px_8px_rgba(0,0,0,0.1)];
}
.btn-primary-home {
  @apply bg-[#FEE01D] text-[#241C15] transition-all duration-[0.3s] ease-[ease] shadow-[0_4px_12px_rgba(254,224,29,0.3)] font-semibold relative overflow-hidden z-[1] px-8 py-[0.8rem] rounded-[10px] border-[none] before:content-[""] before:absolute before:w-full before:h-full before:z-[-1] before:transition-all before:duration-[0.3s] before:ease-[ease] before:bg-[#FEE01D] before:left-0 before:top-0 hover:translate-y-[-3px] hover:shadow-[0_8px_15px_rgba(254,224,29,0.4)] hover:bg-transparent hover:before:bg-[#FEE01D] active:translate-y-px active:shadow-[0_2px_8px_rgba(254,224,29,0.3)];
}

/* ===== NAVIGATION ===== */
.nav-link {
  @apply text-[#2b4350] font-medium transition-[color] duration-[0.2s] ease-[ease] hover:text-[#fee01d] text-[#2b4350] transition-[color] duration-[0.3s] ease-[ease] hover:text-[#fee01d];
}

/* ===== LAYOUT COMPONENTS ===== */
.container {
  @apply w-full pr-[var(--bs-gutter-x,0.75rem)] pl-[var(--bs-gutter-x,0.75rem)] mx-auto;
}
.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl {
  @apply w-full pr-[var(--bs-gutter-x,0.75rem)] pl-[var(--bs-gutter-x,0.75rem)] mx-auto;
}
.row {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  @apply mr-0 flex flex-wrap mt-[calc(var(--bs-gutter-y)_*_-1)] mr-[calc(var(--bs-gutter-x)_*_-0.5)] ml-[calc(var(--bs-gutter-x)_*_-0.5)];
}
.row > * {
  @apply shrink-0 w-full max-w-full pr-[calc(var(--bs-gutter-x)_*_0.5)] pl-[calc(var(--bs-gutter-x)_*_0.5)] mt-[var(--bs-gutter-y)];
}
.accordion-item {
  @apply mb-[10px] border border-[rgba(0,0,0,.125)] rounded-lg overflow-hidden;
}
.step-item .d-flex {
  @apply transition-all duration-200 ease-in-out border-none;
}
.step-item.active .d-flex {
  @apply bg-[#f0f7f7] !important;
}
.step-number {
  @apply font-extrabold text-[#FEE01D] !important bg-transparent !important text-[28px] border-none !important shadow-none !important flex items-center mt-1;
}
.step-content-item {
  @apply transition-opacity duration-150 ease-in-out;
}
.step-content-item.active {
  @apply opacity-100;
}
#how-it-works .d-flex {
  @apply flex items-center mb-6;
}
#how-it-works .d-flex > div:first-child {
  @apply border-none text-[25px] font-extrabold flex justify-center items-center w-[60px] h-[60px] min-w-[60px] text-center mr-5 p-0;
  background: transparent;
}
.step-item.active .step-number {
  @apply text-[#FEE01D] !important;
}
.step-item.active #how-it-works .d-flex > div:first-child {
  background: transparent;
  @apply text-[];
}
#how-it-works .card-custom {
  @apply flex-1 border text-lg flex items-center min-h-[80px] m-0 p-6 border-solid border-[#bdcdd6];
}

/* ===== CARDS ===== */
.card {
  @apply text-black bg-[#f8f9fa];
}
.card-body {
  @apply h-full;
}
.card-title a {
  @apply text-[#1c1b1b] no-underline hover:underline;
}
.card-shadow {
  @apply shadow-[0_0.125rem_0.25rem_rgba(0,0,0,0.075)] transition-shadow duration-[0.3s] ease-[ease];
}
.card-custom {
  @apply shadow-[0_4px_6px_rgba(0,0,0,0.05)] mb-6 p-[25px] rounded-xl hover:translate-y-[-5px] hover:shadow-[0_10px_15px_rgba(0,0,0,0.1)] shadow-[0_4px_6px_rgba(0,0,0,0.1)] transition-all duration-[0.3s] ease-[ease] p-6 rounded-lg hover:shadow-[0_10px_15px_rgba(0,0,0,0.1)] hover:-translate-y-0.5;
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  background: #fff;
}

/* ===== FORMS ===== */
.form-control {
  @apply appearance-none;
  @apply max-w-full focus:shadow-[0_0_0_0.25rem_rgba(59,130,246,0.25)] focus:border-[#fee01d] block w-full text-base font-normal leading-normal text-[#212529] bg-white bg-clip-padding border appearance-none rounded px-3 py-1.5 border-solid border-[#ced4da] motion-reduce:transition-none focus:text-[#212529] focus:bg-white focus:shadow-[0_0_0_0.25rem_rgba(13,110,253,0.25)] focus:border-[#86b7fe] file:mt-[-0.375rem] file:mr-[-0.75rem] file:mb-[-0.375rem] file:ml-[-0.75rem] file:text-[#212529] file:bg-[#e9ecef] file:pointer-events-none file:transition-all file:duration-[0.3s] file:ease-[ease] file:px-3 file:py-1.5 file:rounded-none file:border-inherit file:border-solid file:border-0 motion-reduce:file:transition-none;
  -webkit-appearance: none;
  -moz-appearance: none;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.form-control:focus {
  outline: 0;
}
.form-control[type="file"] {
  @apply overflow-hidden;
}
.form-control[type="file"]:not(:disabled):not([readonly]) {
  @apply cursor-pointer;
}
.form-control::-webkit-date-and-time-value {
  @apply h-[1.5em];
}
.form-control::-moz-placeholder {
  @apply text-[#6c757d] opacity-100;
}
.form-control::placeholder {
  @apply text-[#6c757d] opacity-100;
}
.form-control:disabled,
.form-control[readonly] {
  @apply bg-[#e9ecef] opacity-100;
}
.form-text {
  @apply text-[0.875em] text-[#6c757d] mt-1;
}

/* Form Validation */
.valid-feedback {
  @apply hidden w-full text-[0.875em] text-[#198754] mt-1;
}
.is-valid ~ .valid-feedback {
  @apply block;
}
.form-control.is-valid {
  @apply bg-[url("data:image/svg+xml,%3csvg_xmlns='http://www.w3.org/2000/svg'_viewBox='0_0_8_8'%3e%3cpath_fill='%23198754'_d='M2.3_6.73L.6_4.53c-0.4-1.04.46-1.4_1.1-0.8l1.1_1.4_3.4-3.8c.6-0.63_1.6-0.27_1.2.7l-4_4.6c-0.43.5-0.8.4-1.1.1z'/%3e%3c/svg%3e")] bg-no-repeat bg-[right_calc(0.375em_+_0.1875rem)_center] bg-[calc(0.75em_+_0.375rem)_calc(0.75em_+_0.375rem)] pr-[calc(1.5em_+_0.75rem)] border-[#198754] focus:shadow-[0_0_0_0.25rem_rgba(25,135,84,0.25)] focus:border-[#198754];
}
.invalid-feedback {
  @apply hidden w-full text-[0.875em] text-[#dc3545] mt-1;
}
.is-invalid ~ .invalid-feedback {
  @apply block;
}
.form-control.is-invalid {
  @apply bg-[url("data:image/svg+xml,%3csvg_xmlns='http://www.w3.org/2000/svg'_viewBox='0_0_12_12'_width='12'_height='12'_fill='none'_stroke='%23dc3545'%3e%3ccircle_cx='6'_cy='6'_r='4.5'/%3e%3cpath_stroke-linejoin='round'_d='M5.8_3.6h.4L6_6.5z'/%3e%3ccircle_cx='6'_cy='8.2'_r='.6'_fill='%23dc3545'_stroke='none'/%3e%3c/svg%3e")] bg-no-repeat bg-[right_calc(0.375em_+_0.1875rem)_center] bg-[calc(0.75em_+_0.375rem)_calc(0.75em_+_0.375rem)] pr-[calc(1.5em_+_0.75rem)] border-[#dc3545] focus:shadow-[0_0_0_0.25rem_rgba(220,53,69,0.25)] focus:border-[#dc3545];
}

/* ===== SECTIONS ===== */
section {
  @apply px-0 py-16;
}
.first-block {
  @apply px-0 py-[50px];
}
.hero {
  @apply py-[100px];
}

/* ===== UTILITIES ===== */
.text-white {
  @apply text-white;
}
.text-center {
  @apply text-center;
}
.center {
  @apply block w-4/5 mx-auto;
}
.list {
  @apply p-0;
}
.list-inline {
  @apply pl-0;
  list-style: none;
}
.link-primary {
  @apply text-[#fee01d];
}
.link-primary:focus,
.link-primary:hover {
  @apply text-[#fee01d];
}
.link-success {
  @apply text-[#198754];
}
.link-success:focus,
.link-success:hover {
  @apply text-[#146c43];
}
.a-block {
  @apply text-[#0d0a0a] hover:text-[#7a7a7a];
}

/* ===== IMAGES ===== */
img {
  @apply align-middle;
}
.img-fluid {
  @apply max-w-full h-auto;
}
.hero-image {
  @apply w-full max-w-[1100px] origin-[center_center] overflow-visible mx-auto my-0 scale-[1.6];
}

/* ===== RESPONSIVE STYLES ===== */
@media only screen and (max-width: 720px) {
  .first-block {
    @apply flex-col;
  }
}
@media (max-width: 768px) {
  #how-it-works .d-flex {
    @apply flex-col items-start;
  }
  #how-it-works .d-flex > div:first-child {
    @apply mb-[15px];
  }
  #how-it-works .card-custom {
    @apply w-full;
  } /* Improved mobile navigation */
  .nav-link {
    @apply text-center py-2;
  } /* Better spacing for mobile sections */
  section {
    @apply py-4;
  } /* Adjust testimonial cards for mobile */
  .testimonial-card {
    @apply mb-4;
  } /* Improve text readability on mobile */
  h1,
  h2,
  .display-6 {
    @apply text-[1.8rem] leading-[2.2rem];
  } /* Better button sizing for mobile */
  .btn-outreach-lg {
    @apply w-full max-w-[250px] mx-auto;
  } /* Adjust spacing for FAQ items */
  .faq-item {
    @apply mb-4;
  } /* Improve mobile hero section */
  #hero p {
    @apply text-base;
  }
}
@media (max-width: 576px) {
  /* Extra small devices adjustments */
  h1,
  h2,
  .display-6 {
    @apply text-[1.5rem] leading-[1.8rem];
  } /* Adjust container padding */
  .container {
    @apply px-4;
  } /* Improve step items on very small screens */
  .step-item {
    @apply mb-3;
  } /* Better image handling on very small screens */
  .tweet-container img {
    @apply max-w-full;
  }
}

/* ===== FOOTER ===== */
footer a {
  @apply text-[rgb(61_71_83)] no-underline;
}

/* ===== FORM CONTROLS - ADDITIONAL SIZES ===== */
.form-control-sm {
  @apply min-h-[calc(1.5em_+_(0.5rem_+_2px))] text-sm px-2 py-1 rounded-[0.2rem] file:mt-[-0.25rem] file:mr-[-0.5rem] file:mb-[-0.25rem] file:ml-[-0.5rem] file:px-2 file:py-1;
}
.form-control-lg {
  @apply min-h-[calc(1.5em_+_(1rem_+_2px))] text-xl px-4 py-2 rounded-[0.3rem];
}
.col-12.col-lg-5.mt-5.mt-lg-0 {
  @apply overflow-visible;
}

/* ===== INTERACTIVE ELEMENTS ===== */
[type="search"] {
  @apply -outline-offset-2;
  -webkit-appearance: textfield;
  appearance: textfield;
}
::-webkit-search-decoration {
  @apply appearance-none;
  -webkit-appearance: none;
}
::-webkit-color-swatch-wrapper {
  @apply p-0;
}
[hidden] {
  @apply hidden;
}

/* ===== MISC ===== */
address {
  @apply not-italic leading-[inherit] mb-4;
}
b {
  @apply font-[bolder];
}

/* ===== TESTIMONIALS ===== */
.testimonial-image {
  @apply shadow-[0_8px_20px_rgba(0,0,0,0.15)] max-w-full block mx-auto my-0 rounded-2xl hover:-translate-y-2 hover:shadow-[0_12px_25px_rgba(0,0,0,0.2)] max-w-full block mx-auto my-0 rounded-xl;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.testimonial-card {
  @apply bg-white overflow-hidden shadow-[0_10px_25px_rgba(0,0,0,0.12)] h-full p-2 rounded-2xl hover:-translate-y-2 hover:shadow-[0_15px_30px_rgba(0,0,0,0.18)];
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.tweet-container {
  @apply cursor-pointer overflow-hidden h-full;
}
.tweet-container img {
  @apply w-full h-auto transition-transform duration-[0.3s] ease-[ease] w-full h-auto max-w-full;
  @apply w-full h-full object-cover;
}
.section-title + .row {
  @apply mt-8;
}
@media (max-width: 768px) {
  .testimonial-card {
    @apply mb-4;
  }
}

/* ===== LAYOUT CONSTRAINTS ===== */
/* Add standard width constraint to containers */
.container {
  @apply max-w-[1300px] w-full mx-auto px-4;
}

/* Mobile-specific styles */
@media (max-width: 767px) {
  .desktop-only {
    @apply hidden;
  }
  .mobile-reverse {
    @apply flex-col-reverse;
  }
  .mobile-stack {
    @apply flex flex-col;
  }
  .mobile-slider {
    @apply overflow-x-auto scroll-smooth;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .mobile-slide {
    @apply snap-start shrink-0 w-[90%] mr-2.5;
  }
  .mobile-indicator {
    @apply flex justify-center mt-[15px];
  }
  .mobile-indicator-dot {
    @apply h-2 w-2 bg-[#bbb] mx-[5px] my-0 rounded-[50%];
  }
  .mobile-accordion-header {
    @apply cursor-pointer bg-[#f8f9fa] font-semibold mb-[5px] p-[15px] rounded-[5px];
  }
  .mobile-accordion-content {
    @apply max-h-0 overflow-hidden transition-[max-height] duration-[0.3s] ease-[ease-out] px-[15px] py-0;
  }
  .mobile-accordion-content.active {
    @apply max-h-[500px] p-[15px];
  }
}

/* ===== TESTIMONIAL SLIDER STYLES ===== */
.testimonial-slider-container {
  @apply relative overflow-hidden w-full mb-[30px] px-[15px] py-0;
}
.testimonial-slides {
  @apply relative overflow-hidden w-full;
}
.testimonial-slide {
  @apply hidden w-full transition-all duration-[0.3s] ease-[ease] px-2.5 py-0;
}
.testimonial-slide.active {
  @apply block;
}
.testimonial-dot {
  @apply w-2.5 h-2.5 bg-[#ccc] cursor-pointer transition-[background-color] duration-[0.3s] ease-[ease] mx-[5px] my-0 rounded-[50%];
}
.testimonial-prev,
.testimonial-next {
  @apply absolute -translate-y-2/4 w-10 h-10 flex items-center justify-center shadow-[0_2px_5px_rgba(0,0,0,0.2)] z-10 cursor-pointer rounded-[50%] border-[none] left-[5px] top-2/4;
  background: rgba(255, 255, 255, 0.8);
}
.testimonial-next {
  @apply left-auto right-[5px];
}
.tweet-container {
  @apply w-full block;
}