@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch&display=swap');
*{
    margin: 0;
    padding: 0;
}
div, section, span, ul, li,a{
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
}
body{
    overflow-x: hidden;
    overflow-y: scroll;
    background-color: #424242;
    font-family: 'Chakra Petch', sans-serif;
    color: white;
}
body::-webkit-scrollbar{
    display: none;
}
.up-menu{
    background-color: #8f8c8c82;
    position: fixed;
    overflow: hidden;
    z-index: 1;
    top: 2%;
    width: 100%;
    height: 10%;
    max-height: 10%;
    transition: top 0.3s;
}
.up-menu--hidden {
    top: -100%; /*Move the menu off-screen*/
    transition: top 0.3s; /*Apply a smooth transition effect*/
}
.nlogo{
    position: relative;
    left: 2%;
    top: 22%;
}
#nelit-logo img{
    height: 10%;
    width: 10%;
}
.sidebar{
    position: relative;
    top: -20%;
    width: 72%;
    font-size: 18px;
    height: 50%;
    left: 17%;
    font-weight: bold;
}
.links a {
    text-decoration: none;
    --c: #1095c1; 
    --s: .2em;
    line-height: 1.1em;
    color: var(--c);
    color: #dad7d7;
    padding-right: 30px;
    position: relative;
    transition: color 0.5s;
    cursor: pointer;
}
.links a::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px; /* çizginin çıkacağı konum */
    width: 80%; /* çizginin boyutu */
    height: var(--s);
    background: var(--c);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.5s;
}
.links a:hover {
    color: var(--c);
}
.links a:hover::before {
    transform: scaleX(1);
}
.social{
    position: relative;
    width: 10%;
    height: 35%;
    top: -70%;
    left: 93%;
}
.social a {
   position: relative;
   padding-right: 10px;
   color: #f2f2f2;
}
#insta img{
    height: 70%;
    width: 10%;
}
#twitter img{
    height: 70%;
    width: 10%;
}
#linkedin img{
    height: 70%;
    width: 10%;
}
.preferans{
    cursor: pointer;
}
#menu__toggle {
    opacity: 0;
  }
  #menu__toggle:checked + .menu__btn > span {
    transform: rotate(45deg);
  }
  #menu__toggle:checked + .menu__btn > span::before {
    top: 0;
    transform: rotate(0deg);
  }
  #menu__toggle:checked + .menu__btn > span::after {
    top: 0;
    transform: rotate(90deg);
  }
  #menu__toggle:checked ~ .menu__box {
    left: 0 !important;
  }
  .hamburger-menu{
    visibility: hidden;
  }
  .menu__btn {
    position: fixed;
    top: 2000000000px;
    left: 20px;
    width: 26px;
    height: 26px;
    cursor: pointer;
    z-index: 1;
  }
  .menu__btn > span,
  .menu__btn > span::before,
  .menu__btn > span::after {
    display: block;
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #616161;
    transition-duration: .25s;
  }
  .menu__btn > span::before {
    content: '';
    top: -8px;
  }
  .menu__btn > span::after {
    content: '';
    top: 8px;
  }
  .menu__box {
    display: block;
    position: fixed;
    top: 0;
    left: -100%;
    width: 30%;
    height: 100%;
    margin: 0;
    padding: 80px 0;
    list-style: none;
    color: white;
    text-decoration: none;
    background-color: #879aa7;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, .4);
    transition-duration: .25s;
  }
  .menu__box li{
    position: relative;
    left: 5%;
    padding-top: 5%;
  }
  .menu__box li:first-child{
    padding-top: 10%;
  }
  .menu__box li a{
    font-family: 'Chakra Petch', sans-serif;
    text-decoration: none;
    color: white;
  }
  .menu__box li a:hover{
    background-color: #dad7d7;
    color: black;
  }
  .menu__item {
    display: block;
    padding: 12px 24px;
    color: white;
    font-size: 2rem;
    font-weight: 600;
    text-decoration: none;
    transition-duration: .25s;
  }
  .menu__item:hover {
    background-color: #CFD8DC;
  }
button{
    background: transparent;
    border: 3px solid white;
    color: white;
    font-size: 1.5rem;
    font-family: 'Chakra Petch', sans-serif;
    border-radius: 25px;
    width: 8%;
    height: 5%;
}
button:hover{
    background-color: white;
    color: black;
}
/*-----------------------------------------------------*/
section{
    width: 100%;
    float: left;
    height: 100vh;
    position: relative;
}
#home{
    background-image: url(./background/giris.jpg);
    background-size: cover;
}
.home-text{
    font-size: 5rem;
    position: absolute;
    top: 30%;
    left: 30%;
    transform: translate(-0%, -0%);
}
#about-us{
    background-image: url(./background/about-us.jpg);
    background-size: cover;
}
.about-us-title{
    font-size: 5rem;
    position: absolute;
    top: 10%;
    left: 5%;
}
.about-us-text{
    font-size: 1.3rem;
    position: absolute;
    top: 30%;
    left: 5%;
    width: 58%;
}
#bilgi{
    background-image: url(./background/bilgi-tek.jpg);
    background-size: cover;
}
.bilgi-title{
    font-size: 5rem;
    position: absolute;
    top: 25%;
    left: 5%;
}
.bilgi-text{
    font-size: 2rem;
    position: absolute;
    top: 40%;
    left: 5%;
    width: 54%;
}
.bbilgi{
    position: absolute;
    top: 60%;
    left: 35%;
}
#ai{
    background-image: url(./background/yapay-zeka.jpg);
    background-size: cover;
}
.ai-title{
    font-size: 5rem;
    position: absolute;
    top: 25%;
    left: 5%;
}
.ai-text{
    font-size: 2rem;
    position: absolute;
    top: 40%;
    left: 5%;
    width: 54%;
}
.bai{
    position: absolute;
    top: 55%;
    left: 35%;
}
#otonom{
    background-image: url(./background/otonom.jpg);
    background-size: cover;
}
.otonom-title{
    font-size: 5rem;
    position: absolute;
    top: 20%;
    left: 5%;
}
.otonom-text{
    font-size: 2rem;
    position: absolute;
    top: 35%;
    left: 5%;
    width: 50%;
}
.boto{
    position: absolute;
    top: 57%;
    left: 35%;
}
#software{
    background-image: url(./background/yazılım.jpg);
    background-size: cover;
}
.software-title{
    font-size: 5rem;
    position: absolute;
    top: 10%;
    left: 5%;
}
.software-text{
    font-size: 2rem;
    position: absolute;
    top: 25%;
    left: 5%;
    width: 54%;
}
.bsoft{
    position: absolute;
    top: 65%;
    left: 35%;
}
#ikpage{
    background-image: url(./background/ik.jpg);
    background-size: cover;
}
.ik-title{
    font-size: 5rem;
    position: absolute;
    top: 25%;
    left: 5%;
}
.ik-text{
    font-size: 2rem;
    position: absolute;
    top: 40%;
    left: 5%;
    width: 54%;
}
.bik{
    position: absolute;
    top: 70%;
    left: 35%;
}
.avjobdiv{
    position: absolute;
    left: 80%;
    top: 60%;
    border: 2px solid white;
    border-radius: 25px;
    width: 10%;
    height: 20%;
}
.avjobdiv img{
    width: 60%;
    height: 60%;
    position: absolute;
    left: 20%;
    top: 15%;
}
.pavjob{
    position: absolute;
    top: 80%;
    left: 12%;
    font-size: 1.2rem;
    text-decoration: none;
    color: white;
}
.iletisim-title{
    font-size: 4rem;
    position: absolute;
    left: 45%;
    top: 10%;
}
.map{
    position: absolute;
    top: 20%;
    left: 15%;
    height: 55%;
    width: 70%;
}
#iletisim{
    height: 120vh;
}
.GM{
    position: absolute;
    top: 75%;
    left: 15%;
    height: 30%;
    width: 40%;
}
.adres{
    position: absolute;
    top: 0%;
    left: 5%;
}
.imgno{
    position: absolute;
    top: 20%;
    left: 0%;
}
.no{
    position: absolute;
    top: 21%;
    left: 5%;
}
.imgno2{
    position: absolute;
    top: 40%;
    left: 0%;
}
.no2{
    position: absolute;
    top: 41%;
    left: 5%;
}
.imgmail{
    position: absolute;
    top: 60%;
    left: 0%;
}
.mail{
    position: absolute;
    top: 61%;
    left: 5%;
}
.claimer{
    position: absolute;
    top: 90%;
}
.KM{
    position: absolute;
    top: 75%;
    left: 60%;
    width: 40%; 
    height: 30%;   
}
.kadres{
    position: absolute;
    top: 0%;
    left: 5%;
}
.imgkno{
    position: absolute;
    top: 20%;
    left: 0%;
}
.kno{
    position: absolute;
    top: 21%;
    left: 5%;
}
.imgkmail{
    position: absolute;
    top: 40%;
    left: 0%;
}
.kmail{
    position: absolute;
    top: 41%;
    left: 5%;
}
.bayrak{
    position: absolute;
    top: 88%;
    width: 3rem;
    height: 2rem;
}
.byrtext{
    position: absolute;
    top: 90%;
    left: 12%;
}
/*<-------RESPONSIVE-------->*/
@media (max-width: 1835px){
    .links{
        position: relative;
        left: -4%;
        width: 105%;
    } 

}
@media (max-width: 1747px){
    .links{
        font-size: 16.5px;
    }
    .avjobdiv{
        width: 15%;
    }
    .pavjob{
        left: 20%;
    }
    .byrtext{
        left: 15%;
    }
}
@media (max-width: 1650px){
    .links{
        font-weight: normal;
        left: -9%;
        font-size: 17px;
        top: 10%;
        width: 110%;
    }
    .nlogo{
        width: 80%;
        left: 1%;
        top: 20%;
    }
    .social{
        top: -65%;
        height: 30%;
    }
}
@media (max-width: 1600px){
    .links{
        font-size: 17px;
        left: -5%;
    }
}
@media (max-width: 1590px){
    .links{
        left: -8%;
        width: 115%;
    }
}
@media (max-width: 1536px) {
    .links{
        font-size: 18px;
    }
    .nlogo{
        top: 22%;
    }
    .social{
        left: 94%;
        top: -62%;
    }
    .social a{
        padding-right: 5px;
    }
    .links a{
        padding-right: 5px;
    }
    #insta img{
        width: 10%;
        height: 60%;
    }
    #twitter img{
        width: 10%;
        height: 60%;
    }
    #linkedin img{
        width: 10%;
        height: 60%;
    }
    .home-text{
        left: 20%;
    }
    .bsoft{
        top: 70%;
    }
}
@media (max-width:1400px){
    .links{
        font-size: 17px;
        width: 118%;
        left: -10%;
    }
    .about-us-text{
        width: 80%;
    }
    .social a{
        padding-right: 2px;
    }
    .nlogo{
        left: 0.2%;
    }

    .nlogo{
        right: 40%;
    }
    .bbilgi{
        top: 70%;
    }
    .bik{
        top: 75%;
    }
    .boto{
        top: 60%;
    }
    .bai{
        top: 60%;
    }
    .pavjob{
        left: 10%;
    }
    .bsoft{
        top: 70%;
    }
   .adres,.no,.no2,.mail,.kadres,.kno,.kmail{
    left: 8%;
   }
   .byrtext{
    left: 20%;
   }
}
@media (max-width: 1280px) {
    .links{
        left: -8%;
        font-size: 16px;
        top: 30%;
    }
    .social{
        left: 95%;
        top: -55%;
    }
    .nlogo{
        right: 68%;
    }
    .home-text{
        left: 15%;
    }
    .bsoft{
        top: 70%;
    }
}
@media (max-width: 1200px) {
    .links{
        font-size: 15px;
        left: -11.4%;
        width: 119%;
    }
    .nlogo{
        right: 65%;
    }
    .pavjob{
        left: 5%;
    }
    .about-us-text{
        top: 20%;
    }
    .boto{
        top: 68%;
    }
    .avjobdiv{
        left: 75%;
        width: 20%;
    }
    .pavjob{
        left: 15%;
    }
    .home-text{
        font-size: 4.6rem;
    }
}
@media(max-width: 1119px){
      .links{
        width: 105%;
        left: -3%;
        top: -15%;
        text-align: center;
    }
    .social{
        left: 93%;
        top: -70%;
    }
    #insta img{
        width: 15%;
        height: 70%;
    }
    #twitter img{
        width: 15%;
        height: 70%;
    }
    #linkedin img{
        width: 15%;
        height: 70%;
    }
    .nlogo{
        top: 20%;
        width: 120%;
    }
    .home-text{
        left: 7%;

    }
    button{
        width: 12%;
    }
    .bik{
        top: 80%;
    }
    .bsoft{
        top: 75%;
    }
    .software-title{
        top: 10%;
    }
    .software-text{
        top: 20%;
    }
}
@media (max-width: 1024px) {
    .links{
        left: -5%;
        width: 105%;
    }
    #insta img{
        width: 20%;
    }
    #twitter img{
        width: 20%;
    }
    #linkedin img{
        width: 20%;
    }
    .social{
        left: 91%;
        top: -70%;
    }
    .bik{
        top: 85%;
    }
    .home-text{
        left: 5%;
        font-size: 4.5rem;
    }
    .adres,.no,.no2,.mail,.kadres,.kno,.kmail{
        left: 10%;
    }
    .byrtext{
        left: 25%;
    }
    .bsoft{
        top: 80%;
    }
}
@media (max-width: 950px){
    .home-text{
        left: 2%;
        font-size: 4.3rem;
    }
    .about-us-title{
        font-size: 4rem;
        top: 5%;
    }
    .about-us-text{
        top: 15%;
        width: 70%;
    }
    .iletisim-title{
        left: 40%;
    }
    .map{
        top: 18%;
    }
    .links{
        top: 10%;
    }
    .software-title{
        left: 2%;
    }
    .social{
        top: -58%;
    }
    .bilgi-title{
        top: 10%;
    }
    .bilgi-text{
        top: 25%;
    }
    .bbilgi{
        top: 65%;
    }
    .ai-title{
        top: 10%;
        left: 2%;
    }
    .ai-text{
        top: 25%;
    }
    .software-title{
        top: 10%;
    }
    
    .software-text{
        top: 20%;
    }
    .bai{
        top: 55%;
    }
    .boto{
        top: 75%;
    }
    .ik-text{
        font-size: 1.8rem;
    }
    .pavjob{
        left: 8%;
    }
    .adres,.no,.no2,.mail,.kadres,.kno,.kmail{
        left: 12%;
    }
    .byrtext{
        left: 30%;
    }
    .home-text{
        font-size: 3.5rem;
        left: 10%;
    }
}
@media (max-width: 920px){
    .sidebar{
        visibility: hidden;
    }
    .up-menu{
        height: 6%;
        width: 100%;
    }
    .social{
        top: -100%;
        left: 80%;
        height: 60%;
        width: 15%;
    }
    .nlogo{
        top: 10%;
        left: 40%;
    }
    #nelit-logo img{
        width: 20%;
    }
    .hamburger-menu{
        visibility: visible;
    }
    .menu__btn{
        top: 5%;
        z-index: 99999999;
    }
    .menu__box{
        z-index: 999999;
    }
    
}
@media(max-width: 820px){
    .sidebar{
        visibility: hidden;
    }
    .software-title{
        font-size: 2.5rem;
        top: 10%;
    }
    .software-text{
        font-size: 1.7rem;
        top: 20%;
    }
    .up-menu{
        height: 6%;
        width: 100%;
    }
    .social{
        top: -100%;
        left: 80%;
        height: 60%;
        width: 15%;
    }
    .nlogo{
        top: 10%;
        left: 40%;
    }
    #nelit-logo img{
        width: 20%;
    }
    .hamburger-menu{
        visibility: visible;
    }
    .menu__btn{
        top: 5%;
        z-index: 99999999;
    }
    .menu__box{
        z-index: 999999;
    }
    .bsoft{
        top: 80%;
    }
    
}
@media (max-width: 800px){
    .home-text{
        left: 3%;
    }
    .pavjob{
        left: 1%;
    }
    button{
        width: 15%;
    }
}
@media (max-width: 768px) {
    .avjobdiv{
        width: 25%;
        left: 70%;
    }
    .about-us-text{
        font-size: 1.2rem;
    }
    .pavjob{
        left: 10%;
    }
    .home-text{
        font-size: 3.2rem;
    }
    .boto{
        top: 80%;
    }
    .software-title{
        font-size: 3.5rem;
        top: 10%;
    }
    .software-text{
        font-size: 1.8rem;
        top: 20%;
    }
    .KM{
       
        left: 55%;
    }
    .kadres, .kno,.kmail{
        left: 16%;
    }
    .byrtext{
        left: 30%;
    }
    .bayrak{
        left: 5%;
    }
    .about-us-text{
        width: 75%;
    }
    .bbilgi{
        top: 70%;
    }
    .bsoft{
        top: 75%;
    }
    .ai-title{
        font-size: 4.5rem;
    }
    .ik-title{
        top: 10%;
    }
    .ik-text{
        top: 25%;
    }
    .ai-title{
        font-size: 2.7rem;
    }
    .otonom-title{
        font-size: 2.5rem;
    }
    .otonom-text{
        top: 27%;
    }
}
@media (max-width: 640px) {
    .menu__box{
        width: 50%;
    }
    button{
        width: 20%;
        font-size: 1.2rem;
    }
    .about-us-title{
        font-size: 2rem;
    }
    .about-us-text{
        font-size: 0.8rem;
    }
    .bilgi-title{
        font-size: 2rem;
    }
    .bilgi-text{
        font-size: 1.5rem;
        width: 85%;
        top: 20%;
    }
    .bbilgi{
        top: 60%;
    }
    .ai-title{
        left: 5%;
        font-size: 2rem;
    }
    .ai-text{
        font-size: 1.5rem;
        width: 85%;
        top: 20%;
    }
    .bai{
        top: 50%;
    }
    .otonom-title{
        left: 5%;
        font-size: 2rem;
    }
    .otonom-text{
        font-size: 1.5rem;
        width: 85%;
        top: 30%;
    }
    .boto{
        top: 65%;
    }
    .software-title{
        top: 10%;
        left: 5%;
        font-size: 2rem;
    }
    .software-text{
        font-size: 1.5rem;
        width: 85%;
        top: 20%;
    }
    .bsoft{
        top: 65%;
    }
    .ik-title{
        left: 5%;
        top: 5%;
        font-size: 2rem;
    }
    .ik-text{
        font-size: 1.5rem;
        width: 70%;
        top: 15%;
    }
    .bik{
        top: 80%;
    }
    .avjobdiv{
        top: 70%;
        left: 60%;
        width: 35%;
    }
    .pavjob{
        left: 8%;
        font-size: 1rem;
    }
    .iletisim-title{
        left: 25%;
    }
    .GM{
        left: 5%;
        width: 50%;
        font-size: 0.7rem;
    }
    .adres,.no,.no2,.mail{
        left: 20%;
        
    }
    .KM{
        font-size: 0.7rem;
    }
    .kadres,.kno,.kmail{
        left: 25%;
    }
    .bayrak{
        top: 90%;
    }
    .byrtext{
        left: 40%;
    }

}
@media (max-width: 565px){
    .home-text{
        font-size: 2.5rem;
    }
    .pavjob{
        left: 18%;
    }
    .software-title{
        top: 10%;
    }
    .software-text{
        top: 20%;
    }
}
@media(max-width: 480px){
    .bsoft{
        top: 80%;
    }
    .social{
        top: -70%;
        height: 45%;
    }
    .nlogo{
        top: 20%;
    }
    .boto{
        top: 75%;
    }
}
@media(max-width: 412px){
    .avjobdiv{
        top: 75%;
    }
    .nlogo{
        top: 30%;
    }
    .social{
        top: -80%;
        width: 20%;
    }
    .pavjob{
        left: 5%;
    }
    .about-us-text{
        top: 20%;
    }
    .home-text{
        font-size: 3rem;
        left: 10%;
    }
    .software-title{
        top: 10%;
    }
    .software-text{
        top: 20%;
        font-size: 1.2rem;
    }
    .bsoft{
        top: 90%;
    }
}
@media(max-width: 390px){
    
    .home-text{
        left: 5%;
    }
    .avjobdiv{
        top: 75%;
    }
}
@media(max-width: 360px){
    .nlogo{
        top: 30%;
    }
    .social{
        top: -80%;
        width: 20%;
    }
    .about-us-text{
        
        width: 80%;
        font-size: 0.75rem;
    }
    .bbilgi{
        top: 70%;
    }
    .otonom-title{
        top: 10%;
    }
    .otonom-text{
        top: 20%;
        font-size: 1rem;
    }
    .boto{
        top: 80%;
    }
    .ik-text{
        font-size: 1.2rem;
    }
    .bik{
        top: 65%;
    }
    .avjobdiv{
        width: 35%;
        left: 60%;
        top: 75%;
    }
    .pavjob{
        font-size: 0.9rem;
    }
    .adres,.kadres{
        font-size: 0.6rem;
    }
    .iletisim-title{
        font-size: 2rem;
        left: 35%;
    }
    .software-title{
        top: 10%;
    }
    .software-text{
        top: 20%;
        font-size: 1.2rem;
    }
    .bsoft{
        top: 80%;
    }
}
@media(max-height: 800px){
    .about-us-title{
        top: 5%;
        font-size: 2rem;
    }
    .about-us-text{
        width: 80%;
        top: 15%;
        font-size: 1rem;
    }
    .bilgi-title{
        font-size: 3rem;
    }
    .bilgi-text{
        font-size: 1.5rem;
    }
    .bsoft{
        top: 80%;
    }
    .software-text{
        font-size: 1rem;
    }
    .bbilgi{
        top: 75%;
    }
    .otonom-text{
        font-size: 1.5rem;
    }
    .ik-text{
        font-size: 1.7rem;
    }
    .boto{
        top: 80%;
    }
    .bik{
        top: 85%;
    }
    .bai{
        top: 75%;
    }
    .adres, .kadres{
        font-size: 0.8rem;
    }
}
@media(max-height: 700px){
    .about-us-text{
        width: 92%;
    }
    .bilgi-text{
        font-size: 1.3rem;
    }
    .ai-text{
        font-size: 1.3rem;
    }
    .otonom-text{
        font-size: 1.3rem;
    }
    .ik-text{
        font-size: 1.3rem;
    }
    .pavjob{
        left: 3%;
    }
    .iletisim-title{
        font-size: 2rem;
        left: 35%;
    }
    .adres,.kadres{
        font-size: 0.55rem;
    }
    .bayrak{
        left: 20%;
    }
    .byrtext{
        left: 55%;
    }
}
@media(max-height: 600px){
    .home-text{
        top: 25%;
    }
    .links{
        top: -40%;
    }
    .social{
        top: -100%;
        width: 18%;
    }
    .about-us-title{
        font-size: 3rem;
    }
    .about-us-text{
        top: 15%;
        font-size: 0.7rem;
    }
    .bilgi-title{
        font-size: 2.5rem;
    }
    button{
        height: 7%;
    }
    .ai-title{
        font-size: 2rem;
    }
    .otonom-title{
        font-size: 2rem;
    }
    .software-title{
        font-size: 2rem;
    }
    .software-text{
        font-size: 1.3rem;
    }
    .bsoft{
        top: 90%;
    }
    .ik-title{
        font-size: 2rem;
    }
    .avjobdiv{
        left: 72%;
        width: 25%;
    }
    .pavjob{
        font-size: 0.5rem;
        left: 15%;
    }
    .iletisim-title{
        left: 45%;
    }
    .adres, .kadres{
        font-size: 0.5rem;
    }
    .byrtext{
        left: 55%;
    }
}
@keyframes opacity_on {
    0% {
        display: none;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}