*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    font-family: Arial, sans-serif;
    background-color: #0e0e1a;
    color: white;
}
.main{

}
header{
    border: 1px solid black;
    background-color: #e74c3c;
}
.navbar{
   width: 100%;
    display: flex;
    justify-content: space-between ;
    align-items: center;
    padding: 20px;
    position: fixed;
    background-color: red;
    
}
.navbar h1:hover{
    text-shadow: 0 0 20px rgba(0, 255, 255, 0.8), 0 0 30px rgba(0, 255, 255, 0.6), 0 0 40px rgba(0, 255, 255, 0.4);
}
.navbar ul{
    list-style: none;
    display: flex;
    gap: 20px;
    text-decoration: none;
}
.navbar li a{
    color: white;
    text-decoration: none;
    font-size: 16px;
}
.hero{
    text-align: center;
    padding: 50px;
    margin-top: 50px;
}
.hero h1{
    font-size: 36px;
}
.hero p {
    max-width: 600px;
    margin: auto;
    text-align: center;

}
.hero img {
    border-radius: 50%;
    margin-top: 20px;
}

.about {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 50px;
}
.about img {
    width: 250px;
    border-radius: 15px;
}
.about-content {
    width: 50%;
}
.about-content ul {
    list-style: none;
    padding: 0;
}
.about-content ul li {
    margin-bottom: 10px;
    margin-top: 20px;
}
button {
    background-color: red;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 10px;
    margin-top: 10px;
}
footer {
    text-align: center;
    padding: 20px;
    background-color: #222;
}
footer b{
    color: red;
}
<!-- ------------------------------------------------------------------ -->
.whole3{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
    
}
#portfolio{
    margin-left: 50%;
}
.ab{
    display: flex;
    gap: 10px;
    margin-left: 45%;
    
}
.a2{
    background-color: #00abf0;
    border-radius: 10px;
    padding: 1px 5px;
}
.a1{
    background-color: white;
    color: black;
    border-radius: 10px;
    padding: 1px 5px;
}
.whole{
    margin-top: 20px;
}
.image2{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 40px;


}
.image2 img{
    border: 2px solid white;
    height: 300px;
    width: 400px;
}
 /* ----------------------------- */
.follow
{
    display: flex;
    gap: 40px;
    margin-top: 30px;
    margin-left: 90px;
}
.f1{
   
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 280px;
    height: 110px;
    border: 1px solid white;
}
/* ----------------------------------------- */
.whole4
{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
}

}

.imgg
{
    width: 1300px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
}

.img1{
    height: 400px;
    width: 350px;
}

.img1 img{
    width: inherit;
}
/* ---------------------------------------- */
.whole4{
    display: flex;
    justify-content: center;
    text-align: center;
    flex-direction: column;
}

.whole4 input{
    background-color:transparent;
    
}

.whole4 form{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 5px;
    outline: white;
}
.in1 input{
    height: 30px;
    width: 1015px;
    color: white;
}

.in2 input{
    height: 30px;
    width: 500px;
    color: white;
}

.whole4 textarea{
    color: white;
    height: 100px;
    width: 1015px;
    background-color: transparent;
}

button{
    background-color: transparent;
    color: #00abf0;
    height: 30px;
    width: 105px;
    border-radius: 10px;
}
button:hover{
    background-color: #00abf0;
    color: white;

}


.whole5 p{
   height: 30px;
   width: 1510px;
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
   background-color: #cb3a19;
   margin: 0;
   font-size: medium;
}