@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');

:root {
    --main-color: #467CE9;
    --secondary-color: #2F5699;
  }
body{
    font-family: "Quicksand", serif;
}
a{cursor: pointer;}
.home-sec{
    background: url(../images/home-bg.jpg);
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 100%;
    height: 100vh;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 0 60px;
}
.home-sec .banner-contentouter {
    margin-block: 40px;
}
.ill1 img, .ill2 img, .ill3 img, .ill4 img, .button-container img{width: 100%;height: 100%;}
.ill1{position: absolute;top: 7%;left: 0;background-size: 20px;width: 23%;}
.ill2{position: absolute;top: 6%;right: 0;background-size: 20px;width: 33%;}
.ill3{position: absolute;bottom: 0;left: 0;background-size: 20px;width: 25%;}
.ill4{position: absolute;bottom: 20%;right: 0;background-size: 20px;width: 15%;}
.sony-logo img,.logo img{width: 100%;height: 100%; object-fit: contain;}
.sony-logo{width: 55px;height: auto;margin-inline: auto;}
.logo{
    height: auto;
    margin-inline: auto;
    max-width: 830px;
    margin: 20px auto 50px;
}
.banner-content{
    max-width: 609px;
    margin-inline: auto;
}
.banner-content p,
.banner-content h5
{
    text-align: center;
    line-height: normal;
}
.banner-content p{
    font-weight: 600;
    color: var(--secondary-color);
    letter-spacing: .3px;
}
.banner-content h5{
    color: var(--main-color);
    font-weight: 700;
    margin-bottom: 0;
}
.banner-content p span{
    color: var(--main-color);
    font-weight: 700;
}
.actions-sec {display: flex;flex-wrap: wrap;position: relative;z-index: 999;}
.button-container {
    text-align: center;
  }
  .actions-sec > div{
    width: 48%;
  }
  .actions-sec > div input {
    width: 100%;
    border-radius: 30px;
    padding: 8px 20px;
    background: transparent;
    border: 1px solid var(--secondary-color);
}
.actions-sec > div input::placeholder{
    color: var(--secondary-color);
    line-height: normal;
}
.actions-sec > div:first-child{
    margin-right: 2%;
}
.terms{
position: absolute;
bottom: 20px;
right: 20px;
  }
  .terms p{
    margin-bottom: 2px;
    line-height: normal;
    font-size: 12px;
    color: var(--secondary-color);

  }

  .actions-sec form {
    display: flex;
    flex-wrap: wrap;
}
.actions-sec form > div{
    width: 48%;
}
.actions-sec form > div input{
    width: 100%;
    border-radius: 30px;
    padding: 8px 20px;
    background: transparent;
    border: 1px solid var(--secondary-color);
    height: 36px;
}

.actions-sec form > div:first-child {
    margin-right: 2%;
}
.actions-sec button {
    border: none;
}

button.button-container {transition: all 0.2s ease;position: relative;z-index: 999;}
button.button-container:hover {transform: translateY(-3px);}
.th-button-container {transition: all 0.2s ease;position: relative;z-index: 999;}
a.th-button-container img{transition: all 0.2s ease;}
a.th-button-container img:hover {transform: translateY(-3px);}
.msgsuccess {display: none;}
.arrow-icon.left-nav {display: none;}
.actions-sec form > div button {width: 100%;height: 100%;background: transparent;
}

  /* --------gaiming---------------- */
.header-secgaiming { width: 100%; background: url(../images/top-bg.jpg); background-repeat: no-repeat; background-size: cover;}
.h-logo{width: 38px;height: auto;}
.h-logo img{width: 100%;height: 100%;}
.h-outer{width: 100%;padding-left: 20px;margin-inline-start: auto;}
.gaming-sec{width: 100%;position: relative;min-height: 100vh;}
.gaming-contentpart {background: url(../images/game-bg.jpg);width: 100%;min-height: 100vh;background-position: bottom;padding-top: 40px;background-size: cover;background-repeat: no-repeat;display: flex;align-items: center;min-height: calc(100vh - 84px);}
.header-secgaiming {
    padding-block: 11px;
}
.g-logo{
    max-width: 500px;
}
.g-logo img{
    width: 100%;
    height: 100%;
}
.header-secgaiming{position: relative;}

.g-logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    /* top: 30px; */
    width: 420px;
    top: 42px;
}
.illg1 img,
.illg2 img,
.illg3 img,
.illg4 img,
.illg5 img{
    width: 100%;
    height: 100%;
}

.illg1{
    position: absolute;
    top: 14%;
    left: 0;
    background-size: 20px;
    width: 18%;
}
.illg2{
    position: absolute;
    bottom: 7%;
    left: 6%;
    background-size: 20px;
    width: 10%;
}
.illg3{
    position: absolute;
    top: 10%;
    right: 0;
    background-size: 20px;
    width: 23%;
}
.illg4{
    position: absolute;
    top: 40%;
    right: 0;
    background-size: 20px;
    width: 23%;
}
.illg5{
    position: absolute;
    bottom: 0;
    right: 0;
    background-size: 20px;
    width: 18%;
}
.mob-outer img {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.mob-outer {
    max-width: 300px;
    margin-inline: auto;
    position: relative;
    overflow: hidden;
    border-radius: 55px;
    z-index: 999;

}

.content.game-card {
    background: #fff;
}
.ph-c-outer {
    position: absolute;
    top: 11px;
    width: 92%;
    height: 98%;
    right: 12px;
    border-radius: 39px;
    padding-right: 1px;
    overflow: hidden;
}



.img-fadepart img {
    border-radius: 14% 14% 0 0;
}
.em-i{
    width: 20px;
    height: 20px;
    display: inline-block;
}
.em-i img{
width: 100%;
height: 100%;
}
.em-i.exp{
    width: 50px;
}
.line {
    height: 1px;
    width: 100%;
    background: #000;
    margin-block: 6px;
}
.dogle-outer2{
    position: relative;
}
.d-icn{
    position: absolute;
}
.text-fadepart span {
    padding-inline: 0px;
}
.dogle-outer img{
width: 100%;
height: 100%;
}
.doggle-actions > div {
    display: flex;
    justify-content: space-between;
}
.dogle-outer{
    width: 50%;
    height: auto;
}
.d-icn{width: 25%;}
.d-icn img{width: 100%;height: 100%;}
.text-fadepart {padding: 0px 15px;
    background: #fff;
}

/* ---------- */

.dogle-outer2 {transition: transform 0.3s ease;}
.img-fadepart img {transition: opacity 0.5s ease;}
.text-fadepart h5,.text-fadepart h6 {transition: color 0.5s ease, transform 0.5s ease;}

  .text-fadepart h5 {
    font-weight: 700;
    color: var(--main-color);
    font-size: 20px;
}
.text-fadepart p {
    color: var(--secondary-color);
    font-weight: 600;
    margin-bottom: 0;
}
.text-fadepart> *{
   color: var(--secondary-color);
    font-weight: 600;
}
.text-fadepart h6 {
    margin-bottom: 0;
    font-size: 16px;
}
.text-fadepart h4 {
    color: var(--main-color);
    font-size: 17px;
}
.doggle-actions {
    position: absolute;
    top: 475px;
    left: 0;
    padding-inline: 15px;
    width: 100%;
    display: flex;
    justify-content: space-between;
}
/* =================== */
   .custom-toggle {
    position: relative;
    width: 100px;
    height: 54px;
}

  .custom-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  .custom-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #E4EAF4;
    transition: 0.4s;
    border-radius: 34px;
  }
  input:checked + .custom-slider {
    background-color: #F1E0F0;
  }
  input:checked + .custom-slider.toggle1::before {
    transform: translateX(-46px);
  }

  input:checked + .custom-slider.toggle2::before {
    transform: translateX(46px);
  }
  .dynamic-content .content {
    display: none;
    border-radius: 36px;
  }
  .dynamic-content .content.active {
    display: block;
    z-index: 999;
    opacity: 1;
    border-radius: 36px;

  }


  .dynamic-content .content.active+.content{
    z-index:10;
    opacity: 1;
    display: block;
    }


  .dynamic-content .content {
    position: absolute;
    z-index: 9;
   
 }
 .logo svg > path {
    opacity: 0;
}

  .thank-contentpart.listing-part {
    height: auto;
    min-height: 100vh;
}
  /* Custom handle for Toggle 1 */
.custom-slider.toggle1::before {
    content: "";
    position: absolute;
    width: 49px;
    height: 49px;
    right: 3px;
    bottom: 3px;
    background: url("../images/cross.png") no-repeat center / cover;
    transition: 0.1s;
    border-radius: 50%;
    background-color: #fff;
  }
  /* Custom handle for Toggle 2 */
  .custom-slider.toggle2::before {
    content: "";
    position: absolute;
    width: 49px;
    height: 49px;
    left: 3px;
    bottom: 3px;
    background: url("../images/heart.png") no-repeat center / cover;
    transition: 0.1s;
    border-radius: 50%;
    background-color: #fff;
  }
.i-btn img {
    width: 100%;
    height: 100%;
}
.i-btn {
    width: 60px;
    border-radius: 50%;
    padding: 5px;
    height: 53px;
    margin-top: -21px;
    margin-left: auto;
}
.i-btn {
    width: 40px;
    border-radius: 50%;
    padding: 5px;
    height: 37px;
    margin-top: -21px;
    margin-left: auto;
    pointer-events: auto !important;
}

.i-btn:hover img {
    transform: scale(1.1);
}

.i-btn img{
    transition: all .25s ease;
}

.listitem-sec .i-btn {
    margin-inline: auto;
}

/* Default: No background */
.content.game-card.active .text-fadepart {
    background: none;
}




.mob-outer {
    position: relative;
  }
  
  
  
  .mob-outer::before {
    content: '';
    position: absolute;
    top: 45%;
    left: 50%;
    width: 90px; 
    height: 90px; 
    /* background: url(../images/cross.png) no-repeat center / contain; */
    z-index: 9999999;
    background-size: 50px;
    background-size: 80px;
    transform: translate(-50%, -50%) scale(0.5);
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: none;
    opacity: 0;
  }

  .mob-outer:has(.tinder_nope)::before {
    opacity: 1;
    background: url(../images/cross.png) no-repeat center / contain;
    animation: heart-pulse 1.5s ease-in-out forwards;
  }
  
  .mob-outer:has(.tinder_love)::before {
    opacity: 1;
    background: url(../images/heart.png) no-repeat center / contain;
    animation: heart-pulse 1.5s ease-in-out forwards;
  }
  
  @keyframes heart-pulse {
    0% {
      transform: translate(-50%, -50%) scale(0.5);
      opacity: 1;
    }
    50% {
      transform: translate(-50%, -50%) scale(1.2);
      opacity: 1;
    }
    100% {
      transform: translate(-50%, -50%) scale(1);
      opacity: 0; 
    }}
  
/* ======= */
/* Custom styling for modal */
.gm-modal .modal-dialog {
    max-width: 50%;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .gm-modal .modal-content {
    border-radius: 0;
  }
  .i-btn:hover{
    cursor: pointer;
  }
 
  .play-video-btn:hover .arrow-icon {
    transform: scale(1.2);
  }
  .back-arrow-btn{
    transition: all 0.5s ease-in-out;
  }
  .back-arrow-btn:hover img {
    transform: scale(1.1) rotate(180deg);
    transition: transform 0.3s ease-in-out;
  }
 
  .play-video-btn {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    right: 20px;
}
  .play-video-btn:hover .arrow-icon,
  .back-arrow-btn:hover .arrow-icon {
    transform: scale(1.2);
  }
  
  .media-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin-bottom: 15px;
    text-align: center;
  }

  .cover-img {
    width: 100%;
    height: auto;
    border-radius: 10px 10px 0 0;
}
  .arrow-icon {
    width: 30px;
    height: 30px;
    transition: transform 0.3s ease-in-out;
  }
  .play-video-btn:hover .arrow-icon,
  .back-arrow-btn:hover .arrow-icon {
    transform: scale(1.2);
  }
  .gm-modal .back-arrow-btn {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 99;
  }
  .modal-body {
    padding: 0;
}
.gm-modal .modal-header {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 99999;
    border-bottom: none;
}
.gm-modal .modal-header .btn-close {
    filter: none !important;
    opacity: 1;
    width: 15px !important;
    margin-right: 20px;
    margin-top: 12px;
    display: block;
    background-repeat: no-repeat !important;
    background: url(../images/cros-modal.png) !important;
    height: 20px;
    background-size: contain;
    background-size: 28px !important;
    background-repeat: no-repeat !important;
    position: absolute;
    right: 0;
    top: 9px;
}
.gm-modal .modal-content {
    /* max-height: 85vh; */
    overflow-y: auto;
    border-radius: 15px;
    padding: 1px;
}
.gm-modal .modal-textar {
    padding: 10px 25px;
}
.gm-modal .modal-textar h5 {
    color: var(--main-color);
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 0px;
}
.gm-modal .modal-textar p {
    color: var(--secondary-color);
    font-size: 18px;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 0;
}
.textar1 {
    margin-bottom: 10px;
}
.video-content {
    position: relative;
}
button.back-arrow-btn {
    width: 30px !important;
}
button.back-arrow-btn img {
    width: 100%;
    height: 100%;
    transform: rotate(180deg);
}
.video-content video {
    border-radius: 15px 15px 0 0;
}
img.arrow-icon.left-nav {
    position: absolute;
    z-index: 99;
    top: 50%;
    left: 12px;
    transform: rotate(180deg);
}
/* --------thanks--------------- */
.thankyou-page{

    background-position: center;
    background-size: cover;
    width: 100%;
    position: relative;
    min-height: 100vh;

}
.thank-contentpart{
background: url(../images/home-bg.jpg);
width: 100%;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
display: flex;
align-items: center;
justify-content: center;

height: calc(100vh - 84px);
/* min-height: 100vh; */
}
.illt1{
    position: absolute;
    top: 14%;
    left: 0;
    background-size: 20px;
    width: 18%;
}
.illt2 {
    position: absolute;
    bottom: 7%;
    left: 0;
    background-size: 20px;
    width: 13%;
}
.illt3 {
    position: absolute;
    right: 0;
    background-size: 20px;
    width: 17%;
    bottom: 100px;
}
.illt1 img,
.illt2 img,
.illt3 img{
    width: 100%;
    height: 100%;
}
.actions-sec.thank > div {
    max-width: 478px;
}
.actions-sec.thank > div a {
    width: 100%;
}
.actions-sec.thank > div a img {
    width: 100%;
    height: 100%;
}
.actions-sec.thank {
    display: flex;
    justify-content: center;
}
.banner-contentouter.thank-content .banner-content {
    max-width: 685px;
    margin-inline: auto;
}
.banner-contentouter.thank-content .banner-content h5{
    margin-bottom: 0px;
}
/* =======sorry================ */

.banner-contentouter.thank-content.sorry .banner-content {
    max-width: 608px;
}
.ills1 {
    position: absolute;
    top: 20%;
    left: 0;
    background-size: 20px;
    width: 16%;
}
.ills2 {
    position: absolute;
    bottom: 3%;
    left: 0;
    background-size: 20px;
    width: 36%;
}
.ills3 {
    position: absolute;
    right: 0;
    background-size: 20px;
    width: 17%;
    top: 120px;
}
.ills4 {
    position: absolute;
    right: 0;
    background-size: 20px;
    width: 17%;
    bottom: 100px;
}
.ills1 img,
.ills2 img,
.ills3 img,
.ills4 img{
    width: 100%;
    height: 100%;
}
/* ---------------listing-------------------- */
.illlist1 {
    position: absolute;
    bottom: 0;
    left: 0;
    background-size: 20px;
    width: 24%;
}

.illlist2 {
    position: absolute;
    bottom: 0%;
    right: 0;
    background-size: 20px;
    width: 24%;
}
.illlist1 img,
.illlist2 img{
    width: 100%;
    height: 100%;
}
.listing-img img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
}
.info-btn img{
    width: 100%;
    height: 100%;
}
.info-btn {
    width: 35px;
    height: 35px;
    margin-inline: auto;
    margin-top: -17px;
}
.listing-col {
    padding-inline: 20px;
}

.listitem-sec {
    margin-inline: auto;
    padding: 100px 0 80px 0;
}
.listitem-sec .row {
    padding-inline: 100px;
}

.listing-text {
    color: var(--main-color);
    font-weight: 500;
    margin-bottom: 40px;
}
.listing-text p {
    text-align: center;
    color: var(--secondary-color);
    line-height: normal;
}
.info-btn:hover {
    cursor: pointer;
}
.listing-text p span{
    font-weight: 700;
    color: var(--main-color);

}
.listitem-sec .i-btn {
    width: 35px;
    height: 32px;
    position: relative;
    z-index: 99;
}
.listing-col {
    margin-bottom: 20px;
}

.listing-img {
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2);
    padding: 2px;
    border-radius: 10px;
}


.login-sec .logo {
    max-width: 300px;
}
.login-secouter {
    margin-inline: auto;
}

.outerlog {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.3);
    max-width: 400px;
    margin: 50px auto 15px;
}

.login-secouter{
   max-width: 400px;
}


.input-container label {
    display: block;
    font-size: 14px;
    color: var(--secondary-color);
    margin-bottom: 5px;
    font-weight: 600;
}

.input-container input {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid var(--secondary-color);
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.2);
    color: var(--secondary-color);
    outline: none;
}

/* Styling for buttons/links */
a.login-form
 {
    display: inline-block;
    text-align: center;
    width: fit-content;
    padding: 6px 20px;
    margin: 5px 0px;
    color: white;
    background: var(--main-color);
    border: 1px solid rgba(0, 123, 255, 0.7);
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: 0.3s ease-in-out;
}

input#password {
    position: relative;
}

img#togglePassword {
    position: absolute;
    right: 8px;
    top: 15px;
}

.input-container input#password {
    padding: 10px 30px 10px 10px;}
    input#remember_me {
        width: auto;
    }
    .input-container form > div:nth-child(3) {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 10px;
        margin-bottom: 30px;
    }
    input#remember_me {
        margin-bottom: 0;
    }
    .input-container form > div:nth-child(3) label{
        margin-bottom: 0;

    }




/* .input-container form > div:first-child {
    height: 46px;
    margin-bottom: 15px;
}

.input-container form > div:nth-child(2) {
    height: 46px;
    margin-bottom: 15px;

} */

.password-container {
    position: relative;
}


a.login-form:hover,
a.reg-form:hover {
    background: rgba(0, 123, 255, 0.7);
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.5);
}


.listing-img {
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2);
    padding: 2px;
    border-radius: 10px;
    height: 100%;
    z-index: 9;
    position: relative;
}


    .actions-sec form > div#responseMessage p {
        font-size: 14px;
        margin-bottom: 0;
    }

.dashboardcontents {
    min-height: 100vh;
    margin: 0;
    padding: 0;
    background: url(../images/home-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
.dashboardcontents h1 {
    margin: 0;
    color: var(--main-color);
}

body{
    margin: 0;
}
.dashboardcontents {
    padding: 20px 40px;
}

.admintab table#dataTable {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: #fff;
    margin-bottom: 30px;
}

div#dataTable_filter {
    margin-bottom: 20px;
}
.datatab.admintab {
    position: relative;
    padding-top: 20px;
}
div.dt-buttons {
    position: absolute !important;
    float: left;
}
#delete-selected,
.dt-button.buttons-csv,
.logout-link
 {
  
    width: fit-content;

    background-size: cover;
    border-radius: 6px;
    border: none;
    padding: 12px 25px;
 
    background: var(--main-color);
    color: #ffff;
    text-transform: uppercase;
    margin-bottom: 0px;
    text-decoration: none;
    transition: all .25s ease;
    cursor: pointer;

}



button#delete-selected {
    position: absolute;
    left: 371px;
  
    z-index: 99;
}

div#dataTable_filter {
    float: left;
}

.btn-close:focus {
    box-shadow: none !important;
}

.dataTable button.delete-btn {
    border: none;
    background: transparent;
}


button.dt-button:hover:not(.disabled),
#delete-selected:hover,
.logout-link:hover{
    transform: translateY(-3px);
    border: none;


}
button.dt-button:hover:not(.disabled), div.dt-button:hover:not(.disabled), a.dt-button:hover:not(.disabled), input.dt-button:hover:not(.disabled){
    background: var(--secondary-color);
}
button.dt-button, div.dt-button, a.dt-button, input.dt-button{
    line-height: normal !important;
}




button.login-form:hover{
    transform: translateY(-3px);
}

button.login-form{

    width: fit-content;

    background-size: cover;
    border-radius: 5px;
    border: none;
    padding: 10px 30px;
    color: #fff;
    background: var(--main-color);

    transition: all .25s ease;
    line-height: normal;


}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active{
    color: var(--secondary-color) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current{
    background-color: var(--main-color) !important;
    border: 1px solid var(--main-color);
    border-radius: 6px;
    transition: all 0.5s ease-in-out;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{
    background-color: transparent;

    border: none;
}


.dataTables_wrapper .dataTables_filter input {
    height: 35px;
    z-index: 9;
}
div.dt-buttons {

    width: fit-content !important;
    right: 0;
}
.logout-link {
    font-size: 14px !important;
    right: 40px !important;
}
#dataTable_wrapper input[type="search"] {
    width: 300px;
    padding-left: 30px;
}
.dataTables_filter input {
    background-position: 2px center !important;
}
    div#dataTable_filter > label {
        width: 100%;
    }
  
    .actions-sec form > div:last-child {
        height: 20px !important;
    }

    .img-fadepart {
        height: 230px;
        pointer-events:none;
    }

.img-fadepart img {
        height: 100%;
        width: 100%;
        object-fit: cover;
        border-radius: 38px 38px 0 0;
}

/* .logo img {
    display: block;
    width: 100%;
    height: auto;
    -webkit-mask: linear-gradient(-60deg, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 1) 70%) right/350% 100%;
    mask: linear-gradient(-60deg, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 1) 70%) right/350% 100%;
    -webkit-mask-composite: destination-in;
    mask-composite: exclude;
    animation: shimmer 4s infinite;
  }
  
  @keyframes shimmer {
    100% {
      -webkit-mask-position: left;
      mask-position: left;
    }
  } */



.logo {
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
  }
  .background {
    position: absolute;
    top: 0;
    left: 0;
  }
  svg {
    z-index: 1;
    position: absolute;
    height: auto;
  }
  .sparkles path {
    fill: white;
    transform-origin: 50% 50%;
    transform-box: fill-box;
    animation: sparkle var(--duration) var(--delay) infinite ease-in-out;
  }
  
  @keyframes sparkle {
    0% {
      transform: scale(0);
    }
    50% {
      transform: scale(0);
    }
    70% {
      transform: scale(-1, 0);
    }
    80% {
      transform: scale(1);
    }
    100% {
      transform: scale(0);
    }
  }
  
  .under-image {
    z-index: 0; 
    
  }
.ill1, .ill2, .ill3, .ill4,
.illg1, .illg2, .illg3, .illg4, .illg5,
.illt1, .illt2, .illt3,
.ills1, .ills2, .ills3,
.illlist1, .illlist2

  {
    position: absolute;
    perspective: 1000px; 
  }
  .ill1 img, .ill2 img, .ill3 img, .ill4 img,
 .illg2 img, .illg3 img,  .illg5 img,
.illt1 img, .illt2 img, .illt3 img,
.ills1 img, .ills2 img, .ills3 img,
.illlist1 img, .illlist2 img

   {
    display: block;
    width: 100%;
    height: 100%;
    transform: translate(0, 0); 
    transition: transform 0.3s ease-out; 
    will-change: transform; 
  }

  .illg4 img{
    display: block;
 
    transform: translate(0, 0); 
    transition: transform 0.3s ease-out; 
    will-change: transform; 

  }
  
  .home-sec {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
  }

  .textar1 p:last-child{
    font-size:16px
    }

    .banner-content>h5 {
        font-size:20px;
        }

/* ===============================responsive====================================================== */

@media  (max-width:1440px){

    .logo {
        max-width: 700px;
        margin: 0px auto 25px;
    }
    .sony-logo {
        width: 45px}

}

@media  (min-width:1400px){
    body.detailclass {
        overflow-y: hidden;
    }
}


@media  (max-width:1474px){

.admintab table#dataTable {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: #fff;
    margin-bottom: 30px;
    display: block;
    min-width: 100px;
    overflow-x: auto;
    white-space: nowrap;
}
}



    @media only screen and (max-width: 1200px){

        .logo {
            max-width: 650px;
        }
        .gm-modal .modal-dialog {
            max-width: 80%;}
            .sony-logo {
                width: 40px;
            }
            .terms p {
                font-size: 10px;}
                .home-sec {
                    padding: 8px 0 45px;
                }
                .terms {

                    bottom: 13px;

                }
                .home-sec .banner-contentouter {
                    margin-block: 0px;
                }

    }




    @media only screen and (max-width: 1024px){
        .listitem-sec .row {
            padding-inline: 0px;
        }
        .illg3 {
            top: 95px;
        }
        .doggle-actions {
            top: 400px;
        }
        .logo {
            max-width: 430px;
        }
        .logo {
            max-width: 500px;
        }
        .sony-logo {
            width: 35px;
        }

        .text-fadepart h4 {

            margin-bottom: 2px;
        }

        .text-fadepart h5 {
            font-size: 15px;
            margin-bottom: 0;
        }
        .text-fadepart h6 {
            font-size: 12px;
        }
        .text-fadepart> * {

            font-size: 10px;
        }


    }


    @media only screen and (max-width: 991px){
        /* .home-sec {
            padding-block: 10px;
        } */

        .thank-contentpart{
            height: calc(100vh - 74px);}

        .home-sec .banner-contentouter {
            margin-block: 10px;
        }

        #dataTable_wrapper input[type="search"] {
            width: 250px;
        }

        button#delete-selected {
            left: 318px;}
        .gm-modal .modal-dialog {
            max-width: 90%;}
        .h-logo {
            width: 32px;
            height: auto;
        }
        .logo {
            max-width: 470px;
        }
        .sony-logo {
            width: 30px;
        }
        .banner-content p {
            font-size: 15px;
        }
        .ill1 {
            width: 34%;
        }
        .ill2 {
            width: 40%;
        }
        .ill3 {
            width: 33%;
        }
        .ill4 {
            width: 20%;
        }
        .g-logo {
            width: 400px;
            top: 43px;
        }
    }

    @media only screen and (min-width: 768px)
    {
        .dynamic-content .content {
         
            cursor: default;
            pointer-events: none;
         }

        
    }


    @media only screen and (max-width: 767px)
    {

        .thank-contentpart{
            height: calc(100vh - 61px);}

            .home-sec .banner-contentouter {
                
                position: relative;
                transform: translatey(-6%);

              
            }
            .banner-contentouter.thank-content {
                position: relative;
                transform: translatey(-8%);
                padding-inline: 15px;
            }

            


        div.dt-buttons {
            position: relative !important;;
            margin: 0 0 30px;
        }

        button#delete-selected {
            left: 148px;
            top: 60px;
        }

        .datatab.admintab {
            padding-top: 60px;
        }

        div#dataTable_filter {
            position: absolute;
            top: -54px;
            display: flex;
            width: 100%;
        }

        #dataTable_wrapper input[type="search"] {
            width: calc(100% - 57px);
        }


        .gm-modal .modal-dialog {
            max-width: 95%;
        }
        .illg1 {
            width: 28%;
        }
        .illg3 {
            width: 33%;
        }
        .illg2 {
            width: 17%;
            bottom: 0;
            left: 0;
        }
            .illg5 {
                width: 28%;
            }
        .gm-modal .modal-textar p {
            font-size: 16px;}
            .gm-modal .modal-textar h5 {
                font-size: 14px;}

                .logo {
                    max-width: 416px;
                    margin: 5px auto 20px;

                }

        .g-logo {
            width: 290px;
        }
        .header-secgaiming {
            padding-block: 8px;
        }
        .h-logo {
            width: 28px;
        }

        .banner-content h5 {
            font-size: 16px;
        }
        .banner-content p {
            font-size: 13px;
        }
        .terms {
            bottom: 80px;
        }
        .ill3 {

            bottom: 70px;

        }
        .home-sec {
            padding: 10px 0 10px;
        }

        .banner-content p br {
            display: none;
        }

        .illt1 {
            width: 26%;
        }
        .illt2 {
            width: 20%;
        }
        .illt3 {
            width: 27%;
        }

        .ills1 {
            width: 26%;
        }
        .ills3 {
            width: 27%;
        }
        .ills2 {
            width: 45%;
        }
        .ills4 {
            width: 27%;
        }

        .sony-logo {
            width: 35px;
        }
        .home-sec .banner-contentouter {
            margin-block: 10px;
        }

        .listitem-sec {
            padding-block: 80px;
        }
        .listing-col {
            margin-bottom: 15px;
        }

        .listing-col {
            padding-inline: 140px;
        }
        .textar1 p:last-child {
            font-size: 14px;
        }

    }



    @media only screen and (max-width: 575px)
    {
        .logo {
            /* max-width: 320px; */
            max-width: 90%;
        }
        
        /* .terms {
            transform: none;
            left: unset;
            position: static;

        } */
        .dashboardcontents {
            padding: 80px 15px;
        }

        .actions-sec form > div {
            width: 100%;
            margin-bottom: 8px;
            height: 35px;
        }


        .actions-sec form > div:nth-child(2) {
            margin-bottom: 0;
        }
        .banner-content p {
            margin-bottom: .5rem;
        }


        .gm-modal .modal-textar {
            padding: 5px 12px;
        }
        .listing-text {
         margin: 0 0 60px;
        }
        .listing-text p br {
            display: none;
        }

        .actions-sec > div {
            width: 100%;
            margin-bottom: 15px;
        }
        .actions-sec {
            max-width: 400px;
            margin: 15px auto 0;
        }
        .terms {

            right: unset;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            text-align: center;
            padding-top: 20px;
        }
        .terms p {
            font-size: 10px;
        }
        .actions-sec.thank {
            max-width: 300px;

        }

        .listing-col {
            padding-inline: 100px;
        }
        .custom-toggle {
            height: 40px;
        }
        .custom-slider.toggle2::before {
            width: 34px;
            height: 34px;}
            .custom-slider.toggle1::before {
                width: 34px;
                height: 34px;
            }
                input:checked + .custom-slider.toggle1::before {transform: translateX(-60px);}
input:checked + .custom-slider.toggle2::before {transform: translateX(60px);}

.ph-c-outer {padding-bottom: 150px;}
.doggle-actions {bottom: 100px;}



.textar1 p:last-child {
    font-size: 12px;
}


    }

    @media only screen and (min-width: 431px) and (max-width: 991px){
        .gaming-contentpart {
            min-height: calc(100vh - 61px);
        }

    }




@media only screen and (max-width: 430px){
    .gaming-contentpart {
        min-height: calc(100vh - 61.7px);
    }
    .mob-outer {
        border-radius: 0;
    }
    .ph-c-outer {
        border-radius: 0;
    }



/* .mob-outer {max-width: 210px; } */
.mob-outer {
    max-width: 210px;
    transform: scale(1.1);
}

.ph-c-outer {
    position: absolute;
    right: 8.5px;
    width: 92%;
    /* padding-left: 1px; */
    top: 7px;
}
.img-fadepart {
    height: 125px;
}

.img-fadepart img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 26px 26px 0 0;
}





.doggle-actions {bottom: unset; top: 280px;}
.text-fadepart {padding: 0px 8px;}
.doggle-actions {padding-inline: 8px;}
.custom-toggle {
    width: 75px;
}
input:checked + .custom-slider.toggle1::before {transform: translateX(-40px);}
input:checked + .custom-slider.toggle2::before {transform: translateX(40px);}

}



@media only screen and (max-width: 420px){
    .gaming-contentpart {
        min-height: calc(100vh - 49px);
    }

#delete-selected, .dt-button.buttons-csv, .logout-link {padding: 12px 10px;font-size: 10px; white-space: nowrap;}
div#dataTable_filter {top: -81px;width: 100%;}
#dataTable_wrapper input[type="search"] {width: calc(100% - 57px);}
.h-logo {width: 22px;height: auto;}
.listitem-sec {padding-block: 50px;}
.header-secgaiming {padding-block: 7px;}
.actions-sec {max-width: unset;width: 88%;}
.listing-col { padding-inline: 50px;}
.g-logo {width: 195px;}
.g-logo {top: 34px;}
.gaming-contentpart {padding-top: 24px;}
.logo {
    max-width: 90%;
}
.actions-sec form > div {
    margin-bottom: 10px;}
    .thank-contentpart{
        height: calc(100vh - 49.9px);}


}


body.detailclass {
    height: 100vh;
    overflow: hidden;
}

section.gaming-sec {
    height: 100vh;
    overflow: hidden;
}


body.crushclass {
    height: 100vh;
    overflow: hidden;
}



/* ---------------------------------------------- */