.section-material-animation-banner{margin-top:158px;position:relative}.section-material-animation-banner:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:url(/cdn/shop/files/image-of-sand.png?v=1749795915) no-repeat center/cover;opacity:0;transition:opacity 4s ease-in-out;z-index:0}.section-material-animation-banner .full-page-width{padding:166px 0 366px}.section-material-animation-banner .content-wrapper{text-align:center}.section-material-animation-banner .subheading h5{font-family:Lucida Grande;font-size:18px;color:#766e67;letter-spacing:.8px;line-height:1.7;font-weight:400;width:fit-content;margin:0 auto 15px;transition:all 2s ease}.section-material-animation-banner h2{font-family:Ivy Mode;font-size:180px;line-height:1;letter-spacing:7px;font-weight:400;text-transform:capitalize;color:#271f18;background:linear-gradient(to left,#8d7057,#271f18);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin:0;transition:all 2s ease}.section-material-animation-banner .title-wrapper-with-link{position:relative}.section-material-animation-banner .title-wrapper-with-link .title-wrapper{width:fit-content;background:#e1dcd6;position:relative;margin:0 auto;padding:0 30px;z-index:1;transition:all 2s ease}.section-material-animation-banner .title-wrapper-with-link:before{position:absolute;content:"";width:50%;height:1px;background:#5e5752;left:0;top:50%;transform:translateY(-50%);transition:all 1.5s ease}.section-material-animation-banner .title-wrapper-with-link:after{position:absolute;content:"";width:50%;height:1px;background:#5e5752;left:auto;right:0;top:50%;transform:translateY(-50%);transition:all 1.5s ease}.section-material-animation-banner .description{margin:80px 0 0}.section-material-animation-banner .description p{font-family:Lucida Grande;font-size:18px;letter-spacing:.8px;line-height:1.7;font-weight:400;margin:0 auto;max-width:800px;background:linear-gradient(to left,#8d7057,#271f18);-webkit-background-clip:text;-webkit-text-fill-color:transparent;transition:all 2s ease}.material-wave{position:absolute;bottom:0;left:50%;transform:translate(-50%);width:1150px;height:280px;background:url(/cdn/shop/files/animation-banner-wave.png?v=1749793449) no-repeat center/cover;z-index:1;transition:all 2.5s ease}.material-sand{position:absolute;bottom:0;left:50%;width:300px;height:264px;background:url(/cdn/shop/files/image-of-sand.png?v=1749795915) no-repeat center/cover;z-index:2;border-radius:100% 100% 0 0;transform:translate(-50%);transition:all 2.5s ease}.section-material-animation-banner .after-animation-information{position:absolute;z-index:3;top:50%;left:0;right:0;margin:0 32px;width:calc(100% - 64px);background:#ffffff21;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:12px;padding:104px 32px 80px;transition:all 1.5s ease;transform:translate(-110%,-50%)}.section-material-animation-banner .after-animation-information h5,.section-material-animation-banner .after-animation-information-mobile h5{font-family:Ivy Mode;font-size:42px;line-height:1.2;letter-spacing:1px;font-weight:400;color:#fff;max-width:70%;margin:0 auto}.section-material-animation-banner .after-animation-information h5 p,.section-material-animation-banner .after-animation-information-mobile h5 p{color:#fff}.section-material-animation-banner .after-animation-information-mobile{display:none}.section-material-animation-banner .content-wrapper{transition:all 2s ease;position:relative;z-index:9}.section-material-animation-banner.animate .content-wrapper{transform:translateY(-40%)}body.animate .new-header.new-custom-header header{background:transparent;transition:all 2s ease}body.animate .new-header.new-custom-header header{transform:translateY(-100%);transition:all 2s ease}.section-material-animation-banner.animate .title-wrapper-with-link:before,.section-material-animation-banner.animate .title-wrapper-with-link:after{width:0}.section-material-animation-banner.opacity-animate h2,.section-material-animation-banner.opacity-animate .description p{-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.4) 0%,rgba(0,0,0,.2) 50%,rgba(0,0,0,.2) 100%);*/ mask-image: linear-gradient(to right,rgba(0,0,0,.4) 0%,rgba(0,0,0,.1) 50%,rgba(0,0,0,.4) 100%);background:linear-gradient(to left,#e1dcd6,#271f18);-webkit-background-clip:text;-webkit-text-fill-color:transparent;transition:all 2s ease}.section-material-animation-banner.opacity-animate .subheading h5{-webkit-mask-image:linear-gradient(to left,rgba(0,0,0,.4) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0) 100%);background:linear-gradient(to right,#e1dcd6,#271f18);-webkit-background-clip:text;-webkit-text-fill-color:transparent;transition:all 2s ease}.section-material-animation-banner.opacity-animate .title-wrapper-with-link .title-wrapper{background:transparent;transition:all 2s ease}.section-material-animation-banner.opacity-animate:before{opacity:1}.section-material-animation-banner.space{margin:0;transition:all 2s ease}.section-material-animation-banner.animate .material-sand{width:350px;height:364px}.section-material-animation-banner.animate .material-wave{width:1200px;height:360px;transform:translate(-60%)}.section-material-animation-banner.animate.expand .material-sand{bottom:0;border-radius:0;opacity:1;width:100%;height:100%}.section-material-animation-banner.animate.show-message .subheading h5,.section-material-animation-banner.animate.show-message .description p,.section-material-animation-banner.animate.show-message h2{opacity:0;visibility:hidden;transition:all 2s ease}.section-material-animation-banner.show-message .after-animation-information{transform:translateY(-50%);transition:all 2s ease}@media screen and (max-width: 1440px){.section-material-animation-banner{margin-top:150px}.section-material-animation-banner .after-animation-information h5{max-width:95%}}@media screen and (max-width: 1380px){.section-material-animation-banner .after-animation-information h5{max-width:100%;font-size:38px}}@media screen and (max-width: 1280px){.section-material-animation-banner .after-animation-information h5{font-size:32px}.section-material-animation-banner h2{font-size:160px}}@media screen and (max-width: 1180px){.section-material-animation-banner h2{font-size:140px}}@media screen and (max-width: 1024px){.section-material-animation-banner .after-animation-information h5{font-size:28px}.section-material-animation-banner .description p{font-size:15px}}@media screen and (max-width: 991px){.section-material-animation-banner{margin-top:90px}.section-material-animation-banner .after-animation-information{padding:104px 24px 80px;margin:0 20px;width:calc(100% - 40px)}.section-material-animation-banner .after-animation-information h5,.section-material-animation-banner .after-animation-information-mobile h5{line-height:1.3;text-align:center;font-size:24px;letter-spacing:1.8px}.section-material-animation-banner .after-animation-information-mobile h5{max-width:100%}.section-material-animation-banner .description{margin:60px 0 0}.section-material-animation-banner h2{font-size:120px}.section-material-animation-banner .subheading h5{font-size:16px;line-height:1}.material-sand{width:240px;height:240px}}@media screen and (max-width: 799px){.section-material-animation-banner{overflow:hidden}.section-material-animation-banner .full-page-width{padding:78px 0 340px}.section-material-animation-banner .content-wrapper{padding:0 30px}.section-material-animation-banner .title-wrapper-with-link:after,.section-material-animation-banner .title-wrapper-with-link:before{display:none}.section-material-animation-banner .after-animation-information-mobile{display:block}.section-material-animation-banner .after-animation-information h5{opacity:0;visibility:hidden}.section-material-animation-banner .after-animation-information{top:0;transform:translateY(-120%);left:0;transition:all 3s ease}.section-material-animation-banner .after-animation-information-mobile{position:absolute;top:auto;bottom:0;transform:translateY(100%);left:0;z-index:5;padding:104px 24px 80px;margin:0 20px;width:calc(100% - 40px);transition:all 3s ease}.section-material-animation-banner.show-message .after-animation-information,.section-material-animation-banner.show-message .after-animation-information-mobile{transform:translateY(-50%);transition:all 3s ease;top:50%}}@media screen and (max-width: 680px){.section-material-animation-banner h2{font-size:96px}.material-sand{width:215px;height:218px}}@media screen and (max-width: 580px){.section-material-animation-banner{margin-top:66px}}@media screen and (max-width: 480px){.material-wave{width:850px;bottom:-38px;background-size:contain}}
/*# sourceMappingURL=/cdn/shop/t/116/assets/material-animation-banner.css.map */