@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Moul&family=Moulpali&family=Siemreap&display=swap');


* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
     
        }
        body {
            font-family: Arial, sans-serif;
            background-color: rgb(1, 60, 12);
            margin: 0;
            padding: 0;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 5px;
        } 
        .body-1 {
            width: 375px;
            height: 667px;
            background-color: rgb(1, 60, 12);
            opacity: 1;
            background-size: 40%;
            margin: 0; /* ✅ លុប margin ទាំងអស់ */
            position: relative;
            overflow: hidden;
            border-radius: 5px;
            z-index: 1;
            background-image: url(/kbach-40.png);
             
        }
        .kbach-top{
            width: 100%;
            position: absolute;
        }
        .logo{
            width: 40%;
            position: absolute;
            top: 25%; bottom: 50%; left: 30%; right: 25%;
            z-index: 2;
        }
        .pka-1{
            position: absolute;opacity: 0.8;
            top: 0px;
            left: 0px;
            width: 120px;
             /* ក្រោម */
            transform: rotate(180deg);
            z-index: 201;
        }
        .pka-2{
            position: absolute; opacity: 0.8;
            top: 0px;
            right: 0px;
            width: 120px;
             /* ក្រោម */
            transform: rotate(270deg);
            z-index: 201;
        }
.txt-wedding{
    position: absolute;
    font-family: "Moulpali", sans-serif;
    font-size: 25px;
    color: aqua;
    z-index: 2;
    top: 50%; left: 0; right: 0;
    text-align: center;
        animation-name: animation-txt ;
        animation-duration: 2s;
        animation-timing-function: inherit;
        animation-delay: 0s;
        animation-iteration-count: inherit;
        animation-direction: alternate;
        animation-fill-mode: forwards;   
}
    @keyframes animation-txt {
            0% {
                transform: scale(0.7);
            }
            100% {
                transform: scale(1); 
            }}

.txt-wedding2{
    position: absolute;
    font-family: "Moulpali", sans-serif;;
    font-size: 20px;
    color: aqua;
    z-index: 2;
    top: 60%; left: 0; right: 0;
    text-align: center;
}
.frame-name{
    width: 100%;
    position: absolute;
    z-index: 2;
    top: 65%;

}
.txt-cus{
    position: absolute;
    z-index: 3;
    top: 75%;
    font-family: "siemreap", sans-serif;;
    font-size: 17px;
    color: aqua;
    top: 75.5%; left: 0; right: 0;
    text-align: center;
}
.click-open{
    width: 30%; position: absolute;
    z-index: 5;
    bottom: 11%; left: 35%; right: 30%;
        animation-name: animation-click-open ;
        animation-duration: 1s;
            animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Smooth */
            animation-iteration-count: infinite;
            animation-delay: 0s;
            animation-direction: normal;
            animation-fill-mode: none;
            animation-play-state: running;
        }
        @keyframes animation-click-open {
            0% {
                transform: scale(0.8);
            }
            50% {
                transform: scale(1); 
            }
            100% {
                transform: scale(0.8); 
            }
        }
.tree-1{
            width: 30%;
            opacity: 0.8;
            height: 40%;
            position: absolute;
            right: -30px;
            bottom: 0px;
            z-index: 1;
            animation-name: animation-tree1 ;
            animation-duration: 2s;
            animation-timing-function: inherit;
            animation-delay: 0s;
            animation-iteration-count: inherit;
            animation-direction: alternate;
            animation-fill-mode: forwards;   
        }
    @keyframes animation-tree1 {
            0% {
                right: -50%;
                transform: scale(1);
            }
            100% {
                right: -15%;
                transform: scale(1.5); 
            }
        }
.tree-2{
            width: 30%;
            opacity: 0.8;
            height: 40%;
            position: absolute;
            right: -20px;
            bottom: 0px;
            z-index: 1;
            animation-name: animation-tree2 ;
            animation-duration: 2s;
            animation-timing-function: inherit;
            animation-delay: 0s;
            animation-iteration-count: inherit;
            animation-direction: alternate;
            animation-fill-mode: forwards;   
        }
    @keyframes animation-tree2 {
            0% {
                left: -50%;
                transform: scale(1);
            }
            100% {
                left: -15%;
                transform: scale(1.5); 
            }
        }
.suon-pka1{
            width: 40%;opacity: 0.7;
            position: absolute;
            left:  -1px;
            bottom: 0px;
            z-index: 1;
            animation-name: animation-suon-pka1 ;
            animation-duration: 2s;
            animation-timing-function: inherit;
            animation-delay: 0s;
            animation-iteration-count: inherit;
            animation-direction: alternate;
            animation-fill-mode: forwards;   
        }
    @keyframes animation-suon-pka1 {
            0% {
                left: -50%;
                transform: scale(1);
            }
            100% {
                left: 2%;
                transform: scale(1.5); 
            }
        }
.suon-pka2{
            width: 40%; opacity: 0.7;
            position: absolute;
            right:  -1px;
            bottom: 0px;
            z-index: 1;
            animation-name: animation-suon-pka2 ;
            animation-duration: 2s;
            animation-timing-function: inherit;
            animation-delay: 0s;
            animation-iteration-count: inherit;
            animation-direction: alternate;
            animation-fill-mode: forwards;   
        }
    @keyframes animation-suon-pka2 {
            0% {
                right: -50%;
                transform: scale(1);
            }
            100% {
                right: 2%;
                transform: scale(1.5); 
            }
        }