@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

/* APPLIED TO WHOLE WEB */
* {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    font-size: small;
    scroll-behavior: smooth;
}

body {
    background: white;
    color: black;
    transition: 0.5s ease-in-out;
}

.mobile-nav {
    color: white;
    font-size: medium;
    position: fixed;
    left: 20px;
    top: 2vh;
    z-index: 10;
    display: none;
}

/* HEADER BAR */
.header {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 2vh;
    background: black;
    color: white;
    position: fixed;
    width: 100%;
    z-index: 100;

}

/* #cursor{
    color: white;
    animation:cursor 0.5s linear infinite;

}
@keyframes cursor {
    0%{opacity: 0;}
    50%{opacity: 1;}
    100%{opacity: 0;}
    
} */
#text {
    font-size: 32px;
}

/* MOBILE NAV */
.mobile-nav:hover {
    cursor: pointer;
}

/* MAINHEADER */

#bar {
    display: block;
}

#cross {
    display: none;

}

.header a {
    text-decoration: none;
    padding: 10px;
    color: white;

}

/* center txt */
.center-txt {
    font-size: small;
}

.center-txt span {
    color: pink;
}


/* HOVER COLOR */
.header a:hover {
    color: pink;
    transition: 0.3s ease-in-out;
}


/* SLIDER */
.slider {
    height: 0.5vh;
    background-color: pink;
    width: 0%;
    transition: 2s ease-in-out;

}

/* HOOME */
#homee {
    height: 75vh;
    position: relative;
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
        url("/img/main.jpeg");
    /* background: url("/img/background.png"); */
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
}

.sidebarss a {
    color: white;
    display: block;
    transition: 0.3s ease-in-out;
    padding: 10px;
}

.sidebarss a:hover {
    color: pink;
}

.sidebarss {
    padding-left: 1vh;
    padding-top: 10vh;
    width: 40%;
    display: none;
    background: black;
    position: fixed;
    z-index: 100;
    left: -55%;
    height: 100vh;
    transition: 0.5s ease-in-out;
}

#homee .sidebar {
    position: absolute;
    right: 20px;
    top: 10%;
}
.sidebar a{
    color: white;
}

#homee .sidebar i {
    padding: 10px;
}

#homee .sidebar i:hover {
    color: pink;
    transition: 0.5s ease-in-out;
    /* font-size: medium; */
    cursor: pointer;
}

.loading {
    height: 100vh;
    width: 100%;
    position: fixed;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: black;
}

.loading .logs {
    aspect-ratio: 1;
    height: 5vh;
    background: url("/img/bw.png");
    background-size: cover;
    background-repeat: no-repeat;
    border: 2px solid white;
    border-radius: 100%;
    animation: mode 1.5s linear infinite;
}

/* SERVICES */
.title {
    font-size: medium;
    padding: 5vh;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-decoration-color: pink;
    text-underline-offset: 5px;
}

.services {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding: 0vh 5vh 0 5vh;
    grid-gap: 2vh;
}

.item{
    transition: 0.4s ease-in-out;
}

.item .img {
    height: 30vh;

    background: var(--img);
    background-repeat: no-repeat;
    background-size: contain;
}

.item .chor{
    height: 30vh;
    width: 100%;
}

.item .tit {
    padding-top: 1vh;
    text-transform: uppercase; font-weight: bold; font-size: larger;
}

.item .desc {
    padding-top: 1vh;
    text-align: justify;
}

.item:hover{
transform: translateY(-10px);
cursor: pointer;
}

/* GALLERY */

/* #gallery {
    height: max-content;
    margin-left: 5vh;
    margin-right: 5vh;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 2.5vh;
    padding-bottom: 5vh;

} */

#gallery{
    margin-left: 4vh;
    margin-right:4vh;
    overflow: hidden;
}

.row {
    display: flex;
    flex-wrap: wrap;
    padding: 0 3px;
  }
  
  /* Create four equal columns that sits next to each other */
  .column {
    flex: 24.1%;
    max-width: 30%;
    padding: 0 3px;
  }
  
  .column img {
    margin-top: 8px;
    vertical-align: middle;
    width: 100%;
  }
  
  img{ 
    transition: 0.5s all ease-in-out;

  }
  #gallery img:hover{
       border: 3px solid white;
      transform: scale(1.25);
      cursor: pointer;
     
  }
  
/* #gallery .imgss {
    height: 30vh;

    background: var(--url);
    background-size: cover;
    background-repeat: no-repeat;
}

.imgss:hover {
    cursor: pointer;
    transform: scale(0.75);
    transition: 0.5s ease-in-out;

} */



/* ACTUAL GALLERY CODE */


/* ABOUT */

#about {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0vh 5vh 0 5vh;
    grid-gap: 2vh;


}

#about .imgs {
    height: 60vh;
    /* background: white; */
    background: var(--img);
    background-repeat: no-repeat;
    background-size: cover;



}


/* SKILLS */
.skills {
    width: 80%;
}

.percentage {
    height: 1vh;
    background-color: pink;
    width: var(--i);
}

.set {
    display: flex;
    align-items: center;
}

.set .txx {
    padding: 10px;
}

/* BUTTONS INSIDE DESCRIPTION */
.btns button {
    background-color: rgb(43, 43, 43);
    color: white;
    border: none;
    padding: 10px;
    margin-top: 2vh;

}

.btns button:hover {
    filter: brightness(70%);
    cursor: pointer;


}

/* NEWSLETTER */
.newsletter {
    color: white;
    padding: 5vh;
    margin-top: 2.5vh;
    background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
        url("/img/newsletter.jpg");
    /* background: url("/img/background.png"); */
    background-repeat: no-repeat;
    background-size: cover;
}

.newsletter button {
    background-color: rgb(43, 43, 43);
    color: white;
    border: none;
    padding: 10px;
    margin-left: 3vh;

}

.newsletter button:hover {
    filter: brightness(70%);
    cursor: pointer;


}

.inp {
    margin-top: 2vh;

}

.newsletter input {
    padding: 8px;
}

/* connections */

.connect {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 5vh;
    max-height: fit-content;
}

.soc {
    display: flex;
    justify-content: left;


}

.soc i {
    padding: 1vh;
    padding-left: 0vh;
}

.soc i:hover {
    color: pink;
    transition: 0.3s ease-in-out;
    cursor: pointer;
}
.soc a{
    color: gray;
}

.classic span {
    color: rgb(240, 83, 83);
}

/* FOOTER  */

.footer {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2vh;
    margin-bottom: 5vh;
}

.footer i:hover {
    color: pink;
    transition: 0.5s ease-in-out;
    cursor: pointer;
}

/* upper arrow */


/* LINES IN LAST */
#line {
    height: 1px;
    background: white;
    width: var(--width);
    border-radius: 2px;
    margin: 6px;
    /* display: none; */
}

/* PROJECTS */

.projects {

    height: 15vh;
    margin-top: 5vh;
    background-color: rgb(44, 43, 43);
    margin-left: 5vh;
    margin-right: 5vh;
    color: white;
    display: flex;
    justify-content: space-around;
    align-items: center;
}


.pro {
    width: 33%;
}

.clients {
    width: 33%;

}

.years {
    width: 33%;

}

.projects span {
    font-size: 26px;
    color: pink;
}

/* MOST OF THE HOVERS ARE HERE */

/* modeswitcher */
.modeswitcher {
    position: fixed;
    z-index: 10;
    bottom: 25px;
    right: 25px;
    height: 3vh;
    border: 2px solid white;
    border-radius: 100%;
    aspect-ratio: 1;
    background: url(/img/bw.png);
    background-size: cover;
    background-repeat: no-repeat;

}

@keyframes mode {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);


    }
}

.modeswitcher:hover {
    cursor: pointer;
    animation: mode 0.5s linear 1;
}

img{
    width: 30vw;
    height: auto;
}

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

    .sidebarss {
        display: block;
    }

    .mobile-nav {
        display: block;
    }
    /* .column {
        flex: 100%;
        max-width: 100%;
      } */

    /* #gallery {
        grid-template-columns: 1fr;

    } */

    .services {
        grid-template-columns: 1fr;

    }



    .item .img {
        border-radius: 8px;
    }
.item .tit{
    padding: 0vh;
}
    #about {
        grid-template-columns: 1fr;

    }

    #about .imgs {
        height: 40vh;
    }

    .menus {
        display: none;
    }
img{
    width: 80vw;
}
    .projects{
        margin-left: 0vh;
    margin-right: 0vh;
    }
    
#homee{
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
        url("/img/main_mobile.jpg");
    /* background: url("/img/background.png"); */
    background-size: cover ;
}
.connect{
    grid-template-columns: 1fr;
}
.column {
    flex: 100%;
    max-width: 100%;
  }
}
/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
    .column {
      flex: 48%;
      max-width: 100%;
    }
   
     #about {
        grid-template-columns: 1fr;

    }

    .projects{
        margin-left: 0vh;
    margin-right: 0vh;
    }
    
    #about .imgs {
        height: 50vh;
    }
    #gallery{
        margin: 0px;
    }
    .services {
        grid-template-columns: 1fr 1fr;

    }
    .item .img {
        height: 15vh;
    }
    .item .chor {
        height: 15vh;
    }

    @media screen and (max-width: 500px) {
        .column {
          flex: 100%;
          max-width: 100%;
        }
        .services {
            grid-template-columns: 1fr;
            padding: 3vh;
    
        }
        .item .img {
            height: 30vh;
        }
        .item .chor {
            height: 30vh;
        }
        #gallery{
            margin: 3vh;
        }
  }
  
}