body {
   font-family: 'Poppins', sans-serif;
   background: #fff;
 }

 .info-card {

   @apply bg-white rounded-sm p-12 text-center transition-all duration-300 cursor-pointer;

   box-shadow: 0 3px 18px rgba(0, 0, 0, .08);
 }

 .info-card:hover {

   transform: translateY(-8px);

   box-shadow: 0 18px 45px rgba(0, 0, 0, .12);

 }

 .icon-box {

   width: 60px;
   height: 60px;

   margin: auto;

   display: flex;
   align-items: center;
   justify-content: center;

   background: #9c9c9c;

   color: white;

   font-size: 28px;

   margin-bottom: 30px;

 }

 .info-card h3 {

   @apply text-2xl text-gray-700 mb-6 font-normal;

 }

 .info-card p {

   @apply text-gray-500 leading-8 text-lg mb-8;

 }

 .info-card a {

   @apply text-gray-700 text-lg font-medium;

 }



 /* =======================================================
   TCTD DOMAIN SECTION
======================================================= */

 .tctd-domain-section {

   background: url("./images/DSC_0193_edit-scaled.webp") center center/cover no-repeat;

   min-height: 650px;

   padding: 80px 0;

   display: flex;

   align-items: center;

   justify-content: center;

 }

 .tctd-overlay {

   position: absolute;

   inset: 0;

   background: rgba(0, 0, 0, .56);

 }

 /* Grid */

 .tctd-domain-grid {

   gap: 35px 70px;

 }

 /* Card */

 .tctd-domain-card {

   width: 190px;

   height: 190px;

   display: flex;

   justify-content: center;

   align-items: center;

   text-decoration: none;

   position: relative;

 }

 /* Wrapper */

 /* ===============================
   ICONS
=============================== */

 /* ===============================
   ICONS
=============================== */

 .tctd-icon-wrapper {

   position: relative;

   width: 150px;
   height: 150px;

 }

 .tctd-domain-icon {

   position: absolute;
   inset: 0;

   width: 100%;
   height: 100%;

   object-fit: contain;

   transition:
     opacity .35s ease,
     transform .35s ease,
     filter .35s ease;

   backface-visibility: hidden;
   will-change: opacity, transform, filter;

 }



 /* Focus */

 .tctd-domain-card:focus-visible {

   outline: none;

 }

 .tctd-domain-icon {

   position: absolute;

   inset: 0;

   width: 100%;

   height: 100%;

   object-fit: contain;

   filter:
     grayscale(100%) brightness(1.15) contrast(.85);

   transition:
     filter .35s ease,
     transform .35s ease;

 }

 .tctd-domain-card:hover .tctd-domain-icon {

   filter: none;

   transform:
     translateY(-6px) scale(1.02);

 }


 .hero-section {

   position: relative;

   width: 100%;

   height: 40vh;

   min-height: 650px;

   overflow: hidden;

 }

 .hero-bg {

   position: absolute;

   inset: 0;

   width: 100%;

   height: 100%;

   object-fit: fill;

 }

 .hero-overlay {

   position: absolute;

   inset: 0;

   background: rgba(10, 12, 22, .55);

 }

 .hero-content {

   position: relative;

   z-index: 5;

   width: min(1200px, 92%);

   height: 100%;

   margin: auto;

   display: flex;

   align-items: center;

   justify-content: center;

   gap: 60px;

 }

 .hero-logo img {
   margin: auto;
   width: 60%;

 }

 .hero-text {

   color: #fff;

 }

 .hero-text h1 {

   font-size: clamp(3rem, 5vw, 5.4rem);

   font-weight: 300;

   line-height: 1.05;

 }

 .hero-text p {

   margin-top: 24px;

   font-size: 1.6rem;

   font-weight: 300;

 }

 /* CSS for the header corner cut-out and custom lightbox shapes start */
 .clip-diagonal {
   clip-path: polygon(100% 0, 0 0, 100% 100%);
 }

 .clip-arrow-down {
   clip-path: polygon(0 0, 100% 0, 50% 100%);
 }

 .clip-arrow-up {
   clip-path: polygon(50% 0, 0 100%, 100% 100%);
 }

 /* CSS for the header corner cut-out and custom lightbox shapes end*/

 /* FOOTER CSS START */

 .site-footer {

   background: #2f2f2f;

   color: #9c9c9c;

   border-top: 1px solid #404040;

 }

 .footer-container {

   max-width: 100vw;

   margin: auto;

   padding: 15px 25px;

   display: flex;

   justify-content: space-between;

   align-items: center;

   gap: 20px;

 }

 .footer-left {

   font-size: 14px;

   font-weight: 300;

 }

 .footer-right {

   display: flex;

   align-items: center;

   gap: 18px;

 }

 .footer-right a {

   color: #5e5e5e;

   text-decoration: none;

   transition: .3s;

   font-size: 17px;

 }

 .footer-right a:hover {

   color: white;

 }



 /* Mobile */

 @media(max-width:768px) {

   .footer-container {

     flex-direction: column;

     text-align: center;

     gap: 15px;

   }

 }

 /* FOOTER CSS END */

 @media(max-width:768px) {

   .hero-content {

     flex-direction: column;

     text-align: center;

     gap: 35px;

   }

   .hero-logo img {

     width: 120px;

   }

   .hero-text h1 {

     font-size: 2.5rem;

   }

   .hero-text p {

     font-size: 1.1rem;

   }

 }

 /* Mobile */

 @media(max-width:1024px) {

   .tctd-domain-grid {

     gap: 70px;

   }

 }

 @media(max-width:768px) {

   .tctd-domain-section {

     min-height: auto;

     padding: 90px 0;

   }

   .tctd-domain-grid {

     gap: 50px;

   }

   .tctd-domain-card {

     width: 170px;

     height: 170px;

   }

   .tctd-icon-wrapper {

     width: 160px;

     height: 160px;

   }

 }

 @media(max-width:480px) {

   .tctd-domain-card {

     width: 145px;

     height: 145px;

   }

   .tctd-icon-wrapper {

     width: 135px;

     height: 135px;

   }

 }