* {
    box-sizing: border-box;
  }
  
  *, ::before, ::after {
    box-sizing: border-box;
  }
  
  html {
         margin: 0;
         padding: 0;
         scroll-behavior: smooth;
  }

  /* #smooth-content {
  overflow: visible;
  width: 100%;
  height: 100%;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 2px, transparent 2px),
    linear-gradient(90deg, rgba(255,255,255,.07) 2px, transparent 2px),
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
  background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
} */
  

  /* 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; }

  /* .wallpaper { margin: 0; background: url(./ImageBank/2.jpg); object-fit: cover;background-size: cover;width: 100vw;height: 100vh;z-index: -2;position: absolute;background-position: center;} */

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

  
  .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: 800; 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(255, 255, 255); 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;}
 
  
  title {font-family: "Moon Dance", serif;}
    h1 {font-family: "Moon Dance", serif; color: rgb(88, 177, 141);}
    h2 {font-family: "Caveat", serif;}
    h3 {font-family: "Rowdies", serif;}
    h4 {font-family: "Caveat";}
    li, p  {font-family: "Rowdies";}
    ol, ul {font-family: "Rowdies"; }
    hr {color: white; background-color: aliceblue;}
    button {font-family: "Rowdies"; border:solid transparent;}
    input {font-family: "Rowdies";}
    textarea {font-family: "Rowdies";}
  a {font-family: "Rowdies"}
  span {font-family: "Rowdies";}
  
  .text {
  color: #dfdcff;
  font-size: clamp(2rem, 12rem, 5vw);
  line-height: 1.2;
  box-sizing: border-box;
  padding: 5%;
  width: 100%;
  text-align: center;
  perspective: 500px;
}

.container1 {
  position: relative;
  width: 90vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  border-radius: 9px;
}

.fuckedup {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  overflow: hidden;
}


.button-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.container2 {
  z-index: -2;
  position: relative;
  width: 90vw;
  height: 20vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  border-radius: 9px;
}

#svg-stage {
 
  max-width:80px;
  overflow:visible;
}
  .firstViewI {padding-top: 0%;}
  .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: static;--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 Template\A Bodern Remplate\A Budern Rimplate\A Buiern Rigplate\A Build Right\A";white-space:pre;display:inline-block;animation: 1s steps(5) 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: 100vh;  display: flex; justify-content: center; align-items: center; align-content: center; text-align: center;}
  .secondPhase {width: 100vw; height: 100vh; background-color: white; display: grid; justify-content: center; gap: 1rem;}
  .thirdPhase {color: white; width: 100vw; height: fit-content; background-color: rgb(0, 0, 0);display: grid; justify-content: center;gap: 1rem;}
  .fourPhase {width: 100vw; height: fit-content; background-color: rgb(0, 0, 0);display: grid; justify-content: center;gap: 1rem; color: white;}
  .galleryPhase {width: 100vw; height: fit-content; background-color: white;display: grid; justify-content: center;}
  .contactPhase {padding: 1rem; width: 100vw; height: fit-content; color: rgb(255, 255, 255); background-color: rgb(88, 177, 141);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;}
  
  
  .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)}}
  
  .button2::after,.button2::before{position:absolute;left:50%;transform:translate(-50%,-50%);height:100%;content:"";width:100%}.button2{--black-700:hsla(0 0% 12% / 1);--border_radius:9999px;--transtion:0.3s ease-in-out;--offset:2px;cursor:pointer;position:relative;display:flex;align-items:center;gap:.5rem;transform-origin:center;padding:10px 10px;background-color:transparent;border:none;border-radius:var(--border_radius);transform:scale(calc(1 + (var(--active,0) * .1)));transition:transform var(--transtion)}.button2 .dots_border,.button2::after,.button2::before{top:50%;border-radius:var(--border_radius)}.button2::before{background-color:var(--black-700);box-shadow:inset 0 .5px #fff,inset 0 -1px 2px 0 #000,0 4px 10px -4px hsla(0 0% 0% / calc(1 - var(--active,0))),0 0 0 calc(var(--active,0) * .375rem) hsla(139, 43%, 58%, 0.75);transition:all var(--transtion);z-index:0}.button2::after{background-color:hsla(139, 51%, 66%, 0.75);background-image:radial-gradient(at 51% 89%,#b89eda 0,transparent 50%),radial-gradient(at 100% 100%,#9474bd 0,transparent 50%),radial-gradient(at 22% 91%,#9474bd 0,transparent 50%);background-position:top;opacity:var(--active, 0);transition:opacity var(--transtion);z-index:2}.button2:is(:hover,:focus-visible){--active:1}.button2:active{transform:scale(1)}.button2 .dots_border,.button2 .dots_border::before{position:absolute;left:50%;transform:translate(-50%,-50%)}.button2 .dots_border{--size_border:calc(100% + 2px);overflow:hidden;width:var(--size_border);height:var(--size_border);background-color:transparent;z-index:-10}.button2 .dots_border::before{content:"";top:30%;transform-origin:left;transform:rotate(0);width:100%;height:1rem;background-color:#fff;mask:linear-gradient(transparent 0%,white 120%);animation:2s linear infinite rotate}@keyframes rotate{to{transform:rotate(360deg)}}.button2 .sparkle{position:relative;z-index:10;width:1.75rem}.button2 .sparkle .path{fill:currentColor;stroke:currentColor;transform-origin:center;color:#fff}.button2:is(:hover,:focus) .sparkle .path{animation:1.5s linear .5s infinite path}.button2 .sparkle .path:first-child{--scale_path_1:1.2}.button2 .sparkle .path:nth-child(2){--scale_path_2:1.2}.button2 .sparkle .path:nth-child(3){--scale_path_3:1.2}@keyframes path{0%,100%,34%,71%{transform:scale(1)}17%{transform:scale(var(--scale_path_1,1))}49%{transform:scale(var(--scale_path_2,1))}83%{transform:scale(var(--scale_path_3,1))}}.button2 .text_button2{position:relative;z-index:10;background-image:linear-gradient(90deg,hsla(0 0% 100% / 1) 0,hsla(0 0% 100% / var(--active,0)) 120%);background-clip:text;font-size:1rem;color:transparent}
  /*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{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 */

  .buttonCard,.buttonCard svg path{transition:.4s}.buttonCard{display:flex;justify-content:center;align-items:center;padding:10px 15px;gap:15px;background-color:#181717;outline:#181717 solid 3px;outline-offset:-3px;border-radius:5px;border:none;cursor:pointer}.buttonCard .text{color:#fff;font-weight:700;font-size:1em;transition:.4s}.buttonCard:hover{background-color:transparent}.buttonCard:hover .text{color:#181717}.buttonCard:hover svg path{fill:#181717}


  .headerSlider {align-content: start;text-align:center; margin-right: auto; }
  #LP:hover{scale: 1.07; transition: 0.5s ease;}
  #PortfoP:hover {scale: 1.07;transition: 0.5s ease;}
  #BP:hover {scale: 1.07;transition: 0.5s ease;}
  #Prod1{visibility: hidden;}

  #Prod2 {visibility: hidden}
  #Prod3 {visibility: hidden}
  
  .arrow,.main{position:relative;display:flex}.main>.inp{display:none}.main{font-family: 'Audiowide'; font-weight:800;color:#fff;background-color:rgb(88, 177, 141);padding:3px 15px;border-radius:10px;align-items:center;height:2.5rem;width:350px;cursor:pointer;justify-content:space-between;}.arrow{height:34%;aspect-ratio:1;margin-block:auto;justify-content:center;transition:.3s}.arrow::after,.arrow::before{content:"";position:absolute;background-color:#fff;height:100%;width:2.5px;border-radius:500px;transform-origin:bottom}.arrow::after{transform:rotate(35deg) translateX(-.5px)}.arrow::before{transform:rotate(-35deg) translateX(.5px)}.main>.inp:checked+.arrow{transform:rotateX(180deg)}.menu-container{background-color:#fff;color:rgb(88, 177, 141);border-radius:10px;position:absolute;width:100%;left:0;top:130%;overflow:hidden;clip-path:inset(0% 0% 0% 0% round 10px);transition:.4s}.menu-list{--delay:0.4s;--trdelay:0.15s;padding:8px 10px;border-radius:inherit;transition:background-color .2s;position:relative;transform:translateY(30px);opacity:0}.menu-list::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);height:1px;background-color:rgba(0,0,0,.3);width:95%}.menu-list:hover{background-color:#dfdfdf}.inp:checked~.menu-container{clip-path:inset(10% 50% 90% 50% round 10px)}.inp:not(:checked)~.menu-container .menu-list{transform:translateY(0);opacity:1}.inp:not(:checked)~.menu-container .menu-list:first-child{transition:transform .4s var(--delay),opacity .4s var(--delay)}.inp:not(:checked)~.menu-container .menu-list:nth-child(2){transition:transform .4s calc(var(--delay) + (var(--trdelay) * 1)),opacity .4s calc(var(--delay) + (var(--trdelay) * 1))}.inp:not(:checked)~.menu-container .menu-list:nth-child(3){transition:transform .4s calc(var(--delay) + (var(--trdelay) * 2)),opacity .4s calc(var(--delay) + (var(--trdelay) * 2))}.inp:not(:checked)~.menu-container .menu-list:nth-child(4){transition:transform .4s calc(var(--delay) + (var(--trdelay) * 3)),opacity .4s calc(var(--delay) + (var(--trdelay) * 3))}.bar-inp{-webkit-appearance:none;display:none;visibility:hidden}.bar{display:flex;height:50%;width:20px;flex-direction:column;gap:3px}.bar-list{--transform:-25%;display:block;width:100%;height:3px;border-radius:50px;background-color:#fff;transition:.4s;position:relative}.inp:not(:checked)~.bar>.top{transform-origin:top right;transform:translateY(var(--transform)) rotate(-45deg)}.inp:not(:checked)~.bar>.middle{transform:translateX(-50%);opacity:0}.inp:not(:checked)~.bar>.bottom{transform-origin:bottom right;transform:translateY(calc(var(--transform) * -1)) rotate(45deg)}
.secondPhase:hover {background-color: rgba(70, 139, 101, 0.824);  transition: 0.5s;}
  /* #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 { text-shadow: 1px 1px rgb(88, 177, 141); color: black; border-radius: 30px; padding: 5px; width: 40vw;}
  .faqPrev li {width: 35vw; padding: 5px; 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;padding: 5px; text-shadow: 1px 1px 0px rgb(0, 0, 0);text-align: start; }
  
  
  .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: 5px;width: fit-content;}
  .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;overflow: hidden;}
  .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: 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  */
  /* .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: 250px; height: 500px ; border-right: solid rgb(255, 255, 255) 3px; border-left: solid rgb(255, 255, 255) 3px; border-radius: 20px; box-shadow: 0px 0px 27px rgb(255, 255, 255);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);}
  
  
  /* ############################################################################################## */
  /* 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: rgb(255, 255, 255);  height:fit-content; background-color: rgb(0, 0, 0); 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: 5px;}
  .designForm textarea {border-bottom: solid blueviolet 2px; font-size: larger; border-radius: 30px; padding: 5px;}
  .designForm button {font-size: 1rem; 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;}
  
  .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) {
  
  .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: 2rem;}
  .font_size_monster {font-size: 3rem;}
  
  .unreasHeader {font-size: 5rem;}
  
  .firstViewI {padding-top: 0%;}
  .firstViewII {padding-top: 20%;}
  .firstViewIII {padding-top: 20%;}
  .firstViewIV {padding-top: 20%;}
  .firstViewV {padding-top: 20%;}
  
  .whiteSpacing {margin: 2.5rem;}
  
  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 ⚠️ */
  .stickyHeader { padding: 4%;}
  .mobileBox {max-width: fit-content; margin-left: auto; margin-right: auto;}
  
  .homePhase {width: 100vw; height: 60vh;  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; 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(216, 94, 253, 0.164);padding: 5px;letter-spacing: normal;line-height: normal; text-shadow: 1px 1px rgb(88, 177, 141); }
  
  /* .exp2 {width: 350px; margin-left: auto; margin-right: auto;} */
  /* #sliderLtoR {width: fit-content; } */
  #parentSlider { overflow-x: scroll; scrollbar-width:none; justify-content: start; }
  .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: start; gap: 0rem;overflow: scroll;}
  .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; background-position: center;}
  .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;}
  
  /* 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); height: fit-content; 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;
  }
  
  }