#vesak{
        overflow-x: hidden;
    }
    #vesak-bg{
        height: 570px !important;
        background: url(https://cmsapi.blueoceanfin.com/media/1682387619730-232-vesak-bg.webp);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        padding: 0;
    }
    div#vesak-element {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: stretch;
    }
    #vesak-left-element-buddha {
        position: absolute;
        width: 50%;
        height: 570px;
        left: -10rem;
        top: 4.8rem;
    }
    #vesak-left-element-buddha img {
        width: auto;
        max-width: 656.02px;
        right: 0;
        position: absolute;
        bottom: 0;
        z-index: 1;
    }
    #vesak-text{
        height: 570px;
        padding: 0;
    }
    #vesak-text2 {
        width: 375px !important;
        height: 237px !important;
        z-index: 2;
        position: relative;
        filter: drop-shadow(2.96907px 2.96907px 5.93814px rgba(0, 0, 0, 0.25));
    }
    #vesak-text2 h2,#vesak-text2 h5{
        color: #fff !important;
    }
    #vesak-left-element, #vesak-right-element {
        opacity: 0.4;
    }

    /* lotus animation start*/
        #lotus {
            transform: rotate3d(2, 0, 0, 110deg) scale3d(1.3, 1.3, 1.3);
            will-change: transform;
            transform-style: preserve-3d;
            right: 180px;
            position: absolute;
            bottom: 260px;
            transform-origin: center center;
        }
        #lotus ul,#lotus li,#lotus svg {
        	will-change: transform;
	        transform-style: preserve-3d;
        }
        #lotus li,#lotus svg {
            transform-origin: center top;
        }
        .lotus {
            transform-origin: center center;
            transform: rotateX(70deg);
            animation: rotate 20000ms linear infinite forwards;
            position: absolute;
            top: calc(50% - 18px);
            left: calc(50% - 18px);
            width: 36px;
            height: 36px;
        }
        .lotus ul {
            position: relative;
            width: 36px;
            height: 36px;
        }
        .lotus li {
            position: absolute;
        }
        .lotus li svg {
            display: block;
            height: auto;
        }
        .lotus li svg path {
            fill: url(#gradient);
        }
        .lotus:nth-child(1) li {
            top: 18px;
            left: calc(50% - 18px);
        }
        .lotus:nth-child(1) li:nth-child(1) {
            transform: rotateZ(45deg) rotateX(15deg) rotateY(5deg);
        }
        .lotus:nth-child(1) li:nth-child(2) {
            transform: rotateZ(90deg) rotateX(15deg) rotateY(5deg);
        }
        .lotus:nth-child(1) li:nth-child(3) {
            transform: rotateZ(135deg) rotateX(15deg) rotateY(5deg);
        }
        .lotus:nth-child(1) li:nth-child(4) {
            transform: rotateZ(180deg) rotateX(15deg) rotateY(5deg);
        }
        .lotus:nth-child(1) li:nth-child(5) {
            transform: rotateZ(225deg) rotateX(15deg) rotateY(5deg);
        }
        .lotus:nth-child(1) li:nth-child(6) {
            transform: rotateZ(270deg) rotateX(15deg) rotateY(5deg);
        }
        .lotus:nth-child(1) li:nth-child(7) {
            transform: rotateZ(315deg) rotateX(15deg) rotateY(5deg);
        }
        .lotus:nth-child(1) li:nth-child(8) {
            transform: rotateZ(360deg) rotateX(15deg) rotateY(5deg);
        }
        .lotus:nth-child(1) li svg {
            width: 72px;
            transform: rotateX(75deg);
            animation: bloom 1000ms cubic-bezier(0, 0.75, 0.25, 1) forwards;
            animation-delay: 0.5s;
        }
        .lotus:nth-child(2) li {
            top: 15px;
            left: calc(50% - 15px);
        }
        .lotus:nth-child(2) li:nth-child(1) {
            transform: rotateZ(60deg) rotateX(30deg) rotateY(5deg);
        }
        .lotus:nth-child(2) li:nth-child(2) {
            transform: rotateZ(120deg) rotateX(30deg) rotateY(5deg);
        }
        .lotus:nth-child(2) li:nth-child(3) {
            transform: rotateZ(180deg) rotateX(30deg) rotateY(5deg);
        }
        .lotus:nth-child(2) li:nth-child(4) {
            transform: rotateZ(240deg) rotateX(30deg) rotateY(5deg);
        }
        .lotus:nth-child(2) li:nth-child(5) {
            transform: rotateZ(300deg) rotateX(30deg) rotateY(5deg);
        }
        .lotus:nth-child(2) li:nth-child(6) {
            transform: rotateZ(360deg) rotateX(30deg) rotateY(5deg);
        }
        .lotus:nth-child(2) li svg {
            width: 60px;
            transform: rotateX(60deg);
            animation: bloom 1100ms cubic-bezier(0, 0.75, 0.25, 1) 150ms forwards;
            animation-delay: 0.5s;
        }
        .lotus:nth-child(3) li {
            top: 12px;
            left: calc(50% - 12px);
        }
        .lotus:nth-child(3) li:nth-child(1) {
            transform: rotateZ(120deg) rotateX(60deg) rotateY(5deg);
        }
        .lotus:nth-child(3) li:nth-child(2) {
            transform: rotateZ(240deg) rotateX(60deg) rotateY(5deg);
        }
        .lotus:nth-child(3) li:nth-child(3) {
            transform: rotateZ(360deg) rotateX(60deg) rotateY(5deg);
        }
        .lotus:nth-child(3) li svg {
            width: 48px;
            transform: rotateX(30deg);
            animation: bloom 1200ms cubic-bezier(0, 0.75, 0.25, 1) 300ms forwards;
            animation-delay: 0.5s;
        }
        @keyframes rotate {
            from {
                transform: rotateX(90deg) rotateZ(0deg);
            }
            to {
                transform: rotateX(90deg) rotateZ(360deg);
            }
        }
        @keyframes bloom {
            to {
                transform: none;
            }
        }
        
        /* lotus animation end */

        #vesak-right-element-blossom-line {
            position: absolute;
            width: 50%;
            height: 570px;
            right: 2.5rem;
            top: 0;
            filter: drop-shadow(0px 2.96907px 2.96907px rgba(0, 0, 0, 0.25));
        }
        #vesak-right-element-blossom-line img {
            animation: blossomframerotate 20000ms linear infinite forwards;
            transform-origin: center center;
            width: 100%;
            max-width: 638.35px;
            position: absolute;
            top: 6%;
            left: 0;
        }
        @keyframes blossomframerotate {
            from {
                transform: rotateX(80deg) rotateZ(0deg);
            }
            to {
                transform: rotateX(80deg) rotateZ(-360deg);
            }
        }


        #vesak-element-lantern {
            position: absolute;
            height: 570px;
            width: 100%;
            max-width: 1920px;
            min-width: 1850px;
        }
        .vesak-element-lantern-all {
            position: absolute;
            width: 137.96px;
            height: 150.57px;
        }
        img.lantern-body, img.lantern-light{
            position: absolute;
            width: 100%;
            transform-origin: top center;
        }
        #vesak-element-lantern-1 img.lantern-body, #vesak-element-lantern-1 img.lantern-light{
            animation: lantern-1 12s ease-in-out infinite;
        }

        #vesak-element-lantern-3 img.lantern-body, #vesak-element-lantern-3 img.lantern-light{
            animation: lantern-2 13s ease-in-out infinite;
        }

        #vesak-element-lantern-5 img.lantern-body, #vesak-element-lantern-5 img.lantern-light {
            animation: lantern-3 14s ease-in-out infinite;
        }

        #vesak-element-lantern-2 img.lantern-body, #vesak-element-lantern-2 img.lantern-light{
            animation: lantern-4 11s ease-in-out infinite;
        }

        #vesak-element-lantern-4 img.lantern-body, #vesak-element-lantern-4 img.lantern-light{
            animation: lantern-5 10s ease-in-out infinite;
        }

        #vesak-element-lantern-6 img.lantern-body, #vesak-element-lantern-6 img.lantern-light {
            animation: lantern-6 15s ease-in-out infinite;
        }

        #vesak-element-lantern-1 {
            top: -11%;
            left: 8%;
            width: 85px;
        }
        #vesak-element-lantern-2 {
            top: 27%;
            left: 35%;
            width: 80px;
        }
        div#vesak-element-lantern-3 {
            top: -6%;
            left: 38%;
            width: 65px;
        }
        #vesak-element-lantern-4 {
            top: 55%;
            left: 38%;
            width: 59px;
        }
        #vesak-element-lantern-5 {
            top: 20%;
            left: 7%;
            width: 72px;
        }
        div#vesak-element-lantern-6 {
            top: 50%;
            left: 9%;
            width: 71px;
        }

        @keyframes lantern-1 {
            0% { transform: rotate(0deg) translate(0,123px);}             
            20% { transform: rotate(5deg) translate(0,100px);} 
            40% { transform: rotate(-5deg) translate(0,123px);}
            60% { transform: rotate(5deg) translate(0,110px);} 
            80% { transform: rotate(-5deg) translate(0,135px); } 
            100% { transform: rotate(0deg) translate(0,123px);} 
        }

        @keyframes lantern-2 {
            0% { transform: rotate(-5deg) translate(0,113px);}             
            20% { transform: rotate(3deg) translate(0,90px);} 
            40% { transform: rotate(-4deg) translate(0,123px);}
            60% { transform: rotate(2deg) translate(0,130px);} 
            80% { transform: rotate(-3deg) translate(0,115px);} 
            100% { transform: rotate(-5deg) translate(0,113px);} 
        }

        @keyframes lantern-3 {
            0% { transform: rotate(-3deg) translate(0,114px);}             
            20% { transform: rotate(5deg) translate(0,123px);} 
            40% { transform: rotate(-7deg) translate(0,111px);}
            60% { transform: rotate(4deg) translate(0,130px);} 
            80% { transform: rotate(-6deg) translate(0,122px);} 
            100% { transform: rotate(-3deg) translate(0,114px);} 
        }

        @keyframes lantern-4 {
            0% { transform: rotate(-8deg) translate(0,130px);}             
            20% { transform: rotate(2deg) translate(0,103px);} 
            40% { transform: rotate(-6deg) translate(0,133px);}
            60% { transform: rotate(5deg) translate(0,110px);} 
            80% { transform: rotate(-2deg) translate(0,115px);} 
            100% { transform: rotate(-8deg) translate(0,130px);} 
        }

        @keyframes lantern-5 {
            0% { transform: rotate(-7deg) translate(0,103px);}             
            20% { transform: rotate(5deg) translate(0,120px);} 
            40% { transform: rotate(-7deg) translate(0,113px);}
            60% { transform: rotate(3deg) translate(0,100px);} 
            80% { transform: rotate(-4deg) translate(0,124px);} 
            100% { transform: rotate(-7deg) translate(0,103px);} 
            
        }
        @keyframes lantern-6 {
            0% { transform: rotate(-5deg) translate(0,112px);}             
            20% { transform: rotate(3deg) translate(0,123px);} 
            40% { transform: rotate(-6deg) translate(0,103px);}
            60% { transform: rotate(4deg) translate(0,110px);} 
            80% { transform: rotate(-2deg) translate(0,94px);} 
            100% { transform: rotate(-5deg) translate(0,112px);} 
        }

        #vesak-demo-btn{
            color: #fff;
            padding: 5px 20px;
            border-radius: 20px;
            border: 1px solid transparent;
        }

        

    @media screen and (min-width: 1400px){
      #vesak-text2 {
        width: 375px;    
      }
    }
    @media screen and (min-width: 1201px) and (max-width: 1400px){
      #vesak-text2 {
          width: 375px !important;;
      }
    }
    @media screen and (min-width: 993px) and (max-width: 1200px){
      #vesak-text2 {
          width: 90% !important;
          margin-left: 5%;
          width: 280px !important;
      }
      #vesak-text2 h5{
        margin-bottom: 1rem!important;
      }
    }

    @media (max-width: 992px){
        #vesak-element{
            flex-direction: column;
        }
        #vesak-element-lantern{
            max-width: 992px;
            min-width: 220%;
            margin-left: -40px;
        }
        #vesak-left-element-buddha{
            position: absolute;
            width: 100%;
            height: 570px;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            display: flex;
            justify-content: center;
        }
        #vesak-left-element-buddha img {
            height: 49vw;
            max-height: 266px;
            right: auto;
            position: absolute;
            z-index: 1;
            bottom: 0;
            transform: translate(0, 34px);
        }
        #lotus {
            transform: rotate3d(2, 0, 0, 110deg) scale3d(1, 1, 1) translate(-50%, -50%) !important;
            left: 50% !important;
            top: 50% !important;
            margin: 115px 0 0 18px !important;
            right: unset !important;
            bottom: unset !important;
        }
        #vesak-right-element-blossom-line {
            position: absolute;
            width: 100%;
            height: 570px;
            right: unset;
            top: unset;
            filter: drop-shadow(0px 2.96907px 2.96907px rgba(0, 0, 0, 0.25));
            display: flex;
            justify-content: center;
        }
        #vesak-right-element-blossom-line img {
            animation: blossomframerotate 20000ms linear infinite forwards;
            transform-origin: center center;
            width: 100%;
            max-width: 638.35px;
            position: absolute;
            top: 96px;
            left: unset;
        }
        .row{
            display:flex;
            
        }
        /* en */
        #carouselExampleCaptions{
          transform: scale(0.81) translate(0, -42px);
        }
        /* ms
        #vesak-text2 h2 {
            font-size: 30px;
            margin-top: 15px;
        }
        #carouselExampleCaptions{
            transform: scale(0.81) translate(0, -51px);
        }
        zh
        #vesak-text2 h2 {
            font-size: 30px;
            margin-top: 70px;
        }
        #carouselExampleCaptions{
            transform: scale(0.81) translate(0, -51px);
        }
        ch
        #vesak-text2 h2 {
            font-size: 30px;
            margin-top: 70px;
        }
        #carouselExampleCaptions{
            transform: scale(0.81) translate(0, -51px);
        }
        vn
        #carouselExampleCaptions{
            transform: scale(0.81) translate(0, -52px);
        }
        th
        #vesak-text2 h2 {
            font-size: 30px;
            margin-top: 15px;
        }
        #carouselExampleCaptions{
            transform: scale(0.81) translate(0, -51px);
        } */


        #vesak-text2 {
            width: 375px !important;
            margin-top: 60px;
            transform: scale(0.9);
            display: inline-table;
        }
        #vesak-text2 h2{
          font-size: 30px;
        }
        #vesak-trading-btn {
          transform: translate(0,7px);
        }
        #vesak-demo-btn {
          transform: translate(0,7px);
        }
    }

  #vesak-demo-btn:hover {
    color: #140E39;
    background-color: #140E39;
    border-color: #EEE8FF;
    color: #EEE8FF;
  }
  #vesak-trading-btn:hover {
      background-color: #140E39;
      border-color: #EEE8FF;
      color: #EEE8FF;
  }
  @media (min-width: 768px){
    .mb-md-5{
      margin-bottom: 15px !important;
    }
    #carouselExampleCaptions{
      width: 80% !important;
      margin-left: 10%;
      transform: scale(0.75) translate(0, -70px) !important;
    }
    /* vn
    #carouselExampleCaptions{
      width: 80% !important;
      margin-left: 10%;
      transform: scale(0.75) translate(0, -81px) !important;
    } */
    #vesak-trading-btn {
      transform: translate(0,0);
    }
    #vesak-demo-btn {
      transform: translate(0,0);
    }
    
  }