@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
:root {
     /* landing-page  */
     --landing-page-color: white;
     --landing-page-circle-one: #6CB7D5;
     --landing-page-circle-two: #6CB7D5;
     --landing-page-logo-color: black;
     --landing-page-middle-logo-color: #6CB7D5;
     --landing-page-nav-link-color: black;
     --landing-page-active-link-background-color:#D68E78;
     --landing-page-active-link-text-color: rgb(255, 255, 255);
     --landing-page-text-highlight: #4355A3;
     --landing-page-paragraph-color: grey;
     --landing-page-paragraph-spacing: 7px;
     /* about page  */
     --about-page-color: #f5f5dd;
     --about-page-logo-box: #ffffff;
     --about-page-title-color: #D68E78;
     --about-page-text-color: black;
     --about-page-logo-color: rgb(0, 0, 0);
     --about-page-middle-logo-color: #6CB7D5;
     --about-page-nav-link-color: black;
     --about-page-active-link-background-color:#D68E78;
     --about-page-active-link-text-color: white;

     /* gallery page  */
     --gallery-page-color: #ffffff;
     --gallery-page-text-color: black;
     --gallery-page-logo-color: rgb(0, 0, 0);
     --gallery-page-middle-logo-color: #6CB7D5;
     --gallery-page-nav-link-color: rgb(0, 0, 0);
     --gallery-page-active-link-background-color:#D68E78;
     --gallery-page-active-link-text-color: white;
     --gallery-arrow-color: rgb(0, 0, 0);
     --gallery-readmore-button-color: #D68E78;
     --gallery-readmore-text-color: white;
     --gallery-readmore-hover-botton-color: #f3baa9;
     --gallery-readmore-hover-text-color: black;
     /* contact page  */
     --contact-page-color: #f5f5dd;
     --contact-page-text-color: #D68E78;
     --contact-page-box-background-color: #ffffff;
     --contact-page-box-top-background-color: #D68E78;
     --contact-page-smalltext-inside-box-color: black;
     --contact-page-largetext-inside-box-color: #3152FF;
     --contact-page-box-header-text-color: white;
     --contact-page-logo-color: black;
     --contact-page-middle-logo-color: #6CB7D5;
     --contact-page-nav-link-color: rgb(0, 0, 0);
     --contact-page-active-link-background-color:#DC8C6E;
     --contact-page-active-link-text-color: white;
     --logo-left-spacing: 10px;
     --logo-text-left-padding: 100px; /*text spacing from image*/
     --logo-text-left-padding-mobile: 65px; /*text spacing from image for mobile*/
     --logo-size: 1vw;
     --logo-size-minimum: 45px;
     --box-height: 74%; /* change height; less than 80 may cause overlap in high res display 1440p and highe*/
    --box-min-height: 440px; /* if lower than 500px text may overlap */
    --box-margin-left: 16vw; /*reduce to move box to left */

    /*mobile*/
    --page-title-font-size: clamp(40px,4vw,80px);
    --move-landingpage-buttons: -15px; /* reduce to move up */
  }

*{
    padding:0;
    margin:0;
    font-weight:300;
    font-family: 'Poppins';
}

html,body {
    padding:0;
    margin:0;
    font-family: 'Poppins';
    scroll-behavior: smooth;
  }


/* NAVBAR */

.logo{
    padding: 1.4%;
    text-align: center;

}

.logo a {
    font-size: calc(0.5rem + 1.2vw);
    font-family: 'Poppins', cursive;
    text-decoration: none;
    margin-left:3rem;

}


.navbar {
    transition: background-color 0.2s ease-in;
    z-index: 1000;
    position: fixed;
    top: 0;
    width:100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: rgb(255, 255, 255);
    height: 87px;

 }

 .nav-link {
    margin-right: 11%;
 }
 .nav-link ul {
    display: flex;

 }

 .nav-link li {
    display: inline;
    padding:18px 1.8rem;
    list-style: none;
    cursor: pointer;
 }

.black {
    color: #000000;
}



 .nav-link a {
    display: block;
    text-decoration: none;
    padding:12px;
    font-size: 1.3rem;
    font-family: "Poppins";

 }




 .link-active{
    background-color:#0483eb;
    height:100%;
    font-size: 1.5rem;
 }
 .white{
     color:white;
 }
 .social {
     margin-right: 1rem;
     padding: 0.6rem;
 }
 .social img {
    height:4rem;
    border-radius: 50%;
    background-color: white;
    width: 4rem;

 }

 .social img:hover{
    filter: drop-shadow(5px 5px 5px #0483eb);
    background-color:black;

 }

 .toggle-btn {
    position: absolute;
    right:1rem;
    display:none;
    flex-direction: column;
    width: 3%;
    min-width:40px;
    top:10%;


 }


 .toggle-btn .bar {
    height: 3px;
    width: 100%;
    margin-top: 10px;
    background-color: #000000;
    border-radius: 8px;
 }


 /* changeNavColor */

 .about-nav{
     transition: background 0.5s ease-in;
    background: var(--about-page-color);

 }

 .contact-nav {
    background-color: var(--contact-page-color);
 }
 .gallery-nav{
    background-color: var(--gallery-page-color);

 }

 .about-links{
     color: white;
 }

 .link-black{
     color:black;
 }


#container {
    /* scroll-snap-type: y proximity; */
    scroll-behavior: smooth;
    height:100vh;
    overflow-y: scroll;
    display: inherit;

}
section {
    overflow-y: hidden;
    height: max-content;
    min-height: 100vh;
    /* scroll-snap-align: start; */
    display:flex;
}

#intro {
    overflow-x: hidden;
    scroll-behavior: smooth;
    background-color: var(--landing-page-color);
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    position: relative;

}


.circle {
  display:flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 50rem;
  width: 50rem;
  background: linear-gradient( 90deg, var(--landing-page-circle-one) 50%, var(--landing-page-circle-two) 50%);
  border-radius: 50%;
  margin-top: 0;
}

.text{

    display: flex;
    margin-top: 20vh;
    width: 50vw;
    padding-top: 5%;
    padding-left: 3%;
    flex-direction: column;
    justify-content: start;
    z-index: 1;
  }
.text-highlight {
    font-weight:bold;
    color:var(--landing-page-text-highlight);
    text-decoration: underline;
}

.text h3 {
    font-size: clamp(30px,1.5vw,60px);
    font-family: "Poppins";
    color: #5C5C5C;
}

.text h4 {
    font-size: clamp(40px,4.5vw,75px);
    line-height: 4.5rem;
    font-family: "Poppins";
    color: black;
    margin-bottom:3%;
}

.text h4>span {
    font-size: clamp(40px,4.5vw,75px);
    line-height: 4.5rem;
    font-family: "Poppins";
    color: var(--landing-page-middle-logo-color);
}

.text p {
    font-size: clamp(10px,1.2vw,30px);
    color: var(--landing-page-paragraph-color);
    padding-bottom: var(--landing-page-paragraph-spacing);
}

.brand {
    color:black;
}

.brand-color {
    color:#ffffff;
}

.graphics {
    display:flex;
    flex-direction: row;
    justify-content: flex-end;
    margin-right:2rem;
   margin-top:5%;
   z-index:2;
   width: 50vw;
   transform: scale(1);
   transition: 0.3s ease-in;
}

.graphics img {
    display: relative;
    margin-left:5%;
    width: 100%;
    height: auto;
    margin-top: 8vh;
}


/* buttons */
.button-wrapper {
    padding-left:0;
    display: flex;
    flex-direction: row;
}

.contact-me {
    min-width: 90px;
    margin: 1rem 1rem 1rem 0;
    /* padding: 1rem;  */
    width: 15vw;
    height: 65px;
    font-size: 1.5rem;
    background-color: #6CB7D5;
    color: white;
    border-radius: 0.7rem;
    font-weight: bold;
    border:none;
    font-family: "Poppins";
    line-height: 61px;
    text-align: center;
    text-decoration: none;
}

.contact-me:hover{
    color: #4355A3;
}

.resume {
    min-width: 90px;
    margin: 1rem 1rem 1rem 0;
    text-align: center;
    font-size: 1.5rem;
    width: 10vw;
    height: 65px;
    border-radius: 0.7rem;
    background-color: white;
    border: #0483eb 0.1rem solid;
    color: black;
    line-height: 61px;
    text-align: center;
    text-decoration: none;

}

.resume:hover {
    background-color: #6CB7D5;
    color: white;

}






.intro-texture img{
    position: absolute;
    left:0;
    bottom:0;
    width:200px;
}


#skills {
    scroll-margin-top:75px;
    scroll-behavior: smooth;
    position: relative;
    display: flex;
    flex-direction: row;
    background-color: var(--about-page-color);
    justify-content: start;
}



#skills > h1 {
    flex:1;
    position: absolute;
    top: clamp(300px,40vh,1000px);
    transform-origin: 0 0;
    transform: translateX(-110px) rotate(-90deg);
    color: var(--about-page-title-color);
    font-size: clamp(40px,4vw,55px);
    padding: 1rem;
    margin-left:2rem;
    transition: 0.8s ease-in;

}

#skills .skills-logo {
    flex:1;
    justify-content: start;
    margin-top: 160px;
    margin-left: 10vw;
    height:max-content;
    display: flex;
    flex-direction: column;
    box-shadow: 1px 1px 2px #5d5d5d;
    background-color: var(--about-page-logo-box);
    margin-bottom: 0px;
    border-radius: 0.7rem;
    opacity: 0.3;
    transition: opacity 0.5s ease-in
}

.skills-logo .row-1, .row-2, .row-3, .row-4{
    display: flex;
    flex-direction: row;
    justify-content: center;

}

.row-1 img, .row-2 img, .row-3 img, .row-4 img{
    width: clamp(90px,8vw,140px);
    height: clamp(90px,8vw,140px);
    padding: 1rem;

}


.skills-description {
    position:relative;
    flex:1;
    margin-top:160px;
    display: flex;
    flex-direction: column;
    justify-content: start;
    padding: 0% 10%;
    color:var(--about-page-title-color);
    margin-bottom: 10%;

}

.skills-description h1 {
    text-align: left;
    font-family: "Poppins";
    font-size: clamp(20px,2.5vw,40px);
}

.skills-description p {
    padding-bottom: 12px;
    text-align: left;
    font-family: "poppins";
    font-size: clamp(10px,1.2vw,30px);
    color: var(--about-page-text-color);
}



#gallery {
    scroll-margin-top:75px;
    scroll-behavior: smooth;
    position:relative;
    background-color: var(--gallery-page-color);
    overflow-x: hidden;
}

#gallery  h1 {
    position: absolute;
    top: 30%;
    font-family: "Poppins";
    transform-origin: 0 0;
    transform: translateX(-110px) rotate(-90deg);
    color: var(--gallery-page-text-color);
    font-size:  clamp(40px,5vw,55px);
    padding: 1rem;
    margin-left:2rem;
    transition: 0.8s ease-in;

}

#gallery .read-me {
    min-width: 90px;
    margin: 1rem 1rem 1rem 0;
    width: max-content;
    height: 53px;
    background-color: var(--gallery-readmore-button-color);
    color: var(--gallery-readmore-text-color);
    border-radius: 0.7rem;
    font-weight: bold;
    border: none;
    font-family: "Poppins";
    text-align: center;
    text-decoration: none;
    padding: 7px 15px;
    line-height: 52px;
}

#gallery .read-me:hover {
    color: var(--gallery-readmore-hover-text-color);
    background-color: var(--gallery-readmore-hover-botton-color);
}


.custom-flex{
    flex-direction: column;
}

.custom-flex p {
    margin-bottom:1.5vh;
}


#gallery .slider{
    margin-top: 8vh;
}
.slide-text, .slide-title {
    color: var(--gallery-page-text-color);
    line-height: inherit;
}
.slide img {
    border: 3px solid rgb(194, 194, 194);
    box-shadow: 1px 1px 2px #5d5d5d;
    border-radius: 0.4rem;
}
.slide-more a {
    text-decoration: none;
    color: var(--gallery-page-text-color);
    font-size:clamp(20px,1.2vw,40px);
    font-weight: bold;
}
.arrow {
    border-top: 0.15vw solid var(--gallery-arrow-color);
    border-left: 0.15vw solid var(--gallery-arrow-color);
}
#contact {
    scroll-margin-top:75px;
    scroll-behavior: smooth;
    background-color: var(--contact-page-color);
    display: flex;
    flex-direction: row;
    transition: 0.8s ease-in;
    position:relative;
}

#contact > h1 {
    flex:1;
    position: absolute;
    top: clamp(300px,40vh,1000px);
    transform-origin: 0 0;
    transform: translateX(-110px) rotate(-90deg);
    color: var(--contact-page-text-color);
    font-size: clamp(40px,4vw,55px);
    padding: 1rem;
    margin-left: 2rem;
    transition: 0.8s ease-in;

}

.contact-img {
    width:45vw;
}

.contact-img img{
    width:100%;
    margin-top: 0vw;
    margin-left: 10vw;
}

.contact-details {
    width:25vw;
    height:30vw;
    margin-left:var(--box-margin-left);
    margin-top: 20vh;

}

.plus2 img{
    position:absolute;
    right:0px;
    bottom:0
}

.box {
    width:100%;
    height:var(--box-height);
    background-color: var(--contact-page-box-background-color);
    display: flex;
    flex-direction: column;
    position:relative;
    min-width: 495px;
    min-height: var(--box-min-height);
    border-radius: 0.7rem;
    box-shadow: 3px 3px 2px #5d5d5d;
    z-index:999;
    opacity: 0.3;
    transition: 0.5s ease-in;
}
.box-title {
    position: absolute;
    top:0;
    width:100%;
    height: 86px;
    background-color: var(--contact-page-box-top-background-color);
    border-top-left-radius: 0.7rem;
    border-top-right-radius: 0.7rem;

}
.box-title > h1 {
    padding:12px 20px;
    font-size: clamp(20px, 0.9vw, 30px);
    font-family: "Poppins";
    font-weight: 300;
    color:var(--contact-page-box-header-text-color);
}

.box-email {
    position: absolute;
    top:22%;
    width: 100%;
}
.box-email p {
    padding: 12px 5px 0px var(--logo-text-left-padding);
    font-size: clamp(15px, 0.8vw, 25px);
    color:var(--contact-page-smalltext-inside-box-color);
}
.box-email a {
    position: absolute;
    top:60%;
    text-decoration: none;
    padding: 12px 5px 0px var(--logo-text-left-padding);
    font-size: clamp(20px, 1vw, 30px);
    color: var(--contact-page-largetext-inside-box-color);
}
.box-email img {
    position: absolute;
    width: clamp(var(--logo-size-minimum), var(--logo-size), 80px);
    height: clamp(var(--logo-size-minimum), var(--logo-size), 80px);
    left:10px;
    top: 55%;
    padding-left:var(--logo-left-spacing);
}
.box-phone {
    position: absolute;
    top:41%;
    width: 100%;
}
.box-phone p {
    padding: 12px 5px 0px var(--logo-text-left-padding);
    font-size: clamp(15px, 0.8vw, 25px);
    color:var(--contact-page-smalltext-inside-box-color);

}
.box-phone a {
    position: absolute;
    top:60%;
    text-decoration: none;
    padding: 12px 5px 0px var(--logo-text-left-padding);
    font-size: clamp(20px, 1vw, 30px);
    color: var(--contact-page-largetext-inside-box-color);
}
.box-phone img {
    position: absolute;
    width: clamp(var(--logo-size-minimum), var(--logo-size), 80px);
    height: clamp(var(--logo-size-minimum), var(--logo-size), 80px);
    left:10px;
    top: 55%;
    padding-left:var(--logo-left-spacing);
}
.box-location {
    position: absolute;
    top:59%;
    width: 100%;
}
.box-location p {
    padding: 12px 5px 0px var(--logo-text-left-padding);
    font-size: clamp(15px, 0.8vw, 25px);
    color:var(--contact-page-smalltext-inside-box-color);
}
.box-location h1 {
    position: absolute;
    top:60%;
    text-decoration: none;
    padding: 12px 5px 0px var(--logo-text-left-padding);
    font-size: clamp(20px, 1vw, 30px);
    color: var(--contact-page-largetext-inside-box-color);
}
.box-location img {
    position: absolute;
    width: clamp(var(--logo-size-minimum), var(--logo-size), 80px);
    height: clamp(var(--logo-size-minimum), var(--logo-size), 80px);
    left:10px;
    top: 55%;
    padding-left:var(--logo-left-spacing);
}
.box-linkedin {
    position: absolute;
    top:77%;
    width: 100%;
}
.box-linkedin p {
    padding: 12px 5px 0px var(--logo-text-left-padding);
    font-size: clamp(15px, 0.8vw, 25px);
    color:var(--contact-page-smalltext-inside-box-color);
}
.box-linkedin a {
    position: absolute;
    top:60%;
    text-decoration: none;
    padding: 12px 5px 0px var(--logo-text-left-padding);
    font-size: clamp(20px, 1vw, 30px);
    color: #3152FF;
}
.box-linkedin img {
    position: absolute;
    width: clamp(var(--logo-size-minimum), var(--logo-size), 80px);
    height: clamp(var(--logo-size-minimum), var(--logo-size), 80px);
    left:10px;
    top: 55%;
    padding-left:var(--logo-left-spacing);
}










/* RESPONSIVE   */

/* Large device */
@media screen and (max-width: 3860px) and (min-width:2859px){
    .navbar{
        height: 115px;
    }
    .graphics {
        margin-right: 33rem;
        margin-top: 17%;
        transform: scale(1.2);

    }
    .text h3 {
        font-size: clamp(80px,1.5vw,60px);
    }
    .text h4 {
        font-size: clamp(100px,4.5vw,75px);
    }
    .text h4 > span {
            font-size: clamp(100px,4.5vw,75px);
    }
    .text p {
        font-size: clamp(30px,1.2vw,60px);
    }
    .skills-description p{
        padding-bottom: 12px;
        font-size: clamp(30px,1.2vw,60px);
    }
    .skills-description h1 {

        font-size: clamp(80px,2.5vw,40px);
    }
    .slide-title{
        font-size: clamp(80px,2.5vw,40px);
        line-height: inherit;
    }
    .slide-text{
        font-size: clamp(30px,1.2vw,60px);
    }
    .box {
        min-width: 540px;
        width:125%;
        height:90%;
    }
    .box-title{
        height: 160px;
    }
    .box-title > h1 {
        padding:40px 40px;
        font-size: clamp(30px, 1vw, 60px);
    }
    .box-email {
        top:23%;
        padding-left:8%;
        
    }
    .box-phone {
        top:43%;
        padding-left:8%;
    }
    .box-location {
        top:61%;
        padding-left:8%;
    }
    .box-linkedin {
        top:80%;
        padding-left:8%;
    }
    .box-email p {
        font-size: clamp(30px, 1vw, 35px);
        padding-bottom: 25px;
    }
    .box-phone p {
        font-size: clamp(30px, 1vw, 35px);
        padding-bottom: 25px;
    }
    .box-location p{
        font-size: clamp(30px, 1vw, 35px);
        padding-bottom: 25px;
    }
    .box-linkedin p {
        font-size: clamp(30px, 1vw, 35px);
        padding-bottom: 25px;
    }
    .box-email a {
        top:49%;
        font-size: clamp(30px, 1.2vw, 70px);
    }
    .box-phone a {
        top:49%;
        font-size: clamp(30px, 1.2vw, 70px);
    }
    .box-location h1 {
        top:49%;
        font-size: clamp(30px, 1.2vw, 70px);
    }
    .box-linkedin a {
        top:49%;
        font-size: clamp(30px, 1.2vw, 70px);
    }
    .nav-link a{
        font-size: 30px;
    }
    .resume {
        width: 15vw;
    }
    #skills .skills-logo{
        height: 50vh;
        min-height:max-content;
    }
    .row-1{
        margin-top: 5%;
    }
    .row-1 img, .row-2 img, .row-3 img, .row-4 img{
        padding: 3rem;
        width: clamp(90px,8vw,140px);
        height: clamp(90px,8vw,140px);
    }
    .social img {
        height: 6rem;
        width: 6rem;
    }

    .box-email img, .box-linkedin img, .box-location img, .box-phone img {
        width: clamp(35px, 2vw, 80px);
        height: clamp(35px, 2vw, 80px);
        padding-left:40px;
    }

    #gallery .read-me{
        height: 100px;
        line-height: 92px;
    }

}





@media screen and (max-width: 1920px) {
    .navbar {
        height:75px;
    }
    .nav-link{
        margin-right: 11%;
    }
    .nav-link a {
        font-size: calc(0.5rem + 0.5vw);
    }
    .nav-link li {
        display: inline;
        padding: 14px 1.4rem;
    }
    .text{
        margin-top:20vh;
    }
    .text h3 {
        font-size: 2rem;
        font-family: "Poppins";
        color: #5C5C5C;
    }

    .text h4 {
        font-size: 3.6rem;
        line-height: 4rem;
        font-family: "Poppins";
        color: black;
        margin-bottom:3%;
    }
    .text h4>span {
        font-size: 3.6rem;
        line-height: 4rem;
        font-family: "Poppins";

        margin-bottom:3%;
    }
    .text p {
        line-height: clamp(29px,1.1vw,35px);
        font-size: 1.5rem;

    }
    .contact-me {
        min-width: 90px;
        padding: 8px;
        width: 250px;
        height: 50px;
        font-size: 1.2rem;
        line-height: 46px;

    }


    .resume {
        min-width: 90px;
        padding: 8px;
        width: 250px;
        height: 50px;
        font-size: 1.2rem;
        line-height: 46px;


    }
    .graphics{
        margin-right:3.5rem;
        flex-direction: column;
        justify-content: start;
        margin-top:6%;
    }

    .circle {
        width:47rem;
        height:47rem;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        margin-right: auto;
        margin-left: auto;

    }

    .graphics .circle img {
        transform: scale(0.9);
        margin-left: 5%;
        width: 100%;
        height: auto;

    }

    .social img{
       width: 3rem;
       height:3rem;
    }


    .skills-description h1 {
        text-align: left;
        font-family: "Poppins";
        font-size: clamp(25px,2vw,30px);
    }

    .skills-description p {
        padding-bottom: 12px;
        text-align:left;
        font-family: "poppins";
        font-size: clamp(22px,1.0vw,35px);
    }

    .row-1 img, .row-2 img, .row-3 img, .row-4 img{
        width: clamp(50px,6vw,100px);
        height: clamp(50px,6vw,100px);
        padding: 1rem;

    }

    #skills > h1 {
        left:0;
        margin-left:2rem;
        font-size: clamp(20px,4vw,55px);
        top: clamp(300px,44vh,1000px);
    }

    #gallery > h1 {
        margin-top: clamp(20px,2vh,94px);
        left:0;
        margin-left:2rem;
        font-size:  clamp(20px,5vw,55px);
    }

    #contact > h1 {
        top: clamp(354px,51vh,1000px);
    }

    .email-icon::after {
        background-size: clamp(10px, 3vw, 41px);
    }
    .phone-icon::after {
        background-size: clamp(10px, 3vw, 41px);
    }
    .location-icon::after {
        background-size: clamp(10px, 3vw, 41px);
    }
    .linkedin-icon::after {
        background-size: clamp(10px, 3vw, 41px);
    }

}




@media  screen and (max-width: 1600px) {
     /* about me  */
     #skills {
        flex-direction: column;
    }


    #skills .skills-logo {
        margin-top: 160px;
        margin-left: 0;
        align-self: center;
        width:60%;
        box-shadow:  0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

    }
    .row-1 img, .row-2 img, .row-3 img, .row-4 img{
        width:clamp(70px,8vw,180px);
        height:clamp(70px,8vw,180px);
    }

    .skills-description{
        margin-top:50px;
    }
    .skills-description h1 {
        font-size: clamp(40px,2.5vw,40px);
    }
    .skills-description p {
        padding-bottom: 12px;
        font-size: clamp(20px,1.2vw,30px);
    }

    /* Works  */
    #gallery {
        flex-direction: column;
    }
    #gallery .slider {
        margin-top: 80px;
    }

    .slide {
        flex-direction: column;
        
    }
    .slide-content{
        width: 75vw;
        margin-top: 5%;
        margin-bottom: 5%;
    }
    .slide-image{
        width:75vw;
        height:auto;


    }
    .slide-image img{
        width:57vw;
        height:auto;
        border: 3px solid rgb(194, 194, 194);
        box-shadow:  0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

    }
    .slider-wrapper {
        margin-left: 12.5vw;

    }
    .slider-wrapper div {
        justify-content: space-between;
        align-self: center;
    }
    .slide-title {
        font-size: clamp(40px,2.5vw,40px);
    }
    .slide-text {
        font-size: clamp(20px,1.2vw,30px);
    }
    .arrows{
        width: 95%;
        margin-left:2.5vw;
        position:absolute;
        top: 25%;

    }
    .arrow{
        width:3vw;
        height: 3vw;

    }
    .box{
        right:40%;
    }
   

}



@media  screen and (min-width: 1600px) and (max-height:900px){

    #intro{
        height: max-content;
        min-height: 100vh;
    }
    section{
        height:auto;
    }

    .arrow {
        top:0;
        margin-top:-55%;
    }


}

@media  screen and (max-width: 1376px){
    /* nav  */
     .svg {
         display:none;
     }
     .intro-texture{
         display:none;
     }
    .brand {
        color: rgb(0, 0, 0);
    }

    .logo a {
        line-height:42px;
    }
    .navbar {
        flex-direction: column;
        background-color: white;
        align-items: flex-start;
    }

    .toggle-btn {
        display: flex;

      }
      .toggle-btn .bar {
        height: 2px;
        width: 86%;
    }

    .nav-link {
        background-color: #000000;
        display: none;
        width:100%;
        position: absolute;
        top: 70px;

    }

    .nav-link ul {
        width:100%;
        flex-direction: column;
    }

    .nav-link ul li {
        text-align: center;
    }

    .nav-link ul li a {
        padding: .5rem 1rem;
        color:white !important;
    }

    .nav-link.active {
        display: flex;
    }

    .social {
        display: none;
    }
    .graphics {
        margin-right:0;
        position: relative;
    }
    .circle{
        position: absolute;
        width:45rem;
        height: 45rem;
        bottom:30vh;
    }

    #contact{
        flex-direction: column;
        overflow-x: hidden;
    }

    .contact-img {
        height:30vh;
        position: absolute;
        top:0;
    }

    .contact-img img{
        margin-top: 40vh;
        height:auto;
        margin-left:10vw;
        transform: scale(3);
    }
    .contact-details {
        width: 45vw;
        height: 62vw;
        margin-top: 200px;
        margin-left: auto;
        margin-right:auto;
    }

    #contact > h1 {
        position: absolute;
        top: 65px;
        transform: translateX(0px) rotate(0deg);
        /* color: rgba(255, 255, 255, 0.2); */
        font-size: clamp(65px,4vw,80px);
        margin-left: 0;
        z-index: 20;
    }

    .box {
        width: 90%;
        height: 65%;
        min-width: 481px;
        min-height: 463px;
        right:0;
    }
    .box-email {
        top:26%;
    }
    .box-phone {
        top:44%;
    }
    .box-location {
        top:62%;
    }
    .box-linkedin {
        top:80%;
    }

    #skills > h1 {
        top: clamp(0px, -8vh, -148px);
        transform: translateX(0px) rotate(0deg);
        /* color: rgba(255, 255, 255, 0.2); */
        font-size: clamp(65px,4vw,80px);
        margin-left: 0;

    }
    #gallery > h1 {
        top: 0;
        margin-top:0;
        transform: translateX(0px) rotate(0deg);
        font-size: clamp(65px,4vw,80px);
        margin-left: 0;

    }

    .skills-description {
        margin-top:50px;
    }

}




/* Tablets */


@media  screen and (max-width: 1024px){
    /* nav  */
    .logo a {
        line-height: 47px;
        font-size: 20px;
    }
    .navbar {
        flex-direction: column;
        align-items: flex-start;

    }

    .toggle-btn {
        display: flex;

      }

    .nav-link {
        background-color: #000000;
        display: none;
        width:100%;


    }

    .nav-link ul {
        width:100%;
        flex-direction: column;
    }

    .nav-link ul li {
        text-align: center;
    }

    .nav-link ul li a {
        padding: .5rem 1rem;
        color:white;
    }

    .nav-link.active {
        display: flex;
    }

    .social {
        display: none;
    }
    
   
    /* intro  */
    #intro {
        height:100vh;
        flex-direction: column;
    }

    .text {
        z-index:999;
        margin-top:12%;
        margin-left:2.5%;
        padding-right: 5%;
        width:100%;
        height:30vh;
    }
    .text h3{
        font-size:clamp(25px,1vw,60px);
    }
    .text h4{
        font-size:clamp(40px,3vw,75px);
        margin-bottom: 0;
    }
    .text h4 > span{
        font-size:clamp(40px,3vw,75px);
        margin-bottom: 0;
    }
    .text p {
        font-size: clamp(20px,1.2vw,30px);
        padding-right:10%;
    }
    .button-wrapper a {
        width: 45%;
        margin-right: 10%;
    }

    .button-wrapper>a {
        margin-right: 14%;
    }


    .contact-me {
        width: 100%;

    }

    .resume {
        width: 100%;
    }

    .graphics {
        position: relative;
        align-self: center;
        width:100%;
        height:70vh;
        margin-top:0;
    }
    .circle {
        position:relative;
        top: 0%;
        left: 0%;
        margin-top:4vh;
        width: 30rem;
        height:30rem;
    }

    .intro-plus  {
        top:100%;
        margin-top: 65%;
        right:5%;
    }

    .intro-texture img{
        /* left:0;
        width:120px; */
        display:none;
    }

    /* about me  */
    #skills {
        flex-direction: column;
    }
    #skills > h1 {
        position: absolute;
        transform: translateX(0px) rotate(0deg);
        font-size: clamp(65px,4vw,80px);
        margin-left: 0;

    }

    #skills .skills-logo {
        margin-top: 160px;
        margin-left: 0%;
        width:80%;
        box-shadow: 1px 1px 2px #5d5d5d;


    }
    .row-1 img, .row-2 img, .row-3 img, .row-4 img{
        width: clamp(40px,8vw,180px);
        height: clamp(40px,8vw,180px);  
        padding: 1.2rem;
    }
    

    .skills-description{
        margin-top:50px;
    }
    .skills-description h1 {
        font-size: clamp(33px,2.5vw,40px);
    }
    .skills-description p {
        padding-bottom: 12px;
        font-size: clamp(20px,1.2vw,30px);
    }

    /* Works  */
    #gallery {
        flex-direction: column;
    }
    #gallery > h1 {
        position: absolute;
        transform: translateX(0px) rotate(0deg);
        font-size: clamp(65px,4vw,80px);
        margin-left: 0;

    }
    #gallery .slider {
        margin-top: 0vh;
    }

    .slide {
        flex-direction: column;
    }
    .slide-content{
        width: 75vw;
        margin-top: 5%;
        padding-left:0;
        padding-bottom: 15%;
    }
    .slide-image{
        width:75vw;
        height:auto;


    }
    .slide-image img{
        width:auto;
        height:45vw;
        border: 3px solid rgb(194, 194, 194);
        box-shadow: 1px 1px 2px #5d5d5d;

    }
    .slider-wrapper {
        margin-left: 12.5vw;
        margin-top: 160px;
    }
    .slide-title {
        font-size: clamp(25px,2.5vw,40px);
        padding-bottom: 36px;
        line-height: inherit;
    }
    .slide-text {
        font-size: clamp(20px,1.2vw,30px);
    }
    .arrows{
        width: 95%;
        margin-left:2.5vw;
        top: 24%;

    }
    .arrow{
        width:3vw;
        height: 3vw;

    }
    .plus2 img{
        right:0;
        transform:scale(1);
    }

    .box {
        min-height: 518px;
    }
    .box-email {
        top: 26%;
    }
    .box-phone {
        top: 43%;
    }
    .box-location {
        top: 62%;
    }
    .box-linkedin {
        top: 81%;
    }
    #contact {
        overflow-x: scroll;
    }
    .slider-wrapper div{
        justify-content:center;
        align-self: flex-start;
    }
    .slide-content {
        margin-left:40px;
    }

}

@media screen and (orientation:landscape) and (max-width:1150px){

    #intro {
        height: auto;
    }
    .navbar{
        height: 75px;
    }
    section{
        height: auto;
    }
    .arrows{
        width: 95%;
        margin-left:2.5vw;
        top:25%;

    }

}

@media screen and (max-height: 750px) and (max-width: 1024px){

    #intro{
        height:auto;
        min-height: 650px;
    }
    section {
        height:auto;
    }
    #skills {
        height: max-content;
        min-height: 100vh;
    }
    .row-1 img, .row-2 img, .row-3 img {
        width:clamp(48px,8vw,180px);
        height:clamp(48px,8vw,180px);
        padding:1rem;
    }



}


/* Mobile devices */

@media  screen and (max-width: 480px) {
    /* intro  */
    .navbar{
        background-color: white;
    }
    .nav-link a {
        font-size: calc(0.6rem + 0.5vw);
    }
    .nav-link ul li a {
        padding: .0rem 1rem;
      }
    .brand {
        color: rgb(0, 0, 0);
    }
    .toggle-btn .bar {
        height: 2px;
        width: 86%;
    }
    .toggle-btn {
        margin-top:1%;
    }
    .logo a {
        margin-left: 2rem;
        line-height: 4rem;
        font-size: calc(0.8rem + 1.5vw);
    }
    .toggle-btn .bar{
        height:2px;
    }
    #intro {
        height:100vh;
        flex-direction: column;
    }

    .text {
        z-index:999;
        margin-top:7vh;
        margin-left:0;
        padding-right: 10%;
        width:100%;
        height:30vh;
    }

    .text h3{
        font-size: clamp(19px,1vw,20px);
    }
    .text h4{
        font-size: clamp(25px,1vw,35px);
        font-weight: bold;
        line-height:2rem;
        padding-bottom: 7px;
    }
    .text h4 > span{
        font-size: clamp(25px,1vw,30px);
        font-weight: bolder;
        line-height:0;
    }
    .text p {
        line-height: inherit;
        padding-right:10%;
        font-size: clamp(12px,1vw,20px);
    }
    .button-wrapper {
        margin-top:var(--move-landingpage-buttons);
    }
    .button-wrapper a {
        width: 45%;
        margin-right: 10%;
        
    }

    .button-wrapper>a {
        margin-right: 10%;
    }


    .contact-me {
        width: 100%;
        border-radius:0.4rem;
    }

    .resume {
        width: 100%;
        border-radius:0.4rem;
    }

    .graphics {
        position: relative;
        align-self: center;
        width:100%;
        height:70vh;
    }
    .circle {
        position:relative;
        top: 12%;
        left: 0%;
        width: 20rem;
        height:20rem;
    }

    .graphics img{
        margin-top:0vh;
    }

    .intro-plus img {
        transform: scale(0.7);
        top:100%;
        margin-top: 95%;
        right:6%;

    }
    .button-wrapper a {
        width:42%;
        margin-right: 8%;
    }
    .contact-me {
        font-size: 0.8rem;
        height:35px;
        line-height:33px;

    }
    .resume {
        font-size: 0.8rem;
        height:35px;
        line-height: 33px;
    }

     /* about me  */
     #skills {
        flex-direction: column;
    }
    .svg {
        display:none;
    }
    #skills > h1 {
        transform: rotate(0deg);
        font-size: var(--page-title-font-size);
        translate: 0;
        margin-left: 0;

    }

    #skills .skills-logo {
        margin-top: 100px; 
        width:80%;
        box-shadow: 1px 1px 2px #5d5d5d;
        background-color: var(--about-page-logo-box);
        flex:0;
        margin-bottom: 50px;
    }
    .skills-logo .row-1, .row-2, .row-3, .row-4{
        margin-top: 6%;

    }
    .row-4 {
        margin-bottom: 3%;
    }
    .row-1 img, .row-2 img, .row-3 img, .row-4 img{
        width:clamp(40px,8vw,180px);
        height:clamp(40px,8vw,180px);
        padding:0.5rem;
    }
    
    .skills-description{
        margin-top:0;
    }
    .skills-description h1 {
        font-size: clamp(23px,1vw,35px);
    }
    .skills-description p {
        padding-bottom: 12px;
        font-size: clamp(12px,1vw,20px);
    }

     /* Works  */
     #gallery {
        flex-direction: column;
    }
    #gallery > h1 {
        transform: rotate(0deg);
        font-size: var(--page-title-font-size);
        translate: 0;
        margin-left: 0;


    }
    #gallery .read-me {
        height: 35px;
        line-height: 34px;
    }
    #gallery .slider {
        margin-top: 0vh;
    }

    .slide {
        flex-direction: column;

    }
    .slide-content{
        width: 75vw;
        margin-top: 10%;
        padding-left:0;
        margin-left:0px;
    }
    .slide-image{
        width:70vw;
        height:auto;


    }
    .slide-image img{
        width:74vw;
        height:auto;
        border: 3px solid rgb(194, 194, 194);
        box-shadow: 1px 1px 2px #5d5d5d;
        border-radius: 0.4rem;
    }
    .slider-wrapper {
        margin-left: 14.5vw;
        margin-top: 28vw;
        
    }
    .slider-wrapper div {
        justify-content: flex-start;
    }
    .slide-title {
        font-size: clamp(20px,1vw,35px);
        line-height: 1rem;
        line-height: inherit;
        padding-bottom: 10px;;
    }
    .slide-text {
        font-size: clamp(12px,1vw,20px);
    }
    .slide-more a{
        font-size: clamp(12px,1vw,20px);
    }
    .arrows{
        width: 95%;
        margin-left:2.5vw;
        top: 22%;

    }
    .arrow{
        width:3vw;
        height: 3vw;

    }
    /* contact  */
    .contact-img {
        display:none;
    }

    .contact-details {
        width: 82vw;
        height: 100vw;
        margin: 0;
        margin-top: 0px;
        padding: 0;
        margin-top: 95px;
        margin-left: auto;
        margin-right: auto;
    }

    .box {
        min-width: 300px;
        min-height: 380px;
        width: 100%;
        height: 100%;
        margin-top: 15px;
    }
    .box-title > h1 {
        padding: 20px 20px;
        font-size: clamp(15px, 1vw, 30px);
    }
    #contact {
        overflow-x: hidden;
        min-height: calc(100vh - 73px);
    }
    #contact > h1 {
        transform: rotate(0deg);
        /* color: rgba(255, 255, 255, 0.4); */
        font-size: var(--page-title-font-size);
        translate: 0;
        margin-left: 0;
        top:0;
    }
    .box-email {
        top:24%;
    }
    .box-phone {
        top:41%;
    }
    .box-location {
        top:59%;
    }
    .box-linkedin {
        top:78%;
    }
    .box-email p {
        font-size: clamp(12px, 0.8vw, 25px);
        padding: 12px 5px 0px var(--logo-text-left-padding-mobile);
        padding-bottom:10px;

    }
    .box-phone p {
        font-size: clamp(12px, 0.8vw, 25px);
        padding: 12px 5px 0px var(--logo-text-left-padding-mobile);
        padding-bottom:10px;
    }
    .box-location p{
        font-size: clamp(12px, 0.8vw, 25px);
        padding: 12px 5px 0px var(--logo-text-left-padding-mobile);
        padding-bottom:10px;
    }
    .box-linkedin p {
        font-size: clamp(12px, 0.8vw, 25px);
        padding: 12px 5px 0px var(--logo-text-left-padding-mobile);
        padding-bottom:10px;
    }
    .box-email a {
        top:49%;
        font-size: clamp(13px, 1.2vw, 70px);
        padding: 12px 5px 0px var(--logo-text-left-padding-mobile);
    }
    .box-phone a {
        top:49%;
        font-size: clamp(13px, 1.2vw, 70px);
        padding: 12px 5px 0px var(--logo-text-left-padding-mobile);
    }
    .box-location h1 {
        top:49%;
        font-size: clamp(13px, 1.2vw, 70px);
        padding: 12px 5px 0px var(--logo-text-left-padding-mobile);
    }
    .box-linkedin a {
        top:49%;
        font-size: clamp(13px, 1.2vw, 70px);
        padding: 12px 5px 0px var(--logo-text-left-padding-mobile);
    }

    .box-email img {
        width: clamp(24px, 2vw, 80px);
        height: clamp(24px, 2vw, 80px);
        top: 39%;
        padding-right: 23px;
    }
    .box-phone img {
        width: clamp(24px, 2vw, 80px);
        height: clamp(24px, 2vw, 80px);
        top: 39%;
        padding-right: 23px;
    }
    .box-location img {
        width: clamp(24px, 2vw, 80px);
        height: clamp(24px, 2vw, 80px);
        top: 39%;
        padding-right: 23px;
    }
    .box-linkedin img {
        width: clamp(24px, 2vw, 80px);
        height: clamp(24px, 2vw, 80px);
        top: 47%;
        padding-right: 23px;
    }
}

@media screen and (orientation:landscape) and (max-width:900px){
    .navbar {
        height: 75px;
    }
    .graphics {
        display: none;
    }
    #skills .skills-logo {
        margin-top: 95px;
    }
    #gallery .slider {
        margin-top: 0px;
    }
    #gallery > h1 {
        top: 0vh;
    }
    #contact > h1 {
        top: 0vh;
    }
    .box {
        width: 82%;
    }
    .contact-details{
        margin-bottom: 45%;
        margin-top: -10px;
        width:65vw;
      
    }
    .contact-img {
        display: none;
    }
    .box {
        top: 130px;
    }
    
    .nav-link ul li a {
        padding: 0.0rem 1rem;
      }
      #skills > h1, #gallery > h1, #contact > h1 {
        font-size: var(--page-title-font-size);
    }

}
@media screen and (orientation:landscape) and (max-width:740px){
    #intro {
        height: auto;

    }
    .navbar{
        height: 75px;
    }
    .nav-link ul li a {
        padding: 0.0rem 1rem;
      }
    section{
        height: auto;
    }
    .graphics {
        display: none;
    }
    .text{
        height:auto;
    }
    .intro-plus img {
        margin-top: 20vh;
        right:0;
    }
}

@media screen and (max-width: 280px){
    #skills > h1 {
        top: clamp(38px, 3vh, 70px);
        transform: rotate(0deg);
        font-size: clamp(38px,4vw,80px);
        margin-left: 0;

    }
    .row-1 img, .row-2 img, .row-3 img {
        width: clamp(38px,8vw,180px);
        height: clamp(38px,8vw,180px);
        padding: 0.3rem;
    }
    .arrow {
        width: 3vw;
        height: 3vw;
        margin-top: -198%;
        top: 0;
    }
    .box {
        width: 100%;
        height: 141%;
    }

}
@media screen and (max-height: 800px) and (min-width: 1024px){
    .text{
        margin-top:10vh;
    }
    .text p {
        line-height: clamp(23px,1.1vw,35px);
        font-size: 1.2rem;
    }
    .circle{
        bottom:10vh;
        width:38rem;
        height:38rem;
    }

}
@media (hover: none) and (max-width:1024px){
    #container{
        scroll-snap-type: y proximity;
    }
    section  {
        scroll-snap-align: start;
    }
}

/* TRANSITION AND ANIMATION CLASSES */
.graphics-transition {
    transform: scale(0.93);
}

#skills h1.translate{
    transform: translateX(0px) rotate(-90deg);
}

#gallery h1.translate{
    transform: translateX(0px) rotate(-90deg);
}

 .h1.translate {
    transform: translateX(0px) rotate(-90deg);
}

.text.translate {
    transform: translateX(0px);
    opacity: 1;
}

#contact h1.translate {
    transform: translateX(0px) rotate(-90deg);
}

#skills .skills-logo.opacity {
    opacity: 1;
}

.box.opacity {
    opacity: 1;
}