@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

:root{
     --primary:#29c9bc;
     --normar:#ffffff;
     --black:#13113a;
     --bg:#0c1013;
     --danger:#f75842;
     --border:0.1rem solid rgba(255 ,255, 255, 0.3);

     --container-width-lg: 80%;
     --container-width-md: 90%;
     --container-width-sm: 94%;
}

/* univarsel selectior */
*{
     margin: 0;
     padding: 0;
     outline-offset: none;
     border: none;
     box-sizing: border-box;
     text-decoration: none;
     text-transform: capitalize;
     list-style: none;
     transition: all 0.5s linear;
     scroll-behavior: smooth;
     font-family: "Roboto", sans-serif;
}

/* custom scrollbar */
::-webkit-scrollbar{
     width: 8px;
}
::-webkit-scrollbar-track{
     background-color: var(--normar);
}

::-webkit-scrollbar-thumb{
     background-color: var(--black);
}

body{
     line-height: 1.7;
     color: var(--normar);
     background-color: var(--bg);

}

.container{
     width: var(--container-width-lg);
     margin: 0 auto;
}
section{
     padding: 6rem 0;
}

section h2{
     text-align: center;
     margin-bottom: 4rem;

}

h1,h2,h3,h4,h5{
     line-height: 1.2;
}
h1{
     font-size: 2.4rem;
}
h2{
     font-size: 2rem;
}

h3{
     font-size: 1.6rem;
}
h4{
     font-size: 1.3rem;
}

a{
     color: var(--normar);
}

img{
     width: 100%;
     display: block;
     object-fit: cover;
}

.btn{
     display: inline-block;
     background-color: var(--primary);
     color: var(--black);
     padding: 0.5rem 2rem;
     border: 1px solid transparent;
     border-radius: 0.3rem;
     font-weight: 500;
     cursor: pointer;
}
.btn:hover{
     color: var(--primary);
     background-color: transparent;
     border-color: var(--primary);
     
}

.border_bottom{
     text-align: center;
     display: inline-block;
     border-bottom:2px solid var(--primary);
     margin-bottom: 2.5rem;
     color: var(--primary);
}

nav{
     background-color: var(--black);
     width: 100vw;
     height: 5rem;
     position: fixed;
     top: 0;
     z-index: 1000;
}
.nav_container{
     display: flex;
     height: 100%;
     justify-content: space-between;
     align-items: center

}

.nav_container span{
     color: var(--primary);

}

.nav_container h4{
     font-size: 1.8rem;
}

.nav_container h4::first-letter{
     font-size: 2rem;
}

.nav_container h4:hover{
     color: var(--primary);
     transform: rotateX(360deg);
     transition-duration:1.3s ;
}

nav button{
     display: none;
}

.nav_manu{
     display: flex;
     align-items: center;
     gap: 3rem;
}
.nav_manu a{
     font-size: 1rem;
}

.nav_manu a:hover{
     color: var(--primary);
     border-bottom: 3px solid var(--primary);
     padding-bottom: 0.7rem;
     background-color: var(--black);
}

/* header section */
header{
     position: relative;
     top: 5rem;
     overflow: hidden;
     background-color: var(--black);
     margin-bottom: 2rem;
}
header::before{
     content: '';
     position: absolute;
     background-color: var(--bg);
     width: 100%;
     height: 5rem;
     bottom: 0;
     margin-bottom: -3.1rem;
     z-index: 99;
     transform: skewY(-2deg);
     transform-origin: left;
}
.header_container{
     display: flex;
     align-items: center;
     position: relative;
}

.header_left{
     flex: 1;
}

.header_right{
     flex: 1;
}

.header_right .text1{
     font-size: 1.8rem;
     margin-bottom: 0.3rem;
}

.header_right .text2{
     font-size: 3.6rem;
     font-weight: 550;
}

.header_right .text3{
     font-size: 2.5rem;
     margin: 0.3rem 0;
}

.header_right .typing{
     color: var(--primary);
     font-weight: 500;
}

/* about section  */
.about{
     text-align: center;
}

.about_container{
     display: flex;
     margin: auto;
     align-items: center;
     justify-content: center;
     position: relative;
     margin-bottom: 2.5rem;
}

.about_container .about_img{
     border: 3px solid var(--primary);
     border-radius: 50%;
     overflow: hidden;
     max-width: 12.5rem;
     max-height: 12.5rem;
     margin-right: 2rem;
     position: relative;
     align-items: center;
     margin-bottom: 2rem;
}

.about_container .about-text{
     max-width: 70%;
     text-align: justify;
     letter-spacing: 0.5px;
     padding-bottom: 2.5rem;
}
.about_container .about-text p{
     margin-bottom: 0.8rem;
}

.about_container .about-text .text{
     margin-bottom: 1rem;
}

.about_container .about-text .text span{
     color: var(--primary);
     font-weight: 500;
}