* {
    margin: 0;
    padding: 0;
}

.logo {
    display: flex;
    padding-left: 10rem;

}

body {
    overflow-x: hidden;
}

.logo img {
    height: 5%;
    width: 3%;
}

.head {
    font-family: Impact, Haettenschweiler, sans-serif;
    color: hsl(244, 79%, 66%);
    padding-top: 4px;
    padding-left: 4px;
}

.navbar {
    height: 8vh;
    width: auto;
    background-color: #162e44;
    display: flex;
}

.bar {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 3rem;
    padding-top: 2rem;
}

.nav {
    list-style: none;
    margin: 1.5rem;
    padding-bottom: 2rem;
}

.index {
    color: white;
    font-size: 1.5rem;
    text-decoration: none;

}

.social {
    display: flex;
    justify-content: flex-end;
    padding-left: 36rem;



}

.media {
    list-style: none;
    font-size: large;
    margin: 1rem;


}

.tech {
    color: white;

}

.tech:hover {
    color: #01B3A7;
}

.photo {
    width: 1342px;
    height: 50vw;
}

.intro {
    position: relative;

}

.wrap {
    position: absolute;
    top: 9rem;
    padding-left: 15rem;
}

.para {
    font-size: 1.6rem;
    color: black;

}

.fontweight {
    font-size: 3.3rem;
    color: black;
}


.get {
    background-color: transparent;
    height: 5vh;
    width: 9vw;
    font-size: 1rem;
    color: white;
    border-color: white;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.get:hover {

    background-color: #162e44;


}


.hello {
    display: flex;
    padding-left: 150px;
    height: 257px;
    margin-top: -101px;
    position: absolute;
}


.secondary {
    height: 17vh;
    background-color: #f7f7f7;
    padding-bottom: 200px;
}



.imge {
    height: 85%;
    width: 64%;
    transition: transform 30s linear;
    transition-duration: 0.30s;
    transition-timing-function: ease;
    transition-delay: 0s;

}

.imag {
    height: 319px;
    width: 395px;
}



.imge:hover {
    transform: scale(1.3);
    z-index: 2;

}

.primary {
    padding-left: 41px;
    margin-top: -70px;
    font-size: 1.5rem;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: white;
    border-color: black;
    border-radius: 10px;

}

.heading {
    padding-left: 45%;
    padding-top: 13rem;
    text-decoration: none;

}




    

.arrow {
    text-decoration: none;
    size: 100px;
    display: flex;
    justify-content: center;
    border-style:none;
   

}

.Arrow {

    margin: 213px;
    margin-left: 612px;
    height: 26px;
    width: 115px;
}


.ram {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50vh;
    padding-right: 15px;
    padding-top: 2rem;

}

.btn {
    height: 4vh;
    width: 6vw;
    background-color: #01B3A7;
    font-size: 0.8rem;
    border-width: thin;
    font-family: sans-serif;


}

.btn:hover {
    background-color: white;
}

.read {
    height: 4vh;
    width: 6vw;
    background-color: white;

    font-size: 0.8rem;
    border-width: thin;
    font-family: sans-serif;

}

.read:hover {
    background-color: aqua;
}


.down {
    height: 40vh;
    width: 30vw;
    padding-right: 20px;
}

.new {
    padding-left: 5rem;
    padding-bottom: 10rem;
    height: 10vh;
}
.part{
    padding-left: 10px;
}

.horizon {
    font-size: 2rem;
    padding-bottom: 10px;

}

.horizen {
    font-size: 1.5rem;
    padding-left: 5rem;
    padding-bottom: 10px;
}

.lorem {
    font-size: 1rem;
    font-family: Georgia, 'Times New Roman', Times, serif;
}

.box {
    height: 70vh;
    background-color: #f7f7f7;
}

.h-primary {
    padding-left: 45%;
    font-size: 2rem;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    padding-top: 10px;
}

.wrapbox {

    padding-left: 13rem;
    width: 70vw;
    padding-top: 40px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    align-content: center;
}

.wraper {
    height: 19vh;
    width: 18vw;
    background-color: white;
    margin-bottom: 50px;
    backface-visibility: hidden;
    display: flex;
    border-color: #f7f7f7;
    box-shadow: #f7f7f7;


}

.wraper:hover {
    background-color: gainsboro;
}

.fa-solid {
    color: #01B3A7;
    font-size: larger;
}

.content {
    padding-top: 15px;
    padding-right: 10px;

}

.boxhead {
    font-size: 15px;
    font-family: sans-serif;
}

.boxpara {

    font-family: sans-serif;
    padding-top: 12px;
    font-size: 13px;
}

.limg {
    height: 200px;
    width: 300px;


}

.labout {

    position: relative;
    padding-left: 27rem;
    height: 20vh;
    margin: -45px;
    width: 45vw;


}

.bottom {
    height: 200%;
    width: 1409px;
}

.h-last {
    font-size: 2rem;
    padding-bottom: 15px;
    color: white;

}

.p-last {
    padding-bottom: 15px;
    font-size: medium;
    color: white;
    text-align: center;
    font-size: large;
}

.sp {
    padding-left: 10rem;
}

.book {
    height: 6vh;
    width: 9vw;
    color: white;
    background-color: #01B3A7;
    font-size: 15px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    border-width: 1px;
    text-decoration: none;
    text-decoration-line: none;


}

.book:hover {
    background-color: transparent;
    border-color: white;
}

.last {
    height: 40vh;
}

.feet {
    display: flex;
    justify-content: flex-start;
    padding-left: 50px;
}


.mfoot {
    padding-left: 20px;
    margin-top: -20px;
    color: white;
    padding-bottom: 5px;

}

.foot-a {
    font-size: 19px;
    padding-bottom: 6px;
    color: white;
}

.foot-b {
    padding-left: 13px;
}

.hel {
    color: white;
    list-style: circle;
    text-decoration: none;
}

.foot h3 {

    padding-left: 10px;
    padding-bottom: 6px;
    color: white;
}

.footer {
    height: 150px;
    padding-top: 150px;
    background-color: #162e44;
}

.foot {
    height: 50px;

}

.ft {
    padding-left: 90px;
    padding-top: 2px;
}

.fet {
    padding-bottom: 5px;
}
@media (min-width:1200px){

}

@media (min-width:768) and (max-width:979px){
    
}

@media (max-width:767px){
    
}
 
@media (max-width:480px){
    .logo img{ height: 31px;
        width: 37px;

    }
    .head{
        padding-left: 5px;
        padding-bottom: 4px;
        font-size: 15px;
    }
    .navbar{
        display: block;
        width: 30px;
        height: 30px;
        background-color:black;
        color:white;
        transform: translateX(0);


    }
    .bar{
        display: block;
        padding: 0;
        margin: 0;
    }
    .photo{
        height: 300px;
        width: 400px;
    }
    .nav{
        padding: 0%;
        margin: 0%;
        font-size: 10px;
    }
}