@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* body {
    font-family: 'Montserrat', sans-serif;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
} */

body {
    font-family: 'Montserrat', sans-serif;
    background-color: #ffffff;
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Prevents side-scrolling */
}

/* .container {
            display: flex;
            width: 100%;
            min-height: 600px;
            overflow: hidden;
        } */

        .container {
            display: flex;
            width: 100%;
            min-height: 100vh;
            align-items: stretch; /* Ensures both panels are the same height */
        }

        /* Left Section: Branding */
        .left-panel {
            flex: 1;
            padding: 40px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
        }

        .mpp-header {
        display: flex;
        align-items: center; /* Vertically centers the text with the logo */
        gap: 15px;           /* Adds space between logo and text */
        align-self: flex-start;
        margin-bottom: 70px;
        margin-top: -40px;
        }

        .mpp-logo {
            width: 120px;         /* Adjusted size to fit better next to text */
            height: auto;
        }

        .mpp-title {
            font-size: 23px;
            font-weight: 600;
            color: #1a3a6d;      /* A professional blue often used in govt logos */
            letter-spacing: 0.5px;
            text-transform: uppercase;
        }

        .tims-main-logo {
            max-width: 500px;
            height: auto;
            margin-bottom: 20px;
            margin-top: -100px;
        }

        .brand-text h2 {
            font-size: 1.2rem;
            color: #b09e3a;
            letter-spacing: 1px;
            font-weight: 600;
        }

        .brand-text p {
            font-size: 0.9rem;
            color: #333;
            letter-spacing: 2px;
            margin-top: 5px;
        }

        /* Right Section: Content with Gradient */
        .right-panel {
            flex: 1;
            background: linear-gradient(180deg, #cbd468 0%, #ecf1bc 100%);
            padding: 0px 40px;
            border-bottom-left-radius: 120px;
            color: #fff;
            display: flex;
            flex-direction: column;
            justify-content: center;
            margin-left: 30px;
        }

        .right-panel h1 {
            font-size: 2.5rem;
            font-weight: 700;
            line-height: 1.1;
            margin-bottom: 10px;
            margin-top: 80px;
            text-transform: uppercase;
        }

        .subtitle {
            font-size: 0.9rem;
            letter-spacing: 4px;
            margin-bottom: 40px;
            font-weight: 600;
            color: #56381C;
        }

        .description {
            font-size: 0.95rem;
            line-height: 1.6;
            margin-bottom: 20px;
            color: #56381C;
            text-align: justify;
        }

        /* Button Styling */
        .btn-teroka {
            display: inline-flex;
            align-items: center;
            justify-content: space-between;
            background-color: #98a725;
            color: white;
            text-decoration: none;
            padding: 15px 30px;
            border-radius: 50px;
            width: fit-content;
            margin-top: 30px;
            font-weight: 700;
            transition: background 0.3s ease;
            min-width: 200px;
            align-self: flex-end;
        }

        .btn-teroka:hover {
            background-color: #7e8b1e;
        }

        .arrow-icon {
            background: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: 15px;
            border: 2px solid #fff;
        }

        /* Slider Section Styling */
        .slider-section {
            /* background-color: #f9f9f9;  */
            padding: 80px 0;
            width: 100%;
            overflow: hidden;
        }

        .slider-track {
            display: flex;
            gap: 30px;
            will-change: transform;
        }

        .image-container {
            flex-shrink: 0;
            width: 200px;  /* Slightly bigger for impact */
            height: 250px;
        }

        .oval-frame {
            width: 100%;
            height: 100%;
            border-radius: 46%;
            border: 10px solid #cbd468; /* Using your leaf color */
            overflow: hidden;
        }

        .oval-frame img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .map-section {
            padding: 60px 20px;
            background-color: #ffffff;
            display: flex;
            justify-content: center;
        }

        .map-container {
            width: 100%;
            max-width: 1000px; /* Adjust based on your preference */
            position: relative;
            background-color: #98a725; /* The olive green color */
            border-radius: 60px; /* Creates the outer curved shape */
            padding-top: 80px; /* Space for the green header area */
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }

        .map-header {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 80px;
            /* background-color: #98a725; */
        }

        .map-frame-wrapper {
            background: #fff;
            border-radius: 50px; 
            margin: 0 15px 15px 15px; 
            overflow: hidden; /* This acts as the scissors to cut off the header */
            height: 600px; /* Adjust height to your preference */
            position: relative;
        }

        .map-frame-wrapper iframe {
            width: 100%;
            height: calc(100% + 70px); /* Make it taller to compensate for the crop */
            border: none;
            
            /* Pushes the header up and out of the container */
            margin-top: -70px; 
            
            /* Important for smooth rendering */
            position: absolute;
            top: 0;
            left: 0;
        }
        /* Responsive Design */
        @media (max-width: 1285.60px) {
    /* Ensure the main container allows the children to shrink */
        .container {
            display: flex;
            gap: 0px; /* Adds a consistent gap instead of negative margins */
            padding: 0 0px; /* Prevents panels from touching screen edges */
        }

        .left-panel, .right-panel {
        flex: 1; /* Keeps them equal width until they stack */
        margin: 0; /* Remove those negative margins to prevent overlapping */
        }

        .right-panel h1 {
            font-size: 2rem; 
        }

        .mpp-title{
            font-size: 18px;
        }
    }
        @media (max-width: 992px) {
            .container {
                flex-direction: column;
            }
            .left-panel {
                margin-top: 0px;
                padding: 40px 20px;
            }
            .right-panel {
                border-bottom-left-radius: 80px;
                /* border-top-right-radius: 40px; */
                padding: 60px 30px;
                margin-left: 0px;
            }
            .mpp-logo {
                align-self: center;
            }

            .mpp-header {
                align-self: center;
                justify-content: center;
                margin-top: 0px;
            }

            .mpp-title{
                font-size: 20px;
            }
        }

        @media (max-width: 768px) {
            .map-container {
                border-radius: 30px;
            }
            .map-frame-wrapper {
                border-radius: 25px;
                height: 400px; /* Shorter on mobile */
            }
        }

        @media (max-width: 600px) {
            .right-panel h1 {
                font-size: 1.8rem;
            }
            .tims-main-logo {
                max-width: 400px;
            }

            .mpp-header {
            gap: 0px; 
            }

            .mpp-title{
                font-size: 18px;
            }
        }

         @media (max-width: 442px) {
        
            .tims-main-logo {
                max-width: 300px;
            }

            .mpp-logo{
                max-width: 100px;
            }

            .mpp-title{
                font-size: 15px;
            }
        }