
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	
}

.top {
	min-height: 50px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: rgb(22, 154, 187);
	position: sticky;
	top: 0;
	z-index: 3;
}

.top .container {
	display: flex;
	align-items: center;
}

.container .icon {
	width: 100px;
	height: 100px;
	margin: 15px 15px 15px 15px;
}

.container .title {
	font-size: clamp(3.6em, 4.5vw, 5em);
}

.top .pages {
	font-size: clamp(0.5em, 1.5vw, 2em);
}

.top a {
	text-decoration: none;
	color: white;
}

.pages .buttons {
	margin: 0 5px;
	padding: 10px;
	border-radius: 20px;
/* 	transition: 0.5s linear; */
/* 	border: 1px red solid; */
}

/* @media (max-width: 1200px){
	.pages .buttons {
		margin: 0 1px;
		padding: 8px;
	}
} */

.pages .cur {
	background: darkblue;
}

.pages .cur:hover {
	text-decoration: underline;
	border: 2px black solid;
}

.pages .not_cur:hover {
	text-decoration: underline;
	background: rgb(119, 119, 119);

}

.menu_btn {
	position: fixed;
	top: -500%;
	color: white;
	font-size: clamp(2em, 10vw, 3em);
	z-index:3;
	margin: 5px 15px 0 0;
}

@media (max-width: 1050px){
	.top .menu_btn {
		position: relative;
	}

	.top .pages {
		position: fixed;
		top: -500%;
	}
}


@media (max-width: 1050px){
	.top .icon {
		width: 12vw;
		height: 12vw;
		margin: 10px 10px;
	}
	.top .title {
		font-size: max(10vw, 1.5em);
	}
}

.sidebar {
	height: 100vh;
	z-index: 2;
	background:rgb(22, 154, 187);
	width: 50vw;
	position: fixed;
	right: -200%;
	top: 0;
	transition: 0.6s ease;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	font-size: 2em;
}

.sidebar_in {
	right: 0;
}

.sidebar .space {
	min-height: 140px;
}

.sidebar a{
	text-decoration: none;
	color: rgb(255, 255, 255);
}

.sidebar .items {
	margin: 15px 0;
}

.sidebar .cur {
	background:rgb(41, 41, 90);
	padding: 10px;
	border-radius: 20px;
}

/* ............................................ */

.the_papers {
    min-height: 50vh;
    background:rgb(226, 226, 226)
}

.swimming_course .title {
    font-size: clamp(50px, 10vw, 90px);
}

.swimming_course .flex_container {
    display: flex;
    flex-wrap: wrap;
    gap: 30px 0;
}

.flex_container .course_paper {	
    width: min(100vw, 1000px)
}

.view_img {
    font-size: clamp(20px, 6vw, 50px);
    margin: 10px 10px 50px 10px;
}

.swimming_course .download_title {
	font-size: clamp(40px, 5vw, 65px);
}

.swimming_course .downloads {
	font-size: clamp(25px, 3vw, 45px);
}

/* ............................................ */

.con_us {
	min-height: 40vh;
	background: rgb(41, 41, 90);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	padding-top: 20px;
}

.con_us .block_one {
/* 	border: pink 2px solid; */
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 5px;
	min-width: 250px;
}

.block_one .chin_name {
	color: white;
	padding: 5px;
}

.block_one .eng_name {
	color: rgb(180, 180, 180);
	padding: 5px;
}

.con_us .block_two {
/* 	border: pink 2px solid; */
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin: 5px;
	min-width: 250px;
}

.con_us .title {
	color: black;
	font-size: 30px;
	font-weight: 900;
}

.con_us .line {
	height: 2px;
	width: 100%;
	background: white;
	margin: 10px 0;
}

.con_us .container {
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
	color: white;
}

.con_us .bx {
	margin: 10px;
}

.block_two .bx {
	color: white;
	font-size: 35px;
}

.block_two a {
	text-decoration: none;
}
.block_two .small_container {
	display: flex;
	flex-direction: column;
	align-items: center;
	color: white;
	margin: 0 5px;

}

.con_us .block_three {
	min-width: 250px;
/* 	border: 2px pink solid; */
	margin: 5px 5px 100px 5px;
}

.block_three .address {
	color: white;
}

.block_three a {
	text-decoration: none;
}

.con_us .blocks {
	padding: 15px;
}

@media (max-width: 1000px){
	.blocks {
		width: 80vw;
	}

}

/* ................... */