*{
    scroll-behavior: smooth;
}
.icon-nav{
    color: #FF7F50;
}
.progress{
    background-color: #d5d9dd;
}
.navbar{
    background-color:  #FF7F50;
    box-shadow: 0 0 15px 5px rgb(0 0 0 / 30%);
}
.nav-link{
    color: 	#008080 !important;
    font-size: 25px;
    font-family: 'Anton', sans-serif;

}
.navbar-brand1{
    height: 40%;
    width: 40% ;
}
.navbar-toggler{
    padding: 0.25rem 0.75rem;
    font-size: 1.25rem;
    line-height: 1;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 0.25rem;
}
.navbar-nav{
    margin-right: 10%;
}
.nav-item{
    margin-right: 10%;
    margin-left: 10%;
}
.header{
    height: 90vh !important;
    background: url("../images/header-bc.jpg") no-repeat;
    background-attachment: fixed;
    background-size: cover;
}
.header1{
    height: 90vh !important;
    background-color: #0080807c;
}
.container{
    color: #008080;
    /* padding-top: 10vh; */
    font-family: 'Montserrat', sans-serif;

}
.top{
    padding-top: 10vh;
}
.newbie{
    margin-top: 25vh;
    padding-bottom: 10vh;
}
.newbie1{
    margin-top: 3vh;
}
.nav-link:hover{
    text-decoration: underline;
    transform: scale(1.06);
    transition:ease-in-out 0.5s;

}
.nav-link:active{
    text-decoration: underline;
}
#skills{
    /* height: 88vh !important; */
    /* margin-top: 5vh !important; */
    /* background-color: #ff7f50c7 !important; */
    color: teal;
    /* background-color: #999; */
    margin-top: -30vh;;
}
@media only screen and (max-width: 768px){
    #skills{
        margin-top: auto;
    }
}

.svg{
    /* height: 10vh !important; */
    width: auto;
    /* background-image: url("/images/"); */
}
.MySkills{
    /* margin-top: -5vh !important; */
   justify-content: center;
   display: flex;
   color: teal;
}
.skil{
    padding-top: 3vh;
    display: flex;
    justify-content: center;
    font-family: 'Montserrat', sans-serif;
    align-items: center;
    margin-left: 20vh;
    margin-right: 20vh;
    text-align: center;
}
.progress-bar{
    background-color: #Ff7F50;
}
.container1{
    margin-left: 25vh;
    margin-right: 25vh;
    padding-top: 10vh;
}
.newbie2{
    padding-top: 4vh;
}
.progress{
    margin-top: 2vh;
    margin-bottom: 3vh;
}
.naya{
    text-align: right;
}
.naya1{
    /* background-color: #9b9b9b; */
    transform: rotate(180deg);
}
/* #contact{
    height: 88vh !important; 
     background-color: whitesmoke;
    color: teal; 
     margin-top: 10vh;
} */
.project{
    padding-top: 7vh; 
    text-align: center; 
}
#about{
    /* height: 88vh !important; */
    background-color: #ff7f5034;
    color: teal !important;   
}
#about1{
    color: teal !important;
}

.about2{
    /* padding-top: 1px; */
   justify-content: center;
   display: flex;
}
.head-bottom{
    font-size: 20px;
}
.navbar-toggler{
    border-color: teal;
    color: teal;
}
#navbarNav{
    border-color: teal;
    color: teal;
}
.img{
    height: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    /* margin-top: 5vh; */
    border-radius: 100%;
    border: 10px solid whitesmoke;
    box-shadow: 2px 3px 5px black;
    box-sizing: border-box;
}
.about-me{
    margin-top: 10%;
}
.con{
    color: white;
}
@media only screen and (max-width: 768px) {
    .con {
        padding-left: 8vh;
    }
    .header, .header1{
        height: auto !important;
        /* height: fit-content !important; */
    }
  } 
  @media only screen and (max-width: 768px) {
    .naya1{
        transform: rotate(0deg);
    }
    .naya{
        text-align: left;
    }
  }
  @media only screen and (max-width: 425px) {
    .con {
        padding-left: 2vh;
        font-size: 30px;
    }
  }

#contac{
    
    /* background-image: url("/images/skills.jpg"); */
    background-attachment: fixed;
    background-size: cover;
    color: rgb(0, 128, 128) !important;
}
#contact{
    /* background-color: #0080807c; */
    background-color: rgba(0, 128, 128);
}
h3 {
    text-transform: uppercase;
    font-family: 'Quicksand';
    text-align: center;
    /* color: white; */
    color: white;
    /* font-weight: 5000 !important; */
    font-size: 2.5rem;
}
span {
    display: block;
    text-align: center;
    color: whitesmoke;
}
hr {
    padding: 0;
    border: none;
    border-top: solid 3px teal;
    text-align: center;
    max-width: 66%;
    margin: 25px auto 30px;
}
.hr-contact{ 
    border-top: solid 3px white !important;
}


.form-wrapper {
    background: teal;
    padding: 15px;
    /* box-shadow: 0px 20px 25px -10px rgba(0, 0, 0, 0.2); */
    transition: opacity 300ms ease-in-out;
}
.form-wrapper:after {
    clear: both;
    display: block;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    content: ".";
    font-size: 0;
}
.form-wrapper.is-sent {
    animation: launch 1.5s ease-in-out;
}


.send-btn {
    background: rgb(241, 233, 233);
    border: none;
    padding: 10px 20px;
    font-size: 1.3em;
    color: teal;
    font-family: 'Raleway';
    /* box-shadow: 0px 10px 15px -5px rgba(0, 0, 0, 0.2); */
    transition: transform 200ms ease-in-out;
}
.send-btn:hover {
    transform: translate(15px, 0px) scale(1.1);
}
@keyframes launch {
    0% {
        opacity: 1;
        transform: translateX(0) scale(1);
   }
    10%, 15% {
        transform: translateX(0) scale(0.5);
   }
    30%, 35% {
        transform: translateX(-20) scale(0.5);
   }
    40%, 70% {
        transform: translateX(100vw) scale(0.5);
   }
    70% {
        opacity: 1;
   }
    71% {
        opacity: 0;
        transform: translateX(100vw) scale(0.5);
   }
    72% {
        opacity: 0;
        transform: translateX(0px) scale(0.5);
   }
    100% {
        opacity: 1;
        transform: translateX(0px) scale(1);
   }
}





h4 {
    font-family: 'Roboto', sans-serif, 'arial';
    font-weight: 400;
    font-size: 20px;
    color: #9b9b9b;
    line-height: 1.5;
}

/* ///// inputs /////*/

input:focus ~ label, textarea:focus ~ label, input:valid ~ label, textarea:valid ~ label {
    font-size: 0.75em;
    color: #999;
    top: -5px;
    -webkit-transition: all 0.225s ease;
    transition: all 0.225s ease;
}

.styled-input {
    float: left;
    /* width: 293px; */
    margin: 1rem 0;
    position: relative;
    border-radius: 4px;
}

@media only screen and (max-width: 768px){
    .styled-input {
        width:100%;
    }
    .styled-input.wide{
        width: 600px !important;
        /* width: auto !important; */
    }
}
@media only screen and (max-width: 700px){
    .styled-input {
        width:100%;
    }
    .styled-input.wide{
        width: 450px !important;
        /* width: auto !important; */
    }
}
@media only screen and (max-width: 426px){
    .styled-input {
        width:100%;
    }
    .styled-input.wide{
        width: 300px !important;
        /* align-items: center !important;
        justify-content: center !important;
        display: flex !important; */
        /* margin-left: 5vh; */
    }
}

@media only screen and (max-width: 321px){
    .styled-input.wide{
        /* margin-left: auto; */
        width: 250px !important;
    }
    
}
.styled-input label {
    color: #999;
    padding: 1.3rem 30px 1rem 30px;
    position: absolute;
    top: 10px;
    left: 0;
    -webkit-transition: all 0.25s ease;
    transition: all 0.25s ease;
    pointer-events: none;
}

.styled-input.wide { 
    width: 700px;
    max-width: 100%;
}


input,
textarea {
    padding: 30px;
    border: 0;
    width: 100%;
    font-size: 1rem;
    background-color: teal;
    border:1px solid white !important;
    color: white;
    border-radius: 4px;
}
label{
    color: white !important;
    /* font-size: 20px;
    font-weight: bold; */
}

input:focus,
textarea:focus { outline: 0; }

input:focus ~ span,
textarea:focus ~ span {
    width: 100%;
    -webkit-transition: all 0.075s ease;
    transition: all 0.075s ease;
}

textarea {
    width: 100%;
    min-height: 12em;
}

.input-container {
    width: 750px;
    max-width: 100%;
    margin: 20px auto 25px auto;
    display: flex;
    align-items: center;
    justify-content: center;
}





input[type=checkbox] + label {
  color: #ccc;
  font-style: italic;
} 

input[type=checkbox]:checked + label {
  color: #f00;
  font-style: normal;
}
footer{
    width: 100%;
    background-color: coral;
    color: teal;
    display: flex;
    align-items: center !important;
    justify-content: center !important;
    height: auto;
}
.footerRow{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding-top: 2vh;
    padding-bottom: 2vh;
} 
 .footerCol i{
    size: 30px;
    justify-content: center;
    align-items: center;
    /* padding-bottom: 5vh; */
}
.footerCol1{
    font-size: large;
    font-weight: bold;
    padding-top: 1vh;
}
.icons{
    padding-left: 1vh;
    padding-right: 1vh;
    padding-top: 1vh;
    /* background-color: ; */
    color: teal;
}
.icons:hover{
    transform: scale(1.2);
    transition:ease-in 0.5ms;
}