* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}
.container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    color: white;
}
.box {
    height: 100vh;
    background-color: black;
}
.box1 {
    background-color: black;
    padding: 0px 0px 0px 30px;
    width: 100%;
    margin-bottom: 50px;
}
.menu1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
}
.menu1 h1 {
    font-size: 20px;
}
.sub-menu1 a {
    color: white;
    text-decoration: none;
    margin-right: 50px;
}
.sub-box1 {
    display: flex;
    justify-content: space-between;
}
.icons1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
}
.photo1 {
    display: flex;
    justify-content: center;
}
img {
    height: 620px;
    width: 450px;
    margin-top: -30px;
}
.scroll1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 160px;
    margin-right: 20px;
}
.scroll1 i {
    margin-top: 20px;
}
.About1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    margin-left:-50px;
    
}
.About1 h1 {
    margin-bottom: 10px;
    
}
.About1 h4 {
    margin-bottom: 10px;
}
.box2 {
    background-color: black;
    padding: 0px 0px 0px 30px;
    width: 100%;
    margin-bottom: 50px;
}
.menu2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
}
.menu2 h1 {
    font-size: 20px;
}
.sub-menu2 a {
    color: white;
    text-decoration: none;
    margin-right: 50px;
}
.sub-box2 {
    display: flex;
    justify-content: space-between;
}
.icons2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
}
.photo2 {
    display: flex;
    justify-content: center;
}
img {
    height: 620px;
    width: 450px;
    margin-top: -30px;
    margin-left: 200px;
}
.scroll2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 160px;
    margin-right: 20px;
}
.scroll2 i {
    margin-top: 20px;
}
.Role h1 {
    font-size: 20px;
    margin-bottom: 20px;
}
.Role {
    margin-left: 30px;
}
.Role p {
    margin-bottom: 10px;
    margin-right: -120px;
}
.score1 {
    display: flex;
    flex-direction: column;
    justify-content: start;
}
.heading1 {
    text-align: start;
}
.sub-head1 {
    display: flex;
    justify-content: space-evenly;
}
.sub-head1 h1 {
    font-size: 15px;
    background-color: gray;
    padding: 5px;
    border-radius: 10px 10px 0px 0px;
}
.details1 {
    display: grid;
    background: gray;
    padding: 5px;
    margin-top: -20px;
}
.details1 h1 {
    font-size: 20px;
    float: right;
    text-align: end;
    text-align: right;
    margin-top: -15px;
}
.details1 h6 {
    height: 5px;
    width: 450px;
    background: red;
    margin-left: 4px;
    border-radius: 4px 0px 0px 4px ;
}
.details1 h5 {
    height: 5px;
    width: 100px;
    background: blue;
    float: right;
    margin-right: 78px;
    margin-top: -5px;
    border-radius: 0px 4px 4px 0px ;
}
.details1 p {
    font-size: 12px;
}
.content1 button {
    font-size: 12px;
    font-weight: bold;
    width: 30%;
    border-radius: 8px;
    border: 2px solid white;
    margin-bottom: 10px;
    
}
.content2 button {
    font-size: 12px;
    font-weight: bold;
    width: 50%;
    border-radius: 8px;
    border: 2px solid white;
    margin-top: 10px;
    margin-bottom: 10px;
}
.content3 button {
    font-size: 12px;
    font-weight: bold;
    width: 50%;
    border-radius: 8px;
    border: 2px solid white;
    margin-top: 10px;
    margin-bottom: 10px;
}
.content4 button {
    font-size: 12px;
    font-weight: bold;
    width: 20%;
    border-radius: 8px;
    border: 2px solid white;
    margin-top: 10px;
    margin-bottom: 5px;
}
.content5 button {
    font-size: 12px;
    font-weight: bold;
    width: 20%;
    border-radius: 8px;
    border: 2px solid white;
    margin-top: 10px;
    margin-bottom: 5px;
}
.content6 button {
    font-size: 12px;
    font-weight: bold;
    width: 20%;
    border-radius: 8px;
    border: 2px solid white;
    margin-top: 10px;
    margin-bottom: 5px;
}
.content7 button {
    font-size: 12px;
    font-weight: bold;
    width: 20%;
    border-radius: 8px;
    border: 2px solid white;
    margin-top: 10px;
    margin-bottom: 5px;
}
 button i {
    margin-right: 10px;
}

.box3 {
    background-color: black;
}
.menu3 {
    display: flex;
    justify-content: space-between;
    padding: 15px 0px 0px 30px;
    
}
.menu3 a {
    text-decoration: none;
    color: white;
}
.menu3 h1 {
    font-size: 20px;
    color: white;
}
.sub-menu3 {
   display: flex;
   
}
.sub-menu3 a {
   display: flex;
   margin-right: 50px;
}
.experience-education {
    height: 50px;
    background: black;
    
}
.box-contain3 {
    display: flex;
}
.box-line1 {
    margin-top: -10px;
}
.box-line1 h1 {
    height: 500px;
    width: 5px;
    background: white;
    
}
.box-line1 h2 {
    height: 5px;
    width: 380px;
    background: white;
    margin-left: -375px;
}
.box-line1 h3 {
    height: 5px;
    width: 380px;
    background: white;
    margin-left: -375px;
    
}
.box-line1 h4 {
    height: 20px;
    width: 5px;
    background: white;
    margin-left: -375px;
    margin-bottom: -20px;
}
.box-line1 h5 {
    height: 20px;
    width: 5px;
    background: white;
    margin-left: -375px;
    margin-top: -20px;
}
.box-line1 h6 {
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background: white;
    margin-left: -377px;
    margin-bottom: -30px;
}
.box-line1 p {
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background: white;
    margin-left: -377px;
    margin-top: -30px;
}
.experience {
    height: 514px;
    width: 629px;
    background: black;
    color: white;
    display: flex;
    justify-content: space-around;
    padding: 30px 30px 30px 0px;
}
.icons3 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    margin-right: 40px;
}
.content {
    display: grid;
    justify-content: center;
}
.content1 {
    display: grid;
    justify-content: center;
}
.content1 h1 {
    font-size: 25px;
}
.content2 {
    display: grid;
    justify-content: center;
}
.content2 h1 {
    font-size: 25px;
}
.content3 {
    display: grid;
    justify-content: center;
}
.content3 h1 {
    font-size: 25px;
}
.experiences {
    margin-top: 50px;
}
.content4 h1 {
    font-size: 20px;
    margin-bottom: 5px;
}
.content5 h1 {
    font-size: 20px;
    margin-bottom: 5px;
}
.content6 h1 {
    font-size: 20px;
    margin-bottom: 5px;
}
.content7 h1 {
    font-size: 20px;
    margin-bottom: 5px;
}
.content1 p {
    line-height: 10px;
}
.content2 p {
    line-height: 10px;
}
.content3 p {
    line-height: 10px;
}
.content4 p {
    margin-right: 50px;
    font-size: 13px;
}
.content5 p {
    margin-right: 50px;
    font-size: 13px;
}
.content6 p {
    margin-right: 50px;
    font-size: 13px;
}
.content7 p {
    margin-right: 50px;
    font-size: 13px;
}
.education {
    height: 514px;
    width: 629px;
    background: black;
    display: flex;
    justify-content: center;
    align-items: start;
    padding: 20px 20px 20px 30px; 
    color: white;
}
.box-line2 {
    margin-left: 40px;
    margin-top: 0px;
}
.box-line2 h1 {
    height: 500px;
    width: 5px;
    background: white;
    
}
.box-line2 h2 {
    height: 5px;
    width: 150px;
    background: white;
    margin-right: -175px;
}
.box-line2 h3 {
    height: 5px;
    width: 150px;
    background: white;
    margin-right: -175px;
    
}
.box-line2 h4 {
    height: 20px;
    width: 5px;
    background: white;
    margin-left: 150px;
    margin-bottom: -20px;
}
.box-line2 h5 {
    height: 20px;
    width: 5px;
    background: white;
    margin-left: 150px;
    margin-top: -20px;
}
.box-line2 h6 {
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background: white;
    margin-left: 147px;
    margin-bottom: -30px;
}
.box-line2 p {
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background: white;
    margin-left: 147px;
    margin-top: -30px;
}
.contentt {
    margin-left: -40px;
    margin-top: 5px;
}
.educations {
    display: flex;
    flex-direction:column-reverse;
    margin-top: 60px;
}
.scroll3 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 280px;
    margin-right: -15px;
}
.scroll3 i {
    margin-top: 20px;
}
.box4 {
    background-color: black;
    margin-bottom: 50px;
    margin-top: 50px;
}
.icons4 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
}
.box-contain6 {
    display: flex;
}
.box-container4 {
    height: 50px;
    background: black;
    padding: 15px 0px 0px 30px;
}
.menu4 {
    display: flex;
    justify-content: space-between;
    
}
.menu4 h1 {
    font-size: 20px;
    color: white;
}
.sub-menu4 {
   display: flex;
   margin-left: 110px;
   margin-right: 0px;
   margin-top: -30px;
}
.sub-menu4 a {
   display: flex;
   margin-right: 50px;
   text-decoration: none;
   color: white;
   margin-top: 30px;
   
}
.box-container5 {
    height: 514px;
    width: 629px;
    background: black;
    display: flex;
    justify-content: start;
    color: white;
    padding-left: 30px;
}
.small-box3 {
    height: 235px;
    width: 300px;
    background: black;
    margin-left: 190px;
    padding: 10px 10px 10px 20px;
}
.small-box3 .fa-hands-holding-circle {
    font-size: 25px;
    margin-left: 20px;
}
.small-box3 p {
    font-size: 12px;
    margin-left: 10px;
    margin-right: 80px;
    margin-bottom: 5px;
}
.small-box3 .fa-caret-right {
    font-size: 15px;
    margin-right: 5px;
}
.small-box3 h1 {
    font-size: 14px;
}
.small-box3 h2 {
    font-size: 14px;
    margin-bottom: 5px;
}
.small-box3 h5 {
    font-size: 14px;
    margin-bottom: 5px;
}
.small-box3 h6 {
    font-size: 12px;
    font-weight: normal;
    margin-left: 10px;
}
.small-box3 img {
    height: 200px;
    width: 200px;
    margin-left: 200px;
    margin-top: -240px;
    
}

.small-box4 {
    height: 235px;
    width: 300px;
    background: black;
    margin-left: 190px;
    padding: 10px 10px 10px 20px;
}
.small-box4 .fa-hands-holding-circle {
    font-size: 25px;
    margin-left: 20px;
}
.small-box4 p {
    font-size: 12px;
    margin-left: 10px;
    margin-right: 80px;
    margin-bottom: 5px;
}
.small-box4 .fa-caret-right {
    font-size: 15px;
    margin-right: 5px;
}
.small-box4 h1 {
    font-size: 14px;
}
.small-box4 h2 {
    font-size: 14px;
    margin-bottom: 5px;
}
.small-box4 h5 {
    font-size: 14px;
    margin-bottom: 5px;

}
.small-box4 h6 {
    font-size: 12px;
    font-weight: normal;
    margin-left: 10px;
}
.small-box4 img {
    height: 200px;
    width: 200px;
    margin-left: 200px;
    margin-top: -240px;
    
}
.small-box5 {
    height: 235px;
    width: 300px;
    background: black;
    margin-left: 190px;
    padding: 10px 10px 10px 20px;
}
.small-box5 .fa-hands-holding-circle {
    font-size: 25px;
    margin-left: 20px;
}
.small-box5 p {
    font-size: 12px;
    margin-left: 10px;
    margin-right: 80px;
    margin-bottom: 5px;
}
.small-box5 .fa-caret-right {
    font-size: 15px;
    margin-right: 5px;
}
.small-box5 h1 {
    font-size: 14px;
}
.small-box5 h2 {
    font-size: 14px;
    margin-bottom: 5px;
}
.small-box5 h5 {
    font-size: 14px;
    margin-bottom: 5px;
}
.small-box5 h6 {
    font-size: 12px;
    font-weight: normal;
    margin-left: 10px;
}
.small-box5 img {
    height: 200px;
    width: 200px;
    margin-left: 200px;
    margin-top: -240px;
    
}
.small-box6 {
    height: 235px;
    width: 300px;
    background: black;
    margin-left: 190px;
    padding: 10px 10px 10px 20px;
}
.small-box6 .fa-hands-holding-circle {
    font-size: 25px;
    margin-left: 20px;
}
.small-box6 p {
    font-size: 12px;
    margin-left: 10px;
    margin-right: 80px;
    margin-bottom: 5px;
}
.small-box6 .fa-caret-right {
    font-size: 15px;
    margin-right: 5px;
}
.small-box6 h1 {
    font-size: 14px;
}
.small-box6 h2 {
    font-size: 14px;
    margin-bottom: 5px;
}
.small-box6 h5 {
    font-size: 14px;
    margin-bottom: 5px;
}
.small-box6 h6 {
    font-size: 12px;
    font-weight: normal;
    margin-left: 10px;
}
.small-box6 img {
    height: 200px;
    width: 200px;
    margin-left: 200px;
    margin-top: -240px;
    
}
.smallbox {
    display: grid;
    grid-template-columns: auto auto;
    
}

.box-container6 {
    height: 514px;
    width: 629px;
    background: green;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    color: white;
}



.small-box7 {
    height: 235px;
    width: 300px;
    background: black;
    margin-right: 100px;
    padding: 10px 10px 10px 20px;
    margin-left: 150px;
}
.small-box7 .fa-hands-holding-circle {
    font-size: 25px;
    margin-left: 20px;
}
.small-box7 p {
    font-size: 12px;
    margin-left: 10px;
    margin-right: 80px;
    margin-bottom: 5px;
}
.small-box7 .fa-caret-right {
    font-size: 15px;
    margin-right: 5px;
}
.small-box7 h1 {
    font-size: 14px;
}
.small-box7 h2 {
    font-size: 14px;
    margin-bottom: 5px;
}
.small-box7 h5 {
    font-size: 14px;
    margin-bottom: 5px;
}
.small-box7 h6 {
    font-size: 12px;
    font-weight: normal;
    margin-left: 10px;
}
.small-box7 img {
    height: 200px;
    width: 200px;
    margin-left: 150px;
    margin-top: -240px;
    
}
.small-box8 {
    height: 235px;
    width: 300px;
    background: black;
    margin-left: 150px;
    padding: 10px 10px 10px 20px;
}
.small-box8 .fa-hands-holding-circle {
    font-size: 25px;
    margin-left: 20px;
}
.small-box8 p {
    font-size: 12px;
    margin-left: 10px;
    margin-right: 80px;
    margin-bottom: 5px;
}
.small-box8 .fa-caret-right {
    font-size: 15px;
    margin-right: 5px;
}
.small-box8 h1 {
    font-size: 14px;
}
.small-box8 h2 {
    font-size: 14px;
    margin-bottom: 5px;
}
.small-box8 h5 {
    font-size: 14px;
    margin-bottom: 5px;
}
.small-box8 h6 {
    font-size: 12px;
    font-weight: normal;
    margin-left: 10px;
}
.small-box8 img {
    height: 200px;
    width: 200px;
    margin-left: 200px;
    margin-top: -240px;
    
}

.scroll4 {
   display: flex;
   flex-direction: column;
   float: right;
   margin-top: 280px;
   margin-left: 200px;
}
.scroll4 i {
    padding-top: 10px;

}
.smallboxx {
    
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 30px;
}

.box5 {
    background-color: black;
    margin-bottom: 50px;
    margin-top: 50px;
    height: 100vh;
}
.box-container7 {
    height: 50px;
    background: black;
    padding: 15px 0px 0px 30px;
}
.menu5 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    
}
.menu5 h1 {
    font-size: 20px;
    color: white;
}
.sub-menu5 {
   display: flex;
   margin-left: 10px;
   margin-top: -30px;
}
.sub-menu5 a {
   display: flex;
   margin-right: 50px;
   text-decoration: none;
   color: white;
   margin-top: 30px;
   margin-right: 50px;
}
.details5 span {
    margin-left: 40px;
}
.box-contain5 {
    display: flex;
    
}
.box-container8 {
    height: 314px;
    width: 529px;
    background: black;
    display: flex;
    justify-content: space-evenly;
    color: white;
    margin-top: 100px;
}
.icons5 {
    display: flex;
    flex-direction: column;
    margin-top: 200px;
    margin-right: 100px;
    gap: 20px;
}
.details5 h1 {
   margin-top: 100px;
   margin-bottom: 30px;
   margin-right: 120px;
    font-size: 25px;
}
.details5 p {
   margin-top: 50px; 
   font-size: 18px;
}
.details5 i {
   margin-right: 20px; 
}
.box-contain7 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.box-container9 {
    height: 514px;
    width: 729px;
    background: black;
    padding: 30px 20px 30px 30px;
    display: grid;
    color: white;

}
.email button {
    padding: 10px;
    padding-left: 30px;
    padding-right: 70%;
    border-radius: 20px;
    border: 2px solid white;
    margin-top: 60px;
    color: gray;
}
.name button {
    padding: 10px;
    padding-left: 30px;
    padding-right: 70%;
    border-radius: 20px;
    border: 2px solid white;
    margin-top: 40px;
    color: gray;
}
.message button {
    padding:20px 0px 80px 0px;
    padding-left: 30px;
    padding-right: 67%;
    border-radius: 20px;
    margin-top: 40px;
    color: gray;
    border: 2px solid white;
}
.scroll5 {
    display: grid;
    grid-template-columns: auto;
    justify-content: flex-end;
    align-items: flex-end;
    margin-top: -50px;
}
.scroll5 i {
    margin-bottom: 10px;
}
@media only screen and (min-width:601px) and (max-width:900px) {
    .container {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        
    }
    .box {
    min-height: 650px;
    min-width: 600px;
    }
    .box1 {
        min-height: 135vh;
    }
      .box1 img{
        margin-top: 10px
    }
     .icons1 {
        margin-right: 10px;
    }
    .scroll1 {
        margin-top: 30px;
        margin-right: 8px;
    }
    .box2 {
    min-height: 1450px;
    min-width: 600px;
    }
   
    .box4 {
    min-height: 260vh;
    margin-top: 50px;
    }
    .box-container5 {
        width: 600px;
    }
    .smallbox {
        display: grid;
        grid-template-columns: auto;
        justify-content: start;
        margin-left: -140px;
    }
    .small-box3 {
        margin-top: 30px;
       
    }
    .small-box4,.small-box5,.small-box6,.small-box7 {
        margin-top: 50px;
       
    }
    .box5 {
        margin-top: 150vh;
        min-width: 600px;
        
    }
    .menu5  {
        margin-right: -20px;
        margin-top: 15px;
    }
    .score1 {
        margin-right: 200px;
    }
    .menu1 {
        display: flex;
        flex-wrap: wrap;
        justify-content:space-between;
        align-items: center;
    }
     .menu2 {
        display: flex;
        flex-wrap: wrap;
        justify-content:space-between;
        align-items: center;
    }
    .menu3 {
        display: flex;
        flex-wrap: wrap;
        justify-content:space-between;
        align-items: center;
        
    }
    
    .menu4 {
        display: flex;
        flex-wrap: wrap;
        justify-content:space-between;
        align-items: center;
    }
    .menu1 h1 {
        margin-right: 20px;
        font-size: 15px;
        margin-top: 30px;
    }
    .menu2 h1 {
        margin-right: 20px;
        font-size: 15px;
    }
    .menu3 h1 {
        margin-right: 20px;
        font-size: 15px;
        margin-top: 30px;
    }
    .menu4 h1 {
        margin-right: 20px;
        font-size: 15px;
        margin-top: 30px;
    }
    .sub-menu1 {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: start;
        padding-top: 30px;
  
    }
    
    .photo1 img {
        margin-left: -30px;
    }
    .photo2 img {
        margin-left: -650px;
        margin-top: 830px;
        
    }
    .small-box1 img,.small-box2 img,.small-box3 img,.small-box4 img{
        min-width: 280px;
    }
    
    .scroll2 {
        margin-top: 100vh;
        margin-bottom: -225vh;
    }
    .menu2 h1 {
        margin-top: 0px;
        margin-bottom: 40px;
    }
    .box2 h1 {margin-top: 40px;
    }
    .box2 button {
        height: 40px;
        width: 150px;
    }
    .score2 {
        margin-right: 300px;
        
    }
    
    .Role h1, .Role p {
        margin-left: -20px;
    }
    .icons1 {
        margin-left: -10px;
    }
    .icons2 {
        margin-left: -10px;
    }
    .scroll1 {
        margin-top: 340px;
    }
    .scroll2 {
        margin-top: 40px;
        margin-left: -80px;
    }
    
    .sub-menu2 {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: start;
  
    }
    .sub-menu4 {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: start;
  
    }
    .sub-menu5 {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: start;
  
    }
    .sub-head1 {
        margin-left: 20px;
    }
    .sub-menu1 a {
        margin-right: 40px;
    }
    .sub-menu2 a {
        margin-right: 40px;
    }  
    .box-contain3 {
        display: grid;
        justify-content: start;
        align-items: center;
    }
    .sub-menu3 {
       margin-left: 110px;
       margin-top: -17px;
    }
    .sub-menu4 a {
        padding-top: 0px;
        margin-right: 40px;
        margin-top: 10px;
    } 
    .sub-menu5 a {
        padding-top: 0px;
        margin-right: 30px;
        margin-top: 30px;
    } 
    
    .box-contain6 {
        display: grid;
        justify-content: start;
        align-items: center;
    }
    .box3 {
        height: 1200px;
        min-width: 600px;
    }
    .experience {
        width: 300px;
        margin-top: 50px;
        margin-bottom: 0px;
        margin-left: 0px;
    }
    .education {
        margin-top: 50px;
        margin-bottom: 30px;
        padding-left: 20px;
        width: 600px;
    }
    .scroll3 {
        margin-bottom: 0px;
    }
    .educations h1 {
        font-size: 25px;
    }
    .experience h1 {
        font-size: 25px;
    }
    .contentt {
        margin-left: -80px;
    }
    .box-container6 {
        min-width: 600px;
    }
    .box-container7 {
        width: 600px;
    }
     .box-container8 {
        width: 600px;
    }
    .box-container9 {
        width: 600px;
    }
    .experience {
        width: 600px;
    }
    .box-contain5 {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: center;
        
    }
    
   .box-container8,.box-container9 {
    width: 600px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
   }
   .scroll4 {
    margin-top: 970px;
    margin-left: 180px;
    margin-right: 0px;
   }
   .scroll5 {
    margin-top: 310px;
    margin-right: 0px;
   }
   .email button,.name button,.message button {
    width: 500px;
   }
   .icons2 {
    margin-top: 150px;
   }
   .small-box5, .small-box6 {
    margin-right: 50px;
    margin-left: 110px;
   }
   
}

@media only screen and (min-width:747px) and (max-width:900px) {
    .sub-menu3 a {
        margin-top: 35px;
    }  
    .scroll4 {
       margin-left: 480px;
    } 
    .scroll5 {
        margin-left: 30px;
    }
     .sub-menu5 a {
        margin-left: 135px;
        margin-right: -100px;
    }  
     
    .small-box1 img,.small-box2 img,.small-box3 img,.small-box4 img{
        min-width: 480px;
    }
    .small-box3 img,.small-box4 img{
        width: 480px;
        margin-right: -100px;
    }
    .email button,.name button,.message button {
    width: 800px;
   }
}
@media only screen and (min-width:707px) and (max-width:900px) {
    .sub-menu4 a {
        margin-top: 55px;
    }   
}
@media only screen and (min-width:707px) and (max-width:900px) {
    .scroll3 {
        margin-right: -270px;
        margin-left: 270px;
    }
    }   


@media only screen and (min-width:300px) and (max-width:600px) {
    .container {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
    }
     .box {
    height: 850px;
    min-width: 300px;
    }
    .box2 {
    height: 1320px;
    min-width: 300px;
    margin-bottom: 50px;
    }
    .box2 p {
        width: 260px;
        
    }
    .box4 {
        margin-top: 50px;
        height: 420vh;
    }
    .small-box3 {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        margin-left: -4px;
        margin-top: 40px;
        background: black;
    }
    .box5 {
        margin-top: 1470px;
        height: 1000px;
        margin-bottom: 0px;
    }
    .box-container9 {
        margin-top: 590px;
        margin-bottom: 40px;
        margin-left: 15px;
    }
    .email button,.name button,.message button {
    width: 250px;
    margin-left: -260px;
   }
     .box3 {
    height: 430vh;
    min-width: 300px;
    }
    .box-contain3 {
        display: flex;
        flex-direction: column;
    }
    .menu1 h1 {
        margin-right: 20px;
        font-size: 15px;
    }
    .sub-menu1 {
        margin-left: 20px;
    }
     .menu2 h1 {
        margin-right: 20px;
        font-size: 15px;
    }
    .menu3 h1 {
        margin-right: 20px;
        font-size: 15px;
    }
    .sub-menu1 {
        margin-top: 50px;
    }
    .sub-menu2 {
        margin-top: 50px;
        margin-left: 30px;
    }
    .sub-menu3 {
        margin-top: 0px;
        display: flex;
        flex-wrap: wrap;
        margin-left: 30px;
    }
    .sub-menu4 {
        display: flex;
        flex-wrap: wrap;
        margin-left: 40px;
    }  
    .box-container7 {
        min-width: 300px;
    }
    
    .experience {
        height: 2000px;
        margin-top: 50px;
        margin-bottom: 170px;
        padding-left: 20px;
        background: black;
    }
    .experience h1 {
        font-size: 20px;
        margin-top: 30px;
        margin-right: -10px;
        
    }
    .box-line1 h1 {
        margin-top: -5px;
        height: 870px;
    }
    .box-line1 h3 {
        width: 150px;
        margin-left: -150px;
    }

    .box-line1 h2 {
        width: 150px;
        margin-left: -145px;
    }
    .box-line1 h4 {
    height: 20px;
    width: 5px;
    background: black;
    margin-left: -150px;
    margin-bottom: -20px;
}
.box-line1 h5 {
    height: 20px;
    width: 5px;
    background: white;
    margin-left: -150px;
    margin-top: -20px;
}
.box-line1 h6 {
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background: white;
    margin-left: -152px;
    margin-bottom: -30px;
}
.box-line1 p {
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background: white;
    margin-left: -152px;
    margin-bottom: -30px;
}
    .education {
        height: 2000px;
        margin-top: 100px;
        margin-bottom: 300px;
        padding-left: 20px;
        background: black;
    }
     .education h1 {
        font-size: 20px;
        margin-top: 30px;
        margin-right: -10px;
    
    }
    .box-line2 h1 {
        margin-top: -5px;
        height: 1000px;
        margin-right: -30px;
    }
    
    .content1 button {
        width: 160px;
        padding: 10px;
    }
    .content1 p {
        line-height: 20px;
    }
    .content2 button {
        width: 160px;
        padding: 10px;
    }
    .content2 p {
        line-height: 20px;
    }
    .content3 button {
        width: 160px;
        padding: 10px;
    }
    .content3 p {
        line-height: 20px;
    }
    .icons1 {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 20px;
    margin-top: 60px;
    margin-left: 60px;
    
}
   .icons2 {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 20px;
    margin-top: 60px;
    margin-left: 60px;
}
 .icons3 {
    padding-top: 300px;
}
.icons4 {
    margin-top: -390px;
    background: none;
}

.smallbox {
    margin-top: 150px;
    display: grid;
    background: black;
}
.small-box3 {
    margin-top: 0px;
    margin-left: -50px;
}

.small-box3 img {
    margin-top: 260px;
    margin-left: -260px;
}
.small-box4 {
    margin-top: 470px;
    margin-left: -300px;
    
}
.small-box4 img {
    margin-top: 20px;
    margin-left: 10px;
    height: 160px;
}
.small-box5 {
    margin-top: 200px;
    margin-left: -50px;
}
.small-box5 img {
    margin-top: 20px;
    margin-left: 12px;
    height: 160px;
}
.small-box6 {
    margin-top: 640px;
    margin-left: -297px;
}
.small-box6 img {
    margin-top: 20px;
    margin-left: 12px;
    height: 160px;
}
.box-container5 {
    background: black;
}

.icons5 {
    display: grid;
    margin-top: 0px;
    margin-left: -80px;
    margin-top: -70px;
}
.education {
    margin-top: 40px;
}
.content4 button {
        width: 160px;
        padding: 10px;
        margin-right: 50px;
    }
    .content4 p {
        line-height: 20px;
    }
    .content5 button {
        width: 160px;
        padding: 10px;
        margin-right: 50px;
    }
    .content5 p {
        line-height: 20px;
    }
    .content6 button {
        width: 160px;
        padding: 10px;
        margin-right: 50px;
    }
    .content6 p {
        line-height: 20px;
    }
    .content7 button {
        width: 160px;
        padding: 10px;
        margin-right: 50px;
    }
    .content4,.content5,.content6,.content7 {
        margin-left: -80px;
    }
.sub-head1 {
   margin-top: 20px;
   
}
.sub-head1 h1 {
   margin-left: -30px;
   
}
    .photo1 img {
        margin-top: 60px;
        margin-left: -237px;
        min-width: 300px;
    }
    .photo2 img {
       
        margin-top: 60px;
        margin-left: -250px;
        width: 350px;
    }
    .scroll2 {
        margin-top: 1050px;
        margin-left: -50px;

    }
    .scroll4 {
        margin-left: -20px;
        margin-top: 365vh;
    }
    .scroll2 i {
        margin-right: 250px;
    }
    .details1 {
        min-width: 240px;
        margin-top: 20px;
    }
    .details1 h5 {
        min-width: 50px;
    }
    .details1 h6 {
        width: 150px;
    }
    
    .box2 button {
        padding: 20px;
        margin-left: 10px;
        min-width: 200px;
    }
    .About1 {
        margin-top: 550px;
        margin-left: -300px;
    }
    .About2 {
        margin-top: 550px;
        margin-left: 0px;
    }
    .scroll1 {
        margin-top: 580px;
        margin-left: 0px;
    }
    
     .Role {
        margin-top: 600px;
        margin-left: -190px;
    }
    .Role h1 {
        margin-right: 40px;
    }
    .score1 {
        margin-left: -240px;
        width: 270px;
    }
    .scroll3 {
        margin-top: 165vh;
        margin-left: -20px;
    }
    .scroll5 {
        margin-top: 330px;
    }
    .sub-head1 {
        margin-left: 300px;
    }
    .details1 {
        margin-left: 250px;
        margin-top: -30px;
    }
   .experience {
        height: 150vh;
        width: 300px;
    }
    .education {
        height: 150vh;
        width: 300px;
    }
    .details5 {
        margin-left: 30px;
    }
    .details5 h1 {
        margin-right: -15px;
    }
    .email,.name,.message {
        padding-left: 20px;
    }
    .sub-menu5 {
        display: flex;
        flex-wrap: wrap;
        margin-top: 10px;
    } 
    .box-contain5 {
        background: black;
    }
    }