@media ( min-width: 0px) and ( max-width: 1199px) {

    .cover-img .floating-card {
		position: absolute;
		top: 491px;
		left: 70%;
		transform: translateX(-50%);
		width: 52%;
		background: rgba(255, 255, 255, 0.5);
		padding: 10px;
		border-radius: 12px;
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
		z-index: 10;
	}
	
	.socila_media {
		align-items: wrap;
		/*height: 180px;*/
		display: grid;
		height: 0px;
	}
	
	
	.display_inline {
		display: flex;
		margin-right: 0px;
		gap: 6px;
		align-items: center;
		flex-wrap: wrap;
	}
	
	.user_profile-layer {
		position: absolute;
		top: 5%;
		left: 55%;
		right: 0;
		z-index: 1;
		width: 63%;
	}
	
	.aboutus-section{text-align: center;margin: 0px 30px;}
	.profile-card-image{width: 321px; height: 316px;}
	.profile-card-container{margin: 0 15px;}
	.section-container{margin: 0 15px;}
	
	.price-section-description{text-align: left;margin: 0px 15px;}
	
	/*.row>* {padding-right: 0px;}*/
	.user-contact-us{padding-top: 25px;}
	
	.user-profile-photo {width: 85px;height: 85px;top: 286px;left: 18px;}
	.profile-photo {width: 80px;height: 80px;}
	.owl-carousel .owl-item img {height: 180px;}
	.cover-img .main-container {padding: 8px;}
	.cover-img .main-container {height: 266px;}
	.social-media-links {left: 155px;top: -10px;}
	.video-gallery .preview .play {left: 44%;}
	.user_profile-layer {font-size: 15px;}
	.video-gallery .preview .play {font-size: 30px;padding: 0px 10px;}
	.kd-photo-gallery{grid-template-columns: auto !important;}
}

@media (max-width: 768px) {
    .header-carousel .owl-carousel-item {
        position: relative;
        min-height: 266px;
    }
    
    .header-carousel .owl-carousel-item img {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .header-carousel .owl-carousel-item h5,
    .header-carousel .owl-carousel-item p {
        font-size: 14px !important;
        font-weight: 400 !important;
    }

    .header-carousel .owl-carousel-item h1 {
        font-size: 30px;
        font-weight: 600;
    }
	
	.chat-bot #chat-box {
		width: 355px;
		height: 540px;
	}
	
	.message { max-width: 100%;}
	.bubble {max-width: 100%;}
	
	.profile-conver-photo {
		overflow: hidden;
		height: 266px !important;
	}
	.kd-photo-gallery{grid-template-columns: auto;}
}

@media (min-width: 768px) and (max-width: 1199px) {
	/*
	.profile-card-container > div {
		flex: 0 0 33.3333%;
		max-width: 33.3333%;
	}
	*/
	.navbar-light .navbar-nav .nav-link {
		margin-left: 15px;
	}
	
	.header-menu {
		margin-right: 15px !important;
		right: 0px;
		position: absolute;
	}
	.search-price{min-width:200px;height: 55px;}
}

/* ---------- MOBILE ---------- */
@media (max-width: 480px) {
	.kd-card__image-wrap {
		aspect-ratio: 4 / 3;
	}
  
	.kd-card__name {
		font-size: 16px;
	}
  
	.kd-card__price {
		font-size: 14px;
	}

	.kd-card__location {
		font-size: 13px;
	}
}

/* ---------- TABLET: 3 cards (iPad portrait & landscape) ---------- */
@media (max-width: 1200px) {
	.kd-cards-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 18px;
	}
}

/* Small tablet / large phone landscape: 2 cards */
@media (max-width: 768px) {
  .kd-cards-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px;
    padding: 12px;
  }
}

/* Mobile phones (iPhone, Android): 1 card */
@media (max-width: 600px) {
  .kd-cards-grid {
    grid-template-columns: 1fr !important;
    gap: 16px;
    padding: 12px;
  }
}

/* ============ MOBILE RESPONSIVE ============ */
@media (max-width: 900px) {
  .kd-hero__panels {
    grid-template-columns: 1fr;
  }
  
  .kd-why-join__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .kd-hero {
    padding: 40px 16px 60px;
  }
  
  .kd-hero__title {
    font-size: 28px;
  }
  
  .kd-hero__subtitle {
    font-size: 15px;
  }
  
  .kd-hero__trust {
    gap: 16px;
    padding: 16px;
  }
  
  .kd-hero__trust-divider {
    display: none;
  }
  
  .kd-categories__title,
  .kd-why-join__title {
    font-size: 26px;
  }
  
  .kd-categories__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  
  .kd-why-join__grid {
    grid-template-columns: 1fr;
  }
  
  .kd-why-join__cta {
    padding: 28px 20px;
  }
  
  .kd-why-join__cta-title {
    font-size: 20px;
  }
}

@media (max-width: 480px) {
  .kd-hero__title {
    font-size: 24px;
  }
  
  .kd-categories__grid {
    grid-template-columns: 1fr;
  }
  
  .kd-hero-panel {
    padding: 24px 18px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .kd-search__bar {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 12px;
  }
  
  .kd-search__field {
    border-right: none;
    border-bottom: 1px solid var(--kd-border);
    padding: 10px 14px;
  }
  
  .kd-search__field:last-of-type {
    border-bottom: none;
  }
  
  .kd-search__btn {
    width: 100%;
    justify-content: center;
    margin-top: 8px;
  }
  
  .kd-search__shortcuts {
    justify-content: flex-start;
  }
}

@media (max-width: 600px) {
  .kd-featured,
  .kd-featured__container {
    padding-left: 12px;
    padding-right: 12px;
    width: 100%;
    box-sizing: border-box;
    max-width: 100%;
  }
}

/* ============ MOBILE RESPONSIVE ============ */
@media (max-width: 1024px) {
  .kd-categories__grid,
  .kd-why-join__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .kd-trust-strip__container {
    gap: 20px;
  }
  
  .kd-trust-strip__divider {
    display: none;
  }
  
  .kd-trust-strip__number {
    font-size: 24px;
  }
  
  .kd-categories__title,
  .kd-featured__title,
  .kd-how-it-works__title,
  .kd-why-join__title {
    font-size: 24px;
  }
  
  .kd-categories__grid,
  .kd-how-it-works__steps,
  .kd-why-join__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .kd-featured__header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .kd-why-join__cta {
    padding: 28px 20px;
  }
  
  .kd-why-join__cta-title {
    font-size: 20px;
  }
}

@media (max-width: 480px) {
  .kd-categories__grid {
    grid-template-columns: 1fr;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .kd-inquiry {
    padding: 30px 12px;
  }
  
  .kd-inquiry__container {
    padding: 24px 18px;
  }
  
  .kd-inquiry__title {
    font-size: 24px;
  }
  
  .kd-inquiry__progress-steps {
    font-size: 11px;
  }
  
  .kd-inquiry__progress-step {
    font-size: 10px;
  }
  
  .kd-occasion-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .kd-pro-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .kd-form-grid {
    grid-template-columns: 1fr;
  }
  
  .kd-inquiry__nav {
    flex-direction: column-reverse;
  }
  
  .kd-btn-prev,
  .kd-btn-next,
  .kd-btn-submit {
    width: 100%;
  }
}

@media (max-width: 600px) {
	.kd-sticky-help {
		bottom: 16px;
		right: 16px;
		padding: 12px;
		border-radius: 50%;
	}
  
	.kd-sticky-help__text {
		display: none;
	}
}

/* Mobile */
@media (max-width: 991px) {
	.navbar-brand img {
		height: 28px;
		width: auto;
	}
}

/* ============================================
   RESPONSIVE BREAKPOINTS
============================================ */

/* Hide topbar items on smaller screens */
@media (max-width: 900px) {
  .kd-topbar__contact:not(:first-child) {
    display: none;
  }
  
  .kd-topbar__follow {
    display: none;
  }
}

/* Tablet & Mobile - hide desktop nav, show menu toggle */
@media (max-width: 992px) {
  .kd-header__nav {
    display: none;
  }
  
  .kd-header__menu-toggle {
    display: flex;
  }
  
  .kd-header__cta {
    padding: 8px 18px;
    font-size: 13px;
  }
}

/* Small mobile - hide topbar entirely or show condensed */
@media (max-width: 600px) {
  .kd-topbar {
    padding: 6px 12px;
  }
  
  .kd-topbar__contact span {
    display: none;
  }
  
  .kd-topbar__contact {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #FFFFFF;
    justify-content: center;
    border: 1px solid var(--kd-border);
  }
  
  .kd-header {
    padding: 12px 16px;
  }
  
  .kd-header__logo {
    font-size: 22px;
  }
}

/* ============ MOBILE RESPONSIVE ============ */
@media (max-width: 1024px) {
  .kd-about-mission__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .kd-about-numbers__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .kd-about-hero {
    padding: 50px 16px 40px;
  }
  
  .kd-about-hero__title {
    font-size: 30px;
  }
  
  .kd-about-hero__subtitle {
    font-size: 15px;
  }
  
  .kd-section-title {
    font-size: 26px;
  }
  
  .kd-about-story {
    padding: 60px 16px;
  }
  
  .kd-about-story__container {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  
  .kd-quote-card {
    transform: rotate(0deg);
    padding: 30px;
  }
  
  .kd-quote-card__text {
    font-size: 17px;
  }
  
  .kd-about-mission,
  .kd-about-numbers,
  .kd-about-values,
  .kd-about-founder,
  .kd-about-cta {
    padding: 60px 16px;
  }
  
  .kd-about-mission__grid {
    grid-template-columns: 1fr;
  }
  
  .kd-about-values__grid {
    grid-template-columns: 1fr;
  }
  
  .kd-about-founder__container {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 30px;
  }
  
  .kd-avatar-placeholder {
    margin: 0 auto;
    width: 120px;
    height: 120px;
  }
  
  .kd-avatar-placeholder i {
    width: 48px;
    height: 48px;
  }
  
  .kd-number-card__value {
    font-size: 36px;
  }
  
  .kd-about-cta__container {
    padding: 40px 24px;
  }
  
  .kd-about-cta__title {
    font-size: 26px;
  }
  
  .kd-about-cta__buttons {
    flex-direction: column;
  }
  
  .kd-about-cta__btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .kd-about-numbers__grid {
    grid-template-columns: 1fr;
  }
}

/* ============ MOBILE RESPONSIVE ============ */
@media (max-width: 900px) {
  .kd-addon__container {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  
  .kd-addon__visual {
    height: 300px;
    max-width: 400px;
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  .kd-pricing-hero {
    padding: 50px 16px 30px;
  }
  
  .kd-pricing-hero__title {
    font-size: 30px;
  }
  
  .kd-pricing-hero__subtitle {
    font-size: 14px;
  }
  
  .kd-pricing__cards {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  
  .kd-plan-card--featured {
    transform: scale(1);
    order: -1;
  }
  
  .kd-plan-card--featured:hover {
    transform: translateY(-4px);
  }
  
  .kd-plan-card {
    padding: 28px 24px;
  }
  
  .kd-section-title {
    font-size: 24px;
  }
  
  .kd-addon__features {
    grid-template-columns: 1fr;
  }
  
  .kd-pricing-cta__container {
    padding: 40px 24px;
  }
  
  .kd-pricing-cta__title {
    font-size: 24px;
  }
  
  .kd-pricing-cta__buttons {
    flex-direction: column;
  }
  
  .kd-pricing-cta__btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .kd-plan-card__amount {
    font-size: 44px;
  }
  
  .kd-pricing__toggle-btn {
    padding: 10px 18px;
    font-size: 13px;
  }
}

/* ============ TABLET ============ */
@media (max-width: 1024px) {
  .kd-hero__title {
    font-size: 38px;
  }

  .kd-hero__visual {
    height: 380px;
  }

  .kd-hero__shape--1 { width: 100px; height: 100px; }
  .kd-hero__shape--2 { width: 80px; height: 80px; }
  .kd-hero__shape--3 { width: 120px; height: 120px; }
  .kd-hero__shape--4 { width: 60px; height: 60px; }
}

/* ============ MOBILE ============ */
@media (max-width: 768px) {
  .kd-hero {
    padding: 40px 16px 60px;
    min-height: auto;
  }

  .kd-hero__container {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .kd-hero__visual {
    display: none;
  }

  .kd-hero__title {
    font-size: 32px;
    letter-spacing: -0.5px;
  }

  .kd-hero__subtitle {
    font-size: 15px;
  }

  .kd-hero__search-bar {
    flex-direction: column;
    align-items: stretch;
    padding: 8px;
  }

  .kd-hero__search-field {
    padding: 10px 14px;
  }

  .kd-hero__search-divider {
    width: 100%;
    height: 1px;
  }

  .kd-hero__search-btn {
    width: 100%;
    justify-content: center;
    padding: 14px;
    margin-top: 4px;
  }

  .kd-hero__trust {
    gap: 20px;
  }

  .kd-hero__trust-item strong {
    font-size: 20px;
  }
}

@media (max-width: 480px) {
  .kd-hero__title {
    font-size: 26px;
  }

  .kd-hero__quick-links {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 1024px) {
  .kd-cards-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }
}

@media (max-width: 768px) {
  .kd-cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    padding: 12px;
  }
}

@media (max-width: 480px) {
  .kd-cards-grid {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 12px;
  }
}

/* ============ MOBILE RESPONSIVE ============ */
@media (max-width: 1024px) {
  .kd-contact__grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  
  .kd-contact-faq__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .kd-contact {
    padding: 50px 16px 60px;
  }
  
  .kd-contact__title {
    font-size: 30px;
  }
  
  .kd-contact__subtitle {
    font-size: 14px;
  }
  
  .kd-contact__info,
  .kd-contact__form-wrap {
    padding: 28px 22px;
  }
  
  .kd-contact__form-row {
    grid-template-columns: 1fr;
  }
  
  .kd-contact__radio-group {
    grid-template-columns: 1fr;
  }
  
  .kd-contact__radio-label {
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
    padding: 12px 16px;
  }
  
  .kd-contact-faq {
    padding: 60px 16px;
  }
}

/* ============ MOBILE RESPONSIVE ============ */
@media (max-width: 1024px) {
  .kd-footer__main-container {
    grid-template-columns: 1fr 1fr;
    gap: 40px 30px;
  }
  
  .kd-footer__brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 768px) {
  .kd-footer__newsletter {
    padding: 30px 16px;
  }
  
  .kd-footer__newsletter-container {
    grid-template-columns: 1fr;
    gap: 20px;
    text-align: center;
  }
  
  .kd-footer__newsletter-title {
    font-size: 20px;
  }
  
  .kd-footer__newsletter-form {
    min-width: auto;
    width: 100%;
    flex-direction: column;
  }
  
  .kd-footer__newsletter-btn {
    justify-content: center;
  }
  
  .kd-footer__main {
    padding: 40px 16px 30px;
  }
  
  .kd-footer__main-container {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  
  .kd-footer__brand {
    text-align: center;
  }
  
  .kd-footer__tagline {
    margin-left: auto;
    margin-right: auto;
  }
  
  .kd-footer__contact {
    align-items: center;
  }
  
  .kd-footer__social {
    justify-content: center;
  }
  
  .kd-footer__col-title {
    text-align: center;
  }
  
  .kd-footer__col-title::after {
    left: 50%;
    transform: translateX(-50%);
  }
  
  .kd-footer__links {
    text-align: center;
  }
  
  .kd-footer__links a:hover {
    padding-left: 0;
  }
  
  .kd-footer__bottom-container {
    flex-direction: column;
    text-align: center;
  }
  
  .kd-footer__legal {
    flex-wrap: wrap;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .kd-footer__legal {
    font-size: 12px;
  }
}

/* ============ MOBILE RESPONSIVE ============ */
@media (max-width: 1024px) {
  .kd-register__grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .kd-register__sidebar {
    position: static;
    order: 2;
  }
}

@media (max-width: 768px) {
  .kd-register {
    padding: 40px 16px 60px;
  }

  .kd-register__title {
    font-size: 30px;
  }

  .kd-register__subtitle {
    font-size: 14px;
  }

  .kd-register__form-wrap {
    padding: 28px 22px;
  }

  .kd-register__form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .kd-register__step-title {
    font-size: 20px;
  }

  .kd-profession-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .kd-register__nav {
    flex-direction: column-reverse;
    gap: 10px;
  }

  .kd-register__btn {
    width: 100%;
    justify-content: center;
  }

  .kd-register__benefits,
  .kd-register__process {
    padding: 24px 20px;
  }
}

/* ============================================
   PROFILE PAGE - RESPONSIVE FIXES
============================================ */

/* ============ TABLET (max 1024px) ============ */
@media (max-width: 1024px) {
  
  /* Hero - stack profile photo above info */
  .kd-profile-hero__container {
    grid-template-columns: 1fr;
    gap: 24px;
    text-align: center;
  }

  /* Center the photo */
  .kd-profile-hero__photo-wrap {
    margin: 0 auto;
    width: 180px;
    height: 180px;
  }

  /* Center all info elements */
  .kd-profile-hero__top,
  .kd-profile-hero__meta,
  .kd-profile-hero__tags,
  .kd-profile-hero__actions {
    justify-content: center;
  }

  .kd-profile-hero__name {
    font-size: 32px;
  }

  /* Stats - 2 columns on tablet */
  .kd-profile-stats__container {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  /* Main content - sidebar moves below */
  .kd-profile-main__container {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* Sidebar - no longer sticky on mobile */
  .kd-profile-main__right {
    position: static;
    order: 2;
  }

  /* Photo gallery - 3 columns still */
  .kd-photo-gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}


/* ============ MOBILE (max 768px) ============ */
@media (max-width: 768px) {
  
  /* Breadcrumb - smaller text */
  .kd-prof-breadcrumb {
    padding: 10px 16px;
  }

  .kd-prof-breadcrumb__container {
    font-size: 12px;
    gap: 6px;
  }

  .kd-prof-breadcrumb__container i {
    width: 12px;
    height: 12px;
  }

  /* HERO - completely restructured */
  .kd-profile-hero {
    padding: 24px 16px 30px;
  }

  .kd-profile-hero__container {
    gap: 20px;
  }

  /* Smaller photo */
  .kd-profile-hero__photo-wrap {
    width: 140px;
    height: 140px;
  }

  .kd-profile-hero__photo {
    border-width: 4px;
  }

  /* Photo background ring smaller */
  .kd-profile-hero__photo-bg {
    inset: -6px;
  }

  /* SMALLER VERIFIED BADGE - this is critical */
  .kd-profile-hero__verified-badge {
    width: 36px;
    height: 36px;
    bottom: 4px;
    right: 4px;
    border-width: 3px;
  }

  .kd-profile-hero__verified-badge i {
    width: 18px;
    height: 18px;
  }

  /* Name - smaller and better wrapping */
  .kd-profile-hero__name {
    font-size: 26px;
    line-height: 1.2;
    margin: 0 0 12px;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  /* Profession pill smaller */
  .kd-profile-hero__profession {
    font-size: 11px;
    padding: 3px 10px;
  }

  .kd-profile-hero__verified-pill {
    font-size: 10px;
    padding: 3px 8px;
  }

  .kd-profile-hero__verified-pill i {
    width: 11px;
    height: 11px;
  }

  /* Top section flex wrap */
  .kd-profile-hero__top {
    gap: 6px;
    margin-bottom: 10px;
  }

  /* Meta info - vertical stack on small screens */
  .kd-profile-hero__meta {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
  }

  .kd-profile-hero__meta-item {
    font-size: 13px;
  }

  .kd-profile-hero__meta-item i {
    width: 14px;
    height: 14px;
  }

  /* Tags - center & wrap nicely */
  .kd-profile-hero__tags {
    gap: 5px;
    margin-bottom: 18px;
    padding: 0 10px;
  }

  .kd-profile-tag {
    font-size: 11px;
    padding: 4px 10px;
  }

  /* Action buttons - stack vertically on very small */
  .kd-profile-hero__actions {
    flex-direction: column;
    width: 100%;
    gap: 8px;
  }

  .kd-profile-hero__btn {
    width: 100%;
    justify-content: center;
    padding: 12px 18px;
    font-size: 13px;
  }

  /* Share button stays small but inline */
  .kd-profile-hero__btn--share {
    width: 100%;
    padding: 12px;
  }

  /* STATS BAR - single column with better spacing */
  .kd-profile-stats {
    padding: 20px 16px;
  }

  .kd-profile-stats__container {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .kd-stat-item {
    padding: 12px;
    background: #FAFBFC;
    border-radius: 10px;
  }

  .kd-stat-item__icon {
    width: 38px;
    height: 38px;
  }

  .kd-stat-item__icon i {
    width: 18px;
    height: 18px;
  }

  .kd-stat-item__value {
    font-size: 14px;
  }

  .kd-stat-item__label {
    font-size: 11px;
  }

  /* MAIN CONTENT */
  .kd-profile-main {
    padding: 24px 16px;
  }

  .kd-profile-main__left {
    gap: 16px;
  }

  .kd-profile-section {
    padding: 22px 18px;
    border-radius: 12px;
  }

  .kd-profile-section__title {
    font-size: 17px;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
  }

  .kd-profile-section__title i {
    width: 18px;
    height: 18px;
  }

  .kd-profile-section__count {
    font-size: 11px;
    padding: 3px 8px;
  }

  /* Personal message - smaller padding */
  .kd-profile-section__message {
    padding: 16px 18px;
  }

  .kd-profile-section__message p {
    font-size: 14px;
    line-height: 1.6;
  }

  .kd-profile-section__description {
    font-size: 14px;
    line-height: 1.6;
  }

  /* Skills - 2 columns */
  .kd-skills-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .kd-skill-card {
    padding: 12px 14px;
    font-size: 13px;
  }

  /* Photo gallery - 2 columns on mobile */
  .kd-photo-gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  /* Video gallery - 1 column */
  .kd-video-gallery {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* Pricing - 1 column */
  .kd-pricing-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .kd-pricing-card {
    padding: 22px 18px;
  }

  .kd-pricing-card__amount {
    font-size: 24px;
  }

  /* Reviews summary smaller */
  .kd-reviews-summary {
    padding: 20px;
  }

  .kd-reviews-summary__number {
    font-size: 38px;
  }

  /* Review cards */
  .kd-review-card {
    padding: 16px;
  }

  .kd-review-card__avatar {
    width: 38px;
    height: 38px;
    font-size: 15px;
  }

  .kd-review-card__name {
    font-size: 13px;
  }

  .kd-review-card__text {
    font-size: 13px;
  }

  /* SIDEBAR */
  .kd-profile-sidebar {
    padding: 22px 18px;
    border-radius: 12px;
  }

  .kd-profile-sidebar__price-amount {
    font-size: 30px;
  }

  .kd-profile-sidebar__currency {
    font-size: 20px;
  }

  /* Form inputs slightly larger for mobile typing */
  .kd-profile-form__field input,
  .kd-profile-form__field select,
  .kd-profile-form__field textarea {
    padding: 12px 14px;
    font-size: 14px;
  }

  /* Similar professionals title */
  .kd-similar {
    padding: 40px 16px;
  }

  .kd-similar__title {
    font-size: 22px;
  }

  .kd-similar__subtitle {
    font-size: 13px;
  }
}


/* ============ SMALL MOBILE (max 480px) ============ */
@media (max-width: 480px) {
  
  /* Even smaller photo */
  .kd-profile-hero__photo-wrap {
    width: 120px;
    height: 120px;
  }

  /* Even smaller name to prevent cut-off */
  .kd-profile-hero__name {
    font-size: 22px;
  }

  /* Stats single column already, but tighter */
  .kd-profile-stats {
    padding: 16px 12px;
  }

  .kd-profile-main {
    padding: 20px 12px;
  }

  /* Section padding tighter */
  .kd-profile-section {
    padding: 20px 16px;
  }

  /* Photo gallery - 1 column on tiny screens */
  .kd-photo-gallery {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  /* Pricing card features smaller */
  .kd-pricing-card__features li {
    font-size: 12px;
  }

  /* Hide section count on very small screens */
  .kd-profile-section__count {
    display: none;
  }
}


/* ============ ULTRA SMALL (max 360px) ============ */
@media (max-width: 360px) {
  
  .kd-profile-hero__name {
    font-size: 20px;
  }

  .kd-profile-hero__photo-wrap {
    width: 110px;
    height: 110px;
  }

  .kd-profile-hero__verified-badge {
    width: 30px;
    height: 30px;
  }

  .kd-profile-hero__verified-badge i {
    width: 14px;
    height: 14px;
  }
}

/* ============================================
   PROFILE HERO - FORCED MOBILE FIX
============================================ */

@media (max-width: 768px) {
  
  /* Force vertical stack — override any grid */
  .kd-profile-hero {
    padding: 24px 16px 30px !important;
  }

  .kd-profile-hero__container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 24px !important;
  }

  /* Photo wrapper - centered and properly sized */
  .kd-profile-hero__photo-wrap {
    width: 160px !important;
    height: 160px !important;
    margin: 0 auto !important;
    flex-shrink: 0 !important;
  }

  .kd-profile-hero__photo {
    border-width: 5px !important;
  }

  .kd-profile-hero__photo-bg {
    inset: -8px !important;
  }

  /* Verified badge - smaller and properly positioned */
  .kd-profile-hero__verified-badge {
    width: 38px !important;
    height: 38px !important;
    bottom: 6px !important;
    right: 6px !important;
    border-width: 3px !important;
    background: linear-gradient(135deg, #10B981 0%, #059669 100%) !important;
  }

  .kd-profile-hero__verified-badge i {
    width: 18px !important;
    height: 18px !important;
    color: #FFFFFF !important;
  }

  /* Info section - full width below photo */
  .kd-profile-hero__info {
    width: 100% !important;
    text-align: center !important;
  }

  /* Top pills - centered */
  .kd-profile-hero__top {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-bottom: 12px !important;
  }

  .kd-profile-hero__profession {
    font-size: 11px !important;
    padding: 4px 10px !important;
  }

  .kd-profile-hero__verified-pill {
    font-size: 10px !important;
    padding: 4px 8px !important;
  }

  /* NAME - prevent breaking & cut off */
  .kd-profile-hero__name {
    font-size: 26px !important;
    line-height: 1.3 !important;
    margin: 0 0 14px !important;
    word-wrap: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
    text-align: center !important;
    width: 100% !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
  }

  /* Meta info - vertical stack centered */
  .kd-profile-hero__meta {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    margin-bottom: 16px !important;
    width: 100% !important;
  }

  .kd-profile-hero__meta-item {
    font-size: 13px !important;
    justify-content: center !important;
  }

  /* Tags centered */
  .kd-profile-hero__tags {
    justify-content: center !important;
    gap: 6px !important;
    margin-bottom: 18px !important;
    padding: 0 8px !important;
  }

  .kd-profile-tag {
    font-size: 11px !important;
    padding: 4px 10px !important;
  }

  /* Action buttons - full width stacked */
  .kd-profile-hero__actions {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 8px !important;
  }

  .kd-profile-hero__btn {
    width: 100% !important;
    justify-content: center !important;
    padding: 13px 20px !important;
    font-size: 14px !important;
  }
}

/* Smaller phones - even more compact */
@media (max-width: 480px) {
  
  .kd-profile-hero__photo-wrap {
    width: 140px !important;
    height: 140px !important;
  }

  .kd-profile-hero__name {
    font-size: 24px !important;
    padding: 0 8px !important;
  }

  .kd-profile-hero__verified-badge {
    width: 34px !important;
    height: 34px !important;
  }

  .kd-profile-hero__verified-badge i {
    width: 16px !important;
    height: 16px !important;
  }
}

/*********/

/* ============================================
   PRICING CARDS - MOBILE OPTIMIZATION
============================================ */

@media (max-width: 768px) {
  
  /* Pricing grid - single column on mobile */
  .kd-pricing-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* Pricing card - cleaner spacing */
  .kd-pricing-card {
    padding: 24px 22px !important;
    border-radius: 14px !important;
  }

  /* Plan name */
  .kd-pricing-card__name {
    font-size: 13px !important;
    color: var(--kd-text-secondary) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
  }

  /* Price block - bigger and bolder */
  .kd-pricing-card__price {
    margin-bottom: 14px !important;
    flex-wrap: wrap !important;
  }

  .kd-pricing-card__currency {
    font-size: 22px !important;
    font-weight: 700 !important;
  }

  .kd-pricing-card__amount {
    font-size: 36px !important;
    font-weight: 800 !important;
    letter-spacing: -1px !important;
  }

  .kd-pricing-card__unit {
    font-size: 13px !important;
    color: var(--kd-text-secondary) !important;
    margin-left: 6px !important;
    font-weight: 500 !important;
  }

  /* Description */
  .kd-pricing-card__desc {
    font-size: 13px !important;
    line-height: 1.5 !important;
    margin: 0 0 16px !important;
    color: var(--kd-text-secondary) !important;
  }

  /* Features list */
  .kd-pricing-card__features {
    margin: 0 0 20px !important;
    padding: 16px 0 !important;
    border-top: 1px solid var(--kd-border) !important;
    border-bottom: 1px solid var(--kd-border) !important;
  }

  .kd-pricing-card__features li {
    font-size: 13px !important;
    margin-bottom: 10px !important;
    line-height: 1.4 !important;
  }

  .kd-pricing-card__features li:last-child {
    margin-bottom: 0 !important;
  }

  .kd-pricing-card__features li i {
    width: 16px !important;
    height: 16px !important;
  }

  /* CTA button - bolder */
  .kd-pricing-card__btn {
    padding: 13px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, var(--kd-blue) 0%, var(--kd-orange) 100%) !important;
    box-shadow: 0 4px 12px rgba(243, 112, 33, 0.2) !important;
  }

  .kd-pricing-card__btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 18px rgba(243, 112, 33, 0.3) !important;
  }

  /* Pricing note */
  .kd-pricing-note {
    font-size: 12px !important;
    padding: 12px 14px !important;
    line-height: 1.5 !important;
  }
}

/* Optional: Cleaner hero on mobile */
@media (max-width: 768px) {
  
  /* Add subtle decorative accent above photo */
  .kd-profile-hero__photo-wrap::before {
    content: "";
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, var(--kd-blue) 0%, var(--kd-orange) 100%);
    border-radius: 999px;
    z-index: 0;
  }

  /* Hide breadcrumb on smaller screens to save space */
  .kd-prof-breadcrumb {
    display: none;
  }
}

/* ============================================
   PROFILE - SIDEBAR AT BOTTOM ON MOBILE
============================================ */

@media (max-width: 1024px) {
  
  /* Convert grid to flex column on tablet/mobile */
  .kd-profile-main__container {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Left content shows first */
  .kd-profile-main__left {
    order: 1 !important;
    width: 100% !important;
  }

  /* Right sidebar shows AFTER left content */
  .kd-profile-main__right {
    order: 2 !important;
    width: 100% !important;
    position: static !important;
    top: auto !important;
  }

  /* Sidebar takes full width on mobile */
  .kd-profile-sidebar {
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* Extra mobile-specific styling for the sidebar */
@media (max-width: 768px) {
  
  /* Make sidebar visually distinct so users know it's the booking section */
  .kd-profile-sidebar {
    background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFD 100%) !important;
    border: 2px solid var(--kd-blue) !important;
    box-shadow: 0 8px 24px rgba(30, 91, 170, 0.1) !important;
  }

  /* Add a small heading at the top of the sidebar so it's clear */
  .kd-profile-sidebar__price-summary {
    position: relative;
  }

  .kd-profile-sidebar__price-summary::before {
    content: "Book This Professional";
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--kd-orange);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 12px;
    text-align: center;
  }
}

/* ============ MOBILE FLOATING BOOK BUTTON ============ */

@media (max-width: 1024px) {
  .kd-mobile-book-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 14px 22px;
    background: linear-gradient(135deg, var(--kd-blue) 0%, var(--kd-orange) 100%);
    color: #FFFFFF;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    box-shadow: 0 8px 24px rgba(243, 112, 33, 0.4);
    z-index: 100;
    animation: bookBtnPulse 2.5s ease-in-out infinite;
    transition: all 0.3s ease;
  }

  .kd-mobile-book-btn i {
    width: 16px;
    height: 16px;
  }

  .kd-mobile-book-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(243, 112, 33, 0.5);
    color: #FFFFFF;
  }
}

@keyframes bookBtnPulse {
  0%, 100% {
    box-shadow: 0 8px 24px rgba(243, 112, 33, 0.4);
  }
  50% {
    box-shadow: 0 8px 24px rgba(243, 112, 33, 0.7), 0 0 0 8px rgba(243, 112, 33, 0.15);
  }
}

/* ============================================
   SKILLS GRID - SINGLE COLUMN ON MOBILE
============================================ */

@media (max-width: 768px) {
  
  .kd-skills-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
}

@media (max-width: 768px) {
  
  /* Single column layout */
  .kd-skills-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  /* Slightly more padding since cards are wider now */
  .kd-skill-card {
    padding: 14px 16px !important;
    font-size: 14px !important;
    background: #F8F9FB !important;
    border-radius: 10px !important;
  }

  /* Larger icon for better visibility */
  .kd-skill-card__icon {
    width: 20px !important;
    height: 20px !important;
  }
}


/* ==========================================================================
   Moved out of inline <style> blocks in views (2026-08-25)

   Base rules for these components live in components.css (shared UI) and
   search_page.css (/search). Only the responsive layer belongs here.
   ========================================================================== */

/* ---- Listing filter bar (was inline in includes/header.php) ---- */
@media (max-width: 640px) {
	.kd-filters-bar {
		flex-direction: column;
		align-items: stretch;
	}

	.kd-filters-bar__group {
		flex-direction: column;
		align-items: stretch;
	}

	.kd-filters-bar .kd-filter {
		min-width: 0;
	}

	.kd-filters-bar__count {
		text-align: center;
	}
}

/* ---- /search (was inline in searchpage/list.php) --------------------------
   That stylesheet had no media queries at all, so a 400px phone got the
   desktop layout: 142px of the 400px viewport (35%) went to padding stacked
   across four nested containers (.page 32 + .container 12 + card-container 15
   + grid 12, each side), leaving cards 258px wide.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {

	/* the biggest single win: 32px of side padding down to 12px */
	.page {
		padding: 16px 12px;
	}

	.page .filter-card {
		padding: 16px 14px;
		border-radius: 14px;
	}

	/* the count and the sort pills were on one flex row and collided, which is
	   why "professionals" and "Sort by:" ran together with no space */
	.page .result-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	.page .result-text {
		font-size: 14px;
	}

	/* "Sort by:" takes its own line so the three pills share one row evenly --
	   left inline, the label ate enough width that "Price: Low" wrapped alone
	   onto a second row and stretched full width */
	.page .sort-wrap {
		flex-wrap: wrap;
		gap: 8px;
		width: 100%;
	}

	.page .sort-lbl {
		width: 100%;
	}

	.page .sort-pill {
		flex: 1 1 0;
		min-width: 0;
		text-align: center;
		padding: 8px 6px;
		white-space: nowrap;
	}

	.page .popular-row {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 8px;
		margin-bottom: 16px;
	}

	.page .pop-pill {
		margin-right: 0;
	}

	.page .filter-top {
		gap: 10px;
	}

	.page .filter-title {
		font-size: 15px;
	}

	/* touch targets: 10px padding gave ~36px tall controls */
	.page .f-select {
		padding: 12px 32px 12px 12px;
		font-size: 14px;
	}

	.page .find-btn {
		padding: 14px;
		font-size: 14px;
	}

	/* Cards: strip the nested side spacing so they use the width that was
	   being wasted. .profile-card-container is only rendered by the search
	   views now, so this doesn't reach other pages. */
	.page .container {
		padding-left: 0;
		padding-right: 0;
	}

	.page .profile-card-container {
		margin-left: 0;
		margin-right: 0;
	}

	.page .kd-cards-grid {
		grid-template-columns: 1fr;
		gap: 14px;
	}
}