@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@100;200;300;400;500;600;700;800;900&display=swap');

:root {
--color1: #22b4fb;
--bd-color1: #0099cc;
--fontfamily1: Noto Sans Thai, "Tahoma";
--fontfamily2: 'Roboto', sans-serif;
}


::-moz-selection {background-color: var(--color1); color: #000;}
::selection {background-color: var(--color1); color: #000;}

body{ margin:0; padding:0;line-height:20px; font-size:14px; color:#5c5c5c; font-family: var(--fontfamily1);  -ms-word-wrap:break-word; word-wrap:break-word; }
*{ margin:0; padding:0; outline:none;}
img{ border:none; margin:0; padding:0; height:auto}
.wp-caption, .wp-caption-text, .sticky, .gallery-caption, .aligncenter{ margin:0; padding:0;}
p{ margin:0; padding:0;}
a{ text-decoration:none; color:var(--color1);}
a:hover{ color:#333;}
ol,ul{ margin:0; padding:0;}
ul li ul, ul li ul li ul, ol li ol, ol li ol li ol{ margin-left:10px;}
h1,h2,h3,h4,h5,h6{ color:#515151; font-family: var(--fontfamily1); margin:0 0 20px; padding:0; line-height:1.1; font-weight:500; }
h1{ font-size:36px;}
h2{ font-size:30px;}
h3{ font-size:24px;}
h4{ font-size:20px;}
h5{ font-size:18px;}
h6{ font-size:14px;}
.clear{ clear:both;}
.textwidget select{ width:100%;}
table{ width:100%}
iframe{max-width:100%;}
.alignnone{ width:100% !important;}
img.alignleft, .alignleft{ float:left; margin:0 15px 0 0; padding:5px; border:1px solid #cccccc;}
img.alignright, .alignright{ float:right; margin:0 0 0 15px; padding:5px; border:1px solid #cccccc;}
blockquote{ background:url(images/icon_quote.png) no-repeat 20px 22px; padding:15px 15px 15px 60px !important; font-style:italic; color:#888; font-size:14px; line-height:1.5;}
.left{ float:left;}
.right{ float:right;}
.space50{ clear:both; height:50px;}
.space100{ clear:both; height:100px;}
.pagination{display:table; clear:both;}
.pagination ul{list-style:none; margin:20px 0;}
.pagination ul li{display:inline; float:left; margin-right:5px;}
.pagination ul li span, .pagination ul li a{background:#646262; color:#fff; padding:5px 10px; display:inline-block;}
.pagination ul li .current, .pagination ul li a:hover{background:#34c6f6;}

#comment-nav-above .nav-previous, #comment-nav-below .nav-previous{ float:none !important; margin:10px 0;}
ol.comment-list li{ list-style:none; margin-bottom:5px;}

.logo{ width:20%; float:left; color:#333; }
.logo h1{font-weight:400; margin:0; line-height:36px; color:var(--color1);}
.logo span{ color:#333;}
.container{ width:1100px; margin:0 auto; position:relative;}

.header_right{ float:right; width:80%;}
/* = header top sign in  css
-------------------------------------------------------------- */
.header{width:100%; background-color:#FFF!important; padding:18px 0; box-shadow:0 -1px 3px rgba(0, 0, 0, 0.1) inset }
.header-top{ background-color:#f7f7f7; color:#A5A5A5; border-bottom:1px solid #eaeaea; line-height:36px; font-size:14px; font-family: 'Roboto', sans-serif; }
.header-top .left span{ float:left; line-height:40px;  border-right:1px solid #E4E8ED; padding-right:8px;}
.header-top .social-icons a{ border-right:1px solid #E4E8ED; margin-right:0;}
.header-top .social-icons a.fa-line svg:hover {fill: #000;}

.header-top .fa{ margin-right:5px;}
.header-top .right{ text-align:right; line-height:40px;}
.header-top .right a {color: #A5A5A5;}
.header-top .right a:hover {color: #000;}

.right span.phno{ padding-right:10px; margin-right:5px;}

.headerinfo { font:400 14px/24px 'Roboto'; color:#666666; padding:10px 20px 10px 0; }
.headerinfo .fa{  font-size:14px; margin:0 10px; }


/*header menu css*/
.toggle{display: block;}
.toggle a{width:100%; color:#ffffff; background:url(images/mobile_nav_right.png) no-repeat right center var(--color1); padding:10px 10px; margin-top:5px; font-size:16px; text-align:left;}
.toggle a:hover{color:#ffffff !important;}
.sitenav{ padding:0; position:relative; z-index:9999; float:right; }
.sitenav ul {margin:0; padding:0; font-family: var(--fontfamily1); font-weight:500;}
.sitenav ul li{display:inline-block; text-transform:uppercase; position:relative;}
.sitenav ul li:last-child{border-right:none;}
.sitenav ul li a{padding:20px 6px; display:block; color:#515151;}
.sitenav ul li ul li{display:block; position:relative; float:none; top:-1px; border-bottom:1px #e7e6e6 solid;}
.sitenav ul li ul li a{display:block; padding-top:10px; padding-bottom:10px; position:relative; top:1px; text-align:left;}

.sitenav ul li ul{display:none; z-index:9999999; position:relative;}
.sitenav ul li:hover > ul{display:block; width:200px; position:absolute; left:0; text-align:left; background-color:#fff; }
.sitenav ul li:hover ul li ul{display:none; position:relative;}
.sitenav ul li:hover ul li:hover > ul{display:block; position:absolute; left:200px; top:1px;}


section#home_slider{ padding:0; }
h2.section-title {color:#454545; font:300 36px/40px 'Roboto',san-serif; text-align: center; }
.last_column{clear:right; margin-right:0 !important; }

/* = Get An Appointment css
-------------------------------------------------------------- */
#pagearea{
  background-color: rgba(34, 180, 251, .85);
  background-image: url(images/bg-pagearea.jpg);
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover;
  padding:50px 0; color:#fff;}
.appointmentbx{ text-align:center;}
.appointmentbx h2{ font-size:45px; color:#fff; margin-bottom:20px;}
.appointmentbx p{ font-size:16px; font-family: var(--fontfamily2); margin-bottom:20px; line-height: 1.65;}
.appointmentbtn{font:normal 14px/22px var(--fontfamily1); border:1px solid #fff; padding:10px 20px; text-transform:uppercase; color:#fff; display:inline-block;}
.appointmentbtn:hover{ border-color:#515151; color:#515151; }

.ReadMore{ color:#78797C ; display: inline-block; padding:6px 15px; box-shadow:0 0 3px rgba(0, 0, 0, 0.2) inset}
.ReadMore:hover{  box-shadow:0 0 3px var(--color1) inset; color:var(--color1);}

/* = Our Services css
-------------------------------------------------------------- */
#ourservices{ padding:50px 0;}
.leftwrap{ width:30%; float:left;}
.leftwrap h2{ font-weight:300; font-family: 'Roboto', sans-serif; font-size:30px; margin:0 0 15px; line-height:35px;}
.leftwrap h2 span{ color:var(--color1); font-weight:900;}
.leftwrap p{ margin-bottom:25px;}

.rightwrap{ width:70%; float:right;}
.rightwrap .cols2{ width:45%; float:left; margin:0 0 30px 30px; }
.rightwrap .cols2 .servicesthumb{ width:20%; float:left;}
.rightwrap .cols2 .srvcontent{ width:75%; float:right}
.rightwrap .cols2 h3{ font-size:18px; font-weight:600; margin-bottom:10px;}
.rightwrap .cols2 h3 a{ color:#515151;}
.rightwrap .cols2 a{ display:block;}
.lastcols{ margin-right:0 !important;}

/* = social icons css
-------------------------------------------------------------- */
.social-icons a{ border-right:1px solid #E4E8ED; color:#777; width:45px; height:45px; line-height:45px; text-align:center;  vertical-align:middle; display:inline-block; transition:0.6s; -moz-transition:0.6s; -webkit-transition:0.6s; -o-transition:0.6s;  margin:0; padding:0; }
.social-icons br{ display:none;}
.social-icons a:hover{ color:#333;}

.footer-icons a{ color:#595959; width:30px; height:30px; line-height:30px; border:1px solid #595959; text-align:center;  vertical-align:middle; display:inline-block; transition:0.6s; -moz-transition:0.6s; -webkit-transition:0.6s; -o-transition:0.6s;  margin:0 2px; padding:0; border-radius:50%; }
.footer-icons br{ display:none;}
.footer-icons a:hover{ color:var(--color1); border-color:var(--color1);}

/* = Page lay out css
-------------------------------------------------------------- */
.site-main{ width:740px; margin:0; padding:0; float:left;}
#sitefull{ width:100%; float:none;}
#sitefull p{ margin-bottom:15px;}
#page_content{ padding:25px 0;}
#page_content p{ margin-bottom:20px; line-height:20px;}

.blogposts{ margin-bottom:30px; padding:20px; box-shadow:0 0 3px rgba(0, 0, 0, 0.2) inset }
.blogposts h4{ margin-bottom:0px;}
.blogposts h4 a{ color:#484f5e;}
.blogposts h4 a:hover{ color:var(--color1);}
.blogposts p{ margin-bottom:10px;}
.blog-meta{ font-style:italic; margin-bottom:8px;}
.post-date, .post-comment, .post-categories{ display:inline; color:#333;} 
.single_title{ margin-bottom:5px;}
.BlogPosts{ width:31.2%; float:left; margin:0 3% 0 0;}
.BlogPosts img{ width:100%;}
.BlogPosts h2{ margin:10px 0; font-size:22px; }
.post-thumb{ width:100%; float:left; margin:0 0 2em;}
.post-thumb img{ width:100%; }

/* = sidebar
-------------------------------------------------------------- */
#sidebar{ width:330px; float:right;}
aside.widget{margin-bottom:30px; padding:20px; box-shadow:0 0 3px rgba(0, 0, 0, 0.2) inset}
aside.widget ul{ list-style:disc; }
h3.widget-title{ padding:0 15px 15px; margin:0 -18px; color:#515151; border-bottom:1px solid #ddd; }
#sidebar ul li{ list-style:inside none disc; border-bottom:1px solid #f0efef; padding:10px 0;}
#sidebar ul li a{ padding:0; color:#3b3b3b;  display:inline-block; }
#sidebar ul li a:hover{ color:#34c6f6;}
#sidebar ul li:last-child{ border:none;}

#sidebar .search-form{ margin-bottom:20px;}
#sidebar .search-form input.search-field{ background-color:#f0efef; width:80%; padding: 12px 15px 12px 15px; box-sizing:border-box; border:0;}
#sidebar .search-form input.search-submit{ background:url(images/search-icon.png) no-repeat center center #5095ce; padding: 12px 0 12px 0; font-size:0; width:20%; height:41px; float:right;  border:0; cursor:pointer;}



/* = Footer css
-------------------------------------------------------------- */
#footer-wrapper{ color:#595959;}
.footer{ background-color:#242323; position:relative; color:#595959;}
.footerleft { float:left;}
.footerright { float:right;}


.cols-4{width:24%; float:left; margin:0 3% 2% 0; padding:30px 0 10px; }
.widget-column-2 { width:19%;}
.widget-column-4 { margin-right:0px !important;}
.cols-4 h5{ font-weight:400; font-size:18px; color:#fff; margin-bottom:25px; border-bottom:1px solid #303030; padding-bottom:15px; }
.cols-4 ul{ margin:0; padding:0; list-style:none;}
.cols-4 ul li {}
.cols-4 ul li a { background:url(images/footer-arrow.png) no-repeat left 15px; color:#595959; font:normal 12px/24px Arial, Helvetica, sans-serif; padding:8px 0 8px 20px; display:block;  border-bottom:#303030 1px solid; }
.cols-4 ul li a:hover, .cols-4 ul li.current_page_item a { color:var(--color1); }

.cols-4 a.readmore span{ color:#fff;}
.cols-4 p{ margin-bottom:0;}
.cols-4 h5{color:#aeaeae;}
.widget-column-2 a{font:400 20px/24px 'Roboto',san-serif;}

.copyright-wrapper {  background-color:#1A191A;  color:#fff; position:relative; padding:15px 0;}
.copyright-wrapper a{ color:#fff;}
.copyright-txt { float:left;}
.copyright-txt span{color:var(--color1);}
.design-by { float:right;}

/* Buttons */
.button{ background-color:#ff6565; border-bottom:4px solid #e44545; color:#fff; padding:8px 20px; display:inline-block; border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px; -o-border-radius:2px; -ms-border-radius:2px; }
.button:hover{background-color:#34c6f6; border-color:#1898c2; color:#fff;}

/* woocommerce CSS
================================================*/
a.added_to_cart{background:#e1472f; padding:5px; display:inline-block; color:#fff; line-height:1;}
a.added_to_cart:hover{background:#000000;}
a.button.added:before{content:'' !important;}
#bbpress-forums ul li{padding:0;}
#subscription-toggle a.subscription-toggle{padding:5px 10px; display:inline-block; color:#e1472f; margin-top:4px;}
textarea.wp-editor-area{border:1px #ccc solid;}
.woocommerce input[type=text], .woocommerce textarea{border:1px #ccc solid; padding:4px;}
form.woocommerce-ordering select{ padding:5px; color:#777777;}
.woocommerce table.shop_table th, .woocommerce-page table.shop_table th{ font-family:'Roboto',san-serif; color:#ff8a00;}
.woocommerce ul.products li.product .price, .woocommerce-page ul.products li.product .price{ color:inherit !important;}
h1.product_title, p.price{ margin-bottom:10px;}
.woocommerce table.shop_table th, .woocommerce-page table.shop_table th{ font-family:'Roboto',san-serif; color:#ff6d84;}
.woocommerce ul.products li, #payment ul.payment_methods li{ list-style:none !important;}
.woocommerce ul.products li.product .price, .woocommerce-page ul.products li.product .price{ color:inherit !important;}
.woocommerce table.shop_table th, .woocommerce table.shop_table td{ border-bottom:0px !important}


/* ============= Contact Page =========== */
.wpcf7{ margin:30px 0 0; padding:0;}
.wpcf7 input[type="text"], .wpcf7 input[type="tel"], .wpcf7 input[type="email"]{ width:100%; max-width: 710px!important; border:1px solid #cccccc; box-shadow:inset 1px 1px 2px #ccc; height:35px; padding:0 15px; color:#797979; margin-bottom:0;}
.wpcf7 textarea{width:100%; max-width: 710px!important; border:1px solid #cccccc; box-shadow:inset 1px 1px 2px #ccc; height:150px; color:#797979; margin-bottom:25px; font:12px arial; padding:15px;}
.wpcf7 input[type="submit"]{background-color:var(--color1); width:auto; border:none; cursor:pointer; font:18px 'Roboto',san-serif; color:#ffffff; padding:10px 40px; border-radius:3px;}	

/* ============= Comment Form ============ */
h1.screen-reader-text{font:22px 'Roboto',san-serif;}
.site-nav-previous, .nav-previous{ float:left;}
.site-nav-next, .nav-next{ float:right;}
h3#reply-title{font:300 18px 'Roboto',san-serif;}
#comments{ margin:30px 0 0; padding:0;}
nav#nav-below{ margin-top:15px;}
nav.pagination .nav-links a, nav.pagination .nav-links span{ background-color:#f0efef; padding:8px 10px;}
.textwidget select{ width:100%;}
table{ width:100%}

/* Accessibility */
/* Text meant only for screen readers. */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important; 
  /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}

.screen-reader-text:focus {
  background-color: #f1f1f1;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  clip-path: none;
  color: #21759b;
  display: block;
  font-size: 14px;
  font-size: 0.875rem;
  font-weight: bold;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
  /* Above WP toolbar. */
}

/* Do not show the outline on the skip link target. */
#page_content[tabindex="-1"]:focus {
  outline: 0;
}



/* AOTE EDIT 18012024 =========================================================== */
/*body {background-image: url(images/bg-main.jpg); background-size: cover; background-repeat: no-repeat; background-attachment: fixed;}*/
.main-logo {width: auto; height: 60px;}

article .postmeta .post-categories li {list-style: none; display: inline;}
article .postmeta {padding: 5px 0 1em;}

#page_content [class*="category-"] .post-thumb {width: 50%; margin: 0 15px 0 0;}
#page_content .single-post .post-thumb {width: 100%; margin-bottom: 1em;}
#page_content .entry-content p,
#page_content .entry-content ol,
#page_content .single-post .entry-content p,
.entry-summary {font-family:'Roboto', sans-serif; line-height: 1.65;}

.entry-vdo {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
    height: auto;
    margin-bottom: 2em;

    border-bottom: 2px solid transparent;
    border-image: linear-gradient(0.25turn, rgba(255,249,34), rgba(255,0,128), rgba(56,2,155,0));
    border-image-slice: 1;
}
.entry-vdo embed,
.entry-vdo iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.post-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}
.post-container iframe {
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}

.home #pagearea p {width: 70%; margin: 0 auto 2em;}
.home .home-video-block {display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 30px;}
.home .home-video-block .entry-vdo {box-shadow: 0 1px 10px 0px #a7a7a7!important;}
.home #pagearea h3 {color: #FFF;}

.header {transition: padding .5s;}
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
}
.header.sticky {padding: 3px 0;}

.main-logo {transition: height .5s;}
.header.sticky .main-logo {height: 56px;}

section {padding: 50px 0;}
section img, img {
    max-width: 100%;
    height: auto;
}
section#intro {padding: 0;}

h2.section_title {
    font-family: var(--fontfamily1);
    font-size: 34px;
    color: #515151;
}
h2.section_title {
    font-weight: 300;
    text-align: center;
    margin-bottom: 40px;
}
h2.section_title span {
    font-weight: 900;
    color: #E14165;
}
.article-list {box-shadow: 0 1px 10px 0px #a7a7a7!important;}

.article-list .thumnailbx {
    /*height: 242px;*/
    overflow: hidden;
}
.article-list img {
    vertical-align: middle;
    width: 100%;
    height: auto;
}
.article-content {
    background: #fff;
    padding: 14px;
    text-align: center;
}

.article-content span {
    display: block;
    padding-top: 3px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    color: #E14165;
    border-color: #EAEAEA;
    border-bottom: 1px solid #EAEAEA;
    font-style: italic;
    font-weight: 400;
    font-size: 13px;
}
.article-content h4 {
    font: 600 16px/18px var(--fontfamily1);
    margin: 0;
    min-height: 36px;
}

.article-content p {font-size: 13px; font-weight: 400; font-family: var(--fontfamily2); color: #777; min-height: 100px;}

.lastcols {
    margin-right: 0 !important;
}



.zoomin {
    position: relative;
    margin: auto;
    overflow: hidden;
    width: 100%;
    height: 100%;
}
.zoomin img {
    max-width: 100%;
    transition: all 0.5s;
    display: block;
    width: 100%;
    height: auto;
    transform: scale(1);
}

.zoomin:hover img {
    transform: scale(1.05);
}






.home .article-block {display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 30px;}
.home .article-block .post-thumb {margin:0;}

#article .appointmentbtn {color: #777; border-color: #777; margin-top: 2em;}
#article .appointmentbtn:hover {color: #000; border-color: #000;}
#article .article-content{border-bottom: 2px solid transparent; border-image: linear-gradient(0.25turn, rgba(255,249,34), rgba(255,0,128), rgba(56,2,155,0)); border-image-slice: 1;}

#bwg_container1_0 #bwg_container2_0 .bwg-container-0.bwg-album-thumbnails .bwg-item a {
    margin-left: 10px!important;
    margin-right: 10px!important;
    margin-top: 10px!important;
    margin-bottom: 10px!important;
    background-color: #FFF!important;
    box-shadow: 0 1px 10px 0px #a7a7a7!important;
}
.bwg-ecommerce1, .bwg-title1 {min-height: 50px!important; overflow: hidden!important;
    border-bottom: 2px solid transparent!important;
    border-image: linear-gradient(0.25turn, rgba(255,249,34), rgba(255,0,128), rgba(56,2,155,0))!important;
    border-image-slice: 1!important;
}
#bwg_container1_0 #bwg_container2_0 .bwg-container-0.bwg-album-thumbnails .bwg-title2 {padding: 10px 0 0!important;}
#bwg_container1_0 #bwg_container2_0 .bwg-container-0.bwg-album-thumbnails .bwg-title2 {
    font: 600 16px/18px var(--fontfamily1)!important;
    font-size: 14px!important;
    font-weight: 500!important;
}

.copyright-wrapper a {color: var(--color1);}
.copyright-wrapper a:hover {color: var(--bd-color1);}

#page_content .site-main .wp-post-image,
#page_content .entry-content .size-full,
#owl-demo .post-thumb .wp-post-image,
#recent .wp-post-image,
.bdb {
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(0.25turn, rgba(255,249,34), rgba(255,0,128), rgba(56,2,155,0));
    border-image-slice: 1;
}



#recent ul li {list-style: none;}
#recent p {margin-bottom: unset!important;}
#recent .recent-block {display: grid; grid-template-columns: 25% auto; grid-gap: 10px;}

#recent .recent-categoty {background-color: #eee; padding: 0 5px; width: fit-content; font: 500 13px/16px var(--fontfamily1)!important;}
#recent .recent-categoty i {margin-right: 5px;}
#recent .recent-title {font: 500 13px/16px var(--fontfamily1)!important; margin-top: 5px;}
#recent .recent-date {font-size: 11px; margin-top: 5px; color: #999;}

#recent h2.section_title {margin-bottom: 10px;}

#testimonialswrap .section_title {color: #FFF;}
section#testimonialswrap {padding: 80px 0;}

.header-top .left span.visible-xs {
    border-right: unset;
    padding-right: unset;
}

#owl-demo .post-title {color: #FFF; font: 400 18px/16px var(--fontfamily1)!important; text-align: center; margin-bottom: 10px;}
#owl-demo .post-thumb {margin: 0 0 1em!important;}

#back-top {
    position: fixed;
    bottom: 15px;
    right: 25px;
}
#back-top a {
    width: 32px;
    display: block;
    text-align: center;
    font: 11px/100% Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    text-decoration: none;
    color: #bbb;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;
}
#back-top span {
    width: 64px;
    height: 62px;
    display: block;
    margin-bottom: 7px;
    background: url(images/up-arrow.png) no-repeat center center;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;
    opacity: 0.5;
}



#slider {
    width: 100%;
    margin: 0;
    padding: 0;
    position: relative;
}
.nivoSlider {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
}
.nivoSlider img {
    position: absolute;
    top: 0px;
    left: 0px;
    max-width: none;
}


input, select, textarea {
    margin-bottom: 5px;
    resize: none;
    width: 100%;
}



.hidden-xs {display: block;}
.visible-xs {display: none;}

@media only screen and (max-width: 768px){
  .hidden-xs {display: none;}
  .visible-xs {display: block;}
}


/* Open Past Work ------------------------------------------------ */
.past-work-gallery-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
}

.past-work-swiper {
  width: 100%;
  position: relative;
}

.past-work-swiper .swiper-slide {
  height: auto;
}

.past-work-swiper .swiper-slide img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 12px;
}

/* Navigation */

.past-work-swiper .swiper-button-prev,
.past-work-swiper .swiper-button-next {
  width: 44px;
  height: 44px;
  background: rgba(255,255,255,.9);
  border-radius: 50%;
}

.past-work-swiper .swiper-button-prev:after,
.past-work-swiper .swiper-button-next:after {
  font-size: 18px;
  font-weight: 700;
  color: #000;
}

@media (max-width: 768px) {

  .past-work-swiper {
    width: 100%;
  }

  .past-work-swiper .swiper-slide img {
    border-radius: 8px;
  }

}

/* ==========================
   LIGHTBOX
========================== */

.past-work-thumb {
  cursor: pointer;
}

.past-work-lightbox {
  position: fixed;
  inset: 0;
  z-index: 99999;

  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  visibility: hidden;
  transition: .3s;
}

.past-work-lightbox.active {
  opacity: 1;
  visibility: visible;
}

.past-work-lightbox-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.9);
}

.past-work-lightbox-swiper {
  position: relative;
  z-index: 2;

  width: 90%;
  height: 90vh;
}

.past-work-lightbox-swiper .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent!important;
}

.past-work-lightbox-swiper img {
  max-width: 100%;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
}

.past-work-lightbox-close {
  position: absolute;
  top: 25px;
  right: 30px;

  z-index: 10;

  width: 50px;
  height: 50px;

  border: 0;
  border-radius: 50%;

  background: rgba(255,255,255,.15);
  color: #fff;

  font-size: 32px;
  line-height: 1;

  cursor: pointer;

  backdrop-filter: blur(10px);
  padding: 0;
}

.past-work-lightbox-close:hover {
  background: rgba(255,255,255,.25);
}

.past-work-lightbox .swiper-button-prev,
.past-work-lightbox .swiper-button-next {
  color: #fff;
}

@media (max-width: 768px) {

  .past-work-lightbox-swiper {
    width: 95%;
    height: 85vh;
  }

  .past-work-lightbox-close {
    top: 15px;
    right: 15px;
    width: 44px;
    height: 44px;
    font-size: 28px;
  }

}

/* Close Past Work ------------------------------------------------ */