/* --- RESPONSIVE MEDIA QUERIES --- */
.homeicon{
}
.homeicon img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: fill;       /* Stretches the image pixels edge-to-edge across wide PC screens */
}
/* Base CSS Flex and Grid Structural Layout for GIGW 3.0 */
.main-upper-container {
    width: 100%;
    box-sizing: border-box;
    padding: 15px;
}
.content-layout-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 30px;
}
.initiatives-column {
    flex: 0 0 78%;
}
.director-column {
    flex: 0 0 20%;
}
.strip-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
    padding: 15px;
}
.grid-4-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 20px;
    padding: 20px 0;
}
.social-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 15px;
    width: 70%;
    margin: 0 auto;
}
.social-card {
    text-align: center;
    padding: 10px;
}
/* Text Caption Overlay Guard */
.slide-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.50); /* Keeps text color contrast compliant at 4.5:1 */
    color: #ffffff;
    padding: 30px calc(5vw + 10px); /* Aligns text with main page content grid layout */
    z-index: 3;
}

.slide-caption h2 {
    font-size: 2rem;
    color: #ffff00; /* High legibility target */
    margin-bottom: 8px;
}

.slide-caption p {
    font-size: 1.2rem;
    color: #f4f4f4;
}
.carousel-track {
    position: relative;
    width: 100%;
    height: 500px; /* Exact height match for your 1900x500 production image canvas asset */
}
/* Small Laptops and Large Tablets */
@media (max-width: 1755px) {
	.fpgraphhyper div a {
		font-size: 1em;
	}
}
@media (max-width: 1650px) {
	.accessibility-bar {
    	display: grid;
	    grid-template-columns: 50% 50%;
	}
	.nav-links {
	   margin: 15px 0px 15px 10%;
	}
}
@media (max-width: 1550px) {
	.nav-links {
	   margin: 15px 0px 15px 15px;
	}
	.fpgraphhyper {
	    gap: 2px;
	}
	.fpgraphhyper div a {
	    padding: 5px 5px 5px 5px;
	}		
}
@media (max-width: 1450px) {
	.nav-links li {
    margin: 0px 20px 0px 20px;
	}
	.latestcard {
		padding: 25px 10px 0px 10px;
	}
	.footerupper-grid {    
	    grid-template-columns: 50% 16% 17% 28%;
	    gap: 20px;
	}
	.socialmediaul{
		padding: 0px;
	}	
}
@media (max-width: 1350px) {
	.nav-links li {
    margin: 0px 20px 0px 20px;
	}
	.latestcard {
		padding: 25px 10px 0px 10px;
	}
	.fpgraphhyper {
        gap: 11px;
        flex-wrap: wrap;
    }
	.leftscrollsp {
	    padding: 25px 0px 15px 0px;
	}	
}
@media (max-width: 1200px) {
    .carousel-track { height: 400px; }
    .slide img { object-fit: cover; } 
	.accessibility-bar {
	    grid-template-columns: 40% 60%;
        font-size: smaller;
	}
	.nav-links {
	   margin: 15px 0px 15px 0px;
	}
	.nav-links li {
	    margin: 0px 10px 0px 10px;
	}
	.leftscrollsp {
	    padding: 25px 0px 15px 0px;
	}
	.hcghomediv {
	    grid-template-columns: 4% 90% 0%;
	}
	.hcgmoocmarquee-track img {
		transform: scale(.9);
	}
	.footerupper-grid {    
	    grid-template-columns: 52% 14% 14% 28%;
	    gap: 20px;
	}
	.cecglancenumber{
		font-size: 24px;
	}	
}
@media (max-width: 1100px) {		
	.footer-links-right{
		justify-items: start;
	}
	.footerlogo-area{
		grid-template-columns: 50% 50%;
	}
	.socialmediaul {display:grid; grid-template-columns: repeat(3, 1fr);}	
}	

@media (max-width: 995px) {
	    .accessibility-bar {
		grid-template-columns: 40% 60%;
        font-size: larger;
    }

 }	
/* Medium Devices (Laptops / Small Screens) */
@media (max-width: 992px) {
    .grid-layout { grid-template-columns: repeat(3, 1fr); } /* Drop to 2 Columns */
	.latestgrid-layout { grid-template-columns: auto; } /* Vertical stack on mobile */    
    .connectgrid-layout { grid-template-columns: repeat(2, 1fr); } /* Vertical stack on mobile */
	.accessibility-bar { grid-template-columns: repeat(2, 1fr); } /* Vertical stack on mobile */
	
	.footerupper-grid { grid-template-columns: 52% 15% 15% 17%; gap: 5px; } /* Vertical stack on mobile */

	.footer-links{
	    margin-left: 10px;
	}
	.carousel-track {    
    width: 100%;
    height: 400px;
	}	
	.footer-links ul {    
	    margin: 0px 0px 0px -30px;
	}
	.footer-links h3{    
	    margin: 10px 0px 0px 0px;
	}
 	#innermenugov { grid-template-columns: repeat(2, 1fr); } /* Vertical stack on mobile 	.logo-area { flex-direction: inherit; display:block;}*/

	.logo-area img { width:20%; height:20%}
	.cecshorttitle { font-size:2em;}
	.hrncontent{ grid-template-columns: repeat(2, 1fr); margin:0px; } /* Vertical stack on mobile */
	.hrncontent > div:first-child { grid-column: span 2; width: 100%;}	
	.aboutshowreelvd{ width:100%; padding:0px;}
	.mapimg img{width:100%;}
	.objectivemoocs { grid-template-columns: 1fr; padding: 0px; margin: 0px; width:100%; } /* Vertical stack on mobile */
 	 .proposalmoocs { grid-template-columns: 1fr; padding: 0px; margin: 0px; width:100%; } /* Vertical stack on mobile */
	.goindhd {display:block;}
	.containersearch{
	   float: none;
	   margin: 0px 0px 0px 0px;
	   }
   .mediastsection{
		border-bottom:2px ridge #490b1a2e;
		padding-bottom: 10px;
		text-align:justify;
		width: 50%;
	    float: left;
	}
	.hcghomediv {
        grid-template-columns: 20% 60% 10%;
        justify-items:center;
    }
	.mooccsectionview {
    width: 100%;
    text-align:center;
	}
	.mediastsection {
		border: none;
	}
	.showreeltitle{
		border-right: 2px ridge #490b1a2e;
	}
	.fpgraphhyper{
		border-right: 2px ridge #490b1a2e;
	}
	.homestripcontainer{
		border-right: 2px ridge #490b1a2e;
	}
	.mediasectionimg {
    	float: left;
	    margin: 10px 15px 0px 15px;
	}
	.txtupcoming{
		margin: -12px 15px 0px 15px;
	}
	.hcgmoocmarquee-track {
    transform: scale(.9);
	}    
    .slide-caption h2 { font-size: 1.6rem; }
    .slide-caption p { font-size: 1.05rem; }
	.moocsslide-caption h2 { font-size: 1.6rem; }
    .moocsslide-caption p { font-size: 1.05rem; }
	/* Separates overlay caption to scroll freely below mobile image */
    .slide-caption {
        position: relative;
        background: #111111;
        padding: 15px;
    }
	.moocsslide-caption {font-size:1em;}
	 .moocsslide-caption h3,  .moocsslide-caption .caption-title {font-size: 1.6rem;}
	 .moocsslide-caption h2 {
			font-size: 1.0rem; !important;
			margin-bottom: 8px;
			text-align:center;
		}		
		.moocsslide-caption p {
			font-size: 1rem;
			color: #f4f4f4;
			text-align:center;
			line-height: 32px;
		}
		.moocsslide-caption .innertxtcenter{
		width:100%;
		text-align:center;
		}		
		.pgraphhyper div a{		
		text-align: center;
		color: #FFFFFF;
		background-color: var(--primary-color);
		text-decoration: none;
		font-size: 1em;
		font-weight: 500;
		}
		.enrolreg{ display:contents; text-align:left;}
		.enrolreg div a{padding: 10px 10px 10px 10px; display: block; margin-left:0px;}
		   .gc-leader-card {
        width: 80%;
      }
	   .initiatives-column, .director-column, .social-media-grid {
        flex: 0 0 100%;
        width: 100%;
    }
    .strip-card {
        flex-direction: column;
    }
	.searchinput{
		font-size: larger;
	}
    .cecglancenumber {
        font-size: 20px;
    }
	.objectivemoocsdiv img {
    padding: 0px 0px 0px 0px;
    width: 60%;
	}	
	.proposalmoocsdiv img {
    padding: 10px 0px 0px 0px;
    width: 60%;
	}

}
@media (max-width: 950px) {
    .footer-links-right {
        justify-items: start;
        display: flex;
        flex-wrap: wrap;
    }
	.pgraphhyper {
        margin-top: 0px;
    }
}
@media (max-width: 870px) {
	.main-nav{
		margin-left: -30px;
	}
}
@media (max-width: 860px) {
	.hcgmoocmarquee-track {
	    transform: scale(.8);
		margin-top: -25px;
	}
    .hcghomediv {
		margin-bottom: -20px;
	}
	.searchinput{
		font-size: small;
	}
	.accessibility-bar {
        grid-template-columns: 40% 60%;
    }
	#dsel-a11y-trigger {
		font-size: 10px;
	}
	.containersearch button{
		font-size: 14px;
	}
	.main-nav{
		margin-left: -75px;
	}
}
@media (max-width: 820px) {
    .goindhd {     
        font-size: medium;
    }
    .accessibility-bar {
        grid-template-columns: 35% 65%;
	}		
}
@media (max-width: 784px) {
    .nav-links li {
        margin: 0px 9px 0px 9px;
    }
	
}
/* Mobile Devices (Smartphones) */
@media (max-width: 768px) {
    .header-flex { flex-direction: column; align-items: flex-start; gap: 15px; position: relative; }
	.imgdirmessage {float:none; margin: 0px 0px 0px -62px;} 
    /* Toggle Hamburger UI Elements */
    .menu-toggle {
        display: block;
        background: transparent;
        border: none;
        cursor: pointer;
        position: absolute;
        right: -20px;
        top: 50px;
        padding: 10px;
    }
	.main-nav{
		margin-left: 0px;
	}
	.cectitle{	
	}
	.goindhd {display:block;}
    .hamburger {
        display: block; width: 25px; height: 3px; background: var(--text-color); position: relative;
    }
    .hamburger::before, .hamburger::after {
        content: ''; position: absolute; width: 25px; height: 3px; background: var(--text-color); left: 0;
    }
    .hamburger::before { top: -8px; }
    .hamburger::after { top: 8px; }

    /* Hide menu off-screen when inactive */
    .nav-links {
        display: none;
        flex-direction: column;
        width: 100%;
        background: var(--light-bg);
		line-height: 10px;
        width: 350px;
        padding: 20px 0px 10px 20px;
    }
	.submenu{
	border-top:none; !important		
	}
    .nav-links.active { display: flex; gap: 30px; width:100%; justify-self: end; } /* JavaScript toggles this class */
	.grid-template-columns: repeat(2, 1fr);    
    .numbergrid-layout { grid-template-columns: repeat(2, 1fr); } /* Vertical stack on mobile */
    .connectgrid-layout { grid-template-columns: 1fr; } /* Vertical stack on mobile */
	
	.footerupper-grid {justify-items: center;} /* Vertical stack on mobile */
	.footerlogo-area { grid-template-columns: 1fr; } /* Vertical stack on mobile */
	.footer-meta { grid-template-columns: 1fr; } /* Vertical stack on mobile */
	 #innermenugov { grid-template-columns: 1fr; } /* Vertical stack on mobile */
	 .objectivemoocs { grid-template-columns: 1fr; padding: 0px; margin: 0px; width:100%; } /* Vertical stack on mobile */
 	 .proposalmoocs { grid-template-columns: 1fr; padding: 0px; margin: 0px; width:100%; } /* Vertical stack on mobile */
    .footer-flex { flex-direction: column; text-align: center; }
	.logo-area { flex-direction: inherit; display:flex;}
	.logo-area img { width:20%; height:20%}
	.cecshorttitle { font-size:2em; border:none; margin: 0px 0px 0px 0px;}
    .hrncontent { grid-template-columns: 1fr; margin:0px; } /* Vertical stack on mobile */

	.aboutshowreelvd{ width:100%; padding:0px;}
	.mapimg img{width:100%;}
	.containersearch{float: none; margin: 0px 0px 0px 0px;}
	.latestgrid-layout { grid-template-columns: auto; } /* Vertical stack on mobile */
	.hcghomediv {
        grid-template-columns: 25% 60% 10%;
	}
	.slider-wrapper { 
        width: 100%; 
        left: 0; 
        right: 0; 
        margin: 0; 
        overflow: visible;
    }    
	.carousel-track {
        height: 350px;
        display: flex;
        flex-direction: column;
    }
    .slide { position: relative; display: none; }
    .slide.active { display: block; }
    .slide img { height: 220px; object-fit: cover; } /* Fixed viewport layout crops on narrow phone displays */
   	.moocsslide-caption h2 { font-size: 1rem; }
    .moocsslide-caption p { font-size: 12px; }

    /* Separates overlay caption to scroll freely below mobile image */
    .slide-caption {
        position: relative;
        background: #111111;
        padding: 15px;
    }	
	 .moocsslide-caption h3,  .moocsslide-caption .caption-title {font-size: 1.6rem;}
	 .moocsslide-caption h2 {
			font-size: 1.0rem; !important;
			margin-bottom: 8px;
			text-align:center;
		}						
		.enrolreg{ display:contents; text-align:left;}
		.enrolreg div a{padding: 10px 10px 10px 10px; display: block; margin-left:0px;}
    .carousel-controls { top: auto; right: 15px; }
  /* Force the table to behave like a standard block element */
  table, thead, tbody, th, td, tr {
    display: grid;
  }
  #mediath th{
  display:none;
  }

  /* Hide the desktop header completely */
  thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  /* Add space between each row (turned into cards) */
  tr {
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 10px;
    background: #fff;
  }

  /* Align table cells and add a bottom border */
  td {
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
	text-align:center;    
  }

  /* Remove the border from the last cell in the card */
  td:last-child {
    border-bottom: 0;
  }

  /* Insert column labels dynamically using data-attributes */
  td::before {
    content: attr(data-label);   /* Pulls text from HTML data-label */
    position: absolute;
    left: 10px;
    width: 45%;
    padding-right: 10px;
    text-align: left;            /* Align labels to the left */
    font-weight: bold;
    color: #333;
  }
  .pdf-container {
    padding-bottom: 150%; /* Gives more vertical room to scroll comfortably on phone screens */
  }
   .gc-container {
        max-width: 95%;
      }
      
      .gc-leader-card {
        width: 100%;
        flex-direction: column;
        text-align: center;
      }
      
      .gc-leader-info {
        text-align: center;
      }

      .gc-members-grid {
        grid-template-columns: 1fr; /* Turns into single-column layout */
        row-gap: 40px;
      }

      /* Unify alignment mechanics on mobile view for readability */
      .gc-member-card {
        flex-direction: column !important;
        text-align: center !important;
        justify-content: center !important;
        border-bottom: 8px solid #99004e; /* Mobile stack gets accent border */
        padding-bottom: 30px;
      }

      /* Fix element order so images sit elegantly above texts on mobile */
      .gc-card-left {
        flex-direction: column-reverse !important; 
		border-right:none;
      }
	  .gc-sub-title {   
	    white-space: normal;     
	    word-spacing: -0.2em;     
	    letter-spacing: 2px;     
	    font-size: 4vw; 
  		}
		.socialmediaul{
			justify-content: center;
		}
		.footer-links{
			border-right:3px ridge #e4cfcf42;
		}
		.footer-links ul li{	
			margin-left: -10px;
		}
.footer-links{
	    margin-left:0px;
	}	
	.footer-links ul {    
	    margin: 0px 0px 0px -30px;
	}
	.footer-links h3{    
	    margin: 10px 0px 0px 0px;
	}
	button#dsel-a11y-trigger {
    min-width: 48px;
    min-height: 48px;
    padding: 12px; /* Expands the clickable area */
    box-sizing: border-box;
	font-size: small;
}
/* If the failing links are inside a menu, target them specifically */
.footerupper-grid a {   
    display: inline-block; /* Allows width/height/padding to apply */
    padding: 8px; /* Adds space around the text for easier tapping */
    margin: 4px; /* Creates spacing between adjacent links so they don't overlap */
}
button#menu-toggle.menu-toggle {
    min-width: 48px;
    min-height: 48px;
    padding: 12px;           /* Expands the touchable area outwards */
    box-sizing: border-box;  /* Ensures padding doesn't distort element calculations */
    display: inline-flex;
    align-items: center;
    justify-content: center;
	margin-top: -40px;
}
a.logohylink {
    min-width: 48px;
    min-height: 48px;
    padding: 8px 12px;       /* Adds a comfortable safety cushion around the logo */
    display: inline-block;   /* Allows the link to respect width, height, and padding */
    box-sizing: border-box;
}
	.site-header {
		    padding: 0px;
		    font-size: small;
	        min-height: 80px;
	}		
	.languageclr{
        margin: -15px 0px 0px 10px;
	}
	.footer-links-right {
        justify-items: start;
        display: flex;
        flex-wrap: wrap;
        gap: 0px;
		margin: -30px 0px 0px 10px;
        padding: 0px;
    }
	.socialmediaul {
        display: flex;        
        padding: 0px;
        gap: 0px;
	}
	.slide-caption a {
	    font-size: 18px;
	}
    .cecglancenumber {
        font-size: 18px;
    }
	
	/* Tourch targets */
	button#dsel-a11y-trigger, a.latestbtn {
	  display: inline-block;
	  min-width: 48px;
	  min-height: 48px;
	  padding: 12px;
	  margin: 4px; /* adds breathing room between adjacent buttons/links */
	  box-sizing: border-box;
	}
		
}
@media (max-width: 700px) {
	.fpgraphhyper div a {
		font-size: 1em;
	}
    .mediastsection {
        border-bottom: 2px ridge #490b1a2e;
        width: 100%;
        float: none;
	}
	.showreeltitle {
        border-right:none;
    }
	.fpgraphhyper {
        border-right: none;
    }
    .homestripcontainer {
        border-right:none;
    }
    .footerupper-grid {     
        display: flex;
        flex-wrap: balance;
    }
    .footerlogo-area {
        grid-template-columns: 1fr;
        border-right: none;
		border-bottom: 3px ridge #e4cfcf42;
    }
    .cectitle {
    }	
	.cecfadd{
		margin:10px 10px 10px 160px;
	}
    .cecglancenumber {
        font-size: 18px;
    }
	.cecfcontainer{
		width:100%
	}
	.moocsslide-caption p {
	    line-height: 25px;	
	}		

}
@media (max-width: 650px) {
	.fpgraphhyper div a {
		font-size: 1em;
	}
    .numbergrid-layout {
		grid-template-columns: repeat(2, 1fr);
	}
	.accessibility-bar{ grid-template-columns: 1fr; } /* Vertical stack on mobile */
	.footer-ceclinks {
        justify-items: start;
        margin: 0px 0px 0px 0px;
        padding: 0px;
    }
    .languageclr {
        margin: 0px 0px 0px 10px;
    }	
}	 
@media (max-width:590px){
	.cecshorttitle{margin: 0px 0px -45px 0px;}
	 .cecshorttitle {
        margin: 0px 0px 0px 0px;
    }
	.searchinput{
		font-size:12px;
		padding:10px;
	}
	.containersearch button{
	    font-size: 12px;
    	padding: 5px;
    	font-weight: bold;
		border-radius: 7px;
	}
    .grid-layout {
		grid-template-columns: repeat(2, 1fr);
	 } 
	.latestgrid-layout {
        grid-template-columns: repeat(1, 1fr);
    }
	.latestcard {
        max-width: 96%;
    }
	.carousel-track {
        height: 330px;
        display: flex;
        flex-direction: column;
    }
	.slide-caption {
        position: relative;
        background: #111111;
        padding: 0px 18px 18px 18px;
    }
	.cecfadd {
    	 margin: 10px 10px 10px 10px; 
    }
	.cectitle {
	     position: relative;
    }
	.footer-ceclinks {
	    justify-items: start;
	}
	.footer-flex {
        flex-direction: column;
        text-align: left;
    }
	.footer-blinks {
 	   text-align:start;
	}
    .pgraphhyper div a {
		font-size:12px;
		padding: 1px 6px 1px 5px;
	}
    .moocsslide-caption h2 {
        margin-bottom: 0px;
		font-size: 12px;
	}
	.moocsslide-caption p {
        line-height: 21px;
    }	
}
@media (max-width: 520px) {
    .languageclr {
        margin: -14px 0px 0px 10px;
    }
	.moocsslide-caption p {
        line-height: 21px;
        font-size: 10px;
    }	
}
@media (max-width: 504px) {
    .searchinput {
        font-size: 12px;
        padding: 2px;
    }
	.accessibility-bar button {
		font-size: 0.75rem;
	}
	.carousel-track {
        height: 300px;
        display: flex;
        flex-direction: column;
    }
	.slide-caption {
        position: relative;
        background: #111111;
        padding: 0px 18px 18px 18px;
    }
}
@media (max-width: 492px){
	.moocsslide-caption p {
        line-height: 17px;
        font-size: 10px;
    }	
}	
/* --- GIGW HIGH CONTRAST INJECTIONS --- */
.high-contrast {
    --primary-color: #ffff00 !important; /* Yellow text */
    --text-color: #ffffff !important;
    --textw-color: #ffff00 !important; /* Yellow text */
    --bg-color: #000000 !important;      /* True Black background */
    --light-bg: #111111 !important;
    --accent-color: #ffff00 !important;
}

.high-contrast .card, .high-contrast .latestcard, .high-contrast .site-header, .high-contrast .accessibility-bar, .high-contrast .upcomingsection .dateupcoming, .high-contrast .numbergrid-layout, .high-contrast .site-footer{
    border: 2px solid #fff !important;
    background: #000 !important;
}
.high-contrast .hrncontent div{
    border: 0px solid #fff !important;
    background: #000 !important;
}
.high-contrast .emmrclist table .gcfirstrow{
    border: 1px solid #fff !important;
    background: #000 !important;
}
.high-contrast .emmrclist .gcsecondrow{
    border: 1px solid #fff !important;
    background: #000 !important;
}
.high-contrast .maincontentw table .gcfirstrow{
    border: 1px solid #fff !important;
    background: #000 !important;
}
.high-contrast .maincontentw .gcsecondrow{
    border: 1px solid #fff !important;
    background: #000 !important;
}
.high-contrast .projectscontent div{
    border: 0px solid #fff !important;
    background: #000 !important;
}
.high-contrast a, .high-contrast h1, .high-contrast h2, .high-contrast h3, .high-contrast P
{ color: #ffff00 !important; }
.high-contrast div, .high-contrast button
{ color: #ffff00 !important; }
/* --- Full-Width GIGW 3.0 Slider Infrastructure --- */
.slider-wrapper {
     position: relative;
    width: 100vw;           /* Scales exactly to 100% of the PC viewport width */
    max-width: 100%;        /* Secondary boundary protection barrier */
    margin-left: 0;
    margin-right: 0;
    left: 0;
    right: 0;
    background-color: #000000;
    overflow: hidden;
}
.cecHeaderbanners img{
width:100%;
height:auto; /* Exact height match for your 1900x500 production image canvas asset */
}
.carousel-container {
     position: relative;
    width: 100vw;           /* Forces inner track canvas shell to expand full-width */
    margin: 0;
    padding: 0;
}
/* Individual slider frames */
.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease-in-out, visibility 0.6s;
    z-index: 1;
}

/* Make active frame visible */
.slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

/* Force layout image engine to expand to full-screen monitor boundaries */
.slide img {
   width: 100% !important; */
    display: block !important;
    background-size: cover;
    height: auto;
}
/* Navigation button frame overlays */
.carousel-controls {
    position: absolute;
    top: 20px;
    right: calc(5vw + 10px); /* Dynamic alignment spacing padding */
    z-index: 10;
    display: flex;
    gap: 8px;
}
   /* Responsive Breakdown for Tablets & Mobile Screens */
   
button#dsel-a11y-trigger, a {
  /* Forces the elements to respect height, width, and padding rules */
	//  display: inline-flex; 
	  align-items: center;
	  justify-content: center;

  /* Ensures the clickable hit area meets the minimum 48x48px mobile standard */
	  min-width: 36px;
	  min-height: 36px;
  
  /* Adds internal padding so text/icons don't hug the edges */
	  padding: 8px 8px; 
  
	  /* Prevents the 48px size from breaking your layout structure */
	  box-sizing: border-box; 
	}