@charset "utf-8";

@import url('https://fonts.googleapis.com/css?family=Muli:200&display=swap');

/*======================================
  RESET & BASICS
======================================*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:none;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;text-decoration:none;margin:0;padding:0;}
table{border-collapse:separate;border-spacing:0}
blockquote:before,blockquote:after,q:before,q:after{content:""}
*{margin:0;padding:0;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block; }								  
ol, ul { list-style: none;}
blockquote, q { quotes: none;}
:focus { outline: 0;}
table { border-collapse: collapse; border-spacing: 0;}
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
a{text-decoration:none; position:relative; color:#000;}
audio,video,canvas {max-width: 100%;}

/*-------------General Style---------------------------------------*/
html {
	overflow-x: hidden !important;
	overflow-y: hidden !important; /* Switched to hidden to lock native scroll and isolate viewport */
	height: 100%;
    height: 100dvh; /* Dynamic viewport height adjusts for iOS URL bar natively */
}
body {
	margin: 0;
	padding: 0;
	font-size: 13px;
	font-weight:300;
	height: 100%;
    height: 100dvh;
	text-align: center;
	background:#fff;
	color: #000;
	font-family: 'Muli', sans-serif;
}
@-o-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@viewport { width: device-width; }

/*--------------Typography--------------------------------------*/
blockquote { float: left; padding: 10px 20px; margin: 0 0 20px; font-size: 17.5px; border-left: 15px solid #eee; position: relative; }
blockquote:before { font-family: Font Awesome\ 5 Pro; content: "\f10e"; position: absolute; color: #ccc; bottom: 3px; font-size: 43px; right: 6px; opacity: 0.4 }
blockquote p { font-family: Georgia, "Times New Roman", Times, serif; font-style: italic; color: #666; }
.bold-title { margin: 15px 0; font-size: 24px; text-align: left; font-weight: 300; }

/*--------------General--------------------------------------*/
#main { height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: 2; opacity:1; overflow: hidden; }
.fl-wrap { float: left; width: 100%; position: relative; }
.content { float: left; width: 100%; position: relative; z-index: 5; }
.container { max-width: 1224px; width: 92%; margin: 0 auto; position: relative; z-index: 5; }
.full-height { height: 100%; }

/* Page load Slide-In right animation */
@keyframes slideInFromRight {
    0% { transform: translateX(100vw); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}

/* * CRITICAL WRAPPER UPDATE
 * This isolates the entire physical boundary between the notches. 
 * Any percentage heights inside this wrapper will naturally stop before hitting the URL/Search bar.
 */
#wrapper { 
    position: absolute; 
    top: env(safe-area-inset-top, 0px);
    left: env(safe-area-inset-left, 0px); 
    right: env(safe-area-inset-right, 0px); 
    bottom: env(safe-area-inset-bottom, 0px); 
    z-index: 5; 
    animation: slideInFromRight 1.5s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}
#wrapper.fullsceen-wrap { padding-bottom: 80px; }
.content-holder { position:absolute; top:0; left:0; width:100%; height:100%; }
.respimg { width: 100%; height: auto; }
.hidden-item { overflow:hidden; }
.bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background-size: cover; background-attachment: scroll; background-position: center; background-repeat: repeat; background-origin: content-box; }
.overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(45,45,50,0.21); z-index: 3; }
.op5 { background: rgba(45,45,50,0.5); }
.dark-bg { background:#2A2A2E; }

/* ------Share & Sidebar----------------------------------------------------------- */
.share-wrapper { position:fixed; right:-300px; z-index:8; top:0px; background:#292929; width:300px; overflow:hidden; -webkit-transform: translate3d(0,0,0); }
.share-title { margin-bottom:20px; text-align:left; font-size:24px; font-weight:700; color:#999; font-family: Georgia, "Times New Roman", Times, serif; }
.share-container { padding:70px 50px 50px 70px; }
.share-container a { float:left; width:100%; text-align:left; margin-bottom:20px; color: #fff; font-weight: 600; font-size: 10px; position: relative; text-transform:uppercase; letter-spacing:2px; opacity:0; }
.share-container a:hover { text-decoration:underline; }
.contact-info-wrap { position: absolute; left:120px; background:#fff; z-index:50; top:0px; width:370px; padding:0 40px 80px 40px; transition: all .4s ease-in-out; opacity:0; visibility:hidden; margin-left:-20px; }
.contact-info-wrap.vis-coninfwrap { opacity:1; margin-left:0; visibility:visible; }
.close_ciw { position: absolute; top: 0; right: 0; width: 150px; height: 46px; line-height:46px; background:#f2f2f2; cursor: pointer; overflow: hidden; font-size: 38px; z-index:20; }
.close_ciw:hover { background: #292929; color: #fff; }

.overauto { overflow:auto; }
.sb-overlay{ position:fixed; top:0; bottom:0; left:0; width:100%; display:none; z-index:8; background:#292929; opacity:0.6; }

/* ------Sliders & Swiper------------------------------------------------------------ */ 
.fsc-holder { 
    width: 100%; 
    height: 90%; 
    position: absolute; 
    top: 0; 
    left: 0; 
    padding: 0; 
    z-index: 1; 
    overflow: hidden; 
}
.swiper-container { width:100%; height:100%; margin:0 auto; }  
.slider-wrap .swiper-slide , .fs-gallery-wrap .swiper-slide , .portfolio-wrap .swiper-slide{ position:relative; width:auto; }
.slider-wrap  , .portfolio-wrap  , .hero-slider-img .swiper-slide { float:left; width:100%; height:100%; position:relative; }
.slider-wrap .swiper-slide img , .fw-carousel  .swiper-slide img { width: auto!important; height:100% !important; position:relative; z-index:1; }
.slider-wrap .swiper-slide   , .fw-carousel  .swiper-slide { width: auto!important; height:100% !important; display:block !important; }

.thumb-info { position:absolute; bottom:0; left:0; right:0; padding:20px 30px; z-index:12; }
.dark-gradient  , .thumb-info{ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.75))); background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.75) 100%); background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.75) 100%); background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.75) 100%); background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.75) 100%); }
.thumb-info h3{ text-align:left; color:#fff; font-size:18px; font-weight:600; }
.thumb-info h3 a{ color:#fff; -webkit-transition: all 200ms linear; transition: all 200ms linear; }
.thumb-info h3 a:hover  { color:rgba(255,255,255,0.61); }
.thumb-info p { color:#fff; opacity:0.6; font-style:italic; }

/* Custom Bottom Carousel Controls */
.bottom-toolbar {
    position: absolute; /* Replaced Fixed logic */
    bottom: 0;
    left: 0;
    width: 100%;
    height: 10%;
    background: linear-gradient(to bottom, #d5d1ce, #ccc8c5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}
.custom-carousel-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: center;
    color: #404040;
    border-radius: 9999px;
    background-color: rgba(229, 229, 229, 0.5);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(229, 229, 229, 0.8);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    z-index: 100;
    padding: 0 0.5rem;
}

.custom-carousel-controls button {
    padding: 0.5rem;
    cursor: pointer;
    background: none;
    border: none;
    outline: none;
    color: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
}
.custom-swiper-pagination {
    width: 180px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}
.custom-swiper-pagination .swiper-pagination-bullet {
    border-radius: 50%;
    cursor: pointer;
    height: 8px;
    width: 8px;
    min-width: 8px;
    flex-shrink: 0;
    background-color: rgba(64, 64, 64, 0.3);
    transition: width 0.3s, background-color 0.3s;
    display: block;
    margin: 0;
    opacity: 1;
}
.custom-swiper-pagination .swiper-pagination-bullet-active {
    width: 28px;
    border-radius: 9999px;
    background-color: rgba(64, 64, 64, 1);
}

/* Action Buttons Container (Zoom and Info) */
.action-buttons-container {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 1rem;
    z-index: 20;
}
.box-media-zoom, .info-media {
    width: 45px; 
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #404040;
    background-color: rgba(229, 229, 229, 0.5);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(229, 229, 229, 0.8);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    border-radius: 9999px;
    font-size: 22px;
	margin: 0 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}
.box-media-zoom:hover, .info-media:hover {
    background-color: rgba(229, 229, 229, 0.8);
}

.hov_zoom { overflow:hidden; }
.media-container { position:absolute; left:80px; right:0; bottom:0; top:0; }
.media-container.media-container_fs { left:0; }

/* Unified Info Detail CSS */
.info-details {
  display: none;
  opacity: 1;
  position: relative;
  top: 0;
  width: 100%;
  max-width: 350px;
}
.info-details.active {
  display: block;
  opacity: 1;
}

/* Info Display Panel */
.pr-det { width:450px; position:relative; overflow:auto; }
.pr-det-container h2 { text-align:left; font-size:24px; text-transform: uppercase; font-weight: 700; float:left; width:100%; padding-bottom:20px; }
.initscroll { position:absolute; top:0; bottom:0; left:0; width:100%; overflow:hidden; padding: calc(100px + env(safe-area-inset-top, 0px)) 50px calc(50px + env(safe-area-inset-bottom, 0px)); }
.caption-wrap { margin-top:30px; }
.caption-wrap ul li { width:50%; float:left; padding:20px 40px 10px 0; }
.caption-wrap ul li span , .caption-wrap ul li a  { width:100%; float:left; text-align:left; }
.caption-wrap ul li a { width:auto; padding-right:6px; }
.caption-wrap ul li a   { text-transform: uppercase; font-weight: 700; font-size:12px; color:#999; text-decoration:underline; }
.caption-wrap ul li a:hover { color:#666; text-decoration:none; }
.caption-wrap ul li span   { color: #000; text-align: left; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: 2px; }

.fix-pr-det{ position:fixed; top: env(safe-area-inset-top, 0px); left:0; bottom: env(safe-area-inset-bottom, 0px); z-index:110; background:#fff; overflow: hidden; width:450px; padding: 100px 50px 30px; -webkit-transform: translate3d(0,0,0); }
.fix-pr-det.hid-det { left:-450px; }
.content.vis-column-det{ padding-left:0px; }
.det-overlay { position:fixed; top:0; left:0; bottom:0; z-index:109; right:0; background:#292929; opacity:0.6; display:none; -webkit-transform: translate3d(0,0,0); }

.closedet_style { position:absolute; z-index:111; right:40px; top: 30px; font-size:30px; cursor:pointer; color: rgba(64, 64, 64, 0.3); }
.closedet_style:hover { color: rgba(64, 64, 64, 0.7); }
.det-anim{ transform: translateY(50px); opacity:0; }

.info-title { color: #232323; font-family: 'Lato', sans-serif; text-transform: uppercase; font-weight: 400 !important;}
.info-text { color: rgba(64, 64, 64, 0.5); font-family: 'Lato', sans-serif; font-size: 14px; line-height: 24px; padding-bottom: 10px; font-weight: 400; text-align:left;  }

/*------btn------------------------------------------------*/
.btn {
    padding: 15px 35px;
    cursor: pointer;
    background: #232323;
    -webkit-appearance: none;
    position: relative;
    color: #fff;
	font-family: 'Lato', sans-serif;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 400;
    display: inline-block;

    -webkit-transition: padding-right .3s ease, color .3s ease;
    transition: padding-right .3s ease, color .3s ease;
}

.btn:before {
    content: '';
    position: absolute;
    right: 15px;
    top: 50%;
    width: 0;
    height: 1px;
    background: #fff;

    -webkit-transition: width .3s ease;
    transition: width .3s ease;
}

.btn:hover {
    padding-right: 55px;
    color: rgba(255,255,255,0.71);
}

.btn:hover:before {
    width: 10px;
}

.btn2 {
    padding: 15px 35px;
    background: #232323;
    -webkit-appearance: none;
    position: relative;
    color: rgba(255,255,255,0.71);
	font-family: 'Lato', sans-serif;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 400;
    display: inline-block;
    cursor: default;
    user-select: none;
}

.fl-btn {
    float: left;
    margin-top: 20px;
}

/* Categories & Modals */
.categories-list_btn { position:relative; float:right; top:8px; padding-bottom:5px; }
.categories-wrapper { position:fixed; top:0; bottom:0; left:0; right:0; z-index:9; overflow:hidden; display:none; }
.categories_slider_item_bg { position:absolute; left:0; right:0; top:0; bottom:0; background:#fff; z-index:20; }
.categories-wrapper_bg { position:absolute; left:0; right:0; bottom:0; top:100%; background:#fff; z-index:1; }
.categories_slider-wrap { position:absolute; left:50px; right:50px; top:15%; height:60%; z-index:2; }
.categories_slider { opacity:0; }
.categories_slider_item , .categories_slider_img { position:absolute; left:0; right:0; bottom:0; top:0; overflow:hidden; }
.cel_opt{ transform: translateY(50px); opacity: 0; }
.hs-categories { position:absolute; left:50%; width:250px; height:6px; margin-left:-125px; bottom:-50px; background:#eee; overflow:hidden; }
.hs-categories_init { position: absolute; left: 0; right: 0; height: 6px; top: 0; }
.hs-categories_init .swiper-scrollbar-drag { background: #292929; border-radius: 0; }
.categories_close { position:absolute; right:50px; top:40px; z-index:20; font-size:14px; width:120px; height:50px; line-height:50px; background:#f2f2f2; }
.categories_close i { position:relative; z-index:2; }
.categories_close:before { content:''; position:absolute; left:0; width:100%; bottom:0; height:0; background:#292929; transition: all 100ms linear; }
.categories_close:hover { color:#fff; }
.categories_close:hover:before { height:100%; }

/* ------Sidebar------------------------------------------------*/
.hiiden-sidebar-wrap { position:fixed; overflow: hidden; width:400px; z-index:19; right:-450px; top:0px; bottom:0; background:#fff; padding:50px 40px; -webkit-transform: translate3d(0,0,0); }
.sb-widget-wrap { margin-bottom:50px; padding-bottom:30px; border-bottom:1px solid #eee; }
.sb-widget-wrap h3 { color: #666; text-align: left; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; margin: 0 0 20px; }
.sb-widget p { color:#888; text-align: left; }


/* ------ Responsive Rules ------------------------------------------------------------ */ 
@media only screen and (max-width: 1064px) {
    .vismobmenu { opacity:1; right:0; visibility:visible; }
    .bottom-filter-wrap { padding: 0 24px 0 24px; }
}

@media only screen and (max-width: 768px) {
    .bottom-toolbar { height: 15%; }
    .fsc-holder { height: 85%; }
    
    .fix-pr-det { width: 100%; left: -100%; }
    .fix-pr-det.hid-det { left: -100%; } 
    .fix-pr-det.isfsdet , .det-overlay.isfsdet{ top: 0; bottom: 0; }
	.box-media-zoom, .info-media {width: 42px; height: 42px; font-size: 18px;}
}

@media only screen and (max-width: 500px) {
    .bottom-toolbar { height: 22.5%; }
    .fsc-holder { height: 78%; }
	.box-media-zoom, .info-media {width: 42px; height: 42px; font-size: 18px;}
	.lg-actions .lg-next {right: 12px;}
	.lg-actions .lg-prev {left: 12px;}
	.lg-toolbar {padding-right: 12px;}
	.custom-carousel-controls {gap: 0;}
}

@media only screen and (max-width: 940px) and (orientation: landscape) {
    .bottom-toolbar { height: 20%; }
    .fsc-holder { height: 80%; }
	.action-buttons-container {bottom: 1rem;}
	.box-media-zoom, .info-media {width: 42px; height: 42px; font-size: 18px;}
}