body {
            background: url('https://crownmelresort.com/www.talgro.com/../img/bg.webp') no-repeat center center/cover;
            height: 100vh;
            display: flex;
            /* align-items: center; */
            justify-content: center;
            position: relative;
            font-family: 'Poppins', sans-serif;
        }
        h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
            color:#fff;
        }
        p {
            font-size: 1.2rem;
            max-width: 600px;
            margin-bottom: 50px;
        }
        h3, p {
            color: white;
        }
        .mt-20{margin-top: 20px;}
        h3{font-size: 25px;margin-bottom: 5px;}
        .logo {
            position: relative;
            z-index: 2;
            margin-bottom: 50px;
        }
        .logo img {
            max-width: 200px;
        }
        .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(#002147, #000);
            opacity: 0.8;
        }
        .card-container {
            position: relative;
            z-index: 2;
            padding-top: 50px;
        }
        .card-container a { text-decoration: none; }
        .card {
            border-radius: 15px;
            padding: 20px;
            text-align: center;
            transition: 0.3s;
            display: flex;
            flex-direction: column;
            align-items: center;
            box-shadow: 0px 0px 4px 4px rgba(255, 255, 255, 0.2);
            position: relative;
            overflow: hidden;
        }
        .card:hover {
            transform: scale(1.05);
            box-shadow: 0px 0px 4px 4px rgba(255, 255, 255, 0.932);
        }
       
        .card .circle {
            width: 100px;
            height: 100px;
            background: white;
            border-radius: 50%;
            position: absolute;
            top: -40px;
            left: 50%;
            transform: translateX(-50%);
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
        }
       
        .card.exe .circle img {max-width: 60px; height: auto; margin-top: 30px;}
        .card.lms .circle img {max-width: 80px; height: auto; margin-top: 30px;}
        .card.ass .circle img {max-width: 60px; height: auto; margin-top: 30px;}
        .exe { background: rgba(55, 52, 53, 0.6); } 
        .lms { background: rgba(55, 52, 53, 0.6); } 
        .ass { background: rgba(55, 52, 53, 0.6); } 
        .media-view {
            text-align: center;
        }
        .media-view p{font-size: 14px; margin-bottom: 20px !important;}
        .mt-55{margin-top: 55px;}
        .card .btn {padding: 10px 20px;  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); border-radius: 30px; font-size: 14px;}
        .card.exe .btn {background-color: #0a8954;color:#fff !important;}
        .card.lms .btn {background-color: #f080c6;color:#fff !important;}
        .card.ass .btn {background-color: #0598ce;color:#fff !important;}

        @media(min-width:1200px) and (max-width:1439px) {
            h3 {font-size: 20px !important;
                margin-bottom: 5px !important;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                /* min-height: 49px; */
            }
            .media-view p {font-size: 12px;}
        }
        @media(min-width:992px) and (max-width:1199px) {
            h3 {font-size: 20px !important;
                margin-bottom: 5px !important;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                min-height: 49px;
            }
               
        }
        @media(min-width:768px) and (max-width:991px) {
            h3 {font-size: 20px !important;
                margin-bottom: 5px !important;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                min-height: 49px;
            }
            .media-view p{font-size: 12px;}
            .card {padding: 20px 10px !important; }
        }
        @media(max-width:767px){
        .home-pg .mt-20{margin-top: 5px !important;}
          .card-container{padding: 20px;}
          .logo img{max-width: 100px;}
          .logo{margin-bottom: 20px;}
          h1 {font-size: 1.5rem;}
          p {font-size: 0.7rem; margin-bottom: 0px !important;}
          h3 {font-size: 18px; margin-bottom: 0px !important;}
          .media-view p {font-size: 11px;margin-bottom: 10px !important;}
          .home-pg .card{padding: 10px !important;}
          .home-pg .card .circle {width: 80px !important; height: 80px !important;}
          .card .circle img {max-width: 40px !important;}
          .home-pg .card .mt-55{margin-top: 40px !important;}
          .card .btn {padding: 5px 20px;font-size: 12px;}
        }