.elementor-10 .elementor-element.elementor-element-6882a06e{--display:flex;--min-height:500px;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--overlay-opacity:0.5;--padding-top:60px;--padding-bottom:60px;--padding-left:40px;--padding-right:40px;}.elementor-10 .elementor-element.elementor-element-6882a06e:not(.elementor-motion-effects-element-type-background), .elementor-10 .elementor-element.elementor-element-6882a06e > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;background-image:url("https://ranjeet.digitaltoolkit.store/wp-content/uploads/2026/09/Serenity-Reserve-11-3-scaled.png");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-10 .elementor-element.elementor-element-6882a06e::before, .elementor-10 .elementor-element.elementor-element-6882a06e > .elementor-background-video-container::before, .elementor-10 .elementor-element.elementor-element-6882a06e > .e-con-inner > .elementor-background-video-container::before, .elementor-10 .elementor-element.elementor-element-6882a06e > .elementor-background-slideshow::before, .elementor-10 .elementor-element.elementor-element-6882a06e > .e-con-inner > .elementor-background-slideshow::before, .elementor-10 .elementor-element.elementor-element-6882a06e > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#000000;--background-overlay:'';}.elementor-10 .elementor-element.elementor-element-28a714d3 .elementor-heading-title{font-family:"Hanken Grotesk", Sans-serif;font-size:65px;font-weight:400;line-height:1.1em;letter-spacing:0.08em;color:#F5F5F3;}.elementor-10 .elementor-element.elementor-element-4d9911f7{text-align:center;font-family:"Montserrat", Sans-serif;font-size:13px;font-weight:400;line-height:1.4em;letter-spacing:0.2em;color:#F5F5F3;}.elementor-10 .elementor-element.elementor-element-8c3902d{--display:flex;--padding-top:60px;--padding-bottom:60px;--padding-left:40px;--padding-right:40px;}.elementor-10 .elementor-element.elementor-element-8c3902d:not(.elementor-motion-effects-element-type-background), .elementor-10 .elementor-element.elementor-element-8c3902d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F5F3EE;}.elementor-10 .elementor-element.elementor-element-3756ac4a{--display:flex;--padding-top:20px;--padding-bottom:0px;--padding-left:60px;--padding-right:60px;}.elementor-10 .elementor-element.elementor-element-4ccbed89{padding:0px 20px 0px 20px;text-align:center;font-family:"Montserrat", Sans-serif;font-size:18px;font-weight:400;line-height:1.1em;color:#0A0A0A;}.elementor-10 .elementor-element.elementor-element-4ccbed89.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-10 .elementor-element.elementor-element-1142353{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--padding-top:10px;--padding-bottom:0px;--padding-left:90px;--padding-right:90px;}.elementor-10 .elementor-element.elementor-element-35ca393{--display:flex;--justify-content:center;--align-items:flex-start;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );border-style:solid;--border-style:solid;border-width:1px 1px 1px 1px;--border-top-width:1px;--border-right-width:1px;--border-bottom-width:1px;--border-left-width:1px;border-color:#6B6B6B21;--border-color:#6B6B6B21;--border-radius:12px 12px 12px 12px;--padding-top:15px;--padding-bottom:15px;--padding-left:20px;--padding-right:20px;}.elementor-10 .elementor-element.elementor-element-35ca393:not(.elementor-motion-effects-element-type-background), .elementor-10 .elementor-element.elementor-element-35ca393 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-10 .elementor-element.elementor-element-7f23c24.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-10 .elementor-element.elementor-element-7f23c24 .elementor-icon-box-wrapper{align-items:center;text-align:start;gap:10px;}.elementor-10 .elementor-element.elementor-element-7f23c24.elementor-view-stacked .elementor-icon{background-color:#F5F3EE;fill:#914D4D;color:#914D4D;}.elementor-10 .elementor-element.elementor-element-7f23c24.elementor-view-framed .elementor-icon, .elementor-10 .elementor-element.elementor-element-7f23c24.elementor-view-default .elementor-icon{fill:#F5F3EE;color:#F5F3EE;border-color:#F5F3EE;}.elementor-10 .elementor-element.elementor-element-7f23c24.elementor-view-framed .elementor-icon{background-color:#914D4D;}.elementor-10 .elementor-element.elementor-element-7f23c24 .elementor-icon{font-size:20px;}.elementor-10 .elementor-element.elementor-element-7f23c24 .elementor-icon-box-title, .elementor-10 .elementor-element.elementor-element-7f23c24 .elementor-icon-box-title a{font-family:"Montserrat", Sans-serif;font-size:14px;font-weight:400;}.elementor-10 .elementor-element.elementor-element-7f23c24 .elementor-icon-box-title{color:#000000;}.elementor-10 .elementor-element.elementor-element-b0528e1{--display:flex;--justify-content:center;--align-items:flex-start;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );border-style:solid;--border-style:solid;border-width:1px 1px 1px 1px;--border-top-width:1px;--border-right-width:1px;--border-bottom-width:1px;--border-left-width:1px;border-color:#6B6B6B21;--border-color:#6B6B6B21;--border-radius:12px 12px 12px 12px;--padding-top:15px;--padding-bottom:15px;--padding-left:20px;--padding-right:20px;}.elementor-10 .elementor-element.elementor-element-b0528e1:not(.elementor-motion-effects-element-type-background), .elementor-10 .elementor-element.elementor-element-b0528e1 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-10 .elementor-element.elementor-element-6b278bf .elementor-icon-box-wrapper{align-items:center;text-align:start;gap:10px;}.elementor-10 .elementor-element.elementor-element-6b278bf.elementor-view-stacked .elementor-icon{background-color:#F5F3EE;fill:#914D4D;color:#914D4D;}.elementor-10 .elementor-element.elementor-element-6b278bf.elementor-view-framed .elementor-icon, .elementor-10 .elementor-element.elementor-element-6b278bf.elementor-view-default .elementor-icon{fill:#F5F3EE;color:#F5F3EE;border-color:#F5F3EE;}.elementor-10 .elementor-element.elementor-element-6b278bf.elementor-view-framed .elementor-icon{background-color:#914D4D;}.elementor-10 .elementor-element.elementor-element-6b278bf .elementor-icon{font-size:20px;}.elementor-10 .elementor-element.elementor-element-6b278bf .elementor-icon-box-title, .elementor-10 .elementor-element.elementor-element-6b278bf .elementor-icon-box-title a{font-family:"Montserrat", Sans-serif;font-size:14px;font-weight:400;}.elementor-10 .elementor-element.elementor-element-6b278bf .elementor-icon-box-title{color:#000000;}.elementor-10 .elementor-element.elementor-element-6b67452{--display:flex;--justify-content:center;--align-items:flex-start;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );border-style:solid;--border-style:solid;border-width:1px 1px 1px 1px;--border-top-width:1px;--border-right-width:1px;--border-bottom-width:1px;--border-left-width:1px;border-color:#6B6B6B21;--border-color:#6B6B6B21;--border-radius:12px 12px 12px 12px;--padding-top:15px;--padding-bottom:15px;--padding-left:20px;--padding-right:20px;}.elementor-10 .elementor-element.elementor-element-6b67452:not(.elementor-motion-effects-element-type-background), .elementor-10 .elementor-element.elementor-element-6b67452 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-10 .elementor-element.elementor-element-1becb40 .elementor-icon-box-wrapper{align-items:center;text-align:start;gap:10px;}.elementor-10 .elementor-element.elementor-element-1becb40.elementor-view-stacked .elementor-icon{background-color:#F5F3EE;fill:#914D4D;color:#914D4D;}.elementor-10 .elementor-element.elementor-element-1becb40.elementor-view-framed .elementor-icon, .elementor-10 .elementor-element.elementor-element-1becb40.elementor-view-default .elementor-icon{fill:#F5F3EE;color:#F5F3EE;border-color:#F5F3EE;}.elementor-10 .elementor-element.elementor-element-1becb40.elementor-view-framed .elementor-icon{background-color:#914D4D;}.elementor-10 .elementor-element.elementor-element-1becb40 .elementor-icon{font-size:20px;}.elementor-10 .elementor-element.elementor-element-1becb40 .elementor-icon-box-title, .elementor-10 .elementor-element.elementor-element-1becb40 .elementor-icon-box-title a{font-family:"Montserrat", Sans-serif;font-size:14px;font-weight:400;}.elementor-10 .elementor-element.elementor-element-1becb40 .elementor-icon-box-title{color:#000000;}.elementor-10 .elementor-element.elementor-element-8282fb3{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:40px;--padding-left:90px;--padding-right:90px;}.elementor-10 .elementor-element.elementor-element-0957449{--display:flex;--justify-content:center;--align-items:flex-start;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );border-style:solid;--border-style:solid;border-width:1px 1px 1px 1px;--border-top-width:1px;--border-right-width:1px;--border-bottom-width:1px;--border-left-width:1px;border-color:#6B6B6B21;--border-color:#6B6B6B21;--border-radius:12px 12px 12px 12px;--padding-top:15px;--padding-bottom:15px;--padding-left:20px;--padding-right:20px;}.elementor-10 .elementor-element.elementor-element-0957449:not(.elementor-motion-effects-element-type-background), .elementor-10 .elementor-element.elementor-element-0957449 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-10 .elementor-element.elementor-element-e2f6709 .elementor-icon-box-wrapper{align-items:center;text-align:start;gap:10px;}.elementor-10 .elementor-element.elementor-element-e2f6709.elementor-view-stacked .elementor-icon{background-color:#F5F3EE;fill:#914D4D;color:#914D4D;}.elementor-10 .elementor-element.elementor-element-e2f6709.elementor-view-framed .elementor-icon, .elementor-10 .elementor-element.elementor-element-e2f6709.elementor-view-default .elementor-icon{fill:#F5F3EE;color:#F5F3EE;border-color:#F5F3EE;}.elementor-10 .elementor-element.elementor-element-e2f6709.elementor-view-framed .elementor-icon{background-color:#914D4D;}.elementor-10 .elementor-element.elementor-element-e2f6709 .elementor-icon{font-size:20px;}.elementor-10 .elementor-element.elementor-element-e2f6709 .elementor-icon-box-title, .elementor-10 .elementor-element.elementor-element-e2f6709 .elementor-icon-box-title a{font-family:"Montserrat", Sans-serif;font-size:14px;font-weight:400;}.elementor-10 .elementor-element.elementor-element-e2f6709 .elementor-icon-box-title{color:#000000;}.elementor-10 .elementor-element.elementor-element-534f771{--display:flex;--justify-content:center;--align-items:flex-start;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );border-style:solid;--border-style:solid;border-width:1px 1px 1px 1px;--border-top-width:1px;--border-right-width:1px;--border-bottom-width:1px;--border-left-width:1px;border-color:#6B6B6B21;--border-color:#6B6B6B21;--border-radius:12px 12px 12px 12px;--padding-top:15px;--padding-bottom:15px;--padding-left:20px;--padding-right:20px;}.elementor-10 .elementor-element.elementor-element-534f771:not(.elementor-motion-effects-element-type-background), .elementor-10 .elementor-element.elementor-element-534f771 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-10 .elementor-element.elementor-element-094ca6e .elementor-icon-box-wrapper{align-items:center;text-align:start;gap:10px;}.elementor-10 .elementor-element.elementor-element-094ca6e.elementor-view-stacked .elementor-icon{background-color:#F5F3EE;fill:#914D4D;color:#914D4D;}.elementor-10 .elementor-element.elementor-element-094ca6e.elementor-view-framed .elementor-icon, .elementor-10 .elementor-element.elementor-element-094ca6e.elementor-view-default .elementor-icon{fill:#F5F3EE;color:#F5F3EE;border-color:#F5F3EE;}.elementor-10 .elementor-element.elementor-element-094ca6e.elementor-view-framed .elementor-icon{background-color:#914D4D;}.elementor-10 .elementor-element.elementor-element-094ca6e .elementor-icon{font-size:20px;}.elementor-10 .elementor-element.elementor-element-094ca6e .elementor-icon-box-title, .elementor-10 .elementor-element.elementor-element-094ca6e .elementor-icon-box-title a{font-family:"Montserrat", Sans-serif;font-size:14px;font-weight:400;}.elementor-10 .elementor-element.elementor-element-094ca6e .elementor-icon-box-title{color:#000000;}.elementor-10 .elementor-element.elementor-element-1d408f1{--display:flex;--justify-content:center;--align-items:flex-start;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );border-style:solid;--border-style:solid;border-width:1px 1px 1px 1px;--border-top-width:1px;--border-right-width:1px;--border-bottom-width:1px;--border-left-width:1px;border-color:#6B6B6B21;--border-color:#6B6B6B21;--border-radius:12px 12px 12px 12px;--padding-top:15px;--padding-bottom:15px;--padding-left:20px;--padding-right:20px;}.elementor-10 .elementor-element.elementor-element-1d408f1:not(.elementor-motion-effects-element-type-background), .elementor-10 .elementor-element.elementor-element-1d408f1 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-10 .elementor-element.elementor-element-a702d38 .elementor-icon-box-wrapper{align-items:center;text-align:start;gap:10px;}.elementor-10 .elementor-element.elementor-element-a702d38.elementor-view-stacked .elementor-icon{background-color:#F5F3EE;fill:#914D4D;color:#914D4D;}.elementor-10 .elementor-element.elementor-element-a702d38.elementor-view-framed .elementor-icon, .elementor-10 .elementor-element.elementor-element-a702d38.elementor-view-default .elementor-icon{fill:#F5F3EE;color:#F5F3EE;border-color:#F5F3EE;}.elementor-10 .elementor-element.elementor-element-a702d38.elementor-view-framed .elementor-icon{background-color:#914D4D;}.elementor-10 .elementor-element.elementor-element-a702d38 .elementor-icon{font-size:20px;}.elementor-10 .elementor-element.elementor-element-a702d38 .elementor-icon-box-title, .elementor-10 .elementor-element.elementor-element-a702d38 .elementor-icon-box-title a{font-family:"Montserrat", Sans-serif;font-size:14px;font-weight:400;}.elementor-10 .elementor-element.elementor-element-a702d38 .elementor-icon-box-title{color:#000000;}.elementor-10 .elementor-element.elementor-element-5c39653f{--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;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10 .elementor-element.elementor-element-1dbc2c6f .elementor-button{background-color:#02010100;font-family:"Montserrat", Sans-serif;font-size:15px;font-weight:500;line-height:1.1em;letter-spacing:0.08em;fill:#000000;color:#000000;border-style:solid;border-width:0px 0px 1px 0px;border-color:#868686;border-radius:0px 0px 0px 0px;}.elementor-10 .elementor-element.elementor-element-1dbc2c6f:hover{border-style:none;}.elementor-10 .elementor-element.elementor-element-1dbc2c6f .elementor-button:hover, .elementor-10 .elementor-element.elementor-element-1dbc2c6f .elementor-button:focus{color:#000000;}.elementor-10 .elementor-element.elementor-element-1dbc2c6f .elementor-button:hover svg, .elementor-10 .elementor-element.elementor-element-1dbc2c6f .elementor-button:focus svg{fill:#000000;}.elementor-10 .elementor-element.elementor-element-1834ad65 .elementor-button{background-color:#02010100;font-family:"Montserrat", Sans-serif;font-size:15px;font-weight:400;line-height:1.1em;letter-spacing:0.08em;fill:#535353;color:#535353;border-style:none;}.elementor-10 .elementor-element.elementor-element-1834ad65:hover{border-style:none;}.elementor-10 .elementor-element.elementor-element-c2a42e0 .elementor-button{background-color:#02010100;font-family:"Montserrat", Sans-serif;font-size:15px;font-weight:400;line-height:1.1em;letter-spacing:0.08em;fill:#535353;color:#535353;border-style:none;}.elementor-10 .elementor-element.elementor-element-c2a42e0:hover{border-style:none;}.elementor-10 .elementor-element.elementor-element-13d67a34{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:10px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10 .elementor-element.elementor-element-33e7c1dd{--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:space-between;--align-items:flex-end;border-style:solid;--border-style:solid;border-width:0px 0px 1px 0px;--border-top-width:0px;--border-right-width:0px;--border-bottom-width:1px;--border-left-width:0px;border-color:#AAAAAA;--border-color:#AAAAAA;--padding-top:10px;--padding-bottom:15px;--padding-left:0px;--padding-right:0px;}.elementor-10 .elementor-element.elementor-element-33e163db{text-align:center;font-family:"Montserrat", Sans-serif;font-size:30px;font-weight:500;line-height:1.1em;color:#0A0A0A;}.elementor-10 .elementor-element.elementor-element-7623d612{--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;--padding-top:0px;--padding-bottom:40px;--padding-left:0px;--padding-right:0px;}.elementor-10 .elementor-element.elementor-element-28b01864 .gallery-item .gallery-caption{text-align:center;}.elementor-10 .elementor-element.elementor-element-3bc40c3{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:10px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10 .elementor-element.elementor-element-89e33a7{--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:space-between;--align-items:flex-end;border-style:solid;--border-style:solid;border-width:0px 0px 1px 0px;--border-top-width:0px;--border-right-width:0px;--border-bottom-width:1px;--border-left-width:0px;border-color:#AAAAAA;--border-color:#AAAAAA;--padding-top:10px;--padding-bottom:15px;--padding-left:0px;--padding-right:0px;}.elementor-10 .elementor-element.elementor-element-189dcee{text-align:center;font-family:"Montserrat", Sans-serif;font-size:30px;font-weight:500;line-height:1.1em;color:#0A0A0A;}.elementor-10 .elementor-element.elementor-element-59c721c{--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;--padding-top:0px;--padding-bottom:40px;--padding-left:0px;--padding-right:0px;}.elementor-10 .elementor-element.elementor-element-abf9105 .gallery-item .gallery-caption{text-align:center;}.elementor-10 .elementor-element.elementor-element-e7cd867{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:10px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10 .elementor-element.elementor-element-bc93b0e{--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:space-between;--align-items:flex-end;border-style:solid;--border-style:solid;border-width:0px 0px 1px 0px;--border-top-width:0px;--border-right-width:0px;--border-bottom-width:1px;--border-left-width:0px;border-color:#AAAAAA;--border-color:#AAAAAA;--padding-top:10px;--padding-bottom:15px;--padding-left:0px;--padding-right:0px;}.elementor-10 .elementor-element.elementor-element-1d17a0f{text-align:center;font-family:"Montserrat", Sans-serif;font-size:30px;font-weight:500;line-height:1.1em;color:#0A0A0A;}.elementor-10 .elementor-element.elementor-element-55738e5{--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;--padding-top:0px;--padding-bottom:40px;--padding-left:0px;--padding-right:0px;}.elementor-10 .elementor-element.elementor-element-e6cc0ea .gallery-item .gallery-caption{text-align:center;}.elementor-10 .elementor-element.elementor-element-a47bee8{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:10px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10 .elementor-element.elementor-element-0368ea9{--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:space-between;--align-items:flex-end;border-style:solid;--border-style:solid;border-width:0px 0px 1px 0px;--border-top-width:0px;--border-right-width:0px;--border-bottom-width:1px;--border-left-width:0px;border-color:#AAAAAA;--border-color:#AAAAAA;--padding-top:10px;--padding-bottom:15px;--padding-left:0px;--padding-right:0px;}.elementor-10 .elementor-element.elementor-element-2281bf3{text-align:center;font-family:"Montserrat", Sans-serif;font-size:30px;font-weight:500;line-height:1.1em;color:#0A0A0A;}.elementor-10 .elementor-element.elementor-element-76c04a3{--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;--padding-top:0px;--padding-bottom:40px;--padding-left:0px;--padding-right:0px;}.elementor-10 .elementor-element.elementor-element-a05588f .gallery-item .gallery-caption{text-align:center;}.elementor-10 .elementor-element.elementor-element-8ed072c{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:10px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10 .elementor-element.elementor-element-1788390{--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:space-between;--align-items:flex-end;border-style:solid;--border-style:solid;border-width:0px 0px 1px 0px;--border-top-width:0px;--border-right-width:0px;--border-bottom-width:1px;--border-left-width:0px;border-color:#AAAAAA;--border-color:#AAAAAA;--padding-top:10px;--padding-bottom:15px;--padding-left:0px;--padding-right:0px;}.elementor-10 .elementor-element.elementor-element-e732c6b{text-align:center;font-family:"Montserrat", Sans-serif;font-size:30px;font-weight:500;line-height:1.1em;color:#0A0A0A;}.elementor-10 .elementor-element.elementor-element-300ffc7{--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;--padding-top:0px;--padding-bottom:40px;--padding-left:0px;--padding-right:0px;}.elementor-10 .elementor-element.elementor-element-6c1500a .gallery-item .gallery-caption{text-align:center;}:root{--page-title-display:none;}@media(max-width:1024px){.elementor-10 .elementor-element.elementor-element-4ccbed89{width:var( --container-widget-width, 786.667px );max-width:786.667px;--container-widget-width:786.667px;--container-widget-flex-grow:0;}.elementor-10 .elementor-element.elementor-element-7f23c24{width:var( --container-widget-width, 196.896px );max-width:196.896px;--container-widget-width:196.896px;--container-widget-flex-grow:0;}}@media(max-width:767px){.elementor-10 .elementor-element.elementor-element-6882a06e{--min-height:450px;}.elementor-10 .elementor-element.elementor-element-28a714d3{text-align:center;}.elementor-10 .elementor-element.elementor-element-28a714d3 .elementor-heading-title{font-size:40px;}.elementor-10 .elementor-element.elementor-element-4d9911f7{margin:-10px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-10 .elementor-element.elementor-element-8c3902d{--padding-top:60px;--padding-bottom:60px;--padding-left:20px;--padding-right:20px;}.elementor-10 .elementor-element.elementor-element-3756ac4a{--padding-top:10px;--padding-bottom:10px;--padding-left:0px;--padding-right:0px;}.elementor-10 .elementor-element.elementor-element-4ccbed89{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;text-align:center;font-size:15px;}.elementor-10 .elementor-element.elementor-element-1142353{--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10 .elementor-element.elementor-element-35ca393{--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-10 .elementor-element.elementor-element-8282fb3{--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10 .elementor-element.elementor-element-0957449{--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-10 .elementor-element.elementor-element-5c39653f{--align-items:stretch;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:10px 0px;--row-gap:10px;--column-gap:0px;}.elementor-10 .elementor-element.elementor-element-1dbc2c6f .elementor-button{font-size:13px;border-width:0px 0px 2px 0px;}.elementor-10 .elementor-element.elementor-element-1834ad65 .elementor-button{font-size:13px;}.elementor-10 .elementor-element.elementor-element-c2a42e0 .elementor-button{font-size:13px;}.elementor-10 .elementor-element.elementor-element-13d67a34{--padding-top:20px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10 .elementor-element.elementor-element-33e163db{margin:-10px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;text-align:center;font-size:17px;}.elementor-10 .elementor-element.elementor-element-189dcee{margin:-10px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;text-align:center;font-size:17px;}.elementor-10 .elementor-element.elementor-element-1d17a0f{margin:-10px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;text-align:center;font-size:17px;}.elementor-10 .elementor-element.elementor-element-2281bf3{margin:-10px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;text-align:center;font-size:17px;}.elementor-10 .elementor-element.elementor-element-e732c6b{margin:-10px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;text-align:center;font-size:17px;}}@media(min-width:1025px){.elementor-10 .elementor-element.elementor-element-6882a06e:not(.elementor-motion-effects-element-type-background), .elementor-10 .elementor-element.elementor-element-6882a06e > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-attachment:scroll;}}/* Start custom CSS for image-gallery, class: .elementor-element-28b01864 *//* ========================================================= DESIGN HANDS PREMIUM PROJECT GALLERY ELEMENTOR BASIC GALLERY ========================================================= */ /* ========================================================= MAIN GALLERY WRAPPER ========================================================= */ .dh-project-gallery { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* ========================================================= MAIN GRID ========================================================= */ .dh-project-gallery .gallery { display: grid !important; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 6px; width: 100% !important; height: 480px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; box-sizing: border-box !important; } /* ========================================================= GALLERY ITEM ========================================================= */ .dh-project-gallery .gallery-item { position: relative !important; display: block !important; float: none !important; width: auto !important; max-width: none !important; height: auto !important; max-height: none !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; box-sizing: border-box !important; } /* ========================================================= GALLERY ICON ========================================================= */ .dh-project-gallery .gallery-icon { position: relative !important; display: block !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: #F5F3EE !important; box-sizing: border-box !important; } /* ========================================================= IMAGE LINK ========================================================= */ .dh-project-gallery .gallery-icon a { position: relative !important; display: block !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; text-decoration: none !important; box-sizing: border-box !important; } /* ========================================================= IMAGE ========================================================= */ .dh-project-gallery .gallery-icon img { display: block !important; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; object-fit: cover !important; object-position: center center !important; margin: 0 !important; padding: 0 !important; border: 0 !important; opacity: 1 !important; filter: none !important; transform: scale(1) !important; image-rendering: auto !important; transition: transform 0.65s cubic-bezier(.2,.65,.25,1) !important; } /* ========================================================= IMAGE HOVER ZOOM ========================================================= */ .dh-project-gallery .gallery-item:hover .gallery-icon img { transform: scale(1.035) !important; } /* ========================================================= IMAGE POSITIONS ========================================================= */ /* IMAGE 1 — LARGE */ .dh-project-gallery .gallery-item:nth-child(1) { grid-column: 1 !important; grid-row: 1 / 3 !important; } /* IMAGE 2 — TOP MIDDLE */ .dh-project-gallery .gallery-item:nth-child(2) { grid-column: 2 !important; grid-row: 1 !important; } /* IMAGE 3 — TOP RIGHT */ .dh-project-gallery .gallery-item:nth-child(3) { grid-column: 3 !important; grid-row: 1 !important; } /* IMAGE 4 — BOTTOM MIDDLE */ .dh-project-gallery .gallery-item:nth-child(4) { grid-column: 2 !important; grid-row: 2 !important; } /* IMAGE 5 — VIEW ALL */ .dh-project-gallery .gallery-item:nth-child(5) { grid-column: 3 !important; grid-row: 2 !important; } /* ========================================================= HIDE IMAGE 6 ONWARDS FROM THE GRID ========================================================= */ .dh-project-gallery .gallery-item:nth-child(n + 6) { display: none !important; } /* ========================================================= NORMAL IMAGE HOVER OVERLAY ========================================================= */ .dh-project-gallery .gallery-item:not(:nth-child(5)) .gallery-icon a::after { content: ""; position: absolute; inset: 0; z-index: 5; background: rgba(15, 15, 15, 0); transition: background 0.4s ease !important; pointer-events: none; } .dh-project-gallery .gallery-item:not(:nth-child(5)):hover .gallery-icon a::after { background: rgba(15, 15, 15, 0.18); } /* ========================================================= PROJECT CAPTION ========================================================= */ .dh-project-gallery .gallery-item .gallery-caption { position: absolute !important; left: 0 !important; right: 0 !important; top: 0 !important; bottom: 0 !important; z-index: 20 !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-direction: column !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 30px !important; box-sizing: border-box !important; background: rgba(20, 20, 20, 0.58) !important; color: #ffffff !important; text-align: center !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 0 !important; font-weight: 400 !important; line-height: 1.5 !important; letter-spacing: 0.02em !important; white-space: pre-line !important; opacity: 0 !important; visibility: hidden !important; transform: translateY(10px) !important; transition: opacity 0.45s ease, visibility 0.45s ease, transform 0.45s ease !important; pointer-events: none !important; } /* ========================================================= SHOW PROJECT CAPTION ON HOVER ========================================================= */ .dh-project-gallery .gallery-item:hover .gallery-caption { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; } /* ========================================================= CAPTION — BRAND / YEAR LINE ========================================================= */ .dh-project-gallery .gallery-item .gallery-caption::first-line { font-size: 12px; } /* ========================================================= CAPTION TEXT SIZE ========================================================= */ .dh-project-gallery .gallery-item .gallery-caption { font-size: 20px !important; font-weight: 400 !important; letter-spacing: 0.02em !important; } /* ========================================================= PROJECT CAPTION TOP LINE ========================================================= */ .dh-project-gallery .gallery-item .gallery-caption { text-shadow: 0 1px 4px rgba(0,0,0,0.25); } /* ========================================================= VIEW ALL TILE ========================================================= */ .dh-project-gallery .gallery-item:nth-child(5) .gallery-icon { background: #BEBEBC !important; } .dh-project-gallery .gallery-item:nth-child(5) .gallery-icon a { background: #BEBEBC !important; } /* ========================================================= VIEW ALL IMAGE ========================================================= */ .dh-project-gallery .gallery-item:nth-child(5) .gallery-icon img { width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; object-fit: cover !important; object-position: center center !important; transform: scale(1) !important; } /* ========================================================= VIEW ALL DARK OVERLAY ========================================================= */ .dh-project-gallery .gallery-item:nth-child(5) .gallery-icon a::after { content: ""; position: absolute; inset: 0; z-index: 10; background: rgba(55, 55, 53, 0.62); transition: background 0.4s ease !important; pointer-events: none; } /* ========================================================= VIEW ALL TEXT ========================================================= */ .dh-project-gallery .gallery-item:nth-child(5) .gallery-icon a::before { content: "+10\A VIEW ALL\A →"; white-space: pre; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 30; color: #ffffff !important; text-align: center !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 18px !important; font-weight: 400 !important; line-height: 1.4 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; pointer-events: none !important; transition: transform 0.4s ease !important; } /* ========================================================= VIEW ALL HOVER ========================================================= */ .dh-project-gallery .gallery-item:nth-child(5):hover .gallery-icon img { transform: scale(1.035) !important; } .dh-project-gallery .gallery-item:nth-child(5):hover .gallery-icon a::after { background: rgba(35, 35, 33, 0.78); } .dh-project-gallery .gallery-item:nth-child(5):hover .gallery-icon a::before { transform: translate(-50%, -50%) scale(1.04); } /* ========================================================= REMOVE DEFAULT GALLERY CAPTION STYLING ========================================================= */ .dh-project-gallery .gallery-caption br { display: block !important; } /* ========================================================= REMOVE DEFAULT SPACING ========================================================= */ .dh-project-gallery dt, .dh-project-gallery dd { margin: 0 !important; padding: 0 !important; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1024px) { .dh-project-gallery .gallery { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 6px; height: 420px !important; } .dh-project-gallery .gallery-item .gallery-caption { font-size: 18px !important; padding: 25px !important; } .dh-project-gallery .gallery-item:nth-child(5) .gallery-icon a::before { font-size: 16px !important; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .dh-project-gallery .gallery { display: grid !important; grid-template-columns: 1fr 1fr; grid-template-rows: 280px 170px 170px; gap: 5px; height: auto !important; } /* IMAGE 1 */ .dh-project-gallery .gallery-item:nth-child(1) { grid-column: 1 / 3 !important; grid-row: 1 !important; } /* IMAGE 2 */ .dh-project-gallery .gallery-item:nth-child(2) { grid-column: 1 !important; grid-row: 2 !important; } /* IMAGE 3 */ .dh-project-gallery .gallery-item:nth-child(3) { grid-column: 2 !important; grid-row: 2 !important; } /* IMAGE 4 */ .dh-project-gallery .gallery-item:nth-child(4) { grid-column: 1 !important; grid-row: 3 !important; } /* VIEW ALL */ .dh-project-gallery .gallery-item:nth-child(5) { grid-column: 2 !important; grid-row: 3 !important; } /* MOBILE CAPTION */ .dh-project-gallery .gallery-item .gallery-caption { font-size: 14px !important; padding: 20px !important; } /* VIEW ALL MOBILE */ .dh-project-gallery .gallery-item:nth-child(5) .gallery-icon a::before { font-size: 13px !important; letter-spacing: 0.06em !important; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .dh-project-gallery .gallery { grid-template-rows: 230px 140px 140px; gap: 4px; } .dh-project-gallery .gallery-item .gallery-caption { font-size: 12px !important; padding: 15px !important; } .dh-project-gallery .gallery-item:nth-child(5) .gallery-icon a::before { font-size: 11px !important; } }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-abf9105 *//* ========================================================= DESIGN HANDS PREMIUM PROJECT GALLERY ELEMENTOR BASIC GALLERY ========================================================= */ /* ========================================================= MAIN GALLERY WRAPPER ========================================================= */ .dh-project-gallery { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* ========================================================= MAIN GRID ========================================================= */ .dh-project-gallery .gallery { display: grid !important; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 6px; width: 100% !important; height: 480px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; box-sizing: border-box !important; } /* ========================================================= GALLERY ITEM ========================================================= */ .dh-project-gallery .gallery-item { position: relative !important; display: block !important; float: none !important; width: auto !important; max-width: none !important; height: auto !important; max-height: none !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; box-sizing: border-box !important; } /* ========================================================= GALLERY ICON ========================================================= */ .dh-project-gallery .gallery-icon { position: relative !important; display: block !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: #F5F3EE !important; box-sizing: border-box !important; } /* ========================================================= IMAGE LINK ========================================================= */ .dh-project-gallery .gallery-icon a { position: relative !important; display: block !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; text-decoration: none !important; box-sizing: border-box !important; } /* ========================================================= IMAGE ========================================================= */ .dh-project-gallery .gallery-icon img { display: block !important; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; object-fit: cover !important; object-position: center center !important; margin: 0 !important; padding: 0 !important; border: 0 !important; opacity: 1 !important; filter: none !important; transform: scale(1) !important; image-rendering: auto !important; transition: transform 0.65s cubic-bezier(.2,.65,.25,1) !important; } /* ========================================================= IMAGE HOVER ZOOM ========================================================= */ .dh-project-gallery .gallery-item:hover .gallery-icon img { transform: scale(1.035) !important; } /* ========================================================= IMAGE POSITIONS ========================================================= */ /* IMAGE 1 — LARGE */ .dh-project-gallery .gallery-item:nth-child(1) { grid-column: 1 !important; grid-row: 1 / 3 !important; } /* IMAGE 2 — TOP MIDDLE */ .dh-project-gallery .gallery-item:nth-child(2) { grid-column: 2 !important; grid-row: 1 !important; } /* IMAGE 3 — TOP RIGHT */ .dh-project-gallery .gallery-item:nth-child(3) { grid-column: 3 !important; grid-row: 1 !important; } /* IMAGE 4 — BOTTOM MIDDLE */ .dh-project-gallery .gallery-item:nth-child(4) { grid-column: 2 !important; grid-row: 2 !important; } /* IMAGE 5 — VIEW ALL */ .dh-project-gallery .gallery-item:nth-child(5) { grid-column: 3 !important; grid-row: 2 !important; } /* ========================================================= HIDE IMAGE 6 ONWARDS FROM THE GRID ========================================================= */ .dh-project-gallery .gallery-item:nth-child(n + 6) { display: none !important; } /* ========================================================= NORMAL IMAGE HOVER OVERLAY ========================================================= */ .dh-project-gallery .gallery-item:not(:nth-child(5)) .gallery-icon a::after { content: ""; position: absolute; inset: 0; z-index: 5; background: rgba(15, 15, 15, 0); transition: background 0.4s ease !important; pointer-events: none; } .dh-project-gallery .gallery-item:not(:nth-child(5)):hover .gallery-icon a::after { background: rgba(15, 15, 15, 0.18); } /* ========================================================= PROJECT CAPTION ========================================================= */ .dh-project-gallery .gallery-item .gallery-caption { position: absolute !important; left: 0 !important; right: 0 !important; top: 0 !important; bottom: 0 !important; z-index: 20 !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-direction: column !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 30px !important; box-sizing: border-box !important; background: rgba(20, 20, 20, 0.58) !important; color: #ffffff !important; text-align: center !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 0 !important; font-weight: 400 !important; line-height: 1.5 !important; letter-spacing: 0.02em !important; white-space: pre-line !important; opacity: 0 !important; visibility: hidden !important; transform: translateY(10px) !important; transition: opacity 0.45s ease, visibility 0.45s ease, transform 0.45s ease !important; pointer-events: none !important; } /* ========================================================= SHOW PROJECT CAPTION ON HOVER ========================================================= */ .dh-project-gallery .gallery-item:hover .gallery-caption { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; } /* ========================================================= CAPTION — BRAND / YEAR LINE ========================================================= */ .dh-project-gallery .gallery-item .gallery-caption::first-line { font-size: 12px; } /* ========================================================= CAPTION TEXT SIZE ========================================================= */ .dh-project-gallery .gallery-item .gallery-caption { font-size: 20px !important; font-weight: 400 !important; letter-spacing: 0.02em !important; } /* ========================================================= PROJECT CAPTION TOP LINE ========================================================= */ .dh-project-gallery .gallery-item .gallery-caption { text-shadow: 0 1px 4px rgba(0,0,0,0.25); } /* ========================================================= VIEW ALL TILE ========================================================= */ .dh-project-gallery .gallery-item:nth-child(5) .gallery-icon { background: #BEBEBC !important; } .dh-project-gallery .gallery-item:nth-child(5) .gallery-icon a { background: #BEBEBC !important; } /* ========================================================= VIEW ALL IMAGE ========================================================= */ .dh-project-gallery .gallery-item:nth-child(5) .gallery-icon img { width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; object-fit: cover !important; object-position: center center !important; transform: scale(1) !important; } /* ========================================================= VIEW ALL DARK OVERLAY ========================================================= */ .dh-project-gallery .gallery-item:nth-child(5) .gallery-icon a::after { content: ""; position: absolute; inset: 0; z-index: 10; background: rgba(55, 55, 53, 0.62); transition: background 0.4s ease !important; pointer-events: none; } /* ========================================================= VIEW ALL TEXT ========================================================= */ .dh-project-gallery .gallery-item:nth-child(5) .gallery-icon a::before { content: "+10\A VIEW ALL\A →"; white-space: pre; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 30; color: #ffffff !important; text-align: center !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 18px !important; font-weight: 400 !important; line-height: 1.4 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; pointer-events: none !important; transition: transform 0.4s ease !important; } /* ========================================================= VIEW ALL HOVER ========================================================= */ .dh-project-gallery .gallery-item:nth-child(5):hover .gallery-icon img { transform: scale(1.035) !important; } .dh-project-gallery .gallery-item:nth-child(5):hover .gallery-icon a::after { background: rgba(35, 35, 33, 0.78); } .dh-project-gallery .gallery-item:nth-child(5):hover .gallery-icon a::before { transform: translate(-50%, -50%) scale(1.04); } /* ========================================================= REMOVE DEFAULT GALLERY CAPTION STYLING ========================================================= */ .dh-project-gallery .gallery-caption br { display: block !important; } /* ========================================================= REMOVE DEFAULT SPACING ========================================================= */ .dh-project-gallery dt, .dh-project-gallery dd { margin: 0 !important; padding: 0 !important; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1024px) { .dh-project-gallery .gallery { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 6px; height: 420px !important; } .dh-project-gallery .gallery-item .gallery-caption { font-size: 18px !important; padding: 25px !important; } .dh-project-gallery .gallery-item:nth-child(5) .gallery-icon a::before { font-size: 16px !important; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .dh-project-gallery .gallery { display: grid !important; grid-template-columns: 1fr 1fr; grid-template-rows: 280px 170px 170px; gap: 5px; height: auto !important; } /* IMAGE 1 */ .dh-project-gallery .gallery-item:nth-child(1) { grid-column: 1 / 3 !important; grid-row: 1 !important; } /* IMAGE 2 */ .dh-project-gallery .gallery-item:nth-child(2) { grid-column: 1 !important; grid-row: 2 !important; } /* IMAGE 3 */ .dh-project-gallery .gallery-item:nth-child(3) { grid-column: 2 !important; grid-row: 2 !important; } /* IMAGE 4 */ .dh-project-gallery .gallery-item:nth-child(4) { grid-column: 1 !important; grid-row: 3 !important; } /* VIEW ALL */ .dh-project-gallery .gallery-item:nth-child(5) { grid-column: 2 !important; grid-row: 3 !important; } /* MOBILE CAPTION */ .dh-project-gallery .gallery-item .gallery-caption { font-size: 14px !important; padding: 20px !important; } /* VIEW ALL MOBILE */ .dh-project-gallery .gallery-item:nth-child(5) .gallery-icon a::before { font-size: 13px !important; letter-spacing: 0.06em !important; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .dh-project-gallery .gallery { grid-template-rows: 230px 140px 140px; gap: 4px; } .dh-project-gallery .gallery-item .gallery-caption { font-size: 12px !important; padding: 15px !important; } .dh-project-gallery .gallery-item:nth-child(5) .gallery-icon a::before { font-size: 11px !important; } }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-e6cc0ea *//* ========================================================= DESIGN HANDS PREMIUM PROJECT GALLERY ELEMENTOR BASIC GALLERY ========================================================= */ /* ========================================================= MAIN GALLERY WRAPPER ========================================================= */ .dh-project-gallery { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* ========================================================= MAIN GRID ========================================================= */ .dh-project-gallery .gallery { display: grid !important; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 6px; width: 100% !important; height: 480px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; box-sizing: border-box !important; } /* ========================================================= GALLERY ITEM ========================================================= */ .dh-project-gallery .gallery-item { position: relative !important; display: block !important; float: none !important; width: auto !important; max-width: none !important; height: auto !important; max-height: none !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; box-sizing: border-box !important; } /* ========================================================= GALLERY ICON ========================================================= */ .dh-project-gallery .gallery-icon { position: relative !important; display: block !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: #F5F3EE !important; box-sizing: border-box !important; } /* ========================================================= IMAGE LINK ========================================================= */ .dh-project-gallery .gallery-icon a { position: relative !important; display: block !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; text-decoration: none !important; box-sizing: border-box !important; } /* ========================================================= IMAGE ========================================================= */ .dh-project-gallery .gallery-icon img { display: block !important; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; object-fit: cover !important; object-position: center center !important; margin: 0 !important; padding: 0 !important; border: 0 !important; opacity: 1 !important; filter: none !important; transform: scale(1) !important; image-rendering: auto !important; transition: transform 0.65s cubic-bezier(.2,.65,.25,1) !important; } /* ========================================================= IMAGE HOVER ZOOM ========================================================= */ .dh-project-gallery .gallery-item:hover .gallery-icon img { transform: scale(1.035) !important; } /* ========================================================= IMAGE POSITIONS ========================================================= */ /* IMAGE 1 — LARGE */ .dh-project-gallery .gallery-item:nth-child(1) { grid-column: 1 !important; grid-row: 1 / 3 !important; } /* IMAGE 2 — TOP MIDDLE */ .dh-project-gallery .gallery-item:nth-child(2) { grid-column: 2 !important; grid-row: 1 !important; } /* IMAGE 3 — TOP RIGHT */ .dh-project-gallery .gallery-item:nth-child(3) { grid-column: 3 !important; grid-row: 1 !important; } /* IMAGE 4 — BOTTOM MIDDLE */ .dh-project-gallery .gallery-item:nth-child(4) { grid-column: 2 !important; grid-row: 2 !important; } /* IMAGE 5 — VIEW ALL */ .dh-project-gallery .gallery-item:nth-child(5) { grid-column: 3 !important; grid-row: 2 !important; } /* ========================================================= HIDE IMAGE 6 ONWARDS FROM THE GRID ========================================================= */ .dh-project-gallery .gallery-item:nth-child(n + 6) { display: none !important; } /* ========================================================= NORMAL IMAGE HOVER OVERLAY ========================================================= */ .dh-project-gallery .gallery-item:not(:nth-child(5)) .gallery-icon a::after { content: ""; position: absolute; inset: 0; z-index: 5; background: rgba(15, 15, 15, 0); transition: background 0.4s ease !important; pointer-events: none; } .dh-project-gallery .gallery-item:not(:nth-child(5)):hover .gallery-icon a::after { background: rgba(15, 15, 15, 0.18); } /* ========================================================= PROJECT CAPTION ========================================================= */ .dh-project-gallery .gallery-item .gallery-caption { position: absolute !important; left: 0 !important; right: 0 !important; top: 0 !important; bottom: 0 !important; z-index: 20 !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-direction: column !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 30px !important; box-sizing: border-box !important; background: rgba(20, 20, 20, 0.58) !important; color: #ffffff !important; text-align: center !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 0 !important; font-weight: 400 !important; line-height: 1.5 !important; letter-spacing: 0.02em !important; white-space: pre-line !important; opacity: 0 !important; visibility: hidden !important; transform: translateY(10px) !important; transition: opacity 0.45s ease, visibility 0.45s ease, transform 0.45s ease !important; pointer-events: none !important; } /* ========================================================= SHOW PROJECT CAPTION ON HOVER ========================================================= */ .dh-project-gallery .gallery-item:hover .gallery-caption { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; } /* ========================================================= CAPTION — BRAND / YEAR LINE ========================================================= */ .dh-project-gallery .gallery-item .gallery-caption::first-line { font-size: 12px; } /* ========================================================= CAPTION TEXT SIZE ========================================================= */ .dh-project-gallery .gallery-item .gallery-caption { font-size: 20px !important; font-weight: 400 !important; letter-spacing: 0.02em !important; } /* ========================================================= PROJECT CAPTION TOP LINE ========================================================= */ .dh-project-gallery .gallery-item .gallery-caption { text-shadow: 0 1px 4px rgba(0,0,0,0.25); } /* ========================================================= VIEW ALL TILE ========================================================= */ .dh-project-gallery .gallery-item:nth-child(5) .gallery-icon { background: #BEBEBC !important; } .dh-project-gallery .gallery-item:nth-child(5) .gallery-icon a { background: #BEBEBC !important; } /* ========================================================= VIEW ALL IMAGE ========================================================= */ .dh-project-gallery .gallery-item:nth-child(5) .gallery-icon img { width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; object-fit: cover !important; object-position: center center !important; transform: scale(1) !important; } /* ========================================================= VIEW ALL DARK OVERLAY ========================================================= */ .dh-project-gallery .gallery-item:nth-child(5) .gallery-icon a::after { content: ""; position: absolute; inset: 0; z-index: 10; background: rgba(55, 55, 53, 0.62); transition: background 0.4s ease !important; pointer-events: none; } /* ========================================================= VIEW ALL TEXT ========================================================= */ .dh-project-gallery .gallery-item:nth-child(5) .gallery-icon a::before { content: "+10\A VIEW ALL\A →"; white-space: pre; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 30; color: #ffffff !important; text-align: center !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 18px !important; font-weight: 400 !important; line-height: 1.4 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; pointer-events: none !important; transition: transform 0.4s ease !important; } /* ========================================================= VIEW ALL HOVER ========================================================= */ .dh-project-gallery .gallery-item:nth-child(5):hover .gallery-icon img { transform: scale(1.035) !important; } .dh-project-gallery .gallery-item:nth-child(5):hover .gallery-icon a::after { background: rgba(35, 35, 33, 0.78); } .dh-project-gallery .gallery-item:nth-child(5):hover .gallery-icon a::before { transform: translate(-50%, -50%) scale(1.04); } /* ========================================================= REMOVE DEFAULT GALLERY CAPTION STYLING ========================================================= */ .dh-project-gallery .gallery-caption br { display: block !important; } /* ========================================================= REMOVE DEFAULT SPACING ========================================================= */ .dh-project-gallery dt, .dh-project-gallery dd { margin: 0 !important; padding: 0 !important; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1024px) { .dh-project-gallery .gallery { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 6px; height: 420px !important; } .dh-project-gallery .gallery-item .gallery-caption { font-size: 18px !important; padding: 25px !important; } .dh-project-gallery .gallery-item:nth-child(5) .gallery-icon a::before { font-size: 16px !important; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .dh-project-gallery .gallery { display: grid !important; grid-template-columns: 1fr 1fr; grid-template-rows: 280px 170px 170px; gap: 5px; height: auto !important; } /* IMAGE 1 */ .dh-project-gallery .gallery-item:nth-child(1) { grid-column: 1 / 3 !important; grid-row: 1 !important; } /* IMAGE 2 */ .dh-project-gallery .gallery-item:nth-child(2) { grid-column: 1 !important; grid-row: 2 !important; } /* IMAGE 3 */ .dh-project-gallery .gallery-item:nth-child(3) { grid-column: 2 !important; grid-row: 2 !important; } /* IMAGE 4 */ .dh-project-gallery .gallery-item:nth-child(4) { grid-column: 1 !important; grid-row: 3 !important; } /* VIEW ALL */ .dh-project-gallery .gallery-item:nth-child(5) { grid-column: 2 !important; grid-row: 3 !important; } /* MOBILE CAPTION */ .dh-project-gallery .gallery-item .gallery-caption { font-size: 14px !important; padding: 20px !important; } /* VIEW ALL MOBILE */ .dh-project-gallery .gallery-item:nth-child(5) .gallery-icon a::before { font-size: 13px !important; letter-spacing: 0.06em !important; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .dh-project-gallery .gallery { grid-template-rows: 230px 140px 140px; gap: 4px; } .dh-project-gallery .gallery-item .gallery-caption { font-size: 12px !important; padding: 15px !important; } .dh-project-gallery .gallery-item:nth-child(5) .gallery-icon a::before { font-size: 11px !important; } }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-a05588f *//* ========================================================= DESIGN HANDS PREMIUM PROJECT GALLERY ELEMENTOR BASIC GALLERY ========================================================= */ /* ========================================================= MAIN GALLERY WRAPPER ========================================================= */ .dh-project-gallery { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* ========================================================= MAIN GRID ========================================================= */ .dh-project-gallery .gallery { display: grid !important; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 6px; width: 100% !important; height: 480px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; box-sizing: border-box !important; } /* ========================================================= GALLERY ITEM ========================================================= */ .dh-project-gallery .gallery-item { position: relative !important; display: block !important; float: none !important; width: auto !important; max-width: none !important; height: auto !important; max-height: none !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; box-sizing: border-box !important; } /* ========================================================= GALLERY ICON ========================================================= */ .dh-project-gallery .gallery-icon { position: relative !important; display: block !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: #F5F3EE !important; box-sizing: border-box !important; } /* ========================================================= IMAGE LINK ========================================================= */ .dh-project-gallery .gallery-icon a { position: relative !important; display: block !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; text-decoration: none !important; box-sizing: border-box !important; } /* ========================================================= IMAGE ========================================================= */ .dh-project-gallery .gallery-icon img { display: block !important; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; object-fit: cover !important; object-position: center center !important; margin: 0 !important; padding: 0 !important; border: 0 !important; opacity: 1 !important; filter: none !important; transform: scale(1) !important; image-rendering: auto !important; transition: transform 0.65s cubic-bezier(.2,.65,.25,1) !important; } /* ========================================================= IMAGE HOVER ZOOM ========================================================= */ .dh-project-gallery .gallery-item:hover .gallery-icon img { transform: scale(1.035) !important; } /* ========================================================= IMAGE POSITIONS ========================================================= */ /* IMAGE 1 — LARGE */ .dh-project-gallery .gallery-item:nth-child(1) { grid-column: 1 !important; grid-row: 1 / 3 !important; } /* IMAGE 2 — TOP MIDDLE */ .dh-project-gallery .gallery-item:nth-child(2) { grid-column: 2 !important; grid-row: 1 !important; } /* IMAGE 3 — TOP RIGHT */ .dh-project-gallery .gallery-item:nth-child(3) { grid-column: 3 !important; grid-row: 1 !important; } /* IMAGE 4 — BOTTOM MIDDLE */ .dh-project-gallery .gallery-item:nth-child(4) { grid-column: 2 !important; grid-row: 2 !important; } /* IMAGE 5 — VIEW ALL */ .dh-project-gallery .gallery-item:nth-child(5) { grid-column: 3 !important; grid-row: 2 !important; } /* ========================================================= HIDE IMAGE 6 ONWARDS FROM THE GRID ========================================================= */ .dh-project-gallery .gallery-item:nth-child(n + 6) { display: none !important; } /* ========================================================= NORMAL IMAGE HOVER OVERLAY ========================================================= */ .dh-project-gallery .gallery-item:not(:nth-child(5)) .gallery-icon a::after { content: ""; position: absolute; inset: 0; z-index: 5; background: rgba(15, 15, 15, 0); transition: background 0.4s ease !important; pointer-events: none; } .dh-project-gallery .gallery-item:not(:nth-child(5)):hover .gallery-icon a::after { background: rgba(15, 15, 15, 0.18); } /* ========================================================= PROJECT CAPTION ========================================================= */ .dh-project-gallery .gallery-item .gallery-caption { position: absolute !important; left: 0 !important; right: 0 !important; top: 0 !important; bottom: 0 !important; z-index: 20 !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-direction: column !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 30px !important; box-sizing: border-box !important; background: rgba(20, 20, 20, 0.58) !important; color: #ffffff !important; text-align: center !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 0 !important; font-weight: 400 !important; line-height: 1.5 !important; letter-spacing: 0.02em !important; white-space: pre-line !important; opacity: 0 !important; visibility: hidden !important; transform: translateY(10px) !important; transition: opacity 0.45s ease, visibility 0.45s ease, transform 0.45s ease !important; pointer-events: none !important; } /* ========================================================= SHOW PROJECT CAPTION ON HOVER ========================================================= */ .dh-project-gallery .gallery-item:hover .gallery-caption { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; } /* ========================================================= CAPTION — BRAND / YEAR LINE ========================================================= */ .dh-project-gallery .gallery-item .gallery-caption::first-line { font-size: 12px; } /* ========================================================= CAPTION TEXT SIZE ========================================================= */ .dh-project-gallery .gallery-item .gallery-caption { font-size: 20px !important; font-weight: 400 !important; letter-spacing: 0.02em !important; } /* ========================================================= PROJECT CAPTION TOP LINE ========================================================= */ .dh-project-gallery .gallery-item .gallery-caption { text-shadow: 0 1px 4px rgba(0,0,0,0.25); } /* ========================================================= VIEW ALL TILE ========================================================= */ .dh-project-gallery .gallery-item:nth-child(5) .gallery-icon { background: #BEBEBC !important; } .dh-project-gallery .gallery-item:nth-child(5) .gallery-icon a { background: #BEBEBC !important; } /* ========================================================= VIEW ALL IMAGE ========================================================= */ .dh-project-gallery .gallery-item:nth-child(5) .gallery-icon img { width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; object-fit: cover !important; object-position: center center !important; transform: scale(1) !important; } /* ========================================================= VIEW ALL DARK OVERLAY ========================================================= */ .dh-project-gallery .gallery-item:nth-child(5) .gallery-icon a::after { content: ""; position: absolute; inset: 0; z-index: 10; background: rgba(55, 55, 53, 0.62); transition: background 0.4s ease !important; pointer-events: none; } /* ========================================================= VIEW ALL TEXT ========================================================= */ .dh-project-gallery .gallery-item:nth-child(5) .gallery-icon a::before { content: "+10\A VIEW ALL\A →"; white-space: pre; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 30; color: #ffffff !important; text-align: center !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 18px !important; font-weight: 400 !important; line-height: 1.4 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; pointer-events: none !important; transition: transform 0.4s ease !important; } /* ========================================================= VIEW ALL HOVER ========================================================= */ .dh-project-gallery .gallery-item:nth-child(5):hover .gallery-icon img { transform: scale(1.035) !important; } .dh-project-gallery .gallery-item:nth-child(5):hover .gallery-icon a::after { background: rgba(35, 35, 33, 0.78); } .dh-project-gallery .gallery-item:nth-child(5):hover .gallery-icon a::before { transform: translate(-50%, -50%) scale(1.04); } /* ========================================================= REMOVE DEFAULT GALLERY CAPTION STYLING ========================================================= */ .dh-project-gallery .gallery-caption br { display: block !important; } /* ========================================================= REMOVE DEFAULT SPACING ========================================================= */ .dh-project-gallery dt, .dh-project-gallery dd { margin: 0 !important; padding: 0 !important; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1024px) { .dh-project-gallery .gallery { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 6px; height: 420px !important; } .dh-project-gallery .gallery-item .gallery-caption { font-size: 18px !important; padding: 25px !important; } .dh-project-gallery .gallery-item:nth-child(5) .gallery-icon a::before { font-size: 16px !important; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .dh-project-gallery .gallery { display: grid !important; grid-template-columns: 1fr 1fr; grid-template-rows: 280px 170px 170px; gap: 5px; height: auto !important; } /* IMAGE 1 */ .dh-project-gallery .gallery-item:nth-child(1) { grid-column: 1 / 3 !important; grid-row: 1 !important; } /* IMAGE 2 */ .dh-project-gallery .gallery-item:nth-child(2) { grid-column: 1 !important; grid-row: 2 !important; } /* IMAGE 3 */ .dh-project-gallery .gallery-item:nth-child(3) { grid-column: 2 !important; grid-row: 2 !important; } /* IMAGE 4 */ .dh-project-gallery .gallery-item:nth-child(4) { grid-column: 1 !important; grid-row: 3 !important; } /* VIEW ALL */ .dh-project-gallery .gallery-item:nth-child(5) { grid-column: 2 !important; grid-row: 3 !important; } /* MOBILE CAPTION */ .dh-project-gallery .gallery-item .gallery-caption { font-size: 14px !important; padding: 20px !important; } /* VIEW ALL MOBILE */ .dh-project-gallery .gallery-item:nth-child(5) .gallery-icon a::before { font-size: 13px !important; letter-spacing: 0.06em !important; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .dh-project-gallery .gallery { grid-template-rows: 230px 140px 140px; gap: 4px; } .dh-project-gallery .gallery-item .gallery-caption { font-size: 12px !important; padding: 15px !important; } .dh-project-gallery .gallery-item:nth-child(5) .gallery-icon a::before { font-size: 11px !important; } }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-6c1500a *//* ========================================================= DESIGN HANDS PREMIUM PROJECT GALLERY ELEMENTOR BASIC GALLERY ========================================================= */ /* ========================================================= MAIN GALLERY WRAPPER ========================================================= */ .dh-project-gallery { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* ========================================================= MAIN GRID ========================================================= */ .dh-project-gallery .gallery { display: grid !important; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 6px; width: 100% !important; height: 480px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; box-sizing: border-box !important; } /* ========================================================= GALLERY ITEM ========================================================= */ .dh-project-gallery .gallery-item { position: relative !important; display: block !important; float: none !important; width: auto !important; max-width: none !important; height: auto !important; max-height: none !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; box-sizing: border-box !important; } /* ========================================================= GALLERY ICON ========================================================= */ .dh-project-gallery .gallery-icon { position: relative !important; display: block !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: #F5F3EE !important; box-sizing: border-box !important; } /* ========================================================= IMAGE LINK ========================================================= */ .dh-project-gallery .gallery-icon a { position: relative !important; display: block !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; text-decoration: none !important; box-sizing: border-box !important; } /* ========================================================= IMAGE ========================================================= */ .dh-project-gallery .gallery-icon img { display: block !important; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; object-fit: cover !important; object-position: center center !important; margin: 0 !important; padding: 0 !important; border: 0 !important; opacity: 1 !important; filter: none !important; transform: scale(1) !important; image-rendering: auto !important; transition: transform 0.65s cubic-bezier(.2,.65,.25,1) !important; } /* ========================================================= IMAGE HOVER ZOOM ========================================================= */ .dh-project-gallery .gallery-item:hover .gallery-icon img { transform: scale(1.035) !important; } /* ========================================================= IMAGE POSITIONS ========================================================= */ /* IMAGE 1 — LARGE */ .dh-project-gallery .gallery-item:nth-child(1) { grid-column: 1 !important; grid-row: 1 / 3 !important; } /* IMAGE 2 — TOP MIDDLE */ .dh-project-gallery .gallery-item:nth-child(2) { grid-column: 2 !important; grid-row: 1 !important; } /* IMAGE 3 — TOP RIGHT */ .dh-project-gallery .gallery-item:nth-child(3) { grid-column: 3 !important; grid-row: 1 !important; } /* IMAGE 4 — BOTTOM MIDDLE */ .dh-project-gallery .gallery-item:nth-child(4) { grid-column: 2 !important; grid-row: 2 !important; } /* IMAGE 5 — VIEW ALL */ .dh-project-gallery .gallery-item:nth-child(5) { grid-column: 3 !important; grid-row: 2 !important; } /* ========================================================= HIDE IMAGE 6 ONWARDS FROM THE GRID ========================================================= */ .dh-project-gallery .gallery-item:nth-child(n + 6) { display: none !important; } /* ========================================================= NORMAL IMAGE HOVER OVERLAY ========================================================= */ .dh-project-gallery .gallery-item:not(:nth-child(5)) .gallery-icon a::after { content: ""; position: absolute; inset: 0; z-index: 5; background: rgba(15, 15, 15, 0); transition: background 0.4s ease !important; pointer-events: none; } .dh-project-gallery .gallery-item:not(:nth-child(5)):hover .gallery-icon a::after { background: rgba(15, 15, 15, 0.18); } /* ========================================================= PROJECT CAPTION ========================================================= */ .dh-project-gallery .gallery-item .gallery-caption { position: absolute !important; left: 0 !important; right: 0 !important; top: 0 !important; bottom: 0 !important; z-index: 20 !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-direction: column !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 30px !important; box-sizing: border-box !important; background: rgba(20, 20, 20, 0.58) !important; color: #ffffff !important; text-align: center !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 0 !important; font-weight: 400 !important; line-height: 1.5 !important; letter-spacing: 0.02em !important; white-space: pre-line !important; opacity: 0 !important; visibility: hidden !important; transform: translateY(10px) !important; transition: opacity 0.45s ease, visibility 0.45s ease, transform 0.45s ease !important; pointer-events: none !important; } /* ========================================================= SHOW PROJECT CAPTION ON HOVER ========================================================= */ .dh-project-gallery .gallery-item:hover .gallery-caption { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; } /* ========================================================= CAPTION — BRAND / YEAR LINE ========================================================= */ .dh-project-gallery .gallery-item .gallery-caption::first-line { font-size: 12px; } /* ========================================================= CAPTION TEXT SIZE ========================================================= */ .dh-project-gallery .gallery-item .gallery-caption { font-size: 20px !important; font-weight: 400 !important; letter-spacing: 0.02em !important; } /* ========================================================= PROJECT CAPTION TOP LINE ========================================================= */ .dh-project-gallery .gallery-item .gallery-caption { text-shadow: 0 1px 4px rgba(0,0,0,0.25); } /* ========================================================= VIEW ALL TILE ========================================================= */ .dh-project-gallery .gallery-item:nth-child(5) .gallery-icon { background: #BEBEBC !important; } .dh-project-gallery .gallery-item:nth-child(5) .gallery-icon a { background: #BEBEBC !important; } /* ========================================================= VIEW ALL IMAGE ========================================================= */ .dh-project-gallery .gallery-item:nth-child(5) .gallery-icon img { width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; object-fit: cover !important; object-position: center center !important; transform: scale(1) !important; } /* ========================================================= VIEW ALL DARK OVERLAY ========================================================= */ .dh-project-gallery .gallery-item:nth-child(5) .gallery-icon a::after { content: ""; position: absolute; inset: 0; z-index: 10; background: rgba(55, 55, 53, 0.62); transition: background 0.4s ease !important; pointer-events: none; } /* ========================================================= VIEW ALL TEXT ========================================================= */ .dh-project-gallery .gallery-item:nth-child(5) .gallery-icon a::before { content: "+10\A VIEW ALL\A →"; white-space: pre; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 30; color: #ffffff !important; text-align: center !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 18px !important; font-weight: 400 !important; line-height: 1.4 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; pointer-events: none !important; transition: transform 0.4s ease !important; } /* ========================================================= VIEW ALL HOVER ========================================================= */ .dh-project-gallery .gallery-item:nth-child(5):hover .gallery-icon img { transform: scale(1.035) !important; } .dh-project-gallery .gallery-item:nth-child(5):hover .gallery-icon a::after { background: rgba(35, 35, 33, 0.78); } .dh-project-gallery .gallery-item:nth-child(5):hover .gallery-icon a::before { transform: translate(-50%, -50%) scale(1.04); } /* ========================================================= REMOVE DEFAULT GALLERY CAPTION STYLING ========================================================= */ .dh-project-gallery .gallery-caption br { display: block !important; } /* ========================================================= REMOVE DEFAULT SPACING ========================================================= */ .dh-project-gallery dt, .dh-project-gallery dd { margin: 0 !important; padding: 0 !important; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1024px) { .dh-project-gallery .gallery { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 6px; height: 420px !important; } .dh-project-gallery .gallery-item .gallery-caption { font-size: 18px !important; padding: 25px !important; } .dh-project-gallery .gallery-item:nth-child(5) .gallery-icon a::before { font-size: 16px !important; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .dh-project-gallery .gallery { display: grid !important; grid-template-columns: 1fr 1fr; grid-template-rows: 280px 170px 170px; gap: 5px; height: auto !important; } /* IMAGE 1 */ .dh-project-gallery .gallery-item:nth-child(1) { grid-column: 1 / 3 !important; grid-row: 1 !important; } /* IMAGE 2 */ .dh-project-gallery .gallery-item:nth-child(2) { grid-column: 1 !important; grid-row: 2 !important; } /* IMAGE 3 */ .dh-project-gallery .gallery-item:nth-child(3) { grid-column: 2 !important; grid-row: 2 !important; } /* IMAGE 4 */ .dh-project-gallery .gallery-item:nth-child(4) { grid-column: 1 !important; grid-row: 3 !important; } /* VIEW ALL */ .dh-project-gallery .gallery-item:nth-child(5) { grid-column: 2 !important; grid-row: 3 !important; } /* MOBILE CAPTION */ .dh-project-gallery .gallery-item .gallery-caption { font-size: 14px !important; padding: 20px !important; } /* VIEW ALL MOBILE */ .dh-project-gallery .gallery-item:nth-child(5) .gallery-icon a::before { font-size: 13px !important; letter-spacing: 0.06em !important; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .dh-project-gallery .gallery { grid-template-rows: 230px 140px 140px; gap: 4px; } .dh-project-gallery .gallery-item .gallery-caption { font-size: 12px !important; padding: 15px !important; } .dh-project-gallery .gallery-item:nth-child(5) .gallery-icon a::before { font-size: 11px !important; } }/* End custom CSS */