body{
    background-color: #2d455d;
    margin: 0;
    padding: 0;
    color: white;
    font-family: "Outfit" ,sans-serif;
    overflow-x: hidden;
}
.img-title{
    display: flex;
    flex-direction: row;
    box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.5);
    height: 70px;
}
.main-title{
    color: white;
    font-weight: 600;
    transform: translateY(-11px);
    letter-spacing: 2px;
}
.icon-nav{
    width: 90px;
    height: 90px;
    transform: translateY(-16px);
}
.navs li{
    list-style-type: none;
    color: white;
    font-family: "Raleway", sans-serif;
    margin: 0;
    font-weight: 500;
    cursor: pointer;
    transition: all ease-in-out 0.3s;
}
.navs li:hover{
    transform: scale(1.05);
}
li.active{
    color: black;
    font-weight: 700;
}
.navs{
    gap:20px;
    display: flex;
    flex-direction: column;
    box-shadow: 7px 0 10px -5px rgba(0, 0, 0, 0.5);
    width: 230px;
    height: 780px;
    left: 0;
    position: sticky;
}
.page{
    background-color:#162839 ;
    margin-left: 230px;
    padding: 20px ;
    margin-top: -780px;
    display: none;
}
#introduction{
    display: flex;
}
.ard-comp{
    height: 600px;
    width: 350px;
    border-radius: 5px;
}
.title-intro{
    transform: translateX(20px);
    color: white;
    font-family: "Outfit", sans-serif;
    letter-spacing: 2px;
    font-stretch: condensed;
}
.search-img{
    height: 80px;
    width: 80px;
}
.img1-text{
    display: flex;
    flex-direction: row;
    margin: 0;
}
.search{
    flex-direction: column;
    gap:1px;
    transform: translateY(-5px);
}
.search-t{
    color: white;
    font-family: "Outfit" ,sans-serif;
    letter-spacing: 1px;
}
.disc-1{
    color: white;
    transform: translateY(-14px);
    opacity: 0.9;
}
.geer{
    display: flex;
    flex-direction: column;
    gap: 1px;
  
}
.disc-2{
    color: white;
    transform: translateY(-30px);
    opacity: 0.9;

}
.geer-icon{
    height: 70px;
    width: 80px;
    transform: translateY(7px);
}
.img2-text{
    display: flex;
    transform: translate(-80px,-20px);
}
.imgs{
    flex-direction: column;
    display: flex;
}
.explaination{
    flex-direction: column;
    display: flex;
}
.geer-t{
    color: white;
    font-size: 20px;
    letter-spacing: 1.5px;
}
.arduino-icon{
    height: 40px;
    width: 60px;
}
.img3-text{
    display: flex;
    flex-direction: row;
    transform: translate(-70px , -30px);
}
.arduino{
    display: flex;
    flex-direction: column; 
}
.arduino-t{
    transform: translate(10px , -24px);
    letter-spacing: 1.5px;
    font-size: 20px;
}
.disc-3{
    transform: translate(10px , -56px);
    opacity: 0.9;
}
.img4-text{
    display: flex;
    flex-direction: row;
    transform: translate(-72px , -80px);
}
.calc{
    display: flex;
    flex-direction: column;
    transform: translateX(4px);
}
.calc-icon{
    width: 70px;
    height: 60px;
}
.calc-t{
    transform: translateY(-10px);
    letter-spacing: 1.5px;
    font-size: 20px;
}
.disc-4{
    /*transform: translateY(-40px);*/
    opacity: 0.9;
}
#mosfet , #seven-segment , #dht22{
    height: 800px;
}
.ohms , .ohms-2 , .ohms-3 , .ohms-3-d{
    
    background-color: #2d455d;
    
    padding-left: 20px;
    margin-right: 40px;
    height: 160px;
}
.ohms-t , .ohms-t-2{
    background-color:#1c354e;
    margin: 0;
    padding : 10px 9px;
    border-radius: 12px;
    transform: translateY(10px);
    width: 330px;
    letter-spacing: 1px;
}
.ohms{
    transform: translate(-80px , -100px);
    width: 620px;
}
.ohms-3{
    transform: translate(-594px , 20px);
}
.ohms-3-d{
    transform: translate(-240px , 10px) ;
}
.ohms-2 ,.ohms-3 ,.ohms-3-d{
    width: 820px;
    padding: 0 220px;
    padding-bottom: 40px;
    height: 180px;
}
.ohms-2{
    transform: translate(-594px , 60px);
}
hr{
    border: 2px solid #1c354e;
    border-top-left-radius: 6px ;
    border-bottom-left-radius: 6px;
    width: 600px;
    transform: translateY(-1.5px);
}
.texts , .texts-22{
    display: flex;
    flex-direction: column;
}
.disc-4 {
    transform: translateY(-45px);
}

.ohms-t2{
    letter-spacing: 1.5px;
    font-size: 20px;
}
.calc{
    display: flex;
    flex-direction: column;
}
.btn12{
    background-color: #2d455d;
    padding: 10px;
    border-radius: 7px;
    border: 2px #2d455d;
    cursor: pointer;
    color: white;
    transform: translate(70px , -90px);
}
.mosfet-img{
    width: 340px;
    height: 560px;
    border-radius: 10px;
    z-index: 200;
}
.img-mosfet ,.img-7segment{
    display: flex;
    flex-direction: row;
    gap: 20px;
}
.disc-5 , .disc-5-2{
    transform: translateY(-35px);
}
.text-s ,.text-s1{
    display: flex;
    flex-direction: column;
}
.text-s1{
    transform: translateY(-30px);
}
.texts-2{
    display: flex;
    flex-direction: column;
}
.mosfet-title ,.segment-title{
    letter-spacing: 1.75px;
}
.segment-title{
    white-space: nowrap;
    transform: translateY(6px);
}
.texts-4{
    display: flex;
    flex-direction: row;
}
.texts2{
    transform: translateY(70px);
}
.texts21{
   transform: translate(-85px,40px);
}
.max , .no ,.common ,.per-seg{
    background-color:#2d455d;
    height: 40px;
    padding: 7px ;
    padding-top: 0px;
    margin-bottom: 0px;
    border-bottom: 2px white solid ;
    border-top: 2px white solid ;
    width: 350px;
}
.third-p , .first-p , .first-2 , .third-2{
    letter-spacing: 1.5px;
}
.first-p , .first-2{
    transform: translateY(-4px);
}
.sec-p {
    transform: translateX(8px);
}
.wiring-div , .wiring-div2{
    background-color:#0e1d2b;

    padding: 4px 8px;
    border-radius: 10px;
    border: 2px #060a16 solid;
    width: 715px;
    border-radius: none;
}
.wiring-div2{
    transform: translateX( -365px);
}
.wiring-div{
        transform: translate(-364px , 30px);
}
.wiring-disc{
    letter-spacing: 1.25px;
    line-height: 25px;
}
.volt , .current , .resistance{
    display: flex;
    flex-direction: column;
}
.ohms-law{
    display: flex;
    flex-direction: row;
    gap: 70px;
}
.result-calc{
    display: flex;
    flex-direction: row;
    gap: 50px;
}
.enter-div{
    background-color: rgb(4, 77, 125);
    border: white  1px solid;
    border-radius: 10px;
    width: 140px;
    height: 44px;
}
.enter ,.enter2 ,.result{
    transform: translate(17px , -7px);
}
.v , .I , .resist{
    letter-spacing: 1.5px;
    font-size: 20px;
}
.btn-calc{
    border-radius: 10px;
    background-color:#1c354e;
    letter-spacing: 1.5px;
    color: white;
    border: #1c354e solid 2px;
    padding: 10px ;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all ease-in-out 0.3s;
}
.btn-calc:hover{
    transform: scale(1.05);
    cursor: pointer;
}
.values{
    transform: translate(-429px , -8px);
    letter-spacing: 1.5px;
}
.sec-21{
    transform: translateX(5px);
}
.fourth-2 ,.fourth-p{
    transform: translateX(10px);
    letter-spacing: 1px;
}
.col1{
    display: flex;
    flex-direction: row;
    gap: 40px;
}
.wiring-disc2{
     letter-spacing: 1.25px;
    line-height: 25px;
    transform: translateY(-11px);
}
.wiring-disc-2{
     letter-spacing: 1.25px;
    line-height: 25px;
    transform: translateY(37px);
}
.segment-img{
    z-index: 200;
    border-radius: 10px;
    width: 330px;
    height: 600px;
}
.code-div-img{
    display: flex;
    flex-direction: row;
    transform: translate(-520px, 30px);
    gap: 20px;
}
.code-img{
    border-radius: 10px;
}
.code{
    letter-spacing: 1px;
    font-size: 20px;
}
.img-d{
    width: 330px;
    height:620px;
    border-radius: 10px;
    z-index: 200;
}
.img-text-d{
    display: flex;
    flex-direction: row;
}
.texts-key{
    display: flex;
    flex-direction: column;
    transform: translateX(20px);
}
.d-title{
    letter-spacing: 1.5px;
    font-weight: 700;
    transform: translateY(-16px);
}
.cols{
    display: flex;
    flex-direction: row;
    transform: translateY(-20px);
}
.humid-div , .voltage-div , .sensor-div{
    background-color:#2d455d;
    height: 40px;
    width: 350px;
    border-bottom: 2px white solid ;
    border-top: 2px white solid ;
    padding: 7px;
    margin: 0;
}
.humid , .humid-2 , .voltage , .voltage-2 , .sensor , .sensor-2 , .siganl , .signal-2 , .temp , .temp-2{
    letter-spacing: 1.5px;
}
.humid , .humid-2 , .voltage , .voltage-2 , .sensor , .sensor-2 {
    transform: translateY(-7px);
}
.wiring-img{
    display: flex;
    flex-direction: row;
}
.wiring-d , .wiring-s{
    background-color:#0e1d2b;
    padding: 4px 8px;
    border-radius: 10px;
    border: 2px #060a16 solid;
    width: 712px;
    border-radius: none;
}
.img-d-w{
    width: 200px;
    height: 150px;
    transform: translateY(35px);
    border-radius: 5px;
    border:#2d455d solid 1px;
}
.title-wiring{
    white-space: nowrap;
    letter-spacing: 1.5px;
}
.temp , .siganl{
    transform: translateX(4px);
}
.signal-2{
    transform: translateX(6px);
}
.wiring-d-t{
    line-height: 1.8rem;
}
#dht22{
    height: 1000px;
}
.ohms-3-d{
    border-radius: 10px;
}
.snippet-div{
    display: flex;
    flex-direction: row;
    transform: translate(-330px , 30px);
    gap: 20px;
}
.dht22-img{
    width: 200px;
    height: 150px;
    border-radius: 10px;
}
.snippet-img{
    width: 429px;
    height: 91px;
    transform: translateY(20px);
    border-radius: 10px;
}
.h-snip{
    letter-spacing: 1.25px;
    font-weight: 700;
}
.img-text-s{
    display: flex;
    flex-direction: row;
}
.texts-s{
    display: flex;
    flex-direction: column;
}
.cols-s{
    display: flex;
    flex-direction: row;
    transform: translateX(20px);
}
.working-div, .sensing-div , .high-div , .echo-div {
    background-color: #2d455d;
    border-bottom: 2px white solid;
    border-top: 2px white solid;
    height: 40px;
    width: 350px;
    padding: 7px;
}
#sonic{
    height: 1100px;
}
.img-s{
    width: 330px;
    height: 650px;
    border-radius: 10px;
}
.title-s{
    transform: translate(20px , -5px);
    letter-spacing: 1.5px;

}
.working , .working-2 , .high , .high-2 , .sensing ,.sensing-2 , .echo , .echo-2 , .distance , .distance-2 , .static ,.static-2 ,.trig ,.trig-2{
    letter-spacing: 1.5px;
}
.working , .working-2{
    transform: translateY(-5px);
}
.static{
    transform: translateX(5px);
}
.sensing{
    transform: translateY(-5px);
}
.sensing-2{
    transform: translate(-2px,-5px);
}
.distance{
    transform: translateX(5px);
}
.distance-2{
    transform: translateX(4px);
}
.high , .high-2{
    transform: translateY(-6px);
}
.trig{
    transform: translateX(4px);
}
.echo , .echo-2{
    transform: translateY(-4px);
}
.wiring-s{
    transform: translate(18px, 8px);
}
.wiring-p-s{
    line-height: 2rem;
}
.code-s{
    display: flex;
    flex-direction: column;
    transform: translateX(27px);
}
.title-s-code{
    letter-spacing: 1.75px;
    font-weight: 700;
}
.coding-s{
    width: 700px;
    border-radius: 10px;
    transform: translateX(-7px);
}
.dist{
    background-color: #060a16;
    padding: 0 15px;
    border-radius: 10px;
    width: 400px;
    transform: translate(150px , 10px);
}
.dist-p{
    letter-spacing: 2px;
    font-weight: 700;
}
.enter2 ,.enter ,.result{
    padding: 20px 0;
    padding-left: 5px;
    transform: translate(-10px , -8px);
    border-radius: 10px;
    background-color:#1c354e;
    color: white;
    font-weight: 700;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.img-text-servo{
    display: flex;
    flex-direction: row;
    gap:13px
}
.texts-servo{
    display: flex;
    flex-direction: column;
}
.cols-servo{
    display: flex;
    flex-direction: row;
}
.wiring-servo{
    background-color:#0e1d2b;
    padding: 4px 8px;
    border-radius: 10px;
    border: 2px #060a16 solid;
    width: 712px;
}
.servo-rows{
    display: flex;
    flex-direction: row;
}
.servo-cols{
    display: flex;
    flex-direction: column;
}
.working-div-servo , .speed-div ,.stall-div ,.angle-div {
    background-color: #2d455d;
    border-bottom: 2px white solid;
    border-top: 2px white solid;
    height: 40px;
    width: 350px;
    padding: 7px;
}
.servo-img{
    width: 340px;
    height: 600px;
    border-radius: 10px;
    z-index: 200;
    transform: translateX(-5px);
}
.title-servo{
    transform: translateY(-7px);
    letter-spacing: 1.5px;
    font-weight: 700;
}
.working-servo ,.working-servo-2{
    transform: translateY(-5px);
    letter-spacing: 1.5px;
}
.speed-servo ,.stall-servo , .width-servo ,.control-system{
    transform: translateX(6px);
    letter-spacing: 1.5px;
    font-weight: 700;
}
.speed-servo-2 , .speed-servo-2-2 , .stall-servo-2 , .stall-servo-2-2 ,.angle-servo ,.angle-servo-2{
    transform: translateY(-5px);
    letter-spacing: 1.5px;
}
.stall-servo-2{
    transform: translateX(6px);
}
#servo{
    height: 1100px;
}
.code-servo{
    display: flex;
    flex-direction: column;
}
.servo-code-img{
    width: 570px;
    height: 300px;
    border-radius: 10px;
}
.title-servo-3{
    letter-spacing: 1.5px;
    font-weight: 700;
}
.connection-servo{
    line-height: 1.5rem;
}