*{
    margin: 0%;
    padding: 0%;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    scroll-behavior: smooth;
    
}
:root{
    --text-color-first : white;
    --text-color-secondary : rgb(214, 214, 214);
    --color: rgb(243, 131, 2);
    --padding-left-right : 10%;
    --font-size-first : 14px;
    --logo-size : 8px;
    --big-title-size: 45px;
    --medium-title-size: 30px;
    --bg-color-first: black;
    --input-bg-color: rgb(36, 29, 29);
}
html::-webkit-scrollbar{
    width: 10px;

}
html::-webkit-scrollbar-thumb{
    background-color: var(--color);
    border-radius: 5px;
}
html::-webkit-scrollbar-track{
    background-color: transparent;
}
body{
    background-color: black;
}
.container{
    background-color: rgba(0, 0, 0, 0.466);
}
/*styling the logo*/
header .logo{
    font-size: var(--logo-size);
    font-weight: bold;
}
header .logo .first{
    color: var(--text-color-first);
    -webkit-text-stroke: .4px var(--text-color-first);
    transition: .5s;
    cursor: default;
}
header .logo .first:hover{
    color: transparent;
}
header .logo .second{
    color: var(--color);
    -webkit-text-stroke: 1px var(--color);
    transition: .5s;
    cursor: default;
}
header .logo .second:hover{
    color: transparent;
}
/*styling the header*/
header{
    width: 100%;
    background-color: transparent;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px ;
    flex-wrap: wrap;
    position: fixed;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    z-index: 3;
    overflow: visible;

}
/*styling the nav-bar*/
header .nav-bar {
    position: absolute;
    height: 100vh;
    width: 50%;
    top: 0;
    right: -50%;
    opacity: 0;
    background-color: rgb(0, 0, 0);
    padding-left: 5%;
    z-index: 9;
    transition: .5s;
}
/*styling the links inside the nav-bar*/
header .nav-bar ul li,
header .nav-bar ul li a{
    list-style-type: none;
    text-decoration: none;
    font-size: var(--font-size-first);
    margin-top: 20%;
    color: var(--text-color-first);
    transition: .4s;
}
/*styling the social-links*/
header .social-links{
    margin-right: 4vw;
    margin-top: 15px;
    
}
/*styling the links inside social-links*/
header .social-links ul li,
header .social-links ul li a{
    display: inline-block;
    list-style-type: none;
    text-decoration: none;
    margin-right: 1.5vw;
    color: var(--text-color-first);
    font-size: var(--font-size-first);
    transition: .5s;
}
/*styling the bar*/
header .bar{
    display: inline-block;
    cursor: pointer;
    position: absolute;
    right: 10px;
    font-size: 25px;
       top: 25px;
    z-index: 10;
    color: var(--text-color-first);
    transition: .4s;
}
/*styling color while hovering*/
header ul li a:hover,
header .bar:hover{
    color: var(--color);
}
/*styling the home page*/
.home-page{
    height: 100%;
    position: relative;
    padding: 250px 5%;
    background: url(images/Background.png) center no-repeat;
        background-size: cover;
    overflow-x: hidden;
}
.home-page .home-container{
    display: flex;
    flex-direction: column;
    align-items: start;
    flex-wrap: wrap;
    font-size: var(--font-size-first);
    color: var(--text-color-first);
    overflow: visible;
    position: relative;
    left: -50%;
    opacity: 0;
}
.home-page .home-container h1{
    font-size: var(--big-title-size);
    font-weight: bold;
    margin: 10px 0px;
    -webkit-text-stroke: 1px var(--text-color-first);
    transition: .5s;
    cursor: default;
}
.home-page .home-container h1:hover{
    color: transparent;
}
.home-page .home-container  .colored-text{
    color: var(--color);
    letter-spacing: 5px;
}
.information{
    color: var(--text-color-secondary);
}
.home-page .home-container button{
    width: 150px;
    height: 45px;
    margin-top: 30px;
    outline: none;
    border: none;
    background-color: var(--color);
    border-radius: 5px;
    font-weight: 500;
    font-size: var(--font-size-first);
    transition: .5s;
    cursor: pointer;
}
.home-page .home-container button:hover{
    transform: scale(105%);
}
/*styling the information page*/
.circles{
    height: 100%;
    background-color: var(--bg-color-first);
    padding: 100px 0px;
    display: flex;
    justify-content: center;
    gap: 10%;
    flex-wrap: wrap;
    overflow-x: hidden;
}
/*styling the text and circle*/
.circle-container {
    color: var(--text-color-first);
    margin-top: 40px;
    flex-direction: column;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    overflow: visible;
}
.circle-container > p{
    text-align: center;
    margin-top: 20px;
    opacity: 0;
    position: relative;
    transition: 3s linear;
}

.circle{
    height: 100px;
    width: 100px;
    border: none;
    border-radius: 50%;
    position: relative;
    top: 100px;
    opacity: 0;
}
.circle:hover{
    transform: translateY(-15px);
}
/*adding pictures to the circles*/
.circles .c1{
    background: url(images/nap1.jpg) center no-repeat;
    background-size: cover;
    
}
.circles .c2{
    background: url(images/nap2.jpg) center no-repeat;
    background-size: cover;
    
}
.circles .c3{
    background: url(images/nap3.jpg) center no-repeat;
    background-size: cover;
    
}
.circles .c4{
    background: url(images/nap4.jpg) center no-repeat;
    background-size: cover;
    
}
.circles .c5{
    background: url(images/nap5.jpg) center no-repeat;
    background-size: cover;
    
}
/*styling the information page*/
.information-page{
    overflow-x: hidden;
}
.information-page .tours{
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--text-color-first);
    margin-top: 40px;
    
    
}
.information-page .s1 {
    position: relative;
    left: -50%;
    opacity: 0;
}
.information-page .s2 {
    position: relative;
    left: 50%;
    opacity: 0;
}
.information-page .s3 {
    position: relative;
    left: -50%;
    opacity: 0;
}
/*styling the titles*/
.information-page h3{
    color: var(--color);
    word-spacing: 5px;
    letter-spacing: 5px;
}
.tour-information h1{
    margin: 15px 0px;
}
/*styling the tour pictures*/

.information-page .tours .pic{
    width: 300px;
    height: 400px;
    border: none;
    border-radius: 10px;
    margin-bottom: 40px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: .5s;
}



.information-page .tours .pic:hover .shape{
    top: 600px;
}
@keyframes shape{
    0%{
        top: -600px;
    }
    100%{
        top: 600px;
    }
}
@keyframes unshape{
    0%{
        top: 600px;
    }
    100%{
        top: -600px;
    }
}
/*styling the information about tours*/
.tour-information{
    width: 300px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    
}
.tour-information > p{
    color: var(--text-color-secondary);
    font-size: var(--font-size-first);
}
/*styling the reveal button*/

.reveal{
    margin-top: 15px;
    width: 120px;
    height: 40px;
    border-radius: 5px;
    border: none;
    background-color: var(--color);
    transition: .5s;
    cursor: pointer;
}
.tour-information .reveal:hover{
    transform: scale(105%);
}
/*adding images to the tour pics*/
.information-page .tour1{
    background: url(images/Mosque\ II.png) center no-repeat;
        background-size: cover;
        
}
.information-page .tour2{
    background: url(images/Desert.jpg) center no-repeat;
        background-size: cover;
        
}
.information-page .tour3{
    background: url(images/Chefchaouen.jpg) center no-repeat;
        background-size: cover;
        
}
/*revealing the text*/

.information-page .hidden1{
    display: none;
}
.information-page .hidden2{
    display: none;
}
.information-page .hidden3{
    display: none;
}
/*Styling Tours Page*/

.tours-page{
    width: 100%;
    color: var(--text-color-first);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 100px 0%;
    overflow-x: hidden;
    
}
.tours-page .title{
    font-size: var(--medium-title-size);
    font-weight: bold;
    margin-bottom: 50px;
}
.tours-page .first-tour{
    width: 300px;
    height: 400px;
    background: url(images/Mosque-Casablanca.jpg) center no-repeat;
    background-size: cover;
    border: none;
    border-radius: 10px;
    margin-top: 40px;
}
.tours-page .information{
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.473);
    display: flex;
    flex-direction: column;
    justify-content: end;
    padding-left: 20px;
    padding-bottom: 20px;
    border-radius: 10px;
}
.tours-page .first{
    background: url(images/Mosque-Casablanca.jpg) center no-repeat;
    background-size: cover;
    position: relative;
    left: -30%;
    opacity: 0;
    transition-delay: .1s;
    
}
.tours-page .first-tour:hover{
    transform: translateY(-15px);
}
.tours-page .second{
    background: url(images/real\ chfichiwa.jpg) center no-repeat;
    background-size: cover;
    position: relative;
    left: -30%;
    opacity: 0;
    transition-delay: .3s;
}
.tours-page .third{
    background: url(images/sahara.jpg) center no-repeat;
    background-size: cover;
    position: relative;
    left: -30%;
    opacity: 0;
    transition-delay: .5s;
}
/*styling the culture page*/
.culture-page{
    color: var(--text-color-first);
    padding: 5%;
    overflow-x: hidden;
}
.culture-page .culture-information{
    position: relative;
    left: -30%;
    opacity: 0;
}
.culture-page .culture-information h3{
    color: var(--color);
    letter-spacing: 5px;
    word-spacing: 5px;
}
.culture-page .culture-information p{
    color: var(--text-color-secondary);
}
/*hide culture text*/
.culture-page .hidden4{
    display: none;
}
.culture-page .pic-hospitality{
    width: 300px;
    height: 400px;
    background: url(images/moroccan-hospitality2-768x517.jpg) center no-repeat;
    background-size: cover;
    border: none;
    border-radius: 10px;
    margin-top: 40px;
    position: relative;
    left: 30%;
    opacity: 0;
}
.culture-page .reveal4{
    transition: .5s;
}
.culture-page .reveal4:hover{
    transform: scale(110%);
}
/*styling the contact form*/
.contact{
    padding: 5%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.contact .title{
    color: var(--text-color-first);
    text-align: center;
}
.contact .form{
    margin-top: 10px;
    width: 100%;
    text-align: center;
}
.contact .form .email{
    height: 40px;
    outline: none;
    border: none;
    background-color: var(--input-bg-color);
    padding-left: 1%;
    border-radius: 5px;
    margin-right: 3%;
    color: var(--text-color-first);
}
.form .reveal{
    transition: .4s;
}
.form .reveal:hover{
    transform: scale(105%);
}
/*styling the footer*/
.final-div{
    color: var(--text-color-first);
    display: flex;
    flex-direction: column;
    padding: 5%;
}
.final-div ul{
    margin-top: 15px;
}
.final-div ul li{
    color: var(--text-color-secondary);
}
.final-div p{
    text-align: center;
}
.final-div .socials{
    display: flex;
    overflow: visible;
}
.final-div .socials a{
    margin-right: 10px;
    color: var(--text-color-first);
}