*{
    padding:0;
    margin:0;
    --fs:45px;
    --color:white;
    --fontMain:'Black Bruno';
}
body{
    background-color:#222;
    background-image: url('BImage/c9bcc03272a29f065334c711b8da72ec-3591585386.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    box-sizing: border-box;
    color:white;
}

/* ------------------------Menu------------------------- */

#Upper_manu{
    background-color:red;
}
#Upper_manu .logo1{
    background-color:white;

}
#Upper_manu .logo1 img{
    width:100px;
    height:100px;
    margin:15px 0 0 5px;
}

#bottom_menu ul{ 
    height:50px;
    width:100%;
    background-color: black;
    opacity: .7;
    
   }

#bottom_menu ul li{
    list-style: none;
    float:left;
    line-height: 50px;
    min-width: 20px;
    padding:0px 30px;
    
}

#bottom_menu ul li a{
    text-decoration: none;
    color:white;
    font-size: x-large;
    opacity: 1;
    display:block;
      
}

#bottom_menu ul li:hover{
    display:block;
    border-inline-start: 3px solid white;
}

/* ------------------------card------------------------- */

#parant-card-container{
    /* background-color: red; */
    display: flex;
    flex-direction: row;
    align-content: space-around;
    flex-wrap: nowrap;
    overflow-x: scroll;
   
}
#parant-card-container .card{
    background-color: white;
    min-width:400px;
    min-height: 500px;
    color:black;
    text-align: center;
    margin:6px;
}
#parant-card-container .card img{
    width:150px;
    height:150px;
}

/*-------------------------- footer ----------------------- */

/* #footer */

#footer{
    /* background-color: orange; */
    height:200px;
    width:100%;
    display:block;   
    flex-direction: column;
    position: static;
    bottom:0vh;
    align-content: baseline;
}
#downloadDiv{
    width:100%;
    height:20em;
    padding-bottom:20em;
  
}

#Empty-panel{
    display:flex;
    flex-direction: column;
    margin:auto;
    background-attachment: fixed;
    align-items: center;
   }

#Empty-panel button{
    width:130px;
    height:50px;
    align-self: flex-end;
    margin-right:13em;
}
#footer #social{
    max-width:100%;
    background: rgb(20, 20, 20);
    display:flex;
    flex-direction:column;
    align-items: center;
    line-height: 40px;    
}
#footer #social ul li{
    float:left;
    list-style: none;
    text-align: center;
    padding:10px;
    height: 50px;
   
}
#footer #social ul li:hover{

    transform: scale(1.2);
}
#footer #upper-div{
    display: flex; 
     flex-direction: row;
     gap:83%;
}
#upper-div ul li:hover{transform:scaleX(1.1);}
#footer #bottm-div{
    display:flex;
    flex-direction: column;
    padding:10px;
}
#footer #upper-div ul{
    padding-left:20px;
    margin:0;
    
}
#footer #upper-div ul li{
    list-style: none;
}
#footer #upper-div ul li a{
    color:white;
    text-decoration: none;
    font-size: large;
    text-align: center;
    
}
#footer #bottm-div{
    text-align: center;
}


#main{
    display:flex;
    height: 500px;
    align-items: center;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;

}
#change_Text{
    font-size: var(--fs);
}
#main-text{
    font-size: var(--fs);
}
#change_text_directio{
    display:inline;
}

/*============================= Contacts Page ================== */

#Email_sender_div
{
    display:flex;
    flex-direction: column;
    width: 60%;
    margin: auto;
}
#emailOfUser,#nameOfUser {
    width:47%;
    display:block;
    float:left;
    
}
#emailOfUser{
    margin-left:3%;
}
#Email_sender_div h1{
    mix-blend-mode: difference;
}
.floatNamesDiv{
    display: flex;
    flex-direction:column;
}
.floatNamesDiv input{
    border:none;
    margin-bottom:10px;
    height:50px;
    line-height: 50px;
    font-size: large;
    padding-left:10px;
    border-radius: 10px;
    
    
}
.floatNamesDiv input:focus{
    outline:none;
    
}
.floatNamesDiv textarea{
    border: none;
    margin-bottom: 18px;
    font-size: large;
    padding-left: 10px;
    border-radius: 10px;
}

.floatNamesDiv textarea:focus{
    outline:none;
}

article{
    margin:auto;
    margin-bottom:30px;
    margin-top: 20px;
}

#submitBtn{
    width:200px;
    height:50px;
    display: block;
    background-color:antiquewhite;
    font-size: large;
    box-shadow: -2px 2px 11px 4px var(--color);
    border:none;
    
  
}
#submitBtn:hover{
    opacity: 0.9;
}

#response{
    color:silver;
    text-align: center;
}

#Contacts p,h3 ,img{
    margin:10px;
}

/* =============================skills=============== */

/*------------------------- image----------------------------- */
.circleDiv, .circleDiv1, .circleDiv2, .circleDiv3, .circleDiv4, .circleDiv5,.circleDiv6,.circleDiv7,.circleDiv8, .circleDiv9{
    /* border:solid 10px rgb(128, 0, 128); */
    border:solid 10px rgb(128, 0,0);

    width:150px;
    height:150px;
    border-radius:100%;
    margin:auto;
    
    background-image: url("BImage/WEBDEVELOPEMNT.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.circleDiv1{
    border: solid 10px rgb(139, 0, 139);
    background-image: url("BImage/SOFTWAREDEVELOPEMNT.png");

}
.circleDiv2{
    border: solid 10px rgb(153, 50, 204);
    background-image: url("BImage/MICROSOFTOFFICE.png");

}
.circleDiv3{
    border: solid 10px rgb(138, 43, 226);
    background-image: url("Bimage/database-management-image1-1505356713.jpg");
}
.circleDiv4{
    border: solid 10px rgb(186, 85, 211);
    background-image: url("Bimage/OS.png");
    background-position-x: 0px;
    background-position-y: 10px;
}
.circleDiv5{
    border: solid 10px rgb(255, 0, 255);
    background-image: url("Bimage/SOCIALMEDIAINVESTIGATIONS.png");
    background-size: 200px;

}
.circleDiv6{
    border: solid 10px rgb(238, 130, 231);
    background-image: url("Bimage/maintenance.jpg");

}
.circleDiv7{
    border: solid 10px rgb(220, 161, 203);
    background-image: url("Bimage/oporatingSystems.jpg");

}
.circleDiv8{
    border: solid 10px rgb(193, 81, 161);
    background-image: url("Bimage/Ethernet+New-3406853415.jpg");

}
.circleDiv9{
    border: solid 10px  rgb(215, 150, 227);
    background-image: url("Bimage/OSINT.png");

}


/* ---------------------button------------------ */
#centerBTN{
    /* background-color: blue; */
    width: 100%;
    height:50px;
    position: relative;
    bottom:-30%;
    
}
#centerBTN input{
    background-color: black;
    color:white;
    border:none;
    width:90px;
    height: 40px;
}
#IFrameContainer{
    width:80%;
    height:500px;
    background-color: rgba(000, 000, 000, 50%);
    position: absolute;
    top:40px;
    left:100px;
    visibility: hidden;
    
}
#IFrameContainer #delete{
    float:right;
    background-image: url("BImage/delete_26px.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width:28px;
    height:28px;
    background-color:unset;
    border-color: white;
}

/* --------------------------index-------------- */
#change_Text{
    color:orange;
    font-size: xxx-large;
    font-family: var(--fontMain);
    
}
#text-H{
    /* background-color: rgba(000, 000, 000, 50%); */
    width:90%;
    height:400px;
    padding:10px 0 0 50px;
    margin-top:40px;
    margin-left:25px;
    position: relative;
    text-indent: 20px;
    letter-spacing: 5px;
    margin-bottom: 20px;
 
   }
   #text-H::before{
    content:"";
    /* background:rgba(020, 020, 020, 50%); */
    position:absolute;
    /* filter: blur(1%); */
    top:-20px;
    left:-20px;
    right:-20px;
    bottom:-20px;
    background-attachment: fixed;
    
   }

#text-H> h1 {
     font-weight:400;
     position: relative;
     font-size:xx-large;
     display:flex;
     font-family:var(--fontMain);
     align-items: center;
     mix-blend-mode: difference;
    text-shadow:3px 4px 0 rgba(000, 000, 000, 50%);
    
}
#text-H> h1:nth-child(2) {
    margin-top:30px;
    margin-bottom: 0;
    padding:0;
       
}
#text-H> h1:nth-child(3){
    /* background-color: black; */
    padding:0;
    margin:0;
    line-height: 100px;
    height: 100px;
    mix-blend-mode:unset;
    
}




/*==========================about===============*/

.emptyPanel{
    width:100%;
    height:100px;
    /* background-color: lightgray; */
}
#mainAbout{
    /* background-color: rgba(20,010,000,50%); */
    width:800px;
    backdrop-filter: blur(40px);
    height:300px;
    margin-top:20px;
    margin:auto;
    text-align: center;
    padding-top:50px;
    position:relative;
    border-radius:60px 0 60px 0px;
    box-shadow: 6px 6px 10px rgba(124,231,102,30%);
    border:solid;
}
#mainAbout p{
    font-size: large;
}
 #mainAbout::before{
    content: "";
    width:130px;
    height: 130px;

    border: solid 3px white;
  
    border-radius: 50%;
    border-bottom: none;
    border-right: solid 1px;
    border-left:solid 1px;
    position:absolute;
    top:-90px;
    left:40%;
    background: url(BImage/imageME.jpeg);
    background-repeat: no-repeat;
    background-position: -55px -20px;
    background-size:200px;
} 

@media screen and (max-width:600px){
    body{
        /* background-color:orange; */
        background-image: url("BImage/background2.jpg");
        width:auto;
        height:max-content;
        background-size: cover 100%;
    }
    #footer{
        background-color:black ;
        position:fixed;
        height:20%;
        top:auto;
        bottom:0;

    }
    #social{
        margin-top:-38px;
    }
    #text-H{
        text-indent: unset;
        letter-spacing: normal;
 
    }
    #text-H> h1{
        color:rgb(255, 255, 255);
        font-size:medium;
    }
    #text-H h1> span{
        font-size: x-large;
    }
   
    #bottom_menu ul{
        overflow: hidden;
    }
    #bottom_menu ul li a {
        font-size: small;
        
        
    }
    #footer #social{
      flex-direction:unset;
    }
    #footer #social a> img{
        width:30px;
        height: 30px;
    }
    #displayTime{
        /* background-color: red;/ */
        display:inline;
        word-break:break-all;
    }
    #displayTime >h1{
        font-size:50px;
    }
    .floatNamesDiv> form{
    
        display:flex;
        flex-direction: column;       
        
    } 
    .floatNamesDiv form >input{
        min-width:100%;
    }
   
    .floatNamesDiv input{
            display: flex;
            flex-direction:unset;
            width:100%;
    }
    #emailOfUser{
        margin-left:0;
    }
    #mainAbout{
        width:480px;
        margin-bottom:130px;
        overflow: scroll;
        scrollbar-width:thin; 
        scrollbar-color: #fff00000;
    }
    #mainAbout::before{
       content: none;
    }
   
    
}
@media screen and (max-width:1106px) {
    #emailOfUser{
        margin-left:0;
    }
    #Contacts{
        margin-bottom:170px;
    }
}