@import url("https://cdn.jsdelivr.net/npm/fonts-archive-snell-roundhand/SnellRoundhand.css");
:root{
 /*定义常量*/
	--background-color-dark:rgba(67, 67, 67, 0.6);
	--background-color-light: white;
	--box-border-radius:20px;
	font-size:16px;
	--font-size-body:16px;
	--font-size-title:18px;
	--font-size-desc:14px;
	--font-style-hand: "Snell Roundhand", cursive; 
	--back-ground-color-body:rgba(225, 232, 237,1);
	--back-ground-color-kazakhblue:rgb(0,178,202);
}

html{
	scroll-behavior: smooth;
  	-webkit-overflow-scrolling: touch; /* iOS流畅滚动 */
	margin:auto;
}

body{
	width:90%;
	margin: auto;
	background-color: var(--back-ground-color-body);
	justify-content: center;
	font-size: var(--font-size-body);
	font-family: "Open Sans","Helvetica Neue", Helvetica, Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
	color:black;
}

a{
	color:black;
	text-decoration: none;
}

a:hover {
	color:darkgray;
}

header{
	width:100%;
	margin:auto;
	position:sticky;
	top:0;
	z-index: 1000;
	display: flex;
	padding:10px 0;
	margin-bottom:10px;
	background-color:var(--back-ground-color-body);
	border-bottom: solid 2px rgb(200, 200, 200);
}

#logo-corporate{
	width:20%;
	align-items: center;
	display: inline;
}

#logo-corporate img{
	width:100%;
	height: auto;
}

#nav{
	width:90%;
	height:auto;
	display: flex;
	justify-content: left;
	align-items: center;
}

#floating-inst-memu{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	height:auto;
	position:fixed;
	z-index: 1000;
	background-color: rgb(172, 172, 172);
	border-radius: 20px;
	opacity: 0.8;
}

#floating-inst-memu a{
	margin:10px 20px 10px 0;
}

#floating-inst-memu img{
	width:100%;
	aspect-ratio: 1/1;
}

@media (min-width: 769px){
	#nav span{
		margin-left: 2vw;
		font-size: 30px;
	}
	#floating-inst-memu{
		flex-wrap: nowrap;
		width:200px;
		top:2%;
		right:10%;
	}
}

@media (max-width: 768px){
	#nav span{
		margin-left: 0.5rem;
	}
	#floating-inst-memu{
		flex-wrap:wrap;
		width:50px;
		top:50%;
		right: 10px;
	}
} 


#greeting-container{
	position:relative;
	width:100%;
	height:auto;
}

#greeting{
	position:absolute;
	top:25%;
	left:10%;
	transform:translateX(-10%);
	z-index: 999;
	color:white;
	font-weight: bold;
	opacity: 1;
}

#greeting-welcome{
	font-size: clamp(25px,5vw,40px);
	font-family: var(--font-style-hand);
	margin-left:5px;
}

#greeting-kazakh{
	margin-left:20px;
	font-size: clamp(30px,10vw,100px);
}

#greeting-background{
	width: 100%;
	opacity:1;
	filter: brightness(0.85);
	overflow: hidden;
	border-radius: var(--box-border-radius);
}

#greeting-background img{
	width: 100%;
	height:auto;
	display:block;
}

#service-container{
	margin:20px 0;
	width: 100%;
	height:auto;
	border-radius: var(--box-border-radius);
	display:grid;
	grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
	gap:1rem;
}

#why-chooses-spacego{
	font-size:var(--font-size-title);
	font-family: var(--font-style-hand);
	font-weight: bold;
}


#service-desc{
	width:80%;
	margin: auto;
}


#service-desc div{
	margin-top:1vw;
}

#service-icon-gallery,#service-icon-desc-container{
	width: 100%;
	display: flex;
	justify-content: space-between;
}

.service-icons{
	margin: auto;
	width:60px;
	height:60px;
	background-color: var(--background-color-light);
	overflow: hidden;
	border-radius: 10px;
	display: flex;
}

.service-icons img{
	margin: auto;
	width: 80%;
	height: 80%;
	display: block;
}

.service-icon-desc{
	width:30%;
	display: inline;
	text-align: center;
}

#service-gallery-container{
	width: 80%;
	margin:auto;
	justify-items: center;
	display:block;
}

.service-gallery{
	background-color: var(--background-color-dark);
	width:100%;
	height:30%;
	margin:auto;
	margin-top:5px;
	border-radius: 10px;
	color:white;
	justify-content: flex-start;
	align-items: center;
	display: grid;
	grid-template-columns: 1fr 3fr;
	gap:5px;
}

.service-gallery-icons{
	margin:auto;
	width:44px;
	height:44px;
	overflow: hidden;
	display: flex;
	background-color: white;
	border-radius: 10px;
}
.service-gallery-icons img{
	margin: auto;
	width:90%;
	height:90%;
	display: block;
}
.service-gallery-desc{
	display: flex;
	height: 80px;
	align-items:center;
}

.gallery-container{
	width: 100%;
	display: block;
	height: auto;
	border-radius:var(--box-border-radius);
	margin-top:20px;
	margin-bottom: 20px;
	justify-items: center;
	padding:2vw 0;
}

.gallery-title-container{
	margin: auto;
	width:88%;
	padding:10px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.gallery-title{
	font-size:clamp(20px,6vw,35px);
	font-weight:bold;
	font-family:var(--font-style-hand);
}
.gallery-desc{
	width:40%;
}

.gallery-card-container{
	width:90%;
	margin:auto;
	flex-wrap: wrap;
	justify-content: space-between;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1rem;
    transition: all 0.2s ease;
}

.gallery-card{
	position: relative;
	border-radius: var(--box-border-radius);
	text-align: center;
	justify-items: center;
	margin:auto;
	overflow: hidden;
	width:100%;
	aspect-ratio: 1/1.3;
	max-width:240px;
	box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}

.gallery-card img{
	width:100%;	
	aspect-ratio: 1/1.3;
	display: block;
}

.gallery-float-button{
	display: none;
	position:absolute;
	top: 40%;
	left:10%;
	color:white;
	width:80%;
	padding:1%;
	justify-content: center;
	font-size:clamp(16px,4vw,25px);
	background-color: var(--back-ground-color-kazakhblue);
	border-radius: 20px;
}
.gallery-float-button a{

	color:white;
}


.gallery-card:hover .gallery-float-button{
	display: flex;
}

.gallery-card:hover{
	transform: translateY(-8px);
	box-shadow: 0 30px 45px -15px rgba(0, 0, 0, 0.2);
}

.floatarrow{
	align-content: center;
	width:60px;
	height: 60px;
	border-radius: 100%;
	background-color:#EBEBEB;
	display: inline-block;	
	font-size:30px;
}

.floatarrow:hover{
	background-color: rgb(247, 214, 79);
	color:white;
}


.blog-card{
	/* position:relative; */
	/* background-color: var(--back-ground-color-kazakhblue); */
	background-color: var(--background-color-light);
}

.blog-circle{
	display: flex;
	aspect-ratio:1/1;
	border-radius: 100%;
	background-color: whitesmoke;
	margin: auto;
	margin-top: 1rem;
	margin-bottom: 20px;
	font-size:12px;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	color:darkgray;
}

.blog-card > span{
	font-size: clamp(14px,1.2vw,30px);
	font-weight: bold;
}


.auth-portrait {
	width:70%;
	display: flex; 
	align-items: center;
}

.auth-portrait img{
	height: 44px;
	width: 44px;
}
.blog-footer {
	width:90%;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	font-size: var(--font-size-desc);
	justify-content: center; 
}

@media (min-width:769px){
	.blog-circle {
		width:66px;
	}
	.blog-footer{
		margin-top:2rem;
	}

}
@media (max-width:768px){
	.blog-circle {
		width:45px;
	}
}

.blog-card:hover .blog-circle{
	background-color: var(--back-ground-color-kazakhblue);
	color:var(--background-color-light);
}

.blog-pic-container{
	width:90%;
	display:grid;
	grid-template-columns: repeat(auto-fit,minmax(150px,1fr));
	gap:1rem;
	margin:auto;
}

.blog-pic-container img{
	width:100%;
	aspect-ratio: 4/3;
	margin: auto;
}

.blog-detail-content{
	/* font-size:var(--font-size-title); */
	font-size:16px;
	width:90%;
	margin:auto;
	/* text-align: center; */
}

.blog-article-title{
	font-family: var(--font-style-hand);
	font-size:35px;
	width: 100%;
	font-weight: bold;
	text-align: center;
}

footer{
	width:100%;
	height:auto;
	background-color: var(--background-color-light);
	padding:20px 0 20px 0;
	border-radius: var(--box-border-radius);
	margin:auto;
	margin-top:10px;
}

#footer-container{
	display: grid;
	grid-template-columns: repeat(2,1fr);
	gap:10px;
	width: 80%;
	margin-left: 10%;
	padding-bottom: 30px;
}

#footer-container div{
	text-align: left;
	width:80%;
}

#copyright{
	width:80%;
	margin:auto;
	text-align: center;
	background-color: gray;
	padding:10px;
	border-radius: 5px;
}

.footer-title{
	font-weight: bold;
	font-size:clamp(11px,2vw,22px);
	padding-bottom: 10px;
}

.footer-detail{
	padding:10px 0;
}
.footer-detail span{
	display: flex;
	align-items: center;	
}
.icons{
	width:20px;
	height:18px;	
}

.inst-icons{
	margin-left: 10px;
	width:30px;
	height:30px;	
}

.aboutus-column-container,.destination-column-container{
	display: block;
	width:100%;
	margin:auto;
	margin: 30px 0;
	justify-content: center;
}

.about-title{
	margin: auto;
	width: 100%;
	text-align: center;
	font-size: clamp(25px,4vw,40px);
	font-weight: bold;
	margin-bottom: 10px;
	font-family: var(--font-style-hand);
}

.about-detail{
	margin: auto;
	width: 90%;
	font: var(--font-size-body);
	margin-bottom: 10px;
}

.about-pics, .destination-column-pics{
	margin: auto;
	width:100%;
	display: flex;
	
}

.about-pics img, .destination-column-pics img {
	width:80%;
	margin: auto;
	aspect-ratio: 16/9;
	border-radius: 20px;
	box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}
.about-qualification-pics-container{
	width: 80%;
	display: flex;
	justify-content: space-between;
	gap:5px;
	margin:auto;

}

.about-qualification-pics-container img{
	display: inline;
	width:48%;
	height: auto;
	aspect-ratio: 3/4;
	border-radius: 20px;
	border: solid 1px gray;
	box-shadow: 2px 2px 5px rgba(0,0,0,0.3);

}
.team-member-gallery{
	display:grid;
	margin-top: 10px;
}

 @media (min-width:769px){
	.team-member-gallery{
		grid-template-columns: repeat(auto-fit,minmax(300px, 1fr));
		gap:3rem;
	}
 }

 @media (max-width:768px){
	.team-member-gallery{
		grid-template-columns: repeat(auto-fit,minmax(150px, 1fr));
		gap:1rem;
	}
 }

.team-member-card{
	width:90%;
	margin: auto;
	aspect-ratio: 3/4;
	background-color: yellowgreen;
	border-radius: var(--box-border-radius) ;
	box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}

.team-member-card img{
	width:100%;
	aspect-ratio: 1/1;
	border-radius: 20px 20px 0 0 ;
}

.team-member-card span{
	display: block;
	width: 100%;
	text-align: center;
	margin-bottom: 10px;
	margin-top:10px;
}

.team-member-name {
	font-size: var(--font-size-title);	
	font-weight: bold;

}

.team-member-jobtitle {
	font-size: var(--font-size-body);	
}


.promise-container{
	width:100%;
	display:grid;
	grid-template-columns: repeat(auto-fit,minmax(200px, 1fr));
	gap:2vw;
}
.promise-card{
	margin: auto;
	width:80%;
	aspect-ratio: 16/9;
	padding-top: 2vw;
	border: solid 1px gray;
	border-radius: var(--box-border-radius);
	display: block;
	background-color: var(--background-color-light);
	box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}

.promise-title{
	width:100%;
	text-align: center;
	font-size: var(--font-size-title);
}
.promise-card ul li{
	/* margin-top: 5vw; */
	margin-bottom: 1vw;
}


#contactus-form-container{
	margin-top: 40px;
	display: block;
	width: 100%;
	
}
#contactform-title{
	text-align: center;
	font-weight: bold;
}

#contactform{
	margin: auto;
	display: block;
	width: 100%;
	justify-items: center;	
}

#contactform div {
	margin: auto;
	padding: 10px;
	text-align: center;
}

.contactus-column-container{
	margin: auto;
	margin-bottom: 20px;
	width: 90%;
	height: auto;
	padding:20px;
	display:grid;
	grid-template-columns: repeat(auto-fit,minmax(140px,1fr));
	gap:1rem;
}

.contactus-column{
	background-color: var(--background-color-light);
	border-radius: var(--box-border-radius);
	display: block;
	justify-items: center;
	padding: 20px;
	justify-content: center;
	box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
	width:90%;
}

.contactus-column div{
	width: 100%;
	margin-top:10px;
	text-align: center;
}
.contactus-logos{
	width:44px;
	height:44px;
}
.contactus-logos img{
	width:100%;
	height:100%;
}


.contactus-qrcode{
	width: 30px;
	height: 30px;

}

.contactus-qrcode img{
	width: 44px;
	height: 44px;

}

#form-contact div input{

	height:35px;	
}



.products-container{
	width: 100%;
	display: block;
	height: auto;
	border-radius:var(--box-border-radius);
	margin-top:20px;
	margin-bottom: 20px;
	justify-items: center;
	padding:10px 0;
}

.products-title{
	width:100%;
	margin: auto;
	margin-bottom: 10px;
	text-align: center;
	font-weight: bold;
	font-family: "Snell Roundhand", cursive; 
	font-size: clamp(20px,4vw,40px);
}

.products-gallery{
	width: 100%;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
    transition: all 0.2s ease;
	font-size: var(--font-size-desc);
}

.products-gallery-exclude{
	width: 100%;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.5rem;
    transition: all 0.2s ease;
}

.products-gallery-include{
	width: 100%;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    transition: all 0.2s ease;
}



.whatinclude, .whatweoffer, .exclude{
	position: relative;
	border-radius: var(--box-border-radius);
	text-align: center;
	justify-items:center;
	margin: auto;
	background-color: var(--background-color-light);
	flex-wrap: nowrap;
	box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}

.whatinclude{
	font-size:var(--font-size-title);
	width:280px;
	height:280px;

}
.whatweoffer{
	width:300px;
	height:300px;
}

.whatweoffer-title{
	font-size:14px;
	font-weight: bold;
}

.whatweoffer img{
	width:15%;
	aspect-ratio: 1/1.3;
	margin-top: 5px;
}

.exclude{
	width:180px;
	height:180px;
	font-size: var(--font-size-body);
}
.exclude img{
	width:60px;
	aspect-ratio: 1/1;
	margin-top: 25px;
	margin-bottom: 10px;
}


.whatinclude img{
	margin: 20px 0;
	width:90%;
	aspect-ratio: 4/3;
	/* height: auto; */
	border-radius: 20px;

}


.ul-list ul li{
	text-align: left;
	padding:2px 0;
}



.Destination-Detail-Title,.Package-Detail-Title{
	width: 100%;
	font-size: 30px;
	font-family: "Snell Roundhand", cursive; 
	text-align: center;
	padding: 20px;
	font-weight: bold;
}

.itinerary-card{
	display: block;
	width: 100%;
	border-style: solid;
	border-width: 0.5px;
	border-color: lightgray;
	margin-top: 5px;

}

.itinerary-title{
	width:100%;
	font-size: var(--font-size-desc);
	font-weight: bold;
	text-align: center;
	padding:10px 0;
}

.itineray-content{
	display: block;
	width:100%;
}

.itinerary-item{
	margin: 1rem 1rem 0 1rem;

}
.itinerary-detail{
	/* width: 99%; */
	margin: 0 1rem;

}

.booking-process{
	padding:10px;
	border-style:solid ;
	border-color: lightgrey;
	border-width: 0.5px;
	width:40%;
	margin: 10px 0;
	border-radius: 20px;
}

.booking-process:hover{
	background-color: aliceblue;
}

#bpp-1{
	display: none;
	align-items: center;
	height: auto;
}

.itinerary-gallery{
	width:90%;
	margin:20px 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1rem;
    transition: all 0.2s ease;
}
.itinerary-gallery img{
	margin: auto;
	width: 100%;
	aspect-ratio: 4/3;
	display: block;
}
.itinerary-detail span{
	font-size: clam(8px 0.5vw 14px);
	margin-right: 10px;

}

.itinerary-attraction-title{
	font-weight: bold;
}

.itinerary-item{
	font-weight:bold;
}

#destination-nav{
	
	margin: 20px 0;

}

#dropdown-container{
	display: inline-block;
	position: relative;
	width: 90%;
}

#dropdown-content{
	display:none;
	position: absolute;
	top: -20px;
}

#current-city{
	text-decoration: underline;
}

#dropdown-container:hover #dropdown-content{
	display:block;
}
#dropdown-container:hover #current-city{
	display:none;
}

#dropdown-content a{
	display:block;
}

.form-group {
    margin-left:20px;
	padding:2px;
	box-sizing: border-box;
}

.form-group input,.form-group select{
    /* width: auto; */
	padding:5px;
	box-sizing: border-box;
}

#bookingform_main label, #bookingform_travelerinfo label {
        display: inline-block;
		margin-right:10px;
    }

#tb_travelerlist{
	border:solid 1px darkgray;
	border-collapse: collapse;
}
#tb_travelerlist th,#tb_travelerlist td{
	border:solid 1px darkgray;
	padding:5px;
}

#button-group input{
	margin:10px;
}


.delButton {
    background: #fee2e2;
    color: #b91c1c;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 30px;
    font-weight: bold;
    font-size: 1.2rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-shadow: none;
}
.delButton:hover {
    background: #fecaca;
    color: #991b1b;
}


/* 模拟原生输入框区域 */
        .field-group {
            /* margin-bottom: 1.5rem; */
			display:inline-block;
        }

        .field-label {
            font-weight: 600;
            font-size: 0.85rem;
            color: #1e4663;
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 0.6rem;
        }

        /* 自定义日期输入容器 (模拟原生外观 + 自定义日历) */
        .custom-date-wrapper {
            position: relative;
            width: 100%;
        }

        .custom-date-input {
            width: 100%;
            padding: 0.8rem 1rem;
            font-size: 1rem;
            font-family: inherit;
            border: 1.5px solid #cbd5e1;
            /* border-radius: 1rem; */
            background-color: #fff;
            transition: all 0.2s;
            color: #0f172a;
            cursor: pointer;
        }

        .custom-date-input:focus {
            outline: none;
            border-color: #1e5a9c;
            box-shadow: 0 0 0 3px rgba(30, 90, 156, 0.2);
        }

        /* 日历面板 (模拟原生弹出层) */
        .calendar-popup {
            position: absolute;
            top: calc(100% + 8px);
            left: 0;
            right: 0;
            background: white;
            border-radius: 1.2rem;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0, 0, 0, 0.05);
            z-index: 100;
            padding: 1rem;
            border: 1px solid #e2edf7;
            transition: all 0.2s ease;
            backdrop-filter: blur(0px);
        }

        .calendar-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
            padding: 0 0.2rem;
        }

        .month-year {
            font-weight: 700;
            font-size: 1rem;
            color: #1e3a5f;
        }

        .nav-btn {
            background: #eef3fc;
            border: none;
            font-size: 1rem;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            cursor: pointer;
            transition: all 0.2s;
            color: #2c4e6e;
            font-weight: bold;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .nav-btn:hover {
            background: #dfe8f2;
        }

        .weekdays {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            text-align: center;
            margin-bottom: 0.6rem;
            font-weight: 600;
            font-size: 0.7rem;
            color: #577190;
        }

        .calendar-days {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 4px;
        }

		.day-cell {
            aspect-ratio: 1 / 1;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.8rem;
            font-weight: 500;
            border-radius: 2rem;
            cursor: pointer;
            transition: all 0.1s;
            color: #2c4e6e;
            background: transparent;
        }

        .day-cell:hover {
            background: #e2edf7;
            transform: scale(0.95);
        }

        /* 特殊高亮：可选日期背景色（符合预期） */
        .day-cell.allowed {
            background: #fde68a;   /* 琥珀色高亮，醒目 */
            color: #92400e;
            font-weight: 600;
            box-shadow: inset 0 0 0 1px #fbbf24;
        }

        .day-cell.allowed:hover {
            background: #fcd34d;
        }

        /* 当前选中的日期样式 */
        .day-cell.selected {
            background: #1e5a9c;
            color: white;
            font-weight: 700;
            box-shadow: none;
        }

        .day-cell.selected.allowed {
            background: #1e5a9c;
            color: white;
        }

        /* 非当前月日期淡化 */
        .day-cell.other-month {
            color: #a0bbd0;
            background: #fafcff;
        }
        .day-cell.other-month.allowed {
            background: #fef3c7;
            color: #b45309;
            opacity: 0.8;
        }

        .day-cell.disabled {
            cursor: not-allowed;
            opacity: 0.5;
            background: #f1f5f9;
            color: #8ba0bc;
        }

		  /* 隐藏日历面板 */
        .hidden {
            display: none;
        }

	#credit-container div img{
		width:44px;
		height:44px;

	}
#float-button-find-my-order{
	position:fixed;
	top:20%;
	left:5%;
	background-color: yellowgreen;
	width:10%;
	height:5%;
	border-radius: var(--box-border-radius);
	text-align: center;
	align-content: center;
}