@font-face {
  src: url("fonts/Product Sans Regular.ttf");
  font-family: "Product Sans";
  font-weight: 400;
  font-style: normal;
}

@font-face {
  src: url("fonts/Product Sans Bold.ttf");
  font-family: "Product Sans";
  font-weight: 700;
  font-style: normal;
}

body {
  font-family: "Product Sans", sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: #808285;
  letter-spacing: 0.05em;
  line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Product Sans", sans-serif;
  font-weight: 700;
  line-height: 1.2;
  color: #3431ff;
}

ol,
ul {
  line-height: 1.5;
}

p {
  line-height: 1.5;
}

a {
  color: #113482;
}

a:hover,
a:focus {
  color: #2c459a;
}

@media screen and (max-width: 639px) {
  body {
    font-size: 14px;
    letter-spacing: 0.035em;
    line-height: 1.35;
  }

  p,
  ol,
  ul {
    line-height: 1.35;
  }
}

@media screen and (max-width: 1024px){
    .title-bar{
        border-bottom:2px solid #bfb200;
        margin:auto;
        position:fixed;
        width:100%;
        z-index:2
    }
    .top-bar{
        background-color:#fff;
        left:0 !important;
        position:fixed !important;
        right:0 !important;
        top:74px !important;
        width:100%
    }
    .top-bar .header{
        width:95%
    }
    .top-bar .header .logo{
        display:none
    }
    .top-bar .header .top-menu{
        display:inline-block
    }
    .top-bar .header .top-menu ul li.hypeSlide{
        margin:0
    }
    .top-bar .header .top-menu ul li.hypeSlide a{
        color:#000 !important
    }
    .top-bar .header .top-menu ul li.hypeSlide a:after{
        border-color:#000 transparent transparent !important
    }
    .top-bar .header .top-menu ul .slideIn2 ul.subMenu li,.top-bar .header .top-menu ul .slideIn4 ul.subMenu li{
        position:relative
    }
    .top-bar .header .top-menu ul .slideIn2 ul.subMenu li:before,.top-bar .header .top-menu ul .slideIn4 ul.subMenu li:before{
        background-image:linear-gradient(#000000, #000000),url("../images/remove-outline.svg");
        background-position:center;
        background-repeat:no-repeat;
        background-size:cover;
        content:"";
        height:3%;
        left:10px;
        position:absolute;
        top:45%;
        width:12px
    }
    .top-bar .header .top-menu ul .slideIn2 ul.subMenu li a,.top-bar .header .top-menu ul .slideIn4 ul.subMenu li a{
        font-family:"product-sans-regular",sans-serif;
        font-size:14px;
        letter-spacing:1.2px;
        padding-left:60px
    }
    .top-bar .header .top-menu ul .slideIn2 ul.subMenu li:hover:before,.top-bar .header .top-menu ul .slideIn4 ul.subMenu li:hover:before{
        background-image:linear-gradient(#ffffff, #ffffff),url("../images/remove-outline.svg")
    }
    .top-bar .header .top-menu ul .slideIn2:hover,.top-bar .header .top-menu ul .slideIn2:focus{
        box-shadow:none
    }
    .top-bar .header .top-menu ul .slideIn2:hover a,.top-bar .header .top-menu ul .slideIn2:focus a{
        box-shadow:inset 0 0 0 50px #25362e !important;
        color:#fff !important
    }
    .top-bar .header .top-menu ul .slideIn2:hover a::after,.top-bar .header .top-menu ul .slideIn2:focus a::after{
        border-color:#fff transparent transparent !important
    }
    .top-bar .header .top-menu ul .slideIn2:hover ul.subMenu,.top-bar .header .top-menu ul .slideIn2:focus ul.subMenu{
        width:100% !important
    }
    .top-bar .header .top-menu ul .slideIn2:hover ul.subMenu li,.top-bar .header .top-menu ul .slideIn2:focus ul.subMenu li{
        width:100%
    }
    .top-bar .header .top-menu ul .slideIn2:hover ul.subMenu li a,.top-bar .header .top-menu ul .slideIn2:focus ul.subMenu li a{
        box-shadow:none !important;
        color:#000 !important;
        width:100%
    }
    .top-bar .header .top-menu ul .slideIn2:hover ul.subMenu li a:hover,.top-bar .header .top-menu ul .slideIn2:hover ul.subMenu li a:focus,.top-bar .header .top-menu ul .slideIn2:focus ul.subMenu li a:hover,.top-bar .header .top-menu ul .slideIn2:focus ul.subMenu li a:focus{
        background-color:#25362e !important;
        color:#fff !important
    }
    .top-bar .header .top-menu ul .slideIn2:hover ul.subMenu li a.sub-1:after,.top-bar .header .top-menu ul .slideIn2:focus ul.subMenu li a.sub-1:after{
        border-color:#000 transparent transparent !important
    }
    .top-bar .header .top-menu ul .slideIn2:hover ul.subMenu li ul li a.sub-2:after,.top-bar .header .top-menu ul .slideIn2:focus ul.subMenu li ul li a.sub-2:after{
        border-color:#000 transparent transparent !important
    }
    .top-bar .header .top-menu ul li.active.slideIn2 ul.subMenu li a{
        background-color:unset;
        color:#000 !important;
        padding-left:30px
    }
    .top-bar .header .top-menu ul li.active.slideIn2 ul.subMenu li a:focus,.top-bar .header .top-menu ul li.active.slideIn2 ul.subMenu li a:hover{
        background-color:#699c29
    }
    .top-bar .header .top-menu ul .slideIn4:hover,.top-bar .header .top-menu ul .slideIn4:focus{
        box-shadow:none
    }
    .top-bar .header .top-menu ul .slideIn4:hover a,.top-bar .header .top-menu ul .slideIn4:focus a{
        box-shadow:inset 0 0 0 50px #25362e;
        color:#fff !important
    }
    .top-bar .header .top-menu ul .slideIn4:hover a::after,.top-bar .header .top-menu ul .slideIn4:focus a::after{
        border-color:#fff transparent transparent !important
    }
    .top-bar .header .top-menu ul .slideIn4:hover ul.subMenu,.top-bar .header .top-menu ul .slideIn4:focus ul.subMenu{
        width:100% !important
    }
    .top-bar .header .top-menu ul .slideIn4:hover ul.subMenu li,.top-bar .header .top-menu ul .slideIn4:focus ul.subMenu li{
        width:100%
    }
    .top-bar .header .top-menu ul .slideIn4:hover ul.subMenu li a,.top-bar .header .top-menu ul .slideIn4:focus ul.subMenu li a{
        box-shadow:none !important;
        color:#000 !important;
        width:100%
    }
    .top-bar .header .top-menu ul .slideIn4:hover ul.subMenu li a:hover,.top-bar .header .top-menu ul .slideIn4:hover ul.subMenu li a:focus,.top-bar .header .top-menu ul .slideIn4:focus ul.subMenu li a:hover,.top-bar .header .top-menu ul .slideIn4:focus ul.subMenu li a:focus{
        background-color:#25362e !important;
        color:#fff !important
    }
    .top-bar .header .top-menu ul li.active.slideIn4 ul.subMenu li a{
        background-color:unset;
        color:#000 !important;
        padding-left:30px
    }
    .top-bar .header .top-menu ul li.active.slideIn4 ul.subMenu li a:focus,.top-bar .header .top-menu ul li.active.slideIn4 ul.subMenu li a:hover{
        background-color:#afc120
    }
    .top-bar .header .top-menu ul li a:focus{
        color:#000 !important
    }
    .top-bar .header .top-menu ul li ul.subMenu{
        width:100% !important
    }
    .top-bar .header .top-menu ul li ul.subMenu li{
        width:100% !important
    }
    .top-bar .header .top-menu ul li ul.subMenu li a{
        width:100% !important
    }
    .home-full-slide .home-slide .home-slide-item{
        justify-content:center
    }
    .home-full-slide .home-slide .home-slide-item .slide-desc{
        margin:auto;
        width:560px
    }
    .home-full-slide .home-slide .home-slide-item .slide-desc:after{
        height:150px
    }
    .home-full-slide .home-slide .home-slide-item .slide-desc h3{
        font-size:20px
    }
    .home-full-slide .home-slide .home-slide-item .slide-desc h1{
        font-size:30px
    }
    .home-full-slide .home-slide .home-slide-item .slide-desc a button{
        font-size:16px;
        padding:15px
    }
    .home-full-slide .home-slide .home-slide-item .slide1-desc h3 br{
        display:none
    }
    .home-full-slide .home-slide .home-slide-item .slide2-desc h3 br{
        display:none
    }
    .home-full-slide img.line-1,.home-full-slide img.line-2{
        display:none;
        visibility:hidden
    }
    .content-padding{
        padding:3% 15px 4rem
    }
    .contact-bg{
        background-position:100% 0
    }
    .top-bg{
        height:350px
    }
    .about-bg h2{
        height:120%
    }
    .about-bg img.line-1,.about-bg img.line-2{
        display:none
    }
    .content-bg{
        padding:5% 0
    }
    .content-bg .companyOverview p{
        font-size:16px
    }
    .director-bg h2{
        height:120%
    }
    .director-bg img.line-1,.director-bg img.line-2{
        display:none
    }
    .content-bg .director .director-name::after{
        transform:translateX(25px)
    }
    .content-bg .director .director-name h6{
        font-size:20px
    }
    .content-bg .director .director-name p{
        font-size:16px
    }
    .director-modal{
        margin:3rem auto auto;
        width:85%
    }
    .director-modal .director-profile .director-name h5{
        font-size:40px
    }
    .director-modal .director-profile .director-name p{
        font-size:16px
    }
    .charter-bg h2{
        height:120%
    }
    .content-bg .board-title .float-img{
        right:20px
    }
    .content-bg .board-tab ul.board-tabs li a{
        font-size:16px
    }
    .content-bg .board-tab ul.board-tabs li .charter-panel .charter-desc h5{
        color:#000;
        font-family:"helve-bold",sans-serif;
        font-size:20px;
        margin-bottom:5px
    }
    .content-bg .board-tab ul.board-tabs li .charter-panel .charter-desc p{
        font-family:"helve-light",sans-serif;
        font-size:14px;
        letter-spacing:.7px;
        margin-bottom:10px
    }
    .content-bg .board-tab ul.board-tabs li .charter-panel .charter-desc ul{
        margin-left:2rem
    }
    .content-bg .board-tab ul.board-tabs li .charter-panel .charter-desc ul li{
        list-style-type:lower-alpha;
        margin-bottom:10px
    }
    .brands-bg h2{
        height:120%
    }
    .brands-bg img.line-1,.brands-bg img.line-2{
        display:none
    }
    .content-bg .brands-logo{
        margin:0 auto 1rem
    }
    .content-bg .brands-logo::after{
        border-bottom:none;
        content:""
    }
    .content-bg .com-struc{
        position:relative
    }
    .content-bg .com-struc::before{
        border-left:none;
        content:""
    }
    .content-bg .com-struc ul.com-structure{
        margin-bottom:5rem
    }
    .content-bg .com-struc ul.com-struc-2::before{
        border-bottom:none;
        border-left:2px solid #2735a6;
        bottom:109%;
        content:"";
        height:18%;
        left:0;
        margin:auto;
        position:absolute;
        right:0;
        width:fit-content
    }
    .content-bg .com-struc ul.com-struc-2::after{
        bottom:103%;
        color:#2735a6;
        content:"";
        font-family:"fontawesome",sans-serif;
        font-size:38px;
        left:0;
        margin:auto;
        position:absolute;
        right:0;
        width:fit-content;
        width:-moz-fit-content
    }
    .content-bg .com-struc ul.com-struc-3::before{
        border-bottom:none;
        border-left:2px solid #2735a6;
        bottom:112%;
        content:"";
        height:49.13px;
        left:0;
        margin:auto;
        position:absolute;
        right:0;
        width:fit-content;
        width:-moz-fit-content
    }
    .content-bg .com-struc ul.com-struc-3::after{
        bottom:103%;
        color:#2735a6;
        content:"";
        font-family:"fontawesome",sans-serif;
        font-size:38px;
        left:0;
        margin:auto;
        position:absolute;
        right:0;
        width:fit-content;
        width:-moz-fit-content
    }
    .content-bg .com-struc ul.com-struc-4::before{
        border-bottom:none;
        border-left:2px solid #2735a6;
        bottom:109%;
        content:"";
        height:49.13px;
        left:0;
        margin:auto;
        position:absolute;
        right:0;
        width:fit-content;
        width:-moz-fit-content
    }
    .content-bg .com-struc ul.com-struc-4::after{
        bottom:103%;
        color:#2735a6;
        content:"";
        font-family:"fontawesome",sans-serif;
        font-size:38px;
        left:0;
        margin:auto;
        position:absolute;
        right:0;
        width:fit-content;
        width:-moz-fit-content
    }
    .content-bg .com-struc ul.com-struc-5::before{
        border-bottom:none;
        border-left:2px solid #2735a6;
        bottom:119%;
        content:"";
        height:49.13px;
        left:0;
        margin:auto;
        position:absolute;
        right:0;
        width:fit-content;
        width:-moz-fit-content
    }
    .content-bg .com-struc ul.com-struc-5::after{
        bottom:103%;
        color:#2735a6;
        content:"";
        font-family:"fontawesome",sans-serif;
        font-size:38px;
        left:0;
        margin:auto;
        position:absolute;
        right:0;
        width:fit-content;
        width:-moz-fit-content
    }
    .announcement-bg h2{
        height:120%
    }
    .announcement-bg img.line-1,.announcement-bg img.line-2{
        display:none
    }
    .article-img img.line-1,.article-img img.line-2{
        display:none
    }
    .article-img h2{
        height:120%
    }
    .contact-bg img.line-1,.contact-bg img.line-2{
        display:none
    }
    .contact-bg h2{
        height:120%
    }
    .content-bg .contact-title form div.submit input{
        height:35px;
        width:250px
    }
    .content-bg .google-maps{
        margin-bottom:2rem
    }
    footer div{
        padding:1% 0
    }
    footer div .cell{
        margin-bottom:1rem
    }
    footer div .cell h6{
        font-size:24px
    }
}

/*=============================================*/
.top-bar {
  padding-top: 20px;
  padding-bottom: 20px;
  border-color: #3530ff;
}

.top-bar .header .logo img {
  max-width: 12em;
  width: 100%;
}

.menu .is-active > a {
  background: none;
}

.top-bar .header .top-menu ul li a:focus,
.top-bar .header .top-menu ul li a:hover {
  background: none;
  color: #31bfc6 !important;
}

.top-bar .header .top-menu ul .slideIn1:hover a,
.top-bar .header .top-menu ul .slideIn1:focus a,
.top-bar .header .top-menu ul .slideIn5:hover a,
.top-bar .header .top-menu ul .slideIn5:focus a {
  color: #31bfc6 !important;
}

.top-bar .header .top-menu ul li:hover,
.top-bar .header .top-menu ul li:focus {
  box-shadow: none !important;
}

/* .top-bar .header .top-menu ul li.agm-bg { background: none; } */
/*.top-bar .header .top-menu ul li.agm-bg a { color: #31bfc6 !important; }*/
.white .header .top-menu ul li.agm-bg a {
  color: #000 !important;
}

.top-bar .header .top-menu ul .slideIn2:hover ul.subMenu li a:hover,
.top-bar .header .top-menu ul .slideIn2:hover ul.subMenu li a:focus,
.top-bar .header .top-menu ul .slideIn2:focus ul.subMenu li a:hover,
.top-bar .header .top-menu ul .slideIn2:focus ul.subMenu li a:focus,
.top-bar .header .top-menu ul .slideIn4:hover ul.subMenu li a:hover,
.top-bar .header .top-menu ul .slideIn4:hover ul.subMenu li a:focus,
.top-bar .header .top-menu ul .slideIn4:focus ul.subMenu li a:hover,
.top-bar .header .top-menu ul .slideIn4:focus ul.subMenu li a:focus,
.white .header .top-menu ul li.agm-bg a:hover {
  background: none !important;
  color: #31bfc6 !important;
}

.top-bar .header .top-menu ul li ul.nested {
  background-color: #fff;
}

.top-bar .header .top-menu ul li ul.nested li a {
  background: none;
  color: #000 !important;
}

/*=============================================*/
footer {
  background-color: #2422b2;
  background-image: url(../images/deco-circle.svg);
  background-repeat: no-repeat;
  background-size: 450px;
  background-position: left -50px bottom -220px;
}

footer ul,
footer p {
  line-height: 1.3;
}

footer .footer-padd {
  padding-top: 50px;
  padding-bottom: 50px;
}

footer .footer-padd .address .footer-logo img {
  max-width: 190px;
  width: 100%;
  margin-bottom: 30px;
}

footer .footer-padd .quickLink h6,
footer .footer-padd .social-media h6 {
  background: none;
  border-color: #fff;
  color: #fff;
  -webkit-text-fill-color: inherit;
}

footer label {
  margin-bottom: 3px;
}

footer textarea,
footer input[type]:not([type="submit"]):not([type="button"]) {
  font-size: 14px;
  color: #fff;
  letter-spacing: 0.05em;
  line-height: 1.3;
  background-color: transparent;
  height: 40px;
  margin: 0;
  padding: 5px 15px;
  box-shadow: none;
  border: 1px solid #abdee0;
}

footer textarea {
  height: 10em;
}

footer textarea:focus,
footer input[type]:not([type="submit"]):not([type="button"]):focus {
  box-shadow: none;
  background-color: transparent;
  border: 1px solid #abdee0;
}

footer .footer-padd .social-media form .submit input {
  font-size: 12px;
  font-weight: 700;
  color: #2422b2;
  text-align: center;
  letter-spacing: 0.2em;
  display: inline-block;
  max-width: 150px;
  width: 100%;
  height: auto;
  background: #abdee0;
  margin-top: 10px;
  padding: 1em 1em;
  border: 1px solid transparent;
}

footer .footer-padd .social-media form .submit input:hover {
  background: transparent;
  border-color: #abdee0;
  color: #abdee0;
}

footer p.copyright {
  padding-top: 20px;
  padding-bottom: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  background: none;
}

/*=============================================*/
.about-bg,
.director-bg,
.contact-bg {
  background-color: #2422b2;
  background-image: url(../images/deco-circle.svg);
  background-repeat: no-repeat;
  background-size: 450px;
  background-position: right -50px top -220px;
}

.brands-bg {
  background-image: linear-gradient(
      480deg,
      rgba(52, 49, 255, 0.65),
      rgba(49, 191, 198, 0.65)
    ),
    url(../images/mock-assets-22-2.jpg);
}

.announcement-bg {
  background-image: linear-gradient(
      480deg,
      rgba(52, 49, 255, 0.65),
      rgba(49, 191, 198, 0.65)
    ),
    url(../images/announcement-bg.jpg);
}

.charter-bg {
  background-image: linear-gradient(
      480deg,
      rgba(52, 49, 255, 0.65),
      rgba(49, 191, 198, 0.65)
    ),
    url(../images/mock-assets-29.jpg);
}

.content-padding .invest h2 {
  background-color: #31bfc6;
  background-image: linear-gradient(90deg, #3431ff, #31bfc6);
  font-family: "Product Sans", sans-serif;
  font-size: 40px;
  line-height: 1;
}

.content-bg .about-title h3 {
  background-color: #31bfc6;
}

.content-bg .contact-title h2 {
  border-color: #3431ff;
  color: #3431ff;
}

.content-bg .content-padd .director:hover .director-name h6,
.glove-title p span,
.content-bg .annual-report .annual-title h2,
.content-bg .board-title h2,
.content-bg .board-tab-title h2,
.content-bg .board-title h5 {
  background-image: linear-gradient(45deg, #3431ff, #31bfc6);
}

.content-bg .content-padd .director .director-name,
.boardcharter .bg-img,
.policies-pdf .annual-img,
.border-pdf .annual-img {
  border-color: #abdee0;
}

.content-bg .content-padd .director .director-name button,
.announcement-bg h2 a button,
.policies-pdf .annual-report .download-section a button,
.content-bg .contact-title form div.submit input {
  font-size: 12px;
  font-weight: 700;
  color: #2422b2 !important;
  text-align: center;
  letter-spacing: 0.2em;
  display: inline-block;
  max-width: 150px;
  width: 100%;
  height: auto;
  background: #abdee0;
  margin-top: 10px;
  padding: 1em 1em;
  border: 1px solid transparent;
}

.announcement-bg h2 a button:hover,
.announcement-bg h2 a button:focus,
.policies-pdf .annual-report .download-section a button:hover,
.policies-pdf .annual-report .download-section a button:focus,
.content-bg .contact-title form div.submit input:hover {
  background: transparent;
  border-color: #abdee0;
}

.announcement-bg h2 a button:hover,
.announcement-bg h2 a button:focus {
  color: #abdee0 !important;
}

.policies-pdf .annual-report .download-section a button:hover,
.policies-pdf .annual-report .download-section a button:focus {
  color: #2422b2 !important;
}

.boardcharter h3 {
  background: #31bfc6;
}

.content-bg .board-tab ul.board-tabs li.is-active a {
  background: #252636;
}

.content-bg .board-tab ul.board-tabs li:hover a,
.content-bg .board-tab ul.board-tabs li:focus a {
  background-color: #3530ff;
}

@media screen and (max-width: 1024px) {
  .about-bg {
    background-size: 250px;
    background-position: right -50px top -80px;
  }

  /*-----*/
  .title-bar {
    padding: 15px 20px;
    border-color: #2422b2;
  }

  .title-bar .hamburger--squeeze .hamburger-inner,
  .title-bar .hamburger--squeeze .hamburger-inner:after,
  .title-bar .hamburger--squeeze .hamburger-inner:before {
    background-color: #2422b2;
  }

  /*-----*/
  .top-bar .header .top-menu ul .slideIn2:hover a,
  .top-bar .header .top-menu ul .slideIn2:focus a,
  .top-bar .header .top-menu ul .slideIn4:hover a,
  .top-bar .header .top-menu ul .slideIn4:focus a {
    box-shadow: none !important;
    color: #31bfc6 !important;
  }

  .top-bar .header .top-menu ul .slideIn2:hover a::after,
  .top-bar .header .top-menu ul .slideIn2:focus a::after,
  .top-bar .header .top-menu ul .slideIn4:hover a::after,
  .top-bar .header .top-menu ul .slideIn4:focus a::after {
    border-color: #000 transparent transparent !important;
  }

  .top-bar .header .top-menu ul li.agm-bg a {
    color: #000 !important;
  }

  .top-bar .header .top-menu ul li.agm-bg a:focus {
    color: #31bfc6 !important;
  }
}

@media screen and (max-width: 800px) {
  .content-padding .invest h2 {
    font-size: 30px;
  }
}

/* Highlight | EGM Page | 09-Nov-2023 */
.top-bar .header .top-menu ul li.agm-bg a:hover {
  color: #ffffff !important;
}

@media screen and (max-width: 1024px) {
  .top-bar {
    top: 53px !important;
  }
  .top-bar .header .top-menu ul li.agm-bg a {
    color: #ffffff !important;
  }
}

/* Create Label for Policies | 30-May-2024 */
.annual-img span {
  background-color: #3530ff;
  border-radius: 20px;
  color: #fff;
  font-size: 14px;
  margin: auto;
  max-width: 60px;
  position: absolute;
  right: 5px;
  text-align: center;
  top: 5px;
  width: 100%;
}

@media all and (max-width: 639px) {
  .annual-img span {
    font-size: 12px;
    padding: 3px 5px;
  }
}

.white .header .top-menu ul li.agm-bg a {
  color: #ffffff !important;
}

.agm-bg h2 {
  flex-direction: column;
}

li.agm-bg {
  margin: 0 2.5px;
}

.agm-text h2 {
  flex-direction: unset;
}

.top-bar .header {
  max-width: 95%;
}

/*20251009Hakim_OT - to modify menu text and bar*/
.top-bar {  
	background-color: rgba(0, 0, 0, 0.09);
}

/* ====== Universal Gradient Text for All Menus & Submenus ====== */
.top-bar .header .top-menu ul.menu li > a,
.top-bar .header .top-menu ul.menu li ul.subMenu li > a,
.top-bar .header .top-menu ul.menu li ul.subMenu li ul.submenu li > a,
.top-bar.white .header .top-menu ul.menu li > a,
.top-bar.white .header .top-menu ul.menu li ul.subMenu li > a,
.top-bar.white .header .top-menu ul.menu li ul.subMenu li ul.submenu li > a {
  background: linear-gradient(90deg, #1e3a8a, #3b82f6, #60a5fa) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  font-weight: 600;
  transition: all 0.3s ease;
}

/* ====== Hover & Focus (Darker Gradient) ====== */
.top-bar .header .top-menu ul.menu li:hover > a,
.top-bar .header .top-menu ul.menu li:focus-within > a,
.top-bar .header .top-menu ul.menu li ul.subMenu li:hover > a,
.top-bar .header .top-menu ul.menu li ul.subMenu li:focus-within > a,
.top-bar .header .top-menu ul.menu li ul.subMenu li ul.submenu li:hover > a,
.top-bar .header .top-menu ul.menu li ul.subMenu li ul.submenu li:focus-within > a,
.top-bar .header .top-menu ul.menu li[class*="slideIn"]:hover > a,
.top-bar .header .top-menu ul.menu li[class*="slideIn"]:focus-within > a {
  background: linear-gradient(90deg, #172554, #1d4ed8, #3b82f6) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* ====== Preserve Gradient Inside Green Hover BG ====== */
.top-bar .header .top-menu ul.menu li:hover > a,
.top-bar .header .top-menu ul.menu li ul.subMenu li:hover > a,
.top-bar .header .top-menu ul.menu li ul.subMenu li ul.submenu li:hover > a {
  background-color: #bed7b0 !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* ====== Remove Forced White from Old Rules ====== */
.top-bar .header .top-menu ul li a,
.top-bar .header .top-menu ul li ul.subMenu li a,
.top-bar .header .top-menu ul li ul.subMenu li ul.submenu li a,
.top-bar .header .top-menu ul li[class*="slideIn"] a {
  color: transparent !important;
  background-color: transparent !important;
}

/* ====== For sub-1 & sub-2 Special Arrows ====== */
a.sub-1, a.sub-2 {
  background: linear-gradient(90deg, #1e3a8a, #3b82f6, #60a5fa) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
a.sub-1:hover, a.sub-2:hover {
  background: linear-gradient(90deg, #172554, #1d4ed8, #3b82f6) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* 🔹 Fix: Force gradient text for first-level submenu hover */
.top-bar .header .top-menu ul.menu > li:hover > ul.subMenu > li > a:hover,
.top-bar .header .top-menu ul.menu > li:focus-within > ul.subMenu > li > a:focus,
.top-bar .header .top-menu ul.menu > li[class*="slideIn"]:hover > ul.subMenu > li > a:hover,
.top-bar .header .top-menu ul.menu > li[class*="slideIn"]:focus-within > ul.subMenu > li > a:focus {
  background: linear-gradient(90deg, #172554, #1d4ed8, #3b82f6) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  background-color: #bed7b0 !important; /* keep the green hover bg */
}

.white {
	background-color: #fff;
}

/* Button background on LI with slight transparency */
.top-bar .header .top-menu > ul > li {
    background-color: rgba(255, 255, 255, 0.8);  /* bright white, slightly transparent */
    border-radius: 8px;         /* match button shape */
    transition: all 0.3s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* Gradient text on A > span */
.top-bar .header .top-menu > ul > li > a span {
    background: linear-gradient(90deg, #1e3a8a, #3b82f6, #60a5fa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
    display: inline-block;
    padding: 6px 24px; /* spacing inside the li button */
}

/* Hover effect on LI */
.top-bar .header .top-menu > ul > li:hover {
    background-color: rgba(255, 255, 255, 0.95);  /* slightly stronger on hover */
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transform: translateY(-2px);
}

/* to adjust top header height for subtitle to more lower height request by Mr.BT */
.top-bg {
    height: 300px !important;
	margin-bottom: 20px !important;
}

/*For certification new design for logo request by mr jerry */
.cert-box {
  position: relative;
  border: 3px solid #222; /* darker main border */
  border-radius: 12px;
  padding: 15px;
  text-align: center;
  background-color: #fff;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.cert-box:hover {
  transform: scale(1.02);
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.25);
}

.cert-box img {
  max-width: 95%;
  height: auto;
  display: block;
  margin: 0 auto 35px auto; /* spacing above button */
}

/* 🔹 Static button always visible */
.cert-btn {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 12px;
  background-color: rgba(0, 120, 215, 0.95);
  color: #fff !important;
  font-size: 11px;
  font-weight: 600;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.25s ease, transform 0.25s ease;
}

.cert-btn:hover {
  background-color: rgba(64, 169, 255, 1);
  transform: translateX(-50%) scale(1.05);
}

/* 🔹 Responsive fix: 2 per row on mobile */
@media screen and (max-width: 768px) {
  .grid-x.grid-padding-x.grid-padding-y.large-up-4.medium-up-2.small-up-1.cert-test {
    display: grid;
    grid-template-columns: repeat(1, 1fr) !important;
    gap: 2px; /* 🔽 reduce gap between logo cards */
  }

  .cert-box {
    padding: 8px; /* 🔽 tighter padding so logo appears larger */
  }

  .cert-box img {
    max-width: 95%; /* 🔼 increase logo size slightly */
    margin-bottom: 2px; /* 🔽 bring button closer */
  }

  /* ✨ Smaller button text on mobile */
  .cert-btn {
    font-size: 8px;
    padding: 3px 8px;
    bottom: 6px;
  }
}

/* ==========================
   Certificate Group Wrapper
   ========================== */
.cert-group {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(37, 99, 235, 0.25); /* gradient blue border tone */
  border-radius: 18px;
  padding: 1.5rem 1.2rem;
  margin-bottom: 2.5rem;
  box-shadow: 0 4px 22px rgba(96, 165, 250, 0.15); /* soft blue glow */
  backdrop-filter: blur(4px);
  transition: all 0.35s ease;
}

/* Hover effect – subtle glow lift */
.cert-group:hover {
  border-color: rgba(96, 165, 250, 0.6);
  box-shadow: 0 6px 28px rgba(37, 99, 235, 0.25);
  transform: translateY(-2px);
}

/* ==========================
   Header (gradient text, enhanced)
   ========================== */
.cert-group-header {
    text-align: center; /* keep centered */
}

.cert-group-header h3 {
    font-size: 2rem; /* slightly bigger */
    font-weight: 900; /* extra bold */
    text-transform: uppercase;
    background: linear-gradient(90deg, #1e3a8a, #3b82f6, #60a5fa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: 2px; /* more spacing for emphasis */
    display: inline-block; /* ensures it's treated like an inline element for centering */
    margin: 0 auto;        /* auto margins center it */
    position: relative;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.15); /* subtle shadow for depth */
    transition: transform 0.3s ease;
}

/* Optional: hover effect for slight movement */
.cert-group-header h3:hover {
    transform: scale(1.05);
}

/* Underline accent */
.cert-group-header h3::after {
    content: "";
    display: block;
    width: 100px; /* slightly wider underline */
    height: 4px;  /* thicker line */
    margin: 10px auto 0; /* spacing from text */
    background: linear-gradient(90deg, #1e3a8a, #3b82f6, #60a5fa);
    border-radius: 50px;
    opacity: 1; /* make it fully visible */
    box-shadow: 0 2px 6px rgba(0,0,0,0.2); /* subtle glow effect */
    transition: width 0.3s ease;
}

/* Optional: hover effect for underline */
.cert-group-header h3:hover::after {
    width: 120px; /* slightly extend underline on hover */
}

/* Responsive tweaks */
@media screen and (max-width: 768px) {
  .cert-group {
    padding: 1rem;
  }

  .cert-group-header h3 {
    font-size: 1.3rem;
  }

  .cert-group-header h3::after {
    width: 50px;
    height: 2px;
  }
}

/* ==========================
   Keep Cert Button Text in One Line (Desktop only)
   ========================== */
@media screen and (min-width: 1025px) {
  .cert-btn {
    white-space: nowrap; /* ✅ prevents line break */
    max-width: none;     /* ensures full width is allowed */
  }
}


.brands-bg h2,
.announcement-bg h2,
.charter-bg h2 {
  text-align: center;
}

/*For product new design to split the available gram to be able seen button details by mr jerry */
.product-info {
  text-align: center;
  padding: 1rem 0.5rem;
  background: #fff;
  border-top: 1px solid #eee;
  border-radius: 0 0 12px 12px;
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
  color: #222; /* Neutral text */
}

.product-info h4 {
  color: #2422b2; /* Corporate blue for product name */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

.label-title {
  font-weight: 600;
  color: #333;
  margin-bottom: 0.3rem;
}

.size-options {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
  margin-bottom: 8px;
}

.size-item {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fdfdfd;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  padding: 5px 12px;
  transition: all 0.3s ease;
}

.size {
  font-weight: 600;
  color: #222;
}

/* ✨ Lighter gradient blue "See Details" button */
.btn-size {
  background: linear-gradient(90deg, #3b82f6, #60a5fa, #93c5fd);
  color: #fff !important;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(96, 165, 250, 0.4);
  transition: all 0.3s ease;
}

/* 🩶 Greyed-out button for "Not Available" */
.btn-size.na {
  background: linear-gradient(90deg, #9ca3af, #d1d5db); /* light grey gradient */
  color: #f9fafb !important;
  box-shadow: 0 2px 6px rgba(156, 163, 175, 0.4);
  cursor: not-allowed;
  opacity: 0.8;
}

/* Hover effect only for normal blue buttons */
.btn-size:not(.na):hover {
  background: linear-gradient(90deg, #60a5fa, #93c5fd, #bfdbfe);
  box-shadow: 0 4px 12px rgba(147, 197, 253, 0.6);
  transform: translateY(-2px);
}

.size-range {
  font-size: 0.85rem;
  color: #666;
  margin-top: 6px;
}

.content-bg .content-padd .product .product-info:before {
    background-image: url("../images/oneglove-asset-bg.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    border-bottom-right-radius: 15px;
    bottom: 0;
    content: "";
    height: 100px;
    opacity: 0;                /* lower opacity in normal state  *temporary hide set to 0 from 0.15 */
    position: absolute;
    right: 0px;                  /* keep it visible, no slide */
    transition: opacity 0.3s ease; /* smooth fade on hover */
    width: 100px;
}

.content-bg .content-padd .product:hover .product-info:before {
    opacity: 0;                    /* fully visible on hover *temporary hide set to 0 from 0.35 */
    right: 0px;                   /* keep position static */
}

/** To adjust the size of each item more smaller and 3 column per row instead of 2 on all under investor relatons - request by mr BT**/

@media screen and (min-width: 1025px) {
    /* Only apply if the block has large-4 */
    .annual-report-block.large-4 h3 {
        font-size: 14px !important;
        line-height: 1.3 !important;
    }

    .annual-report-block.large-4 button {
        font-size: 12px !important;
        padding: 0.6em 0.8em !important;
    }

    .annual-report-block.large-4 p {
        font-size: 12px !important;
        line-height: 1.4 !important;
    }
}

/* To beutify about us section to align with current design*/
/* About Us Section */
.about-us-section {
    padding: 60px 0;
    background-color: #f9f9f9; /* subtle background for separation */
}

/* Title (gradient & accent) */
.about-title h3 {
    font-size: 2rem;           /* slightly bigger */
    font-weight: 900;
    text-transform: uppercase;
    background: linear-gradient(90deg, #1e3a8a, #3b82f6, #60a5fa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: 2px;
    text-align: center;
    margin-bottom: 25px;
    position: relative;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.15);
}

/* Underline accent */
.about-title h3::after {
    content: "";
    display: block;
    width: 120px;
    height: 4px;
    margin: 10px auto 0;
    background: linear-gradient(90deg, #1e3a8a, #3b82f6, #60a5fa);
    border-radius: 50px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/* Company Overview Paragraphs */
.companyOverview p {
    font-size: 1rem;
    line-height: 1.8;
    color: #444;              /* dark gray for readability */
    margin-bottom: 20px;
    text-align: justify;       /* cleaner alignment */
}

/* Optional: Slight fade-in effect on load */
.companyOverview p {
    opacity: 0;
    transform: translateY(15px);
    animation: fadeInUp 0.8s ease forwards;
}

.companyOverview p:nth-child(1) { animation-delay: 0.2s; }
.companyOverview p:nth-child(2) { animation-delay: 0.4s; }
.companyOverview p:nth-child(3) { animation-delay: 0.6s; }
.companyOverview p:nth-child(4) { animation-delay: 0.8s; }
.companyOverview p:nth-child(5) { animation-delay: 1s; }

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive adjustments */
@media screen and (max-width: 1024px) {
    .about-title h3 { font-size: 1.7rem; }
    .companyOverview p { font-size: 0.95rem; }
}

@media screen and (max-width: 768px) {
    .about-title h3 { font-size: 1.5rem; }
    .companyOverview p { font-size: 0.9rem; }
}

/*To beutify Index section new WRAP Transition*/
/* ==========================
   Enhanced WRAP Slide Style (Dark + White)
   ========================== */
.enhanced-slide {
  background: rgba(0, 0, 0, 0.88); /* darker background overlay */
  border-radius: 15px;
  padding: 2rem 1rem;
  text-align: center;
  color: #ffffff; /* all text pure white */
  backdrop-filter: blur(1.5px);
  /*box-shadow: 0 0 40px rgba(0, 0, 0, 0.8);*/
}

/* Headline */
.enhanced-slide h4 {
  font-size: 1.9rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 1.2rem;
  color: #ffffff;
}

/* Logo container */
.image-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1.8rem 0;
}

/* ✅ Apply only to the WRAP slide */
.home-slide-item.wrap-logo .image-logo img {
  background: rgba(255, 255, 255, 0.8); /* soft white backdrop */
  border-radius: 50%;
  padding: 10px;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
}

/* Glow logo (enhanced border version) */
.logo-glow {
  display: inline-block;
  padding: 20px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.05) 70%);
  border: 0px solid rgba(255, 255, 255, 0.9); /* ✅ brighter, stronger border */
  box-shadow: 0 0 25px rgba(255, 255, 255, 0.6), 0 0 50px rgba(255, 255, 255, 0.3);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

.logo-glow img {
  width: 150px;
  height: auto;
  filter: drop-shadow(0 0 18px rgba(255, 255, 255, 0.9)) brightness(1.35);
  transition: transform 0.3s ease, filter 0.3s ease;
}

/* Hover glow effect */
.logo-glow:hover {
  transform: scale(1.08);
  border-color: #ffffff;
  box-shadow: 0 0 40px rgba(255, 255, 255, 0.9), 0 0 80px rgba(255, 255, 255, 0.5);
}

.logo-glow:hover img {
  filter: drop-shadow(0 0 28px rgba(255, 255, 255, 1)) brightness(1.5);
}

/* Subtitle */
.enhanced-slide h5 {
  font-size: 1.2rem;
  font-weight: 500;
  margin-top: 1rem;
  color: #ffffff;
  letter-spacing: 1px;
  opacity: 0.95;
}

@keyframes pulseGlow {
  0% { filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.6)); }
  50% { filter: drop-shadow(0 0 18px rgba(255, 255, 255, 1)); }
  100% { filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.6)); }
}

.logo-glow img {
  animation: pulseGlow 3s ease-in-out infinite;
}

/*Upgrade frame for Board of director to look like about us frame */
/* Fade-in animation for Board of Directors */
.director {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.8s ease forwards;
}

/* Optional: delay each row slightly for a cascading effect */
.chart-row:nth-child(1) .director { animation-delay: 0.2s; }
.chart-row:nth-child(2) .director:nth-child(1) { animation-delay: 0.4s; }
.chart-row:nth-child(2) .director:nth-child(2) { animation-delay: 0.6s; }
.chart-row:nth-child(3) .director:nth-child(1) { animation-delay: 0.8s; }
.chart-row:nth-child(3) .director:nth-child(2) { animation-delay: 1s; }

@media screen and (max-width: 768px) {
  .director {
    animation-delay: 0 !important; /* all load at once */
    transform: translateY(0);
  }
}

/**/

/*Upgrade frame for Corporate Structure to look like Board of director frame */
/* ==========================
   Corporate Structure Animation
   ========================== */
/* Fade-in for main image container */
.new-cor-desktop .cor-img,
.new-cor-mobile .cor-img {
    opacity: 0;
    transform: translateY(25px);
    animation: fadeInUp 1s ease forwards;
    animation-delay: 0.2s;
}

/* Fade-in for notes or captions below the image */
.new-cor-desktop .cor-img div[style*="padding"],
.new-cor-mobile .cor-img p {
    opacity: 0;
    transform: translateY(15px);
    animation: fadeInUp 1s ease forwards;
    animation-delay: 0.6s;
}

/* Optional: add slight lift on hover for the desktop version */
.new-cor-desktop .cor-img img {
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* ==========================
   Certification Page Animations
   ========================== */

/* Fade-in for each certification box */
.cert-box {
  opacity: 0;
  transform: translateY(25px);
  animation: fadeInUp 0.8s ease forwards;
}

/* Delay animation for each item progressively */
.cert-test .cell:nth-child(1) .cert-box { animation-delay: 0.1s; }
.cert-test .cell:nth-child(2) .cert-box { animation-delay: 0.2s; }
.cert-test .cell:nth-child(3) .cert-box { animation-delay: 0.3s; }
.cert-test .cell:nth-child(4) .cert-box { animation-delay: 0.4s; }
.cert-test .cell:nth-child(5) .cert-box { animation-delay: 0.5s; }
.cert-test .cell:nth-child(6) .cert-box { animation-delay: 0.6s; }
.cert-test .cell:nth-child(7) .cert-box { animation-delay: 0.7s; }
.cert-test .cell:nth-child(8) .cert-box { animation-delay: 0.8s; }
.cert-test .cell:nth-child(9) .cert-box { animation-delay: 0.9s; }
.cert-test .cell:nth-child(10) .cert-box { animation-delay: 1s; }
.cert-test .cell:nth-child(11) .cert-box { animation-delay: 1.1s; }
.cert-test .cell:nth-child(12) .cert-box { animation-delay: 1.2s; }
.cert-test .cell:nth-child(13) .cert-box { animation-delay: 1.3s; }

/* Optional: Animate group headers (Facility / Product Certifications) */
.cert-group-header h3 {
  opacity: 0;
  transform: translateY(10px);
  animation: fadeInUp 0.8s ease forwards;
  animation-delay: 0.1s;
}

/* Hover lift to make them more dynamic */
.cert-box:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15);
}

/* Keep your existing keyframes */
@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================
   Product Page Animations
   ========================== */

.product {
  opacity: 0;
  transform: translateY(25px);
  animation: fadeInUp 0.8s ease forwards;
}

/* Staggered fade-in delays for smoother sequence */
.grid-margin-x .cell.product:nth-child(1) { animation-delay: 0.1s; }
.grid-margin-x .cell.product:nth-child(2) { animation-delay: 0.2s; }
.grid-margin-x .cell.product:nth-child(3) { animation-delay: 0.3s; }
.grid-margin-x .cell.product:nth-child(4) { animation-delay: 0.4s; }
.grid-margin-x .cell.product:nth-child(5) { animation-delay: 0.5s; }
.grid-margin-x .cell.product:nth-child(6) { animation-delay: 0.6s; }
.grid-margin-x .cell.product:nth-child(7) { animation-delay: 0.6s; }

/* Optional: Lift effect on hover */
.product:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15);
}

/* Keyframes reused */
@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================
   Bursa Announcement Page Animations
   ========================== */

/* Header fade-in (Bursa Announcements title) */
.announcement-bg h2 {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.8s ease forwards;
  animation-delay: 0.1s;
  color: #fff; /* optional - ensures readability on dark bg */
}

.announcement-bg h2 p {
  opacity: 0;
  transform: translateY(15px);
  animation: fadeInUp 0.8s ease forwards;
  animation-delay: 0.3s;
}

.announcement-bg h2 a button {
  opacity: 0;
  transform: translateY(10px);
  animation: fadeInUp 0.8s ease forwards;
  animation-delay: 0.5s;
}

/* Annual Report Section Fade-In */
.annual-report-block {
  opacity: 0;
  transform: translateY(25px);
  animation: fadeInUp 0.9s ease forwards;
}

/* Staggered delays so they appear gracefully */
.annual-report-block:nth-child(1) { animation-delay: 0.2s; }
.annual-report-block:nth-child(2) { animation-delay: 0.4s; }
.annual-report-block:nth-child(3) { animation-delay: 0.6s; }
.annual-report-block:nth-child(4) { animation-delay: 0.8s; }
.annual-report-block:nth-child(5) { animation-delay: 1s; }
.annual-report-block:nth-child(6) { animation-delay: 1.2s; }
.annual-report-block:nth-child(7) { animation-delay: 1.4s; }
.annual-report-block:nth-child(8) { animation-delay: 1.6s; }
.annual-report-block:nth-child(9) { animation-delay: 1.8s; }

/* Fade-in keyframe reused globally */
@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* Universal Page Header Fade-In Animation */
.top-bg h2 {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.8s ease forwards;
  animation-delay: 0.1s;
  color: #fff; /* ensures good visibility on dark backgrounds */
}

/* Optional subtitle or text inside the header (if any <p> inside h2) */
.top-bg h2 p {
  opacity: 0;
  transform: translateY(15px);
  animation: fadeInUp 0.8s ease forwards;
  animation-delay: 0.3s;
}

/* Fade-In Keyframes */
@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade-in for main content sections */
.content-bg,
.section,
.sales-section,
.contact-title,
.map-links,
.google-maps {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 0.8s ease forwards;
}

/* Add delay to create smooth staggered effect */
.sales-section { animation-delay: 0.1s; }
.contact-title { animation-delay: 0.3s; }
.map-links     { animation-delay: 0.5s; }
.google-maps   { animation-delay: 0.7s; }

/* Reuse your existing keyframes */
@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade-in for homepage content (below slider) */
.content-padding,
.yt-thumb-frame,
.yt-title {
  opacity: 0;
  transform: translateY(25px);
  animation: fadeInUp 0.8s ease forwards;
}

/* Staggered delays for a cascading entry effect */
.content-padding { animation-delay: 0.2s; }
.yt-thumb-frame:nth-child(1) { animation-delay: 0.3s; }
.yt-thumb-frame:nth-child(2) { animation-delay: 0.5s; }
.yt-thumb-frame:nth-child(3) { animation-delay: 0.7s; }
.yt-thumb-frame:nth-child(4) { animation-delay: 0.9s; }

/* Keep your reusable fadeInUp keyframes */
@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Apply only to w-logo section */
.home-slide-item.w-logo .slide1-desc {
  opacity: 0;
  animation: fadeInUp 1s ease forwards;
  animation-delay: 0.2s; /* Delay a bit so it fades after background appears */
}

.home-slide-item.w-logo .slide1-desc h4,
.home-slide-item.w-logo .slide1-desc img,
.home-slide-item.w-logo .slide1-desc h3,
.home-slide-item.w-logo .slide1-desc h5,
.home-slide-item.w-logo .slide1-desc button {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 1s ease forwards;
}

/* Stagger animation */
.home-slide-item.w-logo .slide1-desc h4 { animation-delay: 0.2s; }
.home-slide-item.w-logo .slide1-desc img { animation-delay: 0.4s; }
.home-slide-item.w-logo .slide1-desc h3 { animation-delay: 0.6s; }
.home-slide-item.w-logo .slide1-desc h5 { animation-delay: 0.8s; }
.home-slide-item.w-logo .slide1-desc button { animation-delay: 1s; }

/* Corporate Structure Desktop Image */
.new-cor-desktop .cor-img img {
  max-width: 85%;      /* reduce size to 85% for sharper look */
  height: auto;        /* maintain aspect ratio */
  display: block;
  margin: 0 auto;      /* center horizontally */
  image-rendering: -webkit-optimize-contrast; /* improve sharpness on Chrome */
}

/* For high-resolution displays */
@media (min-width: 1600px) {
  .new-cor-desktop .cor-img img {
    max-width: 70%; /* even smaller on very large screens */
  }
}

/* Mobile version */
.new-cor-mobile .cor-img img {
  max-width: 95%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* NEW badge (dark blue tone) */
.new {
  display: inline-block;
  background-color: #003366 !inherit; /* your original dark blue */
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  padding: 4px 10px;
  border-radius: 30px;
  position: relative;
  overflow: hidden;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.new::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%);
  filter: blur(1px);
  animation: shineSweep 3s infinite linear;
}

/* FEATURED badge (gold tone) */
.featured {
  display: inline-block;
  background: linear-gradient(135deg, #d4af37, #b8860b) !inherit; /* rich gold tone */
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  padding: 4px 12px;
  border-radius: 30px;
  position: relative;
  overflow: hidden;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.featured::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%);
  filter: blur(1px);
  animation: shineSweep 3s infinite linear;
}

/* Shared animation */
@keyframes shineSweep {
  0% { left: -100%; }
  100% { left: 150%; }
}

/* Optional: subtle border for depth */
.product-label .new,
.product-label .featured {
  border: 1px solid rgba(255,255,255,0.2);
}

.top-bar .header .top-menu ul li.hypeSlide > a::after {
  border-color: #1d4ed8 transparent transparent !important; /* Tailwind's blue-700 */
}

.content-bg.corporate  {
  padding-top: 10px !important;
  margin-top: 0 !important;
}

@media (max-width: 768px) {
  .content-bg.corporate {
    padding-top: 0px !important;
  }
}


/* ==========================
   WRAP Slide Animation (non-conflicting)
   ========================== */

/* Container animation */
.home-slide-item.wrap-logo .slide1-desc {
  opacity: 0;
  animation: fadeInUp 1s ease forwards;
  animation-delay: 0.2s;
}

/* Animate individual elements inside enhanced-slide */
.home-slide-item.wrap-logo .slide1-desc h4,
.home-slide-item.wrap-logo .slide1-desc .image-logo,
.home-slide-item.wrap-logo .slide1-desc h3,
.home-slide-item.wrap-logo .slide1-desc h5 {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 1s ease forwards;
}

/* Stagger each one */
.home-slide-item.wrap-logo .slide1-desc h4 { animation-delay: 0.2s; }
.home-slide-item.wrap-logo .slide1-desc .image-logo { animation-delay: 0.4s; }
.home-slide-item.wrap-logo .slide1-desc h3 { animation-delay: 0.6s; }
.home-slide-item.wrap-logo .slide1-desc h5 { animation-delay: 0.8s; }

/* Fade-in-up keyframes (safe for reuse) */
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.enhanced-slide {
  background: rgba(0, 0, 0, 0.93); /* darker inside */
  border-radius: 15px;
  padding: 2rem 1rem;
  text-align: center;
  color: #ffffff;
}


/*.home-slide-item.w-logo {
  background-size: 100% !important;
  background-repeat: no-repeat !important;
  background-position: 0% 95% !important; 
  width: 100%;
  height: 100vh;
}*/

/* ✅ Mobile fix: make sure it fills vertically */
@media (max-width: 768px) {
  .home-slide-item.w-logo {
    background-size: cover !important; /* ensure it fills full height on mobile */
    background-position: center center !important; /* recenters image nicely */
  }
}

/* ✅ Desktop (default) - keep your existing styles */
.home-slide-item.amfori-logo .image-logo-wrap img {
  background: rgba(255, 255, 255, 0.8); /* soft white backdrop */
  border-radius: 50%;
  padding: 10px;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
  display: inline-block;
  padding: 20px;
  border-radius: 50%;
  border: 0px solid rgba(255, 255, 255, 0.9); /* ✅ brighter, stronger border */
  box-shadow: 0 0 25px rgba(255, 255, 255, 0.6), 0 0 50px rgba(255, 255, 255, 0.3);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

.home-slide-item.amfori-logo .image-logo-amfori img {
  background: rgba(255, 255, 255, 0.8);
  padding: 20px;
  border-radius: 12px;
  border: 0px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 25px rgba(255, 255, 255, 0.6), 0 0 50px rgba(255, 255, 255, 0.3);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
  display: inline-block;

  max-width: 120%; /* 👈 enlarge image size */
  transform: scale(1.1); /* 👈 gently zoom in */
}

/* 🌍 Base layout adjustments */
.slide1-desc.slide2-desc.enhanced-slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px;
  box-sizing: border-box;
}

/* 🧩 Make sure images scale properly */
.slide1-desc.slide2-desc.enhanced-slide img {
  width: auto;
  max-width: 100%;
  height: auto;
}

/* 📱 Mobile responsiveness */
@media (max-width: 768px) {
  .slide1-desc.slide2-desc.enhanced-slide {
    padding: 10px !important;
    background-color: rgba(0, 0, 0, 0.85);
    transform: scale(0.8); /* 👈 shrink to 80% of original */
    transform-origin: center center;
  }

  .slide1-desc.slide2-desc.enhanced-slide h3 {
    font-size: 14px !important; /* smaller heading */
    margin: 4px 0 !important;
    line-height: 1.2 !important;
  }

  .slide1-desc.slide2-desc.enhanced-slide h5 {
    font-size: 11px !important;
    margin-top: 6px !important;
    line-height: 1.3 !important;
  }

  .slide1-desc.slide2-desc.enhanced-slide .image-logo-amfori,
  .slide1-desc.slide2-desc.enhanced-slide .image-logo-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 6px 0 !important;
  }

  /* 👇 Make logos smaller */
  .slide1-desc.slide2-desc.enhanced-slide .image-logo-amfori img,
  .slide1-desc.slide2-desc.enhanced-slide .image-logo-wrap img {
    max-width: 50% !important; /* smaller logos */
    height: auto !important;
    transform: none !important;
  }
}

/* 📱 Very small phones (below 480px) */
@media (max-width: 480px) {
  .slide1-desc.slide2-desc.enhanced-slide {
    padding: 8px !important;
    transform: scale(0.75); /* 👈 even smaller for tiny screens */
  }

  .slide1-desc.slide2-desc.enhanced-slide h3 {
    font-size: 13px !important;
  }

  .slide1-desc.slide2-desc.enhanced-slide h5 {
    font-size: 10px !important;
  }

  .slide1-desc.slide2-desc.enhanced-slide .image-logo-amfori img,
  .slide1-desc.slide2-desc.enhanced-slide .image-logo-wrap img {
    max-width: 45% !important; /* tighter image for smaller screens */
  }
}

/* 📱 Mobile view fix — remove unwanted gap between Amfori and ISO */
@media (max-width: 768px) {
  .cert-group-body .cell {
    display: block;
  }

  /* Hide empty cells or cells that contain only whitespace */
  .cert-group-body .cell:not(:has(img)) {
    display: none !important;
  }
}

/* 🌐 Base slick dot style */
.home-full-slide .home-slide .slick-dots li button:before {
  content: "" !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 40% !important;
  background: linear-gradient(135deg, #1e3a8a, #3b82f6, #60a5fa) !important; /* dark → bright blue */
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.2) !important; /* white glow */
  opacity: 0.9 !important;
  transform: scale(0.9);
  transition: all 0.35s ease !important;
}

/* 💎 Active (selected) dot */
.home-full-slide .home-slide .slick-dots li.slick-active button:before {
  background: linear-gradient(135deg, #2563eb, #60a5fa, #93c5fd) !important; /* vibrant blue gradient */
  box-shadow:
    0 0 5px rgba(255, 255, 255, 0.9),
    0 0 5px rgba(255, 255, 255, 0.7) !important; /* strong white glow */
  transform: scale(1.3);
  opacity: 1 !important;
  animation: pulse-white 1.8s infinite alternate ease-in-out;
}

/* ✨ Pulse white glow animation */
@keyframes pulse-white {
  0% {
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.6);
  }
  100% {
    box-shadow: 0 0 30px rgba(255, 255, 255, 1);
  }
}

/* ✨ Slightly reduce content + image size for Amfori slide */
.home-slide-item.amfori-logo .slide1-desc.slide2-desc.enhanced-slide {
  transform: scale(0.95); /* just 5% smaller */
  transform-origin: center center;
  padding: 35px !important; /* reduce spacing slightly */
}

.home-slide-item.amfori-logo h3 {
  font-size: 28px !important; /* slightly smaller text */
}

.home-slide-item.amfori-logo h5 {
  font-size: 20px !important;
}

/* 🧩 Make logos gently smaller */
.home-slide-item.amfori-logo .image-logo-amfori img {
  max-width: 45% !important; /* was 120% → 95% for balance */
  transform: scale(0.95); /* soft reduction */
}

.home-slide-item.amfori-logo .image-logo-wrap img {
  max-width: 55% !important; /* was 120% → 95% for balance */
  transform: scale(0.95); /* soft reduction */
}

/* ✅ Force content box narrower and centered */
.home-slide-item .slide1-desc.slide2-desc.enhanced-slide {
  max-width: 550px; /* adjust as needed */
  width: 90%;
  margin: 0 auto;
  text-align: center;
  padding: 30px 20px;
  background-color: #00000095; /* keep your overlay background */
  border-radius: 15px;
}

/* 🧩 Ensure parent allows centering */
.home-slide-item {
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (max-width: 768px) {
  .home-slide-item.w-logo {
    background-size: cover !important;
    background-position: 38% center !important; /* 👈 move image slightly to the right */
  }
}

.content-bg .content-padd .director .director-name::after {
  -webkit-transform: translateZ(0);
}

/* put at the very end of your stylesheet */
.no-watermark .content-bg .content-padd .director .director-name::after,
.content-bg .content-padd .director:hover .director-name::after,
.content-bg .content-padd .director .director-name::after {
  display: none !important;         /* remove from layout/rendering */
  content: "" !important;           /* ensure pseudo-element content is empty */
  background-image: none !important;
  background: none !important;
  -webkit-filter: none !important;
  filter: none !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

.size-options {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 10px;
  justify-content: center;
}

.size-item {
  background: #ffffff10;
  padding: 6px;
  text-align: center;
  border-radius: 6px;
  width: auto;
}

.size-item .size {
  font-size: clamp(0.7rem, 1.2vw, 1rem); /* smaller scaling range */
  font-weight: 600;
}

.btn-size {
  white-space: nowrap;
  font-size: clamp(0.6rem, 1vw, 0.85rem); /* tighter scaling */
  padding: 3px 8px;
  display: inline-block;
}

/* Force smaller text when the screen width gets tight */
@media (max-width: 900px) {
  .size-item .size {
    font-size: 0.75rem;
  }

  .btn-size {
    font-size: 0.7rem;
    padding: 2px 6px;
  }
}

@media (max-width: 700px) {
  .size-item .size {
    font-size: 0.65rem;
  }

  .btn-size {
    font-size: 0.6rem;
    padding: 2px 5px;
  }
}

/*To make another categories for Semiconductor | Cleanroom Gloves - 31102025*/
.product-section {
  display: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  background: rgba(255, 0, 0, 0.1);
  padding: 20px;
  margin-top: -20px; /* neutralize top padding visually */
}

.product-section.active {
  display: block;
  opacity: 1;
}

/* Container to align title and link side by side */
.category-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid #0078d4;
  padding-bottom: 8px;
  margin-bottom: 1rem;
}

/* Keep title styling as before */
.category-header .category-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0;
}

/* Simplified, subtle fast link */
.category-header .fast-link {
  margin: 0;
}

.category-header .fast-link a {
  color: #0078d4;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  letter-spacing: 0.3px;
  transition: all 0.3s ease;
}

.category-header .fast-link a::after {
  content: "→";
  font-size: 0.9rem;
  transition: transform 0.3s ease;
}

.category-header .fast-link a:hover {
  color: #005fa3;
  text-decoration: underline;
}

.category-header .fast-link a:hover::after {
  transform: translateX(3px);
}

/* Responsive */
@media (max-width: 768px) {
  .category-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .category-header .fast-link a {
    font-size: 0.85rem;
  }
}

/* Fix top spacing consistency between switched categories */
.section {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.content-bg,
.content-padd,
.grid-container.full {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.product-section {
  display: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  background: #ffffff08;
  padding: 20px 0; /* vertical padding only for breathing space */
}

.product-section.active {
  display: block;
  opacity: 1;
}

/* Optional: remove space collapse when switching */
.section > .product-section:first-of-type {
  margin-top: 12px !important;
}

footer p.copyright {
  padding-bottom: 2px;
}

/* Visitor count styling */
footer p.visitor-count {
  display: block;                   /* full width for centering */
  width: 100%;                       /* take full width of footer */
  text-align: center;                /* center text inside */
  padding: 4px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  font-size: 10px;
  color: #eee;
}

/* Mobile: below 768px */
.content-padding.achievement-gallery {
    /* Margin scales between 20px and 50px depending on viewport width */
    margin-top: clamp(-20px, -5vw, -50px) !important;
}


/* iPad Mini portrait: 768px to 991px */
@media (min-width: 768px) and (max-width: 1024px) {
    .content-padding.achievement-gallery {
        margin-top: -25px !important;
    }
}

/* Desktop and larger tablets: 992px and above */
@media (min-width: 1025px) {
    .content-padding.achievement-gallery {
        margin-top: -50px !important;
    }
}


	.award-title {
		background: linear-gradient(90deg, #18307a, #2f6fd8, #4f94e6) !important;
		color:#fff;
		padding:12px 20px;
		border-radius:10px;
		font-weight:700;
		font-size: clamp(20px, 3vw, 34px);
		display:block;
		text-align:left;
	}
	
	.award-sub {
		padding:12px 20px;
		border-radius:10px;
		font-weight:600;
		font-size: clamp(18px, 2.2vw, 20px);
		display:block;
		text-align:left;
		margin-top: 10px;
	}
	
	.award-sub:nth-of-type(2) {
		font-size: clamp(15px, 2.2vw, 17px);  /* smaller */
		opacity: 0.8;      /* optional softer look */
		font-weight:400;
		margin-top: -55px;  /* optional tighter spacing */
		margin-bottom: -20px;  /* optional tighter spacing */
	}
	
    .achievement-gallery .ach-thumb-frame {
        width: 100%;
        padding-top: 60%;
        position: relative;
        overflow: hidden;
        border-radius: 15px;
        box-shadow: 0 10px 25px rgba(0,0,0,0.15);
        transition: transform .3s ease;
    }

    .achievement-gallery .ach-thumb-frame:hover {
        transform: translateY(-6px);
    }

    .achievement-gallery .ach-thumb {
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background-size: cover;
        background-position: center;
        border-radius: 15px;
        filter: brightness(0.9);
        transition: filter .3s ease;
    }

    .achievement-gallery .ach-thumb-frame:hover .ach-thumb {
        filter: brightness(1.1);
    }

    .achievement-gallery .ach-title {
        font-size: 1.2rem;
        margin-top: .7rem;
        text-align: center;
        font-weight: 600;
        color: #222;
    }

    /* Fullscreen Overlay */
    .img-overlay {
        position: fixed;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background: rgba(0,0,0,0.85);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999;
        padding: 20px;
    }

    .img-overlay.hidden { display: none; }

    .img-overlay img {
        max-width: 90%;
        max-height: 90%;
        border-radius: 20px;
        box-shadow: 0 0 40px rgba(255,255,255,0.2);
    }

    .close-img {
        position: absolute;
        top: 20px;
        right: 30px;
        font-size: 3rem;
        color: #fff;
        cursor: pointer;
        user-select: none;
    }
	
	
	/**/
	
	.achievement-3col {
		display: grid;
		grid-template-columns: 1.4fr 1.4fr 1.4fr;
		gap: 25px;
		align-items: start;
	}

	/* Columns */
	.ach-col {
		display: flex;
		flex-direction: column;
		gap: 25px;
	}

	/* Big center image */
	.big-img {
		/*aspect-ratio: 4.35 / 4; /* Adjust this ratio until it fits nicely */
	}
	
	.trophy-thumb .ach-thumb {
		background-size: contain !important;
		background-repeat: no-repeat;
		background-position: center;

		/* Match trophy photo background exactly */
		background-image:
			linear-gradient(
				to bottom,
				#8E8E92 0%,   /* top color of trophy background */
				#7A7A7D 70%,  /* mid blend */
				#7A7A7D 100%  /* bottom stays smooth grey */
			),
			var(--img);

		background-color: #8E8E92; /* fallback */
		border-radius: 16px;
		overflow: hidden;
	}
	
	.center-col {
		display: flex;               /* makes it a flex container */
		justify-content: flex-end;     /* horizontal center */
		
		height: 100%;                /* full height of the parent */
	}

	.big-img {
		display: block;              /* natural size */
	}

	/* iPad Mini (768px width) and below */
	@media (max-width: 900px) {
		.achievement-3col {
			grid-template-columns: 1fr;
		}

		.center-col {
			grid-column: span 1;
		}
	}

.home-slide-item.w-logo {
    background-image: linear-gradient(to top, #ffffff00, #ffffff00),
        url('../images/MSMA 2025 Front Page.jpg?v=20251223');
    background-position: center;
    background-size: cover;
}

/* =====================
   Mobile Portrait
===================== */
@media (max-width: 480px) and (orientation: portrait) {
    .home-slide-item.w-logo {
        background-image: linear-gradient(to top, #ffffff00, #ffffff00),
            url('../images/MSMA 2025 Front Page-mobile-potrait.jpg?v=20251223');
    }
}

/* =====================
   Mobile Landscape
===================== */
@media (max-height: 480px) and (orientation: landscape) {
    .home-slide-item.w-logo {
        background-image: linear-gradient(to top, #ffffff00, #ffffff00),
            url('../images/MSMA 2025 Front Page-mobile-landscape.jpg?v=20251223');
    }
}

/* =====================
   Tablet Portrait
===================== */
@media (min-width: 481px) and (max-width: 1024px) and (orientation: portrait) {
    .home-slide-item.w-logo {
        background-image: linear-gradient(to top, #ffffff00, #ffffff00),
            url('../images/MSMA 2025 Front Page-tablet-potrait.jpg?v=20251223');
    }
}

/* =====================
   Tablet Landscape
===================== */
@media (min-width: 768px) and (max-width: 1368px) and (orientation: landscape) and (min-height: 600px) {
    .home-slide-item.w-logo {
        background-image: linear-gradient(to top, #ffffff00, #ffffff00),
            url('../images/MSMA 2025 Front Page-tablet-landscape.jpg?v=20251223');
    }
}


/* =====================
   For Christmas Front Banner
===================== */
/* =====================
   Snow Animation
===================== */
.snow {
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(4px 4px at 20px 30px, #fff, transparent),
        radial-gradient(6px 6px at 40px 70px, #fff, transparent),
        radial-gradient(3px 3px at 90px 40px, #fff, transparent),
        radial-gradient(4px 4px at 130px 80px, #fff, transparent),
        radial-gradient(6px 6px at 160px 120px, #fff, transparent);
    background-repeat: repeat;
    background-size: 200px 200px;
    animation: snowFall 15s linear infinite;
    z-index: 3;
    opacity: 0.8;
}

/* Snow falling animation */
@keyframes snowFall {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 0 600px;
    }
}

/* Ensure content is above background */
.slide1-desc {
    position: relative;
    z-index: 5;
}

/* =====================
   Winter Christmas Card
===================== */
.winter-card {
    background: linear-gradient(
        135deg,
        rgba(10, 25, 50, 0.85),
        rgba(0, 0, 0, 0.9)
    );
    backdrop-filter: blur(6px);
    border-radius: 18px;
    padding: 30px 40px;
    border: 1px solid rgba(160, 200, 255, 0.25);
    box-shadow:
        0 0 35px rgba(120, 180, 255, 0.35),
        inset 0 0 20px rgba(255, 255, 255, 0.05);
    position: relative;
}

.winter-logo {
    display: flex;
    justify-content: center;
}

.winter-logo .logo-inner {
    padding: 18px;
    border-radius: 10%;
    background: radial-gradient(
        circle,
        rgba(180, 220, 255, 0.25),
        rgba(30, 80, 160, 0.45)
    );
    box-shadow:
        0 0 25px rgba(180, 220, 255, 0.6),
        0 0 45px rgba(120, 180, 255, 0.55);
    animation: iceGlow 3.5s ease-in-out infinite;
}

.winter-logo img {
    max-width: 240px;
    filter: none;
}

.slide1-desc.winter-card {
    background: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    border: none !important;
}

.image-logo.winter-logo {
    display: flex !important;
    justify-content: center !important; /* center horizontally */
    align-items: center !important;     /* center vertically */
    width: 100% !important;             /* full width of slide */
    height: auto !important;            /* allow height to grow with image */
}

.image-logo.winter-logo img.logo-inner {
    width: 450px !important;       /* desired width */
    max-width: 90% !important;     /* responsive for smaller screens */
    height: auto !important;
    display: block !important;
}

/* =====================
   For Christmas Front Banner - End
===================== */

.award-sub {
    font-size: clamp(12px, 2.5vw, 18px);
    white-space: nowrap; /* Prevents the text from breaking into a new line */
    overflow: hidden;
    text-overflow: ellipsis; /* Optional: shows "..." if too long */
}

/* =====================
   New Year Front Banner (Responsive)
===================== */

/* Outer card – calm blue glass */
.newyear-card {
    background: linear-gradient(
        135deg,
        rgba(10, 20, 45, 0.85),
        rgba(20, 45, 95, 0.9)
    );
    border-radius: 8px;
	padding: 2rem 2rem !important;
    border: 1px solid rgba(140, 180, 240, 0.28);
    box-shadow:
        0 1rem 2.8rem rgba(0, 0, 0, 0.45),
        inset 0 0 1.25rem rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(6px);
}

/* Logo alignment */
.newyear-logo {
    display: block !important;
    text-align: left !important;
    width: auto !important;
}

/* Inner logo container */
.newyear-logo .logo-inner {
    padding: 0.2rem !important;
    border-radius: 2rem !important;
    background: linear-gradient(
        135deg,
        rgba(135, 206, 250, 0.45),
        rgba(70, 130, 180, 0.5)
    );
    box-shadow:
        0 0 0.75rem rgba(135, 206, 250, 0.15),
        inset 0 0 0.625rem rgba(255, 255, 255, 0.03);
}

/* Logo image – responsive */
.image-logo.newyear-logo img.logo-inner {
    display: block !important;
    width: 30vw !important;       /* relative width */
    max-width: 380px !important;  /* won't exceed original size */
    height: auto !important;
}

/* Parent container */
.home-slide-item.w-logo {
    position: relative !important;
    display: block !important;
}

/* Position the card */
.slide1-desc.newyear-card {
    position: absolute !important;
    top: 10vh !important;
    left: 5vw !important;

    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;

    width: max-content !important;
    height: fit-content !important;     /* 🔥 KEY FIX */
    min-height: unset !important;       /* 🔥 CRITICAL */
    max-height: none !important;
}

/* Safety overrides – FULLY REMOVE GLASS EFFECT */
.slide1-desc.newyear-card {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* =====================
   Responsive Media Queries
===================== */

/* Tablets */
@media (max-width: 1024px) {
    .slide1-desc.newyear-card {
        top: 8vh !important;
        left: 5vw !important;
    }
    .image-logo.newyear-logo img.logo-inner {
        width: 40vw !important;
        max-width: 300px !important;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .slide1-desc.newyear-card {
        top: 5vh !important;
        left: 3vw !important;
    }
    .image-logo.newyear-logo img.logo-inner {
        width: 60vw !important;
        max-width: 220px !important;
    }
}

/* Extra small phones */
@media (max-width: 480px) {
    .slide1-desc.newyear-card {
        top: 3vh !important;
        left: 2vw !important;
    }
    .image-logo.newyear-logo img.logo-inner {
        width: 80vw !important;
        max-width: 150px !important;
    }
}