.elementor-794 .elementor-element.elementor-element-a73fe8f{--display:flex;--min-height:600px;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--overlay-opacity:0.7;}.elementor-794 .elementor-element.elementor-element-a73fe8f:not(.elementor-motion-effects-element-type-background), .elementor-794 .elementor-element.elementor-element-a73fe8f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://www.ezilux.com.au/wp-content/uploads/2025/06/29b0f7cf94e1fed4887e7179cac5f0ea.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-794 .elementor-element.elementor-element-a73fe8f::before, .elementor-794 .elementor-element.elementor-element-a73fe8f > .elementor-background-video-container::before, .elementor-794 .elementor-element.elementor-element-a73fe8f > .e-con-inner > .elementor-background-video-container::before, .elementor-794 .elementor-element.elementor-element-a73fe8f > .elementor-background-slideshow::before, .elementor-794 .elementor-element.elementor-element-a73fe8f > .e-con-inner > .elementor-background-slideshow::before, .elementor-794 .elementor-element.elementor-element-a73fe8f > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#00000087;--background-overlay:'';}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-794 .elementor-element.elementor-element-50d947c{width:var( --container-widget-width, 25% );max-width:25%;--container-widget-width:25%;--container-widget-flex-grow:0;text-align:center;}.elementor-794 .elementor-element.elementor-element-50d947c.elementor-element{--align-self:center;}.elementor-794 .elementor-element.elementor-element-50d947c > .elementor-widget-container{border-style:solid;border-width:0px 2px 0px 2px;border-color:var( --e-global-color-4202fae );}.elementor-794 .elementor-element.elementor-element-50d947c .elementor-heading-title{font-family:"Open Sans", Sans-serif;font-size:20px;font-weight:700;text-shadow:-2px 0px 43px #000000;color:var( --e-global-color-4202fae );}.elementor-794 .elementor-element.elementor-element-819e897{width:var( --container-widget-width, 67% );max-width:67%;--container-widget-width:67%;--container-widget-flex-grow:0;text-align:center;}.elementor-794 .elementor-element.elementor-element-819e897 .elementor-heading-title{font-family:"Open Sans", Sans-serif;font-size:40px;font-weight:700;color:var( --e-global-color-accent );}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-794 .elementor-element.elementor-element-eb1dfb4 .elementor-button{background-color:#C4717100;font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );border-style:solid;border-width:1px 1px 1px 1px;}.elementor-794 .elementor-element.elementor-element-eb1dfb4 .elementor-button:hover, .elementor-794 .elementor-element.elementor-element-eb1dfb4 .elementor-button:focus{background-color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-794 .elementor-element.elementor-element-eb1dfb4 > .elementor-widget-container{padding:20px 0px 0px 0px;}.elementor-794 .elementor-element.elementor-element-e502f78{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:flex-start;--margin-top:70px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-794 .elementor-element.elementor-element-e502f78.e-con{--align-self:center;}.elementor-794 .elementor-element.elementor-element-ecce477{width:var( --container-widget-width, 40% );max-width:40%;--container-widget-width:40%;--container-widget-flex-grow:0;text-align:left;}.elementor-794 .elementor-element.elementor-element-ecce477 .elementor-heading-title{font-family:"Open Sans", Sans-serif;font-size:35px;font-weight:700;color:var( --e-global-color-text );}.elementor-widget-divider{--divider-color:var( --e-global-color-secondary );}.elementor-widget-divider .elementor-divider__text{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-divider.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon{color:var( --e-global-color-secondary );border-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-secondary );}.elementor-794 .elementor-element.elementor-element-91adefb{--divider-border-style:solid;--divider-color:var( --e-global-color-primary );--divider-border-width:2px;}.elementor-794 .elementor-element.elementor-element-91adefb .elementor-divider-separator{width:20%;margin:0 auto;margin-left:0;}.elementor-794 .elementor-element.elementor-element-91adefb .elementor-divider{text-align:left;padding-block-start:15px;padding-block-end:15px;}.elementor-794 .elementor-element.elementor-element-0b9cd1b{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;}.elementor-794 .elementor-element.elementor-element-cba25c0{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;}.elementor-794 .elementor-element.elementor-element-bb728bf{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;}.elementor-794 .elementor-element.elementor-element-5e53279{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:flex-start;--margin-top:70px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-794 .elementor-element.elementor-element-5e53279.e-con{--align-self:center;}.elementor-794 .elementor-element.elementor-element-0e1720c{width:var( --container-widget-width, 40% );max-width:40%;--container-widget-width:40%;--container-widget-flex-grow:0;text-align:left;}.elementor-794 .elementor-element.elementor-element-0e1720c .elementor-heading-title{font-family:"Open Sans", Sans-serif;font-size:35px;font-weight:700;color:var( --e-global-color-text );}.elementor-794 .elementor-element.elementor-element-609e806{--divider-border-style:solid;--divider-color:var( --e-global-color-primary );--divider-border-width:2px;}.elementor-794 .elementor-element.elementor-element-609e806 .elementor-divider-separator{width:20%;margin:0 auto;margin-left:0;}.elementor-794 .elementor-element.elementor-element-609e806 .elementor-divider{text-align:left;padding-block-start:15px;padding-block-end:15px;}.elementor-794 .elementor-element.elementor-element-5ce41e6{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--margin-top:0px;--margin-bottom:150px;--margin-left:0px;--margin-right:0px;}.elementor-794 .elementor-element.elementor-element-494a552{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;}.elementor-794 .elementor-element.elementor-element-8db9134{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;}@media(min-width:768px){.elementor-794 .elementor-element.elementor-element-e502f78{--content-width:1260px;}.elementor-794 .elementor-element.elementor-element-0b9cd1b{--content-width:1260px;}.elementor-794 .elementor-element.elementor-element-cba25c0{--content-width:1260px;}.elementor-794 .elementor-element.elementor-element-bb728bf{--content-width:1260px;}.elementor-794 .elementor-element.elementor-element-5e53279{--content-width:1260px;}.elementor-794 .elementor-element.elementor-element-5ce41e6{--content-width:1260px;}.elementor-794 .elementor-element.elementor-element-494a552{--content-width:1260px;}.elementor-794 .elementor-element.elementor-element-8db9134{--content-width:1260px;}}@media(max-width:1024px){.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );}.elementor-794 .elementor-element.elementor-element-50d947c{--container-widget-width:295px;--container-widget-flex-grow:0;width:var( --container-widget-width, 295px );max-width:295px;}.elementor-794 .elementor-element.elementor-element-eb1dfb4 .elementor-button{font-size:var( --e-global-typography-text-font-size );}.elementor-794 .elementor-element.elementor-element-e502f78{--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-794 .elementor-element.elementor-element-ecce477{text-align:center;}.elementor-794 .elementor-element.elementor-element-ecce477 .elementor-heading-title{font-size:33px;}.elementor-widget-divider .elementor-divider__text{font-size:var( --e-global-typography-secondary-font-size );}.elementor-794 .elementor-element.elementor-element-91adefb .elementor-divider{text-align:center;}.elementor-794 .elementor-element.elementor-element-91adefb .elementor-divider-separator{margin:0 auto;margin-center:0;}.elementor-794 .elementor-element.elementor-element-5e53279{--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-794 .elementor-element.elementor-element-0e1720c{text-align:center;}.elementor-794 .elementor-element.elementor-element-0e1720c .elementor-heading-title{font-size:33px;}.elementor-794 .elementor-element.elementor-element-609e806 .elementor-divider{text-align:center;}.elementor-794 .elementor-element.elementor-element-609e806 .elementor-divider-separator{margin:0 auto;margin-center:0;}.elementor-794 .elementor-element.elementor-element-8db9134{--margin-top:0px;--margin-bottom:50px;--margin-left:0px;--margin-right:0px;}}@media(max-width:767px){.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );}.elementor-794 .elementor-element.elementor-element-50d947c{--container-widget-width:320px;--container-widget-flex-grow:0;width:var( --container-widget-width, 320px );max-width:320px;}.elementor-794 .elementor-element.elementor-element-50d947c .elementor-heading-title{font-size:20px;}.elementor-794 .elementor-element.elementor-element-819e897 .elementor-heading-title{font-size:30px;}.elementor-794 .elementor-element.elementor-element-eb1dfb4 .elementor-button{font-size:var( --e-global-typography-text-font-size );}.elementor-794 .elementor-element.elementor-element-ecce477{--container-widget-width:436px;--container-widget-flex-grow:0;width:var( --container-widget-width, 436px );max-width:436px;text-align:center;}.elementor-794 .elementor-element.elementor-element-ecce477 .elementor-heading-title{font-size:25px;}.elementor-widget-divider .elementor-divider__text{font-size:var( --e-global-typography-secondary-font-size );}.elementor-794 .elementor-element.elementor-element-91adefb .elementor-divider{text-align:center;}.elementor-794 .elementor-element.elementor-element-91adefb .elementor-divider-separator{margin:0 auto;margin-center:0;}.elementor-794 .elementor-element.elementor-element-0e1720c{--container-widget-width:1000px;--container-widget-flex-grow:0;width:var( --container-widget-width, 1000px );max-width:1000px;text-align:center;}.elementor-794 .elementor-element.elementor-element-0e1720c .elementor-heading-title{font-size:25px;}.elementor-794 .elementor-element.elementor-element-609e806 .elementor-divider{text-align:center;}.elementor-794 .elementor-element.elementor-element-609e806 .elementor-divider-separator{margin:0 auto;margin-center:0;}}/* Start custom CSS for html, class: .elementor-element-2f35bf1 *//* 1) No body bg-color any more */
html, body {
  font-family: 'Open Sans', sans-serif;
  padding: 0;
  margin: 0;
}

/* 2) Wrapper snaps to the image size */
.wrapper {
  display: inline-block;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  transform: scale(0.95);
  transition: transform 0.5s, box-shadow 0.5s;
}
.wrapper:hover {
  transform: scale(1);
  box-shadow: 5px 20px 30px rgba(0, 0, 0, 0.2);
}

/* Top just holds the img */
.top img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Bottom bar with centered 25px title */
.bottom {
  background: #f4f4f4;
  text-align: center;
}
.bottom .details h1 {
  margin: 0;
  padding: 10px 0;
  font-size: 25px;
  color: black;
}

.inside {
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  height: 100px;
  background: #C1AA80;
  border-radius: 0 0 0 250px;
  overflow: hidden;
  transition: all 0.5s, border-radius 2s;
  text-align: center;
  z-index: 2;
}


/* 5) New icon */
.inside .icon {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 24px;
  color: white;
  opacity: 1;
  transition: opacity 0.5s;
}

/* Hover: expand to full width, move to top */
.inside:hover {
  top: 0;
  bottom: auto;
  right: 0;
  width: 100%;
  height: 80%;
  border-radius: 0;
}
.inside:hover .icon {
  opacity: 0;
}

/* Contents panel */
.inside .contents {
  padding: 5%;
  opacity: 0;
  transform: translateY(-200%) scale(0.5);
  transition: opacity 0.2s, transform 0.8s;
}
.inside:hover .contents {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.inside .contents table {
  width: 100%;
  text-align: center;
  color: white;
  border-collapse: collapse;
}
.inside .contents th,
.inside .contents td {
  padding: 4px 0;
}
/* Anchor the inside panel to top right now */
.inside {
  position: absolute;
  top: 0;
  right: 0;
  width: 70px;
  height: 70px;
  background: #C1AA80;
  border-radius: 0 0 0 100px;
  overflow: hidden;
  transition: all 0.5s, border-radius 2s;
  text-align: center;
  z-index: 2;
}



/* Keep icon visible initially in top-right */
.inside .icon {
  position: absolute;
  top: 8px;
  right: 15px;
  font-size: 24px;
  color: white;
  opacity: 1;
  transition: opacity 0.5s;
}

/* On hover, expand top-right to full panel */
.inside:hover {
  top: 0;
  right: 0;
  width: 100%;
  height: 80%;
  border-radius: 0;
}

.inside .contents {
  display: flex;
  justify-content: center;   /* horizontal center */
  align-items: center;       /* vertical center */
  text-align: center;
  padding: 10px;
  color: white;
  font-size: 15px;
  line-height: 1.4;
  height: 100%;              /* needed for vertical centering */
  width: 100%;
  opacity: 0;
  transform: translateY(-200%) scale(0.5);
  transition: opacity 0.2s, transform 0.8s;
}

.inside:hover .contents {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.wrapper {
  cursor: pointer;
  position: relative;
  z-index: 1;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-6fbed11 *//* 1) No body bg-color any more */
html, body {
  font-family: 'Open Sans', sans-serif;
  padding: 0;
  margin: 0;
}

/* 2) Wrapper snaps to the image size */
.wrapper {
  display: inline-block;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  transform: scale(0.95);
  transition: transform 0.5s, box-shadow 0.5s;
}
.wrapper:hover {
  transform: scale(1);
  box-shadow: 5px 20px 30px rgba(0, 0, 0, 0.2);
}

/* Top just holds the img */
.top img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Bottom bar with centered 25px title */
.bottom {
  background: #f4f4f4;
  text-align: center;
}
.bottom .details h1 {
  margin: 0;
  padding: 10px 0;
  font-size: 25px;
  color: black;
}

.inside {
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  height: 100px;
  background: #C1AA80;
  border-radius: 0 0 0 250px;
  overflow: hidden;
  transition: all 0.5s, border-radius 2s;
  text-align: center;
  z-index: 2;
}


/* 5) New icon */
.inside .icon {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 24px;
  color: white;
  opacity: 1;
  transition: opacity 0.5s;
}

/* Hover: expand to full width, move to top */
.inside:hover {
  top: 0;
  bottom: auto;
  right: 0;
  width: 100%;
  height: 80%;
  border-radius: 0;
}
.inside:hover .icon {
  opacity: 0;
}

/* Contents panel */
.inside .contents {
  padding: 5%;
  opacity: 0;
  transform: translateY(-200%) scale(0.5);
  transition: opacity 0.2s, transform 0.8s;
}
.inside:hover .contents {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.inside .contents table {
  width: 100%;
  text-align: center;
  color: white;
  border-collapse: collapse;
}
.inside .contents th,
.inside .contents td {
  padding: 4px 0;
}
/* Anchor the inside panel to top right now */
.inside {
  position: absolute;
  top: 0;
  right: 0;
  width: 70px;
  height: 70px;
  background: #C1AA80;
  border-radius: 0 0 0 100px;
  overflow: hidden;
  transition: all 0.5s, border-radius 2s;
  text-align: center;
  z-index: 2;
}



/* Keep icon visible initially in top-right */
.inside .icon {
  position: absolute;
  top: 8px;
  right: 15px;
  font-size: 24px;
  color: white;
  opacity: 1;
  transition: opacity 0.5s;
}

/* On hover, expand top-right to full panel */
.inside:hover {
  top: 0;
  right: 0;
  width: 100%;
  height: 80%;
  border-radius: 0;
}

.inside .contents {
  display: flex;
  justify-content: center;   /* horizontal center */
  align-items: center;       /* vertical center */
  text-align: center;
  padding: 10px;
  color: white;
  font-size: 15px;
  line-height: 1.4;
  height: 100%;              /* needed for vertical centering */
  width: 100%;
  opacity: 0;
  transform: translateY(-200%) scale(0.5);
  transition: opacity 0.2s, transform 0.8s;
}

.inside:hover .contents {
  opacity: 1;
  transform: translateY(0) scale(1);
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-8efe946 *//* 1) No body bg-color any more */
html, body {
  font-family: 'Open Sans', sans-serif;
  padding: 0;
  margin: 0;
}

/* 2) Wrapper snaps to the image size */
.wrapper {
  display: inline-block;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  transform: scale(0.95);
  transition: transform 0.5s, box-shadow 0.5s;
}
.wrapper:hover {
  transform: scale(1);
  box-shadow: 5px 20px 30px rgba(0, 0, 0, 0.2);
}

/* Top just holds the img */
.top img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Bottom bar with centered 25px title */
.bottom {
  background: #f4f4f4;
  text-align: center;
}
.bottom .details h1 {
  margin: 0;
  padding: 10px 0;
  font-size: 25px;
  color: black;
}

.inside {
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  height: 100px;
  background: #C1AA80;
  border-radius: 0 0 0 250px;
  overflow: hidden;
  transition: all 0.5s, border-radius 2s;
  text-align: center;
  z-index: 2;
}


/* 5) New icon */
.inside .icon {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 24px;
  color: white;
  opacity: 1;
  transition: opacity 0.5s;
}

/* Hover: expand to full width, move to top */
.inside:hover {
  top: 0;
  bottom: auto;
  right: 0;
  width: 100%;
  height: 80%;
  border-radius: 0;
}
.inside:hover .icon {
  opacity: 0;
}

/* Contents panel */
.inside .contents {
  padding: 5%;
  opacity: 0;
  transform: translateY(-200%) scale(0.5);
  transition: opacity 0.2s, transform 0.8s;
}
.inside:hover .contents {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.inside .contents table {
  width: 100%;
  text-align: center;
  color: white;
  border-collapse: collapse;
}
.inside .contents th,
.inside .contents td {
  padding: 4px 0;
}
/* Anchor the inside panel to top right now */
.inside {
  position: absolute;
  top: 0;
  right: 0;
  width: 70px;
  height: 70px;
  background: #C1AA80;
  border-radius: 0 0 0 100px;
  overflow: hidden;
  transition: all 0.5s, border-radius 2s;
  text-align: center;
  z-index: 2;
}



/* Keep icon visible initially in top-right */
.inside .icon {
  position: absolute;
  top: 8px;
  right: 15px;
  font-size: 24px;
  color: white;
  opacity: 1;
  transition: opacity 0.5s;
}

/* On hover, expand top-right to full panel */
.inside:hover {
  top: 0;
  right: 0;
  width: 100%;
  height: 80%;
  border-radius: 0;
}

.inside .contents {
  display: flex;
  justify-content: center;   /* horizontal center */
  align-items: center;       /* vertical center */
  text-align: center;
  padding: 10px;
  color: white;
  font-size: 15px;
  line-height: 1.4;
  height: 100%;              /* needed for vertical centering */
  width: 100%;
  opacity: 0;
  transform: translateY(-200%) scale(0.5);
  transition: opacity 0.2s, transform 0.8s;
}

.inside:hover .contents {
  opacity: 1;
  transform: translateY(0) scale(1);
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-cf2d562 *//* 1) No body bg-color any more */
html, body {
  font-family: 'Open Sans', sans-serif;
  padding: 0;
  margin: 0;
}

/* 2) Wrapper snaps to the image size */
.wrapper {
  display: inline-block;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  transform: scale(0.95);
  transition: transform 0.5s, box-shadow 0.5s;
}
.wrapper:hover {
  transform: scale(1);
  box-shadow: 5px 20px 30px rgba(0, 0, 0, 0.2);
}

/* Top just holds the img */
.top img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Bottom bar with centered 25px title */
.bottom {
  background: #f4f4f4;
  text-align: center;
}
.bottom .details h1 {
  margin: 0;
  padding: 10px 0;
  font-size: 25px;
  color: black;
}

.inside {
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  height: 100px;
  background: #C1AA80;
  border-radius: 0 0 0 250px;
  overflow: hidden;
  transition: all 0.5s, border-radius 2s;
  text-align: center;
  z-index: 2;
}


/* 5) New icon */
.inside .icon {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 24px;
  color: white;
  opacity: 1;
  transition: opacity 0.5s;
}

/* Hover: expand to full width, move to top */
.inside:hover {
  top: 0;
  bottom: auto;
  right: 0;
  width: 100%;
  height: 80%;
  border-radius: 0;
}
.inside:hover .icon {
  opacity: 0;
}

/* Contents panel */
.inside .contents {
  padding: 5%;
  opacity: 0;
  transform: translateY(-200%) scale(0.5);
  transition: opacity 0.2s, transform 0.8s;
}
.inside:hover .contents {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.inside .contents table {
  width: 100%;
  text-align: center;
  color: white;
  border-collapse: collapse;
}
.inside .contents th,
.inside .contents td {
  padding: 4px 0;
}
/* Anchor the inside panel to top right now */
.inside {
  position: absolute;
  top: 0;
  right: 0;
  width: 70px;
  height: 70px;
  background: #C1AA80;
  border-radius: 0 0 0 100px;
  overflow: hidden;
  transition: all 0.5s, border-radius 2s;
  text-align: center;
  z-index: 2;
}



/* Keep icon visible initially in top-right */
.inside .icon {
  position: absolute;
  top: 8px;
  right: 15px;
  font-size: 24px;
  color: white;
  opacity: 1;
  transition: opacity 0.5s;
}

/* On hover, expand top-right to full panel */
.inside:hover {
  top: 0;
  right: 0;
  width: 100%;
  height: 80%;
  border-radius: 0;
}

.inside .contents {
  display: flex;
  justify-content: center;   /* horizontal center */
  align-items: center;       /* vertical center */
  text-align: center;
  padding: 10px;
  color: white;
  font-size: 15px;
  line-height: 1.4;
  height: 100%;              /* needed for vertical centering */
  width: 100%;
  opacity: 0;
  transform: translateY(-200%) scale(0.5);
  transition: opacity 0.2s, transform 0.8s;
}

.inside:hover .contents {
  opacity: 1;
  transform: translateY(0) scale(1);
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-6802e76 *//* 1) No body bg-color any more */
html, body {
  font-family: 'Open Sans', sans-serif;
  padding: 0;
  margin: 0;
}

/* 2) Wrapper snaps to the image size */
.wrapper {
  display: inline-block;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  transform: scale(0.95);
  transition: transform 0.5s, box-shadow 0.5s;
}
.wrapper:hover {
  transform: scale(1);
  box-shadow: 5px 20px 30px rgba(0, 0, 0, 0.2);
}

/* Top just holds the img */
.top img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Bottom bar with centered 25px title */
.bottom {
  background: #f4f4f4;
  text-align: center;
}
.bottom .details h1 {
  margin: 0;
  padding: 10px 0;
  font-size: 25px;
  color: black;
}

.inside {
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  height: 100px;
  background: #C1AA80;
  border-radius: 0 0 0 250px;
  overflow: hidden;
  transition: all 0.5s, border-radius 2s;
  text-align: center;
  z-index: 2;
}


/* 5) New icon */
.inside .icon {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 24px;
  color: white;
  opacity: 1;
  transition: opacity 0.5s;
}

/* Hover: expand to full width, move to top */
.inside:hover {
  top: 0;
  bottom: auto;
  right: 0;
  width: 100%;
  height: 80%;
  border-radius: 0;
}
.inside:hover .icon {
  opacity: 0;
}

/* Contents panel */
.inside .contents {
  padding: 5%;
  opacity: 0;
  transform: translateY(-200%) scale(0.5);
  transition: opacity 0.2s, transform 0.8s;
}
.inside:hover .contents {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.inside .contents table {
  width: 100%;
  text-align: center;
  color: white;
  border-collapse: collapse;
}
.inside .contents th,
.inside .contents td {
  padding: 4px 0;
}
/* Anchor the inside panel to top right now */
.inside {
  position: absolute;
  top: 0;
  right: 0;
  width: 70px;
  height: 70px;
  background: #C1AA80;
  border-radius: 0 0 0 100px;
  overflow: hidden;
  transition: all 0.5s, border-radius 2s;
  text-align: center;
  z-index: 2;
}



/* Keep icon visible initially in top-right */
.inside .icon {
  position: absolute;
  top: 8px;
  right: 15px;
  font-size: 24px;
  color: white;
  opacity: 1;
  transition: opacity 0.5s;
}

/* On hover, expand top-right to full panel */
.inside:hover {
  top: 0;
  right: 0;
  width: 100%;
  height: 80%;
  border-radius: 0;
}

.inside .contents {
  display: flex;
  justify-content: center;   /* horizontal center */
  align-items: center;       /* vertical center */
  text-align: center;
  padding: 10px;
  color: white;
  font-size: 15px;
  line-height: 1.4;
  height: 100%;              /* needed for vertical centering */
  width: 100%;
  opacity: 0;
  transform: translateY(-200%) scale(0.5);
  transition: opacity 0.2s, transform 0.8s;
}

.inside:hover .contents {
  opacity: 1;
  transform: translateY(0) scale(1);
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-8da14b6 *//* 1) No body bg-color any more */
html, body {
  font-family: 'Open Sans', sans-serif;
  padding: 0;
  margin: 0;
}

/* 2) Wrapper snaps to the image size */
.wrapper {
  display: inline-block;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  transform: scale(0.95);
  transition: transform 0.5s, box-shadow 0.5s;
}
.wrapper:hover {
  transform: scale(1);
  box-shadow: 5px 20px 30px rgba(0, 0, 0, 0.2);
}

/* Top just holds the img */
.top img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Bottom bar with centered 25px title */
.bottom {
  background: #f4f4f4;
  text-align: center;
}
.bottom .details h1 {
  margin: 0;
  padding: 10px 0;
  font-size: 25px;
  color: black;
}

.inside {
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  height: 100px;
  background: #C1AA80;
  border-radius: 0 0 0 250px;
  overflow: hidden;
  transition: all 0.5s, border-radius 2s;
  text-align: center;
  z-index: 2;
}


/* 5) New icon */
.inside .icon {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 24px;
  color: white;
  opacity: 1;
  transition: opacity 0.5s;
}

/* Hover: expand to full width, move to top */
.inside:hover {
  top: 0;
  bottom: auto;
  right: 0;
  width: 100%;
  height: 80%;
  border-radius: 0;
}
.inside:hover .icon {
  opacity: 0;
}

/* Contents panel */
.inside .contents {
  padding: 5%;
  opacity: 0;
  transform: translateY(-200%) scale(0.5);
  transition: opacity 0.2s, transform 0.8s;
}
.inside:hover .contents {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.inside .contents table {
  width: 100%;
  text-align: center;
  color: white;
  border-collapse: collapse;
}
.inside .contents th,
.inside .contents td {
  padding: 4px 0;
}
/* Anchor the inside panel to top right now */
.inside {
  position: absolute;
  top: 0;
  right: 0;
  width: 70px;
  height: 70px;
  background: #C1AA80;
  border-radius: 0 0 0 100px;
  overflow: hidden;
  transition: all 0.5s, border-radius 2s;
  text-align: center;
  z-index: 2;
}



/* Keep icon visible initially in top-right */
.inside .icon {
  position: absolute;
  top: 8px;
  right: 15px;
  font-size: 24px;
  color: white;
  opacity: 1;
  transition: opacity 0.5s;
}

/* On hover, expand top-right to full panel */
.inside:hover {
  top: 0;
  right: 0;
  width: 100%;
  height: 80%;
  border-radius: 0;
}

.inside .contents {
  display: flex;
  justify-content: center;   /* horizontal center */
  align-items: center;       /* vertical center */
  text-align: center;
  padding: 10px;
  color: white;
  font-size: 15px;
  line-height: 1.4;
  height: 100%;              /* needed for vertical centering */
  width: 100%;
  opacity: 0;
  transform: translateY(-200%) scale(0.5);
  transition: opacity 0.2s, transform 0.8s;
}

.inside:hover .contents {
  opacity: 1;
  transform: translateY(0) scale(1);
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-cf57307 *//* 1) No body bg-color any more */
html, body {
  font-family: 'Open Sans', sans-serif;
  padding: 0;
  margin: 0;
}

/* 2) Wrapper snaps to the image size */
.wrapper {
  display: inline-block;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  transform: scale(0.95);
  transition: transform 0.5s, box-shadow 0.5s;
}
.wrapper:hover {
  transform: scale(1);
  box-shadow: 5px 20px 30px rgba(0, 0, 0, 0.2);
}

/* Top just holds the img */
.top img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Bottom bar with centered 25px title */
.bottom {
  background: #f4f4f4;
  text-align: center;
}
.bottom .details h1 {
  margin: 0;
  padding: 10px 0;
  font-size: 25px;
  color: black;
}

.inside {
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  height: 100px;
  background: #C1AA80;
  border-radius: 0 0 0 250px;
  overflow: hidden;
  transition: all 0.5s, border-radius 2s;
  text-align: center;
  z-index: 2;
}


/* 5) New icon */
.inside .icon {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 24px;
  color: white;
  opacity: 1;
  transition: opacity 0.5s;
}

/* Hover: expand to full width, move to top */
.inside:hover {
  top: 0;
  bottom: auto;
  right: 0;
  width: 100%;
  height: 80%;
  border-radius: 0;
}
.inside:hover .icon {
  opacity: 0;
}

/* Contents panel */
.inside .contents {
  padding: 5%;
  opacity: 0;
  transform: translateY(-200%) scale(0.5);
  transition: opacity 0.2s, transform 0.8s;
}
.inside:hover .contents {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.inside .contents table {
  width: 100%;
  text-align: center;
  color: white;
  border-collapse: collapse;
}
.inside .contents th,
.inside .contents td {
  padding: 4px 0;
}
/* Anchor the inside panel to top right now */
.inside {
  position: absolute;
  top: 0;
  right: 0;
  width: 70px;
  height: 70px;
  background: #C1AA80;
  border-radius: 0 0 0 100px;
  overflow: hidden;
  transition: all 0.5s, border-radius 2s;
  text-align: center;
  z-index: 2;
}



/* Keep icon visible initially in top-right */
.inside .icon {
  position: absolute;
  top: 8px;
  right: 15px;
  font-size: 24px;
  color: white;
  opacity: 1;
  transition: opacity 0.5s;
}

/* On hover, expand top-right to full panel */
.inside:hover {
  top: 0;
  right: 0;
  width: 100%;
  height: 80%;
  border-radius: 0;
}

.inside .contents {
  display: flex;
  justify-content: center;   /* horizontal center */
  align-items: center;       /* vertical center */
  text-align: center;
  padding: 10px;
  color: white;
  font-size: 15px;
  line-height: 1.4;
  height: 100%;              /* needed for vertical centering */
  width: 100%;
  opacity: 0;
  transform: translateY(-200%) scale(0.5);
  transition: opacity 0.2s, transform 0.8s;
}

.inside:hover .contents {
  opacity: 1;
  transform: translateY(0) scale(1);
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-9fbe1de *//* 1) No body bg-color any more */
html, body {
  font-family: 'Open Sans', sans-serif;
  padding: 0;
  margin: 0;
}

/* 2) Wrapper snaps to the image size */
.wrapper {
  display: inline-block;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  transform: scale(0.95);
  transition: transform 0.5s, box-shadow 0.5s;
}
.wrapper:hover {
  transform: scale(1);
  box-shadow: 5px 20px 30px rgba(0, 0, 0, 0.2);
}

/* Top just holds the img */
.top img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Bottom bar with centered 25px title */
.bottom {
  background: #f4f4f4;
  text-align: center;
}
.bottom .details h1 {
  margin: 0;
  padding: 10px 0;
  font-size: 25px;
  color: black;
}

.inside {
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  height: 100px;
  background: #C1AA80;
  border-radius: 0 0 0 250px;
  overflow: hidden;
  transition: all 0.5s, border-radius 2s;
  text-align: center;
  z-index: 2;
}


/* 5) New icon */
.inside .icon {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 24px;
  color: white;
  opacity: 1;
  transition: opacity 0.5s;
}

/* Hover: expand to full width, move to top */
.inside:hover {
  top: 0;
  bottom: auto;
  right: 0;
  width: 100%;
  height: 80%;
  border-radius: 0;
}
.inside:hover .icon {
  opacity: 0;
}

/* Contents panel */
.inside .contents {
  padding: 5%;
  opacity: 0;
  transform: translateY(-200%) scale(0.5);
  transition: opacity 0.2s, transform 0.8s;
}
.inside:hover .contents {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.inside .contents table {
  width: 100%;
  text-align: center;
  color: white;
  border-collapse: collapse;
}
.inside .contents th,
.inside .contents td {
  padding: 4px 0;
}
/* Anchor the inside panel to top right now */
.inside {
  position: absolute;
  top: 0;
  right: 0;
  width: 70px;
  height: 70px;
  background: #C1AA80;
  border-radius: 0 0 0 100px;
  overflow: hidden;
  transition: all 0.5s, border-radius 2s;
  text-align: center;
  z-index: 2;
}



/* Keep icon visible initially in top-right */
.inside .icon {
  position: absolute;
  top: 8px;
  right: 15px;
  font-size: 24px;
  color: white;
  opacity: 1;
  transition: opacity 0.5s;
}

/* On hover, expand top-right to full panel */
.inside:hover {
  top: 0;
  right: 0;
  width: 100%;
  height: 80%;
  border-radius: 0;
}

.inside .contents {
  display: flex;
  justify-content: center;   /* horizontal center */
  align-items: center;       /* vertical center */
  text-align: center;
  padding: 10px;
  color: white;
  font-size: 15px;
  line-height: 1.4;
  height: 100%;              /* needed for vertical centering */
  width: 100%;
  opacity: 0;
  transform: translateY(-200%) scale(0.5);
  transition: opacity 0.2s, transform 0.8s;
}

.inside:hover .contents {
  opacity: 1;
  transform: translateY(0) scale(1);
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-b83d8b7 *//* 1) No body bg-color any more */
html, body {
  font-family: 'Open Sans', sans-serif;
  padding: 0;
  margin: 0;
}

/* 2) Wrapper snaps to the image size */
.wrapper {
  display: inline-block;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  transform: scale(0.95);
  transition: transform 0.5s, box-shadow 0.5s;
}
.wrapper:hover {
  transform: scale(1);
  box-shadow: 5px 20px 30px rgba(0, 0, 0, 0.2);
}

/* Top just holds the img */
.top img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Bottom bar with centered 25px title */
.bottom {
  background: #f4f4f4;
  text-align: center;
}
.bottom .details h1 {
  margin: 0;
  padding: 10px 0;
  font-size: 25px;
  color: black;
}

.inside {
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  height: 100px;
  background: #C1AA80;
  border-radius: 0 0 0 250px;
  overflow: hidden;
  transition: all 0.5s, border-radius 2s;
  text-align: center;
  z-index: 2;
}


/* 5) New icon */
.inside .icon {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 24px;
  color: white;
  opacity: 1;
  transition: opacity 0.5s;
}

/* Hover: expand to full width, move to top */
.inside:hover {
  top: 0;
  bottom: auto;
  right: 0;
  width: 100%;
  height: 80%;
  border-radius: 0;
}
.inside:hover .icon {
  opacity: 0;
}

/* Contents panel */
.inside .contents {
  padding: 5%;
  opacity: 0;
  transform: translateY(-200%) scale(0.5);
  transition: opacity 0.2s, transform 0.8s;
}
.inside:hover .contents {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.inside .contents table {
  width: 100%;
  text-align: center;
  color: white;
  border-collapse: collapse;
}
.inside .contents th,
.inside .contents td {
  padding: 4px 0;
}
/* Anchor the inside panel to top right now */
.inside {
  position: absolute;
  top: 0;
  right: 0;
  width: 70px;
  height: 70px;
  background: #C1AA80;
  border-radius: 0 0 0 100px;
  overflow: hidden;
  transition: all 0.5s, border-radius 2s;
  text-align: center;
  z-index: 2;
}



/* Keep icon visible initially in top-right */
.inside .icon {
  position: absolute;
  top: 8px;
  right: 15px;
  font-size: 24px;
  color: white;
  opacity: 1;
  transition: opacity 0.5s;
}

/* On hover, expand top-right to full panel */
.inside:hover {
  top: 0;
  right: 0;
  width: 100%;
  height: 80%;
  border-radius: 0;
}

.inside .contents {
  display: flex;
  justify-content: center;   /* horizontal center */
  align-items: center;       /* vertical center */
  text-align: center;
  padding: 10px;
  color: white;
  font-size: 15px;
  line-height: 1.4;
  height: 100%;              /* needed for vertical centering */
  width: 100%;
  opacity: 0;
  transform: translateY(-200%) scale(0.5);
  transition: opacity 0.2s, transform 0.8s;
}

.inside:hover .contents {
  opacity: 1;
  transform: translateY(0) scale(1);
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-721d832 *//* 1) No body bg-color any more */
html, body {
  font-family: 'Open Sans', sans-serif;
  padding: 0;
  margin: 0;
}

/* 2) Wrapper snaps to the image size */
.wrapper {
  display: inline-block;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  transform: scale(0.95);
  transition: transform 0.5s, box-shadow 0.5s;
}
.wrapper:hover {
  transform: scale(1);
  box-shadow: 5px 20px 30px rgba(0, 0, 0, 0.2);
}

/* Top just holds the img */
.top img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Bottom bar with centered 25px title */
.bottom {
  background: #f4f4f4;
  text-align: center;
}
.bottom .details h1 {
  margin: 0;
  padding: 10px 0;
  font-size: 25px;
  color: black;
}

.inside {
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  height: 100px;
  background: #C1AA80;
  border-radius: 0 0 0 250px;
  overflow: hidden;
  transition: all 0.5s, border-radius 2s;
  text-align: center;
  z-index: 2;
}


/* 5) New icon */
.inside .icon {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 24px;
  color: white;
  opacity: 1;
  transition: opacity 0.5s;
}

/* Hover: expand to full width, move to top */
.inside:hover {
  top: 0;
  bottom: auto;
  right: 0;
  width: 100%;
  height: 80%;
  border-radius: 0;
}
.inside:hover .icon {
  opacity: 0;
}

/* Contents panel */
.inside .contents {
  padding: 5%;
  opacity: 0;
  transform: translateY(-200%) scale(0.5);
  transition: opacity 0.2s, transform 0.8s;
}
.inside:hover .contents {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.inside .contents table {
  width: 100%;
  text-align: center;
  color: white;
  border-collapse: collapse;
}
.inside .contents th,
.inside .contents td {
  padding: 4px 0;
}
/* Anchor the inside panel to top right now */
.inside {
  position: absolute;
  top: 0;
  right: 0;
  width: 70px;
  height: 70px;
  background: #C1AA80;
  border-radius: 0 0 0 100px;
  overflow: hidden;
  transition: all 0.5s, border-radius 2s;
  text-align: center;
  z-index: 2;
}



/* Keep icon visible initially in top-right */
.inside .icon {
  position: absolute;
  top: 8px;
  right: 15px;
  font-size: 24px;
  color: white;
  opacity: 1;
  transition: opacity 0.5s;
}

/* On hover, expand top-right to full panel */
.inside:hover {
  top: 0;
  right: 0;
  width: 100%;
  height: 80%;
  border-radius: 0;
}

.inside .contents {
  display: flex;
  justify-content: center;   /* horizontal center */
  align-items: center;       /* vertical center */
  text-align: center;
  padding: 10px;
  color: white;
  font-size: 15px;
  line-height: 1.4;
  height: 100%;              /* needed for vertical centering */
  width: 100%;
  opacity: 0;
  transform: translateY(-200%) scale(0.5);
  transition: opacity 0.2s, transform 0.8s;
}

.inside:hover .contents {
  opacity: 1;
  transform: translateY(0) scale(1);
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-c962cc0 *//* 1) No body bg-color any more */
html, body {
  font-family: 'Open Sans', sans-serif;
  padding: 0;
  margin: 0;
}

/* 2) Wrapper snaps to the image size */
.wrapper {
  display: inline-block;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  transform: scale(0.95);
  transition: transform 0.5s, box-shadow 0.5s;
}
.wrapper:hover {
  transform: scale(1);
  box-shadow: 5px 20px 30px rgba(0, 0, 0, 0.2);
}

/* Top just holds the img */
.top img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Bottom bar with centered 25px title */
.bottom {
  background: #f4f4f4;
  text-align: center;
}
.bottom .details h1 {
  margin: 0;
  padding: 10px 0;
  font-size: 25px;
  color: black;
}

.inside {
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  height: 100px;
  background: #C1AA80;
  border-radius: 0 0 0 250px;
  overflow: hidden;
  transition: all 0.5s, border-radius 2s;
  text-align: center;
  z-index: 2;
}


/* 5) New icon */
.inside .icon {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 24px;
  color: white;
  opacity: 1;
  transition: opacity 0.5s;
}

/* Hover: expand to full width, move to top */
.inside:hover {
  top: 0;
  bottom: auto;
  right: 0;
  width: 100%;
  height: 80%;
  border-radius: 0;
}
.inside:hover .icon {
  opacity: 0;
}

/* Contents panel */
.inside .contents {
  padding: 5%;
  opacity: 0;
  transform: translateY(-200%) scale(0.5);
  transition: opacity 0.2s, transform 0.8s;
}
.inside:hover .contents {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.inside .contents table {
  width: 100%;
  text-align: center;
  color: white;
  border-collapse: collapse;
}
.inside .contents th,
.inside .contents td {
  padding: 4px 0;
}
/* Anchor the inside panel to top right now */
.inside {
  position: absolute;
  top: 0;
  right: 0;
  width: 70px;
  height: 70px;
  background: #C1AA80;
  border-radius: 0 0 0 100px;
  overflow: hidden;
  transition: all 0.5s, border-radius 2s;
  text-align: center;
  z-index: 2;
}



/* Keep icon visible initially in top-right */
.inside .icon {
  position: absolute;
  top: 8px;
  right: 15px;
  font-size: 24px;
  color: white;
  opacity: 1;
  transition: opacity 0.5s;
}

/* On hover, expand top-right to full panel */
.inside:hover {
  top: 0;
  right: 0;
  width: 100%;
  height: 80%;
  border-radius: 0;
}

.inside .contents {
  display: flex;
  justify-content: center;   /* horizontal center */
  align-items: center;       /* vertical center */
  text-align: center;
  padding: 10px;
  color: white;
  font-size: 15px;
  line-height: 1.4;
  height: 100%;              /* needed for vertical centering */
  width: 100%;
  opacity: 0;
  transform: translateY(-200%) scale(0.5);
  transition: opacity 0.2s, transform 0.8s;
}

.inside:hover .contents {
  opacity: 1;
  transform: translateY(0) scale(1);
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-617d27b *//* 1) No body bg-color any more */
html, body {
  font-family: 'Open Sans', sans-serif;
  padding: 0;
  margin: 0;
}

/* 2) Wrapper snaps to the image size */
.wrapper {
  display: inline-block;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  transform: scale(0.95);
  transition: transform 0.5s, box-shadow 0.5s;
}
.wrapper:hover {
  transform: scale(1);
  box-shadow: 5px 20px 30px rgba(0, 0, 0, 0.2);
}

/* Top just holds the img */
.top img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Bottom bar with centered 25px title */
.bottom {
  background: #f4f4f4;
  text-align: center;
}
.bottom .details h1 {
  margin: 0;
  padding: 10px 0;
  font-size: 25px;
  color: black;
}

.inside {
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  height: 100px;
  background: #C1AA80;
  border-radius: 0 0 0 250px;
  overflow: hidden;
  transition: all 0.5s, border-radius 2s;
  text-align: center;
  z-index: 2;
}


/* 5) New icon */
.inside .icon {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 24px;
  color: white;
  opacity: 1;
  transition: opacity 0.5s;
}

/* Hover: expand to full width, move to top */
.inside:hover {
  top: 0;
  bottom: auto;
  right: 0;
  width: 100%;
  height: 80%;
  border-radius: 0;
}
.inside:hover .icon {
  opacity: 0;
}

/* Contents panel */
.inside .contents {
  padding: 5%;
  opacity: 0;
  transform: translateY(-200%) scale(0.5);
  transition: opacity 0.2s, transform 0.8s;
}
.inside:hover .contents {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.inside .contents table {
  width: 100%;
  text-align: center;
  color: white;
  border-collapse: collapse;
}
.inside .contents th,
.inside .contents td {
  padding: 4px 0;
}
/* Anchor the inside panel to top right now */
.inside {
  position: absolute;
  top: 0;
  right: 0;
  width: 70px;
  height: 70px;
  background: #C1AA80;
  border-radius: 0 0 0 100px;
  overflow: hidden;
  transition: all 0.5s, border-radius 2s;
  text-align: center;
  z-index: 2;
}



/* Keep icon visible initially in top-right */
.inside .icon {
  position: absolute;
  top: 8px;
  right: 15px;
  font-size: 24px;
  color: white;
  opacity: 1;
  transition: opacity 0.5s;
}

/* On hover, expand top-right to full panel */
.inside:hover {
  top: 0;
  right: 0;
  width: 100%;
  height: 80%;
  border-radius: 0;
}

.inside .contents {
  display: flex;
  justify-content: center;   /* horizontal center */
  align-items: center;       /* vertical center */
  text-align: center;
  padding: 10px;
  color: white;
  font-size: 15px;
  line-height: 1.4;
  height: 100%;              /* needed for vertical centering */
  width: 100%;
  opacity: 0;
  transform: translateY(-200%) scale(0.5);
  transition: opacity 0.2s, transform 0.8s;
}

.inside:hover .contents {
  opacity: 1;
  transform: translateY(0) scale(1);
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-f3da42f *//* 1) No body bg-color any more */
html, body {
  font-family: 'Open Sans', sans-serif;
  padding: 0;
  margin: 0;
}

/* 2) Wrapper snaps to the image size */
.wrapper {
  display: inline-block;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  transform: scale(0.95);
  transition: transform 0.5s, box-shadow 0.5s;
}
.wrapper:hover {
  transform: scale(1);
  box-shadow: 5px 20px 30px rgba(0, 0, 0, 0.2);
}

/* Top just holds the img */
.top img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Bottom bar with centered 25px title */
.bottom {
  background: #f4f4f4;
  text-align: center;
}
.bottom .details h1 {
  margin: 0;
  padding: 10px 0;
  font-size: 25px;
  color: black;
}

.inside {
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  height: 100px;
  background: #C1AA80;
  border-radius: 0 0 0 250px;
  overflow: hidden;
  transition: all 0.5s, border-radius 2s;
  text-align: center;
  z-index: 2;
}


/* 5) New icon */
.inside .icon {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 24px;
  color: white;
  opacity: 1;
  transition: opacity 0.5s;
}

/* Hover: expand to full width, move to top */
.inside:hover {
  top: 0;
  bottom: auto;
  right: 0;
  width: 100%;
  height: 80%;
  border-radius: 0;
}
.inside:hover .icon {
  opacity: 0;
}

/* Contents panel */
.inside .contents {
  padding: 5%;
  opacity: 0;
  transform: translateY(-200%) scale(0.5);
  transition: opacity 0.2s, transform 0.8s;
}
.inside:hover .contents {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.inside .contents table {
  width: 100%;
  text-align: center;
  color: white;
  border-collapse: collapse;
}
.inside .contents th,
.inside .contents td {
  padding: 4px 0;
}
/* Anchor the inside panel to top right now */
.inside {
  position: absolute;
  top: 0;
  right: 0;
  width: 70px;
  height: 70px;
  background: #C1AA80;
  border-radius: 0 0 0 100px;
  overflow: hidden;
  transition: all 0.5s, border-radius 2s;
  text-align: center;
  z-index: 2;
}



/* Keep icon visible initially in top-right */
.inside .icon {
  position: absolute;
  top: 8px;
  right: 15px;
  font-size: 24px;
  color: white;
  opacity: 1;
  transition: opacity 0.5s;
}

/* On hover, expand top-right to full panel */
.inside:hover {
  top: 0;
  right: 0;
  width: 100%;
  height: 80%;
  border-radius: 0;
}

.inside .contents {
  display: flex;
  justify-content: center;   /* horizontal center */
  align-items: center;       /* vertical center */
  text-align: center;
  padding: 10px;
  color: white;
  font-size: 15px;
  line-height: 1.4;
  height: 100%;              /* needed for vertical centering */
  width: 100%;
  opacity: 0;
  transform: translateY(-200%) scale(0.5);
  transition: opacity 0.2s, transform 0.8s;
}

.inside:hover .contents {
  opacity: 1;
  transform: translateY(0) scale(1);
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-73a8edc *//* 1) No body bg-color any more */
html, body {
  font-family: 'Open Sans', sans-serif;
  padding: 0;
  margin: 0;
}

/* 2) Wrapper snaps to the image size */
.wrapper {
  display: inline-block;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  transform: scale(0.95);
  transition: transform 0.5s, box-shadow 0.5s;
}
.wrapper:hover {
  transform: scale(1);
  box-shadow: 5px 20px 30px rgba(0, 0, 0, 0.2);
}

/* Top just holds the img */
.top img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Bottom bar with centered 25px title */
.bottom {
  background: #f4f4f4;
  text-align: center;
}
.bottom .details h1 {
  margin: 0;
  padding: 10px 0;
  font-size: 25px;
  color: black;
}

.inside {
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  height: 100px;
  background: #C1AA80;
  border-radius: 0 0 0 250px;
  overflow: hidden;
  transition: all 0.5s, border-radius 2s;
  text-align: center;
  z-index: 2;
}


/* 5) New icon */
.inside .icon {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 24px;
  color: white;
  opacity: 1;
  transition: opacity 0.5s;
}

/* Hover: expand to full width, move to top */
.inside:hover {
  top: 0;
  bottom: auto;
  right: 0;
  width: 100%;
  height: 80%;
  border-radius: 0;
}
.inside:hover .icon {
  opacity: 0;
}

/* Contents panel */
.inside .contents {
  padding: 5%;
  opacity: 0;
  transform: translateY(-200%) scale(0.5);
  transition: opacity 0.2s, transform 0.8s;
}
.inside:hover .contents {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.inside .contents table {
  width: 100%;
  text-align: center;
  color: white;
  border-collapse: collapse;
}
.inside .contents th,
.inside .contents td {
  padding: 4px 0;
}
/* Anchor the inside panel to top right now */
.inside {
  position: absolute;
  top: 0;
  right: 0;
  width: 70px;
  height: 70px;
  background: #C1AA80;
  border-radius: 0 0 0 100px;
  overflow: hidden;
  transition: all 0.5s, border-radius 2s;
  text-align: center;
  z-index: 2;
}



/* Keep icon visible initially in top-right */
.inside .icon {
  position: absolute;
  top: 8px;
  right: 15px;
  font-size: 24px;
  color: white;
  opacity: 1;
  transition: opacity 0.5s;
}

/* On hover, expand top-right to full panel */
.inside:hover {
  top: 0;
  right: 0;
  width: 100%;
  height: 80%;
  border-radius: 0;
}

.inside .contents {
  display: flex;
  justify-content: center;   /* horizontal center */
  align-items: center;       /* vertical center */
  text-align: center;
  padding: 10px;
  color: white;
  font-size: 15px;
  line-height: 1.4;
  height: 100%;              /* needed for vertical centering */
  width: 100%;
  opacity: 0;
  transform: translateY(-200%) scale(0.5);
  transition: opacity 0.2s, transform 0.8s;
}

.inside:hover .contents {
  opacity: 1;
  transform: translateY(0) scale(1);
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-9e3827d *//* 1) No body bg-color any more */
html, body {
  font-family: 'Open Sans', sans-serif;
  padding: 0;
  margin: 0;
}

/* 2) Wrapper snaps to the image size */
.wrapper {
  display: inline-block;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  transform: scale(0.95);
  transition: transform 0.5s, box-shadow 0.5s;
}
.wrapper:hover {
  transform: scale(1);
  box-shadow: 5px 20px 30px rgba(0, 0, 0, 0.2);
}

/* Top just holds the img */
.top img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Bottom bar with centered 25px title */
.bottom {
  background: #f4f4f4;
  text-align: center;
}
.bottom .details h1 {
  margin: 0;
  padding: 10px 0;
  font-size: 25px;
  color: black;
}

.inside {
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  height: 100px;
  background: #C1AA80;
  border-radius: 0 0 0 250px;
  overflow: hidden;
  transition: all 0.5s, border-radius 2s;
  text-align: center;
  z-index: 2;
}


/* 5) New icon */
.inside .icon {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 24px;
  color: white;
  opacity: 1;
  transition: opacity 0.5s;
}

/* Hover: expand to full width, move to top */
.inside:hover {
  top: 0;
  bottom: auto;
  right: 0;
  width: 100%;
  height: 80%;
  border-radius: 0;
}
.inside:hover .icon {
  opacity: 0;
}

/* Contents panel */
.inside .contents {
  padding: 5%;
  opacity: 0;
  transform: translateY(-200%) scale(0.5);
  transition: opacity 0.2s, transform 0.8s;
}
.inside:hover .contents {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.inside .contents table {
  width: 100%;
  text-align: center;
  color: white;
  border-collapse: collapse;
}
.inside .contents th,
.inside .contents td {
  padding: 4px 0;
}
/* Anchor the inside panel to top right now */
.inside {
  position: absolute;
  top: 0;
  right: 0;
  width: 70px;
  height: 70px;
  background: #C1AA80;
  border-radius: 0 0 0 100px;
  overflow: hidden;
  transition: all 0.5s, border-radius 2s;
  text-align: center;
  z-index: 2;
}



/* Keep icon visible initially in top-right */
.inside .icon {
  position: absolute;
  top: 8px;
  right: 15px;
  font-size: 24px;
  color: white;
  opacity: 1;
  transition: opacity 0.5s;
}

/* On hover, expand top-right to full panel */
.inside:hover {
  top: 0;
  right: 0;
  width: 100%;
  height: 80%;
  border-radius: 0;
}

.inside .contents {
  display: flex;
  justify-content: center;   /* horizontal center */
  align-items: center;       /* vertical center */
  text-align: center;
  padding: 10px;
  color: white;
  font-size: 15px;
  line-height: 1.4;
  height: 100%;              /* needed for vertical centering */
  width: 100%;
  opacity: 0;
  transform: translateY(-200%) scale(0.5);
  transition: opacity 0.2s, transform 0.8s;
}

.inside:hover .contents {
  opacity: 1;
  transform: translateY(0) scale(1);
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-9c15365 *//* 1) No body bg-color any more */
html, body {
  font-family: 'Open Sans', sans-serif;
  padding: 0;
  margin: 0;
}

/* 2) Wrapper snaps to the image size */
.wrapper {
  display: inline-block;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  transform: scale(0.95);
  transition: transform 0.5s, box-shadow 0.5s;
}
.wrapper:hover {
  transform: scale(1);
  box-shadow: 5px 20px 30px rgba(0, 0, 0, 0.2);
}

/* Top just holds the img */
.top img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Bottom bar with centered 25px title */
.bottom {
  background: #f4f4f4;
  text-align: center;
}
.bottom .details h1 {
  margin: 0;
  padding: 10px 0;
  font-size: 25px;
  color: black;
}

.inside {
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  height: 100px;
  background: #C1AA80;
  border-radius: 0 0 0 250px;
  overflow: hidden;
  transition: all 0.5s, border-radius 2s;
  text-align: center;
  z-index: 2;
}


/* 5) New icon */
.inside .icon {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 24px;
  color: white;
  opacity: 1;
  transition: opacity 0.5s;
}

/* Hover: expand to full width, move to top */
.inside:hover {
  top: 0;
  bottom: auto;
  right: 0;
  width: 100%;
  height: 80%;
  border-radius: 0;
}
.inside:hover .icon {
  opacity: 0;
}

/* Contents panel */
.inside .contents {
  padding: 5%;
  opacity: 0;
  transform: translateY(-200%) scale(0.5);
  transition: opacity 0.2s, transform 0.8s;
}
.inside:hover .contents {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.inside .contents table {
  width: 100%;
  text-align: center;
  color: white;
  border-collapse: collapse;
}
.inside .contents th,
.inside .contents td {
  padding: 4px 0;
}
/* Anchor the inside panel to top right now */
.inside {
  position: absolute;
  top: 0;
  right: 0;
  width: 70px;
  height: 70px;
  background: #C1AA80;
  border-radius: 0 0 0 100px;
  overflow: hidden;
  transition: all 0.5s, border-radius 2s;
  text-align: center;
  z-index: 2;
}



/* Keep icon visible initially in top-right */
.inside .icon {
  position: absolute;
  top: 8px;
  right: 15px;
  font-size: 24px;
  color: white;
  opacity: 1;
  transition: opacity 0.5s;
}

/* On hover, expand top-right to full panel */
.inside:hover {
  top: 0;
  right: 0;
  width: 100%;
  height: 80%;
  border-radius: 0;
}

.inside .contents {
  display: flex;
  justify-content: center;   /* horizontal center */
  align-items: center;       /* vertical center */
  text-align: center;
  padding: 10px;
  color: white;
  font-size: 15px;
  line-height: 1.4;
  height: 100%;              /* needed for vertical centering */
  width: 100%;
  opacity: 0;
  transform: translateY(-200%) scale(0.5);
  transition: opacity 0.2s, transform 0.8s;
}

.inside:hover .contents {
  opacity: 1;
  transform: translateY(0) scale(1);
}/* End custom CSS */