/* CSS reset */
    *,
    *::after,
    *::before {
        box-sizing: inherit;
        margin: 0;
        padding: 0;
    }
    
html { font-size: 62.5%; }
    body {
        box-sizing: border-box;
        font-family: 'Open Sans', sans-serif;
        position: relative;
        
    }

  

    /* Main heading for card's front cover */
    .card-front__heading {
        font-size: 1.5rem;
        margin-top: .25rem;
    }

 

    /* For both inside page's main heading and 'view me' text on card front cover */

    .card-front__text-view {
        font-size: 14px;
        font-weight: 700;
        margin-top: .2rem;
    }
    /* Front cover */
    .card-front__tp { color: #fafbfa; }
  
    /* Container to hold all cards in one place */
    .card-area {
        align-items: center;
       
        height: 100%;
      
        padding: 1rem;
		display: grid;
            grid-template-columns: repeat(7, 1fr); /* Seven equal columns */
            gap: 20px; /* Adjust spacing between cards */
      
    }
   
   

    /* Area to hold an individual card */
    .card-section {
        align-items: center;
        display: flex;
        height: 100%;
        justify-content: center;
        width: 100%;
    }

    /* A container to hold the flip card and the inside page */
    .card {
        background-color: rgba(0,0,0, .05);
        box-shadow: -.1rem 1.7rem 6.6rem -3.2rem rgba(0,0,0,0.5);
        height: 15rem;
        position: relative;
        transition: all 1s ease;
        width: 15rem;
    }
    /* An inner container to hold the flip card. This excludes the inside page */
      .card-front
    {
        backface-visibility: hidden;
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
    }
   
    /* container for the front side */
    .card-front {
        background-color: #fafbfa;
        height: 15rem;
        width: 15rem;
    }
    /* Front side's top section */
    .card-front__tp {
        align-items: center;
        clip-path: polygon(0 0, 100% 0, 100% 90%, 57% 90%, 50% 100%, 43% 90%, 0 90%);
        display: flex;
        flex-direction: column;
        height: 12rem;
        justify-content: center;
        padding: .75rem;
    }
	.card-front-bg {background:#035B46; }
   /* .card-front__tp--policy {
        background: #035B46;
    }
    .card-front__tp--vendor {
        background: linear-gradient( to bottom, #C48D0D, #956C0C);
    }
    .card-front__tp--pmsurya {
        background: linear-gradient(to bottom,#fb9b88,#f86647);
    }

    .card-front__tp--sub {
        background: linear-gradient( to bottom, #db3300, #ee6d6d );
    }
    .card-front__tp--emp {
        background:linear-gradient( to bottom, #0fa4af, #3a9ca4);
    }.card-front__tp--apply {
        background: linear-gradient( to bottom, #3D52A0, #566DC1);
    }.card-front__tp--contact {
         background: linear-gradient( to bottom, #25ae1a, #35b32a);
    }*/
	
	.card-front__text-view--policy a { color: #d01374; !important;}
    .card-front__text-view--vendor  a{ color: #715108; !important;}
    .card-front__text-view--pmsurya a { color: #c65138; !important; }
    .card-front__text-view--sub a{ color: #e65454; !important;}
    .card-front__text-view--emp a{ color: #118c95; !important;}
    .card-front__text-view--apply a{ color: #0735DD; !important;}
    .card-front__text-view--contact a{ color: #22331c; !important;}
    .card-front__tp--policy {
        background: #035B46;
    }
    .card-front__tp--vendor {
        background: linear-gradient( to bottom, #C48D0D, #956C0C);
    }
    .card-front__tp--pmsurya {
        background: linear-gradient(to bottom,#fb9b88,#f86647);
    }

    .card-front__tp--sub {
        background: linear-gradient( to bottom, #db3300, #ee6d6d );
    }
    .card-front__tp--emp {
        background:linear-gradient( to bottom, #0fa4af, #3a9ca4);
    }.card-front__tp--apply {
        background: linear-gradient( to bottom, #3D52A0, #566DC1);
    }.card-front__tp--contact {
         background: linear-gradient( to bottom, #25ae1a, #35b32a);
    }
    /* Front card's bottom section */
    .card-front__bt {
        align-items: center;
        display: flex;
        justify-content: center;
    }