@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
h1,
h2,
h5,
h6 {
    font-weight: 600
}

.btn-outline-primary,
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    position: relative;
    display: block
}
p{
    color: #7A7A7A;
}
.notRobot,
.recaptcha img {
    width: 100%
}

.btn-outline-primary,
.btn-primary,
.selectPlan {
    z-index: 100;
    overflow: hidden
}

html,body {
    overflow: auto; /* Keeps scrolling functional */
    scrollbar-width: none; /* For Firefox */
    background-image: url(../images/bodybg.webp);
    background-repeat: repeat-y;
    font-family: "Poppins", sans-serif;
    width: 100%;
    background-size: 100% 100%;
  }
  
  html::-webkit-scrollbar,body::-webkit-scrollbar {
    display: none; /* For Chrome, Safari, and Edge */
  }

h1,
h2,
h5 {
    
    font-family: "Poppins", sans-serif;
}
h1{
    font-family: Playfair Display;
    font-size: 60px;
    font-weight: 700;
    line-height: 79.98px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;    
}
h1 span{
    color: #FFAD30;
}
h2{
    font-family: "Playfair Display", serif;
    font-size: 60px;
    font-weight: 600;
    line-height: 79.98px;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
}
a.downloadApp {
    background: #000;
    padding: 18px 20px;
    color: #fff !important;
    border-radius: 20px;
    max-width: 320px;
    width: 100%;
}
a.downloadApp i{
    font-size: 20px;
}
.w-1000{
    max-width: 1000px;
    width: 100%;
    margin: auto;
}
section{
    padding: 60px 0;
}

/* Typography */
.sectionBadge{
    background: #FFAD30;
    color: #242424;
    width: 150px;
    height: 47px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Montserrat;
    font-size: 16px;
    font-weight: 600;
    line-height: 19.5px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    border-radius: 60px;
    
}



header .navbar-nav .nav-item .nav-link{
    color: #7A7A7A;
}
.header-button{
    background: #FFAD30;
    border: 1px solid #F7F7F733;
    padding: 10px;
    border-radius: 60px;
}
.header-button a{
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border-radius: 50%;
    color: #FFAD30;
}
.header-button a i{
    font-size: 20px;
}

.copyright {
    border-top: 1px solid rgba(233, 233, 233, .2);
    padding: 15px 0 10px;
    color: #fff
}
.discussIdea{
    padding-top: 200px;
}
.discussBg {
    background: url(../images/discussideabg.png) 100%/cover no-repeat;
    border-radius: 60px;
    /* min-height: 580px;
    max-height: 580px; */
    padding: 0 50px;
}

.discussBg .bannerImg {
    margin-top: -98px;
}

.discussIdea h2 {
    font-size: 60px;
    line-height: 73.14px;
    font-weight: 600;
    color: #242424;
}
.discussIdea p{
    color: #242424;
}
.mangeGame .bannerImg{
    background: #F9F3E7;
    padding: 50px 20px 0;
    border-radius: 50px 50px 0 0 ;
}
.stepContent{
    background: #F9F3E7;
    padding: 25px;
    border-radius: 30px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: start;
}
.manageSteps li{
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    z-index: 10;
}
.manageSteps li:not(:last-child)::after{
    position: absolute;
    content: "";
    width: 2px;
    height: 100%;
    border-left: 1px dashed #FFAD30;
    left: 30px;
    top: 114px;
    z-index: -1;
}
.manageSteps li span{
    background: #FFAD30;
    min-width: 60px;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    font-family: Poppins;
    font-size: 20px;
    font-weight: 600;
    line-height: 30px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;    
}
.scrapCard{
    background: #F9F3E7;
    border-radius: 30px;
    height: 100%;
    transition: all ease-in-out .3s;
    display: flex;
    flex-direction: column;
    justify-content: space-between; 
}
.scrapText {
    padding: 30px;
}
.scrapText p{
    color: #7A7A7A;
}
h6{
    font-family: Montserrat;
font-size: 20px;
font-weight: 700;
line-height: 24.38px;
text-align: left;
text-underline-position: from-font;
text-decoration-skip-ink: none;
}
.scrapCard:hover{
    background: #FFAD30;
    transition: all ease-in-out .3s;
}
.scrapCard:hover .scrapText {
    color: #242424;
}
.scrapCard:hover .scrapText .img-fluid{display: none; transition: all ease-in-out .3s;}
.scrapCard:hover .scrapText .img-fluid.d-none{display: block !important; transition: all ease-in-out .3s;}
.scrapCard:hover .scrapText p{
    color: #242424;
}
.gameInterface{
    position: relative;
    z-index: 1;
    padding: 100px 0;
}
.gameInterface::after{
    max-width: 1120px;
    height: 100%;
    width: 100%;
    background: #F9F3E7;
    border-radius: 50%;
    position: absolute;
    content: "";
    margin: auto;
    left: 0;
    top: 0;
    right: 0;
    z-index: -1;
}
.appointment{
    padding-bottom: 100px;
}
.footer{
    background: #F9F3E7;
    padding-top:60px ;
}
.footer p{
    margin-bottom: 0;
}
a{
    text-decoration: none;
}
.footer a{
    color: #242424;
}
.copyright {
    border-top: 1px solid #E0D1AA;
    margin-top: 60px;
}
.copyright span{
    color: #242424;
}
.HeroBanner{
    margin-top: 100px;
}
.heroSection {
    position: relative;
    z-index: 1;
}
.heroSection::after{
    position: absolute;
    content: "";
    max-width: 1036px;
    width: 100%;
    max-height: 875px;
    height: 100%;
    background: url(../images/herolines.png) no-repeat;
    bottom: 150px;
    left: 38px;
    right: 0;
    margin: auto;
    z-index: -1;
    background-size: 100% 100%;
    pointer-events: none;
}
.heroSection .container::after{
    position: absolute;
    content: "";
    right: 60px;
    top: 90px;
    background: url(../images/Sharp.png) no-repeat;
    width: 233px;
    height: 190px;
    background-size:100% 100% ;
    z-index: -1;
}
.heroSection .container::before{
    position: absolute;
    content: "";
    left: 0px;
    top: 160px;
    background: url(../images/Cheese-Half.png) no-repeat;
    width: 233px;
    height: 190px;
    background-size:100% 100% ;
    z-index: -1;
}
.space100{
    padding-top: 60px;
}
.space60{
    padding-top: 60px;
}
.space40{
    padding-top: 40px;
}
.discussBg .row .col-md-6:first-child{
    align-self: flex-end;
}
@media(max-width:1399px){
    .discussBg .bannerImg {
        margin-top: 0;
    }
    .discussIdea h2 {
        font-size: 48px;
        line-height: 62.14px;
        font-weight: 600;
        color: #242424;
    }
    .discussIdea {
        padding-top: 100px;
    }
}
@media(max-width:1199px){
    h2 {
        font-size: 48px;
        line-height: 56.98px;
    }
    .scrapText{
        padding-bottom: 0;
    }
    .manageSteps li:not(:last-child)::after{
        top: 140px;
    }
}
@media(max-width:991px){
    section {
        padding: 30px 0;
    }
  
    .manageSteps li:not(:last-child)::after {
        top: 174px;
    }
    .appDownloadBtn a img{
        width: 130px;
    }
    .discussBg .row {
        flex-direction: column-reverse;
    }
    #navbarNavDropdown {
        position: absolute;
        top: 95%;
        /* background: rgb(189, 14, 11) none repeat scroll 0% 0%; */
        background:#F9F3E7;
        width: 100%;
        z-index: 9999;
        padding: 4px 10px;
        left: 0;
    }
    .header.inner ul li {
        border-bottom: 0.2px solid #ffad30;
        padding: 10px 0px;
        width: 100%;
    }
    .header.inner ul li:last-child{
        border: 0;
    }
    .navbar-toggler[aria-expanded="true"] .fa-bars::before {
        content: "\f00d" !important;
        color: #181818;
    }
    h1 {
        font-size: 50px;
        line-height: 65.98px;
    }
    .heroSection .container::before,.heroSection .container::after{
        display: none;
    }
}
@media(max-width:767px){
    .container, .container-sm{
        max-width: 100% !important;
    }
    .row{
        gap: 20px 0;
    }
    .footerDetail {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 20px;
    }
    .discussBg {
        padding: 0 10px;
        border-radius: 25px;
    }
    .manageSteps {
        padding-left: 0;
    }
    .mangeGame .bannerImg{
        padding: 20px 20px 0;
        border-radius: 20px 20px 0 0;
    }
    .gameInterface::after{display: none;}
    .bannerImg{
        text-align: center;
    }
    .footerDetail {
        margin-top: 20px;
    }
    .appDownloadBtn {
        text-align: center;
    }
    .copyright {
        border-top: 1px solid #E0D1AA;
        margin-top: 20px;
    }
    .heroSection::after{
        left: 0;
    }
}
@media(max-width:575px){
    .headerBtn span{
        display: none;
    }
    a.downloadApp{
        padding: 12px;
    }
    .appointment {
    padding-bottom: 20px;
    }
    .header-button a{
        width: 35px;
        height: 35px;
    }
    button.navbar-toggler {
        width: 45px;
        height: 45px;
        background: #ffad30;
        color: #fff;
        border-radius: 11px;
    }
    .header-button {
        padding: 6px;
    }
    h2 {
        font-size: 20px;
        line-height: 40.98px;
    }
    p {
     font-size: 14px;
    }
    h1 {
        font-size: 26px;
        line-height: 37.98px;
    }
    .space40 {
        padding-top: 20px;
    }
    .HeroBanner {
        margin-top: 30px;
    }
    .space60 {
        padding-top: 20px;
    }
    .space100 {
        padding-top: 15px;
    }
    .gameInterface {
        padding: 20px 0;
    }
    .discussIdea {
        padding-top: 20px;
    }
    .discussIdea h2 {
        font-size: 25px;
        line-height: 34.14px;
        font-weight: 600;
        color: #242424;
    }
    .footer a {
        font-size: 13px;
    }
    .detailLeft.text-end{
        text-align: left !important;
    }
    .copyright {
        margin-top: 20px;
        /* flex-direction: column; */
        flex-direction: column-reverse;
        gap: 20px;
        align-items: center;
    }
    .footer {
        background: #F9F3E7;
        padding-top: 30px;
    }
}