html{
    overflow-x: hidden;
}

.franklinLightFont{
    font-family: LibreFranklin-Light;
}
.franklinMediumFont{
    font-family: LibreFranklin-Medium;
}
.franklinRegularFont{
    font-family: LibreFranklin-Regular;
}
.franklinBoldFont{
    font-family: LibreFranklin-Bold;
}

.navbar{
    background: linear-gradient(90deg, rgba(0,150,119,1) 25%, rgba(141,198,63,1) 100%)!important;
    box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.5);
}

.navbar.scrolled {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 999;
}

.navbar.scrolled .navbarLogo{
    width: 3em;
    transition: 0.3s ease-in all;
}

.navbar.scrolled .logo-right .navbarLogo{
    width: 7em;
}

.nav-link, .nav-link:hover{
    color: white !important;
}
.nav-link, .dropdown-item{
    font-size: 14px;
}
.dropdown-menu{
    padding-top: 0px;
    padding-bottom: 0px;
}




.navSubmenuColor{
    color: #00633b !important;
}
.navSubmenuColor:hover{
    color: #00633b !important;
    background-color: #8dc63f;
}
.mediaDropdownMenu:hover{
    background-color: #8dc63f;
}
.mediaSubmenuAnchor:hover{
    background-color: #8dc63f !important;
}
.aboutDropdownMenu:hover{
    background-color: #8dc63f;
}
.winnersDropdownMenu:hover{
    background-color: #8dc63f;
}
.aboutSubmenuAnchor:hover{
    background-color: #8dc63f !important;
}
.navbarLogo{
    width: 10rem;
    transition: 0.3s ease-in all;
}

.footerDiv{
    box-shadow: 0px -8px 10px 0px rgba(0, 0, 0, 0.2);
    padding-left: 20px;
    padding-right: 20px;
}
.footerCopy1{
    color: #00633b;
    margin-bottom: 2rem;
    padding-top: 3rem;
}
.footerCopy2{
    color: #00633b;
    font-weight: bold;
    margin-top: 2rem;
}
.footerDivider{
    border-width: 4px;
    border-color: #00633b;
}
.compObjDiv{
    background-color: #009677;
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 40px;
    padding-bottom: 40px;
    color: white;
}

.iconRow{
    margin-left: 0px;
    margin-right: 0px;
    padding-top: 5rem;
    padding-bottom: 5rem;
}
.iconDiv{
    background-image: url(/media/abdb00up/icon-bg.png);
    background-position: center center;
    background-size: cover;
}
.iconTitle1{
    color: white;
    text-align: center;
    transition: all 0.3s ease-in;
    transition-delay: .1s;
    font-size: 30px;
    line-height: 1.2em;
    padding: 20px 50px;
    opacity: 1;
    text-transform: capitalize;
}
.iconTitle2{
    color: white;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: rotateX(90deg) translate(-50%, -50%);
    transition: all 0.3s ease-in;
     font-size: 30px;
    line-height: 1.2em;
    width: 100%;
    opacity: 0;
    text-transform: capitalize;
}
.iconImageDiv{
    text-align: center;
    padding-bottom: 2rem;
}
.animationDiv{
    position: relative;
    padding-bottom: 2rem;
    background-image: url(https://budgetspeech.stgmarketingsites.co.za/media/yaslzzb5/icons-03.png);
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: 120%;
    display: block;
    justify-content: center;
    border-top: 1px solid #50b079;
    margin-top: 20px;
}

.animationDiv:hover{ text-decoration: none;}

.animationDiv:hover .iconTitle1{
    transform: rotateX(90deg);
    opacity: 0;
}

.animationDiv:hover .iconTitle2{
    transform: rotateX(0deg) translate(-50%, -70%);
    opacity: 1;
}


.iconTrans2hover{
    opacity: 1;
    transform: translateX(0);
    transition-delay: .1s;
    transition: all 0.3s cubic-bezier(0.5, 0.12, 0.46, 0.88);
     font-size: 30px;
    line-height: 1.2em;
}

.displayFlex{
    display: flex;
    justify-self: center;
}

.swiper-container-1{
    text-align: center;
    overflow-x: hidden;
    position: relative;
}
.swiper-wrapper{
    height: auto;
}


.carouselDiv{
    background-image: url(https://budgetspeech.stgmarketingsites.co.za/media/kijksgcd/background.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
.carouselImage{
    width: 100%;
}
#carouselCopy0{
    font-size: 55px;
    line-height: 1.1em;
    letter-spacing: 1px;
    padding-left: 12rem;
    padding-top: 1rem;
}
#carouselCopy1, #carouselCopy2{
    font-size: 55px;
    line-height: 1.1em;
    letter-spacing: 1px;
    padding-left: 12rem;
    padding-top: 1rem;
}
.colorWhite{
   color: white; 
}
.colorGreen{
   color: #8dc63f; 
}
.carouselAnchorDiv0{
    padding-left: 12rem;
}
.carouselAnchorDiv1{
    padding-left: 12rem;
}
.carouselAnchor{
   font-size: 16px;
   color: white;
   text-decoration: none;
   padding: 10px 30px;
   cursor: pointer;
   background-color: #8dc63f;
   border-radius: 5px;
   position: relative;
   overflow: hidden;
   display: inline-block;
   width: 45%;
   text-align: center;
}
.carouselAnchor span:first-child{
    position: relative;
    bottom: 0px;
    transition: 0.35s ease-in all;
}

.hover-txt{
    position: absolute;
    width: 100%;
    right: -100%;
    transition: 0.35s ease-in all;
} 

.carouselAnchor:hover span:first-child{
    bottom: -35px;
    transition: 0.35s ease-in all;
}

.carouselAnchor:hover .hover-txt{
    right: 50%;
    transform: translateX(50%);
    transition: 0.35s ease-in all;
}
.carouselAnchor:hover{
   color: #00633b;
   text-decoration: none;
}
.paddingBottom25{
    padding-bottom: 25px;
}
.carousel-control-prev > i:before{
    font-family: 'FontAwesome';
    content:"\f053";
}
.carousel-control-next > i:before{
    font-family: 'FontAwesome';
    content:"\f054";
}

.pastWinnersTitle{
    text-align: center;
    font-size: 45px;
    color: #00633b;
    padding-top: 2rem;
    padding-bottom: 2rem;
}
.pastWinnersCopy{
    font-size: 17px;
    color: #00633b;
}

.pageHeaderDiv{
    background: linear-gradient(90deg, rgba(0, 150, 119, 1) 25%, rgba(141, 198, 63, 1) 100%);
    padding-top: 5rem;
    padding-bottom: 5rem;
    padding-left: 40px;
    color: white;
}
.pagePathDiv{
    font-size: 14px;
}
.pagePathCopy{
    margin-bottom: 0px;
}
.pagePathAnchor{
    text-decoration: none;
    cursor: pointer;
    color: white;
}
.pagePathAnchor:hover{
    text-decoration: none;
    color: #00633b;
}
.pageTitleDiv{
    font-size: 60px;
    line-height: 1.1em;
}
.compRulesRowDiv{
    margin-top: 3rem;
    margin-bottom: 3rem;
}
.genRulesDiv{
    background-color: #8dc63f;
    
}
.genRulesTitleDiv, .pleaseNoteTitleDiv, .documentsTitleDiv{
    font-size: 45px;
    color: #00633b;
}
.genRulesCopyDiv, .genInfoCopyDiv, .pleaseNoteCopyDiv, .documentsCopyDiv{
    font-size: 17px;
    color: #00633b;
}
.whoEnterDiv{
    margin-top: 3rem;
    padding-left: 50px;
}
.whoEnterTitleDiv, .adjPanelTitleDiv, .adjCriteriaTitleDiv, .essayRulesTitleDiv, .prizesGenInfoTitleDiv, .referencingTitleDiv{
   font-size: 45px;
    color: #00633b; 
}
.whoEnterCopyDiv, .adjPanelCopyDiv, .adjCriteriaCopyDiv, .questionsCopyDiv, .essayRulesCopyDiv, .prizesGenInfoCopyDiv, .essentialReadingCopyDiv, .referencingCopyDiv, .plagCopyDiv{
    font-size: 17px;
    color: #00633b;
}

.adjPanelDiv, .adjCriteriaDiv, .questionsDiv, .essayRulesDiv, .prizesGenInfoDiv, .essentialReadingDiv, .plagDiv{
    padding-left: 50px;
}
.genInfoDiv{
    background-color: #8dc63f;
}
.genInfoTitleDiv{
    font-size: 45px;
    color: #00633b;
    padding-left: 10px;
}
.pleaseNoteDiv, .documentsDiv{
    background-color: #8dc63f;
}
.pleaseNoteAnchor{
    text-decoration: underline;
    color: #00633b;
}
.pleaseNoteAnchor:hover{
    text-decoration: underline;
    color: #00633b;
}
.questionsAnchor{
   font-size: 17px;
   color: #00633b;
   text-decoration: none;
   padding: 10px 30px;
   cursor: pointer;
   background-color: #8dc63f;
   border-radius: 5px;
}
.questionsAnchor:hover{
   color: #00633b;
   text-decoration: none;
}
.questionsAnchorDiv{
    padding-left: 50px;
    margin-top: 3rem;
}
.prizesPleaseNoteDiv{
     background-color: #009677;
}
.prizesPleaseNoteTitleDiv{
     font-size: 45px;
    color: white;
    padding-left: 10px;
}
.prizesPleaseNoteCopyDiv{
    font-size: 17px;
    color: white;
    padding-top: 2rem;
}
.prizesPleaseNoteRowCopy{
    padding-left: 1rem;
}
.referencingDiv{
   background-color: #8dc63f;
}
.essReadingAnchor{
    text-decoration: none;
    color: #00633b;
}
.essReadingAnchor:hover{
    text-decoration: none;
    color: #00633b;
}

.researchDiv{
    background-color: #8dc63f;
}
.researchTitleDiv{
     font-size: 45px;
    color: #00633b;
    padding-left: 50px;
    margin-bottom: 3rem;
}
.researchImage{
    width: 100%;
}
.researchCopyDiv{
    font-size: 17px;
    color: #00633b;
    align-content: center;
}

.timerDiv{
    background-color: #009677;
    border-radius: 20px;
    text-align: center;
}
.timerTitle{
    color: white;
    line-height: 1.4em;
    padding-bottom: 2rem;
}
#days, #hours, #minutes{
    color: #009677;
    background-color: white;
    padding: 10px 10px;
    font-size: 32px;
    width: 10rem;
    border-radius: 60px;
    margin: auto;
}
.timerDays, .timerHours, .timerMinutes{
    font-size: 20px;
    color: white;
}
.timerDaysDiv, .timerHoursDiv, .timerMinutesDiv{
    padding-bottom: 2rem;
}

.researchAnchor{
   font-size: 17px;
   color: #00633b;
   text-decoration: none;
   padding: 10px 30px;
   cursor: pointer;
   background-color: white;
   border-radius: 5px;
    display: block;
      justify-content: center;
      /*width: 70%;*/
      text-align: center;
}
.researchAnchor:hover{
     text-decoration: none;
      color: #00633b;
}

.plagAnchor{
    font-size: 17px;
   color: #00633b;
   text-decoration: none;
   padding: 10px 30px;
   cursor: pointer;
   background-color: #8dc63f;
   border-radius: 5px;
   margin-right: 10px;
}
.plagAnchor:hover{
    color: white;
    background-color: #009677;
    text-decoration: none;
}
.plagAnchorDiv{
    padding-left: 50px;
    margin-top: 3rem;
}

.plagAnchor svg{
    vertical-align: unset;
}

.guidelinesCopy1{
    font-size: 17px;
    color: #00633b;
    padding-left: 50px;
}
.guidelinesDiv{
    color: white;
    background-color: #009677;
}
.guidelinesHr{
    border: solid 1px white;
    margin-top: 4rem;
    margin-bottom: 4rem;
}

.loginHeaderDiv, .registerHeaderDiv{
    font-size: 29px;
    color: #00633b;
    margin-bottom: 1rem;
}
.registerHeader2Div{
    color: #00633b;
    margin-bottom: 1rem;
}
.loginCopy{
    color: #00633b;
    font-size: 12px;
    margin-bottom: 10px;
}
.registerCopy{
    color: #00633b;
    font-size: 16px;
    margin-bottom: 10px;
}
.loginDiv, .registerDiv{
    max-width: max-content;
    justify-self: center;
    border: 1px solid #00633b;
    padding: 2rem;
    margin: auto 0;
}
.loginInputDiv, .registerInputDiv{
    margin-bottom: 2rem;
}
.loginAnchor, .registerAnchor{
    background-color: #8DC63F;
    color: #00633B;
    border-radius: 10px;
    padding: 10px 20px;
    text-decoration: none;
    cursor: pointer;
    border: none;
}
.loginAnchor:hover, .registerAnchor:hover{
    background-color: #009677;
    text-decoration: none;
    color: #00633B;
}
.loginAnchorDiv{
    text-align: end;
}
.loginInput, .registerInput{
    width: 100%;
}
.redAsterick{
    color: #f56c6c;
}
.checkboxDiv{
  margin-bottom: 2rem;
  color: #00633b;
}
.checkboxCopy{
    display: inline-flex;
}
.toggleDiv{
    text-align: center;
}
.toggleCopy{
    border: 1px solid #00633b;
    font-size: 3rem;
    color: #00633b;
    padding: 5px;
    cursor: pointer;
}
.toggleActive{
    color: white;
    background-color: #8DC63F;
}
.displayNone{
    display: none;
}

.resetPwCopy{
        color: #00633b;
        cursor: pointer;
}

.dashNavDiv{
    text-align: right;
}
.dashNavAnchorDiv{
    color: #00633b;
    text-decoration: none;
    cursor: pointer;
    font-size: 17px;
}
.dashNavAnchorDiv:hover{
    color: #00633b;
    text-decoration: none;
}
.dashNavCopyDiv{
    margin-bottom: 1rem;
}
.dashMainDiv{
    margin-top: 100px;
    margin-bottom: 100px;
}
.dashNavCol{
    border-right: 2px solid #00633b;
}
.dashCopyDiv{
   color: #00633b;
   padding-right: 3rem;
}
.dashCopy{
   margin-top: 1rem;
}
.dashEntry{
    margin-bottom: 1rem;
    text-align: center;
}

.loginSettingsCopy{
    color: #00633b;
    font-size: 16px;
    margin-bottom: 10px;
}
.loginSettingsDiv{
   padding-right: 2rem;
}

.essaySubCopy{
    color: #00633b;
    margin-top: 1rem;
    font-size: 17px;
}

.essaySubCopy p{display: inline;}
.essaySubCopy a{color: #8dc63f;}

.essayFirstCopy{
    color: #8dc63f;
    font-size: 17px;
}
.essaySecondCopy{
    color: #009677;
    font-size: 17px;
}
.essayThirdCopy{
    color: #00633b;
    font-size: 17px;
}
.uploadEssayDiv{
    border: 1px dotted gray;
}
.uploadEssayCopy1{
    color: #00633b;
    font-size: 17px;
    min-height: 100px;
    padding: 10px;
}
.uploadEssayCopy2{
    color: #00633b;
    font-size: 13px;
}

.uploadEssayDiv form{
    padding: 10px;
}

.addEssayTitle{
    color: #00633b;
    font-size: 24px;
    margin-bottom: 1rem;
}

.navLoginDiv{
    background-color: #009677;
    padding-top: 20px;
    padding-bottom: 20px;
    text-align: right;
}
.rootEmailAnchor{
    color: white;
    text-decoration: none;
    cursor: pointer;
    padding: 10px;
}
.navLoginAnchor{
    color: white;
    text-decoration: none;
    cursor: pointer;
}
.rootEmailAnchor:hover{
    color: white;
    text-decoration: none;
    cursor: pointer;
    background-color: #8dc63f;
}
.navLoginAnchor:hover{
    color: white;
    text-decoration: none;
    cursor: pointer;
}
.navLoginCopy{
    color: white;
    float: right;
    padding-right: 2rem;
    padding-left: 4rem;
}

.profileRadioDiv{
    display: flex;
}
.profileRadioSpan{
    display: flex;
    flex-direction: column;
}
.profileRadioLabel{
    display: flex;
}

/*Integrated css*/
/*Winner Style*/

.tab-btn1:focus,
.tab-btn1:active {
    outline: none;
    box-shadow: none;
    border: none;
}
     .tab-btn1 {

           padding: 25px 60px;
           font-size: 17px;

            font-weight: bold;

            border: none;

            cursor: pointer;

            transition: all 0.3s ease;

            background-color: #009677;

            color: white;

        }

        .tab-btn1.active {

           background-color: #00633B;
           color: white;
        }
        
.tab-btn1:focus,
.tab-btn1:active,
.essay-btn1:active
.essay-btn1:after
{
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}
essay-btn12active
.essay-btn1:after
{
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}
button::-moz-focus-inner{
    border:none;
}
.card {
   flex: 0 0 300px;
   margin: 10px;
   background: #00633B;
   color: white;
   text-align: center;
   border-radius: 12px;
}
    
       .tab-wrapper {
           margin: auto;
       }
  
       .tab-content1 {
    display: none;
    background-color: #00633B;
      padding: 40px 20px;
    gap: 29px;
    flex-wrap: nowrap; /* Fix: no wrapping */
    margin: auto;

}

.tab-content1.active {

    display: flex;

}
 
   .winner-card {
    flex: 0 0 300px;        /* Fix card width */
    max-width: 300px;
    padding: 15px;
    border-radius: 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin: 0 -24px;
    position: relative;
   
}
.winner-card img {
    width:269px;;
    height: 400px;
    object-fit: cover;
    object-position: center center;
    border-radius: 15px;
    margin-bottom: 10px;
}
.winner-name {
    margin: 10px 0 5px;
}
.essay-btn1 {
    margin-top: 5px;
    text-decoration: none;
}
.essay-btn2 {
    margin-top: 1px;
    text-decoration: none;
}
   .wplacement {
    background-color: #8DC63F;
    padding: 10px 30px;
    font-size: 17px;
    font-weight: 600;
    border-radius: 6px;
    position: absolute;
    color: #00633B;
    right: 0;
    top: 0;
}
       .winner-card h5 {
           margin: 12px 0 6px 0;
           color: #fff;
       }
      .essay-btn1 {
   position: relative;
   background-color: #8DC63F;
   color: #00633B;
   padding: 12px 20px;
   font-weight: 600;
   border-radius: 5px;
   border: 2px solid #8DC657;
   overflow: hidden;
   cursor: pointer;
   width:100px;
   margin: auto;
}
 .essay-btn2 {
   position: relative;
   background-color: #8DC63F;
   color: #00633B;
   padding: 12px 20px;
   font-weight: 600;
   border-radius: 5px;
   border: 2px solid #8DC657;
   overflow: hidden;
   cursor: pointer;
   width:100px;
}
.essay-btn1::after {
   content: "READ";
   position: absolute;
   top: 0; left: 0;
   width: 100%;
   height: 100%;
   background-color: #009677;
   color: white;
   display: flex;
   justify-content: center;
   align-items: center;
   opacity: 0;
   transition: opacity 0.3s ease;
   text-decoration: none;
}
.essay-btn1:hover::after {
   opacity: 1;
}
.essay-btn2::after {
   position: absolute;
   top: 0; left: 0;
   width: 100%;
   height: 100%;
   background-color: #009677;
   color: white;
   display: flex;
   justify-content: center;
   align-items: center;
   opacity: 0;
   transition: opacity 0.3s ease;
   text-decoration: none;
}
.essay-btn2:hover::after {
   opacity: 1;
}
       .essay-btn1:hover {
           background-color: transparent;
           color: white;
           content:"READ";
           text-decoration: none;
       }
         .essay-btn2:hover {
           background-color: transparent;
           color: white;
           content:"READ";
           text-decoration: none;
       }
       /* Popup */
       #essayPopup {
           display: none;
           position: fixed;
           top: 0; left: 0;
           width: 100%; height: 100%;
           background-color: rgba(0,0,0,0.9);
           justify-content: center;
           align-items: center;
           z-index: 9999;
           flex-direction: column;
       }
       #popupImage {
           max-width: 90%;
           max-height: 80%;
       }
       .popup-icons {
           position: absolute;
           top: 20px;
           right: 30px;
       }
       .popup-icons button {
           background: none;
           color: white;
           font-size: 22px;
           margin-left: 10px;
           border: none;
           cursor: pointer;
       }
       .share-options {
           background: white;
           color: black;
           border-radius: 5px;
           padding: 10px;
           display: none;
           position: absolute;
           right: 10px;
           top: 50px;
       }
       .share-options a {
           display: block;
           text-decoration: none;
           color: #333;
           margin: 5px 0;
       }
  
.hero-header {
   background: #009677;
   padding: 40px 20px;
   color: white;
   text-align: center;
   border-bottom-left-radius: 50px;
   border-bottom-right-radius: 50px;
}
.hero-header .breadcrumb {
   font-size: 14px;
   opacity: 0.8;
   margin-bottom: 10px;
}
.hero-header h1 {
   font-size: 36px;
   font-weight: bold;
   margin: 0;
}
.vertical-divider {
   border-left: 2px solid white;
   height: 20px;
   margin: 0 20px;
   display: inline-block;
   align-self: center;
}
.tabs1 {
   justify-content: center;
    width: fit-content;
    margin: 0 auto;
    border-radius: 12px 12px 0 0;
    overflow: hidden;
    display: flex;
    text-decoration: none;
 outline:none;
 border:none;
    gap: 0;
}

.tab-btn1.active {
   background-color: #00633B;
   color: white;
}
/*.carousel-wrapper {*/
/*   max-width: 960px;*/
/*   margin: 0 auto;*/
   /* padding-top: 0; remove gap */
/*}*/
.carousel {
   display: flex;
   overflow-x: auto;
   scroll-behavior: smooth;
}
.winnerMain{
        margin-right: 6rem;
}
.winnername {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.2em;
}

/* Finalist */

        .tabs {
            display: flex;
            justify-content: center;
            border-radius: 12px 12px 0 0;
                justify-content: center;
    width: fit-content;
    margin: 0 auto;
    border-radius: 12px 12px 0 0;
    overflow: hidden;
    display: flex;
    gap: 0;
   text-decoration: none;
 outline:none;
 border:none;
            
        }
        .tab-btn {
          padding: 25px 60px;
    font-size: 17px;
    font-weight: bold;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: #009677;
    color: white;
    outline:none;
    text-decoration:none !important;
        }
        .tab-btn.active {
            background-color: #00633B;
            text-decoration: none;
            box-shadow: none;
 outline:none;
 border:none;
        }
        .carousel-wrapper {
            background-color: #00633B;
            /*padding: 30px 0;*/
            /*max-width: 960px;*/
            /*margin: auto;*/
            /*border-radius: 0 0 10px 10px;*/
        }
        .swiper-slide.card {
            background: #00633B;
            color: white;
            text-align: center;
            padding: 10px;
            border-radius: 10px;
            /*width: 300px;*/
            border: none;
            position: relative;
        }
        .card img {
            /*width: 275px;*/
            /*height: 400px;*/
            /*object-fit: cover;*/
            border-radius: 15px;
            margin-bottom: 10px;
        }
        .placement {
            background-color: #8DC63F;
            color: #00633B;
            padding: 8px 20px;
            font-weight: bold;
            border-radius: 6px;
            margin-bottom: 10px;
            display: inline-block;
        }
        .essay-btn {
            background-color: #8DC63F;
            color: #00633B;
            border: none;
            padding: 12px 20px;
            font-weight: 600;
            border-radius: 5px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            width: 100px;
            border: none;
            text-decoration: none;
        }
        .essay-btn::after {
            content: "READ";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #009677;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        .essay-btn:hover::after {
            opacity: 1;
        }
        .swiper-buttons-center {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 20px;
        }
        .swiper-button-prev-undergrad,
        .swiper-button-next-undergrad,
        .swiper-button-prev-postgrad,
        .swiper-button-next-postgrad {
            width: 40px;
            height: 40px;
            background-color: #8DC63F;
            color: #00633B;
            border-radius: 50%;
            font-size: 24px;
            font-weight: bold;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .swiper-button-prev-undergrad:hover,
        .swiper-button-next-undergrad:hover,
        .swiper-button-prev-postgrad:hover,
        .swiper-button-next-postgrad:hover {
            background-color: #009677;
            color: white;
        }
.pressTitle {
    font-size: 40px;
    font-weight: bold;
    text-transform: uppercase;
    color:#00633B;
}
.card {

    background-color: #00633B;

    border-radius: 15px;

    padding: 10px;

    color: white;

    width: 300px;

    margin: 0 10px;

    text-align: center;

}
 
 .yearHeading {
     font-size: 200px;
    font-weight: bold;
    margin-left: 27rem;
    color: #8DC63F1C;
    margin-bottom: 1rem;
    padding: -3rem;
}
.placement {
 background-color: #8DC63F;
 color: #00633B;
 padding: 10px 30px;
 font-size: 17px;
 font-weight: bold;
 border-radius: 6px;
 position: absolute;
 top: 0;
 right: 0;
 /*margin-top: -8px;*/
 /*margin-left: 23px;*/
}
.essay-btn {
 background-color: #8DC63F;
 color: #00633B;
 font-weight: 600;
 border-radius: 5px;
 border: none;
 padding: 12px 20px;
 width: 100px;
 position: relative;
 overflow: hidden;
 text-decoration: none;
 outline:none;
 border:none;
}
.essay-btn:hover  {
 text-decoration:none;   
}
.essay-btn::after {
 content: "READ";
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: #009677;
 color: white;
 display: flex;
 justify-content: center;
 align-items: center;
 opacity: 0;
 transition: opacity 0.3s ease;
 text-decoration: none;
 outline:none;
 border:none;
}
.yeardiv{
    color: #00633b;
    font-size: 47px;
    font-weight: bold;
        padding-bottom: 2.5rem;
}

.paradiv {
    font-size:17px;
    color: #00633b;
    font-size: 17px;
}
.custom-readmore-btn {
   background-color: #8dc63f;       /* Light green background */
   color: #00633b;                  /* Dark green text */
   font-weight: bold;
   padding: 10px 24px;
   border-radius: 6px;
   border: none;
   text-decoration: none;
   font-size: 17px;
   display: inline-block;
   transition: background-color 0.3s ease, color 0.3s ease;
   text-decoration: none;
   width: 10em;
   text-align: center;
}
.custom-readmore-btn:hover {
   background-color: #00633b;       /* Dark green on hover */
   color: white;
}
.PressIntro{
    font-size: 17px;
    color: #00633b;
    line-height: 1.5rem;
    padding-bottom: 1rem;
}
.press-date {
     color: #00633b;
}
.container {
        margin-left: 3rem;
}
.press-meta {
   display: flex;
   align-items: center;
   gap: 16px;
   font-size: 14px;
   margin: 8px 0 15px;
}
.meta-item {
   color: #00633b;
   display: flex;
   align-items: center;
}
.meta-item i {
   color: #8dc63f; /* Light green icons */
   font-size: 16px;
}

.custom-readmore-btn {
   display: inline-block;
   background-color: #8dc63f;
   color: #00633b;
   padding: 10px 24px;
   border-radius: 8px;
   font-weight: bold;
   text-transform: uppercase;
   font-size: 14px;
   text-decoration: none;
   transition: all 0.3s ease;
   border: none;
   position: relative;
   overflow: hidden;
    border:none;
}
.custom-readmore-btn .hover-text {
   display: none;
   text-decoration:none;
}
.custom-readmore-btn:hover .default-text {
   display: none;
   border:none;
}
.custom-readmore-btn:hover .hover-text {
   display: inline;
   color: white;
}
.hover-text:hover .hover-text {
    border:none;
    text-decoration: none !important;
}
 .hover-text { 
     padding: 10px 24px;
   border-radius: 8px;
   font-weight: bold;
   text-transform: uppercase;
   font-size: 14px;
 }
 .hover-text:hover {
     text-decoration:none;
 }
 .press-image-row {
   display: flex;
   justify-content: space-between;
   gap: 20px;
   margin-bottom: 20px;
}
.half-img {
   width: 48%;
}
.titleDetails{
    font-size: 48px;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1.1em;
    color:#00633B;
     margin-bottom: 3rem;
     margin-top:2rem;
}
.press-content {
    color:#00633B;
    margin-top: 0;
    margin-bottom: .9rem;
    text-align: justify;
}
.custom-readmore-btn {
   text-decoration: none;
}
.custom-readmore-btn:hover {
   text-decoration: none !important;
}
  /* float*/
.help-box {
     background-color: #009677;
     color: white;
     border-radius: 20px;
    text-align: center;
   }
   .help-box h3 {
     margin-top: 0;
     font-size: 18px;
   }
   .help-box p {
     margin: 10px 0;
     font-size: 14px;
   }
   .help-button {
     background-color: white;
     color: #004d40;
     border: none;
     padding: 10px 20px;
     font-weight: bold;
     border-radius: 5px;
     transition: all 0.3s ease;
     width: 10em;
     margin: auto;
   }
   .help-button:hover::after {
     content: 'GO';
 
   }
   .help-button:hover {
     background-color: white;
    font-color:#009677;
   }
   .help-button::after {
     content: 'GET HELP';
   }
 .virtual-tutor-btn {
 background-color: #009677;
     width: 100%;
 color: #fff;
 font-weight: bold;
 padding: 15px 30px;
 border-radius: 12px;
 text-decoration: none;
 font-size: 16px;
 display: inline-block;
 text-align: center;
 position: relative;
 transition: background-color 0.3s ease;
}
.virtual-tutor-btn .hover-text {
 display: none;
}
.virtual-tutor-btn:hover {
 background-color: #8dc63f; /* green hover */
 color: #00633b;
  text-decoration: none !important;
}
.virtual-tutor-btn:hover .default-text {
 display: none;
  text-decoration: none !important;
}
.virtual-tutor-btn:hover .hover-text {
 display: inline;
  text-decoration: none !important;
}

.swiper-button-next, .swiper-button-prev{
    top: unset;
    margin: auto;
}
.swiper-button-next{
    right: -125px;
    left: 0;
}
.swiper-button-prev{
    left: -125px;
    right: 0;
}
.icon-text {
  gap: 5px;
  text-decoration: none;

}

.icon-text .icon {
  color: #8DC63F;     /* Default icon green */

}

.icon-text .email-text {
  color: white;       /* Default email text white */
}

/* On hover: both turn white */
.icon-text:hover .icon,
.icon-text:hover .email-text {
  color: white;
}

 
.popup-icons button :hover {
     text-decoration: none;
     border:none;
}

.footer-texture{
    background: url("../media/m1mpqwlb/footer-texture.png");
    height: 100px;
    width: 100%;
    opacity: 0.5;
}
.popup-icons {
   position: absolute;
   top: 10px;
   right: 20px;
   display: flex;
   gap: 12px;
   z-index: 999;
}

.popup-btn {
  background: none;
  border: none !important;
  padding: 6px;
  cursor: pointer;
  border-radius: 50%;
  transition: background 0.2s;
  outline:none;
}
.popup-btn:hover {
  background-color: rgba(255, 255, 255, 0.15);
}
.popup-btn:focus,
.popup-btn:active {
     outline:none;
     box-shadow:none;
}

.popup-icons button {
   border: none;
   border-radius: 50%;
   width: 35px;
   height: 35px;
   cursor: pointer;
   box-shadow: 0 2px 6px rgba(0,0,0,0.2);
   font-size: 16px;
}
.share-popup {
   position: absolute;
   top: 50px;
   right: 20px;
   background: white;
   border-radius: 8px;
   box-shadow: 0 4px 10px rgba(0,0,0,0.2);
   padding: 10px 15px;
   display: none;
   z-index: 999;
}
.share-popup ul {
   list-style: none;
   margin: 0;
   padding: 0;
}
.share-popup ul li {
   margin-bottom: 10px;
}
.share-popup ul li:last-child {
   margin-bottom: 0;
}
.share-popup a {
   text-decoration: none;
   color: #000;
   font-size: 14px;
   display: flex;
   align-items: center;
   gap: 8px;
}
.share-popup a img {
   width: 18px;
   height: 18px;
}

 .year-button-heading {
       font-size: 200px;
       font-weight: bold;
       color: #8DC63F;
       margin: 0;
       padding: 0;
   }
   .year-button-heading a {
       color: inherit;
       text-decoration: none;
       transition: all 0.3s ease;
   }
   .year-button-heading a:hover {
       color: #00633B;
   }
   
   .vacancy_table_wr tbody tr:hover{
       background-color: #e9e9e9;
   }
   .history-title {
       font-size: 45px;
    font-weight: bold;
    text-transform: uppercase;
    color:#00633B;
   }
   
   .history p{
       font-size: 17px;
    font-weight: 500;
    margin-top: 0;
    margin-bottom: .9rem;
    color:#00633B;
   }
   
   .historyimg {
       border: none;
    border-radius: 0;
    box-shadow: none;
    height: auto;
    
}
   .histroyleftpart {
       margin-left:3rem;
   }
   .mb-3 {
       padding-left: 0rem !important;
   }
   
   .icon-circle{
       position: relative;
       background: #5bad55;
       padding: 10px;
       width: 125px;
       height: 125px;
       border-radius: 50%;
       margin: auto;
       margin-bottom: 40px;
   }
   
  .icon-circle img{
      position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
  }
  
  .carousel-control-next, .carousel-control-prev{
      opacity: 1;
      width: 10%;
  }
  .carousel-nav{
      font-style: normal;
      width: 80px;
      height: 80px;
      background: #fff;
      border-radius: 50%;
      position: relative;
      transition: 0.3s all ease-in;
  }
  
    .carousel-nav svg{
      font-size: 30px;
      color: #00633B;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
  }
  
    .carousel-control-next:hover, .carousel-control-prev:hover{
      opacity: 1;
  }
  
.carousel-control-next i:hover, .carousel-control-prev i:hover{
  background: #8DC63F;
  transition: 0.3s all ease-in;
}
  
  
  #carouselExampleControls .carousel-control-next, #carouselExampleControls .carousel-control-prev{
      top: unset;
  }
  
  #carouselExampleControls .carousel-control-next, #carouselExampleControls .carousel-control-prev{
      background: #8DC63F;
      width: 79px;
      height: 79px;
  }
  
  #carouselExampleControls .carousel-control-next{
      right: 40%;
  }
  
  #carouselExampleControls .carousel-control-prev{
      left: 40%;
  }
  
  #carouselExampleControls .carousel-inner{
      min-height: 290px;
  }
  
  .read-btn:focus,
.close-btn:focus {
    outline: none;
    box-shadow: none;
    border: none;
}
.judge-tabs {
   display: flex;
   justify-content: center;
   width: fit-content;
   margin: 0 auto;
   border-radius: 12px 12px 0 0; /* Only top corners rounded */
   overflow: hidden;
}

#myTab .nav-link {
    padding: 25px 60px;
    font-size: 16px;
    font-weight: bold;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: #8DC63F;
    color: white;
}
.short-desc {
    font-size:17px;
}
.full-desc {
    font-size:17px;
}

.tab-link.active {
    background-color: #009677;
    color: white;
}

.judge-card {
    display: flex;
    align-items: flex-start;
    background-color: #009677;
    color: white;
    margin: 0 auto;
}

.judge-photo-wrapper {
    position: relative;
    width: 146px;
    height: 184px;
    margin-right: 44px
}
.judge-photo-bg {
   position: absolute;
   width: 100%;
   height: 100%;
   border-radius: 25px;
   background-color: #8DC63F;
   top: 20px;
   left: 15px;
   z-index: 0;
}
.judge-img {
   width: 100%;
   height: 100%;
   border-radius: 25px;
   object-fit: cover;
   padding: 5px;
   position: relative;
   z-index: 1;
}

.judge-info {
    flex: 1;
}

.judge-info h4 {
    font-size: 30px;
    margin: 0 0 10px;
    color: white;
    margin-bottom:10px;
}

.judge-info p {
    margin: 0 0 20px;
    line-height: 1.6;
    color: white;
}

.read-btn, .close-btn
{
    background-color: white;
    color: #009677;
    border: none;
    padding: 10px 22px;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}
.read-btn:hover,
.close-btn:hover {
    color :#00633B !important;
}
.read-btn svg,
.close-btn svg {
 fill:currentColor;
 color:inherit;
 vertical-align:middle;
}
.read-btn:hover, .close-btn:hover {
    background-color: #009677;
    color: white;
    border: 1px solid white;
}
.read-btn:focus,
.read-btn:active,
.read-btn:hover,
.close-btn:focus,
.close-btn:active,
.close-btn:hover {
   outline: none;
   box-shadow: none;
   border: none;
}

#myTab .nav-link.active {
    background-color: #009677;
}

.close-btn {
font-size: 17px;
}
.read-btn{
    font-size: 17px;
}
#myTab li:first-child .nav-link{
    border-top-left-radius: 20px;
    border-top-right-radius: 0;
}
#myTab li:last-child .nav-link{
    border-top-right-radius: 20px;
    border-top-left-radius: 0;
}
  
#myTabContent{background-color: #009677;}

 
  .vtQueriesTitle, .vtPleaseNoteTitle{
      font-size: 45px;
      color: #00633b;
  }
  .vtQueriesCopy, .vtPleaseNoteCopy{
      font-size: 17px;
      color: #00633b;
  }
  .vtQueriesAnchor, .vtPleaseNoteAnchor{
      color: #00633b;
      text-decoration: none;
  }
  .vtQueriesAnchor:hover, .vtPleaseNoteAnchor:hover{
      color: #00633b;
      text-decoration: none;
  }
  .virtualTutorGenInfoCopyDiv{
      background-color: #8dc63f;
  }
  .virtualTutorProcessCopyDiv{
      background-color: #009677;
  }
  .virtualTutorGenInfoTitle{
      font-size: 45px;
      color: #00633b;
  }
  .virtualTutorProcessTitle{
      font-size: 45px;
      color: white;
  }
  .virtualTutorGenInfoCopy{
      font-size: 17px;
      color: #00633b;
  }
   .virtualTutorProcessCopy{
      font-size: 17px;
      color: white;
   }
   
   
  
.subEssayNumber{
    font-size: 18px;
    color: #8dc63f;
}
.subStudentId{
    font-size: 14px;
    color: #aaaaaa;
}
.subEssayDate{
    font-size: 14px;
    color: #aaaaaa;
}
.subCategory{
    font-size: 16px;
    color: #009677;
    text-transform: capitalize;
}
.subStudentNumber{
     font-size: 18px;
    color: #aaaaaa;
}
.subVirtualTutor{
     font-size: 18px;
    color: #aaaaaa;
}
.subAttachments{
     font-size: 18px;
    color: #aaaaaa;
}
.subAttachments a{color:#8DC63F;}

.subComments{
     font-size: 18px;
    color: #aaaaaa;
}

.subEssayDivider{
    width: 100%;
    border-block-start: 1px solid #8dc63f;
    display: flex;
    padding-top: 10px;
    padding-bottom: 10px;
    direction: ltr;
    margin: 0;
}
.subEssayDividerDiv{
    padding-top: 15px;
}
.AddCommentsAnchorDiv{
    padding-top: 2rem;
}

.AddCommentsAnchorDiv .loginAnchor, .ProfileButtonDiv .loginAnchor{
    color: #fff;
    transition: 0.3s ease-in all;
}

.essaySubCard{
    padding-top: 2rem;
}

.subEssayTable{
    width: 100%;
}
.subEssayListHeading{
    color: #00633b;
}
.subEssayListCopy{
    font-size: 13px;
    color: #424242;
}
.subEssayListTd, .subEssayListTh{
    padding: 12px;
    padding-right: 0;
    vertical-align: top;
}
.subEssayListCopy td:nth-of-type(4){text-transform: capitalize;}
.subEssayListTd a{color: #8DC63F;}


  
  /*---------- Responsive screens ----------*/
  
  /*Small Laptop Screen*/
  
  @media screen and (max-width: 1024px){
      #carouselCopy0, #carouselCopy1, #carouselCopy2{font-size: 32px;}
      .carouselAnchor{width: 85%;}
      .navbar-light .navbar-nav .nav-link, .navSubmenuColor{font-size: 11px;}
      .navbar-brand .navbarLogo{width: 4em;}
      .navbar.scrolled .logo-right .navbarLogo{width: 3em;}
      .winner-card img{width: 200px; height: 350px;}
      .wplacement{right: 15px;}
  }
  
  /*Tablet Screen*/

 @media screen and (max-width: 991px){
      .navbarLogo{width: 4rem;}
      .navLoginDiv{
          text-align: left;
          padding-left: 20px;
      }
      .rootEmailAnchor{padding-left: 0; display: block}
      .navLoginCopy{
          float: none;
          padding-left: 5px;
      }
      #carouselCopy0, #carouselCopy1, #carouselCopy2{
          font-size: 22px;
          padding-left: 20px;
          padding-top: 3rem;
      }
      .carouselAnchorDiv0, .carouselAnchorDiv1{padding-left: 20px;}
      #banner0 .paddingBottom25{padding-bottom: 15px;}
      .icon-circle{
          width: 95px;
          height: 95px;
          margin-bottom: 20px;
      }
      .iconTitle1, .iconTitle2{font-size: 20px;}
      .animationDiv:hover .iconTitle2{transform: rotateX(0deg) translate(-50%, -90%);}
      h1{font-size: 1.5rem;}
      .compObjTitle h1, .pastWinnersTitle, .genRulesTitleDiv, .pleaseNoteTitleDiv, .documentsTitleDiv, .whoEnterTitleDiv, .adjPanelTitleDiv, .adjCriteriaTitleDiv, .essayRulesTitleDiv, .prizesGenInfoTitleDiv, .referencingTitleDiv, .researchTitleDiv, .prizesPleaseNoteTitleDiv, .yeardiv, .pressTitle, .titleDetails, .history-title, .vtQueriesTitle, .vtPleaseNoteTitle, .virtualTutorGenInfoTitle, .virtualTutorProcessTitle{font-size: 20px;}
      .pastWinnersImage {width: 60%;}
      .quote-img{width: 25%;}
      .pageHeaderDiv{
          padding-top: 3rem;
          padding-bottom: 2rem;
          padding-left: 20px;
      }
      .pagePathDiv {font-size: 10px;}
      .pageTitleDiv{font-size: 17px;}
      .genRulesCopyDiv ul, .whoEnterCopyDiv ul, .adjPanelCopyDiv ul, .genInfoCopyDiv ul, .adjCriteriaCopyDiv ul, .pleaseNoteCopyDiv ul, .essayRulesCopyDiv ul, .plagCopyDiv ul{padding-left: 20px;}
      .genInfoTitleDiv{
          font-size: 18px;
          padding-left: 0;
      }
      .plagAnchorDiv{padding-left: 20px;}
      .plagAnchor{
          display: inline-block;
          margin-bottom: 15px;
      }
      .carouselAnchor{width: 65%;font-size: 13px;}
      .carousel-nav{
          width: 30px;
          height: 30px;
      }
      .carousel-nav svg{width: 15px;}
      #carouselExampleControls .carousel-control-next, #carouselExampleControls .carousel-control-prev{
          width: 30px;
          height: 30px;
      }
      .quote-img{
          width: 10%;
          visibility: hidden;
      }
      .researchAnchor{
          font-size: 15px;
          width: auto;
      }
      .guidelinesCopy1{padding-left: 0;}
      .judge-card{
          display: inline-block !important;
          text-align: center;
      }
      .judge-photo-wrapper{margin: auto !important}
      .judge-info{margin-top: 30px !important;}

      .navbar-light .navbar-nav .nav-link{}
      #accordionExample .card{
          width: auto;
          margin-bottom: 10px;
          background-color: inherit;
          padding: 0;
      }
      #accordionExample .card .card-header button{color: #fff;}
      #accordionExample .card .card-header{
          background-color: #8DC63F;
          border-top-left-radius: 12px;
          border-top-right-radius: 12px;
          border-bottom: 0;
      }
      #accordionExample .card .card-header button.btn-link:focus{
          outline: unset;
          box-shadow: unset;
      }
      #accordionExample .card .collapse .card-body .judge-photo-wrapper{
          width: auto;
          height: auto;
      }
      #accordionExample .card .collapse .card-body .judge-photo-wrapper .judge-photo-bg{
          width: 30%;
          height: 85%;
          border-radius: 15px;
          background-color: #8DC63F;
          top: -5px;
          left: 272px;
      }
      #accordionExample .card img{
          height: auto;
          width: 220px;
      }
      #accordionExample .card .card-body{
          padding: 0;
          background-color: #009677;
      }
      .judge-info h4{font-size: 20px;}
      .short-desc{font-size: 16px;}
      .winner-card{
          margin: auto;
          display: inline-block;
          position: relative;
      }
      .wplacement{
          margin: 0;
          font-size: 14px;
          right: 8px;
          top: 0px;
      }
      .winner-card div:last-child{
          margin-bottom: 40px;
      }
      .ug-table table, .pg-table table{margin-left: 0;}
      .press-date{font-size: 15px}
      .titleDetails{margin-top: 0; margin-bottom: 30px;}
      .historyimg{width: 100%; margin-bottom: 20px}
      .contact-tabs{margin-top: 0;}
      .Contactdiv{margin-left: 0 !important;}
      .compRulesRowDiv{ margin-top: 0;}
      .essaySubCard{border-top: 3px solid; margin-top: 40px;}
      .dashNavDiv{text-align: left;}
      .subEssayListHeading{overflow-x: auto;}
      .dropdown-menu{
          padding:10px !important;
          border: 0 !important;
      }
      .navSubmenuColor{padding-left: 10px !important;}
      .year-block .tabs, .FinalistMain .tabs{display: block;}
      .navbar{width:100%;}
      .yearHeading{
          margin-left: 0;
          font-size: 70px;
          text-align: right;
      }
      .animationDiv:hover .iconTitle1{
            transform: unset;
            opacity: 1;
      }
      .animationDiv:hover .iconTitle2{
            transform: unset;
            opacity: 0;
      }
  }
  
/*Mobile Screen*/
  
  @media screen and (max-width: 480px){
      .FinalistMain .tabs{display: block;}
      .contact-tabs{
          width: 90%;
          margin: 0 auto;
          display: block !important;
          margin-top: 0 !important;
      }
      .contact-tabs div:nth-of-type(1){border-top-left-radius: 0 !important;}
      .contact-tabs div:nth-of-type(3){border-top-right-radius: 0 !important;}
      .tab-content{padding: 20px !important;}
      .toggleCopy{font-size: 1rem;}
      .toggleCopy svg{width: 30px; height: 30px;}
      .footerCopy1{padding-top: 2em;}
      .footerCopy1 p{font-size: 10px;}
      .footerCopy2{margin-top: 1em;}
      .footerCopy2 p{font-size: 12px;}
      .footer-texture{height: 60px;}
      .subEssayNumber{font-size: 16px;}
      .dashCopyDiv .row .col-lg-4 div:nth-of-type(1){margin-top: 20px;}
      .dashNavAnchorDiv{font-size: 14px; display: block;}
      .dashNavCol{border-right: 0;}
      .ug-table, .pg-table{overflow-x: auto;}
      .navbar .navbar-brand{visibility: hidden;}
      #accordionExample .card .collapse .card-body .judge-photo-wrapper .judge-photo-bg{
          width: 50%;
          left: 120px;
      }
      .read-btn, .close-btn{
          font-size: 12px;
          padding: 5px 20px
      }
      .essay-btn, .essay-btn1, .essay-btn2, .help-button{
          padding: 5px 20px;
          font-size: 12px;
      }
      #days, #hours, #minutes{
          font-size: 20px;
          width: 7rem;
      }
      .timerDays, .timerHours, .timerMinutes{font-size: 15px}
  }
 
  .modal-content{
    background-color: #009677 !important;
    border: none !important;
}
.modal-header{
    border: none !important;
}
.modal-body{
    border: none !important;
    color: white !important;
}
.modal-footer{
    border: none !important;
}
.modal-button{
    color: #009677 !important;
    background-color: white !important;
    border: none !important;
}
.modal-button:hover{
    color: #009677 !important;
    background-color: white !important;
}
.modal-title{
    color: white !important;
}
.modal-close{
    color: white !important;
    border: none !important;
} 
.modal-close:hover{
    color: white !important;
}  
  
/* Mobile-specific adjustments */

@media (max-width: 768px) {

   #popupImage {

       max-width: 100%;

       max-height: 70%;

   }

   .popup-icons {

       top: 10px;

       right: 10px;

       gap: 5px;

   }

   .share-popup {

       top: 40px;

       right: 10px;

       width: 150px;

       font-size: 14px;

   }

}