@font-face {
    font-family: 'Tropical Tides';
    src: url('Tropical Tides Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Authora Handwriting';
    src: url('Authora Handwriting.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Franklin Gothic Book';
    src: url('FRABK.ttf') format('truetype'); 
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Franklin Gothic Medium';
    src: url('framd.ttf') format('truetype'); 
    font-weight: normal;
    font-style: normal;
}


        /* 1. Reset and Base Styles */
        * { box-sizing: border-box; }
        body, html {
            margin: 0; padding: 0; height: 100%;
           font-family: 'Franklin Gothic Medium'!important;
            background-color: #EEE9DE; /* Light mint background */
            display: flex; align-items: center; justify-content: center;
        }
p{
    
    font-family: 'Franklin Gothic Medium'!important;
}

        /* 2. Main Wrapper */
        .carousel-container {
            position: relative;
            width: 95%;
            max-width: 600px; /* Limits size on desktop */
            margin: auto;
        }

        /* 3. The Viewport (Window) */
        .carousel-viewport {
            width: 100%;
            overflow: hidden;
            background-color: #f7f3e9; /* Beige color */
            border: 2px solid #333;
            border-radius: 40px;
            box-shadow: 0 15px 35px rgba(0,0,0,0.1);
        }

        /* 4. The Sliding Track */
        .carousel-track {
            display: flex;
            transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
            width: 100%;
        }

        /* 5. Each Question Card */
        .question-card {
            min-width: 100%; 
            padding: 100px 20px 30px;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .question-label {
                font-family: 'Authora Handwriting'!important;
            font-size: 35px;
            text-transform: uppercase;
            margin-bottom: 8px;
            color: #000;
        }

        .main-title {
            font-family: 'Tropical Tides'!important;
            color: #0C8944; 
            font-size: 38px; /* Responsive font size */
            line-height: 1.2;
            margin: 0 0 10px 0;
                letter-spacing: 1px;
        }

        .subtitle {
            font-size: 16px;
            color: #000;
            margin-bottom: 25px;
            letter-spacing: 1px;
            font-family: 'Franklin Gothic Medium'!important;
        }

        /* 6. Selection Options */
        .options-grid {
            display: flex;
            gap: 35px;
            justify-content: center;
            width: 100%;
            margin-bottom: 30px;
        }

        .option-box {
                /* background: #fff; */
    border: 1px solid #000;
    border-radius: 15px;
    padding: 30px 10px;
    flex: 1;
    max-width: 160px;
    cursor: pointer;
    transition: 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
        }

        .option-box img {
            width: 100px;
            height: auto;
            margin-bottom: 10px;
        }

        .option-box p {
            font-size: 18px;
            /*font-weight: bold;*/
            margin: 0;
            color: #333;
        }

  /* 1. HOVER STYLE: Light green border and subtle lift */
        .option-box:hover {
            border-color: #0C8944;
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }

        /* 2. ACTIVE STYLE: Solid green background & white text (As per your image) */
        .option-box.active {
            background-color: #0C8944 !important; /* Brand Green */
            border-color: #000;
            transform: translateY(-2px);
        }

        .option-box.active p {
            color: #ffffff !important; /* White text when active */
        }

        /* 7. Navigation Buttons */
      .btn-action {
    background-color: #0C8944;
    color: white;
    border: none;
    padding: 10px 50px;
    border-radius: 25px;
    font-size: 16px;
    /*font-weight: bold;*/
    cursor: pointer;
    transition: 0.2s;
          font-family: 'Franklin Gothic Medium'!important;
}

        .btn-action:active { transform: scale(0.95); }

        /* Arrows - Hidden on small mobile to avoid clutter, visible on larger */
        .nav-arrow {
            z-index: 999;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            font-size: 35px;
            color: #333;
            cursor: pointer;
            opacity: 0.3;
            transition: 0.3s;
            padding: 10px;
        }
        .nav-arrow:hover { opacity: 1; }
        .prev-arrow { left: -60px; }
        .next-arrow { right: -60px; }

        /* 8. Responsive Media Queries */
        @media (max-width: 768px) {
            .nav-arrow { 
                
/*                display: none; */
            
            } /* Hide side arrows on mobile */
            .carousel-viewport { border-radius: 30px; }
            .options-grid { gap: 10px; }
        }

        @media (max-width: 400px) {
            .options-grid { 
/*                flex-direction: column; */
                align-items: center; }
            .option-box { width: 100%; max-width: 200px; }
        }
        /* Result Card Background (Red) */
.result-view-container {
    background-color: #C6202E !important; /* Screenshot-la irukura red */
    color: white !important;
    padding: 60px 25px;
}

.result-label {
    font-size: 30px;
/*    font-weight: bold;*/
    margin-bottom: 5px;
    letter-spacing: 1px;
    text-transform: uppercase;
        color: #EEE9DE;
     font-family: 'Authora Handwriting';
}

.result-title {
    font-family: 'Tropical Tides';
    color: #EEE9DE !important;
    font-size: 35px;
/*    font-weight: 900;*/
    margin: 0 0 15px 0;
    text-transform: uppercase;
        letter-spacing: 1px;
}

.result-description {
    font-family: 'Franklin Gothic Medium'!important;
    font-size: 20px;
    line-height: 1.4;
    margin-bottom: 25px;
/*    font-weight: bold;*/
     color: #EEE9DE;
}

/* Character Image Box */
.result-image-box {
    margin: 20px 0;
}

.result-image-box img {
    width: 150px;
    height: auto;
}

/* Orange Save Button Style */
.save-vibe-btn {
        background-color: #EB9F22;
    color: #000;
    border: 1px solid #000;
    padding: 12px 40px;
    border-radius: 30px;
    font-size: 16px;
    /*font-weight: 900;*/
    cursor: pointer;
    text-transform: uppercase;
    font-family: 'Franklin Gothic Medium'!important;
/*
    transition: transform 0.2s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
*/
}

.save-vibe-btn:active {
    transform: scale(0.95);
}
        img.result-logo {
    width: 25%;
    padding-bottom: 50px;
}
        .chill {
    background-color: #EB9F22 !important;
}
        .chill .result-label{
            color: #000 !important;
        }
        .chill .result-title{
            color: #000 !important;
        }
        .chill .result-description{
            color: #000 !important;
        }
        .chill .save-vibe-btn {
    background-color: #000!important;
    color: #EEE9DE!important;
}
        
        
        .sweet {
    background-color: #2EBBA9 !important;
}
        .sweet .result-label{
            color: #000 !important;
        }
        .sweet .result-title{
            color: #000 !important;
        }
        .sweet .result-description{
            color: #000 !important;
        }
        .chill .save-vibe-btn {
    background-color: #F9B92E;
    color: #000;
}

        






/* 8. MOBILE RESPONSIVE FIXES */
@media (max-width: 768px) {
    body, html{
        overflow-x: hidden;
    }
    .carousel-container { width: 95%; 
            margin-top: 60px;
    } /* Side gap for arrows */
    
    .question-card { padding: 50px 15px 10px; }
    
  
    .prev-arrow { left: -40px; } 
    .next-arrow { right: -40px; }
    
    .main-title { font-size: 24px; }
    .options-grid { gap: 15px; }
    
    
    
    .result-title {
    font-size: 26px!important;
    
}
    .result-description{
            font-size: 16px!important;
    }
    img.result-logo {
    padding-bottom: 5px!important;
}
    
}

@media (max-width: 480px) {
    .prev-arrow { left: 5px; color: #0C8944; }
    .next-arrow { right: 5px; color: #0C8944; }
/*    .options-grid { flex-direction: column; align-items: center; }*/
}