/*
Theme Name: LogicAI
Theme URI: Arch
Author: Arch
Author URI: archcreative.co.uk
Description: 
Version: 1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: 
Text Domain: 
*/
 
 @import url("https://use.typekit.net/jis7mzn.css");
 @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');


:root{
	--blue:#143DFF;
	--blue-dark:#1031CC;
	--blue-darkest:#1329a2;
	--white:#FBFBFC;
	--black:#0D0E0E;
	--serif:"aesthet-nova";
	--sans:"Inter", sans-serif;
}

* { box-sizing: border-box; }
/* ===== GENERAL ===== */
html, body { width:100%;margin:0;padding:0;overflow-x:hidden;background:var(--blue-darkest);font-family:var(--sans);color:var(--white);cursor: url("/wp-content/themes/logicai/img/cursor.svg") 0 0, default;}


.ontop { z-index:10; }

.bg-gradient { background:url("/wp-content/themes/logicai/img/noise-2.png") repeat center;background-size:auto 500px;position:fixed;top:0;left:0;width:100%;height:100%;mix-blend-mode: multiply;opacity:0.6;  }

h1,h2,h3,h4,h5,h6 { font-family:var(--serif);font-weight:400;margin-top:0;  }
h1 { font-size:clamp(2rem,6vw,4rem); }
h1 span { font-family:"Inter";font-style: italic;font-weight: 200;}
h2 { font-size:clamp(1.5rem,5vw,3rem);letter-spacing: -0.03rem;font-weight:400; }
h3 { font-size:clamp(1.2rem,3vw,2.5rem);font-weight:400;letter-spacing:-0.025rem; }

p { letter-spacing:-0.01rem;font-weight:300;text-wrap:pretty;text-wrap-style:pretty; }
p.large { font-size:clamp(1.1rem,3vw,1.5rem);font-weight:500;letter-spacing:-0.015rem; }

a.button { color:var(--white);border:1px solid var(--white);display:inline-block;text-decoration:none;border-radius:10vw;padding:0.75rem 1rem; }

.cursors { position:fixed;width:1px;height:1px;overflow: hidden;}
a.button:hover, button:hover { cursor: url("/wp-content/themes/logicai/img/cursor.svg") 0 0, default;background:var(--blue-dark);color:var(--white); }
/* a:hover, button:hover, a.button:hover { cursor: url("/wp-content/themes/logicai/img/cursor.svg") 0 0, default;animation-name: hoverAnim;animation-duration: 0.5s;animation-iteration-count: infinite; } */

a:hover, button:hover, a.button:hover { cursor: url("/wp-content/themes/logicai/img/cursor.svg") 0 0, default; }


@keyframes hoverAnim {
  0%   {cursor: url("/wp-content/themes/logicai/img/cursor.svg") 0 0, default;}
  20%  {cursor: url("/wp-content/themes/logicai/img/cursor-3.svg") 0 0, default;}
  50%  {cursor: url("/wp-content/themes/logicai/img/cursor-4.svg") 0 0, default;}
  60%  {cursor: url("/wp-content/themes/logicai/img/cursor-3.svg") 0 0, default;}
  80%  {cursor: url("/wp-content/themes/logicai/img/cursor-2.svg") 0 0, default;}
  100%  {cursor: url("/wp-content/themes/logicai/img/cursor.svg") 0 0, default;}
}


.container { width:100%;max-width:70rem;margin:0 auto; }
.container-mid { width:100%;max-width:56rem;margin:0 auto; }
.container-small { width:100%;max-width:46rem;margin:0 auto;  }


section { height: 100vh;position: relative;width:100%;text-align: center;z-index:2;overflow:hidden;padding:2rem; }
section.single-column { text-align:left;padding:10rem 2rem;height:auto;margin-bottom:3rem; }
.contents { position: relative;top:0;left:0;width:100%;height:100%;display: flex;align-items: center;justify-content: center; }
/* .visible .contents { top:0; }
.visible.out .contents { top:-100%; } */


#banner a.button { margin:0 0.75rem; }
.logo { position: absolute;top:3rem;left:50%;transform: translateX(-50%); }
.particle-layer { position: fixed;top:0;left:0;width:100%;height:100%;filter:blur(4rem); }
.particle-layer.blur { filter:blur(8rem); }
.particle-layer.clouds { filter:blur(0rem);width:100%;mask-image:linear-gradient(90deg,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 1) 100%); }
.particle-layer.clouds.right { left:75%;mask-image: linear-gradient(black, transparent); }


.how-flex { display:flex;flex-wrap:wrap;text-align:left;gap:clamp(3rem, 10vw, 8rem);row-gap:1rem; }
.how-flex > div:first-child { flex:0 1 22rem; }
.how-flex > div:last-child { flex: 1 1 300px;min-width:300px; }

.how-grid { display:flex;flex-wrap:wrap;gap:2.5rem; }
.grid-item { background:var(--white);border-radius:2.5rem;padding:2.5rem;color:var(--black);display:flex;flex-wrap:wrap;gap:2.5rem;width:100%; }
.grid-item > div:first-child { flex:0 1 6.5rem; }
.grid-item > div:last-child { flex:1 0 12rem; }
.grid-item h3 { color:var(--blue);margin:0; }
.grid-item a.button { border-color:var(--blue);color:var(--black); }
.grid-item a.button:hover { color:var(--white); }

.icon { background:url("/wp-content/themes/logicai/img/icon-bg.svg") no-repeat center;background-size:contain;width:6.25rem;height:6.25rem;display:flex;justify-content: center;align-items:center; }
.icon img { width:2.5rem;height:2.5rem;object-fit: contain; }
.step { font-size:0.875rem;font-weight:500;letter-spacing:-0.00875rem; margin-bottom:0.75rem;display:inline-block;}

.grid-item { transition:all 0.3s ease-in-out; }
/* .grid-item:not(.active) { filter:blur(0.5rem);gap:1.5rem; }
.grid-item:not(.active) :is(p, span, a.button) { display:none; }
.grid-item:not(.active) .icon { width:3.75rem;height:3.75rem; }
.grid-item:not(.active) > div:first-child { flex:0 1 3.75rem; } */

.how-grid { position:relative;top:100px;min-height:290px; }
.how-grid .grid-item { display:flex;position:absolute;top:200px;left:0;width:100%;filter:blur(1rem);transform:scale(0.8);opacity:0; }
.how-grid .grid-item.active { display:flex;top:0;z-index:2;filter:blur(0rem);transform:scale(1);opacity:1; }
.how-grid .grid-item.active + .grid-item { display:flex;top:200px;opacity:0.4; }
.how-grid .grid-item:has(+ .active) { display:flex;top:-100px;opacity:0.4; }
.how-grid:not(:has(.active)) .grid-item:first-child { top:0;z-index:2;filter:blur(0rem);transform:scale(1);opacity:1 }
.how-grid:not(:has(.active)) .grid-item:nth-child(2) {top:200px;opacity:0.4; }

/* .price-flex { display:flex;flex-wrap:wrap;gap:2rem;margin:3.75rem auto 2.5rem; } */
/* .price-flex > div { flex:0 1 22rem;text-align:center; } */
.price-box { background:var(--white);padding:2.5rem;border-radius:2.5rem;display:flex;flex-wrap:wrap;color:var(--blue-dark);max-width:18.75rem;display:block;margin:1.5rem auto;}
.price-box * { width:100%;font-weight:500; }
.price-box .price-small { font-size:2rem;font-weight:400;letter-spacing: -0.02rem;font-family:var(--serif); }
.price-box img { height:1rem;object-fit: contain;margin:1rem 0;}
.price-box span { font-size:1rem;text-align:center;width:100%;display:block; }
.price-box .price-large, .price-box .price-large span { font-size:4.5rem;font-weight:400;font-family:var(--serif);display:inline; }
.price-flex > div:nth-child(1) .price-box { transform:rotate(-1deg); }
.price-flex > div:nth-child(2) .price-box { transform:rotate(2deg); }
.price-flex > div:nth-child(3) .price-box { transform:rotate(-2deg); }
.slider-arrows.results { margin-bottom:2rem; }
.staff { display:flex;justify-content: center;gap:0.5rem; }

.block-slide { background:var(--white);border-radius:2.5rem;padding:2.5rem;max-width:22rem;text-align:center;margin:0 auto;height:100%; }
.block-slide .icon { width:10rem;height:10rem;background:url("/wp-content/themes/logicai/img/icon-bg-round.svg") no-repeat center;background-size:contain;margin:0 auto 1.5rem; }
.block-slide .icon img { width:4rem;height:4rem; }
.block-slide span { font-size:2rem;font-family:var(--serif);color:var(--blue-dark);letter-spacing:-0.02rem; }
.block-slider { margin:4.5rem 7rem; }
.block-slider .slick-list { overflow:visible; } 
.block-slider .slick-slide { opacity:0;filter:blur(0.5rem);transition:all 0.4s ease-in-out;margin:0 -4rem;transform:rotate(-21deg) scale(0.5) translate(70%, 80%); }
.block-slider .slick-track { display: flex !important;align-items: stretch; }
.block-slider .slick-slide {height: auto !important; }
.block-slider .slick-slide > div, .block-slider .slick-slide > div > div { height:100%; }

.block-slider .slick-slide:has( + .slick-active), 
.block-slider .slick-slide.slick-active + .slick-slide:not(.slick-center, .slick-active) {opacity:0.2;filter:blur(0.3rem);transform:rotate(-14deg) scale(0.7) translate(25%, 25%); }

.block-slider .slick-slide.slick-active { opacity:0.5;filter:blur(0.3rem);transform:rotate(-7deg) scale(0.85); }
.block-slider .slick-slide.slick-center + .slick-slide.slick-active { transform:rotate(7deg) scale(0.85); }

.block-slider .slick-slide.slick-active + .slick-slide:not(.slick-center, .slick-active) { transform:rotate(14deg) scale(0.7) translate(-25%, 25%); }
.block-slider .slick-slide.slick-active + * + * + * + .slick-slide:not(.slick-center) { transform:rotate(21deg) scale(0.5) translate(-70%, 80%); }

.block-slider .slick-slide.slick-center { opacity:1;z-index:2;filter:blur(0px);transform:rotate(0deg);z-index:9999;position:relative; } 


.slider-arrows { position:relative;z-index:2;display:flex;gap:1.5rem;justify-content: center; }
.slick-slider { margin-bottom:2.5rem; }
.slick-prev, .slick-next, .slick-prev:hover, .slick-next:hover, .slick-prev:focus, .slick-next:focus { z-index:999;position:static;width:2rem;height:1.5rem;background:url("/wp-content/themes/logicai/img/arrow-left.svg") no-repeat center;background-size:contain;top:0;left:0;position: static;transform:none; }
.slick-next, .slick-next:hover, .slick-next:focus { transform:scaleX(-1); }
.slick-prev:hover, .slick-next:hover { opacity:0.5; }
.slick-prev:before, .slick-next:before { display:none; }

span.quote { font-size:clamp(1.8rem,3vw,2.5rem);font-weight:300;line-height:120%;letter-spacing:-0.025rem;margin-bottom:2.5rem;display:inline-block; }
span.name { font-size:0.875rem;line-height:140%;font-weight:500; } 


form :is(input, select, textarea) { width:100%;display:block;padding:0.75rem 0rem;border:none;border-bottom:1px solid #6262e4;background:transparent;color:var(--white); }
form select:focus, form select:active { color:var(--black); }
form textarea { border:1px solid #6262e4;border-radius:1rem;margin-top:1rem;font-family:var(--sans);padding:1rem; }
form { text-align:left;margin-top:2.5rem; }
::placeholder { color:var(--white); }
form :is(label, input, textarea, select) { font-size:1rem;font-weight:500;letter-spacing: -0.01rem; }
form button { background:transparent;border:1px solid #6262e4;color:var(--white);padding:0.75rem 1rem;border-radius:100rem;font-size:1rem; }
.forminator-row-last { text-align:right; }


.logo-stars { position: absolute;top:50%;left:50%;transform:translate(-50%, -50%);max-width:100%;width:100%; }
.logo-stars svg { width:calc(100% - 2rem); }
path.star { opacity:0;transition:all 0.4s ease-in-out; }
path.star:nth-child(odd) { transition:all 1.2s ease-in-out; }
path.star.visible { opacity:1; }


.scroll-disabled .how-grid .grid-item, .scroll-disabled .how-grid .grid-item.active + .grid-item { position: static;filter:blur(0rem);opacity:1;transform:scale(1); } 

footer { position:static;bottom:0;left:0;width:100%;padding:0 1rem; }
.footer-flex { display:flex;justify-content: space-between;align-items: baseline;flex-wrap:wrap; }
footer a { text-decoration: none;color:var(--white);margin-left:1rem; }
footer a img { margin-left:-1rem;}
footer a:hover { color:var(--black); }


@media(max-height:1000px){
	.contents { transform:scale(0.9);}
}


@media(max-height:850px){
	.contents { transform:scale(0.8);}
}

@media(max-width:768px){
	.block-slider { margin:2rem 0;}
	.how-grid { top:0; }
	.how-grid .grid-item:has(+ .active) { opacity:0; }
	section { height:auto;padding:8rem 1rem;margin:8rem 0; }
	.contents { position:static; }
	path.star { opacity:1; }

	.how-grid .grid-item, .how-grid .grid-item.active + .grid-item { position: static;filter:blur(0rem);opacity:1;transform:scale(1); }

	.block-slide { padding:1.5rem 2.5rem;width:calc(100% - 2rem); }
	.block-slide .icon { width:8rem;height:8rem; }
	.block-slide .icon img { width:3rem;height:3rem;}
	.block-slide span { font-size:1.5rem; }
}