*{
    margin: 0;
    padding: 0;
    font-family: 'Manrope', sans-serif;
    zoom: 1; 
}

html{
    scroll-behavior: smooth;
}

nav{
    display: flex; /* Placing buttons horizontally*/
    margin: auto;  /*Centers the navbar*/
    margin-top: 5%; /*Leaves some space on top*/
    width: 60vw; /*How wide it is based on view port width*/
    background-color: #EDE8E1; /*Background color in hexadecimal system*/
    border-radius: 20px; /*Rounded corners*/
}

nav>ul li{
    list-style: none; /*Removes simple list bullets*/
    cursor: pointer; /*Changes cursor to pointer*/
}

.navs{
    margin:auto; /*Centers the buttons in the navbar*/
    font-size: 1.2em; /*Just font size*/ 
    text-decoration: none; /*Removes unwanted underlinen*/
    padding: 20px; /*Leaves some space on the inside of the button*/
    color: black; /*Color of the text*/
}

.navs:hover{
    background-color: black; /*Changes the color of the button when you hover over it*/
    border-radius: 20px; /*Rounded corners*/
    color: white; /*Changes the original color on hover effect*/
    padding: 10px 20px; /*Adds some padding on hover*/
}

article{
    margin: auto; /*Centers articles in page*/
    margin-bottom: 10%; /*Leaves some space on the bottom of each article*/
}

.title{
    font-weight: 600; /*Bold Letters in Span element*/
    font-size: 1em; /*Font size of Span element*/
}

/*Header Image*/
.backgroundImage{
    width: 100%; /*Size of the Hero section image (100% because its needed to be filling all the page)*/
}

#myBtn {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 40px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: solid #9e8f79; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: #9e8f79; /* Set a background color */
    color: white; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 0; /* Some padding */
    border-radius: 50%; /* Rounded corners */  
    background-image: url(images/svgs/arrow-up-circle-fill.svg); /*Image of the button*/
    background-position: center; /*Rule for the image to be in center*/
    background-size: cover; /*Rule for the image to be shown one time*/
    width: 60px; /*Width of the image*/
    height: 60px; /*Height of the image*/

}
  
#myBtn:hover {
    background-color: #9e8f79; /* Add a dark-grey background on hover */
    background-image: url(images/svgs/arrow-up-circle.svg); /*Image of the button after hovering over it*/
    background-position: center; /*Rule for the image to be in center*/
    background-size: cover; /*Rule for the image to be shown one time*/
}

#keimenoArxikhs{
    margin-top: 5%; /*Leaves some space on the top*/
    font-size: 1.4em; /*Font size */
    text-align: left; /*Text align in the left of the page*/
    width: 80vw; /*Width of the article equal to the 80% of the page (based on viewport width)*/
    padding: 30px; /*Leaves some space around on the inside */
    border-radius: 20px; /*Rounded corners*/
    background-color: #EDE8E1; /*Background color set in hexadecimal system*/
}

#keimenoArxikhs>ul{
    list-style-image: url(images/svgs/book.svg); /*Setting svg as list bullets*/
    
}

.aithousaYpodox{
    display: flex; /*Flexbox*/
    justify-content: center; /*Centered image*/
    margin: 5%; /*Some space from all directions*/
}

.carousel{
    padding: 20px; /*Leaves some space around on the inside */ 
    margin: auto; /*Centers the Images inside the article*/
    width: 70%; /*Size of the images of the carousel*/

}

.infoContainer{
    padding: 20px; /*Leaves some space around on the inside */
    background-color: #EDE8E1; /*Background color set in hexadecimal system*/
    border-radius: 20px; /*Rounded corners*/
    width: 80vw; /*Width of the article equal to 80% (based on the viewport width)*/
}

.infoContainer>ul{
    list-style-image: url(images/svgs/pencil-fill.svg); /*List bullets set to an svg*/
}

.subtitle{
    background-color: white; /*Background color of the title set to white*/
    border-radius: 20px; /*Rounded corners*/
    width: fit-content; /*Rule to fit the title inside its space*/
    padding: 10px; /*Leaves some space around on the inside */
    margin: auto; /*Centers the title*/
    font-size: 1.6em; /*Font size of the title*/
    font-weight: bold; /*Font weight set to bold*/
    
}
.bullets{
    font-size: 1.2em; /*Font size set to em */
    margin-left: 35%; /*Leaves space from the left side*/
}

#map>iframe{
    width: 100%; /*Sets the width of the iframe to 100%*/
}

#map{
    background-color: #EDE8E1; /*Background color set to hexadecimal system*/
    border-radius: 20px; /*Rounded corners*/
    width: 80vw; /*Width of the article equal to 80% (based on the viewport width)*/
    padding: 20px; /*Leaves some space around on the inside */
}

#map>h2{
    background-color: white; /*Background color of the title set to white*/
    border-radius: 20px; /*Rounded corners*/
    margin: auto; /*Centers title in center*/
    width: fit-content; /*Width set to fit content*/
    padding: 10px; /*Leaves some space around on the inside */
    text-align: center; /*Text aligned in center*/
    font-weight: bold; /*Font set to bold*/
}
footer{
    display: flex; /*Flexbox*/
    justify-content: left; /*Everything starts from left*/
    align-items: center; /*All items placed in the center horizontally*/
    gap: 5%; /*Some space between the items*/
    padding: 50px; /*Leaves some space around on the inside */
    background-color: #EDE8E1; /*Background color set to hexadecimal system*/
    margin-top:10%; /*Leaves some space on top*/
    color:black; /*Color of the text set to black*/
    border-radius:30px 30px 0 0; /* Rounds only the top corners*/
}

.footerTitle{
    font-size: 1.5rem; /*Font size set to em*/
    font-weight: bold; /*Fonts set to bold*/
}

#footerPencil{
    width: 100px; /*Sets width of the img*/
}

button{
    border: none; /*Removes default border of buttons*/
    background-color: #EDE8E1; /*Sets background color of the button*/
}

#telephone ,#mapLoc, #mail{
    list-style: none; /*Removes list bullets to none*/
    background-color: #EDE8E1; /*Sets background color of the button to hexadecimal system*/
    width: 50px; /*Sets some width to the buttons*/
    height: 50px; /*Sets some height to the buttons */
    margin: 10px; /*Leaves some space from all directions*/
}

#telephone:hover ,#mapLoc:hover ,#mail:hover{
    background-color: #EDE8E1; /*Does nothing but ensures the color is set to the preferred*/
}

#telephone{
    background-image: url(images/svgs/telephone-fill.svg); /*Changes the image of the button*/
}

#telephone:focus{
    background-image: url(images/svgs/telephone.svg); /*Changes the image when you tap on the button*/
    transition: ease; /*Smooth transition*/
}

#telephone:hover{
    background-image: url(images/svgs/telephone.svg); /*Changes the image when you hover over the button*/
}
#mail{
    background-image: url(images/svgs/envelope-fill.svg); /*Changes the image of the button*/
}

#mail:focus{
    background-image: url(images/svgs/envelope-paper-fill.svg); /*Changes the image when you tap on the button*/
    transition: ease; /*Smooth transition*/
}

#mail:hover{
    background-image: url(images/svgs/envelope-paper-fill.svg); /*Changes the image when you hover over the button*/
}
#mapLoc{
    background-image: url(images/svgs/map-fill.svg); /*Changes the image of the button*/
}

#mapLoc:focus{
    background-image: url(images/svgs/pin-map-fill.svg); /*Changes the image when you tap on the button*/
    transition: ease; /*Smooth transition*/
}

#mapLoc:hover{
    background-image: url(images/svgs/pin-map-fill.svg); /*Changes the image when you hover over the button*/
}

.contact{
    background-color: #EDE8E1; /*Background color of the buttons set to hexadecimal system*/
    cursor: pointer; /*Changes cursor to pointer*/
}
#telInfo{
    background-color: #9e8f79; /*Background color set to hexadecimal system*/
    color: white; /*Color of the letters set to white*/
    border-radius: 20px; /*Rounded corners*/
    padding: 10px; /*Leaves some space around on the inside */
}

#mailInfo{
    background-color: #9e8f79; /*Background color set to hexadecimal system*/
    color: white; /*Color of the letters set to white*/
    border-radius: 20px; /*Rounded corners*/
    padding: 10px; /*Leaves some space around on the inside */
}
#ggLink{
    background-color: #9e8f79; /*Background color set to hexadecimal system*/
    text-decoration: none; /*Removes default underline of anchor tag*/
    color:white; /*Color of the letters set to white*/
    border-radius: 20px; /*Rounded corners*/
    padding: 10px; /*Leaves some space around on the inside */
}

@media(max-width:800px){
    nav{
        width: 80vw;
    }
    .navs{
        font-size: 1em;
    }
    #keimenoArxikhs{
        font-size: 1.2em;
    }
    .ypodoxiImage{
        margin: auto; 
        width: 75vw;
    }
    .bullets{
        margin-left: 20px;
    }
    #map>h2{
        width: 60vw; 
        padding: 15px; /*Leaves some space around on the inside */
        margin-bottom: 5%; 
    }

    .carousel{
        width: 500px; 
    }
}

@media (max-width:450px){
    nav{
        width: 90vw; 
    }

    .infoContainer{
        width: 100%; 
        padding-left: 0;
        padding-right: 0;
    }
    #keimenoArxikhs ,#map{
        width: 100%;
    }

    #map>h2{
        width: 70vw; 
    }

    #carouselExampleFade{
        width: 100%; 
    }

    #mapLoc, #mail, #telephone{
        width: 30px; 
        height: 30px; 
        padding: 10px; 
        background-position: center; 
        background-size: cover; 

    }

    #mailInfo{
        font-size: 0.9em; 
    }
}

@media (max-width:375px){
    nav{
        width: 90vw; 
    }

    #mail{
        margin: 10px; 
    }

    footer{
        padding: 20px; 
    
    }

    #mailInfo{
        font-size: 0.8em; 
    }
}