/* Hero Section Styles */
.hero {
    font-family: 'Sweet Sans Pro', sans-serif;
    height: 100vh;
    /* Full screen height */
    background:
        linear-gradient(rgba(0, 0, 0, 0.8), rgba(2, 12, 22, 0.2)), url('../images/exploretips/exploretipshero.jpg');
    background-size: cover;
    /* covers the entire section */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #E6DFD5;
    padding-top: 0;
    /* For overlay effects */
}

/* Hero Content */
.hero-content {
    font-family: 'Sweet Sans Pro';

    z-index: 2;
    display: flex;
    flex-direction: column;
    /* 讓 h1 和 p 垂直排列 */
    max-width: 1440px;
    margin: 0 auto;
}

.hero h1 {
    font-size: 80px;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
}

.hero p {
    font-size: 25px;
    margin-top: -70px;
    letter-spacing: 2px;
    font-weight: lighter;


}

.text strong,
.text2 strong,
.text3 strong {
    color: #982D52;
}

.travel-tips {

    font-family: 'Sweet Sans Pro', sans-serif;
    background-color: #CEC2B1;

}

.content1 {
    font-family: 'Sweet Sans Pro', sans-serif;
    display: flex;
    align-items: center;
    padding: 30px;
    height: 100vh;
    max-width: 1440px;
    margin: 0 auto;


}

.picturetraveltips {
    flex: 1;
    display: flex;
    justify-content: center;
}

.picturetraveltips img {
    width: 70%;
    padding: 10px;

}

.text {

    /* 文本最大宽度 */
    flex: 1;
    text-align: left;
    justify-content: center;
    margin-right: 30px;



}

.text h2 {
    font-size: 50px;
    margin-bottom: 50px;

}

.text p {
    font-size: 20px;
    /* 段落字体大小 */
    line-height: 1.6;
    /* 段落行高 */
    text-align: justify;
    /* 段落对齐 */
    max-width: 600px;
    align-items: right;

}

/*local */
.localetiquette {
    font-family: 'Sweet Sans Pro', sans-serif;
    background-color: #d6cbbbe3;
    background-image: url(../images/exploretips/local\ bg.jpg);
    background-size: cover;
    display: flex;
    justify-content: center;


}

.content2 {
    display: flex;
    align-items: center;
    height: 100vh;
    max-width: 1440px;
    margin: 0 auto;
    justify-content: center;
    gap: 50px;
    padding-left: 40px;


}




.picmosque {
    flex: 1;


}


.picmosque img {
    width: 70%;
    padding: 10px;
    margin-left: 20px;
    justify-content: center;
}


.text2 {
    flex: 1.5;
    max-width: 600px;
    padding-left: 60px;



}

.text2 h2 {
    font-size: 50px;
    margin-bottom: 50px;
    margin-top: 0;

}

.text2 p {
    font-size: 20px;
    /* 段落字体大小 */
    line-height: 1.6;
    /* 段落行高 */
    text-align: justify;
    /* 段落对齐 */

    align-items: right;



}

/*---------------------Climate guide--------------------*/
.climateguide {
    font-family: 'Sweet Sans Pro', sans-serif;
    background-color: #CEC2B1;

}

.content3 {
    font-family: 'Sweet Sans Pro', sans-serif;
    display: flex;
    align-items: center;
    padding: 30px;
    height: 100vh;
    max-width: 1440px;
    margin: 0 auto;

}

.picclimate {
    flex: 1;
    display: flex;
    justify-content: center;
}

.picclimate img {
    width: 70%;
    padding: 10px;
    border-radius: 20px;

}

.text3 {
    flex: 1;

    text-align: left;
    justify-content: center;
    margin-right: 30px;


}

.text3 h2 {
    font-size: 50px;
    margin-bottom: 30px
}

.text3 p {
    font-size: 20px;
    /* 段落字体大小 */
    line-height: 1.6;
    /* 段落行高 */
    text-align: justify;
    /* 段落对齐 */
    max-width: 600px;
}

@media screen and (max-width: 1100px) {
    .hero {
        font-family: 'Sweet Sans Pro', sans-serif;
        height: 100vh;
        /* Full screen height */
        background:
            linear-gradient(rgba(0, 0, 0, 0.8), rgba(2, 12, 22, 0.2)), url('../images/exploretips/exploretipshero.jpg');
        background-size: cover;
        /* covers the entire section */
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        color: #E6DFD5;
        background-position: 25% 50%;
        /* Fine-tune to focus on a specific part, first is for left, second is for top */
    }

    /* Hero Content */
    .hero-content {
        font-family: 'Sweet Sans Pro';
    }

    .hero h1 {
        font-size: 50px;
        text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
    }

    .hero p {
        font-size: 20px;
        margin-top: -30px;
        letter-spacing: 2px;
        font-weight: lighter;
    }

    .content1 {
        flex-direction: column;
        text-align: center;
        align-items: center;
        height: 1100px;
        justify-content: center;

    }


    .content2 {
        flex-direction: column-reverse;
        text-align: center;
        align-items: center;
        height: 1150px;
        justify-content: center;
        gap: 15px;
    }

    .content3 {
        flex-direction: column;
        text-align: center;
        align-items: center;
        height: 1200px;
        justify-content: center;

    }

    .picturetraveltips img {
        width: 50%;
        height: auto;
        margin: 0 auto 10px;
        /* 圖片居中，並與文字留空隙 */
        display: block;
        /* 保證圖片為塊級元素，避免與其他內容並列 */
        margin-top: 50px;
    }

    .picclimate img {

        height: auto;
        margin: 0 auto 10px;
        /* 圖片居中，並與文字留空隙 */
        display: block;
        /* 保證圖片為塊級元素，避免與其他內容並列 */
        margin-top: 40px;
    }

    .picmosque img {
        width: 50%;
        height: auto;
        margin: 0 auto 10px;
        /* 圖片居中，並與文字留空隙 */
        display: block;
        /* 保證圖片為塊級元素，避免與其他內容並列 */
        margin-top: 40px;
    }

    .text,
    .text3 {
        width: 100%;
        /* 確保文字容器寬度填滿父容器 */
        margin: 0;
        /* 移除多餘外邊距 */
        text-align: left;
        align-items: center;
        justify-content: center;
        max-width: 600px;

    }

    .text2 {
        width: 100%;
        /* 確保文字容器寬度填滿父容器 */
        margin: 0;
        /* 移除多餘外邊距 */
        text-align: left;
        align-items: center;
        justify-content: center;
        max-width: 600px;
        margin-left: -70px;

    }

    .text h2,
    .text2 h2,
    .text3 h2 {
        font-size: 40px;
        text-align: center;
    }

    .text2 h2 {

        align-items: center;
        text-align: center;
        justify-content: center;
        margin-top: 0;


    }

    .text p,
    .text2 p,
    .text3 p {
        font-size: 20px;
        line-height: 1.6;

    }


}


@media screen and (max-width: 700px) {
    .hero {
        font-family: 'Sweet Sans Pro', sans-serif;
        height: 100vh;
        /* Full screen height */
        background:
            linear-gradient(rgba(0, 0, 0, 0.8), rgba(2, 12, 22, 0.2)), url('../images/exploretips/exploretipshero.jpg');
        background-size: cover;
        /* covers the entire section */
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        color: #E6DFD5;
        background-position: 25% 50%;
        /* Fine-tune to focus on a specific part, first is for left, second is for top */
    }

    /* Hero Content */
    .hero-content {
        font-family: 'Sweet Sans Pro';
    }

    .hero h1 {
        font-size: 35px;
        text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
    }

    .hero p {
        font-size: 15px;
        margin-top: -30px;
        letter-spacing: 2px;
        font-weight: lighter;
    }

    .content1 {
        flex-direction: column;
        text-align: center;
        align-items: center;
        height: 1000px;
        justify-content: center;

    }


    .content2 {
        flex-direction: column-reverse;
        text-align: center;
        align-items: center;
        height: 1000px;
        justify-content: center;

    }

    .content3 {
        flex-direction: column;
        text-align: center;
        align-items: center;
        height: 1100px;
        justify-content: center;

    }

    .picturetraveltips img {
        width: 60%;
        height: auto;
        margin: 0 auto 10px;
        /* 圖片居中，並與文字留空隙 */
        display: block;
        /* 保證圖片為塊級元素，避免與其他內容並列 */
        margin-top: 50px;
    }

    .picclimate img {
        width: 60%;
        height: auto;
        margin: 0 auto 10px;
        /* 圖片居中，並與文字留空隙 */
        display: block;
        /* 保證圖片為塊級元素，避免與其他內容並列 */
        margin-top: 40px;
        border-radius: 16px;
    }

    .picmosque img {
        width: 60%;
        height: auto;
        margin: 0 auto;
        /* 圖片居中，並與文字留空隙 */
        display: block;
        /* 保證圖片為塊級元素，避免與其他內容並列 */
        margin-top: 45px;
        border-radius: 16px;
        padding-right: 30px;
    }

    .text,
    .text3 {
        width: 100%;
        /* 確保文字容器寬度填滿父容器 */
        margin: 0;
        /* 移除多餘外邊距 */
        text-align: left;
        align-items: center;
        justify-content: center;
        max-width: 350px;

    }

    .text2 {
        width: 100%;
        /* 確保文字容器寬度填滿父容器 */
        margin: 0;
        /* 移除多餘外邊距 */
        text-align: left;
        align-items: center;
        justify-content: center;
        max-width: 350px;
        margin-left: -90px;
        margin-bottom: 50px;
    }

    .text h2,
    .text2 h2,
    .text3 h2 {
        font-size: 35px;
        text-align: center;
    }

    .text2 h2 {
        align-items: center;
        text-align: center;
        justify-content: center;
        margin-top: 0px;
    }

    .text p,
    .text2 p,
    .text3 p {
        font-size: 16px;
        line-height: 1.6;

    }

    .text2 p {

        margin-bottom: 20px;

        text-align: justify;
        max-width: 350px;

    }


}



@media screen and (max-width: 500px) {

    .picmosque img {
        width: 70%;
        padding: 0px;
        margin: 0px;
        margin-left: 55px;
        margin-top: 40px;
        border-radius: 10px;

    }

    .text2 {
        margin-right: 0px;
    }

    .text2 h2 {
        margin-top: 0;
    }
}

@media screen and (max-width: 470px) {

    .picmosque img {
        margin-left: 43px;

    }
}

@media screen and (max-width: 400px) {

    .picmosque img {
        margin-left: 38px;

    }
}

@media screen and (max-width: 390px) {

    .picmosque img {
        margin-left: 32px;

    }
}