/*-----------------------------------------------------------------------------------

    Template Name: Hasphotography HTML Template
    Version: 1.0

-----------------------------------------------------------------------------------
    
    CSS INDEX
    ===================
	
    01. Template default CSS
    02. Header style
    03. Hero style
    04. Footer style
    05. About us style
    06. Section title style
    07. Breadcrumb style
    08. Contact us style
    09. Blog style
    10. Gallery style

-----------------------------------------------------------------------------------*/
/*!
 * Bootstrap v5.0.0-beta1 (https://getbootstrap.com/)
 * Copyright 2011-2020 The Bootstrap Authors
 * Copyright 2011-2020 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */
@import url("https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Rufina:wght@400;700&display=swap");
:root {
  --bs-blue: #0d6efd;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #dc3545;
  --bs-orange: #fd7e14;
  --bs-yellow: #ffc107;
  --bs-green: #198754;
  --bs-teal: #20c997;
  --bs-cyan: #0dcaf0;
  --bs-white: #ffffff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --bs-primary: #434343;
  --bs-secondary: #6c757d;
  --bs-success: #198754;
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #343a40;
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
}

*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: unset;
  }
}

body {
  margin: 0;
  font-family: "Arial", sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  color: #000000;
  background-color: #ffffff;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

[tabindex="-1"]:focus:not(:focus-visible) {
  outline: 0 !important;
}

hr {
  margin: 1rem 0;
  color: inherit;
  background-color: currentColor;
  border: 0;
  opacity: 0.25;
}

hr:not([size]) {
  height: 1px;
}

h1{
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-family: 'Arial', sans-serif;
  font-weight: 400;
  line-height: 1.2;
  color: #434343;
}
h6 {
    font-size: 16px;
    color: #98adc2;
    font-family: 'Arial', sans-serif;
}
h1 {
  font-size: calc(1.34375rem + 1.125vw);
}

@media (min-width: 1200px) {
  h1 {
    font-size: 2.1875rem;
  }
}

h6 {
  font-size: 0.875rem;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

ul {
  padding-left: 2rem;
}

ul {
  margin-top: 0;
  margin-bottom: 1rem;
}

a {
  color: #434343;
  text-decoration: underline;
}

a:hover {
  color: #363636;
}

img {
  vertical-align: middle;
}

button {
  border-radius: 0;
}

button:focus {
  outline: dotted 1px;
  outline: -webkit-focus-ring-color auto 5px;
}

button {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

button {
  text-transform: none;
}

[role="button"] {
  cursor: pointer;
}

button {
  -webkit-appearance: button;
}

button:not(:disabled),
[type="button"]:not(:disabled),
[type="reset"]:not(:disabled),
[type="submit"]:not(:disabled) {
  cursor: pointer;
}

::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

::-webkit-datetime-edit-fields-wrapper,
::-webkit-datetime-edit-text,
::-webkit-datetime-edit-minute,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-year-field {
  padding: 0;
}

::-webkit-inner-spin-button {
  height: auto;
}

/* rtl:raw:
[type="tel"],
[type="url"],
[type="email"],
[type="number"] {
  direction: ltr;
}
*/
::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-color-swatch-wrapper {
  padding: 0;
}

::file-selector-button {
  font: inherit;
}

::-webkit-file-upload-button {
  font: inherit;
  -webkit-appearance: button;
}

.container {
  width: 100%;
  padding-right: var(--bs-gutter-x, 15px);
  padding-left: var(--bs-gutter-x, 15px);
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1200px;
  }
}

@media (min-width: 1600px) {
  .container {
    max-width: 1200px;
  }
}

.row {
  --bs-gutter-x: 30px;
  --bs-gutter-y: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  margin-top: calc(var(--bs-gutter-y) * -1);
  margin-right: calc(var(--bs-gutter-x) / -2);
  margin-left: calc(var(--bs-gutter-x) / -2);
}

.row > * {
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) / 2);
  padding-left: calc(var(--bs-gutter-x) / 2);
  margin-top: var(--bs-gutter-y);
}

.col-6 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 50%;
}

.col-12 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 100%;
}

.g-4 {
  --bs-gutter-x: 1.25rem;
}

.g-4 {
  --bs-gutter-y: 1.25rem;
}

@media (min-width: 768px) {
  .col-md-2 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 16.66667%;
  }
  .col-md-3 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 25%;
  }
  .col-md-4 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 33.33333%;
  }
}

.form-control[type="file"]:not(:disabled):not([readonly]) {
  cursor: pointer;
}

.form-control::file-selector-button {
  padding: 0.375rem 0.75rem;
  margin: -0.375rem -0.75rem;
  -webkit-margin-end: 0.75rem;
     -moz-margin-end: 0.75rem;
          margin-inline-end: 0.75rem;
  color: #434343;
  background-color: #e9ecef;
  pointer-events: none;
  border-color: inherit;
  border-style: solid;
  border-width: 0;
  border-inline-end-width: 1px;
  border-radius: 0;
  -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  -o-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .form-control::file-selector-button {
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
  }
}

.form-control:hover:not(:disabled):not([readonly])::file-selector-button {
  background-color: #dde0e3;
}

.form-control:hover:not(:disabled):not([readonly])::-webkit-file-upload-button {
  background-color: #dde0e3;
}

.form-control-sm::file-selector-button {
  padding: 0.25rem 0.5rem;
  margin: -0.25rem -0.5rem;
  -webkit-margin-end: 0.5rem;
     -moz-margin-end: 0.5rem;
          margin-inline-end: 0.5rem;
}

.form-control-lg::file-selector-button {
  padding: 0.5rem 1rem;
  margin: -0.5rem -1rem;
  -webkit-margin-end: 1rem;
     -moz-margin-end: 1rem;
          margin-inline-end: 1rem;
}

.form-control-color:not(:disabled):not([readonly]) {
  cursor: pointer;
}

.form-floating > .form-control:not(:-moz-placeholder-shown) {
  padding-top: 1.625rem;
  padding-bottom: 0.625rem;
}

.form-floating > .form-control:not(:-ms-input-placeholder) {
  padding-top: 1.625rem;
  padding-bottom: 0.625rem;
}

.form-floating > .form-control:not(:-moz-placeholder-shown) ~ label {
  opacity: 0.65;
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}

.form-floating > .form-control:not(:-ms-input-placeholder) ~ label {
  opacity: 0.65;
  -ms-transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
      transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}

/* rtl:begin:ignore */

/* rtl:end:ignore */

/* rtl:options: {
  "autoRename": true,
  "stringMap":[ {
    "name"    : "prev-next",
    "search"  : "prev",
    "replace" : "next"
  } ]
} */

.visually-hidden-focusable:not(:focus) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.d-flex {
  display: -webkit-box !important;
  display: -webkit-flex !important;
  display: -ms-flexbox !important;
  display: flex !important;
}

.flex-column {
  -webkit-box-orient: vertical !important;
  -webkit-box-direction: normal !important;
  -webkit-flex-direction: column !important;
      -ms-flex-direction: column !important;
          flex-direction: column !important;
}

.gap-3 {
  gap: 0.9375rem !important;
}

.justify-content-between {
  -webkit-box-pack: justify !important;
  -webkit-justify-content: space-between !important;
      -ms-flex-pack: justify !important;
          justify-content: space-between !important;
}

.align-items-start {
  -webkit-box-align: start !important;
  -webkit-align-items: flex-start !important;
      -ms-flex-align: start !important;
          align-items: flex-start !important;
}

.py-4 {
  padding-top: 1.25rem !important;
  padding-bottom: 1.25rem !important;
}

.text-center {
  text-align: center !important;
}

/* rtl:begin:remove */

/* rtl:end:remove */

@media (min-width: 768px) {
  .flex-md-row {
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: normal !important;
    -webkit-flex-direction: row !important;
        -ms-flex-direction: row !important;
            flex-direction: row !important;
  }
}

/*----------------------------------------*/
/*  01. Template default CSS
/*----------------------------------------*/
/*-- Google Font --*/
/*-- Common Style --*/
*,
*::after,
*::before {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  position: relative;
  visibility: visible;
  color: "";
}

p {
  font-size: 18px;
  font-weight: 400;
  line-height: 32px;
  color: #434343;
  margin-bottom: 15px;
  font-family: "Arial", sans-serif;
}

ul {
  list-style: outside none none;
  margin: 0;
  padding: 0;
}

a,
button {
  line-height: inherit;
  text-decoration: none;
  cursor: pointer;
}

a,
button,
img,
span {
  -webkit-transition: all .3s ease 0s;
  -o-transition: all .3s ease 0s;
  transition: all .3s ease 0s;
}

*:focus {
  outline: none !important;
}

a:focus {
  outline: none;
  text-decoration: none;
}

a:hover {
  text-decoration: none;
  color: #FA6868;
}

button {
  cursor: pointer;
}

.pb-140 {
  padding-bottom: 0px;
  max-height: 50%;
}

/*----------------------------------------
  02. Header style
----------------------------------------*/

.main-wrapper {
  position: relative;
}

.body-dark-mode-wrap {
  -webkit-transition: all .3s ease 0s;
  -o-transition: all .3s ease 0s;
  transition: all .3s ease 0s;
  height: auto;
}

/*----------------------------------------
  03. Hero style
----------------------------------------*/

.main-wrapper {
  overflow: hidden;
}

/*----------------------------------------
  04. Footer style
----------------------------------------*/

/*----------------------------------------
  05. About us style
----------------------------------------*/

/*----------------------------------------
  06. Section title style
----------------------------------------*/

/*----------------------------------------
  07. Breadcrumb style
----------------------------------------*/

.breadcrumb-padding-4 {
  padding: 324px 0 95px;
}

@media only screen and (min-width: 1366px) and (max-width: 1600px) {
  .breadcrumb-padding-4 {
    padding: 60px 0 35px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1365px) {
  .breadcrumb-padding-4 {
    padding: 50px 0 50px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .breadcrumb-padding-4 {
    padding: 36px 0 36px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .breadcrumb-padding-4 {
    padding: 100px 0 80px;
  }
}

@media only screen and (max-width: 767px) {
  .breadcrumb-padding-4 {
    padding: 140px 0 40px;
  }
}

.breadcrumb-content h1 {
  font-size: 64px;
  margin: 25px 0 15px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .breadcrumb-content h1 {
    font-size: 55px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .breadcrumb-content h1 {
    font-size: 45px;
  }
}

@media only screen and (max-width: 767px) {
  .breadcrumb-content h1 {
    font-size: 35px;
  }
}

.breadcrumb-content p {
  color: #9B9B9B;
  width: 65%;
  margin: 0 auto;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .breadcrumb-content p {
    width: 78%;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .breadcrumb-content p {
    width: 100%;
  }
}

@media only screen and (max-width: 767px) {
  .breadcrumb-content p {
    width: 100%;
    font-size: 16px;
  }
}

/*----------------------------------------
  08. Contact us style
----------------------------------------*/

/*----------------------------------------
  09. Blog style
----------------------------------------*/

/*----------------------------------------
  10. Gallery style
----------------------------------------*/

.slider-active-3.swiper-container {
  margin: 36px -29%;
}

@media only screen and (max-width: 767px) {
  .slider-active-3.swiper-container {
    margin: 0 -45%;
  }
}
.slider-active-3 .main-slider-nav-3 {
    position: absolute;
    top: 15%;
    transform: translateY(-50%);
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(255 255 255 / 59%);
    z-index: 20;
    opacity: 1;
    pointer-events: auto;
}
/* 2) 固定图片容器的高度，居中对齐 */
.slider-active-3 .single-gallery-img {
  height: 291.88px;             /* 统一显示高度，可按需调整 */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;          /* 避免极端尺寸溢出 */
}
/* 3) 图按高度等比缩放，不裁剪 */
.slider-active-3 .single-gallery-img img {
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;       /* 保留完整图像，等比缩放到容器高度 */
  display: flex;
  margin: 0 auto;
}
.single-gallery-img {
  overflow: hidden;
}

.single-gallery-img img {
  width: 100%;
  -webkit-transition: all .5s ease 0s;
  -o-transition: all .5s ease 0s;
  transition: all .5s ease 0s;
}

.single-gallery-img:hover img {
  -webkit-transform: scale(1.1);
      -ms-transform: scale(1.1);
          transform: scale(1.1);
}

.swiper-slide {
  overflow: hidden;
}


/* 图片悬停文字覆盖层 */
.slider-active-3 .single-gallery-img{
  position: relative;
  overflow: hidden;
}
.slider-active-3 .single-gallery-img img{
  display:block; width:100%; height:auto;
}
.slider-active-3 .gallery-overlay{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:16px 18px;
  color:#fff;
  background: linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,.35) 35%, rgba(0,0,0,.05) 70%, rgba(0,0,0,0) 100%);
  opacity:0; transition:opacity .25s ease;
}
.slider-active-3 .gallery-overlay h3{
  margin:0 0 4px; font-size:18px; line-height:1.25;
}
.slider-active-3 .gallery-overlay p{
  margin:0; font-size:13px; opacity:.9;
}
/* 悬停或获得焦点时显示 */
.slider-active-3 .single-gallery-img:hover .gallery-overlay,
.slider-active-3 .single-gallery-img:focus-within .gallery-overlay{
  opacity:1;
}
/* 移动端无 hover：默认显示 */
@media (hover: none){
  .slider-active-3 .gallery-overlay{ opacity:1; }
}

@media only screen and (max-width: 767px) {
  .single-gallery-area.pb-140 {
    padding-bottom: 70px;
  }
}

/* Footer 四列文字顶部对齐 */
.site-footer .row.g-4 { 
  align-items: flex-start;              /* 顶部对齐 */
}
.site-footer .row.g-4 > [class*="col-"]{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.site-footer .row.g-4 h6{
  margin: 0 0 10px;                     /* 去掉标题上边距，统一间距 */
  line-height: 1.3;
}
.site-footer .row.g-4 p,
.site-footer .row.g-4 ul{
  margin-top: 0;                        /* 去掉文字/列表上边距 */
}
.site-footer .row.g-4 ul{
  padding-left: 0;                      /* 保持与你当前 inline 样式一致 */
  list-style: none;
}
.site-footer .row.g-4 ul li{ margin: 0; }

/* 让按钮始终可见并定位在容器两侧 */
.slider-active-3.swiper-container { position: relative; }
.slider-active-3 .main-slider-nav-3 {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.85);
  z-index: 20;
  opacity: 1;
  pointer-events: auto;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.slider-active-3 .home-slider-prev-3 { left: 8px; }
.slider-active-3 .home-slider-next-3 { right: 8px; }
.slider-active-3 .main-slider-nav-3 img { width: 24px; height: 24px; }

/* 只在当前活动的 slide 上显示按钮，避免多层重叠 */
.slider-active-3 .swiper-slide .main-slider-nav-3{ opacity:0; pointer-events:none; }
.slider-active-3 .swiper-slide-active .main-slider-nav-3{ opacity:1; pointer-events:auto; }

.swiper-wrapper {
  height: auto;
}

/* Masonry 容器与项目 */
.masonry{ column-count: 4; column-gap:16px; }
.masonry-item{ break-inside: avoid; display:inline-block; width:100%; margin:0 0 16px; }

/* 卡片与悬停文字（复用你现有 overlay 思路） */
.masonry .single-gallery-img{ position:relative; overflow:hidden; border-radius:8px; }
.masonry .single-gallery-img img{ width:100%; height:auto; display:block; }
.masonry .gallery-overlay{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end;
  padding:14px 16px; color:#fff;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0));
  opacity:0; transition:opacity .25s ease;
}
.masonry .gallery-overlay h3{ margin:0 0 4px; font-size:16px; line-height:1.3; }
.masonry .gallery-overlay p{ margin:0; font-size:12px; opacity:.9; }
.masonry .single-gallery-img:hover .gallery-overlay,
.masonry .single-gallery-img:focus-within .gallery-overlay{ opacity:1; }

/* 响应式列数 */
@media (max-width:1199.98px){ .masonry{ column-count:3; } }
@media (max-width:991.98px) { .masonry{ column-count:2; } }
@media (max-width:575.98px) { .masonry{ column-count:1; } }