* {
  box-sizing: border-box;
}

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

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

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

}


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

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

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

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

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

.wallpaper { margin: 0; background: url(./Image/11-total-shape-.jpg); object-fit: cover;background-size: cover;width: 100vw;height: 100vh;z-index: -2;position: absolute;background-position: center;}
.wallpaper2 { margin: 0; background: url(./Image/6-annie-spratt-.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-marek-levak-.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-brett-jordan-.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-luis-melendez-.jpg); object-fit: cover;background-size: cover;width: 100vw;height: 100vh;z-index: -2;position: absolute; background-position: center;}

.stickyHeader {
  align-items: center;
  position: fixed;
  left: 0; right: 0;
  padding: 2%;
  display: flex;
  justify-content: center;
  flex-direction: row;
  background-color: rgba(255, 255, 255, 0.918);
  color: var(--color-B-03);
  z-index: 1;
}

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


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

.svg_btn {display: none;}

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

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

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

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

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

.marcellus-regular {
 font-family: "Marcellus", serif;
 font-weight: 400;
 font-style: normal;
}
.bebas-neue-regular {
 font-family: "Bebas Neue", serif;
 font-weight: 400;
 font-style: normal;
}
.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;
}
.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;
}

.big-shoulders-inline-stripped {
  font-family: "Big Shoulders Inline", sans-serif;
  font-optical-sizing: auto;
  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;
}

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

a { text-decoration: none; color: rgb(255, 255, 255);}
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; color: var(--color-B-03);}
  h2 {font-family: "Kanit", serif;}
  h3 {font-family: "Rowdies", serif;}
  h4 {font-family: "Gruppo";}
  li, p  {font-family: "Kanit";}
  ol, ul {font-family: "Gruppo"; }
  hr {color: white; background-color: aliceblue;}
  button {font-family: "Rowdies"; border:solid transparent;}
  input {font-family: "Kanit";}
  textarea {font-family: "Karla";}

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

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: 80vh;  display: flex; justify-content: center; align-items: center; }
.secondPhase {width: 100vw; height: fit-content; background-color: white; display: grid; justify-content: center; gap: 1rem;}
.thirdPhase {width: 100vw; height: fit-content; background-color: white;display: grid; justify-content: center;gap: 1rem;}
.fourPhase {width: 100vw; height: fit-content; background-color: white;display: grid; justify-content: center;gap: 1rem;}
.galleryPhase {width: 100vw; height: fit-content; background-color: white;display: grid; justify-content: center;}
.contactPhase {padding: 1rem; width: 100vw; height: fit-content; color: white; background-color: black;display: flex; justify-content: center;gap: 1rem;}
.location{width: 200px; height: 200px;}

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

.comment {font-family: "Moon Dance"; font-size: larger;}

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

.homePhaseII {width: 100vw; height: fit-content;  display: flex; justify-content: center; gap: 2rem; background-color: #00000092; }
.secondPhaseII {width: 100vw;text-shadow: 1px 1px rgb(255, 255, 255);color: var(--color-B-03);  height: fit-content; background-color: black; 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: #000000;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;}

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

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

.standard { width: 40vw; display: grid; border: solid 3px rgb(128, 159, 177); padding: 0.5rem;background-color: white; gap: 0.5rem; border-radius: 30px; color: rgb(128, 159, 177);}
.professional {width: 40vw; display: grid; border: solid 3px var(--color-B-03) ; padding: 0.5rem; background-color: white; gap: 0.5rem; border-radius: 30px; color: var(--color-B-03);}
.lineStandard { text-align: start; padding: 15px; background-color: white; color: black; line-height: 35px;}
.linePro { text-align: start; padding: 15px; background-color: white; color: black; line-height:  45px;}
.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;}

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

.p1Pro::before {content: "Standard Model Pattern"; background-color: rgba(19, 19, 19, 0.909); border-radius: 15px; border: solid black 1px; padding: 10px; color: white;}
.p2Pro::before {content: "Business + Sub Pages"; background-color: rgba(19, 19, 19, 0.909); border-radius: 15px; border: solid black 1px; padding: 10px; color: white;}
.p3Pro::before {content: "Translation Setup"; background-color: rgba(19, 19, 19, 0.909); border-radius: 15px; border: solid black 1px; padding: 10px; color: white;}
.p4Pro::before {content: "Third-Party Integration"; background-color: rgba(19, 19, 19, 0.909); border-radius: 15px; border: solid black 1px; padding: 10px; color: white;}
.p5Pro::before {content: "Prototype Review"; background-color: rgba(19, 19, 19, 0.909); border-radius: 15px; border: solid black 1px; padding: 10px; color: white;}
.p6Pro::before{content: "Final Feedback"; background-color:rgba(19, 19, 19, 0.909); border-radius: 15px; border: solid black 1px; padding: 10px; color: white;}
.p7Pro::before {content: "Website Delivery"; background-color: rgba(19, 19, 19, 0.909); border-radius: 15px; border: solid black 1px; padding: 10px; color: white;}
.p8Pro::before {content: "Ongoing Support"; background-color: rgba(19, 19, 19, 0.909); border-radius: 15px; border: solid black 1px; padding: 10px; color: white;}

.processAim {font-size: 1rem; display: flex; font-family: "Gruppo"; padding: 5px;border: solid var(--color-B-03) 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;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: 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-R-03); color: white; background-color: black;box-shadow: 0 0 25px var(--color-R-03);}
/* ############################################################################################## */
/* THird Page */
.homePhaseIII {width: 100vw; height: 5vh;  display: flex; justify-content: center; gap: 2rem;}

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

/* ############################################################################################## */
/* Fourth Page */
.aboutPhaseIV {width: 100vw;height: fit-content;  background-color: rgba(255, 255, 255, 0.639);display: grid; justify-content: center;}
.leftSplitIV {display:  grid; justify-content: center; text-align: center; align-content: center; text-align: center; margin-right: 3rem;}
.rightSplitIV {height: fit-content; border: solid 3px black; border-radius: 10px; position: relative; background:url(./Image/20.jpg);background-size: cover; background-position: center; display: grid; justify-content: center; text-align: center; align-content: center;text-align: center; margin-left: 3rem; background-color: white;}
.aboutInfo { color: white; overflow: hidden; transition: height 1s ease; font-family: "Caveat"; width: 30vw;height: 100%; padding: 2rem; align-items: center; gap: 1rem; background-color: rgba(0, 0, 0, 0.47); }
.corners { display: flex;}
.dot  {z-index: 300; height: 5px;width: 15px;border-radius: 30px; margin: 0 2px;background-color: #bbb;display: inline-block;transition: background-color 0.6s ease;}
.prev {transform: translate(100%,250%); z-index: 1; cursor: pointer; user-select: none; background-color: #bbbbbbdd;position: relative; height: fit-content;width: fit-content;font-size: 3rem;border-radius: 5px;}
.next {transform: translate(-100%,250%); z-index: 1; cursor: pointer; user-select: none; background-color: #bbbbbbdd;position: relative;height: fit-content;width: fit-content;font-size: 3rem;border-radius: 5px;}

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

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

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


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

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

@media (max-width: 760px) {

.stickyHeader {justify-content: center; background-color: azure; gap: 0rem;}
.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 li { 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;}

.firstView {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 ⚠️ */

.homePhase {width: fit-content; height: 50vh;  display: flex; justify-content: center;}
.secondPhase {color: var(--color-B-03);width: 100vw;   display: grid; justify-content: center; gap: 1rem;}
.thirdPhase {width: 100vw; height: fit-content; display: grid; justify-content: center;gap: 1rem;overflow: hidden;}
.fourPhase {color: var(--color-B-03);width: 100vw; display: grid; justify-content: center;gap: 1rem;}
.galleryPhase {width: 100vw; height: fit-content; display: grid; justify-content: center; gap: 1rem;}
.contactPhase {color: var(--color-B-03);width: 100vw; height: 30vh; 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: 50vh; display: flex; gap: 1rem; align-items: center;}
.secondPhaseII {color: var(--color-B-03);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: var(--color-B-03);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%; 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 Mobile  */
.productExp2 {background: url(./Image/testimony/8.jpg); background-size: cover;  width:150px; height: 150px; border: solid var(--color-V-03); background-position: center;border-top-left-radius: 30px;border-top-right-radius: 30px;}
.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:180px; 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 {box-shadow: 0 0 25px var(--color-V-03); 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: 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;}

.descriptProduct2 {text-align: center; line-height: normal; background-color: var(--color-R-03);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; }

.standard {width: fit-content; display: grid; border: solid 3px rgb(128, 159, 177); padding: 5px;background-color: white; gap: 1rem; border-radius: 30px; color: rgb(128, 159, 177);}
.professional {width: fit-content; display: grid; border: solid 3px var(--color-B-03) ; padding: 5px; background-color: white; gap: 1rem; border-radius: 30px; color: var(--color-B-03);}
.lineStandard { text-align: start; padding: 5px; background-color: white; color: black; line-height: 35px;}
.linePro { text-align: start; padding: 5px; background-color: white; color: black; line-height:  35px;}
/* ############################################################################################## */
/* 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: 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: 2rem 2rem;border: solid var(--color-V-03) 2px; border-radius: 30px; color: white; text-align: center; box-shadow: 0px 0px 10px var(--color-R-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;
}

}