@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');





*{
    margin: 0;
}

body{
    width: 100vw;
    overflow-x: hidden;
}

.winnermaincontainer{
    height: 393px;
    background-color: #A79758;
    /* background-image: url(./uploads/exploreHomeBG.png); */
}

.winnerdatafetched{
    color: #000000;
    line-height: 28px;
}

.winnerdatafetched strong{
    color: #000000;
}

.winnerfirstsec{
    display: flex;
    /* display: none; */
    justify-content: space-around;
    align-items: center;
    height: inherit;
    position: absolute;
    width: 100vw;
    transition: 0.3s ease;

    /* left: -100vw; */
}

.firstbgimage{
    position: absolute;
    height: inherit;
    width: 80%;
    left: 0;
    opacity: 15%;
    z-index: 0;
    transition: 0.3s ease;
    object-fit: cover;

}

.secondbgimage{
    position: absolute;
    height: inherit;
    width: 100%;
    left: 80%;
    opacity: 15%;
    z-index: 0;
    object-fit: cover;
    transition: 0.3s ease;
}

.leftarrowbutton{
    position: absolute;
    right: 40px;
    top: 40px;
    cursor: pointer;
    z-index: 99;
    animation: leftarrowbounce 1s ease-in infinite;
}

@keyframes leftarrowbounce {
    0%{
        right: 40px;
    }
    50%{
        right: 30px;
    }
    100%{
        right: 40px;
    }
}

.winnerunveiltextsec{
    display: flex;
    flex-direction: column;
    gap: 20px;
    z-index: 9;
    width: 500px;
    height: 150px;
}

.winnerunveiltextsec p{
    margin: 0;
}

.winnerunveiltitle {
    font-family: "Playfair Display";
    color: #752924;
    font-weight: 700;
    font-size: 40px;
    line-height: 41px;
    opacity: 0;
    transform: translate(-40px, 40px);
    animation: slideUp 1s ease-out forwards;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translate(-40px, 40px);
    }
    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}


.winnerunveilpara{
    font-family: "Open Sans";
    color: #000000;
    max-width: 558px;
    font-weight: 400;
    font-size: 24px;
    line-height: 100%;
    opacity: 0;
    transform: translateX(-40px);
    animation: slideleft 1s ease-out forwards;
}

@keyframes slideleft {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}




.winneranimationcontainer {
    position: relative;
    height: 302px;
    width: 272px;
    background-image: url(/components/SelectionPage/animation-1/d265df29beeb8d3baaab504808ee9ffc.png);
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    opacity: 0;
    animation: expandbg 1s ease-out forwards;
}

@keyframes expandbg {
    from {
        opacity: 0;
        height: calc(302px - 60px);
        width: calc(272px - 60px);
    }
    to {
        opacity: 1;
        height: 302px;
        width: 272px;
    }
}

.winneranimationcontainer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #352C094D;
}

.winneranimationcontainer span{
    font-family: "Open Sans";
    font-weight: 700;
    font-size: 80px;
    line-height: 101px;
    z-index: 9;
    color: #A79758;
}

.winneranimationcontainer .wi-text{
    display: flex;
    flex-direction: column;
    height: 101px;
    overflow: hidden;
    padding-left: 32px;
    animation: WItextani 1s ease-out forwards;
    transform: translate(-100px, -50px);
}

@keyframes WItextani {
    from{
        transform: translate(-100px, -50px);
    }
    to{
        transform: translate(0px, 0px);
    }
}

.wi-text span:first-child{
    animation: WItextanislide 4s ease-out infinite;
    animation-delay: 1.2s;
}

@keyframes WItextanislide {
    0%{
        margin-top: 0px;
    }
    30%{
        margin-top: -101px;
    }
    70%{
        margin-top: -101px;
    }
    100%{
        margin-top: -202px;
    }
}

.winneranimationcontainer .nn-text{
    display: flex;
    flex-direction: column;
    height: 101px;
    overflow: hidden;
    text-align: center;
}

.nn-text span:first-child{
    animation: nntextanislide 4s ease-out infinite;
    animation-delay: 1.2s;
}

@keyframes nntextanislide {
    0%{
        margin-top: 0px;
    }
    30%{
        margin-top: -101px;
    }
    70%{
        margin-top: -101px;
    }
    100%{
        margin-top: -202px;
    }
}

.winneranimationcontainer .er-text{
    display: flex;
    flex-direction: column;
    height: 101px;
    overflow: hidden;
    text-align: right;
    padding-right: 32px;
    transform: translate(100px, 50px);
    animation: ERtextani 1s ease-out forwards;
}

@keyframes ERtextani {
    from{
        transform: translate(100px, 50px);
    }
    to{
        transform: translate(0px, 0px);
    }
}

.er-text span:first-child{
    animation: ertextanislide 4s ease-out infinite;
    animation-delay: 1.2s;
}

@keyframes ertextanislide {
    0%{
        margin-top: 0px;
    }
    30%{
        margin-top: -101px;
    }
    70%{
        margin-top: -101px;
    }
    100%{
        margin-top: -202px;
    }
}









@keyframes morphing {
    0% {
        d: path("M19.6858 40.944C13.9426 40.944 3.15234 46.085 3.15234 46.085L4.89271 56.5575L56.2335 55.6054L57.4517 45.3234C57.4517 45.3234 52.6451 40.3599 48.7499 39.8015C42.4628 38.9002 41.1583 48.5615 34.827 48.9411C28.2708 49.3342 25.429 40.944 19.6858 40.944Z");
    }
    100% {
        d: path("M32.7474 -14.1541C19.6677 -14.1541 -4.90625 10.0516 -4.90625 10.0516L-0.942711 59.3595L115.982 54.8769L118.756 6.46554C118.756 6.46554 107.809 -16.904 98.9385 -19.5332C84.6201 -23.7769 81.6493 21.7118 67.2302 23.4992C52.2991 25.35 45.827 -14.1541 32.7474 -14.1541Z");
    }
}

@keyframes morphing2 {
    0% {
        d: path("M19.3342 34.2877C13.591 34.2877 2.80078 39.4287 2.80078 39.4287L4.54115 49.9012L55.8819 48.9492L57.1001 38.6671C57.1001 38.6671 52.2935 33.7037 48.3983 33.1453C42.1112 32.2439 40.8068 41.9053 34.4754 42.2849C27.9193 42.678 25.0774 34.2877 19.3342 34.2877Z");
    }
    100% {
        d: path("M29.8554 -16.4569C18.1466 -16.4569 -3.85156 5.39249 -3.85156 5.39249L-0.303465 49.9005L104.365 45.8543L106.849 2.15555C106.849 2.15555 97.0498 -18.9391 89.1086 -21.3123C76.291 -25.1429 73.6316 15.9177 60.7238 17.531C47.3578 19.2017 41.5641 -16.4569 29.8554 -16.4569Z");
    }
}

#animatedPath {
    animation: morphing 1.5s infinite alternate ease-in-out;
}

#animatedPath2{
  animation: morphing2 1.5s infinite alternate ease-in-out;
}



.catsmallboxcontainer a.activeH,
.catsmallboxcontainermob a.activeH {
    background: linear-gradient(90deg, #612620 0%, #202020 100%);
    color: #FFFFFF;
}

.catsmallboxcontainer a.activeH svg,
.catsmallboxcontainermob a.activeH svg {
    fill: white;
    stroke: white;
}


.rightarrowbutton{
    /* display: none; */
    position: absolute;
    left: 40px;
    top: 40px;
    cursor: pointer;
}

.winnersecondsec{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: inherit;
    position: absolute;
    width: 100vw;
    transition: 0.3s ease;
    background: linear-gradient(180deg, rgba(234, 206, 104, 0) 34.48%, rgba(114, 0, 3, 0.38) 87.95%, rgba(92, 2, 2, 0) 115.53%);

    right: -100vw;
}

.cannessecmaintitle{
    font-family: "Playfair Display";
    font-weight: 700;
    font-size: 40px;
    line-height: 41px;
    color: #752924;
    display: flex;
    align-items: center;
    gap: 8px;
    position: absolute;
    top: 65px;
    left: 40px;
}

.cannessecmaintitle span svg{
    margin-bottom: 5px;
}

.cannestitleopa{
    color: #C7B06054;
    font-family: "Open Sans";
    font-weight: 700;
    font-style: italic;
    font-size: 69.86px;
    line-height: 84.02px;
    position: absolute;
    left: 0;
}

.cannestitleopa p:last-child{
    margin-left: 138px;
}



.catsmallboxcontainer,
.catsmallboxcontainermob{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.catsmallboxcontainer span,
.catsmallboxcontainermob span{
    display: flex;
    gap: 14px;
}

.catsmallboxcontainer span:nth-child(2){
    margin-right: 164px;
}

.catsmallboxcontainer span a,
.catsmallboxcontainermob span a{
    text-decoration: none;
    background: linear-gradient(90deg, rgba(255, 246, 208, 0.76) 16.5%, rgba(255, 255, 255, 0.08) 94%);
    box-shadow: 0px -1px 23.6px 0px #0000000D;
    padding: 12px 30px;
    border-radius: 120px;
    color: #190706;
    font-family: "Open Sans";
    font-weight: 600;
    font-size: 20px;
    line-height: 100%;
    display: flex;
    align-items: center;
    gap: 5px;
}

.catsmallboxcontainermob{
    display: none;
}

.catsmallboxcontainer a:hover{
  background: linear-gradient(90deg, #612620 0%, #202020 100%);
  color: #FFFFFF;
}
.catsmallboxcontainer a:hover svg {
    fill: white; 
    stroke: white; 
  }
  @media (max-width: 1120px){

  .winneranimationcontainer {
   height:290;
   right:20px;
  }
}
@media (max-width: 1020px){
    .winneranimationcontainer{
        animation: none !important;
        opacity: 1;
        width: 154px;
        height: 171px;
    }

    .winnermaincontainer{
        height: 250px;
    }

    .winneranimationcontainer span{
        font-size: 40px;
    }

    .winnerfirstsec{
        /* padding: 10px 16px; */
        justify-content: space-evenly;
    }

    .winnerunveiltitle{
        font-size: 20px;
        position: absolute;
        top: 5px;
    }

    .winnerunveilpara{
        font-size: 14px;
    }

    .winnerdatafetched{
        line-height: 16px;
    }

    .winnerunveilpara{
        max-width: 202px;
    }

    .leftarrowbutton,
    .rightarrowbutton{
        top: 10px;
        transform: scale(0.5);
    }

    .leftarrowbutton{
        right: 10px;
    }

    .rightarrowbutton{
        left: 10px;
    }

    .winneranimationcontainer .wi-text,
    .winneranimationcontainer .nn-text,
    .winneranimationcontainer .er-text{
        height: 60px;
    }


    @keyframes WItextanislide {
        0%{
            margin-top: 0px;
        }
        30%{
            margin-top: -60px;
        }
        70%{
            margin-top: -60px;
        }
        100%{
            margin-top: -120px;
        }
    }

    @keyframes nntextanislide {
        0%{
            margin-top: 0px;
        }
        30%{
            margin-top: -60px;
        }
        70%{
            margin-top: -60px;
        }
        100%{
            margin-top: -120px;
        }
    }

    @keyframes ertextanislide {
        0%{
            margin-top: 0px;
        }
        30%{
            margin-top: -60px;
        }
        70%{
            margin-top: -60px;
        }
        100%{
            margin-top: -120px;
        }
    }

    .winneranimationcontainer span{
        line-height: 60px;
    }

    .cannessecmaintitle{
        top: 31px;
        left: 10px;
        font-size: 20px;
        line-height: normal;
    }

    .cannessecmaintitle svg{
        height: 20px;
    }

    .cannessecmaintitle span svg,
    .cannestitleopa{
        display: none;
    }

    .catsmallboxcontainer span a{
        font-size: 10px;
        padding: 10px 15px;
    }

    .catsmallboxcontainermob span a{
        font-size: 10px;
        padding: 10px 15px;
    }

    .catsmallboxcontainermob span:nth-child(2),
    .catsmallboxcontainermob span:nth-child(4){
        margin-right: 50px;
    }

    .catsmallboxcontainermob span{
        gap: 7px;
        /* flex-wrap: wrap; */
    }

    @keyframes leftarrowbounce {
        0%{
            right: 15px;
        }
        50%{
            right: 10px;
        }
        100%{
            right: 15px;
        }
    }

    .nn-text span svg{
        height: 28px;
    }
}

@media (max-width: 680px){
    .catsmallboxcontainer{
        display: none;
    }

    .catsmallboxcontainermob{
        display: flex;
        margin-right: 10px;
        align-items: end;
    }
}
@media (max-width: 450px){
    .winnerfirstsec {
        padding: 0px 10px;
        justify-content: space-between;
    }
.winneranimationcontainer{
    width: 140px;
        height: 146px;
    }
    .leftarrowbutton{
        right:10% !important;
    }
    .winnerunveilpara {
        max-width: 150px;
        font-size: 12px;
    }

    .winnerdatafetched{
        line-height: 14px;
    }
}