#header-img .hbg{
 
    background-image: url('../IMG/header-bg-5.webp');
    
   }
header nav .collapse .navbar-nav .nav-item .nav-link {
 
    transition: .5 ease;
}header{
    background-color: #fff;
}


header nav .collapse .navbar-nav .nav-item .nav-link.sticky {
    color: rgba(0, 0, 0, .5);
}

header nav .collapse .navbar-nav .nav-item .active.sticky {
    color: black;
}

svg {
    position: absolute;
    z-index: -1;
}

#iletisim-iletisim-box {
    width: 100%;
    min-height: 130vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

#iletisim-iletisim-box .container {
    width: 100%;
    height: 100%;
    padding: 2rem 4rem;
    display: flex;
    justify-content: space-between;
}

#iletisim-iletisim-box .container .left-box {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: start;
}

#iletisim-iletisim-box .container .left-box hr {
    width: 70%;
    opacity: .6;
}

#iletisim-iletisim-box .container .left-box .item {
    width: 100%;
    height: auto;
    margin: .5rem 0;
    display: flex;
    flex-direction: column;
}

#iletisim-iletisim-box .container .left-box .adres .header {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
}

#iletisim-iletisim-box .container .left-box .adres .header i,
#iletisim-iletisim-box .container .left-box .adres .header h3 {
    padding: 0 .5rem;
    color: #16B8F3;
    font-size: xx-large;
}

#iletisim-iletisim-box .container .left-box .adres .body p,
#iletisim-iletisim-box .container .left-box .calisma-saatleri-box .body p {
    font-size: medium;
    opacity: .7;
}

#iletisim-iletisim-box .container .left-box .calisma-saatleri-box {
    width: 100%;
    display: flex;
    flex-direction: column;
}

#iletisim-iletisim-box .container .left-box .calisma-saatleri-box .header h4 {
    color: #16B8F3;
}

#iletisim-iletisim-box .container .left-box .tel-faks-mail span {
    display: flex;
}

#iletisim-iletisim-box .container .left-box .tel-faks-mail span p,
#iletisim-iletisim-box .container .left-box .tel-faks-mail span i,
#iletisim-iletisim-box .container .left-box .tel-faks-mail span a {
    font-size: medium;
    padding: 0 5px;
    opacity: .9;
}

#iletisim-iletisim-box .container .left-box .tel-faks-mail span p,
#iletisim-iletisim-box .container .left-box .tel-faks-mail span a {
    opacity: .7;
}

#iletisim-iletisim-box .container .left-box .tel-faks-mail span a {
    text-decoration: none;
    color: #2798DE;
}

#iletisim-iletisim-box .container .right-box iframe {
    /* opacity: .5; */
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    transition: .5s;
}

#iletisim-iletisim-box .container .right-box iframe:hover {
    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    -o-filter: grayscale(0%);
    filter: grayscale(0%);
}

#iletisim-iletisim-box .container .left-box .social-media .body {
    width: 100%;
    display: flex;
    justify-content: start;
    align-items: center;
}

#iletisim-iletisim-box .container .left-box .social-media .body a {
    color: #212121;
    margin: 0 1rem;
}


/* Social Media item*/

#iletisim-iletisim-box .container .left-box .social-media .body a .fa-instagram,
#iletisim-iletisim-box .container .left-box .social-media .body a .fa-linkedin-in,
#iletisim-iletisim-box .container .left-box .social-media .body a .fa-twitter,
#iletisim-iletisim-box .container .left-box .social-media .body a .fa-facebook-f {
    transition: .5s color ease, .5s text-shadow ease, .3s transform ease;
}

#iletisim-iletisim-box .container .left-box .social-media .body a .fa-instagram:hover {
    color: #e4405f;
    text-shadow: 0 0 20px #e4405f;
    transform: scale(1.2);
}

#iletisim-iletisim-box .container .left-box .social-media .body a .fa-twitter:hover {
    color: #55acee;
    text-shadow: 0 0 20px #55acee;
    transform: scale(1.2);
}

#iletisim-iletisim-box .container .left-box .social-media .body a .fa-facebook-f:hover {
    color: #3b5999;
    text-shadow: 0 0 20px #3b5999;
    transform: scale(1.2);
}

#iletisim-iletisim-box .container .left-box .social-media .body a .fa-linkedin-in:hover {
    color: #0077B5;
    text-shadow: 0 0 20px #0077B5;
    transform: scale(1.2);
}

#lottie {
    width: 100px;
    height: 100px;
}


/* #region FORM */

#iletisim-iletisim-box .container .right-box form button {
    margin: 30px 0 0 25px;
}

#iletisim-iletisim-box .container .right-box form input,
#iletisim-iletisim-box .container .right-box form .flex textarea {
    margin: 28px 25px 10px;
}

form h4 {
    width: 100%;
    text-align: center;
    padding-top: 1rem;
}

form {
    font-family: 'roboto', sans-serif;
    width: 460px;
    margin: 100px auto 0;
    box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.2);
    padding: 0 0 40px;
    border-radius: 3px;
    color: #555;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    font: inherit;
    transition: transform 0.3s ease-in-out, font-size 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

input,
textarea {
    font: inherit;
    font-size: 0.8em;
    margin: 28px 25px 10px;
    width: 400px;
    display: block;
    border: none;
    padding: 20px 0 10px;
    border-bottom: solid 1px #03a9f4;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 96%, #03a9f4 4%);
    background-position: -400px 0;
    background-size: 400px 100%;
    background-repeat: no-repeat;
    transition: background 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
    resize: none;
    overflow: hidden;
}

input:focus::-webkit-input-placeholder,
textarea:focus::-webkit-input-placeholder {
    color: #03a9f4;
}

input:focus,
textarea:focus,
input:valid,
textarea:valid {
    box-shadow: none;
    outline: none;
    background-position: 0 0;
}

input:focus::-webkit-input-placeholder,
textarea:focus::-webkit-input-placeholder,
input:valid::-webkit-input-placeholder,
textarea:valid::-webkit-input-placeholder {
    font-size: 0.8em;
    transform: translateY(-20px);
    visibility: visible !important;
    opacity: 1;
}

input[type="email"] {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 96%, #03a9f4 4%);
    background-position: -400px 0;
    background-repeat: no-repeat;
    transition: border-bottom 0.3s ease, background 0.3s ease;
}

input[type="email"]~span.validation-text {
    position: absolute;
    visibility: hidden;
    font-family: 'roboto', sans-serif;
    font-size: 0.6em;
    width: 400px;
    margin-left: 25px;
    margin-top: -5px;
    color: white;
    transition: color 0.3s ease-in-out;
}

input[type="email"]:not([value=""])::-webkit-input-placeholder {
    font-size: 0.8em;
    transform: translateY(-20px);
    visibility: visible !important;
    opacity: 1;
}

input[type="email"]:not([value=""]):focus::-webkit-input-placeholder {
    color: #03a9f4;
}

input[type="email"]:not([value=""]):focus:not(:valid)::-webkit-input-placeholder {
    color: #e91e63;
}

input[type="email"]:focus {
    background-position: 0 0;
}

input[type="email"]:focus:not(:valid):not([value=""]) {
    border-bottom: solid 1px #e91e63;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 96%, #e91e63 4%);
}

input[type="email"]:not(:focus):not(:valid):not([value=""]) {
    border-bottom: solid 1px #e91e63;
    background-position: 0 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 96%, #e91e63 4%);
}

input[type="email"]:not(:focus):not(:valid):not([value=""])::-webkit-input-placeholder {
    color: #e91e63;
}

input[type="email"]:not(:focus):not(:valid):not([value=""])~span.validation-text {
    visibility: visible;
    color: #e91e63;
}

.flex {
    display: flex;
    align-items: stretch;
}

.flex textarea {
    line-height: 120%;
}

form button {
    font-family: 'roboto', sans-serif;
    transition: transform 0.2s cubic-bezier(0.64, 0.09, 0.08, 1), box-shadow 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
    border: none;
    background: #03a9f4;
    cursor: pointer;
    border-radius: 3px;
    padding: 6px;
    width: 400px;
    color: white;
    margin: 30px 0 0 25px;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2);
}

button:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 6px 0 rgba(0, 0, 0, 0.2);
}


/* #endregion */

@media only screen and (max-width: 1000px) {
    #iletisim-iletisim-box .container {
        padding: 2rem 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    #iletisim-iletisim-box .container .left-box .item {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    #iletisim-iletisim-box .container .left-box .item .header,
    #iletisim-iletisim-box .container .left-box .item .body {
        display: flex;
        justify-content: center;
    }
    #iletisim-iletisim-box .container .left-box hr {
        width: 100%;
    }
}