/* added for preventing slow then fast scroll */
html {
  scroll-behavior: auto !important;
}
/* home banner css start */
.videoSliderItem .playNowBtn:focus {
    outline: none !important;
}

.videoSliderItem .viewImgBtn:focus{
	outline: none !important;
}

.homeBanner .edGameHubBtn{outline: none !important; border: none !important;}

.homeBanner .edGameHubBtn:active {
    border: 2px solid transparent;
}

.seeAllBtn,
.sdgBtn, 
.joinUs,
.homeBanner .bannerTitle,
.homeBanner .bannerSubtitle {
    font-family: 'HouschkaRoundedAlt-Medium';
    font-weight: 700;
}
.sgdQuizBtn .quizBtn,
.sgdGuideBtn,
.homeBanner .bannerTxt {
    font-family: 'HouschkaRoundedAlt-DemiBold';
}
.homeBannerWrapper .joinUs,
.videoTxtWrapper .sdgBtn{
    outline: none;
}
.homeBanner:after {
    content: "";
    background: transparent linear-gradient(180deg, #00000003 0%, #000000CC 70%, #000000 100%) 0% 0% no-repeat padding-box;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    height: 100%;
    width: 100%;
}
.homeBannerWrapper {
    padding: 112px 49px 49px;
    text-align: center;
    width: 100%;
    position: relative;
    z-index: 1;
}
.homeBanner .bannerSubtitle {
    color: #fff;
    font-size: 32px;
    line-height: 38px;
    margin-bottom: 0px;
}
.homeBanner .bannerTitle {
    font-size: 80px;
    line-height: 80px;
    color: #fff;
    margin-bottom: 24px;
    display: inline-block;
    padding-bottom: 12px;
}
.border_bottom {
    border-bottom: 1px solid #ffffff;
}
.homeBanner .bannerTxt {
    color: #fff;
    font-size: 24px;
    line-height: 28px;
    max-width: 652px;
    margin: auto;
}
.seeAllBtn,
.sdgBtn,
.joinUs {
    background-color: #F41FD6;
    background: #F41FD6 linear-gradient(270deg, #F41FD6 0%, #DC0916 100%) 0% 0% no-repeat padding-box;
    color: #ffffff;
    padding: 8px 33px;
    border: none;
    border-radius: 35px;
    font-size: 20px;
    line-height: 28px;
    font-weight: 400;
}

/*9 DEC 2024*/
	.homeBannerWrapper p {
		margin-top: 20px;
		color: #fff;
		font-size: 20px;
		font-family: 'HouschkaRoundedAlt-Medium';
	}	
	.homeBannerWrapper a{
		display: block;
		font-size: 22px;
		color: #ffffff;
		font-family: 'HouschkaRoundedAlt-Medium';
	}
	/*9 DEC 2024*/

.seeAllBtn {
    background: #ffffff;
    color: #DF235C;
    margin-left: 12px;
    display: none;
}

.joinUs  {
	/*Banner CTA getting cut*/
    margin-top: 20px;
}
.seeAllBtn:hover,
.sdgBtn:hover,
.joinUs:hover {
    background-color: #F41FD6;
    background: #F41FD6 linear-gradient(to right, #F41FD6, #DC0916) 0% 0% no-repeat padding-box;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}
.seeAllBtn:hover {
    color: #fff;
    transition: color 0.1s ease-in-out;
}


.sgdQuizBtn {
    border: none;
    background-color: #91003A;
    border-radius: 16px 0px 0px 16px;
    font-family: Calibri, sans-serif;
    font-size: 16px;
    line-height: 23px;
    color: #fff;
    padding: 10px 19px 10px 39px;
    position: absolute;
    width: 175px;
    right: 0px;
    top: 77%;
    transform: translateY(-50%);
    z-index: 1;
    display: none;
}
.edGameHubBtn {
    position: absolute;
    left: 0px;
    z-index: 25;
    color: #007DC5;
    font-size: 20px;
    line-height: 24px;
    font-family: 'HouschkaRoundedAlt-DemiBold';
    background-color: #FFFFFF;
    padding: 11px 30px 11px 13px;
    text-decoration: unset;
    display: inline-block;
    top: 35%;
}
.sgdQuizDayBtn {
    position: absolute;
    left: 45px;
    z-index: 25;
    text-decoration: unset;
    display: inline-block;
    top: 75%;
    display: none;
}
.sgdQuizDayBtn:after {
    content: '';
    position: absolute;
    top: -38px;
    right: -32px;
    height: 35px;
    width: 30px;
    /*Removed and added in template HTML*/
    background-size: contain;
}
.sgdQuizDayBtn:before {
    content: '';
    position: absolute;
    width: 88px;
    height: 102px;
    /*Removed and added in template HTML*/
    background-size: contain;
    left: -54px;
    z-index: 3;
    top: -25px;
}
.sgdQuizDayBtn .btnTxt {
    font-size: 24px;
    line-height: 29px;
    font-family: 'HouschkaRoundedAlt-DemiBold';
    color: #E41F65;
    display: block;
}
.sgdQuizDayBtn .btnTxt2 {
    width: 170px;
    height: 38px;
    padding-left: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    transform: matrix(1, -0.03, 0.03, 1, 0, 0);
}
.sgdQuizDayBtn .btnTxt2:after {
    content: '';
    position: absolute;
    width: 100px;
    height: 1px;
    background: #2A2A2A;
    top: -6px;
    right: -3px;
}
.sgdQuizDayBtn .btnTxt2:before {
    content: '';
    position: absolute;
    width: 1px;
    height: 15px;
    background: #2A2A2A;
    top: -6px;
    right: -4px;
}
.sgdQuizDayBtn .btnTxt1 {
    color: #ffffff;
    background: #E41F65;
    width: 140px;
    height: 34px;
    transform: matrix(1, 0.02, -0.02, 1, 0, 0);
    display: flex;
    align-items: center;
    justify-content: center;
}
.sgdQuizDayBtn .btnTxt1:after {
    content: '';
    position: absolute;
    width: 1px;
    height: 14px;
    background: #E41F65;
    bottom: -6px;
    right: -4px;
}
.sgdQuizDayBtn .btnTxt1:before {
    content: '';
    position: absolute;
    width: 32px;
    height: 1px;
    background: #E41F65;
    bottom: -6px;
    right: -3px;
}
.upcomingFeatureBtn {
    z-index: 4;
    text-align: right;
    position: absolute;
    top: 35%;
    right: 0px;
	border: none;
    box-shadow: none;
    background-color: transparent;
    outline: none !important;
}
.upcomingFeatureBtn .upcomingFeatureBtnTxt1 {
    font-size: 22px;    
    line-height: 26px;
    font-family: 'HouschkaRoundedAlt-DemiBold';
    color: #E41F65;
    padding: 5px 11px 8px;
    display: block;
    background-color: #FFFFFF;
}
.upcomingFeatureBtn .upcomingFeatureBtnTxt2 { 
    font-size: 18px;
    line-height: 22px;
    font-family: 'HouschkaRoundedAlt-DemiBold';
    color: #FFFFFF;
    text-shadow: 0px 3px 60px #000000E6;
    padding: 4px 13px;
    display: inline-block;
    background-color: #E21F64;
    position: relative;
}
.upcomingFeatureBtn .upcomingFeatureBtnTxt2:after  {
    /*content: '';
    height: 50px;
    width: 50px;
    border-radius: 50%;
    /*Removed and added in template HTML*/
    /*display: inline-block;
    position: absolute;
    left: -40px;
    top: -10px;*/
}
.edGameHubBtnTxt {
    max-width: 95px;
    display: inline-block;
}
.edGameHubBtnImg {
    position: absolute;
    width: 200px;
    height: 300px;
    display: inline-block;
    /*Removed and added in template HTML*/
    top: -70px;
    left: 12px;
}
.sgdQuizBtn .quizBtn {
    font-size: 24px;
    line-height: 29px;
    display: block;
}
.sgdGuideBtn {
    border: none;
    background-color: #eaebec;
    border-radius: 12px 0px 0px 12px;
    padding: 11px 19px 11px 39px;
    color: #333333;
    font-size: 20px;
    line-height: 24px;
    position: absolute;
    width: 200px;
    right: 0px;
    top: 65%;
    transform: translateY(-50%);
    z-index: 1;
}
.sgdQuizBtn .arrowIcon,
.sgdGuideBtn .arrowIcon {
    display: inline-block;
    height: 24px;
    width: 28px;
    /*Removed and added in template HTML*/
    background-size: contain;
    vertical-align: middle;
    position: absolute;
    left: 7px;
    top: 50%;
    transform: translateY(-50%);
}
.sgdQuizBtn,
.sgdGuideBtn  {
    -webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 1s; /* Firefox < 16 */
    -ms-animation: fadein 1s; /* Internet Explorer */
    -o-animation: fadein  1s; /* Opera < 12.1 */
    animation: fadein 1s;
}

.sgdQuizBtn .arrowIcon {
    filter: brightness(15);
}



/* home banner css end */


/* ================ ****************  meet your team css start **************** ================  */
    .homeMeetTeam .memberTxt,
    .homeMeetTeam .sgdtxt,
    .homeMeetTeam .sgdTitle {
        font-family: 'HouschkaRoundedAlt-DemiBold';
    } 
    .homeMeetTeam .memberName {
        font-family: 'HouschkaRoundedAlt-Medium';
        font-weight: 700;
    }

    .homeMeetTeam {
        background: transparent linear-gradient(180deg, #200C33 0%, #390641 35%, #000000 100%) 0% 0% no-repeat padding-box;
        min-height: 650px;
        padding: 25px 49px 35px;
        /* padding-bottom: 150px; */
        padding-bottom: 200px;
        position: relative;
    }
    .homeMeetTeam::after{
        content: '';
        position: absolute;
        background: #36003A 0% 0% no-repeat padding-box;
        mix-blend-mode: soft-light;
        bottom: 0px;
        left: 0px;
        width: 100%;
        height: 47%;
        z-index: 0;
    }
    .homeMeetTeam .homeMeetTeamWrapper  {
        min-width: 897px;
        margin: auto;
        width: 75%;
        text-align: center;
        position: relative;
        z-index: 1;
    }
    .homeMeetTeam .sgdTitle {
        font-size: 48px;
        line-height: 62px;
        color: #ffffff;

    }
    .homeMeetTeam .sgdtxt {
        color: #ffffff;
        font-size: 24px;
        line-height: 29px;
        margin-bottom: 0px;
    }
    .homeMeetTeam .memberName {
        font-size: 40px;
        line-height: 40px;
        color: #E6CFD8;
        margin-bottom: 6px;
    }
    .homeMeetTeam .memberTxt {
        font-size: 20px;
        line-height: 24px;
        color: #E6CFD8;
    }
    .sgdImg {
        max-width: 100%;
        height: auto;
        width: 100%;
        max-width: 938px;
    }
    .homeMeetTeam .sgdImg{
        margin-top: 0px;
    }
    .homeMeetTeam .teamList {
        display: flex;
        justify-content: space-evenly;
        margin-top: -50px;
        margin-left: -60px;
    }
    .homeMeetTeam .teamItem {
        margin-left: 80px;
    }


/* ================ ****************  meet your team css end **************** ================  */

/* ================ ****************  your mission css start **************** ================  */
    .cardHoverContent .playNowBtn,
    .sliderCardBody .viewImgBtn,
    .videoSliderItem .cardTxt,
    .sgdTabContentWrapper .tabSubtitle,
    .sgdTabContentWrapper .tabTitle,
    .homeMission .sgdTitle {
        font-family: 'HouschkaRoundedAlt-DemiBold';
    }
    .videoSliderItem .cardTitle {
        /* font-family: 'Houschka-medium';
        font-weight: 700; */
        font-family: Calibri, sans-serif;
    } 
    .sgdTabContentWrapper .tabTxt {
        font-family: Calibri, sans-serif;
    }
    .sgdTabs .tabTitle {
        font-family: Calibri, sans-serif;
    }
    .homeMission {
        position: relative;
    }
    .homeMissionWrapper {
        padding: 30px  0px 0px;
        text-align: center;
        /* padding-top: 180px; */
        /* padding-top: 200px; */
        padding-top: 110px;

        position: relative;
    }
    .homeMissionWrapper .homeMissionHead {
        padding: 0px 49px;
    }
    .homeMissionWrapper::before {
        content: '';
        position: absolute;
        top: -176px;
        left: 0px;
        height: 400px;
        width: 213px;
        /*Removed and added in template HTML*/
        display: none;
    }
    .homeMissionWrapper::after{
        content: '';
        position: absolute;
        /* top: 195px;
        right: 0px;
        height: 210px;
        width: 144px; */
        height: 300px;
        width: 300px;
        top: -122px;
        left: 50%;
        transform: translateX(-50%);
        /*Removed and added in template HTML*/
        background-size: contain;

        display: none;
    }
    .waveWrapper {
        top: -120px;
        position: absolute;
        left: 0px;
        right: 0px;
        width: 100%;
        overflow: hidden;
    }
    .waveWrapper::after {
        content: '';
        position: absolute;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 10px;
        background: #070009;
        z-index: -1;
    }
    .waveWrapper img {
        width: 112%;
        height: auto;
        position: relative;
        left: -106px;
    }
    .homeMission .flagIcon {
        height: 32px;
        width: 32px;
        display: block;
        /*Removed and added in template HTML*/
        background-size: contain;
        margin: 0px auto 20px;
    }
    .homeMission .sgdTitle {
        font-size: 64px;
        line-height: 77px;
        color: #141414;
        margin-bottom: 20px;
    }
    .homeMission .sgdtxt {
        color: #2D2D2D;
        font-size: 24px;
        line-height: 29px;
        max-width: 1158px;
        margin: 0px auto 20px;
        font-family: Calibri, sans-serif;
        max-width: 800px;
    }
    .boldTxt {
        font-weight: 700;
    } 
    .mt-48 {
        margin-top: 48px;
    }
    .sgdTabs .tabIcon {
        height: 60px;
        width: 60px;
        display: inline-block;
        display: block;
        margin: 0px auto 12px;
    }
    .sgdTabs {
        display: flex;
        justify-content: center;
        margin-top: 60px;
        padding-top: 10px;
        background-color: #fff;
    }
    .sgdTabs .sgdTabItem  {
        z-index: 2;
    }
    .fixedTabs  {
        position: sticky;
        z-index: 999;
        /* left: 0px;
        right: 0px; */
        top: 0px;
        transition: 0.5s ease-in-out;
        
    }
    .sgdTabs.fixedTabs .tabIcon {
        height: 35px;
        width: 35px;
        margin: 0px auto 4px;
        transition: 0.5s ease-in;
    }
    .sgdTabs.fixedTabs .sgdTabBtn:hover .tabIcon, 
    .sgdTabs.fixedTabs .sgdTabItem.active .tabIcon {
        height: 35px;
        width: 35px;
    }
    .sgdTabs.fixedTabs .tabTitle {
        font-size: 18px;
        line-height: 22px;
        transition: 0.5s ease-in;
    }
    .sgdTabs.fixedTabs .sgdTabBtn .tabTitle:after {
        height: 6px;
        transition: 0.2s ease-in;
    }
    /* .fixedTabs:after {
        content: '';
        position: absolute;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        width: 100%;
        background: #ffffff;
        height: 100%;
        z-index: 0;
        width: 100vw;
        margin: 0 0 0 -66px;
    } */
    .sgdTabs .sgdTabContent {
        /* display: none; */
    }
    .sgdTabs .gamePlayTab .tabIcon {
        /*Removed and added in template HTML*/
    }
    .sgdTabs .gamePlayTab .sgdTabBtn:hover .tabIcon,
    .gamePlayTab.active .tabIcon {
        /*Removed and added in template HTML*/
    }
    .sgdTabs .videoTab .tabIcon {
        /*Removed and added in template HTML*/
    }
    .sgdTabs .videoTab .sgdTabBtn:hover .tabIcon,
    .videoTab.active .tabIcon {
        /*Removed and added in template HTML*/
    }
    .sgdTabs .comicsTab .tabIcon {
        /*Removed and added in template HTML*/
    }
    .sgdTabs .comicsTab .sgdTabBtn:hover .tabIcon,
    .comicsTab.active .tabIcon {
        /*Removed and added in template HTML*/
    }
    .sgdTabs .pledgeTab .tabIcon {
        /*Removed and added in template HTML*/
    }
    .sgdTabContents .videoSliderItem:focus-visible,
    .pledgeTab .completedDate:focus-visible,
    .pledgeTab .videoSliderItem:focus-visible {
        outline: 1px dotted #666 !important;
        outline-offset: 2px !important;
    }
    .pledgeTab .owl-carousel.owl-drag .owl-item {
        padding-top: 3px;
    }
    .sgdTabs .pledgeTab .sgdTabBtn:hover .tabIcon,
    .pledgeTab.active .tabIcon {
        /*Removed and added in template HTML*/
        background-size: contain;
    }
    .sgdTabs .sgdTabBtn {
        background: transparent;
        border: none;
		outline-color:transparent;
        line-height: 0;
        position: relative;
        border-radius: 7px 7px 0px 0px;
        margin: 0px 40px;
    }
    .sgdTabs .sgdTabBtn .tabTitle:after {
        content: '';
        height: 8px;
        border-radius: 7px 7px 0px 0px;
        background-color: transparent;
        position: absolute;
        bottom: 0;
        width: 0px;
        background-color: #E41165;
        left: 50%;
        transition: all ease-in-out .2s;
    }
    .sgdTabItem.active .sgdTabBtn .tabTitle:after,
    .sgdTabs .sgdTabBtn:hover .tabTitle:after {
        width: 100%;
        left: 0;
    }
    .sgdTabs .sgdTabItem.active .tabTitle ,
    .sgdTabs .sgdTabBtn:hover .tabTitle  {
        color: #E41165;
    }
    .sgdTabs .tabTitle {
        display: inline-block;
        width: 100%;
        color: #000000;
        font-size: 20px;
        line-height: 25px;
        font-weight: 600;
        padding-bottom: 10px;
        position: relative;
    }   
    .sgdTabContents {
        /* margin: 0px -49px; */
        position: relative;
        /* min-height: 600px;
        overflow: hidden;
        max-height: calc(100vh - 200px);
        height: calc(100vh - 200px); */
    }
    .sgdTabContents:after {
        content: '';
    }
    /* .sgdTabContentsWrapper {
        overflow: auto;
        height: calc(100vh - 200px);
    } */
    .sgdTabContent {
        position: relative;
        /* display: none; */
        width: 100%;
    }
    .sgdTabContentWrapper {
        /* min-height: 650px; */
        height: auto;
        width: 100%;    
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }
    /* .sgdTabContentWrapper:after */
    .videoOverlay {
        content: '';
        position: absolute;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        z-index: 1;
        background: transparent linear-gradient(270deg, #00000000 0%, #000000AF 74%, #000000DD 100%) 0% 0% no-repeat padding-box;
        /* background: transparent linear-gradient(180deg, #00000000 0%, #02000200 10%, #08000A 42%, #2B0034 100%) 0% 0% no-repeat padding-box; */
    }
    #comicsTab .videoOverlay {
        pointer-events:visible;
    }
    .sgdTabContentWrapper::before {
        content: '';
        height: 4px;
        width: 0%;
        background-color: #F41FD6;
        background: #F41FD6 linear-gradient(270deg, #F41FD6 0%, #DC0916 100%) 0% 0% no-repeat padding-box;
        position: absolute;
        bottom: 0px;
        z-index: 14;
        border-radius: 0px 5px 5px 0px;
    }
    .sgdTabContentWrapper.activeProgress::before {
        animation: progressAnimationStrike 6s forwards;
    }
    .sgdTabContent.active {
        display: inline-block;
    }
    .sgdTabContent#gamePlayTab {
        background: transparent linear-gradient(270deg, #00000000 0%, #000000AF 74%, #000000DD 100%) 0% 0% no-repeat padding-box;
    }
    .sgdTabContent .comicBgImg {
        display: none;
    }
    .sgdTabContent .comicBgImg,
    .sgdTabContent video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        /* height: auto; */
        height: 100%;
        object-fit: cover;
    }
    
    .sgdTabContent .pledgeTabIcon,
    .sgdTabContent .comicsTabIcon,
    .sgdTabContent .videoTabIcon,
    .sgdTabContent .gameTabIcon {
        display: inline-block;
        height: 48px;
        width: 48px;
        background-color: #ffffff;
        border-radius: 50%;
    }

    .sgdTabContent .gameTabIcon {
       /*Removed and added in template HTML*/
    }

    .sgdTabContent .videoTabIcon {
        /*Removed and added in template HTML*/
    }

    .sgdTabContent .comicsTabIcon {
        /*Removed and added in template HTML*/
    }

    .sgdTabContent .pledgeTabIcon {
        /*Removed and added in template HTML*/
    }

    .videoTxtWrapper {
        position: relative;
        z-index: 2;
        max-width: 560px;
        text-align: left;
        padding: 20px 49px 20px 0px; 
        margin: auto 0px;
    }
    .videoTxtBox {
        max-width: 1200px;
        margin: auto;
        width: 100%;
    }

    .sgdTabContentWrapper .tabTitle {
        font-size: 48px;
        line-height: 54px;
        color: #ffffff;
        margin: 0;
    }
    .sgdTabContentWrapper .tabSubtitle {
        font-size: 24px;
        line-height: 36px;
        color: #ffffff;
        padding-bottom: 2px; 
        position: relative;
        display: inline-block;
        margin-bottom: 15px;
    }
    .sgdTabContentWrapper .tabSubtitle:after {
        content: none;
        height: 3px;
        width: 100%;
        background: #fff;
        position: absolute;
        left: 0px;
        bottom: 0px;
        border-radius: 5px;
    }
    .sgdTabContentWrapper .tabTxt {
        font-size: 21px;
        line-height: 28px;
        color: #ffffff;
        font-family: 'HouschkaRoundedAlt-Medium';
    }   

    .videoBtn {
        height: 48px;
        width: 48px;
        display: inline-block;
        /*Removed and added in template HTML*/
        position: absolute;
        background-size: contain;
        z-index: 3;
        border: none; 
        top: 36%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .popupVideoBtn {
        height: 48px;
        width: 48px;
        display: inline-block;
        /*Removed and added in template HTML*/
        position: absolute;
        background-size: contain;
        z-index: 3;
        border: none; 
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        filter: invert(1);
        display: none;
    }
    .videoBtn.pause,
    .popupVideoBtn.pause {
       /*Removed and added in template HTML*/
    }
    .videoPledgeSlider,
    .videoSlider {
        z-index: 11;
        position: relative;
        background: transparent linear-gradient(180deg, #00000000 0%, #02000200 10%, #08000A 42%, #2B0034 100%) 0% 0% no-repeat padding-box;
        padding: 20px 0px 40px;
    }
    .videoPledgeSlider {
        padding: 20px 0px 20px;
    }
    .videoSliderItem .sliderCard {
        text-align: left;
        border-radius: 8px;
        position: relative;
    }
    .videoSliderItem {
        display: flex;
        justify-content: center;
        margin-bottom: 10px;
        cursor: pointer;
        border: 3px solid transparent;
    }
    .videoSliderItem.selected {
        border: 3px solid #DF235C;
        border-radius: 11px;
    }
    .comicsTab .videoSliderItem.selected {
        border-radius: 24px;
    }
    .pledgeTab .videoSliderItem.selected {
        border-radius: 8px;
        /* background-color: #F41FD6;
        background: #F41FD6 linear-gradient(270deg, #F41FD6 0%, #DC0916 100%) 0% 0% no-repeat padding-box; */
    } 
    .videoSliderItem .sliderCardBody {
        padding: 5px;
        margin-top: -10px;
        position: absolute;
        width: 100%;
        bottom: 0px;
        border-radius: 0px 0px 8px 8px;
        height: 55px;
        display: flex;
        align-items: center;
        /* z-index: 1;
        position: relative;
        border-radius: 0px 0px 8px 8px; */
    }
    .videoSliderItem .sliderCardBody:after{
        content: '';
        position: absolute;
        bottom: 0px;
        left: 0px;
        right: 0px;
        background: transparent linear-gradient(179deg, #00000000 0%, #000000AF 74%, #000000DD 100%) 0% 0% no-repeat padding-box;
        width: 100%;
        height: 90px;
        z-index: 0;
        border-radius: 0px 0px 7px 7px;
    }
    .videoSliderItem .sliderCardBody,
    .videoSliderItem .cardImg {
        /* max-width: 240px; */
        max-width: 100%;
    }
    .videoSliderItem .sliderCard {
        width: 100%;
    }
    .videoSliderItem .cardImg {
        border-radius: 8px 8px 8px 8px;
        padding-bottom: 10px;
    }

    .videoSliderItem .cardTxt {
        font-size: 14px;
        line-height: 14px;
        color: #ffffff;
        text-transform: uppercase;
        margin-bottom: 0px;
        font-family: Calibri, sans-serif;
    }
    .videoSliderItem .cardTitle {
        font-size: 15px;
        line-height: 19px;
        color: #ffffff;
        text-transform: uppercase;
        margin-bottom: 0px;

        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .videoSliderItem .gameCardIconWrap {
        width: auto;
        max-width: 60px;
        height: 36px;
        min-width: 45px;
        margin-right: 7px;
        background-size: contain;
        display: flex;
        padding: 0px 2px;
        text-align: center;
    }
    .videoSliderItem .gameCardIcon {
        max-width: 85%;
        height: auto;
    }

    .noPovertyicon {
        display: inline-block;
        /*Removed and added in template HTML*/
        width: 60px; 
        min-width: 60px;
        height: 36px;
        margin-right: 7px;
        background-size: contain;
    }
    .zeroHungerIcon {
        display: inline-block;
        /*Removed and added in template HTML*/
        width: 40px;
        min-width: 40px;
        height: 29px;
        margin-right: 7px;
        background-size: contain;
    }
    .goodHealthIcon {
        display: inline-block;
       /*Removed and added in template HTML*/
        width: 40px;
        min-width:  40px;
        height: 29px;
        margin-right: 7px;
        background-size: contain;
    }
    .owl-prev,
    .owl-next {
        height: 50px;
        width: 50px;
        border-radius: 50%;
        /*Removed and added in template HTML*/
        background-size: contain;
        transform: translateY(-62%);
        position: absolute;
        top: 47%;
    }   
    .owl-prev button,
    .owl-next button{
        height: 40px;
        width: 40px;
        border: none;
        border-radius: 50%;
        background-color: transparent;
    }

    .owl-next {
        right: 35px;
    }
    .owl-prev {
        left: 36px;
        transform: translateY(-62%) rotate(180deg);
    }
    .owl-prev.disabled,
    .owl-next.disabled {
        display: none;
    }

    .comicsTab  .videoSliderItem .sliderCardBody {
        height: 100%;
        width: 100%;
        justify-content: center;
        opacity: 0;
        transition: 0.3s ease-in-out;
    }
    .comicsTab  .videoSliderItem:focus-visible .sliderCardBody,
    .comicsTab  .videoSliderItem:hover .sliderCardBody {
        opacity: 1;
        transition: 0.3s ease-in-out;
    }
    .comicsTab .owl-carousel .owl-item img{
        border-radius: 24px;
        padding-bottom: 0;
    }
    .comicsTab .videoSliderItem .sliderCardBody:after {
        border-radius: 0px 0px 24px 24px;
    }
    .cardHoverContent {
        text-align: center;
        position: absolute;
        top: 0px;
        right: 0px;
        left: 0px;
        bottom: 0px;
        height: 100%;
        width: 100%;
        justify-content: center; 
        display: flex;
        align-items: center;
        opacity: 0;
        transition: 0.3s ease-in-out;
    }
    .cardHoverContent:after {
        content: '';
        position: absolute;
        bottom: 0px;
        left: 0px;
        right: 0px;
        background: transparent linear-gradient(179deg, #00000000 0%, #000000AF 74%, #000000DD 100%) 0% 0% no-repeat padding-box;
        width: 100%;
        height: 90px;
        z-index: 0;
        border-radius: 0px 0px 7px 7px;
    }
    .videoSliderItem .playNowBtn,
    .videoSliderItem .btnGroup {
        z-index: 1;
    }
    .videoSliderItem .btnGroup {
        display: none;
    }
    .videoSliderItem:focus-within .cardHoverContent,
    .videoSliderItem:focus-visible .cardHoverContent,
    .videoSliderItem:hover .cardHoverContent {
        opacity: 1;
        transition: 0.3s ease-in-out;
    }
    .cardHoverContent .playNowBtn, 
    .sliderCardBody .viewImgBtn {
        background-color: rgba(0,0,0,0.6);
        font-size: 14px;
        padding: 4px 16px 6px;    
        border-radius: 20px;
        border: none;
        color: #fff; 
        z-index: 1;
    } 
    .videoSliderItem .viewImgBtn {
        background: transparent;
    }  
    .videoSliderItem .viewImgIcon {
        height: 44px;
        width: 44px;
        display: inline-block;
        /*Removed and added in template HTML*/
    }
    .videoSliderItem .playNowBtn {
        background: transparent;
    }
    .videoSliderItem .playNowIcon {
        height: 44px;
        width: 44px;
        display: inline-block;
        /*Removed and added in template HTML*/
    }
    .cardHoverContent .btnShare, .cardHoverContent .btnLike,
    .sliderCardBody .btnShare,
    .sliderCardBody .btnLike {
        position: absolute;
        bottom: 15px;
        height: 35px;
        width: 35px;
        background: #f1f1f0;
        border: none;
        padding: 10px;
    }
    .cardHoverContent .btnLike,
    .sliderCardBody .btnLike  {
        /*Removed and added in template HTML*/ 
        background-size: contain;
        left: 8px;
    }
    .cardHoverContent .btnShare,
    .sliderCardBody .btnShare {
       /*Removed and added in template HTML*/
        background-size: contain;
        right: 8px;
    }
    .mseeAllBtn,
    .mSdgBtn {
        display: none;
    }
    .comingSoonWrap .comingSoonBtn {
        color: #fff;
        font-size: 20px;
        line-height: 21px;
        font-family: 'HouschkaRoundedAlt-DemiBold';
		/*Coming Soon Button Style*/
		border: none;
		box-shadow: none;
		background-color: transparent;
		cursor: pointer;
    }
    .comingSoonWrap {
        background-color: #E41F65;
        box-shadow: 0px 5px 13px #0000007B;
        transform: matrix(0.84, -0.54, 0.54, 0.84, 0, 0);
        position: absolute;
        top: 25px;
        left: -37px;
        width: 186px;
        height: 28px;
        padding-top: 1px;
        z-index: 3;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }
    .sliderCards {
        width: 100%;
        position: relative;
        overflow: hidden;
    }
    .complitionWrap {
        /* display: flex; */
        display: none;
        justify-content: space-between;
        align-items: center;
        margin-top: 9px;
        flex-wrap: wrap;
        padding: 3px 4px;
    }
    .pledgeTab .sliderCards .complitionWrap {
        margin-top: 2px;
        justify-content: center;
    }
    .pledgeTab .sliderCards {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    } 
    .complitionWrap .likedWrap {
        margin-right: auto;
        display: flex;
        align-items: center;
    }
    .complitionWrap .likeEmptyIcon {
        display: inline-block;
        height: 20px;
        width: 20px;
        margin-right: 3px;
        /*Removed and added in template HTML*/
        background-size: contain;
    }
    .complitionWrap .likeEmptyIcon.liked {
       /*Removed and added in template HTML*/
        background-size: contain;
    }
    .completedDate {
        display: flex;
        align-items: center;
    }
    .complitionWrap .likedCount,
    .completedDate .cdCount {
        color: #FFFFFF;
        font-size: 16px;
        line-height: 20px;
        font-family: 'HouschkaRoundedAlt-DemiBold';    
    }
    .completedDate .cdTitle {
        font-family: Calibri, sans-serif;
    }
    .completedDate .cdTitle {
        color: #fff;
        font-size: 12px;
        line-height: 20px;
        margin-bottom: 0px;
        padding-left: 2px;
    }
    .completedIcon {
        height: 20px;
        width: 20px;
        display: inline-block;
        border: none;
        /*Removed and added in template HTML*/
        background-size: contain;
        margin-right: 2px;
    }

    .likesViewsWrap .views,
    .likesViewsWrap .likes {
        color: #FFFFFF;
        font-size: 16px;
        line-height: 19px;
        font-family: 'HouschkaRoundedAlt-DemiBold';
    }
    .likesViewsWrap{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0px 4px;
        flex-wrap: wrap;
    }
    .comicsTab .likesViewsWrap {
        padding: 2px 7px 3px;
        display: none;
    }
    .likesViewsWrap .viewsWrap,
    .likesViewsWrap .likesWrap {
        display: flex;
        align-items: center;
    }                         
    .likesViewsWrap .viewsWrap {
        margin-left: auto;
    }
    .likesViewsWrap .btnView,                               
    .likesViewsWrap .btnLike {
        height: 24px;
        width: 24px;
        border: none;
        background-color: transparent;
        margin-right: 4px;
    }
    .likesViewsWrap .btnLike {
        /*Removed and added in template HTML*/
        background-size: contain;
    }
    .sliderCards .btnLike.liked{
        /*Removed and added in template HTML*/
        background-size: contain;
    }   
    .likesViewsWrap .btnLike {
        height: 20px;
        width: 22px;
    
    }
    .likesViewsWrap .btnView {
        /*Removed and added in template HTML*/
        background-size: contain;
    }
    .pledgeTab .owl-stage {
        display: flex;
    }
    .pledgeTab .owl-item {
        display: flex;
        flex: 1 0 auto;
    }



/* ================ ****************  your mission css end **************** ================  */

/* ================ ****************  SDG Learning Journey​ start **************** ================  */
    .learningJourneyWapper .option,
    .learningJourneyWapper .equalIcon,
    .learningJourneyWapper .additionIcon,
    .learningJourneyWapper .journeyName,
    .learningJourneyWapper .secTitle {
        font-family: 'HouschkaRoundedAlt-DemiBold';
    } 
    .learningJourneyWapper .sectxt{
        font-family: 'HouschkaRoundedAlt-Medium';
    }
    /* .completeSgdLink {
        display: none;
    } */
    .learningJourney {
        /* background-color: #FFFFFF3B; */
        background-color: #f9f9f9;
        padding: 35px 49px 70px;
    }    
    .learningJourneyWapper {
        text-align: center;
    }
    .learningJourneyWapper .secTitle {
        font-size: 48px;
        line-height: 58px;
        color: #141414;
    }
    .learningJourneyWapper .sectxt {
        color: #2D2D2D;
        font-size: 24px;
        line-height: 29px;
        max-width: 1158px;
        margin: 0px auto 20px;
    }
    .learningJourneyWapper .equalIcon,
    .learningJourneyWapper .additionIcon {
        color: #E41165;
        font-size: 80px;
        line-height: 170px;
    }
    .learningJourneyWapper .comicIcon,
    .learningJourneyWapper .pledgeIcon,
    .learningJourneyWapper .videoIcon,
    .learningJourneyWapper .gameIcon {
        vertical-align: bottom;
        display: inline-block;
    }
    .learningJourneyWapper .gameIcon {
        height: 65px;
        width: 65px;
        /*Removed and added in template HTML*/
        margin-bottom: 10px;
    }
    .learningJourneyWapper .videoIcon {
        height: 41px;
        width: 65px;
        /*Removed and added in template HTML*/
        margin-bottom: 12px;
    }
    .learningJourneyWapper .pledgeIcon {
        height: 70px;
        width: 52px;
        /*Removed and added in template HTML*/
        margin-bottom: 10px;
    }
    .learningJourneyWapper .comicIcon {
        height: 48px;
        width: 66px;
        /*Removed and added in template HTML*/
        margin-bottom: 10px;
    }
    .learningJourneyWapper .journeyName {
        color: #5F5F5F;
        font-size: 24px;
        line-height: 32px;
    }
    .learningJourneyWapper .option {
        color: #5F5F5F;
        font-size: 16px;
        line-height: 24px;
        position: absolute;
        bottom: 0px;
        right: 50%;
        transform: translateX(50%);
    }
    .JourneyWapper {
        display: flex;
        align-items: center;
        justify-content: space-between;
        max-width: 1240px;
        margin-left: auto;
        margin-right: auto;
    }
    .JourneyLists {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }
    .journey  {
        margin-right: 4px;
        position: relative;
        padding-bottom: 24px;
        display: flex;
        flex-direction: column;
        align-items: center;
        align-self: flex-end;
    }
    .totalJourneyImg {
        max-width: 465px;
        min-width: 100%;
        height: auto;
    }
    .viewSampleCerify {
        box-shadow: 2px 6px 12px #0010FF1C;
        border: 1px solid #FFFFFF;
        border-radius: 30px;
        background-color: #000000B5;
        padding: 8px 24px;
        color: #FFFFFF;
        font-size: 16px;
        line-height: 20px;
        font-family: 'HouschkaRoundedAlt-DemiBold';
        position: absolute;
        left: 35%;
        bottom: 0;
        transform: translateX(-23%);
        min-width: 220px;       
    }
    .totalJourney {
        position: relative;
    }

/* ================ ****************  SDG Learning Journey​ end **************** ================  */


/* ================ ****************  Become a team SGD Ambassador start **************** ================  */
.becomeAmbassador .ladderImgtxt,
.becomeAmbassador .sectxt,
.becomeAmbassador .secTitle {
    font-family: 'HouschkaRoundedAlt-DemiBold';
} 
.becomeAmbassador {
    background-color: #f9f9f9;
}

.becomeAmbassadorWrapper {
    text-align: center;
    position: relative;
    padding-bottom: 20px;
}
.becomeAmbassadorWrapper  .sectxt,
.becomeAmbassadorWrapper  .secTitle,
.becomeAmbassadorWrapper .imgWrapper {
    position: relative;
    z-index: 1;
}
.becomeAmbassadorWrapper:after {
    content: '';
    /*Removed and added in template HTML*/
    background-size: contain;
    opacity: 0.07;
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
    width: 75%;
    z-index: 0;
}

.becomeAmbassador .secTitle {
    font-size: 48px;
    line-height: 58px;
    color: #141414;
}
.becomeAmbassador .sectxt {
    color: #2D2D2D;
    font-size: 24px;
    line-height: 29px;
    max-width: 750px;
    margin: 0px auto 0px;
}

.becomeAmbassador .ladderImg {
    width: 100%;
    max-width: 1042px;
    margin-top: -20px;
}
.becomeAmbassador .ladderImgtxt {
    color: #141414;
    font-size: 20px;
    line-height: 24px;
    position: absolute;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
}

/* ================ ****************  Become a team SGD Ambassador end **************** ================  */

/* ================ ****************  Our Impact css start **************** ================  */
    .impactLists  .impactTitle, 
    .ourImpact .sectxt,
    .ourImpact .secTitle {
        font-family: 'HouschkaRoundedAlt-DemiBold';
    }
    .impactLists .plusIcon,
    .impactLists  .impactCount {
        font-family: 'HouschkaRoundedAlt-Medium';
        font-weight: 700;
    }
    .ourImpact {
        text-align: center;
        padding: 40px 49px;   
        background-color: #fbfbfb;
        display: none;
    }
    .ourImpact .ourImpactWrapper {
        min-width: 897px;
        margin: auto;
        width: 75%;
    }
    .impactLists {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        padding: 0px;
    }
    .impactItem {
        margin-bottom: 30px;
        width: 33.33%;
    }
    .ourImpact .secTitle {
        font-size: 48px;
        line-height: 58px;
        color: #141414;
        margin-bottom: 10px;
    }
    .ourImpact .sectxt  {
        font-size: 24px;
        line-height: 29px;
        color: #2D2D2D;
        margin-bottom: 30px;
    }   
    .impactLists .plusIcon,
    .impactLists .impactCount {
        font-size: 48px;
        line-height: 58px;
        /* display: block; */
    }
    .impactLists .impactTitle {
        font-size: 24px;
        line-height: 29px;
        color: #1D1D1D;
    }

    .impactLists .impactIcon {
        height: 60px;
        width: 60px;
        display: block;
        margin: 0px auto 0px;

    }
    .impactLists .sdgBtn {
        margin-top: 20px;
    }
    .ourImpactWrapper .sdgBtn{
        padding: 11px 49px;
        font-size: 24px;
    }
    .impactLists .stateImpact .impactIcon {
        /*Removed and added in template HTML*/
        background-size: contain;
    }
    .impactLists .schoolImpact .impactIcon {
        /*Removed and added in template HTML*/
        background-size: contain;
    }
    .impactLists .learnersImpact .impactIcon {
        /*Removed and added in template HTML*/
        background-size: contain;
    }
    .impactLists .certifyImpact .impactIcon {
        /*Removed and added in template HTML*/
        background-size: contain;
    }
    .impactLists .pledgesImpact .impactIcon {
        /*Removed and added in template HTML*/
        background-size: contain;
    }
    .impactLists .comicsImpact .impactIcon {
        /*Removed and added in template HTML*/
        background-size: contain;
    }
    .impactLists  .impactCountWrap {
        display: block;
    }
    .impactLists .stateImpact .plusIcon,
    .impactLists .stateImpact .impactCount {
        color: #8E0034;
    }
    .impactLists .schoolImpact .plusIcon,
    .impactLists .schoolImpact .impactCount {
        color: #0983C9;
    }
    .impactLists .learnersImpact .plusIcon,
    .impactLists .learnersImpact .impactCount {
        color: #B20851;
    }
    .impactLists .certifyImpact .plusIcon,
    .impactLists .certifyImpact .impactCount {
        color: #B20851;
    }
    .impactLists .pledgesImpact .plusIcon,
    .impactLists .pledgesImpact .impactCount {
        color: #00ACAB;
    }
    .impactLists .comicsImpact .plusIcon,
    .impactLists .comicsImpact .impactCount {
        color: #4F32A0;
    }
/* ================ ****************  Our Impact css end **************** ================  */

/* ================ ****************  Do More with Team SGD start  **************** ================  */
    
    .doMoreSGD .secTitle {
        font-family: 'HouschkaRoundedAlt-DemiBold';
    }
    .doMoreSGD .sgdCard .sgdCardTitle {
        font-family: 'HouschkaRoundedAlt-Medium';
        font-weight: 700;
        border-bottom: 1px solid #171717;
    }
    .doMoreSGD {
        background-color: #f9f9f9;
        padding: 30px 20px;
    }
    .doMoreSGD .doMoreSGDWrapper {
        min-width: 897px;
        margin: auto;
        max-width: 1366px;
        width: 100%;
    }
    .doMoreSGD .secTitle {
        font-size: 48px;
        line-height: 58px;
        color: #141414;
        margin-bottom: 15px;
        text-align: center;
    }
    .doMoreBtnGroup {
        text-align: center;
        margin: 15px; 
    }
    .doMoreSGD .cards {
        display: flex;
    }
    .sgdCard {
        background-color: #FFFFFF;
        border-radius: 16px;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        padding: 20px;
        margin: 0px 8px 20px ;
    }
    .sgdCard .sgdCardTitle {
        font-size: 32px;
        line-height: 38px;
        color: #141414;
        padding-bottom: 8px;
        text-align: center;
    }
    .sgdCard .sgdCardHead {
        padding-bottom: 30px;
    }
    .sgdCard .cardLists {
        padding: 0px;
    }
    .sgdCard .cardListItem {
        display: flex;
        margin-bottom: 22px;
    }
    .sgdCard .cardIcon {
        display: inline-block;
        margin-right: 15px;
        margin-top: 8px;

    }
    .sgdCard .cardTxt {
        font-size: 20px;
        line-height: 24px;
        color: #000000;
        font-family: Calibri, sans-serif;
    }
   .sgdCard .certifyIcon {
        height: 23px;
        /* width: 100%; */
        min-width: 34px;
        max-width: 27px;
        /*Removed and added in template HTML*/
        background-size: contain;
    }
    .learnShareIcon {
        height: 31px;
        /* width: 100%; */
        min-width: 34px;
        max-width: 29px;
        /*Removed and added in template HTML*/
        background-size: contain;
    }

    .shareComicIcon {
        height: 34px;
        /* width: 100%; */
        min-width: 34px;
        max-width: 31px;
        /*Removed and added in template HTML*/
        background-size: contain;
    }

    .playQuizIcon {
        height: 32px;
        /* width: 100%; */
        min-width: 34px;
        max-width: 18px;
        /*Removed and added in template HTML*/
        background-size: contain;
    }

    .empowerIcon {
        height: 34px;
        /* width: 100%; */
        min-width: 34px;
        max-width: 21px;
        /*Removed and added in template HTML*/
        background-size: contain;
    }

    .learningDashIcon {
        height: 28px;
        /* width: 100%; */
        min-width: 34px;
        max-width: 32px;
        /*Removed and added in template HTML*/
        background-size: contain;
    }

    .dailyActIcon {
        height: 30px;
        /* width: 100%; */
        min-width: 34px;
        max-width: 31px;
        /*Removed and added in template HTML*/
        background-size: contain;
    }

    .sgdMonthIcon {
        height: 35px;
        /* width: 100%; */
        min-width: 34px;
        max-width: 35px;
        /*Removed and added in template HTML*/
        background-size: contain;
    }

    .routineIcon {
        height: 36px;
        /* width: 100%; */
        min-width: 34px;
        max-width: 36px;
        /*Removed and added in template HTML*/
        background-size: contain;
    }

    .sustainIcon {
        height: 37px;
        /* width: 100%; */
        min-width: 34px;
        max-width: 30px;
        /*Removed and added in template HTML*/
        background-size: contain;
    }
    
    .screeningIcon {
        height: 32px;
        /* width: 100%; */
        min-width: 34px;
        max-width: 32px;
       /*Removed and added in template HTML*/
        background-size: contain;
    }

    .socialComicIcon {
        height: 32px;
        /* width: 100%; */
        min-width: 34px;
        max-width: 32px;
        /*Removed and added in template HTML*/
        background-size: contain;
    }

    .doMoreSGD .sgdTabs {
        display: none;
    }

/* ================ ****************  Do More with Team SGD end  **************** ================  */


/* ================ ****************  Time to act css start   **************** ================  */

.timeToAct .sectxt,
.timeToAct .secTitle {
    font-family: 'HouschkaRoundedAlt-DemiBold';
}
.timeToAct {
    padding: 45px 49px;
    /* background: #CCCCCC; */
}
.timeToAct .timeToActWrapper {
    position: relative;
    text-align: center;
    display: flex;
    justify-content: center;
    /* align-items: center; */
    align-items: flex-end;
    top:40px;
}
.timeToAct .imgTxt {
    width: 445px;
    height: 485px;
    /*Removed and added in template HTML*/
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 100px 0px 50px;
    top: -45px;
    /* position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); */
}
.timeToAct .timetoactLhImg,
.timeToAct .timetoactRhImg {
    /* max-width: 1045px; */
    width: 100%;
    height: auto;
    z-index: 1;
    position: relative;
}
.timeToAct .timetoactLhImg {
    max-width: 340px;
    margin-right: -50px;
    top: -35px;
}
.timeToAct .timetoactRhImg {
    max-width: 320px;
    margin-left: -15px;
    top: -35px;
    left: -25px;
}
.timeToAct .secTitle  {
    font-size: 64px;
    line-height: 82px;
    color: #000000;
}
.timeToAct .sectxt {
    font-size: 24px;
    line-height: 29px;
    color: #000000;
    max-width: 344px;
}

.timeToAct .sdgBtn {
    margin-top: 50px;
    position: absolute;
    bottom: 0;
    left: 49%;
    transform: translateX(-50%);
}

/* ================ ****************  time to act css end  **************** ================  */

/* total likes list popup css starts */
.stampLikeModal.sdgModel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #00000041;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 999;
    overflow-x: hidden;
    overflow-y: auto;
    display: none;
}
.sdgModel.stampLikeModal .sdgModelWrapper {
    max-width: 400px;
    margin: 1.75rem auto;
    position: relative;
    width: 100%;
    background: #ffffff;
    border-radius: 16px;
    margin-top: 60px;
}
.sdgModel.stampLikeModal .sdgModelHeader {
    padding: 0px !important;
    border-bottom: none;
}
.stampLikeModal.sdgModel .sdgModelContent {
    position: relative;
    width: 100%;
}
.stampLikeModal.sdgModel .closeModel {
    height: 32px;
    width: 32px;
    /*Removed and added in template HTML*/
    background-size: contain;
    border: none;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 4;
}
.stampLikeModal .sdgModelBody {
    width: 100%;
    padding: 20px 25px;
    position: relative;
}
.stampLikeModal h2 {
    font-weight: 600;
    font-size: 20px;
    padding-bottom: 10px;
    margin: 0px 0px 20px;
    border-bottom: 1px solid #cccccc;
}
.stampLikeModal .likedListContainer {
    max-height: 410px;
    overflow: auto;
}
.stampLikeModal .likedUserList {
    display: flex;
    margin-bottom: 15px;
}
.stampLikeModal .likedUserDP {
    width: 54px;
    height: 54px;
    background: #E87EB7;
    border: 1px solid #393939;
    border-radius: 100px;
    display: flex;
    position: relative;
    margin-right: 15px;
}
.stampLikeModal .likedUserDP span {
    width: 22px;
    height: 22px;
    position: absolute;
    right: -11px;
    bottom: 0px;
}
.stampLikeModal .likedUserDetails {
    width: calc(100% - 75px);
    padding-bottom: 15px;
    border-bottom: 1px solid #cccccc;
}
.likedUserList:last-child {
    margin: 0;
}
.likedUserList:last-child .likedUserDetails {
    border-bottom: none;
}
.likedUserDetails b {
    font-size: 20px;
}
.likedUserDetails p {
    margin-bottom: 0;
}
.stampLikeModal .likeEmptyIcon.liked {
   /*Removed and added in template HTML*/
    background-size: contain;
    width: 22px;
    height: 22px;
    position: absolute;
    right: -11px;
    bottom: 0px;
}
/* total likes list popup css ends */
/* completion list popup css start */
.stampCompletionModal.sdgModel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #00000041;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 999;
    overflow-x: hidden;
    overflow-y: auto;
    display: none;
}
.sdgModel.stampCompletionModal .sdgModelWrapper {
    max-width: 400px;
    margin: 1.75rem auto;
    position: relative;
    width: 100%;
    background: #ffffff;
    border-radius: 16px;
    margin-top: 60px;
}
.sdgModel.stampCompletionModal .sdgModelHeader {
    padding: 0px !important;
    border-bottom: none;
}
.stampCompletionModal.sdgModel .sdgModelContent {
    position: relative;
    width: 100%;
}
.stampCompletionModal.sdgModel .closeModel {
    height: 32px;
    width: 32px;
    /*Removed and added in template HTML*/
    background-size: contain;
    border: none;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 4;
}
.stampCompletionModal .sdgModelBody {
    width: 100%;
    padding: 20px 25px;
    position: relative;
}
.stampCompletionModal .sdgModalTabList {
    border-bottom: 1px solid #CBCBCB;
    margin-bottom: 30px;
}
.stampCompletionModal .sdgModalTabContent {
    display: none;
}
.sdgModalTabContent.active {
    display: block;
}
.stampCompletionModal .sdgModalTabTitle {
    line-height: 19px;
    font-size: 16px;
    font-family: 'HouschkaRoundedAlt-DemiBold';
    color: #434343;
    background-color: #fff;
    border: none;
    padding: 12px 9px;
    margin-right: 10px;
}
.stampCompletionModal .sdgModalTabTitle.active {
    border-bottom: 4px solid #4E4E4E;
    background-color: #F2F2F2;
    cursor: default;
}

.stampCompletionModal .stampCompletionListContainer {
    max-height: 410px;
    overflow: auto;
}
.stampCompletionModal .stampCompletionUserList {
    display: flex;
    margin-bottom: 15px;
}
.stampCompletionModal .stampCompletionUserDP {
    width: 54px;
    height: 54px;
    background: #E87EB7;
    border: 1px solid #393939;
    border-radius: 100px;
    display: flex;
    position: relative;
    margin-right: 15px;
}
.stampCompletionModal .stampCompletionUserDP span {
    width: 22px;
    height: 22px;
    position: absolute;
    right: -11px;
    bottom: 0px;
}
.stampCompletionModal .stampCompletionUserDetails {
    width: calc(100% - 75px);
    padding-bottom: 15px;
    border-bottom: 1px solid #cccccc;
}
.stampCompletionUserList:last-child {
    margin: 0;
}
.stampCompletionUserList:last-child .stampCompletionUserDetails {
    border-bottom: none;
}
.stampCompletionUserDetails b {
    font-size: 20px;
}
.stampCompletionUserDetails p {
    margin-bottom: 0;
}
/* completion list popup css ends */


@keyframes progressAnimationStrike {
    from { width: 0 }
    to   { width: 100% }
}

/* sdgMicrosite css start */
.sdgMicrosite .header-mashup {

}

/* sdgMicrosite css end */



/* SGD RTL CSS Start */
html[dir="rtl"] .searchIcon,
html[dir="rtl"] .sgdQuizBtn,
html[dir="rtl"] .sgdGuideBtn,
html[dir="rtl"] .sdg_loginMenuItem:after,
html[dir="rtl"] .shareWrapper {
    right: unset;
}
html[dir="rtl"] .header-mashup .mobMenu {
    margin-left: 15px;
    margin-right: 0px;
}
html[dir="rtl"] .sdg_loginMenuItem {
    margin-left: 0px;
    margin-right: 16px;
}
html[dir="rtl"] .sdg_icon {
    margin-left: 10px;
    margin-right: 0px;
}
html[dir="rtl"] .sdg_loginMenuItem:after {
    left: -9px;
}
html[dir="rtl"]  .sdg_form {
    margin-left: 35px;
    margin-right: 0px;
}
html[dir="rtl"] .sdg_menuList {
    padding-left: 0px;
    padding-right: 21px;
}
html[dir="rtl"] .shareWrapper {
    left: 108px;
}
html[dir="rtl"] .sgdGuideBtn {
    left: 0;
    border-radius:  0px 12px 12px 0px;
    padding: 11px 39px 11px 19px;
}
html[dir="rtl"] .sgdQuizBtn .arrowIcon, html[dir="rtl"] .sgdGuideBtn .arrowIcon {
    left: unset;
    right: 7px;
    transform: rotate(180deg) translateY(44%);

}
html[dir="rtl"] .sgdQuizBtn {
    padding: 10px 39px 10px 19px;
    left: 0px;
    border-radius:  0px 16px 16px 0px ;
}
html[dir="rtl"] .waveWrapper img {
    right: -106px;
    left: unset;
}
html[dir="rtl"] .sgdCard .cardIcon {
    margin-left: 15px;
    margin-right: 0px;
}
html[dir="rtl"] .timeToAct .timetoactRhImg {
    margin-right: -40px;
    margin-left: 0px;
}
html[dir="rtl"] .timeToAct .timetoactLhImg {
    margin-left: -16px;
    margin-right: 0px;
}
html[dir="rtl"] .videoTxtWrapper {
    padding: 20px 0px 20px 49px;
    text-align: right;
}
html[dir="rtl"] .seeAllBtn {
    margin-left: 0px;
    margin-right: 12px;
}
html[dir="rtl"] .sdg_menuList .sdg_menuLink {
    margin-right: 0px;
    margin-left: 30px;
}

html[dir="rtl"] .sdg_lhMenu {
    margin-right: 0px;
    margin-left: 55px;
}
html[dir="rtl"] .goodHealthIcon,
html[dir="rtl"] .noPovertyicon,
html[dir="rtl"] .zeroHungerIcon {
    margin-left: 7px;
    margin-right: 0px;
}
html[dir="rtl"] .videoSliderItem .cardTitle,
html[dir="rtl"] .videoSliderItem .cardTxt {
    text-align: right;
}
html[dir="rtl"] .sdg_search {
    padding: 4px 20px 4px 40px;
}
html[dir="rtl"] .searchIcon {
    left: 13px;
    top: 55%;
}

html[dir="rtl"] .homeMeetTeam .teamItem:nth-child(1) {
    order: 4;
}
html[dir="rtl"] .homeMeetTeam .teamItem:nth-child(2) {
    order: 3;
}
html[dir="rtl"] .homeMeetTeam .teamItem:nth-child(3) {
    order: 2;
}
html[dir="rtl"] .homeMeetTeam .teamItem:nth-child(4) {
    order: 1;
}
html[dir="rtl"] .sgdTabContentWrapper:after {
    background: transparent linear-gradient(90deg, #00000000 0%, #000000AF 74%, #000000DD 100%) 0% 0% no-repeat padding-box;
}
html[dir="rtl"] .completedDate .date, 
html[dir="rtl"] .completedDate .cdTitle {
    padding-left: 0px;
    padding-right: 5px;
}
html[dir="rtl"] .complitionWrap .likedWrap {
    margin-right: unset;
    margin-left: auto;
}
html[dir="rtl"] .complitionWrap .likeEmptyIcon {
    margin-right: 0px;
    margin-left: 3px;
}
html[dir="rtl"] .completedIcon {
    margin-left: 2px;
    margin-right: 0px;
}
html[dir="rtl"] .likesViewsWrap .viewsWrap {
    margin-right: auto;
    margin-left: unset;
}
html[dir="rtl"] .likesViewsWrap .btnLike,
html[dir="rtl"] .likesViewsWrap .btnView {
    margin-left: 4px;
    margin-right: 0px;
}
/* total likes & completion list popup css start */
html[dir="rtl"] .stampCompletionModal.sdgModel .closeModel ,
html[dir="rtl"] .stampLikeModal.sdgModel .closeModel {
    left: 8px;
    right: unset;
}
html[dir="rtl"] .stampCompletionModal .likedUserDP,
html[dir="rtl"] .stampLikeModal .likedUserDP {
    margin-right: 0px;
    margin-left: 15px;
}
html[dir="rtl"] .stampCompletionModal .stampCompletionUserDP,
html[dir="rtl"] .stampCompletionModal .likedUserDP,
html[dir="rtl"] .stampLikeModal .likedUserDP {
    margin-right: 6px;
    margin-left: 15px;
}
html[dir="rtl"] .stampCompletionModal .stampCompletionUserDP {
    margin-right: 11px;
}
html[dir="rtl"] .sgdQuizDayBtn:before,
html[dir="rtl"] .sgdQuizDayBtn,
html[dir="rtl"] .edGameHubBtnImg,
html[dir="rtl"] .edGameHubBtn {
    left: unset;
}   
html[dir="rtl"] .edGameHubBtn {
    right: 0px; 
    padding: 11px 13px 11px 30px;
}
html[dir="rtl"] .edGameHubBtnImg {
    right: 22px;
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}
html[dir="rtl"] .sgdQuizDayBtn {
    right: 45px;
    left: unset;
}
html[dir="rtl"] .sgdQuizDayBtn:before {
    right: -54px;    
}
html[dir="rtl"] .sgdQuizDayBtn .btnTxt2 {
    padding-right: 15px;
    padding-left: 0px;
}
html[dir="rtl"] .sgdQuizDayBtn:after {
    left: -32px;
    
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}
html[dir="rtl"] .sgdQuizDayBtn .btnTxt1 {
    transform: matrix(1, -0.05, 0.02, 1, 0, 0);
}
html[dir="rtl"]  .sgdQuizDayBtn .btnTxt1:after,
html[dir="rtl"] .sgdQuizDayBtn .btnTxt1:before,
html[dir="rtl"] .sgdQuizDayBtn .btnTxt2:after,
html[dir="rtl"] .sgdQuizDayBtn:after,
html[dir="rtl"] .sgdQuizDayBtn .btnTxt2:before {
    right: unset;
}
html[dir="rtl"] .sgdQuizDayBtn .btnTxt2:before {
    right: unset;
    left: -4px;
}   
html[dir="rtl"] .sgdQuizDayBtn .btnTxt2:after {
    left: -3px;
    right: unset;
}
html[dir="rtl"] .sgdQuizDayBtn .btnTxt1:before {
    left: -3px;
    right: unset;
}
html[dir="rtl"]  .sgdQuizDayBtn .btnTxt1:after {
    left: -4px; 

}
html[dir="rtl"] .timeToAct .timetoactRhImg {
    left: 10px;
}

html[dir="rtl"] .upcomingFeatureBtn {
    left: 0px;
    right: unset;
}
html[dir="rtl"] .upcomingFeatureBtn {
    text-align: left;
}
html[dir="rtl"]  .upcomingFeatureBtn .upcomingFeatureBtnTxt2:after {
    right: -40px;
    left: unset;
}

.HideObjects {
    display: none;
}

@media screen and (min-height: 600px) {
    .sdgModel.stampCompletionModal .sdgModelWrapper,
    .sdgModel.stampLikeModal .sdgModelWrapper {
        top: 50%;
        transform: translateY(-50%);
    }
}




/* total likes & completion list popup css end */
/* html[dir="rtl"] .searchPopup .popupBtn {
    margin-left: 0px;
    margin-right: 15px;
}
html[dir="rtl"] .searchPopup .closePopup {
    margin-left: 0px;
    margin-right: 8px;
}
html[dir="rtl"]  .searchPopup .searchInput {
    padding: 11px 16px 11px  86px ;
}
html[dir="rtl"] .searchPopup .searchBtn {
    right: unset;
    left: 0px;
    border-radius: 32px  0px  0px 32px;
}
html[dir="rtl"] .shareWrapper .dropdown_Menu {
    right: unset;
    left: 0px;
}
html[dir="rtl"] .shareWrapper .triangle {
    right: unset;
    left: 8px;
}
html[dir="rtl"] .shareWrapper .dropIcon {
    margin-right: 0px;
    margin-left: 8px;
}
html[dir="rtl"] .shareWrapper .copyIcon {
    margin-left: 0px;
    margin-right: 5px;
}
html[dir="rtl"] .triangle {
    width: 18px;
    height: 18px;
    top: -10px;
}
html[dir="rtl"] .triangle::before {
    display: none;
} */

/* SGD RTL CSS END */