/*.......Header-bar......*/
#header-bar{
    padding: 7% 15%;
    background-color: black;
    color: whitesmoke;
    font-family: cursive;
}

/*.......Introduction-part......*/
#intro-section {
    padding: 1% 15%;
    background-color: black;
    color: whitesmoke;
    font-family: cursive;
    display: flex;
    align-items: center; /* Center content vertically */
}

.intro-image-col {
    display: flex;
    justify-content: center; /* Center the image */
    align-items: center; /* Align the image in the center */
}

.intro-image {
    max-width: 100%;
    height: auto;
}

.intro-text-header {
    font-size: 4rem;
    line-height: 1.2;
    padding-top: 25%;
    padding-bottom: 15%;
}

.intro-text-paragraph {
    line-height: 2;
}

.anchor-tag {
    font-size: large;
}

/* Media Query for Responsive Design */
@media (max-width: 999px) {
    #intro-section {
        background-image: url('images/profile.jpg'); /* Set the background image */
        background-size: cover; /* Make sure the image covers the entire section */
        background-position: center; /* Center the background image */
        height: 100vh; /* Set height to full viewport height for better effect */
        padding: 15%; /* Adjust padding */
    }

    .intro-text-col {
        color: white; /* Make text color stand out if necessary */
        z-index: 1; /* Make sure text is above background image */
    }

    .intro-image-col {
        display: none; /* Hide the image column */
    }
}

/*------Big-Headers-------*/
.big-header1{
    font-family: cursive;
    padding: 2%;
    outline: thick outset transparent;
    background-color: black;
    color: whitesmoke;
    text-align: center;
    margin-bottom: 25px;

}
.big-header2{
     font-family: cursive;
    padding: 2%;
    outline: thick outset transparent;
    background-color: white;
    color: black;
    text-align: center;
    margin-bottom: 25px;
}
/*---------Experience part---------*/
#experince{
  padding: 7% 15%;  
}
.card-margin{
    margin-bottom: 12px;
}
.text-align{
    text-align: center;
    font-family: cursive;
    
}
.icon{
    color: #040001;
    
}
.icon:hover{
    color:#160e06;
}
.h3-feature{
    font-weight: bold;
}
.skiller{
    font-family:cursive;
    padding: 2% 85% 1% 2%;
}
@media(max-width: 915px){
    .skiller{
        text-align: center;
        padding: 2%;
    }
}
/*------Projects-Section-------*/
#Projects{
    padding: 7% 15%;
    background-color: black;
}
.carousal-text{
    color: white;
    text-align: center;
    padding: 3%;
    font-family: cursive;
}
.publishedProject{
    color: white;
    font-family: cursive;
}
.publishedProject a{
    text-decoration: none;
    color: aliceblue;
}
.publishedProject a:hover{
    color: bisque;
}
/*-----------footer-section----------*/
#footer-message{
    padding: 7% 15%;
    font-family: cursive;
   
}
input[type=text],input[type=email], select, textarea{
    width: 100%;
    padding: 12px;
    border: none;
    border-bottom: 1px solid #ccc;
    border-radius: 4px;
    resize: vertical;
}
label{
    padding: 12px 12px 0;
    display: inline-block;
}
.submit-section{
    background-color: black;
    color: whitesmoke;
    padding: 12px 20px;
    margin-top: 20px;
    border: none;
    border-radius: 4px;
    float: right;
    width: 40%;
}
.submit-section:hover{
    background-color: white;
    color: black;
    border: 1px solid black;
}
.footer-text{
    line-height: 2;
}
.footer-text h3{
    font-size: 3rem;
    padding-bottom: 25px;
}
/*-----last-footer-----*/
.last-ft{
    text-align: center;
    color: white;
    background-color: black;
    padding: 3% ;
}

.footerLink a:hover{
    color: bisque;
    
}
.footerLink a{
    margin: 3%;
    padding: 2%;
    color: white;
}
.footerLink{
    padding: 3%;
}