/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */
/* Grid Layout */
        .card-wrapper {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 30px;
        }
 
        /* Card Base */
        .card {
            position: relative;
            height: 420px;
            padding: 40px 30px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            overflow: hidden;
            cursor: pointer;
            transition: all .4s ease;
            color: #fff;
        }
 
        .card:hover {
            transform: translateY(-8px);
        }
 
        /* Dark Card */
        .card::after {
            background: linear-gradient(180deg, #0a0f2c 0%, #050714 100%);
            color: #fff;
            opacity: 1;
            content: "";
            height: 100%;
            width: 100%;
            position: absolute;
            transition: all 0.6s ease;
            right: -200%;
            top: 0;
        }
 
        .card:hover::after {
            right: 0;
 
        }
 
        .card:hover .text-dd {
            display: none;
            transition: all 0.6s;
        }
 
 
        .card:hover img {
            scale: 2;
            transition: all 0.5s;
        }
 
        /* Content */
        .card-content {
            display: flex;
            flex-direction: column;
            height: 100%;
            position: relative;
            z-index: 11;
        }
 
        .tag {
            font-size: 12px;
            letter-spacing: 1px;
            font-weight: 600;
            margin-bottom: 20px;
            opacity: .85;
        }
 
        .card h2 {
            font-size: 22px;
            line-height: 1.3;
            opacity: 1;
            font-weight: 600;
            margin-bottom: 15px;
        }
 
        /* Hidden by default */
        .card p,
        .card .expand-btn {
            opacity: 0;
            transform: translateX(100%);
            transition: all .8s ease;
        }
 
        /* Show on Hover */
        .card:hover p,
        .card:hover .expand-btn {
            opacity: 1;
            transform: translateY(0);
        }
 
        .card p {
            font-size: 15px;
            line-height: 1.6;
            margin-bottom: 20px;
        }
 
 
        /* Button */
        .expand-btn {
            margin-top: auto;
            text-decoration: none;
            font-weight: 500;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            justify-content: end;
        }
 
        .card a {
            color: #fff !important;
        }
 
        .light-card .expand-btn {
            color: #000;
        }
 
        .expand-btn span {
            font-size: 18px;
        }
 
        /* Responsive */
        @media(max-width:1200px) {
            .card-wrapper {
                grid-template-columns: repeat(2, 1fr);
            }
        }
 
        @media(max-width:768px) {
            .card-wrapper {
                grid-template-columns: 1fr;
            }
        }
 
 
 
        .card-wrapper .card img {
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            object-fit: cover;
        }