*{
    margin:0;
    padding:0;
    /* box-sizing: border-box; */
}
html {
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
    overflow-x: hidden;
}
body{
    min-height: 100vh;
    position: relative;
}
.main{
   position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: -1;
    background: url("00046-4198175813-0000.jpg");
    background-size: cover;
    background-position: bottom;
    background-attachment: fixed;
}
@font-face {
    font-family: "LIYUZE";
    src: url('AaBeiDaoHuanJing-HuaYuanJiaQi-2.ttf');
}
.text-overlay{
    color: white;
    font-size: 30px;
    font-family: 'LIYUZE';
}
.text-overlay h1 {
    font-size: 90%;
    text-align: center;
}
section {
  display: flex;
  align-items: center;
  justify-content: center;
    width: 100vw;
    height: 100vh;
    scroll-snap-align: start;
    position: relative;
    z-index: 2;
}
#canvas{
    filter:drop-shadow(0 0 1px white) ;
    z-index: 1;
    position: fixed;
}
.with-image {
    position: relative;
    flex-direction: column;
    gap: 15px;
}
.circle-image {
    height: 130px;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}
.image-caption {
    color: white;
    font-family: 'LIYUZE';
    font-size: 30px;
    letter-spacing: 1px;
    opacity: 0.9;
    text-align: center;
}
.image-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.gray{
    color: gray;
}
.wrapper{
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  width: 100%;
}
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
.wrapper .button:hover{
    width: 200px;
	cursor: pointer;
}


.wrapper .button .icon i{
    font-size: 25px;
    line-height: 60px;
	  transition: color 0.2s ease; 
}
.wrapper .button:hover .icon i{
    color: #fff;
	/* cursor: pointer; */
}
.wrapper .button span{
    font-size: 20px;
    font-weight: 500;
    line-height: 60px;
    margin-left: 10px;
    transition: all 0.3s ease-out;
}

.wrapper .button{
    height: 60px;
    width: 60px;
	
    overflow: hidden;
    background: #fff;
    border-radius: 50px;
    transition: all 0.3s ease-out;
	}
.wrapperone{
	gap:20px;
	display: flex;
}
.wrapperone .button .icon{
    display: inline-block;
    height: 60px;
    width: 60px;
    text-align: center;
    border-radius: 50px;
    box-sizing: border-box;
    line-height: 60px;
    transition: all 0.3s ease-out;
}
.wrappertwo{
	gap:20px;
	display: flex;
}
.wrappertwo .button .icon{
    display: inline-block;
    height: 60px;
    width: 60px;
    text-align: center;
    border-radius: 50px;
    box-sizing: border-box;
    line-height: 60px;
    transition: all 0.3s ease-out;
}
.wrapperthree{
	gap:20px;
	display: flex;
}
.wrapperthree .button .icon{
    display: inline-block;
    height: 60px;
    width: 60px;
    text-align: center;
    border-radius: 50px;
    box-sizing: border-box;
    line-height: 60px;
    transition: all 0.3s ease-out;
}
.wrapperone .button:nth-child(1):hover .icon {
    background: linear-gradient(45deg, #1877F2, #166FE5);
	 cursor: pointer;
}

.wrapperone .button:nth-child(2):hover .icon {
    background: linear-gradient(45deg, #1D9BF0, #1A8CD8); 
	cursor: pointer;
}

.wrappertwo .button:nth-child(1):hover .icon {
    background: linear-gradient(45deg, #FE2C55, #69C9D0); 
	cursor: pointer;
}

.wrappertwo .button:nth-child(2):hover .icon {
    background: linear-gradient(45deg, #FB7299, #E76991); 
	cursor: pointer;
}

.wrapperthree .button:nth-child(1):hover .icon {
    background: linear-gradient(135deg, #1B2838, #2A3F5A); 
	cursor: pointer;
}
.wrapperthree .button:nth-child(2):hover .icon {
    background: linear-gradient(45deg, #FFE14D, #FFAA00);
	cursor: pointer;
}
.wrapperone .button:nth-child(1) span{
    color: #0055ff;
}
.wrapperone .button:nth-child(2) span{
    color: #00aaff;
}
.wrappertwo .button:nth-child(1) span{
    color: #000000;
}
.wrappertwo .button:nth-child(2) span{
    color: #E76991;
}
.wrapperthree .button:nth-child(1) span{
    color: #4267B2;
}
.wrapperthree .button:nth-child(2) span{
    color: #FFAA00;
}