@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap');

.apan_energy_card .face.face1 {
    background: #000 !important;
}
.apan_energy_card .face.face1 .content{
    opacity: 1 !important;
}

.apan_energy_card:hover .face.face1{
    background: #000 !important;
    transform: translateY(0);
}

.ddl_card .face.face1 {
    background: #FFF !important;
    svg {
        width: 50%;
    }
}

.ddl_card .face.face1 .content{
    opacity: 1 !important;
}

.ddl_card:hover .face.face1{
    background: #FFF !important;
    transform: translateY(0);
}

.ddl_card .face.face1 .content img{
    width: 15vw !important;
    @media screen and (max-width: 782px) {
        width: 100% !important;
        
    }
    @media only screen 
    and (min-device-width: 768px) 
    and (max-device-width: 1024px) 
    and (-webkit-min-device-pixel-ratio: 1) {
        width: 30vw !important;
    }

}


.issi_card .face.face1 {
    background: #FFF !important;
   
}

.issi_card .face.face1 .content{
    opacity: 1 !important;
}

.issi_card:hover .face.face1{
    background: #FFF !important;
    transform: translateY(0);
}

.nts_amega_card .face.face1 {
    background: #000 !important;
}
.nts_amega_card .face.face1 .content{
    opacity: 1 !important;
}

.cb_group_card .face.face1 {
    background: #FFF !important;
}
.cb_group_card .face.face1 .content{
    opacity: 1 !important;
}

.neurospine_card .face.face1 {
    background: #f0f1f2 !important;
    img {
        height: 150px;
    }
}
.neurospine_card .face.face1 .content{
    opacity: 1 !important;
}

.movements_card .face.face1 {
    background: #f2e3c4 !important;
    img {
        height: 150px;
    }
}
.movements_card .face.face1 .content{
    opacity: 1 !important;
}


.enet_card .face.face1 {
    background: #000 !important;
}
.enet_card .face.face1 .content{
    opacity: 1 !important;
}

.cv_shipping_card .face.face1 {
    background: #fff !important;
}
.cv_shipping_card .face.face1 .content{
    opacity: 1 !important;
}

.spl_card .face.face1 {
    background: #fff !important;
}
.spl_card .face.face1 .content{
    opacity: 1 !important;
}

.power_producers_card .face.face1 {
    background: #fff !important;
}
.power_producers_card .face.face1 .content{
    opacity: 1 !important;
}

.sponsor-container{
/*    width: 1000px;*/
    position: relative;
    display: flex;
    justify-content: center;
}

@media screen and (max-width: 782px) {
    .sponsor-container {
        padding: 0px 10px;
    }
}    


.sponsor-container .sponsor-card{
    position: relative;
    cursor: pointer;
    width: 30vw;
    @media screen and (max-width: 782px) {
        width: 100%;
        
    }
    @media only screen 
        and (min-device-width: 768px) 
        and (max-device-width: 1024px) 
        and (-webkit-min-device-pixel-ratio: 1) {
            width: 75vw;
    }

}

.sponsor-container .sponsor-card .face{
    /*width: 300px;*/
    /*height: 200px;*/
    transition: 0.5s;
}

.sponsor-container .sponsor-card .face.face1{
    position: relative;
    background: #333;
    display: flex;
    height: 250px;
    width: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1;
    transform: translateY(100px);
    border-radius: 10px 10px 0 0;
    @media screen and (max-width: 782px) {
        height: auto;
        
    }
}

.sponsor-container .sponsor-card:hover .face.face1{
    background: #ff0057;
    transform: translateY(0);
}

.sponsor-container .sponsor-card .face.face1 .content{
    opacity: 0.2;
    transition: 0.5s;
    padding: 0px 0px;
}

.sponsor-container .sponsor-card:hover .face.face1 .content{
    opacity: 1;
}

.sponsor-container .sponsor-card .face.face1 .content img{
    /*max-width: 100px;*/
    width:100%;
    min-height: 150px;
}


.sponsor-container .sponsor-card .face.face1 .content h3{
    margin: 10px 0 0;
    padding: 0;
    color: #fff;
    text-align: center;
    font-size: 1.5em;
}

.sponsor-container .sponsor-card .face.face2{
    position: relative;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    box-sizing: border-box;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
    transform: translateY(-100px);
    border-radius: 10px 10px 0 0;
    p {
        color: #494949
    }

}

.sponsor-container .sponsor-card:hover .face.face2{
    transform: translateY(0);
        border-radius: 0 0 0 0;

}

.sponsor-container .sponsor-card .face.face2 .content{
    padding: 0px 0px !important;
}

.sponsor-container .sponsor-card .face.face2 .content p{
    margin: 0;
    padding: 0;    
}

.sponsor-container .sponsor-card .face.face2 .content a{
    margin: 15px 0 0;
    display:  inline-block;
    text-decoration: none;
    font-weight: 900;
    color: #333;
    padding: 5px;
    border: 1px solid #333;
}

.sponsor-container .sponsor-card .face.face2 .content a:hover{
    background: #333;
    color: #fff;
}

.other_sponsors_container {
    display: flex;
    flex-direction: row;
    align-content: stretch;
    flex-wrap: wrap;
    align-content: space-between;
    justify-content: space-evenly;
    align-items: center;    
}
.other_sponsor {
    flex: 1 1 auto;
    margin: 0 2px;
}

.sponsor_type {
    font-family: 'eb garamond';
    font-weight: 600;
    text-transform: uppercase;
    align-self: end;
    padding: 1px 2px;
    border-radius: 0 10px 0 0;


}

.platinum {
/* Background Gradient for Triadic Colors */

    background-color: #B4A0BF;
    /* For WebKit (Safari, Chrome, etc) */
    background: #B4A0BF -webkit-gradient(linear, left top, left bottom, from(#E2E5E4), to(#B4A0BF)) no-repeat;
    /* Mozilla,Firefox/Gecko */
    background: #B4A0BF -moz-linear-gradient(top, #E2E5E4, #B4A0BF) no-repeat;
    /* IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#E2E5E4, endColorstr=#B4A0BF) no-repeat;
    /* IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#E2E5E4, endColorstr=#E2E5E4)" no-repeat;    
}

.gold {
/* Background Gradient for Analagous Colors */
    background-color: #D46037;
    /* For WebKit (Safari, Chrome, etc) */
    background: #D46037 -webkit-gradient(linear, left top, left bottom, from(#D4C937), to(#D46037)) no-repeat;
    /* Mozilla,Firefox/Gecko */
    background: #D46037 -moz-linear-gradient(top, #D4C937, #D46037) no-repeat;
    /* IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#D4C937, endColorstr=#D46037) no-repeat;
    /* IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#D4C937, endColorstr=#D4C937)" no-repeat;
}

.bronze {
    .face2 p {
        font-size: 0.75em;
        font-weight: 500;
    }
    width: 75%;
}

.sponsor_type_platinum {
    font-family: 'eb garamond';
    font-size: 0.8em;
    font-weight: 600;
    align-self: end;
    .content>svg {
        width: 125px;
        height: 100px;
    }
}

.sponsor_type_gold {
    font-family: 'eb garamond';
    font-size: 0.8em;
    font-weight: 500;
    align-self: end;

}

.sponsor_type_bronze {
    font-family: 'eb garamond';
    font-size: 0.8em;
    font-weight: 500;
    align-self: end;
    width: 75%;

    .content>svg {
        width: 125px;
        height: 100px;
    }

    .content .social-icons .social-icon {
        width: 20px;
        height: 20px;
        font-size: 1em;
    }

    .face.face2 {
        transform: translateY(0px) !important;
    }

    p {
        font-size: 0.9em;
        font-weight: 600;
    }

}

.sponsor_type_other {
    font-family: 'eb garamond';
    font-size: 0.7em;
    font-weight: 500;
    align-self: end;


    .content>svg {
        width: 100%;
    
    }

    .content .social-icons .social-icon {
        width: 20px;
        height: 20px;
        font-size: 1em;
    }

    .face.face2 {
        transform: translateY(0px) !important;
        padding: 5px !important;
        height: 90px;
    }

    p {
        font-size: 0.9em;
        font-weight: 600;

    }

}

.social-icons {
    display: flex;
    width: 100%;
    justify-content: space-evenly;
    a {
        color: var(--icon-color);
    }
}

.social-icon {
    width: 24px;
    height: 24px;
    font-size: 1.2em;
    padding: 0px;
    
}

.sponsor_type_platinum {
/* Background Gradient for Triadic Colors */

    background-color: #B4A0BF;
    /* For WebKit (Safari, Chrome, etc) */
    background: #B4A0BF -webkit-gradient(linear, left top, left bottom, from(#E2E5E4), to(#B4A0BF)) no-repeat;
    /* Mozilla,Firefox/Gecko */
    background: #B4A0BF -moz-linear-gradient(top, #E2E5E4, #B4A0BF) no-repeat;
    /* IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#E2E5E4, endColorstr=#B4A0BF) no-repeat;
    /* IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#E2E5E4, endColorstr=#E2E5E4)" no-repeat;    
}

.sponsor_type_gold {
/* Background Gradient for Analagous Colors */

    background-color: #D46037;
    /* For WebKit (Safari, Chrome, etc) */
    background: #D46037 -webkit-gradient(linear, left top, left bottom, from(#D4C937), to(#D46037)) no-repeat;
    /* Mozilla,Firefox/Gecko */
    background: #D46037 -moz-linear-gradient(top, #D4C937, #D46037) no-repeat;
    /* IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#D4C937, endColorstr=#D46037) no-repeat;
    /* IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#D4C937, endColorstr=#D4C937)" no-repeat;
}


.frosted-container {
  backdrop-filter: blur(8px) saturate(180%);
  -webkit-backdrop-filter: blur(8px) saturate(180%);
  background-color: rgba(17, 25, 40, 0.55);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.125);  
  padding: 10px;  
  filter: drop-shadow(0 30px 10px rgba(0,0,0,0.125));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content:center;
  text-align: center;
  width: 100%;
  
}

.frosted-wrapper {
  width: 100%;
  height: 100%;
h1{
  font-family: 'montserrat', sans-serif;
  color: rgba(255,255,255,0.98);
  text-transform: uppercase;
  font-size: 2.4rem;
}

p {
  color: #fff;
  font-family: 'Lato', sans-serif;
  text-align: left;
  font-size: 0.8rem;
  line-height: 150%;
  letter-spacing: 2px;
  text-transform: uppercase;
}
  
}


.frosted-banner-image {
  background-image: url(http://192.168.2.175:85/wp-content/uploads/2025/05/apan_energy_updated.png);
  background-position: center;
  background-color: black;
  background-size: contain;
  background-repeat: no-repeat;
  margin-bottom: 10px;
  height: 125px;
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255, 0.255)
}

.frosted-banner {
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  margin-bottom: 10px;
  height: 125px;
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255, 0.255)
}


.frosted-outline {
  background: transparent;
  color: rgba(0, 212, 255, 0.9);
  border: 1px solid rgba(0, 212, 255, 0.6);
  transition: all .3s ease;
  
}

.frosted-outline:hover{
  transform: scale(1.125);
  color: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.9);
  transition: all .3s ease;  
}

.frosted-fill {
  background: rgba(0, 212, 255, 0.9);
  color: rgba(255,255,255,0.95);
  filter: drop-shadow(0);
  font-weight: bold;
  transition: all .3s ease; 
}

.frosted-fill:hover{
  transform: scale(1.125);  
  border-color: rgba(255, 255, 255, 0.9);
  filter: drop-shadow(0 10px 5px rgba(0,0,0,0.125));
  transition: all .3s ease;    
}

   .frosted-icon-box{
      color: #6cc04a;
      /*font-size: 24px;*/
      height: 32px;
      width: 32px;
      padding: 5px;
      top: 75px;
      left: 30%;
      display: inline-block;
      border: 2px solid #1b2ac3;
      margin: 5px;
      text-align: center;
      cursor: pointer;
      -webkit-transition: all ease 0.5s;
	      -moz-transition: all ease 0.5s;
	         transition: all ease 0.5s;
   }

   .frosted-icon-box:hover {
    box-shadow: inset 0 50px 0 0 #6cc04a;
    color: #1b2ac3;
   }

/* --- SAFARI COMPATIBILITY ENHANCEMENTS --- */

/* Flexbox and alignment prefixes for Safari */
.sponsor-container,
.other_sponsors_container,
.frosted-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.sponsor-container,
.other_sponsors_container {
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.sponsor-container .sponsor-card .face,
.sponsor-container .sponsor-card .face.face1,
.sponsor-container .sponsor-card .face.face2 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

/* Border radius for Safari */
.sponsor-container .sponsor-card .face.face1,
.sponsor-container .sponsor-card .face.face2,
.frosted-banner-image,
.frosted-banner {
    -webkit-border-radius: 12px;
    border-radius: 12px;
}

/* Gradient fixes for Safari */
.platinum,
.sponsor_type_platinum {
    background: #B4A0BF;
    background: -webkit-linear-gradient(top, #E2E5E4, #B4A0BF) no-repeat;
    background: linear-gradient(to bottom, #E2E5E4, #B4A0BF) no-repeat;
}

.gold,
.sponsor_type_gold {
    background: #D46037;
    background: -webkit-linear-gradient(top, #D4C937, #D46037) no-repeat;
    background: linear-gradient(to bottom, #D4C937, #D46037) no-repeat;
}

/* Backdrop filter for Safari */
.frosted-container {
    -webkit-backdrop-filter: blur(8px) saturate(180%);
    backdrop-filter: blur(8px) saturate(180%);
}

/* Flex-basis for Safari */
.other_sponsor {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 0;
    flex: 1 1 0;
}

/* Object-fit for Safari images */
.sponsor-container .sponsor-card .face.face1 .content img {
    min-height: 150px;
    height: auto;
    width: 100%;
    object-fit: contain;
    -webkit-object-fit: contain;
}

/* --- END SAFARI COMPATIBILITY ENHANCEMENTS --- */