/* universer tag */
*{
    margin:0;
    padding:0;
    box-sizing:border-box; 
    font-family:Arial, Helvetica, sans-serif;
}
    /* body */
body{
    background: url("imageA.jpg") no-repeat;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    min-height: 100vh;
    color: white;
    overflow-x: hidden;
}
    /* html scrool-behaviour */
html{
    scroll-behaviour: smooth;
}
    /* header tag */
.header{
    width:100%;
    position:fixed;
    top:20px;
    left:0;
    display:flex;
    justify-content:center;
    Z-index:1000;
    
}

    /* Navbar */
.navbar{
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding:18px 25px;
    border-radius:50px;
}

    /* Navigation Menu */
.navLinks{
   text-decoration:none;
   color:white ;
   align-items:center;
   gap:8px;
   padding:12px 20px;
   border-radius:30px;
   font-size:16px;
    
}

    /* Navlinks */
.navLinks:hover{
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: white;
}


.navLinks:hover i{
    color: #ff6b35;
}
   /* section for all page  */
section {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

   /*  */
.homediv{
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding:18px 25px;
    border-radius:25px;
    width: 75%;
    font-size :28px;
}

.homediv h1{
    align-items:center;
    margin:15px 10px 8px 10px;
}
  /* all Span changes */
span{
    color:#ff6b35 ;
}
    /* contact page form  */
.formdiv{
    background:;
    border-radius:25px;
    flex: 1.2;
}
     /* all about contact form page  */
form{
    /* background: #ff6b35; */
    align-items : center;
    justify-content:center;
    padding:9px 20px 9px 20px;
    margin-top:56px;
    margin-left:13px;
    border-radius :25px;
    background: transparent;
    border: 2px solid #ff6b35;
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    box-shadow:0 0 10px rgba(0,0,0,0.2);
}

.formdiv h4{
    font-size:36px;
    text-align:center;
}

.formdiv .input-box{
    width:100%;
    /* height:20px; */
    margin: 15px 0;
}
     /* input form property */
.input-box{
    position: relative;
    width: 100%;
    margin: 20px 0;
}

.input-box input,
.input-box textarea{
    width: 100%;
    background: transparent;
    border: 2px solid #ffffff;
    border-radius: 8px;
    color: white;
    outline: none;
    font-size: 16px;
}

.input-box input{
    padding: 14px 50px 14px 15px;
}

.input-box textarea{
    height: 150px;
    padding: 14px 50px 14px 15px;
    resize: none;
}

.input-box i{
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: #ff6b35;
    font-size: 18px;
    pointer-events: none;
}

.input-box input::placeholder,
.input-box textarea::placeholder{
    color: white;
}
  /* contact page form button */
.formdiv button{
    width:100% ;
    height: 45px;
    background: white;
    border:none;
    outline:none;
    border-radius: 40px;
    box-shadow:0 0 10px rgba(0,0,0,.1);
    cursor:pointer;
    font-size:20px;
    color:#ff6b35;
    font-width:600;
}

.formdiv button:hover{
    background:#ff6b35 ;
    color:white;
}
    /* social handles icon form contact page */
.social-box{
    width: 350px;
    padding: 30px;
    flex:1;
}

.social-box h3{
    font-size: 28px;
    margin-bottom: 10px;
}

.social-box p{
    color: #ffff;
    margin-bottom: 25px;
    line-height: 1.6;
}

.social-box a{
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
    color: white;
    margin: 18px 0;
    font-size: 18px;
    transition: .3s;
}

.social-box a:hover{
    color: #ff6b35;
}

.social-box i{
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.15);
    font-size: 20px;
}

.form-contact{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 50px;
    flex-wrap: wrap;
}
     /* hire me link button & portfolio link button*/
     
.btn111{
    display: inline-block;
    flex: 1;
    height: 45px;
    line-height: 45px;
    background: #ff6b35;
    border: 1px solid #ffffff;
    outline: none;
    border-radius: 40px;
    box-shadow: 0 0 10px rgba(0,0,0,.1);
    cursor: pointer;
    font-size: 26px;
    font-weight: 600;
    color: #ffffff;
    text-align: center;
    text-decoration: none;
    margin-top: 15px;
    transition: .3s ease;
}

.btn111:hover{
    background: #ff7d4d;
    /* transform: translateY(-2px); */
}
 /* flex display for thehire me link button & portfolio link button*/
.btn-box{
    display: flex;
    gap: 20px;
    margin-top: 20px;
}

.btn111{
    flex: 1;
}

    /* footer  */

footer{
    color: white;
    font-weight:600;
    border-radius :25px;
    margin-top:40px;
    text-align:center;
    justify-content:center;
    font-size:25px;
}

footer p{
    text-align:center;
    justify-content:center;
}
   /* footer social icon sections */
.social-box2 i{
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.15);
    font-size: 20px;
}

.social-box2{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    /* flex-direction:column; */
}

.social-box2 a{
    width: 45px;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: #fff;
    transition: .3s;
}
  /* footer social icons*/
footer .social-box2 a:hover{
    color: #ff6b35;
}