@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;500;600;700&family=Raleway:ital,wght@0,200;0,300;0,400;0,500;0,600;0,800;1,200;1,300;1,400;1,500;1,600;1,800&display=swap');
:root {
    --bluedark-color: #0B3954;
    --blueclair-color: #bfd7ea;
    --red-color: #EC0B43;
    --yellow-color: #e0ff4f;
    --white-color: #fff;
}
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
body {
    font-family: 'Raleway', sans-serif;
    line-height: 1.6;
}
 
header{
    display: flex;
    width: 100%;
    height: auto;
}
.botn{
    text-decoration: none;
    background-color: #EC0B43;
    padding: 10px 25PX;
    color: white;
    border-radius: 5px;
    text-align: center;
}
a.botn:hover {
    background-color: var(--bluedark-color);
}


.header-img h1 {
    padding-top: 110px;
    align-items: center;
    font-size: 100px;
    text-transform: uppercase;
    color: white;
}
h2 {
font-size: 30px;
text-transform: uppercase;
color: white;
}
.container {
    width: 80%;
    margin: auto;
    height: 70vh;
    display: flex;
    justify-content: space-between;
}

.flexfoto
{
    width: 100%;
    margin: auto;
    background-color: white;
    height: auto;
    display: inline-flex;
}

#photo {
    height: 300px;
    width: 250px;
    background-image:url(img/sultan-ahmet-mosque-6604492_640.jpg);
    background-size: cover;
    margin: auto;
}
.About
{
    width:80%;
    height: 70vh;
    margin: auto;
    border: solid 5px;
}

.left {
    width: 50%;
    height: 70vh;
    float: left;
    background-image: url(img/istanbul-5202424_640.jpg);
    align-items: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.rigth {
    float: right;
    width: 50%;
    height: 70vh;
    text-align: center;
    display: block;
    padding-top: 15px;
}

.rigth h1 {
    padding-top: 15px;
    font-size: 60px;
    text-transform: uppercase;
    text-align: center;
}

.rigth p {
    border: solid;
    padding-top: 40px;
    height: 40vh;
    width: 70%;
    font-size: 20px;
display: block;
margin: auto;
}

.Footer{
    width: 100%;
    height: 30vh;
    background-color:#bfd7ea;
}

.villes {
    display: flex;
    flex-direction: column;
    text-align: justify;
    width: 80%;
    margin: 0 auto;
    
    
    
}
.general {
    width: 100%;
    height: auto;
    display: flex;
    text-align: center;
    padding: 25PX 10PX;
}


#lyon img{
    width: 300px;
    height: 200px;
}






 /******* navbar *********/
 .navbar {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 1rem 1.5rem;
     background-color: var(--blueclair-color);
 }
 .nav-menu {
     display: flex;
     justify-content: space-evenly;
     align-items: center;
     list-style-type: none;
     height: 90px;
 }
 .hamburger {
     display: none;
 }
 .bar {
     display: block;
     width: 25px;
     height: 3px;
     margin: 5px auto;
     -webkit-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
     background-color: #101010;
 }
 .nav-menu > li > a {
     text-decoration: none;
     color: var(--bluedark-color);
     font-size: 1.3em;
     display: inline-block;
     transition: transform .2s;
 }
 .nav-menu > li > a:hover{
     color: var(--red-color);
     transform: scale(1.1);
 }
 #nav-logo {
     width: 20%;
 }
 .nav-menu {
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 .nav-item {
     margin-left: 5rem;
 }

 .nav-link{
     font-size: 1.6rem;
     font-weight: 400;
     color: #475569;
 }
 .nav-menu > li {
     padding: 30px;
 }
 #nav-home::after {
     font-family: "Font Awesome 5 Free";
     font-weight: 700;
     content: "\f015";
     padding-left: 5px;
 }
 #nav-destination::after {
     font-family: "Font Awesome 5 Free";
     font-weight: 700;
     content: "\f072";
     padding-left: 5px;
 }
 #nav-about::after {
     font-family: "Font Awesome 5 Free";
     font-weight: 700;
     content: "\f0c0";
     padding-left: 5px;
 }
 #nav-contact::after {
     font-family: "Font Awesome 5 Free";
     font-weight: 700;
     content: "\f2b6";
     padding-left: 5px;
 }


 /********** Footer *********/
 footer {
     background-color: var(--blueclair-color);
     height: 40vh;
     margin-top: 100px;
     color: var(--bluedark-color);
 }
 footer p {
     font-size: 16px;
 }
 .top-footer {
     display: flex;
     justify-content: space-evenly;
 }
 .top-footer > div {
     width: calc(100% / 3);
 }
 #left-footer > img {
     width: 15%;
 }
 #left-footer, #right-footer, #center-footer  {
     padding: 30px 20px;
 }
 #center-footer > .address::before {
     font-family: "Font Awesome 5 Free";
     font-weight: 700;
     content: "\f3c5";
     padding-right: 5px;
 }
 #center-footer > .telephone::before {
     font-family: "Font Awesome 5 Free";
     font-weight: 700;
     content: "\f879";
     padding-right: 5px;
 }
 #center-footer > .email::before {
     font-family: "Font Awesome 5 Free";
     font-weight: 700;
     content: "\f0e0";
     padding-right: 5px;
 }
 #center-footer > .appointment::before {
     font-family: "Font Awesome 5 Free";
     font-weight: 700;
     content: "\f073";
     padding-right: 5px;
 }
 .link-footer {
     color: var(--bluedark-color);
     text-decoration: none;
 }
 #center-footer > h6, #right-footer > h6 {
     font-size: 20px;
 }
 #center-footer, #right-footer {
     line-height: 2;
 }
 #all-social {
     display: flex;
 }
 .social-media {
     width: 40%;
 }
 .bottom-footer > p {
     text-align: center;
     font-size: 14px;
 }
 .link-footer {
     font-size: 1em;
     transition: transform .2s;
 }
 .link-footer:hover {
     color: var(--red-color);
     transform: scale(1.1);
 }
 .link-social {
     transition: transform .2s;
 }
 .link-social:hover {
     filter: grayscale(100%);
     transform: scale(1.2);
 }

 .title > h1{
     color: #EC0B43;
     font-family:  'Dancing Script', cursive;
     margin-top: 50px;
     font-size: 3em;
 }

 .description{
     padding: 10px;
 }

 .description p{
     margin-bottom: 15px;
 }

/********** Media Query ***********/
@media only screen and (max-width: 425px) {
    .link-home {
        width: 50%;
    }
    #nav-logo {
        width: 50%;
    }
    .nav-menu {
        position: fixed;
        left: -100%;
        top: 7rem;
        flex-direction: column;
        background-color: var(--blueclair-color);
        width: 100%;
        border-radius: 10px;
        text-align: center;
        transition: 0.3s;
        box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
        height: 400px;
    }
    .nav-menu.active {
        left: 0;
    }
    .nav-item {
        margin-left: 0;
    }
    .hamburger {
        display: block;
        cursor: pointer;
    }
    .hamburger.active .bar:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .hamburger.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }
    footer {
        height: 100%;
    }
    .top-footer {
        display: block;
    }
    .top-footer > div {
        width: 100%;
    }
    .general {
        display: block;
    }

}