@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600&display=swap');

:root{
	--main-color:#8e44ad;  /*紫色*/
	--black:#222;
	--white:#fff;
	--light-black:#777;
	--light-white:#fff9;
	--dark-bg:rgba(0,0,0,7);
	--dark-bg:#eee;
	--light-bg:#edebeb;
	--border: .1rem solid var(--black);
	--box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
	--text-shadow: 0 1.5rem 3rem rgba(0,0,0,.3);
}

*{
	font-family: 'Poppins', sans-serif;
	margin: 0; padding: 0;
	box-sizing: border-box;
	outline: none; border: none;
	text-decoration: none;
	text-transform: capitalize;
}

.html{
	font-size: 62.5%;
	overflow: hidden;
}

.html::-webkit-scrollbar{
	width: 1rem;
}

.html::-webkit-scrollbar-track{
	background-color: var(--white);
}

.html::-webkit-scrollbar-thumb{
	background-color: var(--main-color);
}

.logo img {
    width: 100px; /* 设置图像的宽度，根据需要调整值 */
    height: auto; /* 设置高度自动调整，以保持图像比例 */
}

section{
	padding: 5rem 10%;
}

@keyframes fadeIn {			/*字体显示出来的速度*/
	0%{
		transform: scale(.5);
		opacity: 0;
	}
}

.btn{
	display: inline-block;
	background: var(--black);	/*home那边btn格子的颜色*/
	margin-top: 1rem;		/*home那边btn跟h3的上下间距*/
	color: var(--white);
	font-size: 1.7rem;		/*home那边的btn字体大小*/
	padding: 1rem 3rem;		/*home那边的btn的格子大小*/
	cursor: pointer;
}

.btn:hover{			/*home那边的btn的格子移过去的颜色*/
	background: var(--main-color);
}

.heading-title{			/*这个是our services那边的title的东西*/
	text-align: center;
	margin-bottom: 2rem;
	font-size: 2.3rem;
	text-transform: uppercase;
	color: var(--black);
}

.header{
	position: sticky;
	top: 0; left: 0; right: 0;
	z-index: 1000;
	background-color: var(--white);
	display: flex;
	padding-top: 2rem;
	padding-bottom: 2rem;
	box-shadow: var(--box-shadow);
	align-items: center;
	justify-content: space-between;
}

.header .logo{
	font-size: 2rem;
	color: var(--black);
}

.header .navbar a{
	font-size: 1.5rem;
	margin-left: 2rem;
	color: var(--black);
}

.header .navbar-a a{
	font-size: 2.5rem;
	margin-left: 2rem;
	color: #222;
}

.header .navbar a:hover{
	color: var(--main-color);
}

.header .navbar-a a:hover{
	color: var(--main-color);
}

#menu-btn{
	font-size: 2.5rem;
	cursor: pointer;
	color: var(--black);
	display: none;
}

.home{
	padding: 0;
}

.home .slide {
    text-align: center;
    padding: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: 100% 100% !important; /* 将背景图片的大小设置为容器大小 */
    background-position: center !important;
    background-attachment: fixed;
    min-height: 45rem;
}

.home .slide .content{
	width: 85rem;
	display: none;
}

.home .swiper-slide-active .content{	/*不懂为什么加了之后就可以拖照片了*/
	display: inline-block; 
}

.home .slide .content span{
	display: block;
	font-size: 2.2rem;		/*home里面span的字体大小*/
	color: var(--light-white);		/*home里面span的字体颜色*/
	padding-bottom: 1rem;
	animation:fadeIn .4s linear backwards .2s;	/*字体显示出来的速度*/
}

.home .slide .content h3{
	font-size: 4vw;			/*home里面的字体大小*/
	color: var(--white);	/*home里面的字体颜色*/
	text-transform: uppercase;
	line-height: 1;			/*home里面span跟h3的上下间距*/
	text-shadow: var(--text-shadow);
	padding: 1rem 0;		/*home里面span跟h3的上下间距*/
	animation:fadeIn .4s linear backwards .4s;	/*字体显示出来的速度*/
}

.home .slide .content .btn{
	animation: fadeIn .4s linear backwards .6s;	/*字体显示出来的速度*/
}

.home .swiper-button-next,
.home .swiper-button-prev{
	top: inherit;
	left: inherit;
	bottom: 0;
	right: 0;
	height: 4rem;	/*这个是箭头的格子的高度*/
	width: 4rem;	/*这个是箭头的格子的宽度*/
	background: var(--white);
	color: var(--black);
}

.home .swiper-button-next:hover,
.home .swiper-button-prev:hover{
	background: var(--main-color);
	color: var(--white);
}

.home .swiper-button-next::after,
.home .swiper-button-prev::after{
	font-size: 2rem;	/*这个是箭头的大小*/
}

.home .swiper-button-prev{
	right: 4rem;
}

.services .box-container{ 	/*这个是让our services那边并排*/
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
	gap: 1.5rem;
}

.services .box-container .box{		/*这个是our services的图片后面的颜色*/
	padding: 3rem 2rem;
	text-align: center;
	background: var(--light-bg);
}

.custom-image {		/*这个是our services里面的图片的大小*/
	width: 100%;
	height: auto;
	max-width: 250px;
}

.services .box-container .box h3{	/*这边是our services里面的字的大小*/
	color: #000;
	font-size: 1.1rem;
	padding-top: 0.5rem;
}

.home-about{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

.home-about .image{			/*照片大小*/
	flex:1 1 41rem;
}

.home-about .image img{		/*照片大小*/
	width: 100%;
}

.home-about .content{		/*照片大小*/
	flex: 1 1 41rem;
	padding: 3rem;		/*图片跟字横向间距*/
	background: var(--light-bg);
}

.home-about .btn{
	display: inline-block;
	background: var(--black);	/*home那边btn格子的颜色*/
	margin-top: 1rem;		/*home那边btn跟h3的上下间距*/
	color: var(--white);
	font-size: 1rem;		/*home那边的btn字体大小*/
	padding: 1rem 3rem;		/*home那边的btn的格子大小*/
	cursor: pointer;
}

.home-about .btn:hover{			/*home那边的btn的格子移过去的颜色*/
	background: var(--main-color);
}

.home-about .content h3{
	font-size: 2rem;
	color: var(--black);
}

.home-about .content p{
	font-size: 1rem;
	padding: 1rem 0;
	line-height: 2;
	color: var(--black);
}

.home-packages{
	background: var(--light-bg);
}

.home-packages .box-container{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
	gap: 2rem;
}

.home-packages .box-container .box .image{
	height: 25rem;
	overflow: hidden;
}

.home-packages .box-container .box{
	border: var(--border);				/*home packages图片旁边的颜色*/
	box-shadow: var(--box-shadow);		/*home packages图片后面的阴影颜色*/
	background: var(--white);
}

.home-packages .box-container .box .image img{
	height: 100%;
	width: 100%;
	object-fit: cover;
	transition: .2s linear;
}

.home-packages .btn{
	display: inline-block;
	background: var(--black);	/*home那边btn格子的颜色*/
	margin-top: 1rem;		/*home那边btn跟h3的上下间距*/
	color: var(--white);
	font-size: 1rem;		/*home那边的btn字体大小*/
	padding: 1rem 3rem;		/*home那边的btn的格子大小*/
	cursor: pointer;
}

.home-packages .btn:hover{			/*home那边的btn的格子移过去的颜色*/
	background: var(--main-color);
}

.home-packages .box-container .box .content{
	padding: 2rem;
	text-align: center;
}

.home-packages .box-container .box .content h3{
	font-size: 1.5rem;
	color: var(--black);
}

.home-packages .box-container .box .content p{
	font-size: 1rem;			/*home packages里面p的字体大小*/
	color: var(--light-black);
	line-height: 1;			/*home packages里面h3跟p的上下间距*/
	padding: 1rem 0;		/*home packages里面p的字体大小*/
}

.home-packages .load-more{
	text-align: center;		/*home packages里面load more的center*/
	margin-top: 1rem;		/*home packages里面load more跟的上下间距*/
}

.home-offer{
	text-align: center;
}

.home-offer .content{
	max-width: 50rem;
	margin:0 auto;
}

.home-offer .content h3{		/*home offer那边的h3字体大小*/
	font-size: 2.5rem;
	color: var(--black);
}

.home-offer .content p{			/*home offer那边的p字体大小*/
	font-size: 1rem;
	color: var(--light-black);
	line-height: 2;
	padding: 1rem 0;
}

.home-offer .btn{
	display: inline-block;
	background: var(--black);	/*home那边btn格子的颜色*/
	margin-top: 1rem;		/*home那边btn跟h3的上下间距*/
	color: var(--white);
	font-size: 1rem;		/*home那边的btn字体大小*/
	padding: 1rem 3rem;		/*home那边的btn的格子大小*/
	cursor: pointer;
}

.home-offer .btn:hover{		
	background: var(--main-color);
}

.footer{
	text-align: center;
	background-color: #000;
	color: #fff;
	padding: 10px;
}

.footer p{
	font-size: 13px;
	color: #a3a3a3;
}
































/*media queries*/
@media (max-width:1200px){

	section{
		padding: 3rem 5%;
	}

	.custom-image {		/*这个是our services里面的图片的大小*/
	width: 100%;
	height: auto;
	max-width: 150px;
	}

	.home .slide {
    text-align: center;
    padding: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: 100% 100% !important; /* 将背景图片的大小设置为容器大小 */
    background-position: center !important;
    background-attachment: fixed;
    min-height: 45rem;
	}
}

@media (max-width:991px){

	html{
		font-size: 55%;
	}

	section{
		padding: 3rem 2rem;
	}

	.home .slide {
    text-align: center;
    padding: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: 100% 100% !important; /* 将背景图片的大小设置为容器大小 */
    background-position: center !important;
    background-attachment: fixed;
    min-height: 45rem;
	}

	.contactUs{
		padding: 20px;
	}

	.box{
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		grid-template-areas:
		"form"
		"info"
		"map";
	}

	.formBox .row50{
		display: flex;
		gap: 0;
		flex-direction: column;
	}

	.inputBox{
		width: 100%;
	}

	.contact{
		padding: 30px;
	}

	.map{
		min-height: 300px;
		padding: 0;
	}
}

@media(max-width: 768px){    /*这边是屏幕尺寸变小之后的东西*/

	#menu-btn{
	display: inline-block;
	transition: .2s linear;
}

	#menu-btn .fa-bars{
		transform: rotate(0deg);
	}

	#menu-btn .fa-times{
		transform: rotate(360deg);
	}

	.header .navbar{
		position: absolute;
		top: 99%; left: 0; right: 0;
		background-color: var(--white);
		border-top: var(--border);
		padding:2rem;
		transition: .2s linear;
		opacity: 0;
	}

	.navbar.active{
		opacity: 1;
	}

	.header .navbar a{
		display: block;
		margin: 2rem;
		text-align: center;
	}

	.home .slide {
    text-align: center;
    padding: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: 100% 100% !important; /* 将背景图片的大小设置为容器大小 */
    background-position: center !important;
    background-attachment: fixed;
    min-height: 45rem;
	}
}

@media(max-width: 450px){

	html{
		font-size: 50%;
	}

	.heading-title{
		font-size: 2rem;
	}

	.home .slide {
    text-align: center;
    padding: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: 100% 100% !important; /* 将背景图片的大小设置为容器大小 */
    background-position: center !important;
    background-attachment: fixed;
    min-height: 45rem;
	}
}








/*about.php start*/
.heading {				/*about.php里面heading的图片*/
    text-align: center;
    padding: 2rem;
     display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover !important;
    background-position: center !important;
    background-attachment: fixed;
    min-height: 25rem;
}
.heading h1{
	font-size: 7rem;		/*about.php里面的h1的字体大小*/
	text-transform: uppercase;
	color: var(--white);
	text-shadow: var(--text-shadow);
}

.about{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap:3rem;
}

.about .image{
	flex: 1 1 41rem;
}

.about .image img{
	width: 100%;
}

.about .content{
	flex: 1 1 41rem;
	text-align: center;
}

.about .content h3{
	font-size: 3rem;
	color: var(--black);
	padding: 1rem 0;
}

.about .content p{
	font-size: 1rem;
	color: var(--light-black);
	line-height: 2;
	padding: 0rem 0;
	letter-spacing: -0.05em; /* 使用负值来减小字符之间的间距 */
	text-align: left; /* 将文本左对齐 */
}

.about .content .icons-container {
    margin-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: flex-end;
}

.about .content .icons-container .icons{
	background: var(--light-bg);
	padding: 2rem;
	flex: 1 1 6rem;
}

.about .content .icons-container .icons i {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: var(--main-color);
}

.about .content .icons-container .icons span {
    font-size: 1.5rem;
    color: var(--light-black);
}






/*package.php start*/
.packages .box-container{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
	gap: 2rem;
}

.packages .box-container .box .image{
	height: 25rem;
	overflow: hidden;
}

.packages .box-container .box{
	border: var(--border);				/*home packages图片旁边的颜色*/
	box-shadow: var(--box-shadow);		/*home packages图片后面的阴影颜色*/
	background: var(--white);
	display: none;
}

.packages .box-container .box:nth-child(1),
.packages .box-container .box:nth-child(2),
.packages .box-container .box:nth-child(3),
.packages .box-container .box:nth-child(4),
.packages .box-container .box:nth-child(5),
.packages .box-container .box:nth-child(6){
	display: inline-block;
}

.packages .box-container .box .image img{
	height: 100%;
	width: 100%;
	object-fit: cover;
	transition: .2s linear;
}

.packages .btn{
	display: inline-block;
	background: var(--black);	/*home那边btn格子的颜色*/
	margin-top: 1rem;		/*home那边btn跟h3的上下间距*/
	color: var(--white);
	font-size: 1rem;		/*home那边的btn字体大小*/
	padding: 1rem 3rem;		/*home那边的btn的格子大小*/
	cursor: pointer;
}

.packages .btn:hover{			/*home那边的btn的格子移过去的颜色*/
	background: var(--main-color);
}

.packages .box-container .box .content{
	padding: 2rem;
	text-align: center;
}

.packages .box-container .box .content h3{
	font-size: 1.5rem;
	color: var(--black);
}

.packages .box-container .box .content p{
	font-size: 1rem;			/*home packages里面p的字体大小*/
	color: var(--light-black);
	line-height: 1;			/*home packages里面h3跟p的上下间距*/
	padding: 1rem 0;		/*home packages里面p的字体大小*/
}

.packages .load-more{
	text-align: center;		/*home packages里面load more的center*/
	margin-top: 1rem;		/*home packages里面load more跟的上下间距*/
}










/*Contact us start*/

.contactUS {
	position: relative;
	width: 100%;
	padding: 40px 100px;
}

.contactUS .title {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 2em;
}

.contactUS .title h2 {
	color: #000;
	font-weight: 500;
}

.form{
	grid-area: form;
}

.info{
	grid-area: info;
}

.map{
	grid-area: map;
}

.contact{
	padding: 40px;
	background: #edebeb;
	box-shadow: 0 5px 35px rgba(0,0,0,0.15);
}

.contactbox{
	position: relative;
	display: grid;
	grid-template-columns: 2fr 1fr;
	grid-template-rows: 5fr 4fr;
	grid-template-areas:
	"form info"
	"form map";
	grid-gap: 20px;
	margin-top: 20px;
}

.contact h3{
	color: #000;
	font-weight: 500;
	font-size: 1.4em;
	margin-bottom: 10px;
}


/*form*/

.formBox{
	position: relative;
	width: 100%;
}

.formBox .row50{
	display: flex;
	gap: 20px;
}

.inputBox{
	display: flex;
	flex-direction: column;
	margin-bottom: 10px;
	width: 50%;
}

.formBox .row100 .inputBox{
	width: 100%;
}

.inputBox span{
	color: #000;
	margin-top: 10px;
	margin-bottom: 5px;
	font-weight: 500;
}

.inputBox input{
	padding: 10px;
	font-size: 1.1em;
	outline: none;
	border: 1px solid #333;
}

.inputBox textarea{
	padding: 10px;
	font-size: 1.1em;
	outline: none;
	border: 1px solid #333;
	min-height: 220px;
	margin-bottom: 10px;
}

.inputBox button[type="submit"]{
	background: #000;
	color: #fff;
	border: none;
	font-size: 1.1em;
	max-width: 120px;
	font-weight: 500;
	cursor: pointer;
	padding: 14px 15px;
}

.inputBox::placeholder{
	color: #999;
}



/*info*/
.info{
	background: #808080;
}

.info h3{
	color: #fff;
}

.info .infoBox div{
	display: flex;
	align-items: center;
	margin-bottom: 10px;
}

.info .infoBox div span{
	min-width: 40px;
	height: 40px;
	color: #fff;
	background: #a3a2a2;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1.5em;
	border-radius: 50%;
	margin-right: 15px;
}

.info .infoBox div p{
	color: #fff;
	font-size: 1.1em;
}

.info .infoBox div a{
	color: #fff;
	text-decoration: none;
}

.sci{
	margin-top: 40px;
	display: flex;
}

.sci li{
	list-style: none;
	margin-right: 15px;
}

.sci li a{
	color: #fff;
	font-size: 2em;
	color: #ccc;
}

.map{
	padding: 0;
}

.map iframe{
	width: 100%;
	height: 100%;
}