:root {
            --mark3-t20-bg-main: #f0f0f0;
            --mark3-t20-green: #000000;
            --mark3-t20-light: #f0f0f0;
            --mark3-t20-accent: #ffffff;
        }
* { margin: 0; 
  padding: 0;
   box-sizing: border-box;
    font-family: poppines, sans-serif; }


        body {
            margin: 0;
            font-family: poppines, sans-serif;
            background-color: var(--mark3-t20-bg-main);
            display: flex;
            flex-direction: column;
            justify-content: center;
            
        }

        .mark3-t20-container {
          margin-top: 100px;
            width: 100%;
            max-width: 1450px;
            background: #f0f0f0;
            padding: 0;

        }

        .mark3-t20-header {
            text-align: center;
            font-size: 15rem;
            font-weight: bold;
            color: var(--mark3-t20-accent);
            letter-spacing: 5px;
            margin-bottom: 2rem;
            text-transform: uppercase;
        }

        .mark3-t20-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0px;
        }

        .mark3-t20-job-card {
            display: contents; /* Allows children to participate in the parent grid */
        }

        .mark3-t20-box {
            min-height: 500px;
            border-radius: 0px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 2rem;
            transition: all 0.4s ease;
            text-align: center;
        }

        .mark3-t20-green-box {
            background-color: var(--mark3-t20-green);
            color: white;
            z-index: 2;
        }

        .mark3-t20-grey-box {
            background-color: var(--mark3-t20-light);
            color: #333;
            opacity: 0.8;
            position: relative;
            overflow: hidden;
        }

        /* Hover Logic */
        .mark3-t20-details {
            opacity: 0;
            transform: translateY(20px);
            transition: 0.3s ease-in-out;
        }

        /* When hovering the "row" (the job card group) */
        .mark3-t20-job-card:hover .mark3-t20-grey-box {
            opacity: 1;

        }

        .mark3-t20-job-card:hover .mark3-t20-details {
            opacity: 1;
            transform: translateY(0);
        }

        .mark3-t20-btn {
            margin-top: 15px;
            padding: 10px 25px;
            background: var(--mark3-t20-green);
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-weight: bold;
        }
        .mark3-t20-box{
  position: relative;
  overflow: hidden;   /* image box se bahar na nikle */

}

.box-top-img{
  width: 100%;
  height: 200px;      /* apne design ke hisaab se adjust */
  object-fit: cover;  /* edge to edge fill */
  display: block;
}

/* text ko thoda neeche push karne ke liye */
.mark3-t20-box h1,
.mark3-t20-box p{
  padding: 20px;
}

     /* Responsive Mobile Layout */
        @media (max-width: 768px) {
            .mark3-t20-header { font-size: 3rem; }
            .mark3-t20-grid { grid-template-columns: 1fr; }
            
            /* Order override for mobile to keep Green then Grey sequence */
            .mark3-t20-job-card:nth-child(2) .mark3-t20-green-box { order: 3; }
            .mark3-t20-job-card:nth-child(2) .mark3-t20-grey-box { order: 4; }
            
            .mark3-t20-box { min-height: 200px; }
            .mark3-t20-details { opacity: 1; transform: translateY(0); }
        }