.info-tip {
    padding: 15px;
    padding-left: 45px;
    margin-bottom: 15px;
    border: 1px solid #24bcb4; /* Using your teal color */
    border-radius: 4px;
    background-color: lightgray;  /* Light teal background */
    font-family: 'Arial', sans-serif; /* Casual Font */
    position: relative;
}

.info-tip::before {
    content: '\f05a'; /* FontAwesome info-circle icon */
    font-family: 'FontAwesome';
    color: #24bcb4;
    position: absolute;
    left: 10px;
    top: 10px;
       transform: none;  /* Removed translateY(-50%) */
    font-size: 25px;
    margin-right: 10px;
}

/* Insight Section (Script Analysis) */
.insight {
    padding: 15px;
    padding-left: 35px;
    margin-bottom: 15px;
    border: 1px solid #093a54; /* Using your dark blue color */
    border-radius: 4px;
    background-color: #e3f2fd; /* Light blue background for contrast */
    font-family: 'Roboto', sans-serif; /* Modern Font */
    position: relative;
}

.insight::before {
    content: '\f6e5'; /* FontAwesome chart-line icon */
    font-family: 'FontAwesome';
    color: #093a54;
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    margin-right: 10px;
}

/* Suggestions Section (Script Improvement) */
.suggestions {
    padding: 15px;
    padding-left: 35px;
    margin-bottom: 15px;
    border: 1px solid #2196f3; /* Red color for attention */
    border-radius: 4px;
    background-color: #e3f2fd; /* Light red background for contrast */
    font-family: 'Roboto', sans-serif; /* Modern Font */
    position: relative;
}

.suggestions::before {
    content: '\f0eb'; /* FontAwesome lightbulb icon */
    font-family: 'FontAwesome';
    color: #2196f3;
    position: absolute;
    left: 15px;
    top: 10px;
    font-size: 25px;
    margin-right: 10px;
}

/* Insights Section (Key Takeaways) */
.insights {
    padding: 15px;
    padding-left: 35px;
    margin-bottom: 15px;
    border: 1px solid #607d8b; /* Muted blue-gray */
    border-radius: 4px;
    /* background-color: #eceff1; Soft neutral background */
    font-family: 'Roboto', sans-serif;
    position: relative;
}

.insights::before {
    content: '\f0d0'; /* FontAwesome eye icon */
    font-family: 'FontAwesome';
    color: #607d8b;
    position: absolute;
    left: 15px;
    top: 10px;
    font-size: 22px;
}

.btn-srai {
    background-color: #083A54;
    color: white;
    /* Ensures text is visible on the dark background */
}
.btn-srai:hover {
    background-color: #072c46; /* Slightly darker shade for hover */
    color: white;
}


.grade1 {
    background-color: rgba(255, 11, 11, 1) !important;
}

.grade2 {
    background-color: rgba(255, 11, 11, 0.85) !important;
}

.grade3 {
    background-color: rgba(255, 11, 11, 0.5) !important;
}

.grade4 {
    background-color: rgba(255, 11, 11, 0.3) !important;
}

.grade5 {
    background-color: rgba(255, 151, 11, 0.4) !important;
}

.grade6 {
    background-color: rgba(255, 151, 11, 0.3) !important;
}

.grade7 {
    background-color: rgba(11, 255, 11, 0.3) !important;
}

.grade8 {
    background-color: rgba(11, 255, 11, 0.5) !important;
}

.grade9 {
    background-color: rgba(11, 255, 11, 0.75) !important;
}

.grade10 {
    background-color: rgba(11, 255, 11, 0.9) !important;
}

.weaknesses-fieldset {
    border-radius: 8px;
    border: 3px solid darkblue;
    background-color: pink;
    padding: 5px;
}

.weaknesses-legend {
    all: unset;
    color: darkblue;
    padding: 3px;
    font-size: 1.5em;
}

.strengths-fieldset {
    border-radius: 8px;
    border: 3px solid darkblue;
    background-color: lightgreen;
    padding: 5px;
}

.strengths-legend {
    all: unset;
    color: darkblue;
    padding: 3px;
    font-size: 1.5em;
}

.suggestions-fieldset {
    border-radius: 8px;
    border: 3px solid black;
    /* Or replace 'black' with the color you want */
    padding: 5px;
}

.suggestions-legend {
    all: unset;
    padding: 3px;
    font-size: 1.5em;
}

.critique-fieldset {
    border-radius: 8px;
    border: 3px solid darkblue;
    padding: 5px;
}

.critique-legend {
    all: unset;
    color: darkblue;
    padding: 3px;
    font-size: 1.5em;
}

.summary-fieldset {
    border-radius: 8px;
    border: 3px solid teal;
    padding: 5px;
}

.summary-legend {
    all: unset;
    color: teal;
    padding: 3px;
    font-size: 1.5em;
}

html,
body {
    height: 100% !important;
}

body {
    overflow-x: hidden !important;
    display: flex;
    flex-direction: column;
}

@media screen and (max-height: 100vh) {
    body {
        min-height: 100vh;
    }
}

/* Generic */

.bg_primary {
    background-color: #083A54 !important;
}

.bg_secondary {
    background-color: #23BAB1 !important;
}

.text_primary {
    color: #083A54 !important;
}

.text_secondary {
    color: #23BAB1 !important;
}

.primary_btn {
    border: 2px solid #083A54;
    background-color: #083A54;
    color: #fff;
}

.primary_btn:hover,
.primary_btn:focus {
    border: 2px solid #083A54;
    transition: all 0.3s ease-in-out !important;
}

.secondary_btn {
    border: 2px solid #083A54;
    background-color: #083A54 !important;
    color: #fff !important;
    transition: all 0.3s ease-in-out !important;
}

.secondary_btn:hover {
    background-color: #0c4b6d !important;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 5px 55px !important;

}

.inputFile::-webkit-file-upload-button {
    background-color: #083A54 !important;
    color: #fff !important;
}

.table {
    overflow-x: auto !important;
    width: 100% !important;
}

a {
    text-decoration: none;
    color: #23BAB1;
}

label {
    font-weight: 600;
}

textarea {
    text-align: left !important;
}

input {
    border: 2px solid #083A54 !important;
}

input:focus {
    box-shadow: none !important;
}

textarea:focus {
    box-shadow: none !important;
}

.layout_margin {
    margin-top: 60px !important;
}

main {
    flex: 1 !important;
}

/* Navbar */

.navbar {
    z-index: 1000;
}

.navBar .nav-item .nav-link {
    color: #fff !important;
    border-bottom: 4px solid #083A54;
    font-weight: bold;
    font-size: 18px;
} 
.navBar .nav-item .nav-link.computer-screen {
    font-weight: 700;
}
#navbar .nav-item.active .nav-link,
#navbar .nav-item .nav-link:hover,
#navbar .nav-item .nav-link:focus {
    border-color: #fff !important;
}
.navBar .nav-item {
    margin: 0 30px;
}

@media (max-width:1600px){
    .navBar .nav-item .nav-link {font-size: 1rem;}
    .navBar .nav-item {margin-inline: 10px;}
}
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-toggler-icon i {
    display: none;
}
.navbar-toggler:focus {
    box-shadow: none !important;
}

.navbar-toggler {
    border: none !important;
}

.logo {
    border: 3px solid #23BAB1;
}


/*  Home Page */

.banner-wrapper {
    position: relative;
    background-image: url(/pages/assets/images/banner.jpg);
    background-size: cover;
    background-position: center;
    width: 100%;
}

.banner-wrapper::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    pointer-events: none;
    /* z-index: 1; */
}

.banner-text {
    z-index: 1;
    position: relative;
}

.banner-text h1 {
    font-weight: bold;
    font-size: 3.2vw;
}

.banner-text p {
    font-size: 1.6vw;
}

.banner-btn:focus,
.banner-btn {
    background-color: #23BAB1 !important;
    transition: all 0.3s ease-in-out;
    border: none !important;
}

.banner-btn:hover {
    background-color: #23BAB1 !important;
    transform: scale(1.1);
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

.home_p {
    font-size: 20px;
    letter-spacing: 1px;
}

.features_section {
    background-color: #e8f3f2;
}


.featureItem {
    cursor: pointer;
    transition: all 0.3s ease-in-out !important;
    /* box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; */
    /* border: 2px solid #083A54; */
}

.featureItem:hover {
    transform: translateY(-8px);
}

.transition {
    transition: all 0.3s ease-in-out !important;
}

.transition:hover {
    transform: translateY(-8px) !important;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.border_primary {
    border: 2px solid #083A54;
}

footer ul li a:hover {
    color: #23BAB1 !important;
}

footer ul li a {
    color: #fff !important;
}


/* Tabs */

.nav-tabs {
    background-color: #083A54 !important;
    border-radius: 8px;
}

.nav-tabs .nav-item button {
    border-radius: 0 !important;
    color: #fff;
    border-radius: 8px !important;
    font-size: 20px;
}

.nav-tabs .nav-item button:hover {
    border-color: #23BAB1;
}

.nav-tabs .nav-item .active {
    background-color: #23BAB1 !important;
    border-color: #23BAB1;
    color: #fff;
}

.nav-tabs .nav-item {
    padding: 6px 6px 7px 6px !important;
}

.nav-tabs .dropdown-menu {
    background-color: #083A54 !important;
    border: none !important;
    border-radius: 8px !important;
    margin-top: 0;
    /* To align the dropdown directly below the tab */
}

.nav-tabs .dropdown-item {
    color: white;
}

.nav-tabs .dropdown-item:hover {
    background-color: #23BAB1 !important;
    color: white;
}

.nav-tabs .dropdown-item.active {
    background-color: #23BAB1 !important;
    color: white;
}

.bg_success {
    background-color: #e9fae9 !important;
}

.bg_danger {
    background-color: #f7e4e4 !important;
}

.border_secondary {
    border-color: #23BAB1 !important;
}

table>thead>tr>th {
    background-color: #083A54 !important;
    color: #fff !important;
    text-align: center;
    vertical-align: middle;
}

td,
tr {
    vertical-align: middle;
    text-align: center;
}

table {
    width: 100% !important;
    overflow-x: auto !important;
    max-width: 100% !important;
}

.inputToggle {
    position: absolute !important;
    right: 50% !important;
    top: 30% !important;
}

.form-check-input:checked {
    background-color: #083A54 !important;
    border-color: #083A54 !important;
    box-shadow: none !important;
}

.form-check-input:focus {
    box-shadow: none !important;
}

textarea:focus {
    border-color: #083A54 !important;
}

.link {
    text-decoration: none;
}

.link:hover {
    text-decoration: underline;
}

.editable-text {
    margin: 0 !important;
    width: 100%;
    white-space: pre-line !important;
    text-align: left !important;
}


/* Data Table */

.dataTables_info,
.dataTables_paginate,
.dataTables_length,
.dataTables_filter {
    display: none !important;
}

table.dataTable thead .sorting_asc {
    background-image: none !important;
}

/* Analyze this */

.mainContent_analyze {
    border: 4px solid #083A54;
}

.contactTextarea {
    border: 2px solid #083A54 !important;
}

.blog a {
    color: #083A54 !important;
}

.blog_border {
    border: 4px solid #23BAB1;
}

.primary_border {
    border-bottom: 3px double #000;
}

#subLink {
    color: #23BAB1 !important;
}

#subLink:hover {
    text-decoration: underline;
}

/* Buy */


.btn_buy {
    background-image: linear-gradient(to right, #083A54 0%, #26D0CE 51%, #083A54 100%);
    transition: 0.5s;
    background-size: 200% auto;
    box-shadow: 0 0 20px #eee;
    display: block;
}

.btn_buy:hover {
    background-position: right center;
    /* change the direction of the change here */
    color: #fff;
    text-decoration: none;
}

.videoSection {
    background-color: rgb(114, 243, 230);
}

.featureSection {
    background-color: #5bc6ff;
}

.switch-input {
    width: 70px !important;
    height: 35px;
    transition: all 0.3s ease-in-out !important;
}

.socialIcons i {
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

.socialIcons i:hover {
    color: #23BAB1 !important;
}

.below_section button {
    color: #fff !important;
}


/* Media Queries */

@media screen and (max-width: 993px) {
    .featureItem {
        height: fit-content !important;
    }

    .text_center_lg {
        text-align: center !important;
    }
}

@media screen and (max-width: 769px) {
    .video {
        height: 400px !important;
    }

    .banner-text p {
        font-size: 3vw !important;
    }
}

@media screen and (max-width: 600px) {

    .home_p {
        font-size: 16px;
    }

    h2 {
        font-size: 20px;
    }

    h4 {
        font-size: 18px;
    }

    .mobile_width {
        width: 100% !important;
    }

    .navBar .nav-item {
        margin: 0 10px;
    }

    .banner-btn {
        font-size: 13px !important;
    }

    .video {
        height: 300px !important;
    }

    footer p,
    footer li {
        font-size: 14px;
    }

}
/* ----------------------------------------------------------------------------
   Legacy (pre-DeepSeek) score colors.
   The default .gradeN ramp is the new DeepSeek mid-anchored palette. Legacy
   GPT-3.5 scripts score higher and were authored under the original
   red->orange->green ramp, so showing them under the new ramp makes them look
   muted/wrong. When a page sets <body class="legacy-scores"> (analysis views do
   this when the movie has no DeepSeek scores), restore the original palette.
   Higher specificity than the bare .gradeN rules, so it wins regardless of
   stylesheet order. DeepSeek scripts (no legacy-scores class) keep the new ramp.
---------------------------------------------------------------------------- */
.legacy-scores .grade0  { background-color: rgba(255, 11, 11, 1)    !important; }
.legacy-scores .grade1  { background-color: rgba(255, 11, 11, 1)    !important; }
.legacy-scores .grade2  { background-color: rgba(255, 11, 11, 0.85) !important; }
.legacy-scores .grade3  { background-color: rgba(255, 11, 11, 0.5)  !important; }
.legacy-scores .grade4  { background-color: rgba(255, 11, 11, 0.3)  !important; }
.legacy-scores .grade5  { background-color: rgba(255, 151, 11, 0.4) !important; }
.legacy-scores .grade6  { background-color: rgba(255, 151, 11, 0.3) !important; }
.legacy-scores .grade7  { background-color: rgba(11, 255, 11, 0.3)  !important; }
.legacy-scores .grade8  { background-color: rgba(11, 255, 11, 0.5)  !important; }
.legacy-scores .grade9  { background-color: rgba(11, 255, 11, 0.75) !important; }
.legacy-scores .grade10 { background-color: rgba(11, 255, 11, 1)    !important; }