/* HERO */

        .hero {

            height: 100vh;

            background:
                linear-gradient(rgba(0, 0, 0, 0.55),
                    rgba(0, 0, 0, 0.55)),

                url('../../images/img17.jpg');

            background-size: cover;
            background-position: center;

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

            text-align: center;

            position: relative;
        }

        .hero-content {
            color: white;
            max-width: 850px;
            z-index: 2;
        }

        .hero-content h1 {

            font-size: 80px;

            font-family: 'Cinzel', serif;

            margin-bottom: 25px;

            animation: fadeDown 1.5s ease;
        }

        .hero-content p {

            font-size: 22px;

            line-height: 1.8;

            animation: fadeUp 1.5s ease;
        }



        /* SERVICES */

        .services-section {

            padding: 120px 10%;
        }

        .services-section h2 {

            text-align: center;

            font-size: 55px;

            margin-bottom: 70px;

            font-family: 'Cinzel', serif;

            color: #6d071a;
        }

        .services-grid {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            

            /* grid-template-columns:
                repeat(auto-fit, minmax(320px, 1fr)); */

            gap: 40px;
        }



        /* SERVICE CARD */

        .service-card {
            max-width: 330px;
            position: relative;
            overflow: hidden;
            border-radius: 30px;
            background: white;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
            transition: 0.5s;
        }

        .service-card:hover {
            transform:
                translateY(-15px) scale(1.02);
        }

        .service-card img {
            width: 100%;
            height: 260px;
            object-fit: cover;
            transition: 0.6s;
        }

        .service-card:hover img {

            transform: scale(1.1);
        }

        .card-content {

            padding: 35px;
        }

        .card-content h3 {

            font-size: 30px;

            margin-bottom: 15px;

            color: #6d071a;

            font-family: 'Cinzel', serif;
        }

        .card-content p {

            line-height: 1.8;

            margin-bottom: 25px;
        }



        /* BUTTON */

        button {

            padding: 14px 30px;

            border: none;

            border-radius: 50px;

            background: #d4af37;

            font-weight: bold;

            cursor: pointer;

            transition: 0.4s;
        }

        button:hover {

            transform: translateY(-5px);

            box-shadow: 0 10px 20px rgba(212, 175, 55, 0.4);
        }



        /* GLOW EFFECT */

        .glow {

            position: absolute;

            width: 200px;
            height: 200px;

            background:
                radial-gradient(#d4af37, transparent);

            top: -100px;
            right: -100px;

            opacity: 0;

            transition: 0.6s;
        }

        .service-card:hover .glow {
            opacity: 0.3;
        }



        /* EXPERIENCE */

        .experience-section {

            padding: 140px 10%;

            background: #6d071a;

            text-align: center;

            color: white;

            position: relative;
        }

        .experience-content {

            max-width: 900px;

            margin: auto;
        }

        .experience-content h2 {

            font-size: 60px;

            margin-bottom: 30px;

            font-family: 'Cinzel', serif;
        }

        .experience-content p {

            font-size: 20px;

            line-height: 2;

            margin-bottom: 40px;
        }



        /* ANIMATION */

        @keyframes fadeDown {

            from {
                opacity: 0;
                transform: translateY(-60px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }

        }

        @keyframes fadeUp {

            from {
                opacity: 0;
                transform: translateY(60px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }

        }



        /* MOBILE */

        @media(max-width:768px) {

            .hero-content h1 {
                font-size: 50px;
            }

            .services-section h2 {
                font-size: 40px;
            }

            .experience-content h2 {
                font-size: 40px;
            }

        }