/* blue #3786A6 rgb(29, 104, 154) */

/* black #353531 rgb(53, 53, 49) */

/* grey #434345 (73,73,69) */

/* grey #2D3142 */

/* grey #CED0CE rgb(206, 208, 206) */

/* white */


* {
    scroll-behavior: smooth;
}

body {
    /*    font-family: 'Indie Flower', cursive;*/
    /*    font-family: 'Montserrat', cursive;*/
    /*    font-family: 'Open Sans', sans-serif;*/
    /*    font-family: 'Raleway', sans-serif;*/
    /*    font-family: 'Playfair Display', serif; */
    font-family: 'Poppins', serif;
}

/*navbar*/
.transparent {
    background: #EEE4DB;
}

.navbar-toggler-icon {
    border: 3px solid transparent;
    padding: 10px;
    background-color: #EEE4D6;
}

.navbar-brand,
.navbar-link {
    color: #3786A6!important;
    font-size: 18px;
    padding-right: 20px;
}

.navbar a:hover {
    color:  #f3d8c7!important;
}

.logo {
    width: 180px; 
    height: 57px; 
    display: block; 
}
/*end of navbar*/

header {
    height: 100vh;
    background: url(banner1.jpg), fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/*banner*/
.banner-center {
    height: 100vh;
    color: #3786A6;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.banner-center h1 {
    padding: 0px 60px;
    margin-bottom: 50px;
}

.banner-underline {
    width: 300px;
    border: 3px solid #3786A6;
    margin: 0px auto 20px auto;
}

.banner-center a {
    font-size: 30px;
    width: 220px;
    margin: 50px auto 40px auto;
    display: inline-block;
    background-color: whitesmoke;
    border-color: #3786A6;
    border-style: solid;
    color: #3786A6;
    text-shadow: none;
    text-decoration: none;
    border-radius: 10px;
}

/* .banner-center .bottom-div {
    width: 100%;
    height: 40%;
    position: absolute;
    bottom: 0;
}

.banner-center .bottom-div .left {
    padding-left: 25%;
}

.banner-center .bottom-div .right {
    padding-right: 25%;
}

.banner-center .bottom-div a {
    font-size: 25px;
    width: 220px;
    margin: 50px auto 40px auto;
    display: inline-block;
    background-color: whitesmoke;
    border-color: #3786A6;
    border-style: solid;
    color: #3786A6;
    text-shadow: none;
    text-decoration: none;
    border-radius: 10px;
} */

.banner-center a:hover,
.banner-center a:focus {
    color: whitesmoke;
    background-color: #3786A6;
}
/*end of banner*/

/*title*/
.title {
    margin: 20px 0;
}

.title-underline {
    width: 300px;
    border: 3px solid #3786A6;
    margin: 0px auto 10px auto;
}
/*end of title*/

/*work section*/

#work {
    padding: 10px;
    color: whitesmoke;
    background-color: #3786A6;
}

#work .title-work {
    font-size: 2.0rem;
}

#work .title-work {
    /* width: 700px; */
    border: 3px solid whitesmoke;
    margin: 0px auto 10px auto;
}

#work .work-icons a {
    color: #3786A6;
    text-decoration: none;
}

#work .text-work {
    text-align: justify;
}

#work .pic {
height: 700px;
background: url(work.jpg);
/* background-attachment: fixed; */
background-position-x: 30%;
background-repeat: no-repeat;
background-size: cover;
/* border-bottom: 700px solid transparent; */
/* border-left: 300px solid #3786A6; */
}


#about .box {
display: flex;
flex-direction: column;
justify-content: center;
}
/*end of about section*/


/*services section*/
#services {
    padding: 40px;
    color:  #3786A6;
    /* background-color:  #EEE4D6; */
    background-color:  whitesmoke;
}

#services .title-service {
    font-size: 2.7rem;
}

#services h2 {
    font-size: 1.7rem;
    font-weight: 600;
}

#services article h4 {
    font-size: 1.3rem;
}

#services .fas {
    font-size: 60px;
    margin-bottom: 8px;
}

#services ul {
    list-style: none;
    padding: 10px;
}

#services li {
padding-left: 1.3em;
}

#services li:before {
content: "\f00c";
font-weight: 900;
font-family:"Font Awesome 5 Free";
display: inline-block;
margin-left: -1.3em;
width: 1.3em;
}

#services li {
    text-align: left;
    color: #6c757d!important;
}

#services a {
    margin-bottom: 20px;
    background-color: #3786A6;
    color: whitesmoke;
    font-size: 20px;
    border-radius: 10px;
}

#services a:hover {
    background-color: #CED0CE;
}

#services .middle {
    border-left: 6px solid #3786A6;
    border-right: 6px solid #3786A6;
}

#services button {
    color:  #D4AB89!important;
    font-size: 25px;
    padding-right: 5px;
    text-decoration: none;
}

#services button:hover {
    text-decoration: none;
}

#services button h4 {
    color: #3786A6!important;
    display: inline;
}


#services button h4:hover {
    color: #D4AB89!important;
    display: inline;
}

#services button h6 {
    font-size: 25px;
    margin-left: 10px;
}

/*end of skills section*/

/*about section*/

#about {
    padding: 40px;
    color: whitesmoke;
    background-color: #3786A6;
}

#about .title-about {
    font-size: 2.7rem;
}

#about .title-underline {
    width: 300px;
    border: 3px solid whitesmoke;
    margin: 0px auto 10px auto;
}

#about .about-icons a {
    color: #3786A6;
    text-decoration: none;
}

#about .about-icons a:hover {
    color: whitesmoke;
}

#about .text-about {
    text-align: justify;
}

#about .signature a {
    display: inline;
    text-align: right;
    color: whitesmoke;
}


#about .pic {
height: 700px;
background: url(about.jpg);
/* background-attachment: fixed; */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
/* border-bottom: 700px solid transparent; */
/* border-left: 300px solid #3786A6; */
}


#about .box {
display: flex;
flex-direction: column;
justify-content: center;
}
/*end of about section*/

/*contact section*/
#contact {
    padding: 40px;
    background-color: whitesmoke;
    color: #3786A6;
}

#contact .title-contact {
    font-size: 2.7rem;
}

#contact .form-control {
    border-radius: 0!important;
    font-size: 20px;
}

#contact button {
    background-color: #434345;
    font-size: 24px;
    color: whitesmoke;
    margin-bottom: 20px;
}

#contact button:hover {
    background-color: #CED0CE;
    color: #3786A6;
}

.alert{
    display: none;
}

/*end of contact section*/

/*footer section*/
#footer {
    padding: 40px;
    color: #3786A6;
    background-color:#EEE4DB;
}

#footer h1,
#footer h2,
#footer h3 {
    margin: 20px;
}

#footer .title-footer {
    font-size: 3rem;
}

#footer .title-underline {
    margin-bottom: 40px;
}

#footer .email-text {
    font-size: 1.75rem;
}

#footer .footer-icons-contact {
    font-size: 2rem;
    padding-top: 30px;
}

#footer .footer-icons-contact a {
    color:  #3786A6;
    text-decoration: none;
}

#footer .footer-icons {
    font-size: 3.5rem;
    padding-top: 30px;
}

#footer .footer-icons a {
    color:  #3786A6;
    text-decoration: none;
}

#footer .footer-icons a:hover {
    color: #3786A6;
}

#footer .copyright h6 {
    padding: 40px 0;
    color: #CED0CE;
}
/*end of footer section*/

/*media*/
@media screen and (max-width:850px) {

    .navbar-link {
        font-size: 20px;
    }

    .banner-center a {
        font-size: 30px;
        width: 300px;
        margin: 0px auto 20px auto;
        display: inline-block;
        background-color: #3786A6;
        color: whitesmoke;
        text-shadow: none;
        text-decoration: none;
        border-radius: 10px;
    }

    .banner-center h1 {
        font-size: 30px;
        padding: 0 40px;
        margin: 35px 0px 10px 0px;
    }

    .banner-center .bottom-div .left {
        padding-left: 0%;
    }
    
    .banner-center .bottom-div .right {
        padding-right: 0%;
    }

    #about {
        padding: 20px;
        font-size: 0.9rem;
    }

    #footer .email-text {
        font-size: 1.2rem;
    }
}

@media screen and (max-width:576px) {
    /*
    .navbar-brand {
    font-size: 20px;
    padding-right: 0px;
    margin-right: 0px;
}
    */

    .navbar-link {
        font-size: 20px;
    }

    .banner-center h1 {
        font-size: 30px;
        padding: 0 40px;
    }

    .banner-center .bottom-div .left {
        padding-left: 0%;
    }
    
    .banner-center .bottom-div .right {
        padding-right: 0%;
    }

    #footer .email-text {
        font-size: 1.5rem;
    }

}

/*end of the media*/