* {
  box-sizing: border-box;
}

*, ::before, ::after {
  box-sizing: border-box;
}

html {
       margin: 0;
       padding: 0;
       scroll-behavior: smooth;
}

/* Optimazation */
a,abbr,acronym,address,applet,b,big,blockquote,body,center,cite,code,dd,del,dfn,div,dl,dt,em,fieldset,font,form,h1,h2,h3,h4,h5,h6,html,i,iframe,img,ins,kbd,label,legend,li,object,ol,p,pre,q,s,samp,small,span,strike,strong,sub,sup,tt,u,ul,var {
 margin: 0;
 padding: 0;
 /* font: inherit; */
 vertical-align: baseline;

}


/* Animation */
@keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}

@keyframes slide_translate {
0%{transform: translateX(-100%);}
100%{transform: translateX(0%)}
}

@keyframes vertical_unfold_translate {
from {height : 0%; }
to { height: 100% ;}
}
@keyframes vertical_refract_height {
from {height: 90vh}
to {height: 30vh;}
}
@keyframes slide-up {
from {transform: translateY(100%) ;}
to {transform: translateY(0%);}
}

@keyframes fadeOut {
from {opacity: 1;}
to {opacity: 0;}
}

@keyframes sliderLtoR {
  from {transform: translateX(0%);}
  height {transform: translateX(-100%);}
}
@keyframes scaleUp {
50% {scale: 1;}
50% {scale: 1.05;}
}
@keyframes fadeDrop {
from {padding-top: 30%;}
to {padding: initial;}
}
/* @keyframes fadeDown {
  from {height: 0%;}
  to {height: initial;}
  } */
.fadeDrop {animation: running ease 1.3s fadeDrop;}

:root {
 --color-B-01: #002aff;
 --color-B-02: #778eff;
 --color-B-03: #b1beff;
 --color-B-04: #99aaff;
 --color-B-05: #5161ae;
 --color-B-06: #273ba1;
 --color-B-07: #001686;
 --color-B-08: #202851;
 --color-B-09: #14205b;
 --color-B-10: #000d4b;
 --color-V-01: #00ff2f;
 --color-V-02: #7cff94;
 --color-V-03: #adffbc;
 --color-V-04: #85f69a;
 --color-V-05: #68c77a;
 --color-V-06: #47a058;
 --color-V-07: #2e9e43;
 --color-V-08: #008518;
 --color-V-09: #244e2c;
 --color-V-10: #0b5419;
 --color-R-01: #ff3700;
 --color-R-02: #fc8666;
 --color-R-03: #ffc4b4;
 --color-R-04: #b9664f;
 --color-R-05: #ba5033;
 --color-R-06: #8e584a;
 --color-R-07: #913f28;
 --color-R-08: #7e1b00;
 --color-R-09: #351006;
 --color-R-10: #581300;
 --color-T-01: #00eaff;
 --color-T-02: #7bf4ff;
 --color-T-03: #c0faff;
 --color-T-04: #38a0a9;
 --color-T-05: #3e6f74;
 --color-P-01: #d400ff;
 --color-P-02: #ea81ff;
 --color-P-03: #f5c3ff;
 --color-P-04: #9300b1;
 --color-P-05: #6d207c;
 --color-O-01: rgb(230, 132, 13);
 --color-O-01:rgb(255, 182, 94);
 --color-O-01:rgb(255, 205, 144);
 --color-O-01:rgb( 155, 110, 56);
 --color-O-01: rgb(79, 44, 0);

 --fill-svg:rgb(230, 132, 13);
 --black: black;
 --white: white;
 --padding-arrangement-S01: 0 10% 0 10%;
 --padding-arrangement-S02: 2% 10% 2% 10%;
 --padding-arrangement-S02: 2% 15% 2% 15%;
 --padding-arrangement-S03: 2% 20% 2% 20%;

 --padding-arrangement-M01: 5% 10% 5% 10%;
 --padding-arrangement-M02: 5% 10% 5%% 10%;
 --padding-arrangement-M02: 5% 15% 5% 15%;
 --padding-arrangement-M03: 5% 20% 5% 20%;


 --padding-space-desktop: 0 10rem;
 --padding-space-mobile: 0 0rem;
 --padding-center: 0.5rem;

 --font-small-visibility: 2rem;
 --font-medium: 1.5rem;
 --font-size-header: 1.3rem;
 --dark-shaddow: 5px 5px black;
 --light-shaddow: 5px 5px white;

 --black_styled: rgb(15, 15, 15);


}

body {
     margin: 0;
     padding: 0;
     z-index: 9999;
}

.padding_arr_low {padding: 0 10% 0 10%;}
.padding_arr_high {padding: 2% 20% 2% 20%;;}
.font_size_low {font-size: 1.3rem;}
.font_size_medium {font-size: 1.5rem;}
.font_size_big {font-size: 2rem}
.font_size_bigger {font-size: 2.5rem;}
.font_size_monster {font-size: 4rem;}

.unreasHeader {font-size: 7rem; }
@-webkit-keyframes kenburns-right{0%{-webkit-transform:scale(1) translate(0,0);transform:scale(1) translate(0,0);-webkit-transform-origin:84% 50%;transform-origin:84% 50%}100%{-webkit-transform:scale(1.25) translateX(20px);transform:scale(1.25) translateX(20px);-webkit-transform-origin:right;transform-origin:right}}@keyframes kenburns-right{0%{-webkit-transform:scale(1) translate(0,0);transform:scale(1) translate(0,0);-webkit-transform-origin:84% 50%;transform-origin:84% 50%}100%{-webkit-transform:scale(1.25) translateX(20px);transform:scale(1.25) translateX(20px);-webkit-transform-origin:right;transform-origin:right}}
.kenburns-right{-webkit-animation:kenburns-right 12s ease-out both;animation:kenburns-right 12s ease-out both}

.wallpaper { margin: 0; background: url(./ImageBank/11.jpg); object-fit: cover;background-size: cover;width: 100vw;height: 100vh;z-index: -2;position: absolute;background-position: center;}
.wallpaper2 { margin: 0; background: url(./ImageBank/6.jpg); object-fit: cover;background-size: cover;width: 100vw;height: 100vh;z-index: -2;position: absolute; background-position: center;}
.wallpaper3 { margin: 0; background: url(./ImageBank/13.jpg); object-fit: cover;background-size: cover;width: 100vw;height: 100vh;z-index: -2;position: absolute; background-position: center;}
.wallpaper4 { margin: 0; background: url(./ImageBank/9.jpg); object-fit: cover;background-size: cover;width: 100vw;height: 100vh;z-index: -2;position: absolute; background-position: right;}
.wallpaper5 { margin: 0; background: url(./ImageBank/12.jpg); object-fit: cover;background-size: cover;width: 100vw;height: 100vh;z-index: -2;position: absolute; background-position: center;}

.stickyHeader {
  align-items: center;
  position: fixed;
  left: 0; right: 0;
  padding: 2%;
  display: flex;
  justify-content: center;
  flex-direction: row;
  background-color: rgba(0, 0, 0, 0.7);
  color: rgb(88, 177, 141);
  z-index: 1;
}

.stickyHeader:hover {background-color: rgba(88, 177, 141, 0.744); color: white; transition: 0.6s ease; }
.stickyHeader p:hover {background-color: rgba(88, 177, 141, 0.744); color: white; transition: 0.6s ease;}

.headers {
     gap: 3rem;
       display:flex;
       font-size: var(--font-size-header);
       position: fixed;
}

.svg_btn {display: none;}

.protest-revolution-regular {font-family: "Protest Revolution", sans-serif; font-weight: 800;font-style: normal;}

.lexend-giga-bita { font-family: "Lexend Giga", serif;font-optical-sizing: auto;font-weight: 400;font-style: normal;}

.karla-bita {font-family: "Karla", serif;font-optical-sizing: auto;font-weight: 400;font-style: normal;}

.kanit-regular {font-family: "Kanit", serif;font-weight: 400;font-style: normal;}

.satisfy-regular {font-family: "Satisfy", cursive;font-weight: 400;font-style: normal;}

.cinzel-regular {font-family: "Cinzel", serif;font-optical-sizing: auto;font-weight: 400;font-style: normal;}

.marcellus-regular {font-family: "Marcellus", serif;font-weight: 400;font-style: normal;}

.bebas-neue-regular {font-family: "Bebas Neue", serif;font-weight: 400;font-style: normal}

.bungee-hairline-regular { font-family: "Bungee Hairline", sans-serif; font-weight: 400; font-style: normal;}

.great-vibes-regular {font-family: "Great Vibes", serif;font-weight: 600;font-style: normal;}

.gruppo-regular { font-family: "Gruppo", serif;font-weight: 400;font-style: normal;}
.audiowide-regular {font-family: "Audiowide", sans-serif;font-weight: 400;font-style: normal;}

.moon-dance-regular { font-family: "Moon Dance", cursive; font-weight: 400; font-style: normal;}

.dancing-script-soso {font-family: "Dancing Script", cursive;font-optical-sizing: auto;font-weight: 400;font-style: normal;}

.rowdies-regular {font-family: "Rowdies", sans-serif;font-weight: 400;font-style: normal;}

.caveat-soso { font-family: "Caveat", cursive; font-optical-sizing: auto; font-weight: 400; font-style: normal;}

.yatra-one-regular { font-family: "Yatra One", system-ui;font-weight: 400;font-style: normal;}

.macondo-regular {font-family: "Macondo", cursive;font-weight: 400;font-style: normal;}


.barriecito-regular { font-family: "Barriecito", system-ui; font-weight: 400; font-style: normal;}

.berkshire-swash-regular { font-family: "Berkshire Swash", serif; font-weight: 400; font-style: normal;}

.rubik-bubbles-regular {font-family: "Rubik Bubbles", system-ui;font-weight: 400;font-style: normal;}

.rubik-puddles-regular {font-family: "Rubik Puddles", system-ui;font-weight: 400;font-style: normal;}

.rubik-glitch-regular {font-family: "Rubik Glitch", system-ui;font-weight: 400;font-style: normal;}

.julius-sans-one-regular { font-family: "Julius Sans One", sans-serif; font-weight: 400; font-style: normal;}

.mr-dafoe-regular {font-family: "Mr Dafoe", cursive;font-weight: 400;font-style: normal;}

.miltonian-tattoo-regular { font-family: "Miltonian Tattoo", serif;font-weight: 400;font-style: normal;}


.metal-mania-regular {font-family: "Metal Mania", system-ui;font-weight: 400;font-style: normal;}

.unifrakturcook-bold { font-family: "UnifrakturCook", cursive; font-weight: 700; font-style: normal;}


.inconsolata-regular {font-family: "Inconsolata", monospace;font-optical-sizing: auto;font-weight: 400;font-style: normal;font-variation-settings:"wdth" 100;}

.source-code-pro-regular {font-family: "Source Code Pro", monospace;font-optical-sizing: auto;font-weight: 400;font-style: normal;}



a {color: rgb(88, 177, 141); text-decoration: none;}
ul {list-style: none; }
footer {color: rgb(255, 255, 255); position: inherit; bottom: 0; left: 0; right: 0; text-align: center; background-color: black;}

.sections {position: relative; cursor: pointer;}
.sections {font-family: "Audiowide";}
.sections::before{

  content: "";
  background-color:  rgb(88, 177, 141);
  opacity: 0.8;
position: absolute;
bottom: 0;
left: 0%;
height: 30px;
width: 0;
transition: 0.4s ease ;

}
.sections:hover::before, .sections:focus::before {
  width: 100%;
 }



.lang::before {
  content: "🌐";

}

.lang {
  display: flex;
  margin-left: auto;
  color:  rgb(88, 177, 141);
  position: relative;
  font-size: 1.5rem;
}


.boxes {

position: absolute;

}
.boxLang {
 margin: 2px;
  color: black;
  background-color:  rgb(88, 177, 141);
  border-radius: 30px;
  border: none;

  font-size: var(--font-size-header);
}

.boxLang:hover {
  color:  rgb(88, 177, 141);
  background-color: black;
  transition:  0.3s ease;}

title {font-family: "Bungee Hairline", serif;}
  h1 {font-family: "Audiowide", serif; color: rgb(88, 177, 141);}
  h2 {font-family: "Bungee Hairline", serif;}
  h3 {font-family: "Kanit", serif;}
  h4 {font-family: "Gruppo";}
  li, p  {font-family: "Kanit";}
  ol, ul {font-family: "Gruppo"; }
  hr {color: white; background-color: aliceblue;}
  button {font-family: "Audiowide"; border:solid transparent;}
  input {font-family: "Audiowide";}
  textarea {font-family: "Kanit";}
a {font-family: "Kanit"}
span {font-family: "Audiowide";}


.firstViewI {padding-top: 10%;}
.firstViewII {padding-top: 10%;}
.firstViewIII {padding-top: 10%;}
.firstViewIV {padding-top: 10%;}
.firstViewV {padding-top: 10%;}

.marginRule {margin-left: auto; margin-right: auto;}
.whiteSpacing {margin: 5rem;}
.slots { font-family: "Bungee Hairline"; background-color: rgba(88, 177, 141, 0.509); color: rgba(255, 255, 255, 0);  margin-left: auto; margin-right: auto;z-index: 1000;width: 100%;text-align: center; position: fixed;--c:#ffffff;font-weight:700;overflow:hidden;animation:8s linear infinite l6}.slots::before{content: '';} @keyframes l6{50%{text-shadow:-11ch 0 var(--c)}}


main { display: flex;justify-content: center; flex-direction: column;}
.centered-main {display: grid; justify-content: center; }

.loader{width:fit-content;font-weight:700;white-space:pre;line-height:1.2em;height:1.2em;overflow:hidden}.loader:before{content:"Modern Website\A Bodern Website\A Budern Website\A Buiern Website\A Build Website\A Build Febsite\A Build FA\A Build FAS\A Build FAST\A";white-space:pre;display:inline-block;animation: 1.4s steps(9) infinite alternate l39}@keyframes l39{100%{transform:translateY(-100%)}}
.loader3{display:inline-grid;overflow:hidden}.loader3:after,.loader3:before{content:"SIDEVAS";grid-area:1/1;clip-path:inset(0 -100% 50%);text-shadow:-10ch 0 0;animation:2s infinite l13}.loader3:after{clip-path:inset(50% -100% 0%);text-shadow:10ch 0 0;--s:-1;animation-delay:1s}@keyframes l13{100%,25%{transform:translateX(calc(var(--s,1)*100%))}}

.goBuy {cursor: pointer; padding: 1rem; width: fit-content; background-color: azure; box-shadow: 0px 0px 5px  rgb(88, 177, 141); color:  rgb(88, 177, 141); height: fit-content; border-radius: 30px;}

.homePhase {width: 100vw; height: 90vh;  display: flex; justify-content: center; align-items: center; align-content: center; text-align: center;}
.secondPhase {width: 100vw; height: fit-content; background-color: white; display: grid; justify-content: center; gap: 1rem;}
.thirdPhase {width: 100vw; height: fit-content; background-color: white;display: grid; justify-content: center;gap: 1rem;padding: 7% 2% 7% 2%;}
.fourPhase {width: 100vw; height: fit-content; background-color: white;display: grid; justify-content: center;gap: 1rem;}
.galleryPhase {width: 100vw; height: fit-content; background-color: white;display: grid; justify-content: center;}
.contactPhase {padding: 1rem; width: 100vw; height: fit-content; color: white; background-color: black;display: flex; justify-content: center;gap: 1rem;}
.location{width: 200px; height: 200px;}

.leftSplit {display:  grid; justify-content: center; text-align: center; align-content: center; text-align: center; margin-right: 3rem;}
.rightSplit {display: grid; justify-content: center; text-align: center; align-content: center;text-align: center; margin-left: 3rem;}

@keyframes floating{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}@keyframes particles{0%{transform:translateZ(0,0);opacity:1}100%{transform:translate(190px,50px);opacity:0}}.button{position:relative;background:rgba(57,57,57,.7);display:inline-block;background-size:200% auto;border:1px solid;border-radius:25px;color:#fff;padding:10px 20px;font-size:18px;text-transform:uppercase;box-shadow:0 0 0 0 rgba(255,255,255,.7);animation:3s ease-in-out infinite floating;transition:color .3s,box-shadow .3s,transform .3s}.button::before{content:"";position:absolute;top:-5px;left:-5px;right:-5px;bottom:-5px;border-radius:30px;box-shadow:0 0 20px #ff7730;opacity:0;pointer-events:none;transition:opacity .3s;width:5px;height:5px;background:#ff7730;animation:2s infinite particles}.button::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.button:hover{color:#ffb900;box-shadow:0 0 0 10px rgba(255,255,255,.4);transform:scale(1.05);background-position:right center;background:linear-gradient(to right,#ffb900,#ff7730);-webkit-background-clip:text;-webkit-text-fill-color:transparent}

.comment {font-family: "Caveat"; font-size: larger;}
.intro {width: 50vw;}
.mouse-btn{ margin:10px auto;width:40px;height:80px;border:3px solid rgba(122,122,124,.918);border-radius:20px;display:flex}.mouse-scroll{display:block;width:20px;height:20px;background:linear-gradient(170deg,rgba(122,122,124,.918),#7b7c7c);border-radius:50%;margin:auto;animation:1s linear infinite scrolling13}@keyframes scrolling13{0%{opacity:0;transform:translateY(-20px)}100%{opacity:1;transform:translateY(20px)}}

/*CARD INFO  */
.card{--card-bg:#ffffff;--card-accent:rgb(88, 177, 141);--card-text:#1e293b;--card-shadow:0 10px 15px -3px rgba(0, 0, 0, 0.05);width:fit-content;height:fit-content;background:var(--card-bg);border-radius:20px;position:relative;overflow:hidden;transition:.5s cubic-bezier(.16, 1, .3, 1);box-shadow:var(--card-shadow);border:1px solid rgba(255,255,255,.2);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,sans-serif}.card__glow,.card__shine{position:absolute;opacity:0}.card__shine{inset:0;background:linear-gradient(120deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.8) 50%,rgba(255,255,255,0) 60%);transition:opacity .3s}.card__glow{inset:-10px;background:radial-gradient(circle at 50% 0,rgba(88, 177, 141, 0.356) 0,rgba(124,58,237,0) 70%);transition:opacity .5s}.card__content{padding:1.25em;height:100%;display:flex;flex-direction:column;gap:.75em;position:relative;z-index:2}.card__badge{position:absolute;top:12px;right:12px;background:#10b981;color:#fff;padding:.25em .5em;border-radius:999px;font-size:.7em;font-weight:600;transform:scale(.8);opacity:0;transition:.4s .1s}.card__price,.card__title{color:var(--card-text);font-weight:700}.card__image{width:100%;height:100px;background:linear-gradient(45deg,rgb(162, 213, 193),rgb(88, 177, 141));border-radius:12px;transition:.5s cubic-bezier(.16, 1, .3, 1);position:relative;overflow:hidden}.card__image::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.1) 0,transparent 30%),repeating-linear-gradient(45deg,rgba(88, 177, 141, 0.164) 0,rgba(88, 177, 141, 0.137) 2px,transparent 2px,transparent 4px);opacity:.5}.card__text{display:flex;flex-direction:column;gap:.25em}.card__title{font-size:1.1em;margin:0;transition:.3s}.card__description{color:var(--card-text);font-size:.75em;margin:0;opacity:.7;transition:.3s}.card__footer{display:flex;justify-content:space-between;align-items:center;margin-top:auto}.card__price{font-size:1em;transition:.3s}.card__button{width:28px;height:28px;background:var(--card-accent);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;cursor:pointer;transition:.3s;transform:scale(.9)}.card:hover{transform:translateY(-10px);box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 10px 10px -5px rgba(0,0,0,.04);border-color:rgba(88, 177, 141, 0.201)}.card:hover .card__shine{opacity:1;animation:3s infinite shine}.card:hover .card__glow{opacity:1}.card:hover .card__badge{transform:scale(1);opacity:1;z-index:1}.card:hover .card__image{transform:translateY(-5px) scale(1.03);box-shadow:0 10px 15px -3px rgba(0,0,0,.1)}.card:hover .card__price,.card:hover .card__title{color:var(--card-accent);transform:translateX(2px)}.card:hover .card__description{opacity:1;transform:translateX(2px)}.card:hover .card__button{transform:scale(1);box-shadow:0 0 0 4px rgba(88, 177, 141, 0.205)}.card:hover .card__button svg{animation:1.5s infinite pulse}.card:active{transform:translateY(-5px) scale(.98)}@keyframes shine{0%{background-position:-100% 0}100%{background-position:200% 0}}@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.2)}}
/* TEMPLATE SHOWCASE */
.headerSlider {align-content: start;text-align:center; margin-right: auto; }
#parentSlider { overflow-x: scroll;  scrollbar-color:  green rgb(160, 204, 160); scrollbar-width: large; animation: 10s;justify-content: start;}
#cafeT:hover{scale: 1.07; transition: 0.5s ease;}
#chefT:hover {scale: 1.07;transition: 0.5s ease;}


#artT:hover::before {content: "IN PROGRESS"; background-color: #e74747e4; color: white; transition: 0.5s ease;  align-content: center; text-align: center; font-size: 2rem;}
#artT:hover{ background-color: #bbb; scale: 1.07;transition: 0.5s ease; }
#pilateT:hover::before {content: "IN PROGRESS"; background-color: #e74747e4; color: white; transition: 0.5s ease;  align-content: center; text-align: center; font-size: 2rem;}
#pilateT:hover {background-color: #bbb;scale: 1.07;transition: 0.5s ease;}
#surfT:hover::before {content: "IN PROGRESS"; background-color: #e74747e4; color: white; transition: 0.5s ease;  align-content: center; text-align: center; font-size: 2rem;}
#surfT:hover {background-color: #bbb;scale: 1.07;transition: 0.5s ease;}
#tattooT:hover::before {content: "IN PROGRESS"; background-color: #e74747e4; color: white; transition: 0.5s ease;  align-content: center; text-align: center; font-size: 2rem;}
#tattooT:hover {background-color: #bbb;scale: 1.07;transition: 0.5s ease;}
/* #gymT:hover {background-color: #bbb;scale: 1.07;transition: 0.5s ease;} */
/* ############################################################################################ */



/* MARQUEE */
.marquee {opacity: 0.7; max-inline-size: 90vw; gap: 15px; mask-image: linear-gradient(
  to right,
  hsl(0 0% 0% / 0),
  hsl(0 0% 0% / 1) 20%,
  hsl(0 0% 0% / 1) 80%,
  hsl(0 0% 0% / 0)
); overflow-x: hidden; display: flex; position: relative;  block-size: var(--marquee-item-height); max-inline-size: var(--marquee-max-width);}

.marquee_item { 
  --marquee-item-offset: max(calc(var(--marquee-item-width) * var(--marquee-items)),
  calc(100% + var(--marquee-item-width)));
  --marquee-delay: calc(var(--marquee-duration) / var(--marquee-items) * (var(--marquee-items) - var(--marquee-item-index)) * -1);position: absolute; inset-inline-start: var(--marquee-item-offset);
   animation: go linear var(--marquee-duration) var(--marquee-delay, 0s) infinite; transform: translateX(-50%);}

.marquee--1 .marquee_item:nth-of-type(1) { --marquee-item-index:0;} .marquee_item:nth-of-type(2) {--marquee-item-index:1;} .marquee_item:nth-of-type(3) {--marquee-item-index:2;} .marquee_item:nth-of-type(4) {--marquee-item-index:3;} .marquee_item:nth-of-type(5) {--marquee-item-index:4;} .marquee_item:nth-of-type(6) {--marquee-item-index:5;} .marquee_item:nth-of-type(7) {--marquee-item-index:6;} .marquee_item:nth-of-type(8) {--marquee-item-index:7;} .marquee_item:nth-of-type(9) {--marquee-item-index:8;}

.marquee--1 { --marquee-item-width: 300px; --marquee-item-height:300px; --marquee-duration: 32s; --marquee-items: 9;}
.pause:hover .marquee__item {
  animation-play-state: paused;
}

@keyframes go {to {inset-inline-start: calc(var(--marquee-item-width) * -1);}}

.faqPrev {  background-color: rgb(0, 0, 0); text-shadow: 1px 1px rgb(88, 177, 141); color: black; border-radius: 30px; padding: 1rem; width: 40vw;}
.faqPrev li {width: 35vw; margin: 1rem; text-align: center; cursor: pointer; border-radius: 10px; box-shadow: 2px 2px 5px rgb(88, 177, 141); height: fit-content;background-color:white; text-shadow: none;}


/* ############################################################################################# */
/* # Second Page */
.bigexp2 { color: white; box-shadow: 0 0 2px white; background-color: rgba(255, 255, 255, 0.164);padding: 5px;letter-spacing: 10px;line-height: 120px; text-shadow: 3px 3px 3px rgb(88, 177, 141);}

.exp2 {text-align: center; cursor: pointer; padding: 10px; background-color: rgba(255, 255, 255); box-shadow: 0px 0px 5px rgb(88, 177, 141); color: rgb(88, 177, 141); height: fit-content; border-radius: 30px;}
.exp2:hover {background-color: #000000; transition: 0.5s ease;}
.exp3 {text-align: center; cursor: pointer;padding: 3px; background-color: rgba(255, 255, 255, 0.9); box-shadow: 0px 0px 5px rgb(88, 177, 141); color: rgb(88, 177, 141); height: fit-content; border-radius: 5px; margin: 2px;}
.exp4{line-height:1;text-decoration:none;display:inline-flex;border:none;cursor:pointer;align-items:center;gap:.75rem;background-color:var(--clr);color:#fff;border-radius:10rem;font-weight:600;padding:.75rem 1.5rem .75rem 20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background-color .3s}.exp4__icon-wrapper{flex-shrink:0;width:25px;height:25px;position:relative;color:var(--clr);background-color:#fff;border-radius:50%;display:grid;place-items:center;overflow:hidden}.exp4:hover{background-color:#000}.exp4:hover .exp4__icon-wrapper{color:#000}.button__icon-svg--copy{position:absolute;transform:translate(-150%,150%)}.exp4:hover .exp4__icon-svg:first-child{transition:transform .3s ease-in-out;transform:translate(150%,-150%)}.exp4:hover .exp4__icon-svg--copy{transition:transform .3s ease-in-out .1s;transform:translate(0)}


.homePhaseII {width: 100vw; height: fit-content;  display: flex; justify-content: center; gap: 2rem; }
.secondPhaseII {width: 100vw;text-shadow: 1px 1px rgb(255, 255, 255);color: rgb(88, 177, 141);  height: fit-content; display: grid; justify-content: center; gap: 1rem;overflow: hidden;}
.thirdPhaseII {width: 100vw;text-shadow: 1px 1px rgb(255, 255, 255); height: fit-content; background-color: #ffffff;display: grid; justify-content: center;gap: 1rem;}
.fourPhaseII {width: 100vw;text-shadow: 1px 1px rgb(0, 0, 0);color: white; height: fit-content; background-color: rgb(255, 255, 255);display: grid; justify-content: center;gap: 1rem;}
.galleryPhaseII {width: 100vw;text-shadow: 1px 1px rgb(255, 255, 255); height: fit-content; background-color: rgba(255, 255, 255, 0.639);display: grid; justify-content: center;}
.rightPaddContact {text-align: start;padding: 1rem;line-height: 40px;}

.addOns {visibility: hidden;}
/* Structuring Products */
.rightPadd {text-align: center;padding: 1rem;line-height: 40px;}
.rowDisplayer {display: flex; padding: 1rem;gap:1rem; justify-content: center;}
.rowWork { display: flex; padding: 1rem; justify-content: center; gap: 3rem;align-content: center; flex-direction: row;}
.rowBlog {display: flex; padding: 1rem;gap:1rem; justify-content: center;}

.splitProduct {display: grid; align-content: center; text-align: center; margin: 1rem; height: fit-content; }
/* Experience 1  */
.productExp1 { width: 200px; height: 200px; border: solid var(--color-P-03); background-position: center; background-size: contain;border-top-left-radius: 30px;border-top-right-radius: 30px}
.descriptProduct1 {text-align: center; line-height: normal; background-color: var(--color-P-03);border-bottom-right-radius: 3%;border-bottom-left-radius: 3%;}

/* Experience 2  */
/* .cardProd2,.cardProd2 .content{background:#171717;display:flex}.cardProd2::before,.content::before{opacity:0;transition:opacity .3s}.cardProd2{width:250px;height:350px;justify-content:center;align-items:center;overflow:hidden;position:relative;box-shadow:0 0 3px 1px #00000088;cursor:pointer}.cardProd2 .content{border-radius:5px;width:230px;height:340px;z-index:1;padding:20px;color:#fff;justify-content:center;align-items:center}.content::before{content:" ";display:block;background:#fff;width:5px;height:50px;position:absolute;filter:blur(50px);overflow:hidden}.cardProd2::after,.cardProd2::before{position:absolute;content:" ";display:block;height:350px}.cardProd2:hover .content::before{opacity:1}.cardProd2::before{width:245px;background:linear-gradient(#f28,#387ef0);animation:8s linear infinite paused rotation_9018}.cardProd2:hover::before{opacity:1;animation-play-state:running}.cardProd2::after{width:250px;background:#17171733;backdrop-filter:blur(50px)}@keyframes rotation_9018{0%{transform:rotate(0)}100%{transform:rotate(360deg)}} */
.productExp2 {width: 300px; height:400px; border: solid 4px var(--color-V-09); border-radius: 15px; box-shadow: 10px 10px 10px rgb(88, 177, 141);margin: 10px; }
.descriptProduct2 {text-align: center; line-height: normal; background-color: var(--color-V-03);}
.planPhaseII {width: 100vw;height: fit-content; background-color: rgb(255, 255, 255);display: grid; justify-content: center;gap: 1rem; }

.standard { width: fit-content; display: grid; padding: 0.5rem;background-color: white; gap: 0.5rem; border-radius: 30px; color: rgb(88, 177, 141);}
.professional {width: fit-content; display: grid; padding: 0.5rem; background-color: white; gap: 0.5rem;  color: rgb(88, 177, 141);}
.lineStandard { text-align: start; background-color: white; color: black; padding: 3px;}
.lineStandard li {text-shadow: none; margin: 7px; border-radius: 5px;padding: 3px;box-shadow: 5px 5px rgb(88, 177, 141); background-color: rgba(249, 252, 255, 0.815); color: rgb(61, 61, 61);}

.fade-out-top{-webkit-animation:fade-out-top .7s cubic-bezier(.25,.46,.45,.94) both;animation:fade-out-top .7s cubic-bezier(.25,.46,.45,.94) both}
@-webkit-keyframes fade-out-top{0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}100%{-webkit-transform:translateY(-50px);transform:translateY(-50px);opacity:0}}@keyframes fade-out-top{0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}100%{-webkit-transform:translateY(-50px);transform:translateY(-50px);opacity:0}}


.puff-in-center{-webkit-animation:puff-in-center .7s cubic-bezier(.47,0.000,.745,.715) both;animation:puff-in-center .7s cubic-bezier(.47,0.000,.745,.715) both}
@-webkit-keyframes puff-in-center{0%{-webkit-transform:scale(1);transform:scale(1);-webkit-filter:blur(4px);filter:blur(4px);opacity:0}100%{-webkit-transform:scale(1);transform:scale(1);-webkit-filter:blur(0);filter:blur(0);opacity:1}}@keyframes puff-in-center{0%{-webkit-transform:scale(1);transform:scale(1);-webkit-filter:blur(4px);filter:blur(4px);opacity:0}100%{-webkit-transform:scale(1);transform:scale(1);-webkit-filter:blur(0);filter:blur(0);opacity:1}}

.linePro #feature{ width: 250px;height: 250px; border: rgb(128, 159, 177) solid; box-shadow: 2px 2px 2px black; }
.linePro #feature:hover {scale: 1.05;}


.findOut  {border-radius: 5px;color: black;  text-shadow: none;box-shadow: 2px 2px black;width: fit-content;margin-left: auto;margin-right: auto; padding: 5px ; font-size: var(--font-size-header);}
.meeting {font-size: 2rem;background-color: rgb(0, 0, 0); box-shadow: 0px 0px 20px rgb(47, 209, 90); color: rgb(88, 177, 141); border-radius: 30px; font-family: "Kanit"; padding: 1rem 60px; color: white; }



/* DELIVERY MODE */
.radio-inputs {display: flex;justify-content: center;align-items: center;max-width: 350px;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}

.radio-inputs > * {margin: 6px;}

.radio-input:checked + .radio-tile { border-color: rgb(88, 177, 141); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); color: rgb(88, 177, 141);}

.radio-input:checked + .radio-tile:before { transform: scale(1); opacity: 1; background-color: rgb(88, 177, 141); border-color: rgb(88, 177, 141);}

.radio-input:checked + .radio-tile .radio-icon svg {  fill: rgb(88, 177, 141);}

.radio-input:checked + .radio-tile .radio-label {color: rgb(88, 177, 141);}

.radio-input:focus + .radio-tile { border-color: rgb(88, 177, 141); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1), 0 0 0 4px rgb(187, 228, 211);}

.radio-input:focus + .radio-tile:before {transform: scale(1);opacity: 1;}

.radio-tile {display: flex;flex-direction: column;align-items: center;justify-content: center;width: 150px;min-height: 150px;border-radius: 0.5rem;border: 2px solid rgb(152, 207, 185);background-color: #fff;box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);transition: 0.15s ease;cursor: pointer; position: relative;}

.radio-tile:before {content: "";position: absolute;display: block;width: 0.75rem;height: 0.75rem;border: 2px solid rgb(88, 177, 141);background-color: #fff;border-radius: 50%;top: 0.25rem; left: 0.25rem;  opacity: 0;  transform: scale(0); transition: 0.25s ease;}

.radio-tile:hover { border-color: rgb(88, 177, 141);}

.radio-tile:hover:before { transform: scale(1); opacity: 1;}

.radio-icon p {font-size: 1.5rem;}

.radio-label { color: #707070; transition: 0.375s ease; text-align: center; font-size: 1.5rem;}

.radio-input { clip: rect(0 0 0 0); -webkit-clip-path: inset(100%); clip-path: inset(100%); height: 1px; overflow: hidden; position: absolute;white-space: nowrap; width: 1px;}

/* TOOLTIPS */

.tooltip-container{position:relative;display:inline-block}.tooltip,.tooltip::after{position:absolute;left:50%}.help-button{background:linear-gradient(135deg,#6366f1,#4f46e5);color:#fff;border:none;padding:12px 24px;border-radius:8px;cursor:pointer;font-size:16px;font-weight:600;transition:transform .2s,box-shadow .2s;box-shadow:0 4px 6px rgba(0,0,0,.1)}.help-button:focus,.help-button:hover{transform:translateY(-2px);box-shadow:0 6px 12px rgba(0,0,0,.15)}.tooltip{bottom:calc(100% + 15px);transform:translateX(-50%) translateY(10px);padding:12px 20px;background:linear-gradient(135deg,#fff,#f8f9fa);border-radius:10px;box-shadow:0 10px 25px rgba(0,0,0,.1);color:#1f2937;font-size:14px;white-space:nowrap;opacity:0;visibility:hidden;transition:.3s;border:1px solid #e5e7eb}.tooltip::after{content:"";top:100%;transform:translateX(-50%);border-width:8px;border-style:solid;border-color:#fff transparent transparent}.help-button:focus+.tooltip,.tooltip-container:hover .tooltip{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}@keyframes glow{0%,100%{text-shadow:0 0 10px rgba(99,102,241,.5)}50%{text-shadow:0 0 20px rgba(99,102,241,.7)}}.tooltip strong{animation:2s infinite glow;font-weight:600}.tooltip i{margin-right:6px;color:#6366f1}@media (max-width:768px){.tooltip{font-size:13px;padding:10px 16px}.help-button{padding:10px 20px;font-size:14px}}

/* #################################################################### */
/* Sub Page 2  */
.included {background-color: var(--color-V-06); width: 50vw; height: fit-content;padding: 1rem;font-size: var(--font-size-header);box-shadow: 0px 0px 20px rgb(255, 255, 255); text-align: start;}
.included ul{ background-color: transparent; padding: 1rem; border-radius: 30px;}
.non-included { width: 20vw;  background-color: var(--color-R-06);padding: 1rem;text-shadow: 1px 1px black;box-shadow: 0px 0px 25px black;height: fit-content;border-radius: 30px; text-align: start;}

.scope {background-color: rgba(255, 255, 255, 0.737); color: black; display: flex; flex-wrap: wrap; gap: 1rem;}

.forWho { display: flex;margin: var(--font-medium);}
.yesFor {width: 50vw; background-color: rgb(255, 255, 255);color: black;line-height: 30px;box-shadow: 0px 0px 25px rgb(88, 177, 141);padding: 1rem; border-radius: 30px; height: fit-content;}
.notFor {color: white; background-color: black;line-height: 30px; box-shadow: 0px 0px 25px rgb(177, 131, 128); border-radius: 30px; padding: 1rem; height: fit-content;}

.faq {text-shadow: 1px 1px rgb(88, 177, 141); color: black; border-radius: 30px; padding: 1rem;}
.faq li {width: 90vw; margin: 1rem; text-align: center; cursor: pointer; border-radius: 10px; box-shadow: 2px 2px 5px rgb(88, 177, 141); height: fit-content;background-color:white; text-shadow: none; font-size: x-large; padding: 2rem;}
.childHid {display: none; text-align: center; font-family: "Kanit", serif; font-weight: 600;padding: 1rem; background-color: white; border-radius: 30px;}

.p1Sta::after {content: "Meeting"; background-color: rgba(19, 19, 19, 0.909); border-radius: 5px; border: solid black 1px; padding: 10px; color: white;}
.p2Sta::after {content: "Prototype"; background-color: rgba(19, 19, 19, 0.909); border-radius: 5px; border: solid black 1px; padding: 10px; color: white;}
.p3Sta::after {content: "Report/Feedback"; background-color: rgba(19, 19, 19, 0.909); border-radius: 5px; border: solid black 1px; padding: 10px; color: white;}
.p4Sta::after {content: "Domain name Setup"; background-color: rgba(19, 19, 19, 0.909); border-radius: 5px; border: solid black 1px; padding: 10px; color: white;}
.p5Sta::after {content: "Revised Prototype"; background-color: rgba(19, 19, 19, 0.909); border-radius: 5px; border: solid black 1px; padding: 10px; color: white;}
.p6Sta::after{content: "Final Feedback"; background-color:rgba(19, 19, 19, 0.909); border-radius: 5px; border: solid black 1px; padding: 10px; color: white;}
.p7Sta::after {content: "Website Delivery"; background-color: rgba(19, 19, 19, 0.909); border-radius: 5px; border: solid black 1px; padding: 10px; color: white;}
.p8Sta::after {content: "Ongoing Support"; background-color: rgba(19, 19, 19, 0.909); border-radius: 5px; border: solid black 1px; padding: 10px; color: white;}

.p1Sta::before {content: "1";background-color: white; box-shadow: 0 0 10px white; padding: 5px; color: black; margin: 10px;font-size: 2.5rem;}
.p2Sta::before {content: "2";background-color: white; box-shadow: 0 0 10px white; padding: 5px; color: black; margin: 10px;font-size: 2.5rem;}
.p3Sta::before {content: "3"; background-color: white; box-shadow: 0 0 10px white; padding: 5px; color: black; margin: 10px;font-size: 2.5rem;}
.p4Sta::before {content: "4"; background-color: white; box-shadow: 0 0 10px white; padding: 5px; color: black; margin: 10px;font-size: 2.5rem;}
.p5Sta::before {content: "5"; background-color: white; box-shadow: 0 0 10px white; padding: 5px; color: black; margin: 10px;font-size: 2.5rem;}
.p6Sta::before{content: "6"; background-color:white; box-shadow: 0 0 10px white; padding: 5px; color: black; margin: 10px;font-size: 2.5rem;}
.p7Sta::before {content: "7"; background-color: white; box-shadow: 0 0 10px white; padding: 5px; color: black; margin: 10px;font-size: 2.5rem;}
.p8Sta::before {content: "8"; background-color: white; box-shadow: 0 0 10px white; padding: 5px; color: black; margin: 10px;font-size: 2.5rem;}
 

.processAim {font-size: 1rem; display: flex; font-family: "Gruppo"; padding: 5px;border: solid rgb(88, 177, 141) 1px;}
.indiArrow1 { font-size: 2rem; color: #000000;} .indiArrow1::after {content: "➡️";}
.indiArrow2{ font-size: 2rem; color: #000000;} .indiArrow2::after{content: "➡️";}
.indiArrow3{ font-size: 2rem; color: #000000;}  .indiArrow3::after{content: "➡️";}
.indiArrow4{ font-size: 2rem; color: #000000;}  .indiArrow4::after{content: "➡️";}
.indiArrow5{ font-size: 2rem; color: #000000;}  .indiArrow5::after{content: "➡️";}
.indiArrow6{ font-size: 2rem; color: #000000;}  .indiArrow6::after{content: "➡️";}
.indiArrow7{ font-size: 2rem; color: #000000;}  .indiArrow7::after{content: "➡️";}
.indiArrow8{ font-size: 2rem; color: #000000;}  .indiArrow8::after{content: "➡️";}
/* ############################################# */
/* Experience 3  */
.productExp3 { width: 30vw; height: 40vh; background-position: center; background-size: contain;border-top-left-radius: 30px;border-top-right-radius: 30px}
.descriptProduct3 {width: 30vw;  padding: 1rem; text-align: center; line-height: normal; color: rgb(255, 255, 255); border-bottom-left-radius: 30px;border-bottom-right-radius: 30px; background-color: #000000; text-shadow: 1px 1px rgb(0, 0, 0);}
.goPrice { padding: 10px ;border: solid var(--color-V-03) 2px; border-radius: 20px; color: white; text-align: center; box-shadow: 3px 3px 15px rgb(88, 177, 141); background-color: #000000; cursor: pointer; width: 300px;margin-left: auto; margin-right: auto;}

/* /######################################### */
/* Experience 4 */

.productExp4 { width: 40vw; height: fit-content; background-position: center; background-size: contain; align-content: center;}


.carrousel{ position: relative; z-index: 0; }
.carrousel-track {display: none;  animation: fadeIn 1s ease;}
.carrousel img {width: 25vw; height: 40vh; border: solid white 1px;}

.linkPages {gap: 1rem; display: flex; flex-wrap: wrap;}
.funcInfo {font-family: "Caveat"; background-color: #ffffff; width: 30vw;height: 50vh; padding: 1rem; align-items: center; gap: 1rem;}
.aboutBtn {cursor: pointer; width: fit-content; height: fit-content; text-align: center; align-items: center;  border-radius: 10px; font-size: var(--font-medium); padding: 1rem; border: solid var(--color-V-03); color: white;background-color: black; box-shadow: 0 0 25px var(--color-V-03);}
.blogBtn {cursor: pointer; width: fit-content; height: fit-content; text-align: center;  border-radius: 10px; font-size: var(--font-medium); padding: 1rem; border: solid var(--color-R-03); color: white;  background-color: black; box-shadow: 0 0 25px var(--color-R-03);}
.eventBtn {cursor: pointer;  width: fit-content; height: fit-content; text-align: center;  border-radius: 15px; font-size: var(--font-medium); padding: 1rem; border: solid var(--color-P-03); color: white; background-color: black;box-shadow: 0 0 25px var(--color-P-03);}


/* ############################################################################################## */
/* THird Page */
.homePhaseIII {width: 100vw; height: 5vh;  display: flex; justify-content: center; gap: 2rem;}

.blogPhaseIII{width: 100vw;text-shadow: 1px 1px rgb(255, 255, 255);display: grid; color: black;  height: fit-content; background-color: rgb(255, 255, 255); justify-content: center; gap: 4rem; align-content: center; }
.splitProductIII {cursor: pointer; display: grid; text-align: center; margin: 2rem; border: rgb(88, 177, 141) solid 1px; border-bottom: transparent;border-top-left-radius: 30px;border-top-right-radius: 30px; }
.splitProductIII:hover {animation: scaleUp 0.4s ease-in running;}
.describBlogIII {text-align: center; line-height: 30px; }

/* ############################################################################################## */
/* Fourth Page */
.aboutPhaseIV {width: 100vw;height: fit-content;  background-color: rgba(255, 255, 255, 0.909);display: grid; justify-content: center;}
.leftSplitIV {display:  grid; justify-content: center; text-align: center; align-content: center; text-align: center; margin-right: 1rem;}
.rightSplitIV { height: fit-content; border: solid 3px black; border-radius: 10px; position: relative; background:url(./ImageBank/20.png);background-size: cover; background-position: center; display: grid; justify-content: center; text-align: center; align-content: center;text-align: center; margin-left: 1rem; background-color: white;}
.aboutInfo { color: rgb(0, 0, 0); width: fit-content;height: fit-content; padding: 2%;  gap: 10px;max-height: 100vh;width: 50vw; }
.corners { display: flex;}
.dot  {z-index: 300; height: 5px;width: 15px;border-radius: 30px; margin: 0 2px;background-color: #bbb;display: inline-block;transition: background-color 0.6s ease;}
.prev {transform: translate(100%,20vh); z-index: 1; cursor: pointer; user-select: none;position: relative; height: fit-content;width: fit-content;font-size: 3rem;border-radius: 5px;color: rgb(88, 177, 141);background-color: rgba(255, 255, 255, 0.47);}
.next {transform: translate(-100%,20vh); z-index: 1; cursor: pointer; user-select: none;position: relative;height: fit-content;width: fit-content;font-size: 3rem;border-radius: 5px;color: rgb(88, 177, 141);background-color: rgba(255, 255, 255, 0.45);}

.carrouselIV{ position: relative;z-index: 0; width: fit-content;}
.carrousel-trackIV {display: none;  animation: fadeIn 1s ease;}
.carrouselIV img { border-radius: 5px; width: 350px; height: 350px; border: solid white 1px;}

.rotatePic {width: 500px;height: 500px;}
/* ############################################################################################## */
/* Fith Page */
.homePhaseV {width: 100vw; height: 5vh;  display: flex; justify-content: center; gap: 1rem;}
.guidePhaseV {width: 100vw; height: fit-content;  display: grid; justify-content: center; gap: 1rem; background-color: white; padding: 2rem;}

.contactFormV {width: 100vw;text-shadow: 1px 1px rgb(255, 255, 255);display: flex; color: black;  height:fit-content; background-color: rgb(255, 255, 255); justify-content: center; gap: 2rem; }
.designForm{ display: grid; gap: 2rem; }
.designForm input { width: 30vw; border-bottom: solid blueviolet 1px; font-size: larger; border-radius: 30px; padding: 1rem;}
.designForm textarea {border-bottom: solid blueviolet 2px; font-size: larger; border-radius: 30px; padding: 1rem;}
.designForm button {font-size: 2rem; padding: 1rem 1rem;border: solid var(--color-V-03) 2px; border-radius: 30px; color: white; text-align: center; box-shadow: 0px 0px 10px var(--color-P-03); background-color: #000000; cursor: pointer;}

.guide {background: url(/ImageBank/favicon_io/android-chrome-512x512.png); background-size: cover; background-position: center; width: 80px; height: 80px; box-shadow: black 0px 0px 20px;}
/* ########################################################################################" */
/* Spare page adjustements */

/* ###################################### */
/* ⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️ */
/* #####################################*/
/* Mobile Only
/* #####################################*/
/* ⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️ */

@media (max-width: 760px) {

.stickyHeader {justify-content: center; background-color: azure; gap: 0rem;}
.svg_btn {display: block; fill: rgb(88, 177, 141); cursor: pointer; margin-left: auto; display: block;}

.nested_headers {height: 100vh;background-color: rgb(47, 73, 54); border: solid transparent; animation: 0.5s ease running slide_translate; width: 100vw;position: fixed;}
dialog::backdrop {background-color: rgb(47, 73, 54);animation: 0.5s ease running slide_translate }
.nested_headers p {color: white; padding: 1rem;font-size: xx-large;cursor: pointer; font-family: "Audiowide";}

.nested_link { gap: 0.5rem;}
.nested_link img {margin: 1rem;width: 40px;height: 40px;background-color: var(--primary-color);}

.close_header {margin-left: 80%;padding: 1rem;font-size: 2rem;border: solid transparent;background-color:  rgb(47, 73, 54);}

.headers {display: none;}

.lang { font-size: 1.3rem;}

.padding_arr_low {padding: 0 10% 0 10%;}
.padding_arr_high {padding: 2% 20% 2% 20%;;}
.font_size_low {font-size: 1.15rem;}
.font_size_medium {font-size: 1.3rem;}
.font_size_big {font-size: 2rem}
.font_size_bigger {font-size: 2.5rem;}
.font_size_monster {font-size: 3rem;}

.unreasHeader {font-size: 5rem;}

.firstViewI {padding-top: 25%;}
.firstViewII {padding-top: 20%;}
.firstViewIII {padding-top: 20%;}
.firstViewIV {padding-top: 20%;}
.firstViewV {padding-top: 20%;}

.whiteSpacing {margin: 0rem;}

main { display: flex;justify-content: center; flex-direction: column;}
.centered-main {display: grid; justify-content: center; }

.leftSplit {display:  grid; justify-content: center; text-align: center; align-content: center; text-align: center; margin-right: 0rem;}
.rightSplit {display: grid; justify-content: center; text-align: center; align-content: center;text-align: center; margin-left:0rem;}

/* ###################################################################################### */
/* FIrst Page Mobile ⚠️ */

.mobileBox {max-width: fit-content; margin-left: auto; margin-right: auto;}

.homePhase {width: 100vw; height: 90vh;  display: flex; justify-content: center;}
.secondPhase {width: 100vw; height: fit-content;   display: grid; justify-content: center; gap: 1rem;}
.thirdPhase {width: 100vw; height: fit-content; display: grid; justify-content: center;gap: 1rem;}
.fourPhase {width: 100vw; display: grid; justify-content: center;gap: 1rem;}
.galleryPhase {width: 100vw; height: fit-content; display: grid; justify-content: center; gap: 1rem;}
.contactPhase {width: 100vw; height: 30vh; display: flex; justify-content: space-around;gap: 20px; font-size: 90%;}

.location{width: 100px; height: 100px;}
.bigexp2 { color: white; box-shadow: 0 0 2px white; background-color: rgba(255, 255, 255, 0.164);padding: 5px;letter-spacing: normal;line-height: normal; text-shadow: 3px 3px rgb(88, 177, 141); height: 300px;}

/* .exp2 {width: 350px; margin-left: auto; margin-right: auto;} */
/* #sliderLtoR {width: fit-content; } */
#parentSlider { overflow-x: scroll;  scrollbar-color:  green rgb(160, 204, 160); scrollbar-width: large; animation: 10s;}
.headerSlider {align-content: start;text-align:center; margin-right: auto;margin-left: 10px; }
.intro {width: fit-content;}


.loader{ width:350px;font-weight:700;white-space:wrap;line-height:1.2em;height: 2.3em;overflow:hidden}.loader:before{content:"Modern Website\A Budern Webs\A Build Webe\A Build FA\A Build FAST\A";white-space:pre-wrap;display:inline-block;animation: 1s steps(5) infinite alternate l39}@keyframes l39{100%{transform:translateY(-100%)}}
.slots { font-family: "Bungee Hairline"; background-color: rgba(88, 177, 141, 0.509); color: rgba(255, 255, 255, 0);  margin-left: auto; margin-right: auto;z-index: 1000;width: 100%;text-align: center; position: fixed;--c:#ffffff;font-weight:700;overflow:hidden;animation:8s linear infinite l6}.slots::before{content: '';} @keyframes l6{50%{text-shadow:-11ch 0 var(--c)}}
.loader3{display:inline-grid;overflow:hidden}.loader3:after,.loader3:before{content:"SIDEVAS";grid-area:1/1;clip-path:inset(0 -100% 50%);text-shadow:-10ch 0 0;animation:2s infinite l13}.loader3:after{clip-path:inset(50% -100% 0%);text-shadow:10ch 0 0;--s:-1;animation-delay:1s}@keyframes l13{100%,25%{transform:translateX(calc(var(--s,1)*100%))}}

/* ############################################################################################# */
/* # Second Page Mobile Mobile ⚠️*/
.faq { background-color: rgb(0, 0, 0); text-shadow: 1px 1px rgb(88, 177, 141); color: black; border-radius: 30px; padding: 5px;}

.faq li { font-size: 1rem; width: 350px; margin: 1rem; text-align: center; cursor: pointer; border-radius: 10px; box-shadow: 2px 2px 5px rgb(88, 177, 141); height: fit-content;background-color:white; text-shadow: none;}

.faqPrev {width: fit-content;  text-shadow: 1px 1px rgb(88, 177, 141); color: black; border-radius: 30px; padding: 1rem;}
.faqPrev li {width: 300px; margin: 1rem; text-align: center; cursor: pointer; border-radius: 10px; box-shadow: 2px 2px 5px rgb(88, 177, 141); height: fit-content;background-color:white; text-shadow: none;}

.yesFor {width: 350px; background-color: rgb(255, 255, 255);margin: 1rem;color: black;font-size: 1rem;line-height: 30px;box-shadow: 0px 0px 25px rgb(88, 177, 141);padding: 1rem;border-radius: 30px;}
.notFor {width: 350px; color: white; margin: 1rem;background-color: black;line-height: 30px; font-size: 1rem; box-shadow: 0px 0px 25px rgb(177, 131, 128);padding: 1rem; border-radius: 30px;}


.homePhaseII { width: 100vw; height: fit-content; display: grid; gap: 1rem; align-items: center;}
.secondPhaseII {color: rgb(88, 177, 141);width: 100vw; ; display: grid; justify-content:end; gap: 1rem;overflow: auto;}
.thirdPhaseII {width: 100vw; height: fit-content;display: grid; justify-content: center;gap: 1rem;overflow: auto;}
.fourPhaseII {color: rgb(88, 177, 141);width: 100vw;  ;display: grid; justify-content: center;gap: 1rem;overflow: auto;}
.galleryPhaseII {width: 100vw; height: fit-content; display: grid; justify-content: center;gap: 1rem; overflow: auto;}

.meeting { font-size: 2rem;background-color: rgb(0, 0, 0); box-shadow: 0px 0px 20px rgb(47, 209, 90); color: rgb(88, 177, 141); border-radius: 30px; font-family: "Kanit"; color: white;padding: 7px 30px; }

.included {width: fit-content; padding: 10px;box-shadow: 0px 0px 20px rgb(255, 255, 255); text-align: start;}
.non-included { width: fit-content; padding: 10px;text-shadow: 1px 1px black;box-shadow: 0px 0px 25px black;height: fit-content;border-radius: 30px; text-align: start;}

/* Structuring Products Mobile ⚠️ */
.rightPadd {text-align: center;padding: 10px;}
.rightPaddContact {text-align: start;padding: 0px;line-height: 30px;}

.rowWork {display: flex; padding: 3px; justify-content: center; gap: 0rem;}
.rowDisplayer {display: grid; padding: 3%;width: fit-content;gap: 1rem;}
.splitProduct {display: grid; text-align: center; border-radius: 30px;margin: 10px;}
/* Experience 1 Mobile  */
.productExp1 {width:100%; height: 100%; border: solid var(--color-P-03); background-position: center; background-size: contain;border-top-left-radius: 30px;border-top-right-radius: 30px}
.descriptProduct1 {text-align: center; line-height: normal; background-color: var(--color-P-03);border-bottom-right-radius: 3%;border-bottom-left-radius: 3%;}

/* Experience 2 Mobile  */
.productExp2 { margin: 20px; width:200px; height: 300px; border: solid 4px var(--color-V-09); background-position: center;border-radius: 15px;}
.descriptProduct2 {text-align: center; line-height: normal; background-color: var(--color-V-03);border-bottom-right-radius: 3%;border-bottom-left-radius: 3%;}

/* Experience 3 Mobile  */

.productExp3 { width:300px; height: 200px; border: solid 2px var(--color-R-03); background-position: center; background-size: contain;border-top-left-radius: 30px;border-top-right-radius: 30px}
.descriptProduct3 { width: 300px; padding: 15px; text-align: center; line-height: normal; border-bottom-left-radius: 30px;border-bottom-right-radius: 30px}

.descriptProduct2 {text-align: center; line-height: normal; background-color: var(--color-R-03);border-bottom-right-radius: 3%;border-bottom-left-radius: 3%;}

/* Experience 4 Mobile */
.rowBlog {display: flex; padding: 1rem;gap:1rem; justify-content: center;}

.productExp4 { width: 350px; height: fit-content; background-position: center; background-size: contain;}


/* SubPage Pricing */
.indiArrow1 { font-size: 2rem; color: #000000;} .indiArrow1::after {content: "➡️";}
.indiArrow2{ font-size: 2rem; color: #000000;} .indiArrow2::after{content: "➡️";}
.indiArrow3{ font-size: 2rem; color: #000000;}  .indiArrow3::after{content: "➡️";}
.indiArrow4{ font-size: 2rem; color: #000000;}  .indiArrow4::after{content: "➡️";}
.indiArrow5{ font-size: 2rem; color: #000000;}  .indiArrow5::after{content: "➡️";}
.indiArrow6{ font-size: 2rem; color: #000000;}  .indiArrow6::after{content: "➡️";}
.indiArrow7{ font-size: 2rem; color: #000000;}  .indiArrow7::after{content: "➡️";}
.indiArrow8{ font-size: 2rem; color: #000000;}  .indiArrow8::after{content: "";}
.processAim {font-size: 1rem; display: flex; font-family: "Gruppo"; padding: 5px;border: solid rgb(88, 177, 141) 1px; }

.p1Sta {max-width: 250px; max-height: 250px;}
.p2Sta {max-width: 250px; max-height: 250px;}
.p3Sta {max-width: 250px; max-height: 250px;} 
.p4Sta {max-width: 250px; max-height: 250px;}
.p5Sta {max-width: 250px; max-height: 250px;}
.p6Sta {max-width: 250px; max-height: 250px;}
.p7Sta {max-width: 250px; max-height: 250px;}
.p8Sta {max-width: 250px; max-height: 250px;}

/* Carrousel Mobile */
.carrousel{ position: relative; z-index: 0; overflow: hidden;}
.carrousel-track {display: none;}
.carrousel img {width: 250px; height:  250px;}

.funcInfo { background-color: #95a2be; width: 90vw;height: 50vh; padding: 1rem; display: grid; align-items: center; gap: 1rem;}
.aboutBtn { width: fit-content; height: fit-content; text-align: center; align-items: center;  border-radius: 30px; font-size: var(--font-medium); padding: 1rem; border: var(--color-V-03);}
.blogBtn {width: fit-content; height: fit-content; text-align: center;  border-radius: 30px; font-size: var(--font-medium); padding: 1rem; border: var(--color-R-03);  }
.eventBtn {  width: fit-content; height: fit-content; text-align: center;  border-radius: 30px; font-size: var(--font-medium); padding: 1rem; border: var(--color-P-03);  }
.announce {width: 150px; height: 150px; background-size: cover; position: absolute; }

.standard {width: fit-content; display: grid; padding: 5px;background-color: white; gap: 1rem; border-radius: 30px; color: rgb(128, 159, 177);}
.professional {width: fit-content; display: grid; padding: 5px; background-color: white; gap: 1rem; border-radius: 30px; color: rgb(88, 177, 141);}
.lineStandard { text-align: start; padding: 0px; background-color: white; color: black; line-height: normal;}
.lineStandard li { margin: 3px; border-radius: 5px; padding: 3px;}
.linePro #feature{ width: 150px;height: 150px; margin: 10px; }
.linePro #feature:hover {scale: 1.05;}

/* ############################################################################################## */
/* Third Page Mobile ⚠️*/

.blogPhaseIV{width: 100vw;text-shadow: 1px 1px rgb(255, 255, 255);display: flex; color: black;  height: fit-content; background-color: rgb(255, 255, 255); justify-content: center; gap: 2rem; }
.homePhaseIV {width: 100vw; height: fit-content;  display: flex; justify-content: center; gap: 2rem;}
/* ############################################################################################## */
/* Fourth Page Mobile ⚠️*/
.rightSplitIV {margin-top: 0; border: solid 3px black; border-radius: 10px; padding: 0; position: relative; background:url(./ImageBank/20.png);background-size: cover; background-position: center; display: grid; justify-content: center; text-align: center; align-content: center;text-align: center; margin-left: 0rem; background-color: white;}
.leftSplitIV {display:  grid; justify-content: center; text-align: center; padding: 0; align-content: center; text-align: center; margin-right: 0rem;}

.aboutPhaseIV {width: 100vw;height: fit-content; text-shadow: none;  background-color: rgb(255, 255, 255);display: grid; justify-content: center;}
.aboutInfo { width: fit-content;height: 100%; padding: 10px; align-items: center; }
.carrouselIV{ position: relative; z-index: 0; margin: 0;padding: 0; }
.carrousel-trackIV {display: none;  animation: fadeIn 1s ease;}
.carrouselIV img {width: 300px; height: 300px; border: solid white 1px;}
.prev {transform: translate(100%,125px); z-index: 1; cursor: pointer; user-select: none;position: relative; height: fit-content;width: fit-content;font-size: 4rem;border-radius: 5px;color: rgb(88, 177, 141);background-color: rgba(255, 255, 255, 0.47);}
.next {transform: translate(-100%,125px); z-index: 1; cursor: pointer; user-select: none;position: relative;height: fit-content;width: fit-content;font-size: 4rem;border-radius: 5px;color: rgb(88, 177, 141);background-color: rgba(255, 255, 255, 0.45);}

.rotatePic {width: 350px;height: 300px;}

/* ############################################################################################## */
/* Fith Page Mobile ⚠️ */
.homePhaseV {width: 100vw; height: fit-content;  display: flex; justify-content: center; gap: 1rem;}

.contactFormV {display: grid; width: 100vw;text-shadow: 1px 1px rgb(255, 255, 255); color: black;  height: fit-content; background-color: rgb(255, 255, 255); justify-content: center; gap: 2rem; }
.designForm{ display: grid; gap: 2rem; }
.designForm input { width: 80vw; border-bottom: solid blueviolet 1px; font-size: larger; border-radius: 30px; padding: 1rem;}
.designForm textarea {border-bottom: solid blueviolet 2px; font-size: larger; border-radius: 30px; padding: 1rem;}
.designForm button {font-size: 2rem; padding: 10px 10px;border: solid var(--color-V-03) 2px; border-radius: 30px; color: white; text-align: center; box-shadow: 0px 0px 10px var(--color-P-03); background-color: #000000; cursor: pointer;}


/* ⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️ */
}
/* ⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️ */
/* #####################################*/



@media screen and (min-width: 768px), (max-width: 1024px) {




.sections {
font-style: 1.5rem;
display: block;
}


}


/* #####################################*/

@media screen and (min-width: 1025px) {



.sections {
        font-style: 1.5rem;
display: block;
}

}