
.Init,.In{
    height: auto;
    display: flex; 
    justify-content: center;
}
.Init{
    box-sizing: border-box;
    background-color: #ffffff;
    flex-direction: column;
    justify-content: space-between;
}
.container {
	width: 100%;
	min-height: 100vh;
	padding-left: 8%;
	padding-right: 8%;
	box-sizing: border-box;
	overflow: hidden; 
}
.row {
	display: flex;
	justify-content: space-between;
	align-items: center;
    position: absolute;
    top: 200px;
    z-index: 5;
    left: 129px;
}
/* welcom */
.welcom {
    color: aliceblue;
    position: relative;
    padding: 1%;
    border-radius: 8px;
    width: 450px;
}
.welcom h2 {
	font-size: 54px;
}
.welcom h3 {
    font-family: fantasy;
    font-size: 30px;
    color: #ffffff;
    font-weight: 100;
    margin: 20px 0 10px;
}
.welcom p {
	font-size: 16px;
	color: #ffffffad;
	font-weight: 100; 
}
.welcom::after {
    content: '';
    width: 8px;
    height: 95%;
    background: #ffffffc7;
    position: absolute;
    left: -20px;
    top: 8px;
}
/* stat */
.Statistic{
    background: #f9fafb;
}
.Titlehome{
    color: #111827;
    text-align: center;
    letter-spacing: 6.6px;
    margin-top: 0;
    margin-bottom: 10px;
    font-family: arboria,sans-serif;
    font-size: 36px;
    font-weight: 700;
    line-height: 40px;
}
section.SatisticAthlet {
    background: #ffffff;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 15rem));
    grid-gap: 1.4rem 0.2rem;
    justify-content: center;
    margin-bottom: 50px;
    box-shadow: 0px 10px 15px -3px rgb(0 0 0 / 4%), 0px 4px 6px -2px rgb(0 0 0 / 6%);
    width: 97%;
    max-width: 896px;
    margin: auto;
    padding: 3%;
    margin-bottom: 50px;
    border-radius: 8px;
}
.statNumAthlet {
    color: #01b77b;
    padding-bottom: 8px;
    font-family: Inter,sans-serif;
    font-size: 48px;
    font-weight: 700;
    line-height: 48px;
    text-align: center;
}
.statTitleAthlet {
    margin-top: 0;
    margin-bottom: 0;
    color: #6b7280;
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
}
.color-box {
	position: absolute;
	right: 0;
	top: 0;
	background: linear-gradient(#006aeb,#92edeb);
	border-radius: 20px 0 0 20px;
	height: 100%;
	width: 100%;
	z-index: 0;
	transform: translateX(120px);
}
h4,h5,h6{
    padding: 1%;
    margin: 1%;
}
.better {
    font-size: x-large;
    font-style: italic;
    margin: -2% -2% -2% 0%;
    color: #1cb720;
}
.catimg{
    float: right;
    width: 50%;
    padding: 2%;
}
.catimg h1 {
    color: #242d8f;
}
img.imgbig {
    border-radius: 5px;
    box-shadow: 0px 10px 15px -3px rgb(0 0 0 / 36%), 0px 4px 6px -2px rgb(0 0 0 / 27%);
}
@media screen and (max-width: 750px) {
h1{
    font-size: 21px;
}
.content h2 {
    font-size: 40px;
}
.content h3 {
    font-size: 25px;
}
.content::after {
height: 7%;
}
.content p {
font-size: 20px;
}
a{
    font-size: 20px;
}
.mainIMG .IMG1 {
    width: 80%;
    transform: translate(-30px, 0px);
}
.imgmid {
    width: 65%;
}
}
@media screen and (max-width: 625px) {
.mainIMG .IMG1 {
    width: 90%;
    margin: 10%;
}
.row{
    display: block;
}
.content{
    width: 100%;
}
.catimg {
width: auto;
}
}
@media screen and (max-width: 520px) {
.top-content {
    height: auto;
    flex-direction: column;
}
.fst-container h1{
    font-size: 40px;
}
.imgmid {
    width: 80%;
}
h1{
    font-size: 19px;
}
.content h2 {
    font-size: 30px;
}
.welcom h2{
    font-size: 40px;
}
.welcom h3{
    font-size: 25px;
}
.welcom p{
    font-size: 15px;
}
button.btn2,button.btn3{
    font-size: medium;
    padding: 8px 20px;
}
.content h3 {
    font-size: 20px;
    padding-left: 20%;
}
.content p {
font-size: 18px;
}
.content::after {
    height: 5%;
    }
a{
    font-size: 18px;
}
.mainIMG .IMG1 {
    width: 100%;
}
.list{
    width:100%;
}
}
@media screen and (max-width: 350px) {
    .imgmid {
        width: 90%;
    }
    .welcom h2{
        font-size: 35px;
    }
    .welcom h3{
        font-size: 20px;
    }
    .welcom p{
        font-size: 14px;
    }
}
/* swiper */
.swiper {
    width: 100%;
    height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #f4f4f5;
display: flex;
max-height:642px;
justify-content: center;
align-items: center;
}
.swiper-slide img {
display: block;
width: 100%;
max-width: 1200px;
object-fit: cover;
margin: auto;
}
.autoplay-progress {
position: absolute;
right: 16px;
bottom: 16px;
z-index: 10;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
color: var(--swiper-theme-color);
}
.autoplay-progress svg {
--progress: 0;
position: absolute;
left: 0;
top: 0px;
z-index: 10;
width: 100%;
height: 100%;
stroke-width: 4px;
stroke: var(--swiper-theme-color);
fill: none;
stroke-dashoffset: calc(125.6 * (1 - var(--progress)));
stroke-dasharray: 125.6;
transform: rotate(-90deg);
}
@keyframes thumb {
to {
    transform: initial;
}
}
@media screen and (max-width: 700px) {
    div.swiper{
      height: 530px;
      padding-top: 80px;
    }
    .swiper-slide img {
        width: auto;
        height: 100%;
    }
}
@media screen and (min-width: 800px) {
    .welcom h2 {
        text-shadow: 2px 6px 3px #000000d1;
    }
    .welcom h3 {
        text-shadow: 1px 4px 3px #000000b3;
    }
    .welcom p {
        text-shadow: 3px 3px 1px #000000ad;
    }
}
@media screen and (max-width: 800px) {
.row{
    position: relative;
    margin: auto;
    top: auto;
    left: auto;
}
.welcom {
    color: #111827;
    position: relative;
    background: none;
    padding: 1%;
    border-radius: 8px;
    width: 95%;
    margin: auto;
}
.welcom h3 {
    color: #1f2837;
}
.welcom p {
    color: #293346;
}
}
@media screen and (max-width: 550px) {
div.swiper{
    height: 420px;
    padding-top: 80px;
}
}