* {
    box-sizing: border-box;
}

/*.cairo-<uniquifier> {
  font-family: "Cairo", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "slnt" 0;
}*/
html,
body {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    font-family: 'Cairo';
    font-weight: bold;
    font-style: normal;
    background-color: #FFFFFF;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-bottom: 0;
    font-size: 60px;
    font-weight: 700;
    line-height: 76px;
    color: #000000;
    /* line-height: 24px;*/
}

p {
    margin: 0px;
}

.bgwhiteBTN {
    font-size: 14px;
    line-height: 26.24px;
    font-weight: 700;
    color: #F77003;
    background-color: #FFFFFF;
    padding: 12px 32px;
    border: none;
    border-radius: 80px;
	text-decoration: none;
}

.bgorangeBTN {
    font-size: 14px;
    line-height: 26.24px;
    font-weight: 700;
    color: #FFFFFF;
    background-color: transparent;
    padding: 12px 32px;
    border: 1px solid;
    #FFFFFF;
    border-radius: 80px;
	text-decoration: none;
}

.container-fluid {
    padding: 0px 60px;
}

.bgorange {
    background-color: #F77003;
}

.text-blue {
    color: #0B2251;
}

.text-orange {
    color: #F77003;
}

/*Header Section CSS Start */
.headerSection img.logoimg {
    width: 147px;
    height: auto;
}

.headerSection .rightbtnSection {
    gap: 20px;
}

button {
    // Remove focus around button
    outline: none;
}

.accordion-button:focus {
    border: none !important;
    box-shadow: none !important;
}

.form-control:focus {
    box-shadow: none !important;
}

/*Header Section CSS END*/

/*Card Section css Start*/
.cardSection {
    padding: 87px 0px 120px 0px;

}

.cardSection .tophovercard {
    position: relative;
    height: 800px;
    padding-top: 53px !important;
}

.cardSection img {
    position: absolute;
    left: 0%;
    right: 0%;
    transition: all 0.4s cubic-bezier(0.63, 0.15, 0.03, 1.12);
}

.cardSection .mainimg {
    z-index: 9;
}

.cardSection .top1 {
    position: absolute;
    left: 0%;
    right: 0%;
    transition: all 0.4s cubic-bezier(0.63, 0.15, 0.03, 1.12);
}

.cardSection .top2 {
    position: absolute;
    left: 0%;
    right: 2%;
    transition: all 0.4s cubic-bezier(0.63, 0.15, 0.03, 1.12);
    z-index: 1;
}

.cardSection .middle1 {
    position: absolute;
    left: 0%;
    right: 0%;
    transition: all 0.4s cubic-bezier(0.63, 0.15, 0.03, 1.12);
}

.cardSection .middle2 {
    position: absolute;
    left: 0%;
    right: 2%;
    transition: all 0.4s cubic-bezier(0.63, 0.15, 0.03, 1.12);
}

.cardSection .bottom1 {
    position: absolute;
    left: 0%;
    right: 2%;
    transition: all 0.4s cubic-bezier(0.63, 0.15, 0.03, 1.12);
    z-index: 2;
}

.cardSection .bottom2 {
    position: absolute;
    left: 0%;
    right: 3%;
    transition: all 0.4s cubic-bezier(0.63, 0.15, 0.03, 1.12);
}

.transition {
    transition: all 0.5s ease-in-out;
}

.cardSection .tophovercard:hover {
    height: 950px;
}

.tophovercard:hover .mainimg {
    transform: translate(0%, 40%);
}

.tophovercard:hover .top1 {
    transform: translate(-30%, -20%);
    z-index: 1;
}

.tophovercard:hover .top2 {
    transform: translate(20%, -20%);
    z-index: 1;
}

.tophovercard:hover .middle1 {
    transform: translate(-46%, 40%);
}

.tophovercard:hover .middle2 {
    transform: translate(30%, 40%);
}

.tophovercard:hover .bottom1 {
    transform: translate(-40%, 70%);
    z-index: 1;
}

.tophovercard:hover .bottom2 {
    transform: translate(20%, 70%);
    z-index: 1;
}

.card {
    background: transparent;
    border: none;
}

/*Card Section CSS END*/

/*challenge Section css Start*/
.challengeSetion {
    padding: 60px 0px 120px 0px;
    position: relative;
    overflow:hidden;
}

.challengeSetion h3 {
    text-transform: uppercase;
    letter-spacing: 10px;
    font-size: 75px;
    font-weight: 900;
    line-height: 120px;
}

.challengeSetion .challengetext {
    position: relative;
}

.challengeSetion .bgwhiteBTN {
    border: 1px solid #F77003;
}

.challengeSetion .scrollcard {
    position: absolute;
    left: 40px;
}

.challengeSetion .scrollcard .chlimg1 {
    position: absolute;
    transform: translate(60px, -20px);
}

.challengeSetion .scrollcard .chlimg2 {
    position: absolute;
    transform: translate(660px, 145px);
}

.challengeSetion .scrollcard .chlimg3 {
    position: absolute;
    transform: translate(1160px, 480px);
    z-index: 0;
}

/*challenge Section CSS END*/

/*White Section CSS START*/
.whiteSection {
    z-index: 1;
    position: relative;
    background-color: #FFFFFF;
}

.whiteSection .whitetext {
    padding: 150px 172px;
}

.whiteSection p {
    font-size: 44px;
    line-height: 57.2px;
    font-weight: 700;
}

/*White Section CSS END*/

/*Slider Section CSS START*/
.sliderSection {
    padding: 95px 0px;
}

.carousel {
    width: 100%;
    margin: 0px auto;
}

.slick-slide {
    margin: 10px;
}

.slick-slide img {
    width: 100%;
    border: 2px solid #fff;
}

.wrapper .slick-dots li button:before {
    font-size: 20px;
    color: white;
}

.slick-initialized .slick-slide img {
    position: relative;
}

.slidercontent {
    position: absolute;
    padding-left: 50px;
    bottom: 50px;
    width: 400px;
}

.sliderSection .bgwhiteBTN {
    font-size: 14px;
    line-height: 26.24px;
    font-weight: 700;
    color: #F77003;
    background-color: #FFFFFF;
    padding: 12px 32px;
    border: 1px solid #F77003;
    border-radius: 80px;
}

.sliderSection p {
    font-size: 60px;
    line-height: 60px;
    font-weight: 700;
}

.slick-slide img {
    width: 1030px;
    border-radius: 12px;
    border: none;
}

.slick-list,
.slick-slider,
.slick-track {
    position: relative;
    display: flex !important;
}

.slick-slide {
    display: none;
    float: left;
    height: auto !important;
    min-height: 100%;
    width: 1030px !important;
    margin: 0px 50px 0px -30px !important;
}

.slick-track {
    transform: translate3d(-990px, 0px, 0px);
}

.slick-next {
    right: 0;
}

/*.slick-slide {
    
    margin: 0px 120px 0px -30px;
}*/
/*.slick-slide{
    width: 550px!important; 
}*/
/*Slider Section CSS END*/

/*Game Section css Start*/
.gameSection {
    padding: 110px 0px 110px 0px;

}

.gameSection h2 {
    font-size: 60px;
    line-height: 78px;
    font-weight: 700;
    padding-bottom: 102px;
}

/*.gameSection .imagegame{
    position: relative;
}*/
/*.gameSection .cardmiddle{
    position: relative;
    z-index: 1; 
    transition: transform 0.8s;
}
.gameSection .imagegame:hover .cardmiddle{
    position: relative;
    z-index: 1;
    transform: translate(0px, 0px);
}
.gameSection .cardleft{
    position: absolute;
    transition: transform 0.8s;
    left: 0px;
    right: 0;
    opacity: 0%;

}
.gameSection .imagegame:hover .cardleft{
    position: absolute;
    opacity: 100%;
    transform: translate(82px, 0px);
    right: 1200px;
}
.gameSection .cardright{
    position: absolute;
    left: 0px;
    right: 0;
    transition: transform 0.8s;
    opacity: 0%;
}
.gameSection .imagegame:hover .cardright{
    position: absolute;
    z-index: 1;
    transform: translate(500px, 0px);
    opacity: 100%;
}*/
.gameSection2 {
    padding: 110px 0px 110px 0px;
}

.gameSection2 h2 {
    font-size: 60px;
    line-height: 78px;
    font-weight: 700;
    padding-bottom: 102px;
}

.gameSection2 img {
    transition: 1s ease;
}

.gameSection2 img:hover {
    -webkit-transform: rotateZ(-10deg);
    -ms-transform: rotateZ(-10deg);
    transform: rotateZ(-10deg);
    transition: 1s ease;
}


/*Game Section CSS END*/

/*FAQ Section CSS Start*/
.faqSection {
    padding: 154px 167px;
}

.faqSection h1 {
    padding: 0px 0px 60px 0px;
}

.faqSection .accordion-button:not(.collapsed) {
    background-color: transparent;
    box-shadow: none;
    font-size: 25px;
    line-height: 46.85px;
    font-weight: 600;
    color: #F77003;
}

/*.faqSection.accordion-item:active {
    box-shadow:  10px 10px #F77003;;
}*/
.faqSection .accordion-button {
    padding: 0px;
    font-size: 25px;
    line-height: 46.85px;
    font-weight: 600;
    color: #0B2251;
}

.faqSection p.text-blue {
    font-size: 18px;
    line-height: 22px;
    font-weight: 400;
}

.faqSection .accordion-item {
    border: 1px solid #0B2251;
    border-radius: 12px;
    padding: 30px 30px 41px 30px;
    margin: 25px 0px 0px 0px;
}

.faqSection .accordion-item.expanded {
    box-shadow: 10px 10px #F77003;
}

.faqSection .accordion-body {
    padding: 10px 0px 0px 0px;
}

.faqSection .accordion-button::after {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    margin-left: auto;
    content: "";
    background-image: url('../images/open.png');
    background-repeat: no-repeat;
    background-size: contain;
    transition: var(--bs-accordion-btn-icon-transition);
}

.faqSection .accordion-button:not(.collapsed)::after {
    background-image: url('../images/close.png');
    transform: var(--bs-accordion-btn-icon-transform);
}

/*FAQ Section CSS END*/

/*Contact Section CSS Start*/
.contactSection .Main2Section {
    padding: 60px 112px 66px 112px;
    background-color: #F77003;
    border-radius: 20px;
}

.contactSection h2 {
    padding-bottom: 30px;
}

.contactSection h3 {
    font-size: 30px;
    line-height: 39px;
    font-weight: 600;
}

.contactSection a.contactlink {
    text-decoration: none;
    font-size: 23px;
    line-height: 32.5px;
    font-weight: 600;
}

.contactSection p {
    font-size: 20px;
    line-height: 28px;
    font-weight: 500;
}

.contactSection .leftbar p {
    font-size: 16px;
    line-height: 20.8px;
    font-weight: 400;
    opacity: 30%;
}

.contactSection .contactform .form-control {
    border: 1px solid #FFFFFF;
    border-radius: 80px;
    background-color: transparent;
    padding: 12px 20px;
	color:white;
}

.contactSection .contactform .form-control.lastbox {
    border: none;
	color:white;
}

.contactSection .hline {
    width: 93%;
    height: 1px;
    background: #fff;
    color: #FFFFFF;
    text-align: center;
    margin: 0 auto;
}

.contactSection .contactform .lastelement {
    border: 1px solid #FFFFFF;
    border-radius: 25px;
    background-color: transparent;
}

.form-control::placeholder {
    /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #FFFFFF;
    opacity: 1;
    /* Firefox */
    font-size: 14px;
    line-height: 26.24px;
    font-weight: 700;
    opacity: 30%;
}

.form-control:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: #FFFFFF;
    font-size: 14px;
    line-height: 26.24px;
    font-weight: 700;
    opacity: 30%;
}

.form-control::-ms-input-placeholder {
    /* Microsoft Edge */
    color: #FFFFFF;
    font-size: 14px;
    line-height: 26.24px;
    font-weight: 700;
    opacity: 30%;
}

.contactSection .bgorangeBTN {
    border: none;
}

/*Contact Section CSS END*/

/*Footer Section CSS Start*/
.footerSection {
    padding: 30px 0px 20px 0px;
}

.footerSection .row {
    padding: 0px 0px 40px 0px;
}

.footerSection img.logoimg {
    width: 147px;
    height: auto;
}

.footerSection .footerlink {
    gap: 100px;
}

.footerSection a {
    font-size: 16px;
    line-height: 29.98px;
    font-weight: 400;
    text-decoration: none;
}

.footerSection p {
    font-size: 16px;
    line-height: 29.98px;
    font-weight: 400;
}

.footerSection .footerbar {
    padding: 30px 0px 0px 0px;
    border-top: 1px solid #F77003;
}

.footerSection .socialicon {
    gap: 20px;
}

.footerSection .socialicon a {
    background: url('../images/bggray.png') no-repeat;
    background-repeat: no-repeat;
    height: 30px;
    width: 30px;
    text-align: center;
}

/*Footer Section CSS END*/

.domestinc {
    position: fixed;
    left: 24px;
    bottom: 34px;
    z-index: 999;
}

.bhms-rtl .headerSection,
.bhms-rtl .challengeSetion .challengetext,
.bhms-rtl .whiteSection,
.bhms-rtl .gameSection2,
.bhms-rtl .faqSection,
.bhms-rtl .contactSection,
.bhms-rtl .footerSection {
    direction: rtl;
}

.bhms-rtl .faqSection .accordion-button::after {
    margin: 0 auto 0 0 !important;
}

.slick-slide {
    position: relative;
}

.bhms-rtl .slidercontent {
    right: 0;
    padding-right: 50px;
    direction: rtl;
}

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

    .challengeSetion h3 {
        font-size: 40px;
        line-height: 90px;
    }

    .challengeSetion .scrollcard img {
        width: 300px;
    }

    .challengeSetion .scrollcard .chlimg1 {
        position: absolute;
        transform: translate(118px, -20px);
    }

    .challengeSetion .scrollcard .chlimg2 {
        position: absolute;
        transform: translate(500px, 145px);
    }

    .challengeSetion .scrollcard .chlimg3 {
        position: absolute;
        transform: translate(780px, 440px);
        z-index: 0;
    }

    /* .gameSection .imagegame:hover .cardleft {
        position: absolute;
        opacity: 100%;
        transform: translate(10px, 0px);
        right: 900px;
    }
    .gameSection .imagegame:hover .cardright {
        position: absolute;
        z-index: 1;
        transform: translate(440px, 0px);
        opacity: 100%;
    }*/
    .slick-slide img {
        width: 660px !important;
    }
}

@media only screen and (max-width: 1280px) {
    .challengeSetion h3 {
        font-size: 44px;
        line-height: 80px;
    }

    .scrollcard img {
        width: 370px;
    }

    .challengeSetion .scrollcard .chlimg2 {
        position: absolute;
        transform: translate(449px, 50px);
    }

    .challengeSetion .scrollcard .chlimg3 {
        position: absolute;
        transform: translate(780px, 330px);
        z-index: 0;
    }

    .challengeSetion .scrollcard .chlimg1 {
        position: absolute;
        transform: translate(0px, -20px);
    }

    .whiteSection p {
        font-size: 38px;
        line-height: 57.2px;
        font-weight: 700;
    }

    .gameSection2 img {
        width: 260px;
    }
}

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

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

    .challengeSetion h3 {
        line-height: 90px;
        font-size: 48px;
    }

    .challengeSetion .scrollcard img {
        width: 250px;
        height: auto;
    }

    /*.gameSection .imagegame  img{
        width: 250px;
        height: auto;
    }
    .gameSection .imagegame:hover .cardleft {
        right: 596px;
    }
    .gameSection .imagegame:hover .cardright {
        transform: translate(290px, 0px);
    }*/
    .gameSection h2 {
        padding-bottom: 70px;
    }

    .faqSection {
        padding: 90px 167px;
    }

    .whiteSection .whitetext {
        padding: 80px 80px;
    }

    .whiteSection p {
        font-size: 32px;
        line-height: 40px;
        font-weight: 700;
    }

    .slick-slide {
        width: 770px !important;
    }

    .sliderSection p {
        font-size: 40px;
        line-height: 50px;
        font-weight: 700;
    }

    .slick-slide img {
        width: 670px !important;
    }
}

@media only screen and (max-width: 991px) {
    .cardSection .bottom1 {
        right: 10%;
    }

    .cardSection .bottom2 {
        right: 12%;
    }

    .cardSection .top2 {
        right: 12%;
    }

    .cardSection .mainimg {
        right: 16%;
    }

    .tophovercard:hover .top1 {
        transform: translate(-40%, -20%);
        z-index: 1;
    }

    .tophovercard:hover .top2 {
        transform: translate(6%, -20%);
        z-index: 1;
    }

    .tophovercard:hover .middle2 {
        transform: translate(12%, 40%);
    }

    .tophovercard:hover .bottom2 {
        transform: translate(10%, 70%);
        z-index: 1;
    }

    .challengeSetion h3 {
        line-height: 80px;
        font-size: 40px;
    }

    .challengeSetion .scrollcard .chlimg2 {
        position: absolute;
        transform: translate(350px, 145px);
    }

    .challengeSetion .scrollcard .chlimg3 {
        position: absolute;
        transform: translate(640px, 260px);
        z-index: 0;
    }

    .whiteSection .whitetext {
        padding: 50px 50px;
    }

    .whiteSection p {
        font-size: 28px;
        line-height: 32px;
        font-weight: 700;
    }

    .slick-slide img {
        width: 400px;
    }
}

@media only screen and (max-width: 767px) {
    .tophovercard:hover .mainimg {
        transform: translate(0%, 40%);
        width: 400px;
    }

    .tophovercard:hover .top1 {
        width: 400px;
    }

    .tophovercard:hover .top2 {
        width: 570px;
    }

    .tophovercard:hover .middle1 {
        width: 600px;
    }

    .tophovercard:hover .middle2 {
        width: 500px;
        transform: translate(20%, 70%);
    }

    .tophovercard:hover .bottom1 {
        width: 500px;
        transform: translate(-50%, 90%);
    }

    .tophovercard:hover .bottom2 {
        width: 500px;
        transform: translate(20%, 100%);
    }

    .cardSection {
        padding: 87px 0px 70px 0px;
    }

    .cardSection .tophovercard:hover {
        height: 770px;
    }

    .cardSection .tophovercard {
        position: relative;
        height: 600px;
    }

    .challengeSetion h3 {
        line-height: 60px;
        font-size: 26px;
    }

    .challengeSetion .scrollcard .chlimg2 {
        position: absolute;
        transform: translate(250px, 50px);
    }

    .challengeSetion .scrollcard .chlimg3 {
        position: absolute;
        transform: translate(430px, 190px);
        z-index: 0;
    }

    .challengeSetion {
        padding: 60px 0px 30px 0px;
        position: relative;
    }

    .gameSection img {
        margin: 0px;
    }

    .gameSection {
        padding: 70px 0px 70px 0px;
    }

    .faqSection {
        padding: 60px 80px;
    }

    .faqSection h1 {
        padding: 0px 0px 0px 0px;
    }

    .contactSection .Main2Section {
        padding: 50px 60px 50px 60px;
    }

    .contactSection h2 {
        padding-bottom: 20px;
    }

    .contactSection a.contactlink {
        font-size: 16px;
        line-height: 26.5px;
    }

    .contactSection .rightbar {
        padding-top: 50px;
    }

    .footerSection .footerlink {
        gap: 60px;
    }

    .whiteSection .whitetext {
        padding: 30px 30px;
    }

    .whiteSection p {
        font-size: 18px;
        line-height: 22px;
        font-weight: 700;
    }

    .slidercontent {
        position: absolute;
        padding-left: 24px;
        bottom: 12px;
    }

    .sliderSection p {
        font-size: 20px;
        line-height: 36px;
    }

    .sliderSection .bgwhiteBTN {
        font-size: 12px;
        line-height: 13.24px;
        padding: 6px 12px;
    }

    .slick-slide img {
        width: 480px !important;
    }

    .footerSection p {
        text-align: center;
    }

    .footerSection img.logoimg {
        display: block;
        text-align: center;
        margin: 0 auto;
    }

    .gameSection2 img {
        width: 170px;
    }
}

@media only screen and (max-width: 575px) {
    .container-fluid {
        padding: 0px 30px;
    }

    .headerSection img.logoimg {
        width: 85px;
    }

    .bgwhiteBTN {
        font-size: 9px;
        line-height: 21.24px;
        font-weight: 700;
        color: #F77003;
        background-color: #FFFFFF;
        padding: 6px 22px;
        border: none;
        border-radius: 80px;
    }

    .bgorangeBTN {
        font-size: 9px;
        line-height: 20.24px;
        font-weight: 700;
        color: #FFFFFF;
        background-color: transparent;
        padding: 6px 22px;
        border: 1px solid;
        border-radius: 80px;
		text-decoration:none;
    }

    .headerSection img {
        width: 32px;
        height: auto;
    }

    .challengeSetion h3 {
        line-height: 36px;
        font-size: 17px;
    }

    .challengeSetion .scrollcard img {
        width: 160px;
    }

    .challengeSetion .scrollcard .chlimg1 {
        position: absolute;
        transform: translate(-30px, -74px);
    }

    .challengeSetion .scrollcard .chlimg2 {
        position: absolute;
        transform: translate(180px, -30px);
    }

    .challengeSetion .scrollcard .chlimg3 {
        position: absolute;
        transform: translate(330px, 80px);
        z-index: 0;
    }

    .gameSection h2 {
        font-size: 40px;
        line-height: 40px;
    }

    .gameSection h2 {
        padding-bottom: 50px;
    }

    .gameSection {
        padding: 50px 0px 50px 0px;
    }

    h1,
    h2 {
        font-size: 40px;
        line-height: 48px;
    }

    .faqSection {
        padding: 50px 40px;
    }

    .faqSection .accordion-button:not(.collapsed) {
        font-size: 20px;
    }

    .faqSection .accordion-button {
        padding: 0px;
        font-size: 20px;
    }

    .faqSection p.text-blue {
        font-size: 14px;
    }

    .faqSection .accordion-button::after {
        width: 10px;
        height: 10px;
    }

    .faqSection .accordion-item {
        padding: 20px 14px 30px 14px;
    }

    .footerSection img.logoimg {
        width: 100px;
    }

    .footerSection .footerlink {
        gap: 20px;
    }

    .footerSection p {
        text-align: center;
    }

    .contactSection h3 {
        font-size: 20px;
    }

    .contactSection p {
        font-size: 16px;
    }

    .slick-slide img {
        width: 320px !important;
    }

    .slick-slide {
        width: 320px !important;
    }

    .sliderSection .wrapper {
        padding: 0px;
    }

    .slick-list {
        padding: 0px;
    }

    .slick-slide {
        margin: 0px -70px 0px 92px !important;
    }

    .sliderSection .bgwhiteBTN {
        display: block;
    }

    .slidercontent .btnscroll a {
        text-decoration: none;
    }

    .sliderSection {
        padding: 30px 0px 40px 0px;
    }

    .wrapper .slick-dots li button:before {
        font-size: 20px;
        color: #F77003;
    }

    .slidercontent {
        width: 150px;
    }

    .footerSection img.logoimg {
        display: block;
        text-align: center;
        margin: 0 auto;
    }

    .tophovercard img {
        width: 330px
    }

    .card {
        animation-duration: 3s;
        animation-timing-function: ease-in-out;
        animation-iteration-count: infinite;
    }

    .card {
        animation-name: rotate;
        transform: translate3d(0, 0, 0);
    }

    @keyframes rotate {

        from,
        to {
            animation-timing-function: ease-in;
            transform: rotateY(-10deg);
        }

        25%,
        75% {
            animation-timing-function: ease-out;
            transform: rotateY(0deg);
        }

        50% {
            animation-timing-function: ease-in;
            transform: rotateY(10deg);
        }
    }

    @keyframes texture {

        from,
        to {
            transform: translate3d(0, 0, 0);
        }

        50% {
            transform: translate3d(-50%, 0, 0);
        }
    }

    .tophovercard img {
        width: 250px;
    }

    .tophovercard:hover .mainimg {
        transform: translate(-16%, 40%);
        width: 250px;
    }

    .tophovercard:hover .top1 {
        width: 330px;
    }

    .tophovercard:hover .top2 {
        width: 430px;
    }

    .tophovercard:hover .middle1 {
        width: 450px;
    }

    .tophovercard:hover .middle2 {
        width: 360px;
    }

    .tophovercard:hover .bottom1 {
        width: 360px;
    }

    .tophovercard:hover .bottom2 {
        width: 380px;
    }

    .cardSection .tophovercard:hover {
        height: 600px;
    }

    .cardSection .tophovercard {
        position: relative;
        height: 300px;
        padding-top: 0px !important;
    }

    .cardSection .mainimg {
        right: 0%;
    }

    .tophovercard img {
        width: 400px;
    }

    .tophovercard img.mainimg {
        width: 300px;
    }

    .cardSection {
        padding: 87px 0px 30px 0px;
    }

    .gameSection2 img {
        width: 130px;
    }

    .gameSection2 h2 {
        font-size: 40px;
        line-height: 40px;
        padding-bottom: 50px;
    }

    .gameSection2 {
        padding: 50px 0px 50px 0px;
    }

    /*    .tophovercard img {
    width: 100%;
}*/
}

@media only screen and (max-width: 320px) {
    .footerSection img.logoimg {
        display: block;
        text-align: center;
        margin: 0 auto;
    }

    .footerSection p {
        font-size: 12px;
        line-height: 20.98px;
        text-align: center;
    }

    .footerSection .footerlink {
        display: flex;
        gap: 20px;
    }

    .footerSection .row {
        padding: 0px 0px 20px 0px;
    }

    .footerSection .footerbar {
        padding: 16px 0px 16px 0px
    }

    .contactSection .Main2Section {
        padding: 20px 12px 20px 12px;
    }

    .contactSection .bgorangeBTN {
        display: block;
    }

    .contactSection .rightbar {
        padding-top: 30px;
    }

    .faqSection {
        padding: 30px 20px;
    }

    .faqSection .accordion-button {
        padding: 0px;
        font-size: 16px;
        line-height: 24.85px;
    }

    .faqSection .accordion-button:not(.collapsed) {
        font-size: 16px;
        line-height: 24.85px;
    }

    h1,
    h2 {
        font-size: 28px;
        line-height: 30px;
    }

    .gameSection {
        padding: 24px 0px 24px 0px;
    }

    .gameSection h2 {
        font-size: 24px;
        line-height: 30px;
        padding-bottom: 24px;
    }

    /*    .gameSection .imagegame img {
        width: 80px;
        height: auto;
    }
    .gameSection .imagegame:hover .cardright {
        transform: translate(90px, 0px);
    }*/
    .challengeSetion h3 {
        line-height: 36px;
        font-size: 20px;
        letter-spacing: 2px;
    }

    .challengeSetion {
        padding: 30px 0px 30px 0px;
        position: relative;
    }

    .challengeSetion .scrollcard img {
        width: 100px;
    }

    .challengeSetion .scrollcard .chlimg2 {
        position: absolute;
        transform: translate(70px, 10px);
    }

    .challengeSetion .scrollcard .chlimg3 {
        position: absolute;
        transform: translate(156px, 66px);
        z-index: 0;
    }

    .whiteSection .whitetext {
        padding: 30px 30px;
    }

    .whiteSection p {
        font-size: 14px;
        line-height: 16px;
        font-weight: 700;
    }

    .slick-slide img {
        width: 180px !important;
    }

    .slick-slide {
        margin: 0px 10px 0px 0px !important;
    }

    .sliderSection p {
        font-size: 14px;
        line-height: 22px;
    }

    .wrapper .slick-dots li button:before {
        font-size: 10px;
        color: #F77003;
    }

    .domestinc img {
        width: 30px;
        height: auto;
    }

    .domestinc {
        position: fixed;
        left: 16px;
        bottom: 20px;
        z-index: 999;
    }
}

@media (min-width: 320px) and (max-width: 500px) {
    .tophovercard img {
        width: 300px;
    }

    .tophovercard img.top1 {
        width: 290px;
    }

    .tophovercard img.top2 {
        width: 400px;
    }

    .tophovercard img.bottom1 {
        width: 354px;
    }

    .tophovercard img.bottom2 {
        width: 354px;
    }

    .card {
        animation-duration: 3s;
        animation-timing-function: ease-in-out;
        animation-iteration-count: infinite;
    }

    .card {
        animation-name: rotate;
        transform: translate3d(0, 0, 0);
    }

    @keyframes rotate {

        from,
        to {
            animation-timing-function: ease-in;
            transform: rotateY(-10deg);
        }

        25%,
        75% {
            animation-timing-function: ease-out;
            transform: rotateY(0deg);
        }

        50% {
            animation-timing-function: ease-in;
            transform: rotateY(10deg);
        }
    }

    @keyframes texture {

        from,
        to {
            transform: translate3d(0, 0, 0);
        }

        50% {
            transform: translate3d(-50%, 0, 0);
        }
    }

    .tophovercard:hover .mainimg {
        transform: translate(-16%, 40%);
        width: 190px;
    }

    .tophovercard:hover .top1 {
        width: 250px;
    }

    .tophovercard:hover .top2 {
        width: 350px;
    }

    .tophovercard:hover .middle1 {
        width: 340px;
    }

    .tophovercard:hover .middle2 {
        width: 300px;
    }

    .tophovercard:hover .bottom1 {
        width: 300px;
    }

    .tophovercard:hover .bottom2 {
        width: 290px;
    }

    .cardSection .tophovercard:hover {
        height: 480px;
    }

    .cardSection .tophovercard {
        position: relative;
        height: 300px;
        padding-top: 0px !important;
    }

    .cardSection .mainimg {
        right: 0%;
    }

    .tophovercard img {
        width: 400px;
    }

    .tophovercard img.mainimg {
        width: 250px;
    }

    .cardSection {
        padding: 87px 0px 30px 0px;
    }

    .challengeSetion h3 {
        text-transform: uppercase;
        letter-spacing: 6px;
        line-height: 28px;
        font-size: 10px;
    }

    .challengeSetion .scrollcard .chlimg3 {
        position: absolute;
        transform: translate(270px, 80px);
    }

    .challengeSetion .scrollcard .chlimg2 {
        position: absolute;
        transform: translate(150px, -25px);
    }

    .challengeSetion .scrollcard img {
        width: 120px;
    }

    .headerSection .rightbtnSection {
        gap: 6px;
    }

    .headerbar {
        padding-left: 0px;
        padding-right: 0px;
    }

    .bgwhiteBTN {
        font-size: 10px;
        line-height: 10.24px;
        padding: 6px 16px;
    }

    .bgorangeBTN {
        font-size: 10px;
        line-height: 10.24px;
        padding: 6px 16px;
    }

    .gameSection2 img {
        width: 90px;
    }
}

@media (min-width: 320px) and (max-width: 430px) {
    .challengeSetion h3 {
        text-transform: uppercase;
        letter-spacing: 1px;
        line-height: 26px;
        font-size: 20px;
    }

    .challengeSetion .scrollcard img {
        width: 80px;
    }

    .challengeSetion .scrollcard .chlimg1 {
        position: absolute;
        transform: translate(0px, -74px);
    }

    .challengeSetion .scrollcard .chlimg2 {
        position: absolute;
        transform: translate(100px, -25px);
    }

    .challengeSetion .scrollcard .chlimg3 {
        position: absolute;
        transform: translate(180px, 30px);
    }
}

.contactSection .contactform .form-control:focus {
    box-shadow: none !important;
}