/**
Theme Name: Mitesh Khatri Photography
Author: TechnotusGlobal
Author URI: https://technotus.com/
Description: Mitesh Khatri Photography | Photographer in Jaipur
Get the perfect shoot done from Mitesh Khatri Photography. Weddings, Fashion, Hotels, Restros, cafes and many more. Contact Now!
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mitesh-khatri-photography
Template: astra
*/

/* Main fixed header - desktop & mobile */
header#masthead,
header#masthead .elementor-top-section,
.site-header,
.site-header .container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
    transition: all 0.4s ease-in-out !important;
}

/* home-page: Remove hover effects from ElementsKit social icons */
.elementor-element-f791937 .ekit_social_media a {
    display: inline-flex !important;        /* keeps baseline while allowing flex centering */
    align-items: center;                    /* vertical centering */
    justify-content: center;                /* horizontal centering */
    transition: transform 0.3s ease;        /* smooth scaling */
}

.elementor-element-f791937 .ekit_social_media a:hover {
    transform: scale(1.1);                  /* scale up 10% */
    transform-origin: center center !important;  
    color: inherit !important;              /* no color change */
    background: none !important;            /* no background change */
}


.hero-section-about-page p:first-of-type::first-letter {
    font-size: 4rem;
    float: left;
    line-height: 0.8;
    margin: 0.1em 0.1em 0 0;
    color: #000000;
    font-weight: 400;
}


.quote h3::before {
    content: '"';
    font-size: 6rem;
    position: absolute;
	top: 1rem;
    left: -2rem;
    color: #000000;
    opacity: 0.5;
    font-family: 'Georgia', serif;
}


/* Base Thumb */
.elementor-widget-htmega-panelslider-addons .panel-slider .thumb {
  overflow: hidden;
}

/* Image Styling */
.elementor-widget-htmega-panelslider-addons .panel-slider .thumb img {
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  transition: transform 0.5s ease, filter 0.5s ease, box-shadow 0.5s ease !important;
}

/* Desktop */
@media (min-width: 1025px) {
  .elementor-widget-htmega-panelslider-addons .panel-slider .thumb {
    height: 500px !important;
  }
  .elementor-widget-htmega-panelslider-addons .panel-slider:hover .thumb img {
    transform: scale(1.05) !important;
    filter: brightness(0.95) !important;
    box-shadow: 0 15px 25px rgba(0,0,0,0.2) !important;
  }
  .elementor-widget-htmega-panelslider-addons .panel-slider:hover .content-inner {
    opacity: 0.7 !important;
    transform: translateY(0) !important;
  }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1024px) {
  .elementor-widget-htmega-panelslider-addons .panel-slider .thumb {
    height: 500px !important;
  }
  .elementor-widget-htmega-panelslider-addons .panel-slider .thumb img {
    transform: scale(1.05) !important;
    filter: brightness(0.95) !important;
  }
  .elementor-widget-htmega-panelslider-addons .panel-slider .content-inner {
    opacity: 0.7 !important;
    transform: translateY(0) !important;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .elementor-widget-htmega-panelslider-addons .panel-slider .thumb {
    height: 500px !important;
  }
  .elementor-widget-htmega-panelslider-addons .panel-slider .thumb img {
    transform: scale(1.05) !important;
    filter: brightness(0.95) !important;
  }
  .elementor-widget-htmega-panelslider-addons .panel-slider .content-inner {
    opacity: 0.7 !important;
    transform: translateY(0) !important;
  }
}

/* Content Overlay */
.elementor-widget-htmega-panelslider-addons .panel-slider .content-inner {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}


/* Footer button style */
.footer-button .elementskit-btn {
  --bg: #000;
  --text: #fff;
  background-color: var(--bg) !important;
  color: var(--text) !important;
  transition: all 0.3s ease !important;
}

/* Invert on hover (background, text, border) */
.footer-button .elementskit-btn:hover {
  background-color: var(--text) !important;
  color: var(--bg) !important;
}

/* First button – black background, white text */
.footer-button:first-of-type .elementskit-btn {
  --bg: #000 ;
  --text: #fff;
}

/* Second button – white background, black text */
.footer-button:last-of-type .elementskit-btn {
  --bg: #fff;
  --text: #000;
}
/* Container for the buttons */
.footer-button-container {
  display: flex;
  flex-wrap: wrap;          /* allows buttons to wrap on smaller screens */
  justify-content: center;   /* center horizontally */
  gap: 12px;                 /* space between buttons */
}

/* Footer button style */
.footer-button .elementskit-btn {
  --bg: #000;
  --text: #fff;
  background-color: var(--bg) !important;
  color: var(--text) !important;  
  border-color: #000 !important;
  transition: all 0.3s ease !important;
}

/* Hover effect */
.footer-button .elementskit-btn:hover {
  background-color: var(--text) !important;
  color: var(--bg) !important;
}

/* First button – black background */
.footer-button:first-of-type .elementskit-btn {
  --bg: #000;
  --text: #fff;
}

/* Second button – white background */
.footer-button:last-of-type .elementskit-btn {
  --bg: #fff;
  --text: #000;
}

/* ===============================
   CONTACT FORM 7 – COMPACT + LEFT ALIGNED
   =============================== */

/* Overall form layout */
.wpcf7 form {
  max-width: 500px;
  margin: 0 auto;
  font-family: inherit;
  text-align: left !important;
}

/* ===============================
   INPUT FIELDS
   =============================== */
.wpcf7 input.form-field {
  display: block !important;
  width: 100% !important;
  padding: 6px 8px !important;
  border: 1px solid #ccc !important;
  border-radius: 4px !important;
  background: #f9f9f9 !important;
  color: #333 !important;
  margin: 0 0 10px 0 !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  transition: all 0.2s ease-in-out !important;
  box-sizing: border-box !important;
  text-align: left !important;
}

/* Input placeholder */
.wpcf7 input.form-field::placeholder {
  color: #777 !important;
  opacity: 1 !important;
  font-style: normal !important;
  font-size: 14px !important;
}

/* Focus state for input */
.wpcf7 input.form-field:focus {
  border-color: #666 !important;
  background: #fff !important;
  outline: none !important;
  box-shadow: 0 0 2px rgba(0,0,0,0.15) !important;
}

/* ===============================
   TEXTAREA FIELD
   =============================== */
.wpcf7 textarea.form-field {
  display: block !important;
  width: 100% !important;
  padding: 8px !important; /* slightly larger for balanced feel */
  border: 1px solid #ccc !important;
  border-radius: 4px !important;
  background: #f9f9f9 !important;
  color: #333 !important;
  margin: 0 0 10px 0 !important;
  font-size: 14px !important;
  line-height: 1.5 !important; /* matches visual height of text */
  transition: all 0.2s ease-in-out !important;
  box-sizing: border-box !important;
  text-align: left !important;
  min-height: 100px !important;
  height: 100px !important;
  resize: vertical !important;
  vertical-align: middle !important; /* ensures text and placeholder align */
}

/* Textarea placeholder (aligned perfectly with cursor) */
.wpcf7 textarea.form-field::placeholder {
  color: #777 !important;
  opacity: 1 !important;
  font-style: normal !important;
  font-size: 14px !important;
  line-height: 1.5 !important; /* same as textarea text */
  vertical-align: middle !important;
}

/* Focus state for textarea */
.wpcf7 textarea.form-field:focus {
  border-color: #666 !important;
  background: #fff !important;
  outline: none !important;
  box-shadow: 0 0 2px rgba(0,0,0,0.15) !important;
}

/* ===============================
   SUBMIT BUTTON
   =============================== */
.wpcf7 .form-submit {
  display: inline-block !important;
  width: 25% !important;
  margin: 0 0 10px 0 !important;
  padding: 0 20px !important;
  border: none !important;
  border-radius: 4px !important;
  background: #333 !important;
  color: #fff !important;
  cursor: pointer !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  transition: background 0.2s ease-in-out !important;
}

/* Hover effect */
.wpcf7 .form-submit:hover {
  background: #555 !important;
  color: #fff !important;
}

/* ===============================
   MOBILE OPTIMIZATION
   =============================== */
@media (max-width: 600px) {
  .wpcf7 .form-field,
  .wpcf7 .form-submit {
    width: 100% !important;
    font-size: 14px !important;
  }
}