@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,100..900;1,100..900&family=Overpass:ital,wght@0,100..900;1,100..900&display=swap');

* {
    margin: 0;
    padding: 0;
    font-family: "Overpass", sans-serif;
}

.TOTMmaincontainer {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 1280px;
    margin: auto;
    padding-bottom: 90px;
}

.TOTMmainsection {
    display: flex;
    gap: 17px;
    justify-content: center;
    min-height: 735px;
    /* overflow: hidden; */
}

.bgabsolutemain {
    position: absolute;
    z-index: 0;
    height: 100%;
    width: 100%;
    aspect-ratio: 765 / 682;
}

.bgabsolutemain .bg-shapemain {
    width: 100%;
    height: 100%;
    clip-path: url(#bgClipBig);
    /* background: linear-gradient(
        118.06deg,
        #1436DB 1.55%,
        #FFB601 112.32%
    ); */
    background: linear-gradient(-49deg, #1436DB 30.85%, rgba(255, 182, 1, 1) 117.35%),
        linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));

}

.bgabsolutemain {
    --totm-bg-image: url("Images/e7f005b3d4162bd413dafb923ce09b17b3975356.png");
}

/* Image layer (20% opacity) */
.bgabsolutemain .bg-shapemain::after {
    content: "";
    position: absolute;
    inset: 0;
    clip-path: url(#bgClipBig);
    background: var(--totm-bg-image) center / cover no-repeat;
    opacity: 0.1;
    pointer-events: none;
}

.TOTMfirstsec {
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 24px 30px;
    padding-bottom: 100px;
    position: relative;
    z-index: 1;
    background-size: contain;
    width: 100%;
    /* width: 790px; */
    /* -webkit-clip-path: path('M765 605.108V25.5937C765 19.7342 762.942 14.0609 759.185 9.56434L758.689 8.97059C753.939 3.28559 746.912 0 739.504 0H29.9338C25.1407 0 20.4485 1.37791 16.4164 3.96956L11.4826 7.14081C4.32617 11.7406 0 19.664 0 28.1713V588.87C0 595.885 2.94684 602.577 8.12115 607.312L14.1718 612.85C18.7809 617.069 24.8025 619.408 31.0506 619.408H336.04C343.414 619.408 350.412 622.664 355.162 628.304L392.894 673.105C397.644 678.745 404.642 682 412.016 682H680.941C686.607 682 692.104 680.075 696.533 676.542L699.113 674.483C703.868 670.69 706.637 664.938 706.637 658.855C706.637 650.667 711.629 643.306 719.237 640.278L749.244 628.336C758.757 624.55 765 615.346 765 605.108Z'); */
}

.TOTMsecondsec {
    transition: 0.6s ease-out;
    max-width: 464px;
}

.TOTMtopsec,
.topsecsecond {
    display: flex;
    flex-direction: column;
    gap: 24.16px;
}

.TOTMtopsec {
    /* width: 705px; */
}

.topsectitletext {
    font-family: Noto Serif;
    font-size: 24.47px;
    font-weight: 700;
    color: #FFFFFF;
    text-wrap: nowrap;
}

.viewallandlinesec {
    display: flex;
    gap: 10px;
    align-items: end;
    width: 100%;
}

.topsecfirst {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 28px;
}

.topsecline {
    border: 1px solid #FFFFFF;
    width: 100%;
    height: 0;
    margin-bottom: 24px;
    margin-right: 10px;
}

.viewallsec {
    height: 100px;
    width: 100px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: -10px;
    cursor: pointer;
}

.viewallbg {
    position: absolute;
    z-index: 1;
    transition: 0.3s ease;
}

.rotateanime {
    animation: rotateimg 2s infinite;
}

@keyframes rotateimg {
    0% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(45deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

.viewallsec:hover .rotateanime {
    animation-play-state: paused;
}


.viewallbghide {
    position: absolute;
    z-index: 0;
}

.viewallinnersec {
    z-index: 9;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    width: 36px;
    background-color: #000000;
    border-radius: 50%;
    transition: 0.3s ease;
}

.viewallsec:hover .viewallinnersec {
    background: #FFFFFF;
}

.viewallinnersec svg {
    transition: 0.3s ease;
}

.viewallsec:hover .viewallinnersec svg {
    fill: #1436DB;
}

.viewallsec:hover .viewallbg {
    opacity: 0;
}

.topsecsecond {
    max-width: 700px;
    /* max-width: 366px; */
}

.topsecmaintext {
    color: #FFB601;
    font-size: 78.49px;
    font-weight: 900;
    font-family: Noto Serif;
    text-shadow: 2.43px 3.23px 6.78px #0000008A;
    text-transform: uppercase;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.topsecmaintext.full-text{
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: none;
}

.topsecdesctext {
    font-size: 18px;
    font-weight: 400;
    color: #FFFFFFB2;
}

.TOTMcards {
    display: flex;
    gap: 14px;
}

.TOTMindvcard {
    display: flex;
    position: relative;
}

.INdvmaincard {
    display: flex;
    gap: 11px;
    background-color: #FFFFFF;
    border-radius: 33.21px;
    padding: 11.2px;
    -webkit-clip-path: path('M0 132.905V23.5848C0 17.2414 2.55524 11.1655 7.08883 6.72876C11.4963 2.41544 17.4179 0 23.5848 0H192.214C200.572 0 208.581 3.3516 214.448 9.30446L215.198 10.0656C220.474 15.4188 223.431 22.6329 223.431 30.149V33.7648C223.431 38.0574 224.922 42.2168 227.649 45.5319C231.168 49.8094 236.416 52.2879 241.955 52.2879H257.872C262.254 52.2879 266.514 55.7254 267.001 56.3797C274.974 69.1663 277.893 66.0581 277.893 72.3086V132.905C277.893 139.058 275.193 144.901 270.507 148.889C266.711 152.119 261.889 153.893 256.905 153.893H20.9877C16.0034 153.893 11.1817 152.119 7.38586 148.889C2.7 144.901 0 139.058 0 132.905Z');
    position: relative;
    width: 270px;
    transition: 0.3s ease;
}

.TOTMindvcard:hover .INdvmaincard {
    background-color: #FFB601;
}

.TOTMcardssec {
    width: 570px;
    gap: 25px;
    display: flex;
    flex-direction: column;
}

.cardtextsec {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 120.68px;
}

.cardtextsec span {
    display: flex;
    align-items: center;
    gap: 3.64px;
}

.imgsec {
    height: 130.28px;
    width: 73.8px;
    border-radius: 18.22px;
    overflow: hidden;
    object-fit: cover;
}

.imgsec img {
    object-fit: cover;
    height: inherit;
    width: inherit;
}

.cardtitlesec {
    font-size: 16.4px;
    font-weight: 700;

    display: -webkit-box;
    -webkit-line-clamp: 5;
    /* 🔑 number of lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cardtextsec span img {
    height: 16.4px;
    width: 16.4px;
    border-radius: 50%;
    outline: 0.91px solid #7B7B7B;
    outline-offset: -0.91px;
    object-fit: cover;
}

.cardtextsec span p {
    font-size: 10.93px;
    font-weight: 400;
    font-style: italic;
}

.indvarrowvisit {
    height: 40.91px;
    width: 40.91px;
    background-color: #FFFFFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 1px;
    top: 6px;
    transition: 0.3s ease;
}

.indvarrowvisit a {
    display: flex;
}

.TOTMindvcard:hover .indvarrowvisit {
    background-color: #FFB601;
}

.indvarrowvisit img {
    transition: 0.3s ease;
}

.TOTMindvcard:hover .indvarrowvisit img {
    mix-blend-mode: plus-lighter;
}

.TOTMslider {
    display: flex;
    justify-content: center;
    gap: 6px;
}

.slideractive {
    width: 32.13px;
    border: 2.86px solid #FFFFFF
}

.slider {
    width: 17.34px;
    border: 2.86px solid #FFFFFF80;
}

.TOTMcontributorsec {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 120px;
    width: 54px;

    right: 30px;
    bottom: 100px;
    transition: 0.6s ease-out;
}

.TOTMcontributorimg {
    display: flex;
    flex-direction: column;
}

.TOTMcontributorimg img {
    height: 54px;
    width: 54px;
    border-radius: 50%;
    object-fit: cover;
    margin-top: -20px;
}

.TOTMcontributorsec p {
    transform: rotate(-90deg);
    text-wrap: nowrap;
    color: #FFFFFF99;
    font-size: 16px;
    font-weight: 500;
}



.bgrelative {
    position: relative;
    overflow: hidden;
    /* height: fit-content; */
    width: 100%;
}

.bgabsolute {
    position: absolute;
    z-index: 0;
    height: 100%;
    width: 100%;
    aspect-ratio: 464 / 418;
}

.bgabsolute .bg-shape {
    width: 100%;
    height: 100%;
    clip-path: url(#bgClip);
    background: linear-gradient(118.06deg,
            #1436DB 1.55%,
            #FFB601 112.32%);
}

/* Image layer (20% opacity) */
.bgabsolute .bg-shape::after {
    content: "";
    position: absolute;
    inset: 0;
    clip-path: url(#bgClip);
    background: url("Images/9143e8902f990a6ad6bb994e4136eef053290268.jpg") center / cover no-repeat;
    opacity: 0.2;
    pointer-events: none;
}


.TOTMfirstbox {
    padding: 40px;
    padding-bottom: 60px;
    /* background: linear-gradient(118.06deg, #1436DB 1.55%, #FFB601 112.32%), url(./Images/9143e8902f990a6ad6bb994e4136eef053290268.jpg); */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 22px;
    /* -webkit-clip-path: path('M0 364.374V15.8216C0 12.1412 1.28305 8.57601 3.62829 5.73963C6.63398 2.10451 11.1048 0 15.8216 0H444.529C448.293 0 451.977 1.09139 455.135 3.14202C460.664 6.73321 464 12.8784 464 19.4714V358.368C464 364.297 461.525 369.957 457.172 373.983C453.241 377.618 448.084 379.637 442.73 379.637H264.834C257.415 379.637 250.379 382.932 245.629 388.631L228.648 409.006C223.898 414.705 216.862 418 209.444 418H51.2822C47.6549 418 44.1369 416.758 41.3131 414.482L39.9849 413.411C37.0853 411.073 35.3995 407.548 35.3995 403.823C35.3995 398.796 32.3436 394.273 27.6792 392.397L15.672 387.569C6.2034 383.761 0 374.58 0 364.374Z'); */
    /* background: url(./Images/bg2.svg); */
    background-repeat: no-repeat;

    position: relative;
    z-index: 1;
}

.firstsectextbox {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.TOTMsecondtitletext {
    font-family: Noto Serif;
    font-size: 24px;
    font-weight: 700;
    color: #FFFFFF;
    text-shadow: 1px 2px 4.39px #00000040;
}

.TOTMsecondmaintext {
    color: #FFB601;
    font-family: Noto Serif;
    font-size: 32px;
    font-weight: 600;
    text-shadow: 1px 2px 4.39px #00000040;
}

.TOTMsecondintrotext {
    font-weight: 400;
    font-size: 14px;
    color: #FFFFFF;
}

.TOTMseconddivider {
    display: flex;
    align-items: center;
    gap: 11px;
}

.TOTMseconddivider span {
    border: 0.73px solid #FFFFFF33;
    width: 100%;
}

.TOTMseconddivider p {
    color: #FFFFFF80;
    font-size: 14.64px;
    font-weight: 400;
}

.TOTMintrotext {
    color: #FFFFFF;
    font-size: 18px;
    font-weight: 400;
    font-style: italic;
}

.firstsecbtn {
    background-color: #FFB601;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 5.8px 3.31px 3.31px 0px #00000040;
    width: 156.39px;
    height: 49.99px;
    gap: 8px;
    cursor: pointer;
    font-weight: 400;
    transition: 0.3s ease;
    border-radius: 6px;
}

.firstsecbtn:hover {
    font-size: 18px;
    background: #1436DB;
    color: #FFFFFF;
}

.firstsecbtn svg {
    transition: 0.3s ease;
}

.firstsecbtn:hover svg {
    fill: #FFFFFF;
}




.bgabsolute2 {
    position: absolute;
    z-index: 0;
    height: 100%;
    width: 100%;
    aspect-ratio: 464 / 263;
}

.bgabsolute2 .bg-shape2 {
    width: 100%;
    height: 100%;
    clip-path: url(#bgClip2);
    background: linear-gradient(-35.06deg,
            #1436DB 1.55%,
            #FFB601 112.32%);
}

/* Image layer (20% opacity) */
.bgabsolute2 .bg-shape2::after {
    content: "";
    position: absolute;
    inset: 0;
    clip-path: url(#bgClip2);
    background: url("Images/9143e8902f990a6ad6bb994e4136eef053290268.jpg") center / cover no-repeat;
    opacity: 0.2;
    pointer-events: none;
    /* transform: rotate(-180deg); */
}

.TOTMsecondbox {
    padding: 70px 40px 40px;
    /* background: linear-gradient(118.06deg, #1436DB 1.55%, #FFB601 112.32%), */
    /* url(./Images/9143e8902f990a6ad6bb994e4136eef053290268.jpg); */
    display: flex;
    flex-direction: column;
    gap: 28px;
    /* clip-path: path("M464 41.3702V250.365C464 254.311 462.157 258.031 459.016 260.42C456.817 262.094 454.129 263 451.365 263H17.053C14.8408 263 12.6498 262.57 10.602 261.733C4.18997 259.112 0 252.874 0 245.947V41.8603C0 35.55 3.35519 29.7157 8.80927 26.542C11.5159 24.967 14.5915 24.1373 17.723 24.1373H202.498C207.934 24.1373 213.222 22.3654 217.56 19.0902L236.163 5.04712C240.501 1.77185 245.789 0 251.225 0H415.093C417.217 0 419.31 0.500671 421.204 1.4614L425.084 3.42987C427.241 4.52414 428.6 6.7377 428.6 9.15646C428.6 12.0962 430.597 14.6605 433.447 15.3816L446.3 18.634C456.709 21.2678 464 30.6334 464 41.3702Z"); */
    /* background: url(./Images/bg3.svg); */
    background-repeat: no-repeat;
    position: relative;
    z-index: 1;
}

.lastboxtextsec {
    display: flex;
    justify-content: space-between;
}

.lastboxtextbox {
    display: flex;
    align-items: center;
    gap: 10px;
}

.lastline {
    border: 1px solid #FFFFFF;
    width: 47px;
}

.lastboxtextbox p {
    color: #FFFFFF;
    font-size: 23px;
    font-weight: 600;
}

.lastboxvisitbtn {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #FFFFFF;
    cursor: pointer;
}

.lastboxvisitbtn p {
    text-decoration: underline;
}

.lastboxcards {
    display: flex;
    flex-direction: column;
    gap: 17px;
    overflow: hidden;
    width: 101%;
}

.lastcardbox {
    display: flex;
    gap: 15px;
    /* width: 101%;
    overflow: hidden; */
    transition: 0.3s ease;
}

.lastindvboxmain {
    display: flex;
    gap: 7.29px;
    position: relative;
}

.lastindvbox {
    display: flex;
    padding: 7.29px;
    gap: 7.29px;
    -webkit-clip-path: path("M0 88.6026V15.723C0 11.4942 1.70348 7.44359 4.72584 4.48579C7.66412 1.61028 11.6118 0 15.723 0H128.141C133.713 0 139.052 2.23438 142.964 6.20291L143.464 6.71036C146.981 10.2791 148.953 15.0885 148.953 20.0991V22.5097C148.953 25.3714 149.947 28.1442 151.765 30.3543C154.11 33.2059 157.609 34.8583 161.301 34.8583H171.913C174.834 34.8583 177.674 35.8165 179.999 37.5861C183.314 40.1104 185.26 44.0383 185.26 48.2053V88.6026C185.26 92.7045 183.46 96.5997 180.336 99.2581C177.806 101.412 174.591 102.594 171.268 102.594H13.9916C10.6688 102.594 7.45442 101.412 4.92386 99.2581C1.79998 96.5997 0 92.7045 0 88.6026Z");
    background-color: #FFFFFF;
    width: 186px;
    transition: 0.3s eas;
}

.lastboxtextsection {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 80.45px;
}

.lastboxcontriname {
    display: flex;
    align-items: center;
    gap: 2.43px;
}

.lastboximgsec {
    width: 49.2px;
    height: 86.85px;
}

.lastboximgsec img {
    height: inherit;
    width: inherit;
    object-fit: cover;
    border-radius: 12.15px;
}

.lastboxtitletexts {
    color: #000000;
    font-size: 10.93px;
    font-weight: 700;

    display: -webkit-box;
    -webkit-line-clamp: 5;
    /* 🔑 number of lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.lastboxcontriname img {
    height: 10.93px;
    width: 10.93px;
    border-radius: 50%;
    object-fit: cover;
    outline: 0.61px solid #7B7B7B;
    outline-offset: -0.61px;
}

.lastboxcontriname p {
    font-size: 7.29px;
    font-weight: 400;
    font-style: italic;
}

.lastbaxslider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.lastsliderbar {
    border: 2.38px solid #FFFFFF80;
    width: 14.45px;
    transition: width 400ms ease, border-color 300ms ease;
}

.lastsliderbaractive {
    border: 2.38px solid #FFFFFF !important;
    width: 26.78px !important;
}


.lastboximgvisit {
    height: 27.27px;
    width: 27.27px;
    border-radius: 50%;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 6px;
    top: 4px;
    transition: 0.3s ease;
}

.lastindvboxmain:hover .lastindvbox,
.lastindvboxmain:hover .lastboximgvisit {
    background-color: #FFB601;
}

.lastindvboxmain:hover .lastboximgvisit svg {
    fill: #FFFFFF;
}

.lastboximgvisit a {
    display: flex;
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: center;
}

.indvarrowvisit a {
    display: flex;
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: center;
}

.TOTMyeardropdown {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #1436DB33;
    width: 118px;
    height: 45px;
    border-radius: 4px;
    gap: 2px;
    color: #1436DB;
    font-family: Noto Serif;
    font-size: 20px;
    font-weight: 500;
    cursor: pointer;
}

/* .TOTMyeardropdownmain{
    position: relative;
} */

.TOTMyeardropdowntop {
    position: absolute;
    background-color: #FFFFFF;
    color: #1436DB;
    font-size: 16px;
    font-weight: 400;
    font-family: Noto Serif;
    display: flex;
    flex-direction: column;
    z-index: 9;

    height: 0px;
    overflow: hidden;
}

.TOTMyeardropdowntop span {
    font-family: Noto Serif;
    border-bottom: 1px solid #1436DB21;
    height: 42px;
    width: 118px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.3s ease;
}

.TOTMyeardropdowntop span:hover {
    background-color: #1436DB;
    color: #FFFFFF;
}

.TOTMyearsection {
    display: flex;
    gap: 50px;
    overflow: hidden;
    height: 0px;
    transition: 0.3s ease;
}

.TOTMyearline {
    position: relative;
    width: 100%;
}

.TOTmonthanddots {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.TOTMindvmonths {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    z-index: 1;
}

.TOTMindvmonths p {
    color: #1436DB;
    font-size: 14px;
    font-weight: 500;
}

.TOTMdots {
    background-color: #1436DB30;
    height: 13px;
    width: 13px;
    border-radius: 50%;
    cursor: pointer;
}

.TOTMdotsactive {
    outline: 7px solid #1436DB30;
    background-color: #1436DB;
}

.TOTMmonthline {
    border: 3px solid #1436DB;
    width: 100%;
    position: absolute;
    bottom: 14px;
    z-index: 0;
}

.viewallclosebutton {
    display: none;
    position: relative;
    top: 50px;
    z-index: 999;
    cursor: pointer;
}

.TOTMmonthposterandmonth {
    position: absolute;
    top: 50px;
    right: 150px;
    z-index: 9;
    height: calc(100% - 50px);
    display: none;
    /* display: flex; */
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    opacity: 0;
    /* z-index: 0; */
    transition: 0.6s ease-out;
}

.TOTMyearposter {
    width: 335px;
    height: 431px;
    border-radius: 10px;
}

.TOTMyearposter img {
    height: inherit;
    width: inherit;
    border-radius: 10px;
    object-fit: cover;
}



/* Container */
.dial-container {
    width: 198px;
    height: 198px;
    overflow: hidden;
}

/* Main Dial */
.dial {
    position: relative;
    width: 198px;
    height: 198px;
    border-radius: 50%;
    background: white;
    bottom: -50%;
    display: flex;
}

/* Segments */
.segment {
    /* position: absolute; */
    width: 50%;
    height: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    font-weight: bold;
    color: #1c2aa8;
    cursor: pointer;
}

/* Individual rotations */
.inactivemonth1 {
    transform: rotate(-65deg) translateX(50%);
    margin-top: 40px;
}

.activemonth {
    width: 250px;
    height: 80px;
    background: #ffb800;
    color: #fff;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 18px;
    font-weight: bold;
    margin-top: -15px;

    clip-path: polygon(0% 28%,
            15% 16%,
            32% 8%,
            50% 6%,
            68% 8%,
            85% 16%,
            100% 28%,
            70% 100%,
            60% 96%,
            50% 94%,
            40% 96%,
            30% 100%);
}


.inactivemonth2 {
    transform: rotate(65deg) translateX(-50%);
    margin-top: 40px;
}

/* Center circle */
.dial-center {
    position: absolute;
    width: 100px;
    height: 100px;
    background: #2c3ea8;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}



/* Tooltip */
.contributor-tooltip {
    font-family: Overpass;
    position: absolute;
    background: #1436DB;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    padding: 10px;
    border-radius: 9px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -0px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 999;
    text-transform: capitalize;
}

/* Tooltip arrow */
.contributor-tooltip::after {
    content: "";
    position: absolute;
    top: 95%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 11px;
    border-style: solid;
    border-color: #1436DB transparent transparent transparent;
}


.slidinganimation {
    animation: slideanime 1.2s forwards;
}

@keyframes slideanime {
    0% {
        transform: translateX(5%);
    }

    10% {
        transform: translateX(100%);
    }

    90% {
        transform: translateX(-5%);
    }

    100% {
        transform: translateX(0%);
    }
}


.slidinganimation2 {
    animation: slideanime2 1.2s forwards;
}

@keyframes slideanime2 {
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(0%);
    }
}


.hidedesktop {
    display: none !important;
}





@media (max-width: 1000px) {
    .TOTMmainsection {
        flex-direction: column;
        max-height: fit-content;
    }

    .TOTMsecondsec {
        max-width: fit-content;
        gap: 17px;
    }

    .TOTMsecondsec .bgrelative:nth-child(2) {
        height: auto;
        display: flex;
        align-items: center;
    }

    .TOTMmonthposterandmonth {
        right: 80px;
        z-index: 1;
    }

    .TOTMsecondbox {
        width: 100%;
    }
}

@media (max-width: 700px) {
    .topsecfirst {
        align-items: center;
    }

    .topsectitletext {
        font-size: 18.55px;
    }

    .topsecline {
        display: none;
    }

    .viewallandlinesec {
        justify-content: end;
    }

    .viewallsec {
        transform: scale(0.82);
    }

    .TOTMtopsec {
        gap: 0;
    }

    .topsecmaintext {
        font-size: 44px;
    }

    .topsecdesctext {
        font-size: 13.65px;
    }

    .topsecsecond {
        gap: 18.2px;
    }

    .TOTMcontributorsec {
        /* position: relative; */
        flex-direction: column-reverse;
        gap: 0;
        right: 100px;
        bottom: 20px;
        width: auto;
    }

    .TOTMcontributorsec p {
        transform: rotate(0deg);
        font-size: 12px;
    }

    .TOTMcontributorimg {
        flex-direction: row;
    }

    .TOTMcontributorimg img {
        margin-top: 0;
        margin-right: -10px;
        height: 31.7px;
        width: 31.7px;
    }

    .TOTMsecondtitletext {
        font-size: 18px;
    }

    .TOTMsecondmaintext {
        font-size: 24px;
    }

    .TOTMintrotext {
        font-size: 13px;
    }

    .firstsecbtn {
        font-size: 12px;
        height: 37.71px;
        width: 117.97px;
    }

    .firstsecbtn svg {
        width: 14px;
    }

    .firstsectextbox {
        gap: 6px;
    }

    .TOTMfirstbox {
        gap: 14.59px;
    }

    .lastboxtextbox p {
        font-size: 18px;
    }

    .lastboxvisitbtn {
        font-size: 12px;
    }

    .lastboxvisitbtn svg {
        width: 11px;
    }

    .TOTMcardssec {
        width: 100%;
    }
}

@media (max-width: 650px) {
    .dial {
        transform: scale(0.52);
    }

    .TOTMmonthposterandmonth {
        right: 20px;
    }
}

.TOTMmonthimgmobile {
    display: none;
}

@media (max-width: 950px) {
    .TOTMyearposter {
        display: none;
    }

    .TOTMmonthposterandmonth {
        justify-content: end;
    }

    .TOTMmonthimgmobile {
        display: none;
        /* height: 267px; */
        height: 0;
        width: 100%;
        border-radius: 10px;
        object-fit: cover;
        overflow: hidden;
        transition: 0.3s ease;
    }

    .TOTMmonthimgmobile img {
        width: inherit;
        height: inherit;
        object-fit: cover;
    }
}

@media (max-width: 500px) {
    .TOTMyearsection {
        flex-direction: column;
    }

    .TOTMyearsection {
        gap: 27px;
        /* height: 120px; */
    }

    .TOTMmonthline {
        bottom: 4px;
    }

    .TOTMindvmonths {
        gap: 8px;
    }

    .TOTMyeardropdownmain {
        position: relative;
    }

    .viewallclosebutton {
        position: absolute;
        top: 0px;
        transform: scale(.92);
        right: 0;
    }

    .TOTMyeardropdown {
        width: 91px;
        height: 35px;
        gap: 0;
    }

    .TOTMyeardropdown p {
        height: 20px;
    }

    .TOTMyeardropdowntop span {
        width: 91px;
    }

    .TOTMcontributorsec {
        right: 60px;
    }

    .TOTMmonthposterandmonth {
        right: 10px;
    }

    .hidedesktop {
        display: flex !important;
    }

    .hidemobile {
        display: none !important;
    }
}