@import url("https://use.typekit.net/dgz4zwc.css");

    :root {
      --zdi-blue: #00A4E0;
      --zdi-dark: #2e10e4;
      --zdi-gray: #1a1a1a;
      --zdi-darkblue: #230bab;
      --zdi-yellow: #ff9500;
    }
     
	  
	   html {
        width: 100%;
        min-height: 100%;
      }

      body {
        width: 100%;
        min-height: 100%;
        margin: 0;
        padding: 0;
        background-color: #000;
        color: #fff;
        overflow-y: auto; 
        overflow-x: hidden; 
        font-family: "Titillium Web", sans-serif;
      }
      

      ::-webkit-scrollbar {
        width: 8px;
      }
      ::-webkit-scrollbar-track {
        background: #000;
      }
      ::-webkit-scrollbar-thumb {
        background: #333;
        border-radius: 4px;
      }
      ::-webkit-scrollbar-thumb:hover {
        background: #555;
      }
	  
      
      .no-scrollbar::-webkit-scrollbar {
          display: none;
      }
      .no-scrollbar {
          -ms-overflow-style: none;
          scrollbar-width: none;
      }
	  
	  h1, h2, h3,h3{
		  font-family: "gotham", sans-serif;
	  }
	  
	  p{
		 line-height: 1.625;
		margin-bottom: 1.5rem;
	  }
	  p, li{
		 color: #c5ccd9;
		 font-size: 1.125rem;
		 
	  }
	  
	  article a, .left-content-holder .content-article a{
		 color: #00A4E0 !important;
		 text-decoration:underline !important;
	  }

    article .left-content-holder, #dynamic-content-area {
        word-break: break-word;
    }
	  
	  #interactive-section a{
		  text-decoration:underline;
	  }

    
    #interactive-section p a {
        text-decoration: underline;
        color: #00A4E0 !important;
    }
	  
	  


	  
	  /* Footer Link Styles */
      footer{
         font-family: "gotham", sans-serif;
      }
      .footer-link {
        color: #fff;
        transition: opacity 0.3s ease, color 0.3s ease;
        text-decoration: none !important;
      }
      .footer-link:hover {
        opacity: 0.5;
        color: #fff !important;
        text-decoration: none !important;
      }
      .footer-link-blue {
        color: #00A4E0;
        transition: opacity 0.3s ease;
        text-decoration: none !important;
      }
      .footer-link-blue:hover {
        opacity: 0.7;
        text-decoration: none !important;
      }
	  
	  
	  
	  .menu-overlay {
        background: rgba(5, 5, 5, 0.65);
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
         font-family: "gotham", sans-serif;
      }
       .floating-nav-gradient {
        background: linear-gradient(to bottom, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 40%, transparent 100%);
      }
	 
	  
	  header#main-header {
      width: calc(90% + 3rem);
      font-family: "gotham", sans-serif;
    }

    

    .zdi-home header#main-header {
      left: calc(5% - 1.5rem);
      
    }

      .gradient-reveal-text {
        background-image: linear-gradient(to top, #ffffff 50%, #00000000 50%);
        /*background-image: linear-gradient(to top, #00A4E0 50%, #000000 50%);*/
        background-size: 100% 200%;
        background-position: 0% 0%; 
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
      }
	  
	  .gradient-reveal-text-white {
        background-image: linear-gradient(to top, #FFFFFF 50%, #000000 50%);
        background-size: 100% 200%;
        background-position: 0% 0%; 
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
      }

      .glass-panel {
        background: rgba(255, 255, 255, 0.03);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
      }
	  
	  .glass-effect-box{
		box-shadow: rgba(255, 255, 255, 0.03) 0px 0px 0px 1px inset, rgba(255, 255, 255, 0.25) 1.8px 3px 1px -2.5px inset, rgba(255, 255, 255, 0.2) -2px -2px 2px -2px inset, rgba(255, 255, 255, 0.15) -3px -8px 1px -7px inset, rgba(0, 0, 0, 0.12) -0.3px -1px 4px inset, rgba(0, 0, 0, 0.18) -1.5px 2.5px 3px -2px inset, rgba(0, 0, 0, 0.18) 0px 3px 6px -2px inset, rgba(0, 0, 0, 0.09) 2px -6.5px 3px -4px inset, rgba(0, 0, 0, 0.08) 0px 1px 6px, rgba(0, 0, 0, 0.06) 0px 6px 18px, rgba(40, 65, 89, 0.48) 0px 4px 31.2px -3px inset;
	  }
	  
	  
	   .form-input {
          background: rgba(255, 255, 255, 0.05);
          border: 1px solid rgba(255, 255, 255, 0.1);
          color: white;
          transition: all 0.3s ease;
      }
      .form-input:focus {
          outline: none;
          border-color: #00A4E0;
          background: rgba(255, 255, 255, 0.1);
          box-shadow: 0 0 0 2px rgba(0, 164, 224, 0.2);
      }
      .error-msg {
          color: #d71a20;
          font-size: 0.8rem;
          margin-top: 0.25rem;
          display: none;
          animation: slideDown 0.3s ease forwards;
      }
      .input-error {
          border-color: #d71a20 !important;
      }
      @keyframes slideDown {
          from { opacity: 0; transform: translateY(-5px); }
          to { opacity: 1; transform: translateY(0); }
      }


	  
	  
	  	/* Hero text style*/
     
      
		  /* Large Desktop (1280px+) */
		  @media (min-width: 1280px) {	
			h1.hero-title {
				font-size: 4rem;
				line-height: 1;
			}
		  }
		  
		  @media screen and (min-width: 900px) and (max-width: 1590px) {
			.hero-bottom-col a{
				font-size:11px;
			}
			
			.hero-bottom-col h3{
				font-size:14px;
			}
		  }
		  
		 
		  
		  @media (min-width: 1400px) {	
			h1.hero-title {
				font-size: 5rem;
				line-height: 1;
			}
		  }
		  
		  @media (min-width: 1700px) {	
			h1.hero-title {
				font-size: 6rem;
				line-height: 1;
			}
		  }
		  
		  @media (min-width: 1900px) {	
			h1.hero-title {
				font-size: 6rem;
				line-height: 1;
			}

      .logo-holder{
        width:400px !important;

      }
      
		  }
	  
	  
	  
	  /* Curtain Animation Styles */
      .cell-content { position: relative; display: inline-block; vertical-align: middle; width: 100%; }
      .cell-curtain { 
          position: absolute; 
          top: 0; 
          left: 0; 
          width: 100%; 
          height: 100%; 
          background-color: #00A4E0; 
          z-index: 10; 
          transform-origin: left; 
          transform: scaleX(1); 
          /* Safari Fixes */
          will-change: transform;
          transform: translateZ(0) scaleX(1);
      }
      .cell-text {
          opacity: 0; 
          transform: translateX(-10px);
          display: inline-block;
      }
      
      .sort-icon::after { content: '↕'; margin-left: 5px; opacity: 0.3; font-size: 0.8em; }
      .sort-asc::after { content: '↑'; opacity: 1; color: #00A4E0; }
      .sort-desc::after { content: '↓'; opacity: 1; color: #00A4E0; }



	
      /* Filter Bar Transition */
      #filter-bar {
          transition: background-color 0.3s ease, backdrop-filter 0.3s ease;
      }
      /* Class applied via JS when stuck (optional if we use default styling) */
      #filter-bar.is-pinned {
         /* Keep consistent styling or enhance border */
         border-bottom: 1px solid rgba(255, 255, 255, 0.2);
      }
      
      /* Hidden rows */
      .row-hidden {
          display: none;
      }
	  
	  /* --- FLOATING TOOLTIP --- */
      #custom-tooltip {
          position: fixed;
          background: rgba(10, 10, 10, 0.95);
          border: 1px solid rgba(255, 255, 255, 0.15);
          color: #fff;
          padding: 10px 16px;
          border-radius: 8px;
          font-size: 0.9rem;
          font-weight: 500;
          pointer-events: none;
          z-index: 9999;
          display: none;
          max-width: 350px;
          box-shadow: 0 8px 32px rgba(0,0,0,0.5);
          backdrop-filter: blur(8px);
          line-height: 1.5;
      }
      
      .row-title-data {
          display: none;
      }
      
      /* --- CUSTOM FOOTER GRID (iPad Pro Fix) --- */
      .footer-custom-grid {
          display: grid;
          grid-template-columns: repeat(1, minmax(0, 1fr));
          gap: 1.75rem; /* gap-7 */
      }
      
      /* Tablet & iPad Pro Portrait (768px - 1279px) */
      /* This ensures 1024px screens fall into this layout, not the 5-col desktop layout */
      @media (min-width: 768px) {
          .footer-custom-grid {
              grid-template-columns: repeat(6, minmax(0, 1fr));
          }
          .f-col-span-2 { grid-column: span 2 / span 2; }
          .f-col-span-3 { grid-column: span 3 / span 3; }
      }

      /* Large Desktop (1280px+) */
      @media (min-width: 1280px) {
          .footer-custom-grid {
              grid-template-columns: repeat(5, minmax(0, 1fr));
          }
          /* Reset spans to 1 column for the 5-col layout */
          .f-col-span-2, .f-col-span-3 { grid-column: span 1 / span 1; }
      }
      
      /* Force No Underline */
      .force-no-underline {
          text-decoration: none !important;
      }
	  
	  #advisories-table{
		  background: rgba(5, 5, 5, 0.45);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
	
	background-color: rgb(255 255 255 / 0.03);
	
	  }
	  
	  
	  /* Full Width Title Row Support */
      #advisories-table thead tr { display: flex; width: 100%; border-bottom: 1px solid rgba(255,255,255,0.1); }
      .advisory-row { display: flex; flex-wrap: wrap; width: 100%; cursor: pointer; transition: background-color 0.2s; }
      .advisory-row td { display: flex; border: none; }
      
	  
	  
	  
	  .advisory-title-cell, .advisory-tags-cell { 
          opacity: 0; 
          transform: translateX(-20px); 
		      border-top:0px; /*1.5px dotted #60b7e640 !important;*/
          padding-top: 13px !important; 
          padding-bottom: 1rem !important; 
          
      }
	  
	  .advisory-title-cell{
		padding-top:10px !important;
	  }
	  
	  .advisory-tags-cell { 
		text-align:right;
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: wrap !important;
		align-content: flex-start;
	  }
	  
	  .advisory-tags-cell a {
		color: #ffffff8c !important;
		text-decoration: none !important;
		background: #12a0db69;
	}
	
	
	
	  
      
      /* --- RESPONSIVE TABLE STYLES --- */
	  /* Force Horizontal Scroll for big screens up to 1100px */
	  @media (max-width: 1100px) {
         
		   #table-clip-path{
			 overflow-x:auto !important;
		  }
      }
	  
      
      /* Tablet/Phablet (min-width: 768px): Force Horizontal Scroll */
      @media (max-width: 1024px) {
          header#main-header {
            left: calc(5% - 1.5rem);
         }
      }

      @media (min-width: 768px) {
          #advisories-table {
              min-width: 1000px; /* Force minimum width to trigger scroll on smaller desktops/tablets */
          }
      }

      /* Mobile (max-width: 767px): Stacked Layout */
      @media (max-width: 767px) {
        #advisories-table, 
        #advisories-table tbody, 
        #advisories-table tr, 
        #advisories-table td {
            display: block;
            width: 100%;
        }
        
        #advisories-table thead {
            display: none; /* Hide header */
        }
        
        #advisories-table {
            min-width: 100% !important; /* Full width */
        }
        
        #advisories-table tr {
            margin-bottom: 1.5rem;
            background: rgba(255,255,255,0.03);
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 0.75rem;
            padding: 1.25rem;
        }
        
        #advisories-table td {
            padding: 0.5rem 0;
            text-align: left;
            border-bottom: 1px solid rgba(255,255,255,0.05);
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }
        
        #advisories-table td:last-child {
            border-bottom: none;
        }

        /* Use data-label attribute to show headers */
        #advisories-table td::before {
            content: attr(data-label);
            display: block;
            font-size: 0.75rem;
            color: #6b7280; /* gray-500 */
            text-transform: uppercase;
            margin-bottom: 0.25rem;
            font-weight: 700;
        }
		
	  }

    @media (max-width: 380px) {
      #hero-container{
        min-height:1100px;
      }

    }



    @media (max-width: 1650px) {
     .zdi-home header#main-header {
     
      left: calc(5% - 1.5rem) !important;
      
    }

  }

    @media (min-width: 2050px) {
     .zdi-home header#main-header {
      
       left: calc((100vw - 2000px) / 2);
      }

      
    }


  

		
		 @media (max-width: 900px) {
		 .cell-content{
			 align-items: flex-start !important;
		  }
		  
		 .cell-content svg{
			  min-width:15px;
			  margin-top: 5px;
		  }

      }
	  
	  
	  
	  
	  /* Upcoming advisories Table Styles */
	  
	  .cell-content svg{
		  min-width:15px;
		  
	  }
	  
	  .cell-content{
			 align-items: flex-start !important;
		  }
		  
		 .cell-content svg{
			  min-width:15px;
			  margin-top: 5px;
		  }
	  
	 
	  
      #advisories-table.upcoming-advisories { display: block; width: 100%; }
      #advisories-table.upcoming-advisories thead { width: 100%; }
      #advisories-table.upcoming-advisories tbody { display: block; width: 100%; }
      #advisories-table.upcoming-advisories thead tr { display: flex; width: 100%; border-bottom: 1px solid rgba(255,255,255,0.1); }
      .upcoming-advisories .advisory-row { display: flex; flex-wrap: wrap; width: 100%; cursor: default; transition: background-color 0.2s; border-bottom: 1px solid rgba(255,255,255,0.05); }
      .upcoming-advisories .advisory-row td { display: block; }
    
	   .upcoming-advisories .advisory-row td a:hover{ opacity:.7;}
      /* Specific override for links inside rows to ensure they are clickable and visible */
      .upcoming-advisories .advisory-row a { cursor: pointer; }
	  
	  
	  
	  /* Blog */
	  
	 .blog-tags li {
			display: inline-block;
			width: auto;
			margin-right: 5px;
			margin: 5px 5px 5px 0;
      padding-left: 0px !important;
		}

	.blog-tags {
		list-style-type: none;
		padding-left: 0px;
		margin: 13px 0;
    margin-left:0px !important;
	}
	
	.left-content-holder .content-article .blog-tags a {
		color:#FFF !important;
		text-decoration:none !important;
	}
	
	.left-content-holder .content-article  .btn-white-text {
		color:rgb(156 163 175 / 1) !important;
		text-decoration:none !important;
	}
	
	.left-content-holder .content-article  .btn-white-text:hover {
		color:#fff !important;
		text-decoration:none !important;
	}
	
	/* Excel Table Overrides (Targeted by JS, but helper classes here) */
      .patch-table-container { width: 100%; overflow-x: auto; margin: 2rem 0; border-radius: 0.5rem; border: 1px solid rgba(255,255,255,0.1); }
      .patch-table-container table { width: 100%; border-collapse: collapse; min-width: 800px; }
      
    @media (max-width: 1100px) {  
     .left-content-holder{
		 display:flex;
		 flex-direction:column !important;
	 }
	 
	 .content-article, #metadata-img, #metadata-col {
		width:100% !important;
	 }
	 
	}
	  
	  
	  /* Blog Card Specifics */
      .blog-card { will-change: clip-path, transform; }
      .blog-card:hover .card-img { transform: scale(1.05); }
      .pagination-btn { transition: all 0.3s ease; border: 2px solid var(--zdi-yellow); color:#fff !important; text-decoration: none !important; }
      .pagination-btn:hover { background-color: rgba(255,255,255,0.1); border-color: white; }
      .pagination-btn.active { background-color: #00A4E0; border-color: var(--zdi-blue); color: white; }
      .pagination-btn.disabled { background-color: transparent; border: 2px solid #5b5959; color: #444343; opacity:.30; cursor: not-allowed; }
      article .blog-card a, .latest-container a { text-decoration: none !important; }
      ul.blog-tags a { color: #fff !important; }
      article.blog-article p {
        display: block;
        margin: 0px 0 20px 0;
        white-space: normal !important;
        word-break: break-word;
      }

      article.blog-article .embed-block{
        background-color: #ffffff;
      }

      code, kbd, pre, samp {
        padding: 0px;
        color: #a7d8ef !important;
        letter-spacing: 1.2px;
      }
      .horizontalrule-block {
          margin-bottom: 20px;
          margin-top: 20px;
      }
      article.blog-article ul,  article.blog-article ul ol {
        margin-left:40px;
        margin-bottom:20px;
      }

      article.blog-article ol > li {
          padding-left: 10px;
          list-style: numeric;
      }

      article.blog-article ul > li {
          padding-left: 10px;
          list-style: disc;
      }

      article.blog-article ul ol, article.blog-article ol ul, article.blog-article ol ol{
        margin-bottom: 0 !important;
      }

      article.blog-article ul ul, article.blog-article ul ul ul, article.blog-article ul ul ul ul {
        margin-bottom: 0 !important;
      }



      /*gradient text style*/
      .gradient-text {
        background-image: linear-gradient(to top, var(--zdi-yellow) 10%, var(--zdi-blue) 80%);
        background-size: 100% 110%;
        background-position: 0% 0%; 
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        display: inline-block;
        padding-right: 40px;
        padding-bottom: 40px;
      }

      #interactive-section h2 .gradient-text, h2.text-5xl .gradient-text{
        padding-right: 2px;
        padding-bottom: 5px;
        background-size: 100% 150%;
      }

      .gradient-text-wipe-top {
        background-image: linear-gradient(to top,rgba(247, 193, 0, 1) 0%, rgba(0, 164, 224, 1) 44%, rgba(0, 164, 224, 0) 65%);
        background-size: 100% 200%;
        background-position: 0% 0%; 
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        display: inline-block;
        padding-right: 40px;
        padding-bottom: 40px;
      }

      /*cta gradient background*/
      .gradient-full-bg{
        background: linear-gradient(326deg, var(--zdi-yellow) 0%, var(--zdi-blue) 24%, rgba(0, 0, 0, 0) 60%);
        opacity: .3;
        position: absolute;
        width:100%;
        height: 100%;
        
      }

      /* statu bar */
      .status-bar {
        width: 90%;
        margin: 0 auto;
        text-align: center;
        max-width: 600px;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 10px;
        margin-bottom: 40px;
      }

      .status-bar.err-status {
        border-color: #ff4d4f;
        background-color: rgba(255, 77, 79, 0.1);
      }

      .status-bar.success-status {
        border-color: #52c41a;
        background-color: rgba(82, 196, 26, 0.1);
      }

      .status-bar.warning-status {
        border-color: #faad14;
        background-color: rgba(250, 173, 20, 0.1);
      }

      .status-bar.info-status {
        border-color: #1890ff;
        background-color: rgba(24, 144, 255, 0.1);
      }