@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css");

:root {
    --main: #F63D00;
    --main-light: #ECE3CF;
    --main-dark: #284059;
    --bg-dark: #141417;
    --main-light-05: rgba(236, 227, 207, 0.05);
    --main-light-1: rgba(236, 227, 207, 0.1);
    --main-light-3: rgba(236, 227, 207, 0.3);
    --main-light-5: rgba(236, 227, 207, 0.5);
}

@property --main-color { 
    syntax: "<color>";
    inheriths: false;
    initialvalue: #F63D00;
}

/*GENERAL STYLES*/


.body{
    font-size: 40px;
}

/*custom boxec*/

.circle-92{
    width: 92px;
    height: 92px;
    border-radius: 92px;
}

.circle-100{
    width: 100px;
    height: 100px;
    border-radius: 100px;
}

/*** HERO ***/


#hero {
    height: 100vh; 
    width: 100vw;
    background-color: var(--main-light);
    position: fixed;
    top: 0;
    z-index: -1;
}

#hero2 {
    height: 100vh; 
    width: 100vw;
    background-color: var(--main-light);
    position: fixed;
    top: 0;
    z-index: -1;
}

#hero2 div{
    position: absolute;
    top: 0px;
    height: 100vh; 
    width: 100vw;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 1;
    opacity: 0.999999;

}
/*
.hero-layer1{
    background-image: url(../img/layer1.svg);
    z-index: 1;
}

.hero-layer2{
    background-image: url(../img/layer2.svg);
    z-index: 2;
}

.hero-layer3{
    background-image: url(../img/layer3.svg);
    z-index: 3;
}

.hero-layer4{
    background-image: url(../img/layer4.svg);
    z-index: 4;
}

.hero-layer5{
    background-image: url(../img/layer5.svg);
    z-index: 5;
}

.hero-layer6{
    background-image: url(../img/layer6.svg);
    z-index: 7;
}

.hero-layer7{
    background-image: url(../img/layer7.svg);
    z-index: 6;
}
*/

.logo-container{
    position: fixed;
    width: 70px;
    display: flex;
    justify-content: center;
    padding-top: 64px;
    padding-bottom: 32px;
    background-color: var(--main);
    border-radius: 0 0 60px 60px;
    box-shadow: 10px 10px 20px rgba(0, 0, 0, .2);
    z-index: 1;
    left: 100px;
    top: 0;
}

.social{
    position: fixed;
    width: 70px;
    color: var(--main-light);
    mix-blend-mode: difference;
    left: 100px;
    bottom: 332px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    z-index: 1;
}

.social i{
    font-size: 32px;
    margin-bottom: 32px;
}

.email-box{
    position: fixed;
    z-index: 1;
    writing-mode: vertical-lr;
    background-color: var(--main-light-05);
    padding: 32px 16px;
    text-align: center;
    border-radius: 24px;
    backdrop-filter: blur(24px);
    mix-blend-mode: difference;
    bottom: 80px;
    left: 105px;
}

.divider-line{
    width: 2px;
    height: 100px;
    background-color: var(--main-light-5);
    margin-bottom: 32px;
}

.main-menu{
    position: fixed;
    right: 100px;
    top: 40px;
    mix-blend-mode: difference;
    z-index: 2;
}

.main-menu ul{
    color: var(--main-light);
    font-size: 20px;
    font-weight: 700;
    position: relative;

}

.main-menu li{
    list-style: none;
    text-transform:uppercase ;
    display: block;
    text-align: right;
    line-height: 20px;
    opacity: 0.5;
    transition: all;
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out;
    margin: 0;
}

.main-menu li a{
    display: block;
    padding-bottom: 16px;
}

.main-menu li:hover{
    opacity: 1;
}

li.item-1:hover ~ .menu-bg-square{
    width: 10px;
    height: 10px;
    transform: translate(5px, -36px);
}

li.item-2:hover ~ .menu-bg-square{
    width: 10px;
    height: 10px;
    transform: translate(5px, 0px);
}

li.item-3:hover ~ .menu-bg-square{
    width: 10px;
    height: 10px;
    transform: translate(5px, 36px);
}

.menu-bg-square, .menu-square-active{
    position: absolute;
    top: 40px;
    right: -16px;
    width: 0px;
    height: 0px;
    border-radius: 24px;
    background-color: var(--main-light); 
    transition: all;
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out;
    mix-blend-mode: difference;
    transform-origin: 10px 10px;
    transform: translate(0px, 5px);
    z-index: 1;
}

@media screen and (max-width:1499px){
    .logo-container{
        left: 12px;
        top: 0;
    }

    .social{
        left: 12px;
    }

    .email-box{
        left: 20px;
    }
}

@media screen and (max-width:991px){

    .logo-container{
        position: fixed;
        width: 70px;
        display: flex;
        justify-content: center;
        padding-top: 32px;
        padding-bottom: 28px;
        background-color: var(--main);
        border-radius: 0 0 60px 60px;
        box-shadow: 10px 10px 20px rgba(0, 0, 0, .2);
        z-index: 1;
        left: 12px;
        top: 0; 
    }

    .logo-container img{
        width: 20px;
        height: auto;
    }

}


/*** ABOUT ***/

#about{
    margin-top: 100vh;
}

/*** PORTFOLIO ***/

#mushrooms-viwer {
    height: 100vh; 
    width: 100vw;   
    position: fixed;
}

.slider-3D{ 
    height: 120vh;
    display: flex;
    align-content: center;
}

.slider-3D .slide-item{
    height: 120vh;
    width: 100vw;
    display: flex;
    flex-direction: column; 
    justify-content: center;
    align-items: center;
}

.slider-3D .slide-item.item-weedoo{
    background: url("../img/weedooPortfolioMobile.png");
	background-size: contain;
	background-repeat: no-repeat;
    background-position: center center;
}

.slider-3D .slide-item.item-leaddme{
    background-image: url("../img/leaddmePortfolio@x2.png");
	background-size: contain;
	background-repeat: no-repeat;
    background-position: center center;
}

.slider-3D .slide-item.item-google{
    background-image: url("../img/dashboard-google.png");
	background-size: contain;
	background-repeat: no-repeat;
    background-position: center center;
}

.slider-3D .item-data{
    width: 100%;
    max-width: 800px;
    display: flex;
    justify-content: space-between;
    align-items: end;
    mix-blend-mode: difference;
}

.data-left h3{
    writing-mode: vertical-lr;
    text-orientation: mixed;
    transform: rotate(180deg);
    font-size: 72px;
    font-weight: 800;
    margin-left: auto;
    margin-right: auto;
    
}

.data-left, .data-right{
    width: auto;
}

/*** USER INTERFACE CONCEPT DESIGN ***/

.concept-design{
    background-image: url(../img/imgWeedoo/bgWeeDoo.svg);
    background-size: cover;
}

/*CONTACT*/

a.copy-text{
    transition: all .8;
    width: auto;
    text-transform: uppercase;
}

a.copy-text:hover{
   --main-color: initial;
}

.bubble{
    height: 100px;
    width: 100px;
    background-color: var(--main);
    position: absolute;
    transform-origin: center;
    top: 0px;
}

/*UTILITIES*/

/*opacity*/

.op-4{
    opacity: 0.04;
}

.op-8{
    opacity: 0.08;
}

.op-10{
    opacity: 0.1;
}

.op-12{
    opacity: 0.12;
}

.op-16{
    opacity: 0.16;
}

.op-20{
    opacity: 0.3;
}

.op-24{
    opacity: 0.24;
}

.op-30{
    opacity: 0.3;
}

.op-32{
    opacity: 0.32;
}

.op-40{
    opacity: 0.4;
}

.op-48{
    opacity: 0.48;
}

.op-50{
    opacity: 0.5;
}

.op-60{
    opacity: 0.6;
}

.op-64{
    opacity: 0.64;
}

.op-70{
    opacity: 0.7;
}

.op-80{
    opacity: 0.8;
}

.op-90{
    opacity: 0.9;
}

.op-100{
    opacity: 1;
}

/*filters*/

.filter-bn{
    filter: grayscale(100%);
}

/*borders*/

.border-light-b-1{
    border-bottom: solid 2px;
    border-color: var(--main-light-10);
}

.border-light-x-1{
    border-left: solid 1px;
    border-right: solid 1px;
    border-color: var(--main-light);
}

.border-b-dark{
    border-bottom: solid 0.5px;
    border-color: var(--main-dark);
}

.border2-s-weedo{
    border-left: solid 2px;
    border-color: var(--main-weedoo);
}

.middle-line{
    display: block;
    height: 1px;
    width: 100%;
}

/*spacing*/

/*400*/

.spacing-b-minus-400{
    margin-bottom: -400px;
}

.spacing-t-400{
    padding-top: 400px;
}

.spacing-b-400{
    padding-bottom: 400px;
}

.spacing-y-400{
    padding-top: 400px;
    padding-bottom: 400px;
}

/*300*/

.spacing-t-300{
    padding-top: 300px;
}

.spacing-b-300{
    padding-bottom: 300px;
}

.spacing-y-300{
    padding-top: 300px;
    padding-bottom: 300px;
}

/*200*/

.spacing-t-200{
    padding-top: 200px;
}

.spacing-b-200{
    padding-bottom: 200px;
}

.spacing-y-200{
    padding-top: 200px;
    padding-bottom: 200px;
}

/*150*/

.spacing-t-150{
    padding-top: 150px;
}

.spacing-b-150{
    padding-bottom: 150px;
}

.spacing-y-150{
    padding-top: 150px;
    padding-bottom: 150px;
}

/*120*/

.spacing-t-120{
    padding-top: 120px;
}

.spacing-b-120{
    padding-bottom: 120px;
}

.spacing-y-120{
    padding-top: 120px;
    padding-bottom: 120px;
}

/*100*/

.spacing-t-100{
    padding-top: 100px;
}

.spacing-b-100{
    padding-bottom: 100px;
}

.spacing-y-100{
    padding-top: 100px;
    padding-bottom: 100px;
}

/*64*/

.spacing-l-64{
    padding-left: 64px;
}

.spacing-t-64{
    padding-top: 64px;
}

.spacing-b-64{
    padding-bottom: 64px;
}

/*56*/

.spacing-l-56{
    padding-left: 56px;
}

.spacing-b-56{
    padding-bottom: 56px;
}

/*48*/

.spacing-l-48{
    padding-left: 48px;
}

.spacing-t-48{
    padding-top: 48px;
}

.spacing-b-48{
    padding-bottom: 48px;
}

.spacing-y-48{
    padding-top: 48px;
    padding-bottom: 48px;
}

/*32*/

.spacing-l-32{
    padding-left: 32px;
}

.spacing-t-32{
    padding-top: 32px;
}

.spacing-b-32{
    padding-bottom: 32px;
}

.spacing-y-32{
    padding-top: 32px;
    padding-bottom: 32px;
}

/*24*/

.spacing-t-24{
    padding-top: 24px;
}

.spacing-b-24{
    padding-bottom: 24px;
}

/*6*/

.spacing-b-6{
    padding-bottom: 6px;
}

/*-200*/

.spacing-lg-t-m200{
    margin-top: -200px;
}

@media screen and (max-width: 744px){

    /*400*/

    .spacing-md-t-400{
        padding-top: 400px;
    }

    .spacing-md-b-400{
        padding-bottom: 400px;
    }

    .spacing-md-y-400{
        padding-top: 400px;
        padding-bottom: 400px;
    }

    /*300*/

    .spacing-md-t-300{
        padding-top: 300px;
    }

    .spacing-md-b-300{
        padding-bottom: 300px;
    }

    .spacing-md-y-300{
        padding-top: 300px;
        padding-bottom: 300px;
    }

    /*200*/

    .spacing-md-t-200{
        padding-top: 200px;
    }

    .spacing-md-b-200{
        padding-bottom: 200px;
    }

    .spacing-md-y-200{
        padding-top: 200px;
        padding-bottom: 200px;
    }

    /*150*/

    .spacing-md-t-150{
        padding-top: 150px;
    }

    .spacing-md-b-150{
        padding-bottom: 150px;
    }

    .spacing-md-y-150{
        padding-top: 150px;
        padding-bottom: 150px;
    }

    /*120*/

    .spacing-md-t-120{
        padding-top: 120px;
    }

    .spacing-md-b-120{
        padding-bottom: 120px;
    }

    .spacing-md-y-120{
        padding-top: 120px;
        padding-bottom: 120px;
    }

    /*100*/

    .spacing-t-100{
        padding-top: 100px;
    }

    .spacing-md-b-100{
        padding-bottom: 100px;
    }

    .spacing-md-y-100{
        padding-top: 100px;
        padding-bottom: 100px;
    }


    /*80*/

    .spacing-t-80{
        padding-top: 80px;
    }

    .spacing-md-b-80{
        padding-bottom: 80px;
    }

    .spacing-md-y-80{
        padding-top: 80px;
        padding-bottom: 80px;
    }

    /*24*/

    .spacing-md-x-32{
        padding-left: 32px;
        padding-right: 32px;
    }

    /*-100*/
    
    .spacing-md-t-m100{
        margin-top: -100px;
    }
}


.space-indicator{
    height: 8px;
    border-left: 2px solid;
    border-right: 2px solid;
    border-color: var(--main-dark);
    margin-top: 12px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
}

.middle-bar{
    width: 100%;
    height: 2px;
    background-color: var(--main-dark);
}

.space-bar{
    height: 240px;
    background-color: var(--secondary-weedoo);
    opacity: 0.2;

}

.w-8{
    width: 8px;
}

.w-12{
    width: 12px;
}

.w-16{
    width: 16px;
}

.w-24{
    width: 24px;
}

.w-32{
    width: 32px;
}

.w-40{
    width: 40px;
}

.w-48{
    width: 48px;
}

.w-56{
    width: 56px;
}

.w-64{
    width: 64px;
}

.w-72{
    width: 72px;
}

.w-80{
    width: 80px;
}

/*LAYERING*/

.z-1{
    z-index: 1;
}

.z-2{
    z-index: 2;
}

/*BACKGROUNDS*/

.bg-main-light{
    background-color: var(--main-light);
}

.bg-main-dark{
    background-color: var(--bg-dark);
}

.bg-main{
    background-color: var(--main);
}

/*TEXT*/

h1, h2, h3, h4, h5, h6, p, span{
    color: var(--main-light);
    font-family: "Inter", sans-serif;
    text-transform: uppercase;
    font-weight: 700;
    margin: 0;
}

.text-normalcase{
    text-transform: unset;
}

a{
    text-decoration: none;
    color: var(--main-light);
    cursor: pointer;
}

.text-0{
    font-size: 0.00001px !important;
    line-height: 0.00001px !important;
}



/*SMALL SIZE TEXT*/

.text-16{
font-size: 16px;
line-height: auto;
}

.text-18{
    font-size: 18px;
    line-height: auto;
}

.text-20{
    font-size: 20px;
    line-height: 24px;
}

.text-24{
    font-size: 24px;
    line-height: 28px;
}

.text-32{
    font-size: 32px;
    line-height: 32px;
}

.text-40{
    font-size: 40px;
    line-height: 40px;
}

.text-48{
    font-size: 48px;
    line-height: 48px;
}

.text-56{
    font-size: 56px;
    line-height: 56px;
}

.text-64{
    font-size: 64px;
    line-height: 64px;
}

.text-80{
    font-size: 80px;
    line-height: 80px;
}

.text-100{
    font-size: 100px;
    line-height: 100px;
}


/*LARGE TEXT*/

@media screen and (min-width : 992px){
    .text-lg-18{
        font-size: 18px;
        line-height: auto;
    }
    
    .text-lg-20{
        font-size: 20px;
        line-height: 24px;
    }
    
    .text-lg-32{
        font-size: 32px;
        line-height: 32px;
    }
    
    .text-lg-48{
        font-size: 48px;
        line-height: 48px;
    }
    
    .text-lg-64{
        font-size: 64px;
        line-height: 64px;
    }
    
    .text-lg-80{
        font-size: 80px;
        line-height: 80px;
    }
    
    .text-lg-100{
        font-size: 100px;
        line-height: 90px;
    }    
}


/*MEDIUM SIZE TEXT*/

@media (max-width : 991px) and (min-width: 774px){

    .text-md-16{
        font-size: 16px;
        line-height: auto;
    }

    .text-md-18{
        font-size: 18px;
        line-height: auto;
    }
    
    .text-md-20{
        font-size: 20px;
        line-height: 24px;
    }
    
    .text-md-24{
        font-size: 24px;
        line-height: 28px;
    }
    
    .text-md-32{
        font-size: 32px;
        line-height: 32px;
    }
    
    .text-md-40{
        font-size: 40px;
        line-height: 40px;
    }
    
    .text-md-48{
        font-size: 48px;
        line-height: 48px;
    }
    
    .text-md-56{
        font-size: 56px;
        line-height: 56px;
    }
    
    .text-md-64{
        font-size: 64px;
        line-height: 64px;
    }
    
    .text-md-80{
        font-size: 80px;
        line-height: 80px;
    }
    
    .text-md-100{
        font-size: 100px;
        line-height: 100px;
    }
}


.text-main{
    color: var(--main);
}

.text-weedoo{
    color: var(--main-weedoo);
}

.text-dark{
    color: var(--main-dark)
}

.text-light{
    color: var(--main-light);
}

.text-light-3{
    color: var(--main-light-3);
}

.text-light-5{
    color: var(--main-light-5);
}


/*styles*/

.text-regular{
    font-weight: 400 !important;
}

.text-bold{
    font-weight: 700;
}

.text-lower-case{
    text-transform: lowercase;
}

.text-none-case{
    text-transform: none;
}

.vertical-text{
    text-orientation: mixed;
}



/*BUTTONS*/

.btn{
    height: 84px;
    padding-left: 40px;
    padding-right: 40px;
    border-radius: 42px;
    vertical-align: middle;
    font-size: 20px;
    line-height: 20px;
    margin: 0;
    text-transform: uppercase;
    font-weight: 600;
    transition: all .3s;
    box-shadow: 10px 10px 24px rgba(0, 0, 0, 0.3);
}

.btn:hover{
    background-color: var(--main-light);
    transform: scale(1.1);
}

.btn.bg-main-dark:hover{
    background-color: var(--bg-dark);
    color: var(--main-light);
}

.btn:active, .btn:focus{
    background-color: var(--main-light) !important;
    color: var(--main-dark) !important;
    border: none !important;
}

.btn span{
    font-size: 18px;
    color: var(--main-dark);
    margin-top: 2px;
    padding-left: 100px;
}

.main-btn-light{
    background-color: var(--main-light);
    color: var(--main-dark);
}

@media screen and (max-width:773px){
    .btn{
        font-size: 16px;
        height: 72px;
    } 
}

html.lenis{height:auto}.lenis.lenis-smooth{scroll-behavior:auto}.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}.lenis.lenis-stopped{overflow:hidden}.lenis.lenis-scrolling iframe{pointer-events:none}


/* Only necessary with horizontal scrolling */

html[data-scroll-orientation="horizontal"] body {
        width: fit-content;
    }
    [data-scroll-container] {
        display: flex;
    }