* {
  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;

}

.tracking-in-expand{-webkit-animation:tracking-in-expand .7s cubic-bezier(.215,.61,.355,1.000) both;animation:tracking-in-expand .7s cubic-bezier(.215,.61,.355,1.000) both}
@-webkit-keyframes tracking-in-expand{0%{letter-spacing:-.5em;opacity:0}40%{opacity:.6}100%{opacity:1}}@keyframes tracking-in-expand{0%{letter-spacing:-.5em;opacity:0}40%{opacity:.6}100%{opacity:1}}

.kenburns-top-left{-webkit-animation:kenburns-top-left 7s linear reverse;animation:kenburns-top-left 14s linear reverse}
@-webkit-keyframes kenburns-top-left{0%{-webkit-transform:scale(1) translate(0,0);transform:scale(1) translate(0,0);-webkit-transform-origin:16% 16%;transform-origin:16% 16%}100%{-webkit-transform:scale(1.25) translate(-20px,-15px);transform:scale(1.25) translate(-20px,-15px);-webkit-transform-origin:top left;transform-origin:top left}}@keyframes kenburns-top-left{0%{-webkit-transform:scale(1) translate(0,0);transform:scale(1) translate(0,0);-webkit-transform-origin:16% 16%;transform-origin:16% 16%}100%{-webkit-transform:scale(1.25) translate(-20px,-15px);transform:scale(1.25) translate(-20px,-15px);-webkit-transform-origin:top left;transform-origin:top left}}

.kenburns-top-right{-webkit-animation:kenburns-top-right 7s ease-out reverse;animation:kenburns-top-right 14s ease-out reverse}
@-webkit-keyframes kenburns-top-right{0%{-webkit-transform:scale(1) translate(0,0);transform:scale(1) translate(0,0);-webkit-transform-origin:84% 16%;transform-origin:84% 16%}100%{-webkit-transform:scale(1.25) translate(20px,-15px);transform:scale(1.25) translate(20px,-15px);-webkit-transform-origin:right top;transform-origin:right top}}@keyframes kenburns-top-right{0%{-webkit-transform:scale(1) translate(0,0);transform:scale(1) translate(0,0);-webkit-transform-origin:84% 16%;transform-origin:84% 16%}100%{-webkit-transform:scale(1.25) translate(20px,-15px);transform:scale(1.25) translate(20px,-15px);-webkit-transform-origin:right top;transform-origin:right top}}
/* Animation */

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

@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;
}

.wallpaper { overflow: hidden; margin: 0; object-fit: cover;background-size: cover;width: 100vw;height: 100vh;z-index: -2;position: absolute;background-position: center;}
.carrousel-wall {display: none; animation: fadeIn 1s ease; }
.wallpaper img {width: 100vw ; height: 100vh;}

.wallpaper2 { margin: 0; background: url(./Image/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(./Image/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(./Image/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(./Image/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:space-between;
  flex-direction: row;
  background-color: rgba(255, 255, 255, 0.845);
  color: var(--color-B-10);
  z-index: 1;
}

/* .stickyHeader:hover {background-color: transparent; transition: 0.6s ease; color: var(--color-B-03); } */




.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 { 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::before{

  content: "";
  background-color:  var(--color-B-03);
  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:  var(--color-B-03);
  position: relative;
  font-size: 1.5rem;
}


.boxes {

position: absolute;

}
.boxLang {
 margin: 2px;
  color: black;
  background-color:  var(--color-B-03);
  border-radius: 30px;
  border: none;

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

.boxLang:hover {
  color:  var(--color-B-03);
  background-color: black;
  transition:  0.3s ease;}


  h1 {font-family: "Lexend Giga", serif;}
  h2 {font-family: "Macondo", serif;}
  h3 {font-family: "Source Code Pro", serif;}
  h4 {font-family: "Source Code Pro";}
  li, p  {font-family: "Macondo";}
  ol, ul {font-family: "Source Code Pro"; }
  hr {color: white; background-color: aliceblue;}
  button {font-family: "Source Code Pro"; border:solid transparent;}
  input {font-family: "Macondo";}
  textarea {font-family: "Source Code Pro";}

.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;}

.marginRule {margin-left: auto; margin-right: auto;}

.firstViewI {padding-top: 0%;}

.whitespace {margin: 5rem;}

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

.goBuy {cursor: pointer; padding: 1rem; width: fit-content; background-color: azure; box-shadow: 0px 0px 5px  var(--color-B-03); color:  var(--color-B-03); height: fit-content; border-radius: 30px;}

.homePhase {width: 100vw; height: 100vh;  display: flex; justify-content: center; align-items: center; }
.secondPhase {width: 100vw; height: 100vh; background-color: white; display: grid; justify-content: center; gap: 1rem;}
.thirdPhase {width: 100vw; height: 65vh; background-color: white;display: flex; justify-content: center;padding: 2rem;}
.fourPhase {width: 100vw; height: 100vh; background-color: white;display: grid; justify-content: center; padding: 1rem;}
.galleryPhase {width: 100vw; height: 100vh; background-color: white;display: grid; justify-content: center;}
.contactPhase {padding: 1rem; width: 100vw; height: 100vh; color: white; background-color: black;display: flex; justify-content: center;gap: 1rem;}
.location{width: 30vw; height: 60vh;}

.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: "Moon Dance"; font-size: larger; }

/* #################################### */
.fancy .top-key,.fancy::before{height:2px;position:absolute;width:1.5625rem}.fancy,.fancy .text{text-decoration:none}.fancy{background-color:rgba(255, 255, 255, 0.863);border:2px solid #000;border-radius:0;box-sizing:border-box;color:#fff;cursor:pointer;display:inline-block;float:right;font-weight:700;letter-spacing:.05em;margin:0;outline:0;overflow:visible;padding:1.25em 2em;position:relative;text-align:center;text-transform:none;transition:.3s ease-in-out;user-select:none;font-size:13px}.fancy::before{content:" ";background:#000;top:50%;left:1.5em;transform:translateY(-50%);transform-origin:center;transition: .3s linear,width .3s linear}.fancy .text{font-size:1.125em;line-height:1.33333em;padding-left:2em;display:block;text-align:left;transition:.3s ease-in-out;text-transform:uppercase;color:#000}.fancy .top-key{top:-2px;left:.625rem;background:#e8e8e8;transition:width .5s ease-out,left .3s ease-out}.fancy .bottom-key-1,.fancy .bottom-key-2{height:2px;bottom:-2px;position:absolute;background:#e8e8e8;transition:width .5s ease-out,right .3s ease-out}.fancy .bottom-key-1{width:1.5625rem;right:1.875rem}.fancy .bottom-key-2{width:.625rem;right:.625rem}.fancy:hover{color:#fff;background:#000}.fancy:hover::before{width:.9375rem;background:#fff}.fancy:hover .text{color:#fff;padding-left:1.5em}.fancy:hover .top-key{left:-2px;width:0}.fancy:hover .bottom-key-1,.fancy:hover .bottom-key-2{right:0;width:0}
.card{width:fit-content;height:fit-content;background-color:#000000;display:flex;align-items:center;justify-content:center;padding:25px;gap:20px;box-shadow:0 0 20px rgba(0,0,0,.055)}.socialContainer{width:52px;height:52px;background-color:#2c2c2c;display:flex;align-items:center;justify-content:center;overflow:hidden;transition-duration:.3s}.containerOne:hover{background-color:#d62976;transition-duration:.3s}.containerTwo:hover{background-color:#00acee;transition-duration:.3s}.containerThree:hover{background-color:#0072b1;transition-duration:.3s}.containerFour:hover{background-color:#128c7e;transition-duration:.3s}.socialContainer:active{transform:scale(.9);transition-duration:.3s}.socialSvg{width:17px}.socialSvg path{fill:rgb(255,255,255)}.socialContainer:hover .socialSvg{animation:.3s both slide-in-top}@keyframes slide-in-top{0%{transform:translateY(-50px);opacity:0}100%{transform:translateY(0);opacity:1}}
.card-client{background:#a7bdbd47;width:13rem;padding:25px 20px;border:2px solid #5d6d6b;box-shadow:0 6px 10px #cfd4de;border-radius:10px;text-align:center;color:#fff;font-family:Poppins,sans-serif;transition:.3s}.card-client:hover{transform:translateY(-10px)}.user-picture{background-color: rgba(255, 255, 255, 0.788); overflow:hidden;object-fit:contain;width:9rem;height:11rem;border:2px solid #60716e;border-radius:19px;display:flex;justify-content:center;align-items:center;margin:auto}.user-picture img{width:14rem;fill:currentColor;  }.name-client{margin:20px 0 0;font-weight:600;font-size:18px}.name-client span{display:block;font-weight:200;font-size:16px}.social-media:before{content:" ";display:block;width:100%;height:2px;margin:20px 0;background:#7cdacc}.social-media a{position:relative;margin-right:15px;text-decoration:none;color:inherit}.social-media a:last-child{margin-right:0}.social-media a svg{width:1.1rem;fill:currentColor}.tooltip-social{background:#262626;display:block;position:absolute;bottom:0;left:50%;padding:.5rem .4rem;border-radius:5px;font-size:.8rem;font-weight:600;opacity:0;pointer-events:none;transform:translate(-50%,-90%);transition:.2s;z-index:1}.tooltip-social:after{content:" ";position:absolute;bottom:1px;left:50%;border:solid transparent;border-width:10px 10px 0;transform:translate(-50%,100%)}.social-media a .tooltip-social:after{border-top-color:#262626}.social-media a:hover .tooltip-social{opacity:1;transform:translate(-50%,-130%)}

/* ####################### */
/* Marquee */

.content{max-width:1240px;margin:0 auto;padding:1rem}.content__hero{height:40vh;display:flex;align-items:center;justify-content:center}.content__heading{text-align:center}.features{display:flex;flex-direction:column;gap:3rem}.features__item{display:flex;flex-wrap:wrap;align-items:center;gap:2rem}.features__item--left{flex-direction:row;text-align:right}.features__item--right{flex-direction:row-reverse}.features__image{flex:1 1 40%;position:relative}.features__card{border-radius:8px;overflow:hidden;position:relative;aspect-ratio:1/1}.features__img{max-width:100%;position:absolute;object-fit:cover;display:block}.features__content{flex:1 1 55%}.features__title{font-size:1.8em;margin-block-end:1rem}.features__description{line-height:1.6}.gs_reveal{opacity:0;visibility:hidden;will-change:transform,opacity}.spacer{height:100vh}
.panel {
  top: 0;
  height: 100vh;
  will-change: transform;
}

.sec_marquee {width: 100vw; height: 100vh;}


.marquee { width: 100vw; 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: 350px; --marquee-item-height:350px; --marquee-duration: 27s; --marquee-items: 8;}
.pause:hover .marquee__item {
  animation-play-state: paused;
}

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

/* ############################################################################################# */
/* # Second Page */
.bigexp2 { color: white; }

.exp2 {text-align: center; cursor: pointer; padding: 0 2rem; width: fit-content; background-color: rgba(255, 255, 255, 0.9); box-shadow: 0px 0px 5px var(--color-B-03); color: var(--color-B-03); height: fit-content; border-radius: 30px;}
.exp3 {text-align: center; cursor: pointer; padding: 1rem; width: fit-content; background-color: rgba(255, 255, 255, 0.9); box-shadow: 0px 0px 5px var(--color-R-03); color: var(--color-R-03); height: fit-content; border-radius: 30px;}

.rightPaddContact {text-align: start;padding: 1rem;line-height: 40px;}

/* 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; overflow-x: hidden; }

.splitProduct {display: grid; text-align: center; border-radius: 30px; margin: 1rem; height: fit-content;}
/* Experience 1  */
.productExp1 { width: 200px; height: 200px; border: solid var(--color-R-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-R-03);border-bottom-right-radius: 3%;border-bottom-left-radius: 3%;}

/* Experience 2  */
.productExp2 {width: 250px; height:250px; border: solid var(--color-V-03); background-position: center; border-radius: 50px; }
.descriptProduct2 {text-align: center; line-height: normal; background-color: var(--color-V-03);}
.planPhaseII {width: 100vw;color: white; height: fit-content; background-color: rgb(255, 255, 255);display: grid; justify-content: center;gap: 1rem;}

/* Experience 4 */
.productExp4 { width: 40vw; height: fit-content; border-radius: 3px;}



.productExp5 { width: 350px; height: 250px; margin-left: auto; margin-right: auto; border-radius: 45px;}

.serviceI{ width: 45vw; border-radius: 30px;background-color: rgba(255, 255, 255, 0.932);border: solid 3px rgb(230, 132, 13);box-shadow: 0 0 25px rgb(230, 132, 13) ;}
.serviceII{ width: 45vw; border-radius: 30px; background-color: rgba(255, 255, 255, 0.838); border: solid 3px var(--color-B-03);box-shadow: 0 0 25px var(--color-B-03) ;}
.serviceIII{border-radius: 30px; background-color: rgba(255, 255, 255, 0.854); border: solid 3px var(--color-T-05); box-shadow: 0 0 25px var(--color-T-05) ;}

.lineServI {}
.lineServII {}
.lineServIII {}


.findOut {display: grid;width: fit-content; margin-left: auto; margin-right: auto;}
.findOut a {padding: 0 2rem; border-radius: 30px;color: black; font-size: var(--font-medium); letter-spacing: 5px;   font-family: "Lexend Giga", serif; text-shadow: none;box-shadow: 2px 2px black;}
.findOut a:hover {box-shadow: 4px 4px black;}
.meeting {font-size: 2rem;background-color: rgb(0, 0, 0); box-shadow: 0px 0px 20px rgb(47, 209, 90); color: var(--color-B-03); border-radius: 30px; padding: 1rem; font-family: "Kanit"; padding: 0 15%; color: white; }
/* #################################################################### */
/* 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 {background-color: rgb(255, 255, 255);margin: 1rem;color: black;font-size: 1rem;line-height: 30px;box-shadow: 0px 0px 25px var(--color-B-03);padding: 1rem;border-radius: 30px;}
.notFor {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;}

.faq {  background-color: white; text-shadow: 1px 1px var(--color-B-03); color: black; border-radius: 30px; padding: 1rem;}
.faq li {width: 80vw; margin: 1rem; text-align: center; cursor: pointer; border-radius: 30px; box-shadow: 2px 2px var(--color-B-03); height: fit-content;text-shadow: 1px 0px rgb(255, 255, 255);background-color:white}
.childHid {display: none; text-align: center; font-family: "Kanit", serif; font-weight: 600;padding: 1rem; background-color: white; border-radius: 30px;}

/* ############################################# */
/* 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;border: solid var(--color-R-02);  padding: 1rem; text-align: center; line-height: normal; color: rgb(0, 0, 0); border-bottom-left-radius: 30px;border-bottom-right-radius: 30px}
.goPrice { padding: 1rem;border: solid var(--color-V-03) 2px; border-radius: 30px; color: white; text-align: center; box-shadow: 3px 3px 15px var(--color-B-03); background-color: #000000; cursor: pointer; width: 300px;margin-left: auto; margin-right: auto;}
.meeting {font-size: var(--font-size-header);background-color: rgb(0, 0, 0); box-shadow: 0px 0px 20px rgb(47, 209, 90); color: var(--color-B-03); border-radius: 30px; padding: 5px; font-family: "Kanit"; padding: 0 15%; color: white; }


.carrousel{ position: relative; z-index: 0; }
.carrousel-track {display: none;  animation: fadeIn 1s ease;}
.carrousel img {width: 35vw; height: 70vh;opacity: 0.95; border-radius: 15px;}

.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-R-03); color: white; background-color: black;box-shadow: 0 0 25px var(--color-R-03);}
/* ############################################################################################## */

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

/* ############################################################################################## */
/* Fith Page */
.homePhaseV {width: 100vw; height: fit-content;  display: flex; justify-content: center; }

.contactFormV {width: 100vw;text-shadow: 1px 1px rgb(255, 255, 255);display: flex; color: black; height: 100vw;  height:fit-content; background-color: rgb(255, 255, 255); justify-content: center; gap: 2rem; }
.designForm{ display: grid;text-align: left;}
.designForm input { width: 30vw; border-bottom: solid blueviolet 1px; font-size:medium; border-radius: 7px; padding: 7px;}
.designForm textarea {border-bottom: solid blueviolet 2px; font-size:medium; border-radius: 7px; padding: 7px;}
.designForm button {font-size: 1.2rem; padding: 7px; border-radius: 7px; color: rgb(255, 255, 255); text-align: center; box-shadow: 0px 0px 10px var(--color-P-03); background-color: #3640ff; cursor: pointer;} */
.form-label {}
.form-group {display: flex;flex-direction: column;  }
/* .contact-section{width:100%;max-width:40rem;margin-left:auto;margin-right:auto;padding:3rem 1rem}.contact-intro>*+*{margin-top:1rem}.contact-title{font-size:1.875rem;line-height:2.25rem;font-weight:700}.contact-description{color:rgb(107 114 128)}.form-group-container{display:grid;gap:1rem;margin-top:2rem}.form-group{display:flex;flex-direction:column}.form-label{margin-bottom:.5rem}.form-input,.form-textarea{padding:.5rem;border:1px solid #e5e7eb;display:flex;height:2.5rem;width:100%;border-radius:.375rem;font-size:.875rem;line-height:1.25rem}.form-input::placeholder,.form-textarea:focus-visible{color:#6b7280}.form-input:focus-visible,.form-textarea:focus-visible{outline:#2563eb solid 2px;outline-offset:2px}.form-textarea{min-height:120px}.form-submit{width:100%;margin-top:1.2rem;background-color:#3124ca;color:#fff;padding:13px 5px;border-radius:.375rem} */

.prev {display: none; transform: translate(); z-index: 300; cursor: pointer; user-select: none; background-color: #bbbbbbdd;position: relative; ;font-size: 3rem;border-radius: 5px;}
.next {display: none; transform: translate(); z-index: 300; cursor: pointer; user-select: none; background-color: #bbbbbbdd;position: relative;font-size: 3rem;border-radius: 5px;}


/* ########################################################################################" */
/* Spare page adjustements */

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

@media (max-width: 760px) {

.stickyHeader {justify-content: center; background-color: azure; gap: 5rem;}
.svg_btn {display: block; fill: var(--color-B-03); cursor: pointer; margin-left: auto; display: block;}

.nested_headers { border: solid transparent; animation: 0.5s ease running slide_translate; margin: 0; width: 100vw;padding: 2rem;background-color: black;opacity: 0.9;font-family: "Moon Dance", serif;font-weight: 600;position: fixed;color:  var(--color-B-03);height: fit-content;}

.nested_headers p { padding: 10px;font-size: xx-large;cursor: pointer;margin: 20px;}

.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: 10px;font-size: var(--font-size-header);border: solid transparent;background-color:  black;}

.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.3rem;}
.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;}

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

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

/* .bigexp2 {width: 350px; background-color: rgba(255, 255, 255, 0.9); color: var(--color-B-03);} */

/* ###################################################################################### */
/* FIrst Page Mobile ⚠️ */
.wallpaper { overflow: hidden; margin: 0; object-fit: cover;background-size: cover;width: 100vw;height: 80vh;z-index: -2;position: absolute;background-position: center;}
.carrousel-wall {display: none; animation: fadeIn 1s ease; }
.wallpaper img {width: 100vw ; height: 70vh;}

.homePhase {width: 100vw; height:65vh;  display: grid; justify-content: center; align-items: 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;overflow: hidden;}
.fourPhase {width: 100vw; height: 100vh; display: grid; justify-content: center;gap: 1rem;}
.galleryPhase {width: 100vw; height: fit-content; display: grid; justify-content: center; gap: 1rem;}
.contactPhase {width: 100vw; height: fit-content; display: flex; justify-content: space-around;gap: 20px; font-size: 90%;}

.location{width: 100px; height: 100px;}



/* ############################################################################################# */
/* # Second Page Mobile Mobile ⚠️*/

.Exp1 {padding: 1rem; width: fit-content;  height: fit-content; font-size: 1rem;}
.Exp2 {padding: 1rem; width: fit-content;  height: fit-content; font-size: 1rem;}
.Exp3 {padding: 1rem; width: fit-content;  height: fit-content; font-size: 1rem;}

.homePhaseII { width: 100vw; height: fit-content; display: flex; gap: 1rem; align-items: center;}
.secondPhaseII {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 {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;}

.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%;}
.descriptProduct1 {text-align: center; line-height: normal;}
/* Experience 2 Mobile  */
.productExp2 { background-size: cover;  width:150px; height: 150px;  background-position: center;}
.descriptProduct2 {text-align: center; line-height: normal; }

/* Experience 3 Mobile  */

.productExp3 { width:180px; height: 200px; background-position: center; background-size: contain;}
.descriptProduct3 { width: 180px; padding: 15px; text-align: center; line-height: normal; color: rgb(0, 0, 0); border-bottom-left-radius: 30px;border-bottom-right-radius: 30px}
.goPrice { padding: 5px; border-radius: 30px; color: red; text-align: center; cursor: pointer; width: 300px;margin-left: auto; margin-right: auto;}

.descriptProduct2 {text-align: center; line-height: normal;border-bottom-right-radius: 3%;border-bottom-left-radius: 3%;}

/* 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 var(--color-B-03) 1px; }


/* 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-R-03);  }
.announce {width: 150px; height: 150px; background-size: cover; position: absolute; }

.productExp5 { width: 350px; height: 250px; margin-left: auto; margin-right: auto; border-radius: 45px;}

.serviceI{ width: 400px; border-radius: 30px;background-color: rgba(255, 255, 255, 0.932);border: solid 3px rgb(230, 132, 13);box-shadow: 0 0 25px rgb(230, 132, 13) ;}
.serviceII{width: 400px; border-radius: 30px; background-color: rgba(255, 255, 255, 0.838); border: solid 3px var(--color-B-03);box-shadow: 0 0 25px var(--color-B-03) ;}
.serviceIII{border-radius: 30px; background-color: rgba(255, 255, 255, 0.854); border: solid 3px var(--color-T-05); box-shadow: 0 0 25px var(--color-T-05) ;}

.lineServI {}
.lineServII {}
.lineServIII {}

/* ############################################################################################## */
/* 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 { border: solid 3px black; border-radius: 10px; padding: 0; position: relative; background:url(./Image/2.jpg);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; background-color: rgba(0, 0, 0, 0.511);color: white; }
.carrouselIV{ position: relative; z-index: 0; margin: 0;padding: 0; }
.carrousel-trackIV {display: none;  animation: fadeIn 1s ease;}
.carrouselIV img {width: 350px; height: 40vh; border: solid white 1px;}

/* ############################################################################################## */
/* 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: 5px; }
.designForm input { width: 80vw; border-bottom: solid blueviolet 1px; font-size:medium; border-radius: 7px; padding: 7px;}
.designForm textarea {border-bottom: solid blueviolet 2px; font-size:medium; border-radius: 7px; padding: 7px;}
.designForm button {font-size: 1.2rem; padding: 7px; border-radius: 7px; color: rgb(255, 255, 255); text-align: center; box-shadow: 0px 0px 10px var(--color-P-03); background-color: #3640ff; cursor: pointer;} */
.form-label {}

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



@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;
}

}