/* Stylesheet SAMPLE 4.15 December 2021 by Sarel Meyer */
html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}
/* Extract from sample.css by W3css December 2020 */
body, html {margin: 0;font-family: "Arial Black", Helvetica, sans-serif;color: black;}
html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
h1, h2, h3, h4, h5, h6 {font-family: "Verdana", Geneva, sans-serif;}
article,aside,details,figcaption,figure,footer,header,main,menu,nav,section{display:block}summary{display:list-item}
audio,canvas,progress,video{display:inline-block}progress{vertical-align:baseline}
audio:not([controls]){display:none;height:0}[hidden],template{display:none}
a{background-color:transparent}a:active,a:hover{outline-width:0}
abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}
b,strong{font-weight:bolder}dfn{font-style:italic}mark{background:#ff0;color:#000}
small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sub{bottom:-0.25em}sup{top:-0.5em}figure{margin:1em 40px}img{border-style:none}
code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}hr{box-sizing:content-box;height:0;overflow:visible}
button,input,select,textarea,optgroup{font:inherit;margin:0}optgroup{font-weight:bold}
button,input{overflow:visible}button,select{text-transform:none}
button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}
button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}
button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}
legend{color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}
[type=checkbox],[type=radio]{padding:0}
[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}
[type=search]{-webkit-appearance:textfield;outline-offset:-2px}
[type=search]::-webkit-search-decoration{-webkit-appearance:none}
::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}
/* End extract */
html,body{font-family:Verdana,sans-serif;font-size:15px;line-height:1.5}html{overflow-x:hidden}
h1{font-size:36px}h2{font-size:30px}h3{font-size:24px}h4{font-size:20px}h5{font-size:18px}h6{font-size:16px}
.swd-serif{font-family:serif}.swd-sans-serif{font-family:sans-serif}.swd-cursive{font-family:cursive}.swd-monospace{font-family:monospace}
h1,h2,h3,h4,h5,h6{font-family:"Segoe UI",Arial,sans-serif;font-weight:400;margin:10px 0}.swd-wide{letter-spacing:4px}
hr{border:0;border-top:1px solid #eee;margin:20px 0}
.swd-image{max-width:100%;height:auto}img{vertical-align:middle}a{color:inherit}
.swd-table,.swd-table-all{border-collapse:collapse;border-spacing:0;width:100%;display:table}.swd-table-all{border:1px solid #ccc}
.swd-bordered tr,.swd-table-all tr{border-bottom:1px solid #ddd}.swd-striped tbody tr:nth-child(even){background-color:#f1f1f1}
.swd-table-all tr:nth-child(odd){background-color:#fff}.swd-table-all tr:nth-child(even){background-color:#f1f1f1}
.swd-hoverable tbody tr:hover,.swd-ul.swd-hoverable li:hover{background-color:#ccc}.swd-centered tr th,.swd-centered tr td{text-align:center}
.swd-table td,.swd-table th,.swd-table-all td,.swd-table-all th{padding:8px 8px;display:table-cell;text-align:left;vertical-align:top}
.swd-table th:first-child,.swd-table td:first-child,.swd-table-all th:first-child,.swd-table-all td:first-child{padding-left:16px}
.swd-btn,.swd-button{border:none;display:inline-block;padding:8px 16px;vertical-align:middle;overflow:hidden;text-decoration:none;color:inherit;background-color:inherit;text-align:center;cursor:pointer;white-space:nowrap}
.swd-btn:hover{box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
.swd-btn,.swd-button{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.swd-disabled,.swd-btn:disabled,.swd-button:disabled{cursor:not-allowed;opacity:0.3}.swd-disabled *,:disabled *{pointer-events:none}
.swd-btn.swd-disabled:hover,.swd-btn:disabled:hover{box-shadow:none}
.swd-badge,.swd-tag,.swd-con{background-color:#000;color:#fff;display:inline-block;padding-left:8px;padding-right:8px;text-align:center}.swd-badge{border-radius:50%}.swd-con{border-radius:20%}
.swd-ul{list-style-type:none;padding:0;margin:0}.swd-ul li{padding:8px 16px;border-bottom:1px solid #ddd}.swd-ul li:last-child{border-bottom:none}
.swd-tooltip,.swd-display-container{position:relative}.swd-tooltip .swd-text{display:none}.swd-tooltip:hover .swd-text{display:inline-block}
.swd-ripple:active{opacity:0.5}.swd-ripple{transition:opacity 0s}
.swd-input{padding:8px;display:block;border:none;border-bottom:1px solid #ccc;width:100%}
.swd-select{padding:9px 0;width:100%;border:none;border-bottom:1px solid #ccc}
.swd-dropdown-click,.swd-dropdown-hover{position:relative;display:inline-block;cursor:pointer}
.swd-dropdown-hover:hover .swd-dropdown-content{display:block}
.swd-dropdown-hover:first-child,.swd-dropdown-click:hover{background-color:#ccc;color:#000}
.swd-dropdown-hover:hover > .swd-button:first-child,.swd-dropdown-click:hover > .swd-button:first-child{background-color:#ccc;color:#000}
.swd-dropdown-content{cursor:auto;color:#000;background-color:#fff;display:none;position:absolute;min-width:160px;margin:0;padding:0;z-index:1}
.swd-check,.swd-radio{width:24px;height:24px;position:relative;top:6px}
.swd-sidebar{height:100%;width:200px;background-color:#fff;position:fixed!important;z-index:1;overflow:auto}
.swd-bar-block .swd-dropdown-hover,.swd-bar-block .swd-dropdown-click{width:100%}
.swd-bar-block .swd-dropdown-hover .swd-dropdown-content,.swd-bar-block .swd-dropdown-click .swd-dropdown-content{min-width:100%}
.swd-bar-block .swd-dropdown-hover .swd-button,.swd-bar-block .swd-dropdown-click .swd-button{width:100%;text-align:left;padding:8px 16px}
.swd-main,#main{transition:margin-left .4s}
.swd-modal{z-index:3;display:none;padding-top:100px;position:fixed;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgb(0,0,0);background-color:rgba(0,0,0,0.4)}
.swd-modal-content{margin:auto;background-color:#fff;position:relative;padding:0;outline:0;width:600px}
.swd-bar{width:100%;overflow:hidden}.swd-center .swd-bar{display:inline-block;width:auto}
.swd-bar .swd-bar-item{padding:8px 16px;float:left;width:auto;border:none;display:block;outline:0}
.swd-bar .swd-dropdown-hover,.swd-bar .swd-dropdown-click{position:static;float:left}
.swd-bar .swd-button{white-space:normal}
.swd-bar.swd-grey {
  padding: 12px 16px;   /* more vertical space */
  min-height: 60px;     /* ensure taller bar */
}
.swd-bar-block .swd-bar-item{width:100%;display:block;padding:8px 16px;text-align:left;border:none;white-space:normal;float:none;outline:0}
.swd-bar-block.swd-center .swd-bar-item{text-align:center}.swd-block{display:block;width:100%}
.swd-responsive{display:block;overflow-x:auto}
.swd-container:after,.swd-container:before,.swd-panel:after,.swd-panel:before,.swd-row:after,.swd-row:before,.swd-row-padding:after,.swd-row-padding:before,
.swd-cell-row:before,.swd-cell-row:after,.swd-clear:after,.swd-clear:before,.swd-bar:before,.swd-bar:after{content:"";display:table;clear:both}
.swd-col,.swd-half,.swd-third,.swd-twothird,.swd-threequarter,.swd-quarter{float:left;width:100%}
.swd-col.s1{width:8.33333%}.swd-col.s2{width:16.66666%}.swd-col.s3{width:24.99999%}.swd-col.s4{width:33.33333%}
.swd-col.s5{width:41.66666%}.swd-col.s6{width:49.99999%}.swd-col.s7{width:58.33333%}.swd-col.s8{width:66.66666%}
.swd-col.s9{width:74.99999%}.swd-col.s10{width:83.33333%}.swd-col.s11{width:91.66666%}.swd-col.s12{width:99.99999%}
@media (min-width:601px){.swd-col.m1{width:8.33333%}.swd-col.m2{width:16.66666%}.swd-col.m3,.swd-quarter{width:24.99999%}.swd-col.m4,.swd-third{width:33.33333%}
.swd-col.m5{width:41.66666%}.swd-col.m6,.swd-half{width:49.99999%}.swd-col.m7{width:58.33333%}.swd-col.m8,.swd-twothird{width:66.66666%}
.swd-col.m9,.swd-threequarter{width:74.99999%}.swd-col.m10{width:83.33333%}.swd-col.m11{width:91.66666%}.swd-col.m12{width:99.99999%}}
@media (min-width:993px){.swd-col.l1{width:8.33333%}.swd-col.l2{width:16.66666%}.swd-col.l3{width:24.99999%}.swd-col.l4{width:33.33333%}
.swd-col.l5{width:41.66666%}.swd-col.l6{width:49.99999%}.swd-col.l7{width:58.33333%}.swd-col.l8{width:66.66666%}
.swd-col.l9{width:74.99999%}.swd-col.l10{width:83.33333%}.swd-col.l11{width:91.66666%}.swd-col.l12{width:99.99999%}}
.swd-rest{overflow:hidden}.swd-stretch{margin-left:-16px;margin-right:-16px}
.swd-content,.swd-auto{margin-left:auto;margin-right:auto}.swd-content{max-width:980px}.swd-auto{max-width:1140px}
.swd-cell-row{display:table;width:100%}.swd-cell{display:table-cell}
.swd-cell-top{vertical-align:top}.swd-cell-middle{vertical-align:middle}.swd-cell-bottom{vertical-align:bottom}
.swd-hide{display:none!important}.swd-show-block,.swd-show{display:block!important}.swd-show-inline-block{display:inline-block!important}
@media (max-width:1205px){.swd-auto{max-width:95%}}
@media (max-width:600px){.swd-modal-content{margin:0 10px;width:auto!important}.swd-modal{padding-top:30px}
.swd-dropdown-hover.swd-mobile .swd-dropdown-content,.swd-dropdown-click.swd-mobile .swd-dropdown-content{position:relative}
.swd-hide-small{display:none!important}.swd-mobile{display:block;width:100%!important}.swd-bar-item.swd-mobile,.swd-dropdown-hover.swd-mobile,.swd-dropdown-click.swd-mobile{text-align:center}
.swd-dropdown-hover.swd-mobile,.swd-dropdown-hover.swd-mobile .swd-btn,.swd-dropdown-hover.swd-mobile .swd-button,.swd-dropdown-click.swd-mobile,.swd-dropdown-click.swd-mobile .swd-btn,.swd-dropdown-click.swd-mobile .swd-button{width:100%}}
@media (max-width:768px){.swd-modal-content{width:500px}.swd-modal{padding-top:50px}}
@media (min-width:993px){.swd-modal-content{width:900px}.swd-hide-large{display:none!important}.swd-sidebar.swd-collapse{display:block!important}}
@media (max-width:992px) and (min-width:601px){.swd-hide-medium{display:none!important}}
@media (max-width:992px){.swd-sidebar.swd-collapse{display:none}.swd-main{margin-left:0!important;margin-right:0!important}.swd-auto{max-width:100%}}
.swd-top,.swd-bottom{position:fixed;width:100%;z-index:1}.swd-top{top:0}.swd-bottom{bottom:0}
.swd-overlay{position:fixed;display:none;width:100%;height:100%;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,0.5);z-index:2}
.swd-display-topleft{position:absolute;left:0;top:0}.swd-display-topright{position:absolute;right:0;top:0}
.swd-display-bottomleft{position:absolute;left:0;bottom:0}.swd-display-bottomright{position:absolute;right:0;bottom:0}
.swd-display-middle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)}
.swd-display-left{position:absolute;top:50%;left:0%;transform:translate(0%,-50%);-ms-transform:translate(-0%,-50%)}
.swd-display-right{position:absolute;top:50%;right:0%;transform:translate(0%,-50%);-ms-transform:translate(0%,-50%)}
.swd-display-topmiddle{position:absolute;left:50%;top:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)}
.swd-display-bottommiddle{position:absolute;left:50%;bottom:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)}
.swd-display-container:hover .swd-display-hover{display:block}.swd-display-container:hover span.swd-display-hover{display:inline-block}.swd-display-hover{display:none}
.swd-display-position{position:absolute}
.swd-circle{border-radius:40%}
.swd-round-small{border-radius:2px}.swd-round,.swd-round-medium{border-radius:4px}.swd-round-large{border-radius:8px}.swd-round-xlarge{border-radius:16px}.swd-round-xxlarge{border-radius:32px}
.swd-row-padding,.swd-row-padding>.swd-half,.swd-row-padding>.swd-third,.swd-row-padding>.swd-twothird,.swd-row-padding>.swd-threequarter,.swd-row-padding>.swd-quarter,.swd-row-padding>.swd-col{padding:0 8px}
.swd-container,.swd-panel{padding:0.01em 16px}.swd-panel{margin-top:16px;margin-bottom:16px}
/* Sarmeda add-on */
div.swd-background {background: url("img/img_snowtop_2.jpg") fixed repeat;position: -webkit-sticky;position: sticky;top: 0;z-index: 1}
div.swd-transbox {padding: 0;background-color:rgba(255,255,255,0.6)}
.swd-img {float:left;width:90px;position:absolute;content: url("img/swd.jpg")}
.swd-img1 {float:left;width:90px;position:absolute;content: url("img/sgs.jpg")}
div.swd-background-img {background-image: url("img/sunset3.JPG");max-height: 60%;
	background-position:center;background-repeat:no-repeat;background-size:cover}
div.swd-background-img1 {background-image: url("img/sunset117.jpg");max-height: 60%;
	background-position:center;background-repeat:no-repeat;background-size:cover}
div.swd-textarea {padding: 0;background-color: rgba(255,255,255,0.3)}
.swd-topheader {text-align: center;padding: 1px 1px;color: black;text-shadow: 2px 2px 0 grey}
#borderimg1 {height: 100%;border: 15px solid transparent;padding: 20px;border-image: url(img/border1.png) 16 stretch;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.6), 0 6px 20px 0 rgba(0, 0, 0, 0.59)}
#borderimg2 {height: 100%;border: 15px solid transparent;padding: 20px;border-image: url(img/border1.png) 16 stretch;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.6), 0 6px 20px 0 rgba(0, 0, 0, 0.59)}
#borderimg3 {height: 100%;border: 15px solid transparent;padding: 20px;border-image: url(img/border1.png) 16 stretch;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.6), 0 6px 20px 0 rgba(0, 0, 0, 0.59)}
#borderimg4 {height: 100%;border: 15px solid transparent;padding: 40px;border-image: url(img/border2.png) 16 stretch;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.6), 0 6px 20px 0 rgba(0, 0, 0, 0.59)}
#borderimg5 {height: 100%;border: 15px solid transparent;padding: 40px;border-image: url(img/border2.png) 16 stretch;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.6), 0 6px 20px 0 rgba(0, 0, 0, 0.59)}
#borderimg6 {height: 100%;border: 15px solid transparent;padding: 40px;border-image: url(img/border2.png) 16 stretch;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.6), 0 6px 20px 0 rgba(0, 0, 0, 0.59)}
.swd-third.swd-container h2 {text-align: center;}
.swd-card h2 {text-align: center;}
/* Brand story card color */
.swd-card.soft-blue {background: #eaf2ff;} /* very light blue */
.swd-card.soft-orange {background: #FFEED8;} /* very light orange */
.swd-fakeimg {width: 100%;padding: 10px;}
.swd-snowimg {width: 100%;padding: 20px;}
/* Slideshow container */
	.mySlides {display: none}
img {max-width: 100;height: auto;display: block;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.6), 0 6px 20px 0 rgba(0, 0, 0, 0.59)}
.swd-slideshow-container {max-width: 600px;position: relative;margin: auto;}
.swd-slideshow-container h2 {text-align: center;}
/* Next & previous buttons */
.prev, .next {cursor: pointer;position: absolute;top: 50%;width: auto;padding: 16px;margin-top: -22px;color: white;
  font-weight: bold;font-size: 18px;transition: 0.6s ease;border-radius: 0 3px 3px 0;user-select: none;}
/* Position the "next button" to the right */
.next {right: 0;border-radius: 3px 0 0 3px;}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {background-color: rgba(0,0,0,0.8);}
/* Caption text */
.text {color: black;font-size: 16px;padding: 8px 12px;position: absolute;bottom: 4px;width: 100%;text-align: center;}
/* Number text (1/3 etc) */
.swd-numbertext {background-color: rgba(77, 77, 51, 0.3);color:black;font-size: 24px;padding: 1px 1px;position: absolute;top: 100px;}
/* The dots/bullets/indicators */
.dot {cursor: pointer;height: 15px;width: 15px;margin: 0 2px;background-color: #bbb;border-radius: 50%;display: inline-block;transition: background-color 0.6s ease;}
.active, .dot:hover {background-color: #717171;}
/* Fading animation */
.swd-fade {-webkit-animation-name: fade;-webkit-animation-duration: 1.5s;animation-name: fade;animation-duration: 1.5s;}
@-webkit-keyframes fade {from {opacity: .4} to {opacity: 1}}
@keyframes fade {from {opacity: .4} to {opacity: 1}}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {.prev, .next,.text {font-size: 11px}} /* End of slideshow */
.swd-code,.swd-codespan{font-family:Consolas,"courier new";font-size:16px}
.swd-code{width:auto;background-color:#fff;padding:8px 12px;border-left:4px solid #4CAF50;word-wrap:break-word}
.swd-codespan{color:crimson;background-color:#f1f1f1;padding-left:4px;padding-right:4px;font-size:110%}
.swd-card,.swd-card-2{box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)}
.swd-card-4,.swd-hover-shadow:hover{box-shadow:0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19)}
.swd-spin{animation:swd-spin 2s infinite linear}@keyframes swd-spin{0%{transform:rotate(0deg)}100%{transform:rotate(359deg)}}
/* robust logos (no 'content: url(...)') */
.swd-logo, .swd-logo1, .swd-logo2, .swd-logo3 {width: 80px; height: 50px;position: relative;
	animation: mylogo 10s infinite alternate;  background-repeat: no-repeat;background-position: center;background-size: contain;}
/* individual sources */
.swd-logo  { background-image: url(img/swd.jpg); }
.swd-logo1 { background-image: url(img/sgs.png); }
.swd-logo2 { background-image: url(img/sfs.png); }
.swd-logo3 { background-image: url(img/sarmeda.JPG); }
@keyframes mypict {from {left: 60%;height: 50%;content: url(img/sarmeda1.JPG);}to {left: 0%;height: 80%;content: url(img/sarmeda5.JPG);}}
.swd-pict1 {content: url(img/sarel.jpg);position: relative;border-radius: 50%;animation: mypict1 10s infinite;animation-direction: alternate;}
@keyframes mypict1 {from {left: 0%;}to {left: 30%;}}
.swd-pict2 {content: url(img/house.JPG);position: relative;width: 70%;border-radius: 50%;animation: mypict2 4s infinite;animation-direction: alternate;}
@keyframes mypict2 {from {left: 0%;}to {left: 30%;}}
.swd-pict3 {content: url(img/poolarea1.jpeg);position: relative;width: 70%;border-radius: 50%;animation: mypict3 10s infinite;animation-direction: alternate;}
@keyframes mypict3 {from {left: 0%;}to {left: 30%;}}
.swd-pict4 {content: url(img/during1.jpg);position: relative;animation: mypict4 10s infinite;animation-direction: alternate;}
@keyframes mypict4 {from {left: 60%;height: 50%;content: url(img/before1.jpg);}to {left: 0%;height: 80%;content: url(img/during1.jpg);}}
.swd-pict5 {content: url(img/sarel10.jpg);position: relative;width: 70%;border-radius: 50%;animation: mypict5 10s infinite;animation-direction: alternate;}
@keyframes mypict5 {from {left: 0%;}to {left: 30%;}}
.swd-about {content: url(img/jtj3.JPG);position: relative;animation: myabout 10s infinite;animation-direction: alternate;}
@keyframes myabout {from {top: 0%;height: 20%;content: url(img/jtj1.JPG);}to {top: 0%;height: 40%;content: url(img/jtj3.JPG);}}
.swd-about1 {content: url(img/sfloor3.jpg);position: relative;animation: myabout1 10s infinite;animation-direction: alternate;}
@keyframes myabout1 {from {top: 0%;left: 0%;height: 30%;content: url(img/sfloorb3.jpg);}to {top: 0%;left: 70%;height: 50%;content: url(img/sfloor3.jpg);}}
.swd-about2 {content: url(img/windowa.jpg);position: relative;animation: myabout2 10s infinite;animation-direction: alternate;}
@keyframes myabout2 {from {top: 0%;left: 0%;height: 30%;content: url(img/windowb.jpg);}to {top: 0%;left: 40%;height: 50%;content: url(img/windowa.jpg);}}
.swd-animate-fading{animation:fading 10s infinite}@keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
.swd-animate-opacity{animation:opac 0.8s}@keyframes opac{from{opacity:0} to{opacity:1}}
.swd-animate-top{position:relative;animation:animatetop 0.4s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
.swd-animate-left{position:relative;animation:animateleft 0.4s}@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}
.swd-animate-right{position:relative;animation:animateright 0.4s}@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}
.swd-animate-bottom{position:relative;animation:animatebottom 0.4s}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}
.swd-animate-zoom {animation:animatezoom 0.6s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
.swd-animate-input{transition:width 0.4s ease-in-out}.swd-animate-input:focus{width:100%!important}
.swd-opacity,.swd-hover-opacity:hover{opacity:0.60}.swd-opacity-off,.swd-hover-opacity-off:hover{opacity:1}
.swd-opacity-max{opacity:0.25}.swd-opacity-min{opacity:0.75}
.swd-greyscale-max,.swd-grayscale-max,.swd-hover-greyscale:hover,.swd-hover-grayscale:hover{filter:grayscale(100%)}
.swd-greyscale,.swd-grayscale{filter:grayscale(75%)}.swd-greyscale-min,.swd-grayscale-min{filter:grayscale(50%)}
.swd-sepia{filter:sepia(75%)}.swd-sepia-max,.swd-hover-sepia:hover{filter:sepia(100%)}.swd-sepia-min{filter:sepia(50%)}
.swd-tiny{font-size:10px!important}.swd-small{font-size:12px!important}.swd-medium{font-size:15px!important}.swd-large{font-size:18px!important}
.swd-xlarge{font-size:24px!important}.swd-xxlarge{font-size:36px!important}.swd-xxxlarge{font-size:48px!important}.swd-jumbo{font-size:64px!important}
.swd-left-align{text-align:left!important}.swd-right-align{text-align:right!important}.swd-justify{text-align:justify!important}.swd-center{text-align:center!important}
.swd-border-0{border:0!important}.swd-border{border:1px solid #ccc!important}
.swd-border-top{border-top:1px solid #ccc!important}.swd-border-bottom{border-bottom:1px solid #ccc!important}
.swd-border-left{border-left:1px solid #ccc!important}.swd-border-right{border-right:1px solid #ccc!important}
.swd-topbar{border-top:6px solid #ccc!important}.swd-bottombar{border-bottom:6px solid #ccc!important}
.swd-leftbar{border-left:6px solid #ccc!important}.swd-rightbar{border-right:6px solid #ccc!important}
.swd-section,.swd-code{margin-top:16px!important;margin-bottom:16px!important}
.swd-margin{margin:16px!important}.swd-margin-top{margin-top:16px!important}.swd-margin-bottom{margin-bottom:16px!important}
.swd-margin-left{margin-left:16px!important}.swd-margin-right{margin-right:16px!important}.swd-margin-left-86{margin-left:86px!important}
.swd-margin-top-48{margin-top:48px!important}.swd-margin-top-64{margin-top:64px!important}.swd-margin-top-86{margin-top:86px!important}
.swd-padding-small{padding:4px 8px!important}.swd-padding{padding:8px 16px!important}.swd-padding-large{padding:12px 24px!important}
.swd-padding-16{padding-top:16px!important;padding-bottom:16px!important}.swd-padding-24{padding-top:24px!important;padding-bottom:24px!important}
.swd-padding-32{padding-top:32px!important;padding-bottom:32px!important}.swd-padding-48{padding-top:48px!important;padding-bottom:48px!important}
.swd-padding-64{padding-top:64px!important;padding-bottom:64px!important}.swd-padding-left-100{padding-left:100px!important}
.swd-padding-top-64{padding-top:64px!important}.swd-padding-top-48{padding-top:48px!important}
.swd-padding-top-32{padding-top:32px!important}.swd-padding-top-24{padding-top:24px!important}
.swd-left{float:left!important}.swd-right{float:right!important}
.swd-button:hover{color:#000!important;background-color:#ccc!important}
.swd-transparent,.swd-hover-none:hover{background-color:transparent!important}
.swd-hover-none:hover{box-shadow:none!important}
/* Colors */
.swd-sarmeda{background-color:#9999ff;}
.swd-amber,.swd-hover-amber:hover{color:#000!important;background-color:#ffc107!important}
.swd-aqua,.swd-hover-aqua:hover{color:#000!important;background-color:#00ffff!important}
.swd-blue,.swd-hover-blue:hover{color:#fff!important;background-color:#0000ff!important}
.swd-light-blue,.swd-hover-light-blue:hover{color:#000!important;background-color:#ccccff!important}
.swd-brown,.swd-hover-brown:hover{color:#fff!important;background-color:#795548!important}
.swd-cyan,.swd-hover-cyan:hover{color:#000!important;background-color:#00bcd4!important}
.swd-blue-grey,.swd-hover-blue-grey:hover,.swd-blue-gray,.swd-hover-blue-gray:hover{color:#fff!important;background-color:#607d8b!important}
.swd-green,.swd-hover-green:hover{color:#fff!important;background-color:#4CAF50!important}
.swd-light-green,.swd-hover-light-green:hover{color:#000!important;background-color:#8bc34a!important}
.swd-indigo,.swd-hover-indigo:hover{color:#fff!important;background-color:#3f51b5!important}
.swd-khaki,.swd-hover-khaki:hover{color:#000!important;background-color:#f0e68c!important}
.swd-lime,.swd-hover-lime:hover{color:#000!important;background-color:#cddc39!important}
.swd-orange,.swd-hover-orange:hover{color:#000!important;background-color:#ff9800!important}
.swd-deep-orange,.swd-hover-deep-orange:hover{color:#fff!important;background-color:#ff5722!important}
.swd-pink,.swd-hover-pink:hover{color:#fff!important;background-color:#e91e63!important}
.swd-purple,.swd-hover-purple:hover{color:#fff!important;background-color:#9c27b0!important}
.swd-deep-purple,.swd-hover-deep-purple:hover{color:#fff!important;background-color:#673ab7!important}
.swd-red,.swd-hover-red:hover{color:#fff!important;background-color:#f44336!important}
.swd-sand,.swd-hover-sand:hover{color:#000!important;background-color:#fdf5e6!important}
.swd-teal,.swd-hover-teal:hover{color:#fff!important;background-color:#009688!important}
.swd-yellow,.swd-hover-yellow:hover{color:#000!important;background-color:#ffeb3b!important}
.swd-white,.swd-hover-white:hover{color:#000!important;background-color:#fff!important}
.swd-black,.swd-hover-black:hover{color:#fff!important;background-color:#000!important}
.swd-grey,.swd-hover-grey:hover,.swd-gray,.swd-hover-gray:hover{color:#000!important;background-color:#9e9e9e!important}
.swd-light-grey,.swd-hover-light-grey:hover,.swd-light-gray,.swd-hover-light-gray:hover{color:#000!important;background-color:#f1f1f1!important}
.swd-dark-grey,.swd-hover-dark-grey:hover,.swd-dark-gray,.swd-hover-dark-gray:hover{color:#fff!important;background-color:#616161!important}
.swd-pale-red,.swd-hover-pale-red:hover{color:#000!important;background-color:#ffdddd!important}
.swd-pale-green,.swd-hover-pale-green:hover{color:#000!important;background-color:#ddffdd!important}
.swd-pale-yellow,.swd-hover-pale-yellow:hover{color:#000!important;background-color:#ffffcc!important}
.swd-pale-blue,.swd-hover-pale-blue:hover{color:#000!important;background-color:#ddffff!important}
.swd-text-amber,.swd-hover-text-amber:hover{color:#ffc107!important}
.swd-text-aqua,.swd-hover-text-aqua:hover{color:#00ffff!important}
.swd-text-blue,.swd-hover-text-blue:hover{color:#2196F3!important}
.swd-text-light-blue,.swd-hover-text-light-blue:hover{color:#87CEEB!important}
.swd-text-brown,.swd-hover-text-brown:hover{color:#795548!important}
.swd-text-cyan,.swd-hover-text-cyan:hover{color:#00bcd4!important}
.swd-text-blue-grey,.swd-hover-text-blue-grey:hover,.swd-text-blue-gray,.swd-hover-text-blue-gray:hover{color:#607d8b!important}
.swd-text-green,.swd-hover-text-green:hover{color:#4CAF50!important}
.swd-text-light-green,.swd-hover-text-light-green:hover{color:#8bc34a!important}
.swd-text-indigo,.swd-hover-text-indigo:hover{color:#3f51b5!important}
.swd-text-khaki,.swd-hover-text-khaki:hover{color:#b4aa50!important}
.swd-text-lime,.swd-hover-text-lime:hover{color:#cddc39!important}
.swd-text-orange,.swd-hover-text-orange:hover{color:#ff9800!important}
.swd-text-deep-orange,.swd-hover-text-deep-orange:hover{color:#ff5722!important}
.swd-text-pink,.swd-hover-text-pink:hover{color:#e91e63!important}
.swd-text-purple,.swd-hover-text-purple:hover{color:#9c27b0!important}
.swd-text-deep-purple,.swd-hover-text-deep-purple:hover{color:#673ab7!important}
.swd-text-red,.swd-hover-text-red:hover{color:#f44336!important}
.swd-text-sand,.swd-hover-text-sand:hover{color:#fdf5e6!important}
.swd-text-teal,.swd-hover-text-teal:hover{color:#009688!important}
.swd-text-yellow,.swd-hover-text-yellow:hover{color:#d2be0e!important}
.swd-text-white,.swd-hover-text-white:hover{color:#fff!important}
.swd-text-black,.swd-hover-text-black:hover{color:#000!important}
.swd-text-grey,.swd-hover-text-grey:hover,.swd-text-gray,.swd-hover-text-gray:hover{color:#757575!important}
.swd-text-light-grey,.swd-hover-text-light-grey:hover,.swd-text-light-gray,.swd-hover-text-light-gray:hover{color:#f1f1f1!important}
.swd-text-dark-grey,.swd-hover-text-dark-grey:hover,.swd-text-dark-gray,.swd-hover-text-dark-gray:hover{color:#3a3a3a!important}
.swd-border-amber,.swd-hover-border-amber:hover{border-color:#ffc107!important}
.swd-border-aqua,.swd-hover-border-aqua:hover{border-color:#00ffff!important}
.swd-border-blue,.swd-hover-border-blue:hover{border-color:#2196F3!important}
.swd-border-light-blue,.swd-hover-border-light-blue:hover{border-color:#87CEEB!important}
.swd-border-brown,.swd-hover-border-brown:hover{border-color:#795548!important}
.swd-border-cyan,.swd-hover-border-cyan:hover{border-color:#00bcd4!important}
.swd-border-blue-grey,.swd-hover-border-blue-grey:hover,.swd-border-blue-gray,.swd-hover-border-blue-gray:hover{border-color:#607d8b!important}
.swd-border-green,.swd-hover-border-green:hover{border-color:#4CAF50!important}
.swd-border-light-green,.swd-hover-border-light-green:hover{border-color:#8bc34a!important}
.swd-border-indigo,.swd-hover-border-indigo:hover{border-color:#3f51b5!important}
.swd-border-khaki,.swd-hover-border-khaki:hover{border-color:#f0e68c!important}
.swd-border-lime,.swd-hover-border-lime:hover{border-color:#cddc39!important}
.swd-border-orange,.swd-hover-border-orange:hover{border-color:#ff9800!important}
.swd-border-deep-orange,.swd-hover-border-deep-orange:hover{border-color:#ff5722!important}
.swd-border-pink,.swd-hover-border-pink:hover{border-color:#e91e63!important}
.swd-border-purple,.swd-hover-border-purple:hover{border-color:#9c27b0!important}
.swd-border-deep-purple,.swd-hover-border-deep-purple:hover{border-color:#673ab7!important}
.swd-border-red,.swd-hover-border-red:hover{border-color:#f44336!important}
.swd-border-sand,.swd-hover-border-sand:hover{border-color:#fdf5e6!important}
.swd-border-teal,.swd-hover-border-teal:hover{border-color:#009688!important}
.swd-border-yellow,.swd-hover-border-yellow:hover{border-color:#ffeb3b!important}
.swd-border-white,.swd-hover-border-white:hover{border-color:#fff!important}
.swd-border-black,.swd-hover-border-black:hover{border-color:#000!important}
.swd-border-grey,.swd-hover-border-grey:hover,.swd-border-gray,.swd-hover-border-gray:hover{border-color:#9e9e9e!important}
.swd-border-light-grey,.swd-hover-border-light-grey:hover,.swd-border-light-gray,.swd-hover-border-light-gray:hover{border-color:#f1f1f1!important}
.swd-border-dark-grey,.swd-hover-border-dark-grey:hover,.swd-border-dark-gray,.swd-hover-border-dark-gray:hover{border-color:#616161!important}
.swd-border-pale-red,.swd-hover-border-pale-red:hover{border-color:#ffe7e7!important}.swd-border-pale-green,.swd-hover-border-pale-green:hover{border-color:#e7ffe7!important}
.swd-border-pale-yellow,.swd-hover-border-pale-yellow:hover{border-color:#ffffcc!important}.swd-border-pale-blue,.swd-hover-border-pale-blue{border-color:#e7ffff!important}
/* ===== Robust image blocks (replace content:url with background images) ===== */
/* Base helper for any image box */
.swd-imgbox {position: relative;display: block;background-repeat: no-repeat;background-position: center;background-size: contain;}
/* Generic crossfade helper.
   Define --imgA and --imgB on the element using url(...) values. */
.swd-imgbox--swap::before,.swd-imgbox--swap::after {content: "";position: absolute;inset: 0;background-repeat: no-repeat;background-position: center;
  background-size: contain;transition: opacity 0.8s linear;}
.swd-imgbox--swap::before { background-image: var(--imgA); opacity: 1; }
.swd-imgbox--swap::after  { background-image: var(--imgB); opacity: 0; }
/* Crossfade keyframes (alternate will swap which layer is visible) */
@keyframes swd-crossfade { from { opacity: 1; } to { opacity: 0; } }
/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {.swd-imgbox,.swd-imgbox--swap::before,.swd-imgbox--swap::after {animation: none !important;transition: none !important;}}
/* ---------------- Logos (single image each) ---------------- */
@keyframes mylogo { from { left: 0%; } to { left: 45%; } }
/* Brand mark (uses your moving logo if you want) */
.brand {position: relative;}.brand img {width: 70px;height: auto;animation: mylogo 5s infinite alternate;margin-top: -12px;margin-bottom: -12px;}
/* swd-pict: crossfade between two images + move/resize like before */
@keyframes mypictMove { from { left: 60%; height: 50%; } to { left: 0%; height: 80%; } }
.swd-pict {--imgA: url(img/sarmeda1.JPG);--imgB: url(img/sarmeda5.JPG);height: 50%;animation: mypictMove 10s infinite alternate;}
.swd-pict { position: relative; }.swd-pict::before { animation: swd-crossfade 10s infinite alternate; }.swd-pict::after  { animation: swd-crossfade 10s infinite alternate reverse; }
/* attach helpers */
.swd-pict { composes: swd-imgbox swd-imgbox--swap; }.swd-pict { background: none; } /* the actual layers are on ::before/::after */
/* swd-pict1: single image, circular, move left 0→30% */
@keyframes mypict1 { from { left: 0%; } to { left: 30%; } }
.swd-pict1 {background-image: url(img/sarel.jpg);border-radius: 50%;height: 50%; /* keep your sizing intent; adjust if needed */
  animation: mypict1 10s infinite alternate;}.swd-pict1 { composes: swd-imgbox; }
/* swd-pict2: single image, 70% width, circular, move left 0→30% */
@keyframes mypict2 { from { left: 0%; } to { left: 30%; } }
.swd-pict2 {background-image: url(img/house.JPG);width: 70%;border-radius: 50%;height: 50%;
  animation: mypict2 4s infinite alternate;}.swd-pict2 { composes: swd-imgbox; }
/* swd-pict3: single image, 70% width, circular, move left 0→30% */
@keyframes mypict3 { from { left: 0%; } to { left: 30%; } }
.swd-pict3 {background-image: url(img/poolarea1.jpeg);width: 70%;border-radius: 50%;
  height: 50%;animation: mypict3 10s infinite alternate;}.swd-pict3 { composes: swd-imgbox; }
/* swd-pict4: crossfade between before/after + move/resize */
@keyframes mypict4Move { from { left: 60%; height: 50%; } to { left: 0%; height: 80%; } }
.swd-pict4 {--imgA: url(img/before1.jpg);--imgB: url(img/during1.jpg);height: 50%;animation: mypict4Move 10s infinite alternate;}
.swd-pict4::before { animation: swd-crossfade 10s infinite alternate; }
.swd-pict4::after  { animation: swd-crossfade 10s infinite alternate reverse; }
.swd-pict4 { composes: swd-imgbox swd-imgbox--swap; background: none; }

/* ---------------- About blocks ---------------- */
/* swd-about: crossfade jtj1 ↔ jtj3 + height 20%→40% */
@keyframes myaboutMove { from { top: 0%; height: 20%; } to { top: 0%; height: 40%; } }
.swd-about {--imgA: url(img/jtj1.JPG);--imgB: url(img/jtj3.JPG);height: 20%;animation: myaboutMove 10s infinite alternate;}
.swd-about::before { animation: swd-crossfade 10s infinite alternate; }
.swd-about::after  { animation: swd-crossfade 10s infinite alternate reverse; }
.swd-about { composes: swd-imgbox swd-imgbox--swap; background: none; }
/* swd-about1: crossfade sfloorb3 ↔ sfloor3 + move left 0→70%, height 30%→50% */
@keyframes myabout1Move { from { top: 0%; left: 0%; height: 30%; } to { top: 0%; left: 70%; height: 50%; } }
.swd-about1 {--imgA: url(img/sfloorb3.jpg);--imgB: url(img/sfloor3.jpg);height: 30%;animation: myabout1Move 10s infinite alternate;}
.swd-about1::before { animation: swd-crossfade 10s infinite alternate; }
.swd-about1::after  { animation: swd-crossfade 10s infinite alternate reverse; }
.swd-about1 { composes: swd-imgbox swd-imgbox--swap; background: none; }
/* swd-about2: crossfade windowb ↔ windowa + move left 0→40%, height 30%→50% */
@keyframes myabout2Move { from { top: 0%; left: 0%; height: 30%; } to { top: 0%; left: 40%; height: 50%; } }
.swd-about2 {--imgA: url(img/windowb.jpg);--imgB: url(img/windowa.jpg);height: 30%;animation: myabout2Move 10s infinite alternate;}
.swd-about2::before { animation: swd-crossfade 10s infinite alternate; }
.swd-about2::after  { animation: swd-crossfade 10s infinite alternate reverse; }
.swd-about2 { composes: swd-imgbox swd-imgbox--swap; background: none; }
.header-slideshow {position: relative;height: 70vh; /* adjust height */overflow: hidden;color: white;text-align: center;}
.header-slideshow img {width: 100%;height: 100%;object-fit: cover;}
.header-overlay {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 2;background: rgba(0,0,0,0.4); /* darken for readability */
  padding: 20px 40px;border-radius: 8px;}
.tile-link {text-decoration: none;color: inherit;display: block;}
.tile {transition: transform .2s ease, box-shadow .2s ease;}
.tile:hover {transform: translateY(-6px);box-shadow: 0 8px 20px rgba(0,0,0,.15);}
/* BLOG MAGAZINE LAYOUT */
.blog-wrap .lead { color:#555; }
.posts-grid {display: grid;grid-template-columns: repeat(12, 1fr);gap: 24px;margin: 24px 0 48px;}
/* Card spans full width on mobile, halves on tablet, thirds on desktop */
.post-card {grid-column: 1 / -1;background:#fff;border-radius:12px;overflow:hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);transition: transform .15s ease, box-shadow .15s ease;}
.post-card:hover {transform: translateY(-2px);box-shadow: 0 12px 28px rgba(0,0,0,.08);}
/* Cover image */
.post-cover { display:block; line-height:0; }
.post-thumb {width:100%;aspect-ratio:16/9;object-fit:cover;display:block;}
/* Body */
.post-body { padding:16px 18px 20px; }
.post-title { margin:8px 0 6px; font-size:clamp(1.15rem, 1.6vw, 1.4rem); line-height:1.25; }
.post-title a { color:#111; text-decoration:none; }
.post-title a:hover { text-decoration:underline; }
.post-meta { color:#777; font-size:.9rem; margin-bottom:8px; }
.post-excerpt { color:#333; margin:0 0 12px; }
.post-cta {display:inline-block;font-weight:600;text-decoration:none;color:#3f51b5;}
.post-cta:hover { text-decoration:underline; }
/* Responsive columns */
@media (min-width: 700px) {.post-card { grid-column: span 6; }}
@media (min-width: 1100px) {.post-card { grid-column: span 4; }}
/* FOOTER BASE */
.site-footer {background: #111;color: #eee;padding: 32px 16px;text-align: center;border-top: 1px solid #222;}
.site-footer h3 {margin-bottom: 10px;font-size: 1.2rem;color: #fff;}
/* NAV LINKS */
.site-footer .footer-nav {margin: 12px 0;display: flex;flex-wrap: wrap;justify-content: center;gap: 12px;}
.site-footer .footer-nav a {color: #9bb4ff;font-weight: 500;text-decoration: none;}
.site-footer .footer-nav a:hover {color: #fff;text-decoration: underline;}
/* SOCIAL ICONS */
.site-footer .footer-social {margin: 16px 0;}
.site-footer .footer-social a {margin: 0 8px;font-size: 1.2rem;color: #ccc;transition: color 0.2s;}
.site-footer .footer-social a:hover {color: #fff;}
/* BACK TO TOP */
.site-footer .footer-top {margin: 14px 0;}
.site-footer .back-to-top {display: inline-block;font-size: 0.95rem;color: #9bb4ff;text-decoration: none;transition: color 0.2s;}
.site-footer .back-to-top:hover {color: #fff;text-decoration: underline;}
/* FOOTER NOTE */
.site-footer .footer-note {margin-top: 12px;font-size: 0.9rem;color: #aaa;}
.site-footer .footer-note a {color: #9bb4ff;text-decoration: none;}
.site-footer .footer-note a:hover {color: #fff;text-decoration: underline;}
/* MOBILE FRIENDLY STACK */
@media (max-width: 600px) {.site-footer .footer-nav {flex-direction: column;gap: 6px;}.site-footer .footer-social {margin: 12px 0;}}
/* FLOATING BACK TO TOP BUTTON */
.back-to-top-btn {position: fixed;bottom: 24px;right: 24px;background: #111;color: #fff;font-size: 1.2rem;padding: 10px 14px;
  border-radius: 50%;box-shadow: 0 4px 12px rgba(0,0,0,.3);text-align: center;z-index: 999;opacity: 0;pointer-events: none;
  transition: opacity 0.3s ease, transform 0.2s, background 0.2s;}
.back-to-top-btn:hover {background: #222;transform: translateY(-2px);}
/* Hide until user scrolls */
.back-to-top-btn.hidden {display: none;}
/* Smooth scroll for all in-page anchors */
html {scroll-behavior: smooth;}.back-to-top-btn {opacity: 0;pointer-events: none;transition: opacity 0.3s ease, transform 0.2s;}
.back-to-top-btn.show {opacity: 1;pointer-events: auto;}
/* Layout helpers */
:root { --nav-height: 110px; } /* adjust if your fixed bars change height */
body { background:#fff; color:#222; }
/* Top utility strip + main nav pinned */
.swd-top { position: fixed; top:0; left:0; width:100%; z-index: 1000; }
.site-wrap { margin-top: var(--nav-height); } /* pushes content below fixed nav */
/* Each slide fills the hero; first one visible before JS runs */
.mySlides {position: absolute;top: 0; right: 0; bottom: 0; left: 0;display: none;}
.mySlides:first-child { display: block; }
/* Safe image scaling for old Safari (no object-fit) preserve aspect ratio and try to fill the hero height (may letterbox slightly) */
.mySlides picture,.mySlides img {width: 100%;height: auto;min-height: 100%;display: block;filter: brightness(.75);}
/* Overlay centers the text block over slides */
/* --- Hero consistency pass (Sept 2025) --- */
.hero { position: relative; min-height: 65svh; height: 80vh; overflow: hidden; color: #fff; }
.hero .slide-layer { position: absolute; inset: 0; }
.hero .mySlides { position: absolute; inset: 0; display: none; }
.hero .mySlides img,
.hero .mySlides picture { width: 100%; height: 100%; object-fit: cover; }
.hero .mySlides img { filter: brightness(.75); }
.hero-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 16px; z-index: 2; }
.hero-box { background: rgba(0,0,0,0.45); padding: 24px 32px; border-radius: 10px; max-width: 920px; }
/* Headings & text inside hero */
.hero h1 { font-size: clamp(2rem, 4vw, 3.25rem); margin: 0 0 10px; }
.hero h2 { font-size: clamp(1.5rem, 2.5vw, 2.25rem); margin: 0 0 10px; }
.hero p  { font-size: clamp(1rem, 2vw, 1.2rem);   margin: 0 0 16px; }
/* CTA buttons (keep if you use .cta; otherwise remove and use .swd-button) */
.cta {display: inline-block;padding: 12px 22px;border-radius: 6px;background: #3f51b5;color: #fff;text-decoration: none;font-weight: 700;}
.cta:hover { background: #303f9f; }
/* Progressive enhancement for modern browsers (optional) */
@supports (object-fit: cover) {.mySlides img {height: 100%;min-height: auto;object-fit: cover;}}
/* Sections */
.section { padding: 48px 0; }.section-muted { background:#fafafa; }.lead { max-width: 820px; margin: 0 auto 24px; text-align:center; }
/* Cards (use your swd-card shadow) */
.card { background:#fff; border-radius:8px; padding:20px; }.card h3 { margin-top:8px; }
/* Demo portfolio tiles */
.tile {background:#fff; border-radius:8px; overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.08);}
.tile img { width:100%; height:180px; object-fit:cover; display:block; }.tile .tile-body { padding:14px 16px; }.tile .meta { color:#666; font-size: 0.9rem; }
/* Footer */
.site-footer { background:#111; color:#eee; }
/* Mobile menu support (uses your #navDemo block) */
#navDemo a { display:block; }
/* Demo badge */
.demo-badge {position: absolute;top: 14px; left: 14px;display: inline-flex; align-items: center; gap: 8px;padding: 6px 10px;
border-radius: 999px;background: rgba(0,0,0,.55);color: #fff; font-weight: 700; font-size: .85rem;
backdrop-filter: blur(4px);box-shadow: 0 6px 18px rgba(0,0,0,.18);z-index: 3;} /* over slides */
.demo-badge i { opacity: .9; }
/* Optional: small ribbon in the corner (comment out if not needed) */
.demo-ribbon {position: absolute; top: 0; right: 0;background: #ff3366; color:#fff; font-weight:800; letter-spacing:.06em;
padding: 6px 10px; transform: translate(35%, -35%) rotate(45deg);box-shadow: 0 10px 26px rgba(0,0,0,.25);font-size: .7rem; z-index: 3;}
/* Article */
    article.post { max-width:820px; margin:0 auto; padding:32px 16px; line-height:1.7; }
    article.post img { width:100%; border-radius:10px; margin:20px 0; }
    article.post h2, article.post h3 { margin-top:24px; }
    article.post time { display:block; font-size:.9rem; color:#666; margin-bottom:14px; }

    .back-link { margin-top:32px; display:block; text-align:center; }
    .back-link a { text-decoration:none; font-weight:600; color:#3f51b5; }
    .back-link a:hover { text-decoration:underline; }
   /* Fallback if .swd-button / .swd-indigo don’t exist 
.swd-button { display: inline-block; padding: 10px 16px; border-radius: 10px; text-decoration: none; color: #fff; }*/
.swd-indigo { background: #4f46e5; }
.swd-button:hover { filter: brightness(1.05); }
/* FAQ Card */
#faq .faq-card {background: #FFEED8;border-radius: 12px;padding: 20px;box-shadow: 0 6px 16px rgba(0,0,0,.08);
  max-width: 800px;margin: 0 auto;}
/* FAQ Items */
#faq details {background: #fff;border-radius: 8px;margin: 10px 0;padding: 12px 16px;border: 1px solid #eee;}
#faq summary {cursor: pointer;font-weight: bold;list-style: none;padding-left: 1.5em;position: relative;}
#faq summary::before {content: "▸";position: absolute;left: 0;top: 0.2em;transition: transform .2s ease;color: #ff6600;}
#faq details[open] summary::before {transform: rotate(90deg);}
#faq p {margin: 10px 0 0;line-height: 1.6;}
.muted { color:#475569; }
.process { display:grid; gap:16px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.step { background:#eaf2ff; border:1px solid #e5e7eb; border-radius:12px; padding:16px; }
.tiny { font-size:12px; color:#64748b; }
.cta-block { text-align:center; padding:28px 16px; border:1px solid #e5e7eb; border-radius:12px; background:#f8fafc; }
/* --- Mobile overflow & image scaling hardening (Sep 2025) --- */
html, body { overflow-x: hidden; }              /* belt & braces */
/* Equal-height 3-up cards (works on iOS 9) */
.swd-row-padding > .swd-third { display:-webkit-box; display:-ms-flexbox; display:flex; }
.swd-row-padding > .swd-third > .swd-card { -webkit-box-flex:1; -ms-flex:1; flex:1; }
/* Safety: images never overflow their column */
.swd-row-padding img { max-width:100%; height:auto; display:block; }
/* Why choose Sarmeda */
.why { padding: 48px 16px; background: #f7fafc; border-top: 1px solid #eef2f7; }
.why-container { max-width: 1000px; margin: 0 auto; }
.why h2 { margin: 0 0 16px; font-size: 28px; line-height: 1.2; }
.why-list { list-style: none; padding: 0; margin: 0; 
  display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.why-list li { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 16px; }
.why-list h3 { margin: 0 0 6px; font-size: 18px; }
.why-list p { margin: 0; color: #4b5563; }
.why-cta { margin-top: 16px; text-align: center; }
.why-card { background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:16px; }
.why-card h3 { margin:0 0 6px; }
/* === WHY SARMEDA — 3-up, iPad-safe layout (final) === */
.why-grid{display:-webkit-box; display:-ms-flexbox; display:flex;-ms-flex-wrap:wrap; flex-wrap:wrap;margin-left:-12px; margin-right:-12px;} /* gutters */
.why-grid .why-col{padding:12px; width:100%;               /* phones: 1 per row */
  display:-webkit-box; display:-ms-flexbox; display:flex;} /* equal-height container */
/* tablets: 2 per row */
@media (min-width:601px){ .why-grid .why-col{ width:50%; } }
/* laptops+: 3 per row (earlier) */
@media (min-width:900px){ .why-grid .why-col{ width:33.3333%; } }
/* equal-height card */
.why-grid .why-col > .swd-card{ -webkit-box-flex:1; -ms-flex:1; flex:1; }
/* safety */
.why-grid img{ max-width:100%; height:auto; display:block; }
/* optional */
.soft-blue{ border-radius:10px; }
/* --- Sarmeda Demo Bar --- */
.demo-bar { position: sticky; top: 0; z-index: 1000; background: #0f172a; color: #fff; }
.demo-wrap { max-width: 1140px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 12px; }
.demo-tag { background: #f59e0b; color:#111827; font-weight:700; padding: 2px 8px; border-radius: 999px; font-size:.85rem; }
.demo-spacer { flex:1; }
.demo-link { text-decoration: underline; }
.demo-btn { background:#22c55e; color:#111827; padding:8px 12px; border-radius:8px; margin-left:8px; display:inline-block; }
.demo-btn:hover { filter: brightness(0.95); }
@media (max-width:600px){ .demo-wrap{ gap:8px; } .demo-link{ display:none; } }
.floating-cta{position:fixed;right:16px;bottom:16px;background:#22c55e;color:#111827;padding:12px 14px;border-radius:999px;
      font-weight:700;box-shadow:0 6px 18px rgba(0,0,0,.15)}
/* --- Photo treatments for demo pages --- */
/* === Watermark section (background image behind content) === */
.wm-section {position: relative;isolation: isolate; /* keeps overlay contained */
  border-radius: 12px;overflow: hidden;padding: 28px 20px;z-index: 1;}
.wm-section::before {content: "";position: absolute;inset: 0;background-size: cover;background-position: center;
  background-repeat: no-repeat; opacity: 0.3;z-index: -1;} /* 🔑 adjust: 0.1 = very faint, 0.3 = stronger */
/* Ensure text/content is always on top */
.wm-section > * {position: relative;z-index: 2;}
/* B. Card with photo background (content sits on top) */
.photo-card {position: relative; overflow: hidden; border-radius: 12px;background-size: cover; background-position: center;color: #0b1220;}
.photo-card .veil {background: rgba(255,255,255,.78);padding: 20px;}
/* C. Side photo column (image on left/right) */
.side-photo { height: 100%; border-radius: 12px; overflow: hidden; }
.side-photo picture, .side-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Small niceties */
.section-gap { margin-top: 16px; margin-bottom: 16px; }
/* inline var → pseudo background */
.wm-section[style]::before { background-image: var(--img); }
/* --- Flooring promo tile --- */
/* ===== Portfolio tiles ===== */
.portfolio-tiles {display: grid;grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));gap: 24px;margin-top: 24px;}
.portfolio-tile {position: relative;border-radius: 12px;overflow: hidden;box-shadow: 0 6px 18px rgba(0,0,0,.2);display: flex;flex-direction: column;}
.portfolio-tile img {width: 100%;height: 220px;object-fit: cover;}.portfolio-body {padding: 16px;background: #fff;}
.portfolio-body h3 {margin: 0 0 6px;font-size: 1.2rem;}.portfolio-body p {margin: 0 0 12px;color: #666;font-size: 0.9rem;}
.portfolio-body .swd-button {font-size: 0.85rem;padding: 6px 12px;}.case-tiles {display: grid;gap: 24px;}
@media (min-width: 768px) {.case-tiles { grid-template-columns: repeat(2, 1fr); }}
.case-tile {border-radius: 12px;overflow: hidden;box-shadow: 0 6px 18px rgba(0,0,0,.2);background: var(--paper, #fff);display: flex;flex-direction: column;}
.case-tile img {width: 100%;height: clamp(220px, 34vw, 320px);object-fit: cover;}.case-body {padding: 16px;}
.case-body h3 {margin: 0 0 6px;font-size: 1.2rem;}.case-body p.meta {margin: 0 0 12px;color: #666;font-size: .95rem;}
/* iPad 2/WebKit paint fix: force first slide visible when wrapped */
.slide-layer .mySlides:first-child { display: block !important;}
/* global image sizing — add the missing % */
img { max-width: 100%; height: auto; }
/* Desktop/laptop: reduce hero height so less vertical crop */
@media (min-width: 992px) {
  .hero {
    /* was ~80vh; this shows more of the photo on wide screens */
    height: clamp(420px, 56vh, 760px);}
  /* Focus point (center a bit higher so faces/subjects show more) */
  .hero .mySlides img {object-fit: cover;object-position: 50% 38%;}} /* tweak 30–45% to taste */
/* Ultra-wide viewports: lock hero to 16:9 so it doesn’t feel stretched */
@media (min-aspect-ratio: 16/9) and (min-width: 1100px) {.hero {height: calc(100vw * 9 / 16);}} /* exact 16:9 frame */
/* Per-image focal point (desktop + mobile) */
.hero .mySlides img {object-fit: cover;object-position: var(--focus, 50% 38%);} /* default if not set inline */
/* --- Promo blocks --- */
.promo { border-radius:14px; padding:20px; background:#fff; box-shadow:0 8px 24px rgba(0,0,0,.07); }
.promo h2 { margin:6px 0 10px; font-size:1.6rem; }
.promo .sub { color:#444; margin:0 0 14px; }
.promo .badge { display:inline-block; font-weight:700; font-size:.85rem; letter-spacing:.02em;
  background:#e8ecff; color:#2f3fb5; padding:6px 10px; border-radius:999px; margin-bottom:8px; }
.promo ul { margin:10px 0 0 20px; }
.promo .price { font-size:1.55rem; font-weight:800; margin:12px 0; }
.promo .cta { display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
.promo .muted { color:#666; font-size:.92rem; margin-top:10px; }
@media (min-width:900px){ .promo-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; } }
/* Only affects index EN + AF (with swd-ribbonbar class) */
.swd-bar.swd-grey.swd-ribbonbar {display: flex;align-items: center;justify-content: space-between;flex-wrap: nowrap;}
.swd-ribbonbar .swd-center {flex: 1;text-align: center;white-space: nowrap;} /* keep the promo text inline */
.swd-ribbonbar .brand,.swd-ribbonbar .swd-right {flex-shrink: 0;}
/* Mobile: stack gracefully */
@media (max-width: 600px) {.swd-ribbonbar {flex-direction: column;gap: 6px;  }
  .swd-ribbonbar .swd-center {order: -1;white-space: normal;}}
/* Demo bar layout + language pill */
.demo-wrap{display:flex;align-items:center;gap:12px}.demo-wrap .demo-spacer{flex:1}.demo-lang{
  margin:0 8px; padding:4px 10px; border-radius:999px;border:1px solid #ddd; text-decoration:none; font-weight:600;}
@media (max-width:600px){.demo-wrap{flex-wrap:wrap; gap:8px}.demo-lang{order:3}}