@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');

:root {
    --green: #0eb582;
    --light-green: #f0fdfa;
    --light-colour: #777;
    --light-white: #eee;
    --black: #444;
    --white: #fff;
    --border: .1rem solid var(--green);
    --box-shadow: 0 0.5rem 1rem rgba(0,0,0,.1);
  }

* {
    font-family: 'Nunito', sans-serif;
    margin: 0;
    padding: 0;
    outline: none;
    border: none;
    text-decoration: none;
    transition: all .2s linear;
}

p {
    font-size: 16px;
}

p, li {
    line-height: 1.8;
    margin-bottom: 1.5rem;
    max-width: 75ch;
}

a {
    color: var(--green);
}

a:hover {
    color: var(--green);
}

h1 {
    margin-bottom: 20px;
}

h2 {
    margin-bottom: 20px;
}

tr, td, th {
    text-align: left;
}

html {
    overflow-x: hidden;

    &::-webkit-scrollbar {
        width: 1rem;
    }

    &::-webkit-scrollbar-track {
        background: transparent;
    }

    &::-webkit-scrollbar-thumb {
        background: var(--green);
    }
}


.header {
    position: sticky;
    top: 0; left: 0; right: 0;
    background: var(--white);
    box-shadow: var(--box-shadow);
    padding: 1.5rem 10%;
    display: flex;
    align-items: center;
    z-index: 10;
    font-size: 18px;

    .logo {
        font-size: 1.3rem;
        margin-right: auto;
    }

    .navbar a {
        margin-right: 1.5rem;
    }

    .icons div {
        cursor: pointer;
        font-size: 1.5rem;
        color: var(--black);
        margin-left: 2rem;
        
        &:hover {
            color: var(--green);
        }
    }

    #menu-btn {
        display: none;
    }

    #close-navbar {
        display: none;
    }
}


/* Sections */

section {
    position: relative;
    height: 100vh;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.section-inner {
    background-color: var(--white); 
    position: absolute;
    top: 100px; left: 40px;
    min-width: 200px;
    max-width: 560px;
    height:fit-content;
    opacity: 0.85;
    padding: 20px;

    h1 {
        text-align: center;
        top: 150px;
        left: 100px;
        font-size: 2rem;
        opacity: 1;
    }
}

.section-content {
    width: 90%;
    height: auto;
    padding: 20px 5%;
    margin: auto;  
}

.section-content h2,
.section-content h3,
.section-content h4,
.section-content table {
    padding: 20px 0;
    margin: auto;
    text-align: center;
}

.section-content p,
.section-content li {
    margin: auto;
    padding: 5px 0;
}

.content-img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    max-width: 900px;
    height: auto;
    max-height: 600px;
    object-fit: contain;
    margin-top: 20px;
    margin-bottom: 20px;
}


.news-img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 30%;
}

.cream {
    background-color: #FFFDD0;
    width: 60%;
    min-width: 500px;
    padding: 30px 20px;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 30px;
    border-radius: 20px;

    img {
        display: block;
        width: 40%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    h1, h2, h3 {
        text-align: center;
    }
}

.cta-btn {
    margin: auto;
    background-color: #b50e27;
    border-radius: 30px;
    width: fit-content;
    padding: 0px 30px;
    margin-top: 20px;
    text-align: center;

    a {
        color: #eee;
        font-size: 20px;
    }
}


/* Background Images */

.section-intro {
    background-image: url(/img/tashkent.jpg);
}

.section-places {
    background-image: url(/img/hazrati-imam-complex.jpg);
}

.section-food {
    background-image: url(/img/food.jpg);
}

.section-stay {
    background-image: url(/img/hotel-uzbekistan.jpg);
}

.section-tours {
    background-image: url(/img/places/amir-timur-square.jpeg);
}

.section-events {
    background-image: url(/img/culture.jpg);
}

.section-news {
    background-image: url(/img/life.jpg);
}

.section-tourcentralasia {
    background-image: url(/img/tourcentralasia.jpg);
}

.section-history {
    background-image: url(/img/history/tashkent-gate.png);
}

.section-interpreters {
    background-image: url(/img/conference-interpreters.jpg);
}

.img-repression {
    background-image: url(/img/places/repression-museum.jpeg);
}

.img-pumpkin {
    background-image: url(/img/places/pumpkin-museum.jpg);
}

.img-sergey {
    background-image: url(/img/places/sergey-esenin.jpeg);
}

.img-sacred {
    background-image: url(/img/places/sacred-heart-cathedral.jpeg);
}

.img-khazrati {
    background-image: url(/img/hazrati-imam-complex.jpg);
}

.img-alambardar {
    background-image: url(/img/places/khoja-alambardar-mausoleum.jpg);
}

.img-hovendi {
    background-image: url(/img/places/sheikh-hovendi-at-tahur-complex.jpg);
}

.img-alaybazaar {
    background-image: url(/img/places/alay-bazaar-fruit.jpeg);
}

.img-ulugbekpark {
    background-image: url(/img/places/mirzo-ulugbek-park.jpeg);
}

.img-metro {
    background-image: url(/img/places/pakhtakor-station.jpeg);
}

.img-navoi-museum {
    background-image: url(/img/places/alisher-navoi-museum.jpg);
}

.img-romanov {
    background-image: url(/img/places/romanov-palace-tashkent.jpeg);
}

.img-suzuk-ota {
    background-image: url(/img/places/suzuk-ota-complex.jpg);
}

.img-kukeldash {
    background-image: url(/img/places/kukeldash-courtyard.jpg);
}

.img-applied-art {
    background-image: url(/img/places/museum-applied-art.jpg);
}

.img-zoo {
    background-image: url(/img/places/tashkent-zoo.jpeg);
}

.img-lokomotiv {
    background-image: url(/img/places/anhor-lokomotiv-restaurant.jpeg);
}

.img-navoi-theatre {
    background-image: url(/img/places/alisher-navoi-theater.jpeg);
}

.img-independence-square {
    background-image: url(/img/places/independence-square.jpeg);
}

.img-12-gates {
    background-image: url(/img/history/12-gates-ancient-tashkent.png);
}

.img-tamara {
    background-image: url(/img/places/tamara-khanum-dresses.jpeg);
}

.img-chimes {
    background-image: url(/img/places/tashkent-chimes.jpeg);
}

.img-magic-city {
    background-image: url(/img/places/magic-city.jpeg);
}

.img-shevchenko {
    background-image: url(/img/places/shevchenko-mosaic-murial.jpeg);
}

.img-chorsu {
    background-image: url(/img/places/chorsu-bazaar.jpg);
}

.img-marriot {
    background-image: url(/img/hotels/marriott-courtyard.jpg);
}

.img-art-gallery {
    background-image: url(/img/places/art-museum-uzbekistan.jpeg);
}

.img-olympic-glory {
    background-image: url(/img/places/olympic-museum-tashkent.jpeg);
}

.img-minor-mosque {
    background-image: url(/img/places/minor-mosque.jpeg);
}

.img-alley {
    background-image: url(/img/places/alisher-navoi-statue.jpeg);
}

.img-mirabad {
    background-image: url(/img/places/mirabad-bazaar.jpeg);
}

.img-fayaztepe {
    background-image: url(/img/news/fayoz-tepa.png);
}

.img-assumption {
    background-image: url(/img/places/holy-assumption-cathedral.jpeg);
}

.img-ashgabat {
    background-image: url(/img/places/ashgabat-park.png);
}

.img-ming {
    background-image: url(/img/places/ming-orik-archeological-site.jpeg);
}

/* .img-abdullah {
    background-image: url(/img/);
} */

/* .img-circus {
    background-image: url(/img/places/);
} */

.img-railway-museum {
    background-image: url(/img/places/railway-museum.jpeg);
}

.img-temur-square {
    background-image: url(/img/places/amir-timur-square.jpeg);
}

.img-photography-house {
    background-image: url(/img/places/tashkent-house-of-photography.jpeg);
}

.img-state-museum-history {
    background-image: url(/img/places/state-museum-history-uzbekistan.jpeg);
}

.img-vegan-tour {
    background-image: url(/img/food/fruit-and-nut-stall.jpeg);
}

.img-tashkent-mountains {
    background-image: url(/img/places/tashkent-mountain-tours.jpeg);
}

.img-coffee {
    background-image: url(/img/food/coffee-and-croissant.jpeg);
}

.img-family {
    background-image: url(/img/food/family-restaurants-tashkent.jpeg);
}

.img-samarkand {
    background-image: url(/img/places/tilya-kori-ceiling.jpeg);
}

/* Cards */
.things {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    width: fit-content;
    border-width: 1px;
    border-color: rgba(219, 234, 254, 1);
    border-radius: 20px;
    background-color: var(--light-white);
    padding: 20px 40px;
    box-shadow: 5px 5px 4px 1px var(--light-colour);

    h3 {
        font-size: 25px;
    }

    h2 {
        text-align: center;
    }
}

.things img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 20px;
    width: auto;
    max-width: 400px;
}

.things button {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    background-color: var(--green);
    padding: 15px 40px;
    border-radius: 20px;

    a {
        color: var(--white);
    }


}

.things button:hover {
    background-color: #07865f;
}

/* Form */

.showcase-form {
    position: relative;
    width: 90%;
    padding: 20px;
    z-index: 5;
    justify-self: flex-end;
    
  }
  
  .showcase-form .form-control {
    margin: 10px 0;
  }
  
  .showcase-form input[type='text'],
  .showcase-form input[type='email'],
  .showcase-form input[type='tel'],
  .showcase-form input[type='date'],
  .showcase-form input[type='number'],
  #number_of_people,
  #additional_info,
  #tour_option {
    width: 90%;
    padding: 3px;
    font-size: 18px;
  }
  
  .showcase-form input:focus {
    outline: none;
  }

  .btn-form {
    color: #fff;
    background-color: #b50e27;
    padding: 10px 20px;
    border-radius: 25px;
    margin-top: 15px;
    font-size: 18px;
  }
  

.hidden {
    display: none;
}

.tour {
    background-color: #FFFDD0;
    border-radius: 10px;
    padding: 20px 0px;
    margin-top: 30px;
}

/* Footer */

footer {
    background-color: var(--green);
    margin-top: 100px;
}

footer .grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

footer .box {
    padding: 20px;
}

footer .box p {
    font-weight: bold;
}

footer .share a {
    display: block;
    font-size: 20px;
    height: 30px;
    width: 30px;
    line-height: 30px;
    margin: 10px 5px;
    color: var(--black);
    background-color: #07865f;
    text-align: center;
    padding: 5px auto;
    border-radius: 5px;
}

footer .share a:hover {
    background-color: #013020;
}

footer .links a {
    display: block;
    margin: 10px 0;
    color: var(--black);
}

footer .links a:hover {
    color: var(--white);
}

footer .share a:hover {
    color: var(--white);
}

footer .credit {
    text-align: center;
    padding: 20px 0;
}


/* Media Queries */

@media (max-width:1200px) {
    .header {
        padding: 1.5rem 5%;
    }
}

@media (max-width:768px) {
    .header {
        padding: 1rem 5%;
        font-size: 16px;
    }

    footer .grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


@media (max-width:600px) {
    .header {
        padding: 1rem 5%;
        font-size: 14px;

        .logo {
            font-size: 18px;
        }

        #menu-btn {
            display: inline-block;
        }

        .navbar {
            display: block;
            position: fixed;
            top: 0; right: -105%;
            width: 70%;
            max-width: 20rem;
            background-color: var(--white);
            height: 100%;
            display: flex;
            flex-flow: column;
            justify-content: center;

        
            &.active {
                box-shadow: 0 0 0 100vw rgba(0, 0, 0, .8);
                right: 0;

                #close-navbar {
                    display: block;
                    position: absolute;
                    top: 1.5rem; right: 2rem;
                    font-size: 1.5rem;
                    cursor: pointer;
    
                    &:hover {
                        transform: rotate(90deg);
                    }
                }
    
            }

            a {
                display: block;
                margin: 1rem 0;
                padding-left: 20px;
                font-size: 1.5rem;
            }
        }

        footer .grid {
            grid-template-columns: repeat(1, 1fr);
        }
    }

    .section-inner { 
        position: absolute;
        top: 40px;
        left: 3%;
        right: 3%;
        max-width: 560px;
        height:fit-content;
        width: fit-content;
    }

    .content-img {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 90%;
        height: auto;
    }

    .news-img {
        width: 80%;
        
    }

    .things img {
        width: 80%;
    }

    .cream {
        width: 80%;
        min-width: 200px;
    }
    
}