/*
Theme Name: Jul Design Native
Description: Jul Design Webflow migration with native Gutenberg text and editable Jul Design layout and media blocks.
Version: 1.0.0
Author: Jul Design
*/
.jd-editor-note{padding:10px;background:#f0f6f6;color:#193c3c;font:13px sans-serif}
body{margin:0}
.wp-block-juldesign-layout,.wp-block-juldesign-text,.wp-block-juldesign-media{box-sizing:border-box}
.editor-styles-wrapper .block-editor-block-list__layout{max-width:none}
.editor-styles-wrapper [data-type="juldesign/layout"]>.block-editor-inner-blocks>.block-editor-block-list__layout{display:contents}
.editor-styles-wrapper [data-type="juldesign/layout"]>.block-editor-inner-blocks{display:contents}


	.nav {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  }


 html{
     -ms-text-size-adjust:100%;
     -webkit-text-size-adjust:100%;
     box-sizing:border-box;
     scroll-behavior:auto 
}
 body{
     -moz-osx-font-smoothing:grayscale;
     -webkit-font-smoothing:antialiased;
}
 .noise:after {
     animation: Noise 4s steps(10) infinite;
     content: "";
     height: 300%;
     left: -100%;
     pointer-events: none;
     position: absolute;
     top: -100%;
     width: 300%;
     background-image: url("images/noise.png");
}
 @keyframes Noise {
     0%{
         transform:translate(0) 
    }
     10%{
         transform:translate(-5%,-5%) 
    }
     20%{
         transform:translate(-10%,5%) 
    }
     30%{
         transform:translate(5%,-10%) 
    }
     40%{
         transform:translate(-5%,15%) 
    }
     50%{
         transform:translate(-10%,5%) 
    }
     60%{
         transform:translate(15%) 
    }
     70%{
         transform:translateY(10%) 
    }
     80%{
         transform:translate(-15%) 
    }
     90%{
         transform:translate(10%,5%) 
    }
     to{
         transform:translate(5%) 
    }
}
 body:hover .buttons-wrapper {
    opacity:1.0;
}


.track-horizontal {
  position: absolute;
  white-space: nowrap;
  will-change: transform;
  animation: marquee-horizontal 100s linear infinite;
  /* manipulate the speed of the marquee by changing "40s" line above*/
}
@keyframes marquee-horizontal {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---- Native blog (Claude) ---- */
.jd-article{display:block}
.jd-article>p,.jd-article>ul,.jd-article>ol{color:var(--black-text);margin-bottom:40px;font-size:17px;line-height:30px}
.jd-article>ul li,.jd-article>ol li{margin-bottom:8px}
.jd-article>h2{color:#202146;margin-top:40px;margin-bottom:20px;font-size:32px;line-height:1.25}
.jd-article>h3{color:#202146;margin-top:32px;margin-bottom:16px}
.jd-article img{max-width:100%;height:auto;border-radius:24px}
.jd-article figure{margin:0 0 40px}
.jd-article a{color:#00b3c4}
.jd-back{margin:0 0 80px}.jd-back a{color:var(--black-text);font-weight:600;text-decoration:none}
.blog-image-wrap-2 .blog-image-4{height:auto;aspect-ratio:760/620;object-fit:cover}
.categories-pill.jd-active{background:#202146}.categories-pill.jd-active .title-small{color:#fff}
.jd-404-code{font-size:96px;line-height:1;font-weight:700;color:#00c9d9;margin:0 0 12px}
.jd-404-actions,.jd-search-page{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin-top:24px}
.jd-search-page{justify-content:flex-start;margin:0 0 48px;max-width:640px}.jd-search-page .w-input{flex:1;min-width:200px;margin:0}
.jd-btn{display:inline-block;background:#000;color:#fff;border-radius:100px;padding:14px 28px;text-decoration:none;border:0;font:inherit;cursor:pointer}
.jd-btn-ghost{background:#fff;color:#000;border:1px solid #000}
@media (max-width:767px){.jd-article>h2{font-size:26px}.jd-404-code{font-size:72px}}
.error404 .title-centre,.search .title-centre{text-align:center;display:flex;flex-direction:column;align-items:center}
.error404 .jd-404-code{color:#fff;opacity:.85}
.error404 .title-centre .paragraph-detials-large-2{color:#fff;margin-bottom:0}
.error404 .nav-link-3.w--current{border-bottom-color:transparent}
/* CTA heading is now h2 (one h1 per page) – keep the old h1 look */
h2.banner-h1{font-family:Merriweather,serif;font-size:62px;font-weight:700;line-height:120%;margin-top:0;margin-bottom:60px}
@media screen and (max-width:991px){h2.banner-h1{font-size:50px;text-align:center;margin-bottom:40px}}
@media screen and (max-width:767px){h2.banner-h1{font-size:36px;line-height:140%;margin-bottom:20px}}
@media screen and (max-width:479px){h2.banner-h1{font-size:24px;margin-bottom:10px}}