/* =====================================
   Malaysia Guide Website Style
   ===================================== */


/* 基础 */

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}


html{

    scroll-behavior:smooth;

}


body{

    font-family:
    "Microsoft YaHei",
    Arial,
    sans-serif;

    background:#f6f8fb;

    color:#333;

    line-height:1.8;

}



a{

    text-decoration:none;

    color:inherit;

}



img{

    display:block;

    width:100%;

}



/* =====================================
   Header
===================================== */


.header{


    min-height:680px;


    background:

    linear-gradient(
    rgba(0,0,0,.55),
    rgba(0,0,0,.55)
    ),

    url("https://images.unsplash.com/photo-1596422846543-75c6fc197f07?auto=format&fit=crop&w=1920&q=80");


    background-size:cover;


    background-position:center;


    color:white;


}





.navbar{


    max-width:1200px;


    width:90%;


    margin:auto;


    padding:25px 0;


    display:flex;


    justify-content:space-between;


    align-items:center;


}



.logo{


    font-size:28px;


    font-weight:700;


    letter-spacing:1px;


}



.nav-menu{


    display:flex;


    gap:28px;


}



.nav-menu a{


    color:white;


    font-size:16px;


    transition:.3s;


}



.nav-menu a:hover{


    opacity:.7;


}







/* =====================================
   Hero
===================================== */


.hero{


    max-width:1000px;


    margin:150px auto 0;


    text-align:center;


    padding:0 20px;


}



.hero h1{


    font-size:58px;


    margin-bottom:25px;


    font-weight:700;


}




.hero p{


    font-size:23px;


    max-width:700px;


    margin:auto;


}



.btn{


    display:inline-block;


    margin-top:35px;


    padding:14px 45px;


    background:#159957;


    color:white;


    border-radius:40px;


    transition:.3s;


}




.btn:hover{


    background:#107842;


}





/* =====================================
 Sections
===================================== */


.section{


    max-width:1200px;


    margin:70px auto;


    padding:45px;


    background:white;


    border-radius:20px;


    box-shadow:

    0 10px 35px rgba(0,0,0,.06);


}



.section h2{


    color:#0B3A63;


    font-size:34px;


    margin-bottom:25px;


}



.section p{


    font-size:17px;


    margin-bottom:18px;


}





/* =====================================
 SVG Statistics
===================================== */


.stats{


    max-width:1200px;


    margin:60px auto;


    display:grid;


    grid-template-columns:

    repeat(
    auto-fit,
    minmax(220px,1fr)
    );


    gap:25px;


}




.stat-card{


    background:white;


    padding:35px;


    text-align:center;


    border-radius:18px;


    box-shadow:

    0 10px 30px rgba(0,0,0,.05);


}



.stat-card svg{


    width:65px;


    height:65px;


    fill:none;


    stroke:#159957;


    stroke-width:3;


    margin-bottom:20px;


}



.stat-card h3{


    font-size:32px;


    color:#0B3A63;


}



.stat-card p{


    color:#666;


}





/* =====================================
 图片展示
===================================== */


.gallery{


    display:grid;


    grid-template-columns:

    repeat(
    auto-fit,
    minmax(280px,1fr)
    );


    gap:25px;


}



.gallery img{


    height:260px;


    object-fit:cover;


    border-radius:15px;


    transition:.3s;


}



.gallery img:hover{


    transform:translateY(-8px);


}






/* =====================================
 城市列表
===================================== */


.city-list{


    display:flex;


    flex-direction:column;


    gap:35px;


}




.city-item{


    display:flex;


    background:#f8fafc;


    border-radius:18px;


    overflow:hidden;


}



.city-item img{


    width:360px;


    height:260px;


    object-fit:cover;


}



.city-item div{


    padding:35px;


}



.city-item h3{


    font-size:28px;


    color:#0B3A63;


    margin-bottom:15px;


}






/* =====================================
 Cards
===================================== */


.cards{


    display:grid;


    grid-template-columns:

    repeat(
    auto-fit,
    minmax(250px,1fr)
    );


    gap:25px;


}



.card{


    background:#f7fafc;


    padding:30px;


    border-radius:15px;


    border-left:

    5px solid #159957;


}




.card h3{


    color:#0B3A63;


    margin-bottom:15px;


}







/* =====================================
 联系模块
===================================== */


.contact-box{


    text-align:center;


    background:

    linear-gradient(
    135deg,
    #0B3A63,
    #159957
    );


    color:white;


}



.contact-box h2{


    color:white;


}





/* =====================================
 Footer
===================================== */


footer{


    background:#0B3A63;


    color:white;


    text-align:center;


    padding:55px 20px;


}



footer h3{


    font-size:26px;


    margin-bottom:15px;


}



.footer-links{


    margin:25px 0;


}



.footer-links a{


    margin:0 15px;


    color:white;


}





/* =====================================
 内页 Header
===================================== */


.simple-header{


    min-height:330px;


    background:

    linear-gradient(
    rgba(11,58,99,.85),
    rgba(11,58,99,.85)
    ),

    url("https://images.unsplash.com/photo-1596422846543-75c6fc197f07?auto=format&fit=crop&w=1600&q=80");


    background-size:cover;


    color:white;


}




.page-title{


    text-align:center;


    margin-top:70px;


}



.page-title h1{


    font-size:45px;


}


.page-title p{


    font-size:20px;


}






/* =====================================
 Contact Form
===================================== */


.contact-form{


    max-width:650px;


    margin:auto;


    display:flex;


    flex-direction:column;


    gap:15px;


}



.contact-form input,
.contact-form textarea{


    padding:15px;


    border:1px solid #ddd;


    border-radius:8px;


    font-size:16px;


}



.contact-form textarea{


    height:160px;


}





.contact-form button{


    padding:15px;


    border:none;


    background:#159957;


    color:white;


    border-radius:30px;


    font-size:16px;


}





/* =====================================
 手机适配
===================================== */


@media(max-width:768px){



.navbar{


    flex-direction:column;


    gap:20px;


}



.nav-menu{


    flex-wrap:wrap;


    justify-content:center;


}



.hero{


    margin-top:100px;


}



.hero h1{


    font-size:38px;


}



.hero p{


    font-size:18px;


}



.section{


    margin:30px 15px;


    padding:25px;


}



.section h2{


    font-size:26px;


}




.city-item{


    flex-direction:column;


}



.city-item img{


    width:100%;


    height:230px;


}



.stat-card{


    padding:25px;


}


}