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

}

.slide-in-left {-webkit-animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;        }
@-webkit-keyframes slide-in-left{0%{-webkit-transform:translateX(-1000px);transform:translateX(-1000px);opacity:0}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@keyframes slide-in-left{0%{-webkit-transform:translateX(-1000px);transform:translateX(-1000px);opacity:0}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}

.slide-out-right {	-webkit-animation: slide-out-right 0.5s linear 6.5s ;        animation: slide-out-right 0.5s linear 6.5s ;}
@-webkit-keyframes slide-out-right{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}100%{-webkit-transform:translateX(1000px);transform:translateX(1000px);opacity:0}}@keyframes slide-out-right{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}100%{-webkit-transform:translateX(1000px);transform:translateX(1000px);opacity:0}}

.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 {background: url(./Image/14.jpg); 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;} */
.hero{height:100vh;}.hero__inner{height:100%;display:grid;grid-template-columns:repeat(5,1fr)}.hero__image-cont{position:relative;overflow:hidden}.hero__image-cont:not(:last-child):after{content:"";position:absolute;right:0;background-color:#111;height:100%;top:0;width:2.5px;z-index:999}.hero__image-cont .anim-swipe,.hero__image-cont img{position:absolute;width:700%;height:100%;top:0;left:0;object-fit:cover}.hero .anim-swipe{width:100%;background-color:#111}.hero__image-cont:first-child img{left:-100%}.hero__image-cont:nth-child(2) img{left:-200%}.hero__image-cont:nth-child(3) img{left:-300%}.hero__image-cont:nth-child(4) img{left:-400%}.hero__image-cont:nth-child(5) img{left:-500%}.hero__image-cont:nth-child(6) img{left:-600%}.spacer2{height:80vh; background-color: white; z-index: 100;}
.scroll4{position:fixed;bottom:1rem;left:50%;transform:translateX(-50%);z-index:999}
.scroll2{position:absolute; left:10%;transform:translateX(-10%);z-index:1; bottom: 25%;display: grid;color: white;}
.scroll3{position:absolute;left:50%;transform:translateX(-50%);z-index:1; bottom: 10%;display: grid;color: white;}
.sr-only:not(:focus):not(:active){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.animate-me{color:#ffffff;font-size:25px;box-sizing:border-box;padding:5%;width:100%;text-align:left;perspective:500px}

.bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background-size: cover; background-repeat: no-repeat;}

body {
    background: #121212;
    color: #F1F1F1;
    font: 500 normal 22px/1.3 'Inter', sans-serif;
}
.mwg_effect044 .root {
    position: relative;
    height: 100vh;
}
.mwg_effect044 .header,
.mwg_effect044 .footer {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 25px 0;
}
.mwg_effect044 .header p,
.mwg_effect044 .footer p {
    text-transform: uppercase;
    letter-spacing: -0.01em;
    font-size: 16px;
}
.mwg_effect044 .footer {
    position: relative;
    border-top: 1px solid rgb(95, 95, 95);
    margin: calc(2 * 25px) 0 0;
}
.mwg_effect044 .footer p {
    color: rgb(95, 95, 95)
}
.mwg_effect044 .duplicate .footer p {
    color: var(--white);
}
.mwg_effect044 .line {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.mwg_effect044 .line p {
    font: 500 normal 2.5vw / 0.9 'Inter', sans-serif;
    letter-spacing: -0.05em;
    text-transform: uppercase;
}
.mwg_effect044 .line p:first-child {
    margin: 0 0 0 -0.07em;
}
.mwg_effect044 .photo {
  margin-left: auto;
  margin-right: auto;
    width: 50.2vw;
    height: max-content;
    aspect-ratio: 1.5;
    object-fit: cover;
    transform: translate(0, -5%);
    border-radius: 0.5vw;
}
.mwg_effect044 .icon {
    width: 4.8vw;
    height: auto;
}
.mwg_effect044 .containers {
    position: relative;
    pointer-events: none;
}
.mwg_effect044 .container {
    position: relative;
    padding: 0 25px;
    height: 100vh;
}
.mwg_effect044 .duplicate {
    --xpercent: 50%;
    --ypercent: 50%;
    mask-image: radial-gradient(circle at var(--xpercent) var(--ypercent), #000 25%, transparent 45%); 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    color: #fe6e6e;
}
.mwg_effect044 .duplicate .header {
    color: #fe6e6e;
} 


@media (max-width: 768px) {
    /* .mwg_effect044 .header p:last-child, 
    .mwg_effect044 .footer p:last-child {
        display: none;
    } */
     .mwg_effect044 .line {
    display: flex;
    align-items: center;
    justify-content:space-between;
    margin: 2rem;
}
     .mwg_effect044 .line p {
    font: 500 normal 7.5vw / 0.9 'Inter', sans-serif;
    letter-spacing: -0.05em;
    text-transform: uppercase;
    
}
.mwg_effect044 .icon {
    width: 6.8vw;
    height: auto;
}


    .mwg_effect044 .photo {
        width: 70vw;
        height: 60vh;
    height: max-content;
    aspect-ratio: 0.5;
    object-fit: cover;
    transform: translate(0, 0%);
    border-radius: 0.5vw;
        /* transform: translate(0, -15%); */
    } 

}

/* ############ */
/* Simultaneous Words */


.mwg_effect004 .scroll {
  display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.mwg_effect004 .pin-height {
    height: 500vh;
}
.mwg_effect004 .header {
    position: absolute;
    display: flex;
    justify-content: space-between;
    top: 25px;
    left: 25px;
    right: 25px;
}
.mwg_effect004 .header .left {
    font-size: 1.2vw;
}
.mwg_effect004 .header .right {
    display: flex;
    gap: 1em;
    text-align: right;
    font: 500 normal 0.9vw / normal 'IBM Plex Mono';
    text-transform: uppercase;
    align-items: center;
}
.mwg_effect004 .header img {
    border-radius: 0.2em;
    width: 4.6vw;
    height: 4.6vw;
    object-fit: cover;
}
.mwg_effect004 .container {
    height: 100vh;
    display: flex;
    align-items: center;
    padding: 0 25px;
}
.mwg_effect004 .paragraph {
    width: 60%;
    font: 500 normal 3.9vw/0.9 'Inter', sans-serif;
    letter-spacing: -0.03em;
}
.mwg_effect004 .word {
    display: inline-block;
    transform: translate(calc(100vw - 25px), 0);
}


/* @media (max-width: 900px) {
    .mwg_effect004 .header {display: block;}
    .mwg_effect004 .header .left {font-size: 16px}
    .mwg_effect004 .header .right {
        font-size: 13px;
        margin: 15px 0 0;
    }
    .mwg_effect004 .header .right p{
        order: 2;
        text-align: left;
    }
    .mwg_effect004 .header img {
        height: 58px;
        order: 1;
    }
    .mwg_effect004 .paragraph {
        font-size: 30px;
    }
} */
@media (max-width: 768px) {
    .mwg_effect004 .header .left {
    font-size: 6.2vw;
}
.mwg_effect004 .header .right {
    display: flex;
    gap: 1em;
    text-align: right;
    font: 500 normal 2.9vw / normal 'IBM Plex Mono';
    text-transform: uppercase;
    align-items: center;
}
.mwg_effect004 .header img {
    border-radius: 0.2em;
    width:15.6vw;
    height: 10.6vh;
    object-fit: cover;
}
    /* .mwg_effect004 .header {
        top: 15px;
        left: 15px;
        right: 15px;
    }
        
    .mwg_effect004 .word {
        transform: translate(calc(100vw - 15px), 0);
    } */
     .mwg_effect004 .paragraph {
    width: 100%;
    font: 500 normal 5.9vw/0.9 'Inter', sans-serif;
    text-shadow: 1px 1px black;
    letter-spacing: 0.5em;
    white-space: 1rem;
    overflow-x: hidden;
}
}
/* @media (max-width: 500px) {
    .mwg_effect004 .container {
        align-items: flex-end;
        padding: 0 15px 74px;
    }
    .mwg_effect004 .paragraph {
        width: 100%;
    }
    .mwg_effect004 .word {
        display: inline-block;
    } 
 }  */
/* ###################################3 */
/* Fading Transition */
/* .mwg_effect037 {display: flex;} */
.mwg_effect037 .pin-height {
    height:500vh;
}
.mwg_effect037 .container {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    /* grid-template-columns: 1fr auto 1fr; */
    align-items: center;
    /* padding: 0 3vw; */
}
.mwg_effect037 .container > *:nth-child(1) {
    justify-self: start;
}
.mwg_effect037 .container > *:nth-child(2) {
    justify-self: center;
}
.mwg_effect037 .container > *:nth-child(3) {
    justify-self: end;
}
.mwg_effect037 .text {
    font: 500 normal 3vw / normal 'Inter', sans-serif;
}
.mwg_effect037 .images {
    display: grid;
    width: 45vw;
        height: 60vh;
    aspect-ratio: 0.75;
    position: relative;
}
.mwg_effect037 .hidden {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    border-radius: 0.8vw;
    -webkit-mask-image: linear-gradient(transparent 100%, #000 125%, #000 225%);
    mask-image: linear-gradient(transparent 100%, #000 125%, #000 225%);
}
.mwg_effect037 .media {
    width: 100%;
    height: calc(100% + 60px);
    object-fit: cover;
}
.mwg_effect037 .hidden2 {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    border-radius: 0.8vw;
    -webkit-mask-image: linear-gradient(transparent 100%, #000 125%, #000 225%);
    mask-image: linear-gradient(transparent 100%, #000 125%, #000 225%);
}
.mwg_effect037 .media2 {
    width: 100%;
    height: calc(100% + 60px);
    object-fit: cover;
}

@media (max-width: 768px) {
    /* .mwg_effect037 .text {
        font-size: 14px;
    } */
    .mwg_effect037 .images {
        width: 40vw;
        height: 60vh;
     aspect-ratio: 1.75;

    }
    .mwg_effect037 .text {
    font: 500 normal 8vw / normal 'Inter', sans-serif;
}
}

/* ###################################### */
/* Card Stack */
.mwg_effect001 {
    overflow: hidden;
    position: relative;
}
.mwg_effect001 .scroll {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.mwg_effect001 .header {
    position: absolute;
    width: 100%;
    display: flex;
    align-items: center;
    font: 500 normal clamp(12px, 0.9vw, 100px) / normal 'IBM Plex Mono';
    text-transform: uppercase;
    padding: 25px;
    top: 0;
    left: 0;
}
.mwg_effect001 .header > * {
    flex: 1;
}
.mwg_effect001 .header > *:nth-child(2) {
    text-align: center;
}
.mwg_effect001 .header > *:nth-child(3) {
    text-align: right;
}
.mwg_effect001 .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100vh;
    width: 100%;

    /* temp */
    font-size: 1vw;
}
.mwg_effect001 .cards {
    display: flex;
    width: max-content;
    white-space: nowrap;
    gap: 1vw;
    will-change: transform;
    padding: 0 120vw;
}
.mwg_effect001 .card {
    position: relative;
    width: 25vw;
    aspect-ratio: 0.75;
    border-radius: 2vw;
    overflow: hidden;
    object-fit: cover;
    text-align: center;
    text-transform: uppercase;
    border: 0.5vw solid currentColor;
}
.mwg_effect001 .card img { 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

.mwg_effect001 .card-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}
.mwg_effect001 .card-content p {
    display: flex;
    justify-content: space-between;
    padding: 0.5em 1em;
}
.mwg_effect001 .from {
    border: 0.2em solid currentColor;
    border-radius: 100%;
    padding: 0.28em 0.3em;
}
.mwg_effect001 .card-content h2 {
    font: 800 normal 4.5vw/0.8 'Inter', sans-serif;
    text-wrap: auto;
    padding: 0.2em 0 0.12em;
}

.mwg_effect001 .card:nth-child(1) {
    color: #BCEFFF;
}
.mwg_effect001 .card:nth-child(2) {
    color: #C9FE6E;
}
.mwg_effect001 .card:nth-child(3) {
    color: #FAFF9E;
}
.mwg_effect001 .card:nth-child(4) {
    color: #FC4C3B;
}
.mwg_effect001 .card:nth-child(5) {
    color: #F1F1F1;
}
.mwg_effect001 .card:nth-child(6) {
    color: #8CEDFF;
}
.mwg_effect001 .card:nth-child(7) {
    color: #FAFF9E;
}
/* @media (max-width: 900px) {
    .mwg_effect001 .header {
        flex-direction: column;
        padding: 15px;
    }
    .mwg_effect001 .cards {
        padding: 0 140vw;
    }
    .mwg_effect001 .card {
        border: 6px solid currentColor;
        border-radius: 23px;
    }
    .mwg_effect001 .card-content h2 {
        font-size: 54px;
    }
} */
 @media (max-width: 768px) {
    .mwg_effect001 .header {
    position: absolute;
    width: 100%;
    display: grid;
    gap: 10px;
    align-items: center;
    font: 500 normal clamp(12px, 0.9vw, 100px) / normal 'IBM Plex Mono';
    text-transform: uppercase;
    padding: 25px;
    top: 0;
    left: 0;
    font-size: 1rem;
}
    .mwg_effect001 .cards {
    display: flex;
    width: max-content;
    white-space: nowrap;
    gap: 1vw;
    will-change: transform;
    padding: 0 120vw;
}
.mwg_effect001 .card {
    position: relative;
    width: 85vw;
    height: 60vh;
    aspect-ratio: 0.75;
    border-radius: 2vw;
    overflow: hidden;
    object-fit: cover;
    text-align: center;
    text-transform: uppercase;
    border: 1.5vw solid currentColor;
}
.mwg_effect001 .card-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}
.mwg_effect001 .card-content p {
    display: flex;
    justify-content: space-between;
    padding: 0.5em 1em;
    font-size: 1rem;
}
.mwg_effect001 .from {
    border: 0.2em solid currentColor;
    border-radius: 100%;
    padding: 0.28em 0.3em;
    font-size: 1rem;
}
.mwg_effect001 .card-content h2 {
    font: 800 normal 8.5vw/0.8 'Inter', sans-serif;
    text-wrap: auto;
    padding: 0.2em 0 0.12em;
}
 }
    
 

/* ###############################################
RANDOMIZE & Focus */

.mwg_effect025 {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
     position: relative;
}
.mwg_effect025 .container {
    display: flex;
      /* padding: 0 25px; */
    /* height: 100vh; */
}
.mwg_effect025 .title {
    position: relative;
    top: -150px;
    /* bottom: 100%; */
    font: 500 normal 4vw/0.9 'Inter', sans-serif;
    letter-spacing: -0.03em;
}
.mwg_effect025 .card3 {
    width: 20vw;
    aspect-ratio: 0.8;
}
.mwg_effect025 .card3:not(:first-child) {
    margin: 0 0 0 -10vw;
}
.mwg_effect025 .card3 .content {
    width: 100%;
    height: 100%;
    border-radius: 0.6em;
    color: #000;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 25px;
}
.mwg_effect025 .card3 .content .top {
    font: 500 normal 1.9vw / 0.9 'Inter', sans-serif;
    letter-spacing: -0.03em;
}
.mwg_effect025 .card3 .content .bottom {
    display: flex;
    align-items: center;
    column-gap: 15px;
    font: 500 normal 1.1vw / 0.9 'Inter', sans-serif;
    letter-spacing: -0.03em;
    border-top: 1px dashed #000;
    padding: 25px 0 0;
}
.mwg_effect025 .card3 .content .bubble {
    width: 3.3vw;
    aspect-ratio: 1;
    border-radius: 100%;
    background-color: #FFF;
    display: grid;
    place-items: center;
}
.mwg_effect025 .card3 .content .bubble img {
    width: 60%;
    height: 40%;
    object-fit: contain;
}
.mwg_effect025 .card3 .content .job {
    font: 500 normal 0.9vw / normal 'IBM Plex Mono';
    text-transform: uppercase;
}
.mwg_effect025 .card3:nth-child(1) {
    z-index: 3;
}
.mwg_effect025 .card3:nth-child(1) .content {
    background-color: #F14A3A;
}
.mwg_effect025 .card3:nth-child(2) {
    z-index: 2;
}
.mwg_effect025 .card3:nth-child(2) .content {
    background-color: #FB7350;
}
.mwg_effect025 .card3:nth-child(3) {
    z-index: 7;
}
.mwg_effect025 .card3:nth-child(3) .content {
    background-color: #F79C42;
}
.mwg_effect025 .card3:nth-child(4) {
    z-index: 1;
}
.mwg_effect025 .card3:nth-child(4) .content {
    background-color: #FFDF40;
}
.mwg_effect025 .card3:nth-child(5) {
    z-index: 4;
}
.mwg_effect025 .card3:nth-child(5) .content {
    background-color: #DEDA8D;
}
.mwg_effect025 .card3:nth-child(6) {
    z-index: 5;
}
.mwg_effect025 .card3:nth-child(6) .content {
    background-color: #71CFA3;
}
.mwg_effect025 .card3:nth-child(7) {
    z-index: 8;
}
.mwg_effect025 .card3:nth-child(7) .content {
    background-color: #C4EF7A;
}
.mwg_effect025 .card3:nth-child(8) {
    z-index: 6;
}
.mwg_effect025 .card3:nth-child(8) .content {
    background-color: #BCEFFF;
}

@media (max-width: 768px) {
    .mwg_effect025 .card3 {
    width: 40vw;
    height: 50vh;
    aspect-ratio: 0.8;
}
.mwg_effect025 .card3 .content {
    width: 100%;
    height: 100%;
    border-radius: 0.6em;
    color: #000;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 25px;
}
.mwg_effect025 .title {
    position: relative;
   top: 0;
   margin-left:auto ;
   margin-right: auto;
    font: 500 normal 10vw/0.9 'Inter', sans-serif;
    letter-spacing: -0.03em;
}
.mwg_effect025 .card3 .content .top {
    font: 500 normal 5.9vw / 0.9 'Inter', sans-serif;
    letter-spacing: -0.03em;
}
.mwg_effect025 .card3 .content .bottom {
    display: flex;
    align-items: center;
    column-gap: 15px;
    font: 500 normal 4.1vw / 0.9 'Inter', sans-serif;
    letter-spacing: -0.03em;
    border-top: 1px dashed #000;
    padding: 25px 0 0;
}
.mwg_effect025 .card3 .content .bubble {
    width: 10.3vw;
    aspect-ratio: 1;
    border-radius: 100%;
    background-color: #FFF;
    display: grid;
    place-items: center;
}
.mwg_effect025 .card3 .content .bubble img {
    width: 60px;
    height: 60px;
    border-radius: 50px;
    object-fit: contain;
}
.mwg_effect025 .card3 .content .job {
    font: 500 normal 2.9vw / normal 'IBM Plex Mono';
    text-transform: uppercase;
}

}


.fluid__carousel{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center}.box__inner,.fluid__wrapper{display:flex;position:relative}.button-cont{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;margin-bottom:2rem;gap:4rem}.fluid__wrapper{  height: 70vh; max-height: 70vh; width: 90vw;border-left: dashed 2px var(--color-surface50);border-right: dashed 2px var(--color-surface50);position: relative; display: flex;align-items: center;overflow: hidden; gap: 1.5rem;}.fluid__box{font-size:30px;padding: 0.5rem; flex-shrink: 0; height: 60vh; width: 70%;min-width: 150px; border-radius: 15px;color: white;}.box__inner{align-items:baseline;justify-content:center;cursor:pointer;width:100%;height:100%; color: white; text-shadow: 1px 2px black;}.show-overflow{overflow:visible}.fluid__box:nth-child(1)::before {content: "l/5";}.fluid__box:nth-child(2)::before {content: "2/5";}.fluid__box:nth-child(3)::before {content: "3/5";}.fluid__box:nth-child(4)::before {content: "4/5";}.fluid__box:nth-child(5)::before {content: "5/5";}
@keyframes floating{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}@keyframes particles{0%{transform:translateZ(0,0);opacity:1}100%{transform:translate(190px,50px);opacity:0}}.button{position:relative;background:rgba(57,57,57,.7);display:inline-block;background-size:200% auto;border:1px solid;border-radius:10px;color:#fff;padding:10px 20px;font-size:25px;text-transform:uppercase;box-shadow:0 0 0 0 rgba(255,255,255,.7);animation:3s ease-in-out infinite floating;transition:color .3s,box-shadow .3s,transform .3s}.button::before{content:"";position:absolute;top:-5px;left:-5px;right:-5px;bottom:-5px;border-radius:10px;box-shadow:0 0 20px #ff7730;opacity:0;pointer-events:none;transition:opacity .3s;width:5px;height:5px;background:#ff7730;animation:2s infinite particles}.button::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.button:hover{color:#ffb900;box-shadow:0 0 0 10px rgba(255,255,255,.4);transform:scale(1.05);background-position:right center;background:linear-gradient(to right,#ffb900,#ff7730);-webkit-background-clip:text;-webkit-text-fill-color:transparent}


.wallpaper2 { margin: 0; background: url(./Image/1.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/11.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/15.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/18.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-left:  1%;
    padding-right:  1%;
  display: flex;
  justify-content:space-between;
  flex-direction: row;
  background-color: #2c2c2cea;
  color: rgb(242, 242, 242);
  z-index: 999;
}

/* .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;z-index: 1000;}


.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: "Kanit", serif;}
  h3 {font-family: "Marcellus", serif;}
  h4 {font-family: "Marcellus";}
  li, p  {font-family: "Marcellus";}
  ol, ul {font-family: "Marcellus"; }
  hr {color: white; background-color: aliceblue;}
  button {font-family: "Marcellus"; border:solid transparent;}
  input {font-family: "Kanit";}
  textarea {font-family: "Marcellus";} */

.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;z-index: 200;}
.centered-main {display: grid; justify-content: center; }

#map {height: 50vh;width: 90vw; border-radius: 5px;}

.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: grid; justify-content: center; align-items: center; }
  .secondPhase { height: 100vh;  display: flex; justify-content: center; position: relative; }
.thirdPhase {width: 100vw;height: 70vh; display: grid; ;z-index: 100}
.fourPhase {width: 100vw; height: 100vh;display: grid; justify-content: center; padding: 1rem;}
.galleryPhase {width: 100vw; height: 100vh;display: grid; justify-content: center;}
.contactPhase {padding: 3rem; width: 100vw; display: flex; justify-content: center;gap: 1rem; background-color: #000d4b;}
.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}
.card2{ width:fit-content;height:fit-content;background-color:transparents;display:flex;align-items:center;justify-content:center;padding:25px;gap:20px;box-shadow:0 0 20px rgba(0,0,0,.055)}.socialContainer{border-radius: 30px ;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{overflow:hidden;object-fit:contain;width:8rem;height:10rem;border:2px solid #60716e;border-radius:19px;display:flex;justify-content:center;align-items:center;margin:auto}.user-picture img{width:7.5rem;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%)}

.icon_svg {border-radius: 100px; width: 60px; height: 60px;border: solid black 2px; margin-left: auto;}
/* ####################### */
/* 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.2}
.gs_reveal{opacity:0;visibility:hidden;will-change:transform,opacity}.spacer{height:100vh}
/* #map { height: 60vh; } */


.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: 25vw; height: 40vh;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 */

.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 {width: 30vw; border-bottom: solid blueviolet 2px; font-size:medium; border-radius: 7px; padding: 7px;}
.designForm button {border: transparent; width: 30vw; font-size: 1.2rem; padding: 7px; border-radius: 7px; color: rgb(255, 255, 255); text-align: center; 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;  gap: 0rem;padding-left: 10px; padding-right: 10px;}

.content{max-width:100vw;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:1.5rem}.features__item{display:flex;flex-wrap:wrap;align-items:center;gap:0rem}.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.2}.gs_reveal{opacity:0;visibility:hidden;will-change:transform,opacity}.spacer{height:100vh}

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

.firstViewI {padding-top: 10%;}
.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);} */


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

.scroll2 h1 {line-height:4.5rem; } 
.scroll2  {bottom: 10%; } 



.features {display: grid;}

.homePhase {width: 100vw; height:65vh;  display: grid; justify-content: center; align-items: center;  }
.secondPhase {width: 100vw; height: fit-content; display: grid; justify-content: center;}
/* .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: grid; justify-content: space-around;gap: 20px; max-width: 100vw; overflow: hidden; }

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

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


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


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

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

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

.designForm{ display: grid; gap: 5px; }
.designForm input { width: 90vw; border-bottom: solid blueviolet 1px; font-size:medium; border-radius: 7px; padding: 7px;}
.designForm textarea {width: 90vw; border-bottom: solid blueviolet 2px; font-size:medium; border-radius: 7px; padding: 7px;}
.designForm button {width: 90vw; 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;} 

}

/* ⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️ */

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

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

}