*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
@font-face {
    font-family: bold;
    src: url(../font/static/EduVICWANTBeginner-Bold.ttf);
}
@font-face {
    font-family: regular;
    src: url(../font/static/EduVICWANTBeginner-Regular.ttf);
}
.header{
    width:100%;
    height:1080px;
    background-image:url(../img/rayyu-maldives-tQO09TVNH-M-unsplash.jpg);
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center;
}
.navbar{
    position:fixed;
    width:100%;
    height:80px;
    /* background-color:rgba(0, 0, 0, 0.226); */
}
.logo{
    width:50%;
    height:80px;
    /* background-color:antiquewhite; */
}
.logo img{
    width:12%;
}
.seed{
    padding-right: 32px;
    display:flex;
    justify-content: flex-end;
    width:50%;
    height:80px;
    /* background-color:antiquewhite; */
}
.seed i{
    color:white;
    font-size:24px;
}
.kohrong{
    display:flex;
    justify-content: center;
    align-items: flex-end;;
    width:100%;
    height:300px;
    /* background-color:yellow */
}
.kohrong h1{
    font-family: bold;
    color:white;
    font-size:100px;
}
.subtext{
    display:flex;
    justify-content:center;
    width:100%;
    height:60px;
    /* background-color:yellow; */
}
.subtext p{
    margin-right:-200px;
    width:270px;
    font-family:regular;
    color:white;
}
.callto{
    display:flex;
    justify-content:center;
    width:100%;
    height:48px;
    /* background-color: yellow; */
}
.hello button{
    background-color:rgba(0, 0, 0, 0.315);
    padding-bottom:4px;
    font-family: regular;
    margin-right:-200px;
    width:120px;
    height:24px;
    border:1px solid white;
}
.hello a{
    text-decoration: none;
    color:white;
}
.content1{
    display:flex;
    width:100%;
    height:500px;
    /* background-color:yellow; */
}
.text1{
   width:50%;
   height:500px;
   /* background-color:yellow; */
}
.title1{
    /* display:flex; */
    margin-top:40px;
    margin-left:40px;
    width:100%;
    /* height:100px; */
    /* background-color: yellow; */
}
.title1 h1{
    color:rgba(0, 0, 0, 0.856);
    font-family:bold;
    font-size:60px;
}
.title1 p{
    /* margin-top:-4px; */
    font-family:regular;
}
.sub1{
    max-width:500px;
    /* margin-top:12px; */
    margin-left:40px;
    width:100%;
    height:40px;
    /* background-color:yellow; */
}
.sub1 p{
    font-family: bold;
}
.pic1{
    width:50%;
    height:500px;
    /* background-color:yellow; */
    background-image:url(../img/Adobe\ Express\ -\ file\ \(4\).png);
    background-size:cover;
    background-repeat: no-repeat;
}
.main1{
    max-width:500px;
    margin-left:40px;
}
.main1 p{
    font-family:regular;
}
.main1a{
    max-width:500px;
    margin-left:40px;
}
.main1a p{
    font-family:regular;
}
.but1 button{
    margin-left:40px;
    background-color:rgba(255, 255, 255, 0.315);
    font-family: regular;
    width:120px;
    height:24px;
    border:1px solid rgb(0, 0, 0);
    padding-bottom:4px;
}
.but1 a {
    text-decoration:none;
    color:black;
}
.content2{
    position:relative;
    width:100%;
    height:500px;
    /* background-color:yellow; */
}
.text2{
    position:static;
    margin-left:450px;
    margin-top:100px;
    position:absolute;
    width:300px;
    height:200px;
    background-color:rgb(255, 255, 255);
    z-index:10;
}
.pic2{
    position:absolute;
    width:100%;
    height:500px;
    /* background-color:antiquewhite; */
    z-index:1;
}
.footer{
    background-image: url(../img/madib-zikri-AHlPuTYE2qA-unsplash.png);
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center;
    width:100%;
    height:500px;
    background-color:rgb(255, 255, 255);
}
.coconut{
    display:flex;
    justify-content:center;
    align-items: center;
    width:100%;
    height:460px;
    /* background-color:yellow; */
}
.coconut img{
    margin-right:65px;
    width:200px;
 animation:heartBeat;
    animation-duration:3s;
    animation-delay: 2s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
.circle {
  position: relative;
  /* width: 900px; */
  /* height: 200px; */
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.circle span {
    margin-top:150px;
    font-family:regular;
    font-size:24px;
    color:red;
  position: absolute;
  top: 0;
  transform-origin: 0 140px; /* Tâm xoay nằm ở giữa vòng tròn */
  /* Mỗi chữ cái xoay một góc dựa trên biến --i */
  transform: rotate(calc(var(--i) * 25deg)); 
  font-weight: bold;
}
.circle span {
  /* font-size: 50px; */
  font-weight: bold;
  /* Tạo dải màu gradient */
  background: linear-gradient(90deg, #ff0000, #fff, #ff0000);
  background-size: 200% auto;
  /* Cắt background theo hình chữ */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  /* Chạy animation vô tận */
  animation: shine 2s linear infinite;
}

@keyframes shine {
  to { background-position: 200% center; }
}