/* body {
    font-family: var(--font-primary);
} */
    /* Default navbar style */
    
    .navbar {
        transition: box-shadow 0.3s ease;
    }
    /* Scroll hone par shadow add hoga */
    
    .navbar.scrolled {
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    }
    
    .navbar {
        padding-top: 0;
        padding-bottom: 0;
        padding-right: 2rem !important;
        padding-left: 2rem !important;
        height: 70px;
        position: fixed;
        /* Upar fix ho jayega */
        top: 0;
        left: 0;
        width: 100%;
        z-index: 999;
        background-color: #fff;
    }
    
    .navbar-nav .nav-link {
        font-weight: 500;
        color: #202124;
    }
    
    .navbar-nav .nav-link {
        position: relative;
        /* underline ke liye */
    }
    
    .navbar-nav .nav-link.active::after {
        content: '';
        position: absolute;
        width: 50%;
        /* jitni chhoti chahiye utna percent karo */
        height: 3px;
        background-color: var(--google-green);
        bottom: -11px;
        /* Center karne ke liye */
        left: 50%;
        transform: translateX(-50%);
        border-radius: 2px;
    }
    
    .navbar-light .navbar-nav .nav-link.active,
    .navbar-light .navbar-nav .show>.nav-link {
        color: var(--google-green);
    }
    
    .nav-link {
        display: block;
        padding: .9rem 1rem;
    }
    /* .navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    width: 0%;
    height: 3px;
    background-color: #4285F4;
    bottom: 0;
    left: 0;
    transition: 0.3s;
} */
    
    .navbar-nav .nav-link:hover::after {
        width: 100%;
    }
    
    .right_col {
        /* border: 1px solid #000; */
        display: flex;
        align-items: center;
        gap: 5px;
    }
    
    .login_icon img {
        width: 33px;
        height: 33px;
        border-radius: 50%;
    }
    
    .navbar-brand img {
        width: 150px;
        height: 80px;
        /* object-fit: cover; */
    }
    
    .navbar-nav .nav-item {
        margin-right: 10px;
        font-size: 14px;
    }
    /* ----------------------- */
    
    .search_icon,
    .help_icon,
    .login_icon {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        /* clickable area */
        height: 40px;
        cursor: pointer;
    }
    
    .search_icon::after,
    .help_icon::after,
    .login_icon::after {
        content: "";
        position: absolute;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: transparent;
        transition: background-color 0.2s ease;
        z-index: 0;
        /* stays behind icon */
    }
    
    .search_icon:hover::after,
    .help_icon:hover::after,
    .login_icon:hover::after {
        background-color: #f1f3f4;
        /* light gray circle */
    }
    
    .search_icon svg,
    .help_icon svg,
    .login_icon svg,
    .login_icon img {
        position: relative;
        z-index: 1;
        /* stays above the circle */
        display: block;
        border-radius: 50%;
        /* optional: if login image is round */
    }
    /* ----------------------- */
    
    .row_padding {
        padding: 117px 0 65px;
    }
    
    .headline_area .headline_h1 {
        font-size: 55px;
        color: rgb(32, 33, 36);
        margin-bottom: 5px;
        font-weight: 600;
        font-family: var(--font-primary);
    }
    
    .subheadline {
        font-size: 15px;
        color: var( --google-green);
        /* font-weight: 600; */
        font: inherit;
    }
    
    .headline_area small {
        color: var( --text1);
        font-size: 12px;
    }
    
    .rating_area {
        display: flex;
        gap: 50px;
        margin-top: 20px;
        text-align: center;
    }
    /* loctaion search bar, returorder,
MENU 
LOGO
PRODUCTS OLD SAME 
80% */
    /* Phone icon patla */
    
    .icon-phone {
        font-size: 20px;
        /* size control */
        transform: scaleX(0.8);
        /* thoda patla */
    }
    /* Tablet icon wide */
    
    .icon-tablet {
        font-size: 22px;
        /* size control */
        transform: scaleX(1.1);
        /* thoda wide */
    }
    
    .downloads,
    .reviews {
        position: relative;
    }
    /* Right side vertical line */
    
    .downloads::after,
    .reviews::after {
        content: '';
        position: absolute;
        right: -24px;
        top: 14%;
        height: 65%;
        width: 1px;
        background-color: #a3a0a042;
    }
    
    .Rated {
        padding-left: 25px;
    }
    
    .reviews_top,
    .download_number,
    .rated_number {
        font-size: 13px;
        color: var(--text2);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        font-weight: 500;
    }
    
    .reviews_top i {
        font-size: 12px;
    }
    
    .rated_box img {
        width: 17px;
        height: 16px;
    }
    
    .reviews_bottom,
    .downloads_name,
    .rated_list {
        font-size: 12px;
        letter-spacing: 0.2px;
    }
    
    .reviews_bottom,
    .downloads_name {
        color: rgb(95, 99, 104);
        ;
    }
    
    .rated_list {
        color: #000;
        display: flex;
        gap: 5px
    }
    
    .i_circle {
        display: block;
        width: 17px;
        height: 17px;
        border-radius: 50%;
        font-weight: 700;
        rotate: 180deg;
    }
    
    .i_circle svg {
        height: 17px;
        width: 15px;
    }
    
    .button_area {
        display: flex;
        gap: 10px;
        margin-top: 30px;
        align-items: center;
    }
    
    .install_btn {
        background-color: #01875f;
        border: none;
        border-radius: 10px;
        padding: 3px 15px;
        height: 48px;
        width: 200px;
        font-size: 16px;
        /* #f6fafe */
        font-weight: 500;
    }
    
    .install_btn:hover {
        background-color: #027855;
    }
    
    .share_button,
    .add_wishlist {
        color: #01875f;
        font-size: 14px;
        font-weight: 500;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 3px 15px;
        height: 48px;
        border-radius: 10px;
        cursor: pointer;
    }
    
    .share_button:hover {
        background-color: #f6fafe;
    }
    
    .add_wishlist:hover {
        background-color: #f6fafe;
    }
    
    .col_right {
        display: flex;
        align-items: center;
        justify-content: end;
    }
    /* .img_wrap1 {
    text-align: end;
} */
    
    .screm {
        display: flex;
        align-items: center;
        margin-top: 25px;
        gap: 7px;
    }
    
    .screm img {
        width: 35px;
    }
    
    .screm p {
        margin-bottom: 0;
        color: var(--text1);
        font-size: 14px;
    }
    
    .app1 {
        width: 240px;
        box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15);
        border-radius: 40px;
    }
    
    @media screen and (max-width:767px) {
        .col_right {
            margin-top: 20px;
            justify-content: center;
        }
        .headline_area h1 {
            font-size: 25px;
        }
    }
    /* -------------------------------- */
    
    .paddingl {
        padding-left: 50px;
    }
    
    .app_screenshort {
        overflow-x: auto;
        white-space: nowrap;
        padding: 10px 80px 0 0;
        scrollbar-width: none;
    }
    
    .app_screenshort::-webkit-scrollbar {
        display: none;
    }
    
    .cards-container {
        display: flex;
        gap: 10px;
    }
    
    .cards-container .card {
        flex: 0 0 auto;
        /* height: 150px; */
        background: #ddd;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
    }
    
    .cards-container .card img {
        width: 100%;
        border-radius: 7px;
    }
    /* LG screen - 5 cards in view */
    
    @media (min-width: 992px) {
        .card {
            width: calc((100% / 5) - 8px);
            /* gap adjust */
        }
    }
    /* Small screen - 4 cards, last half visible */
    
    @media (max-width: 991px) {
        .cards-container .card {
            width: calc(100% / 3.5);
        }
    }
    /* --------------------- */
    
    .info_container {
        margin-top: 20px;
    }
    
    .headline_arrow {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 22px;
        font-weight: 500;
        cursor: pointer;
        width: fit-content;
        gap: 10px;
        color: rgb(32, 33, 36);
    }
    
    .arrow_icon {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        transition: background-color 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .headline_arrow:hover .arrow_icon {
        background-color: #eee;
    }
    
    .p_content {
        overflow: hidden;
        text-overflow: ellipsis;
        color: var(--text1);
    }
    
    .p_content div {
        margin-top: 15px;
    }
    
    .updated {
        color: rgb(32, 33, 36);
        font-family: "Google Sans", Roboto, Arial, sans-serif;
        font-size: .875rem;
        letter-spacing: .0178571429em;
        font-weight: 500;
    }
    
    .updated1 {
        margin-top: 20px;
    }
    
    .updated1 p {
        color: #5f6368;
        font-size: 14px;
    }
    
    .bsa {
        padding: 17px 6px;
    }
    
    .ert {
        background-color: #fff;
        border: 1px solid rgb(95 99 104 / 44%);
        color: #6f7377;
        font-size: 13px;
        padding: 5px 20px;
        border-radius: 30px;
        font-weight: 500;
    }
    
    .data_safty {
        margin-bottom: 30px;
    }
    
    .data_safty p {
        color: var(--text1);
    }
    /* --------------------------- */
    
    .privacy-card {
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 16px;
        background: #fff;
        margin-bottom: 30px;
    }
    
    .privacy-item {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 14px;
    }
    
    .privacy-item i {
        font-size: 20px;
        color: #555;
        flex-shrink: 0;
    }
    
    .privacy-text {
        flex: 1;
    }
    
    .privacy-title {
        font-size: 14px;
        font-weight: 500;
        color: var(--text1);
    }
    
    .privacy-text a {
        color: var(--text1);
        /* text-decoration: none; */
    }
    
    .privacy-text p {
        font-size: 14px;
        color: var(--text1);
        text-decoration: none;
    }
    
    .privacy-text a:hover {
        text-decoration: underline;
    }
    
    .see-details {
        display: inline-block;
        margin-top: 5px;
        font-size: 14px;
        color: #01875f;
        text-decoration: none;
        font-weight: 500;
    }
    
    .see-details:hover {
        text-decoration: underline;
    }
    /* -------------------------- */
    
    .ratings-tabs {
        display: flex;
        gap: 15px;
        margin-bottom: 43px;
    }
    
    .ratings-tabs .material-symbols-outlined {
        font-size: 17px
    }
    
    .ratings-tabs button {
        border: 1px solid #ccc;
        background: transparent;
        padding: 4px 20px;
        border-radius: 20px;
        cursor: pointer;
        font-size: 14px;
        display: flex;
        align-items: center;
        gap: 7px;
        font-weight: 500;
    }
    
    .ratings-tabs button.active {
        background: #e6f4ea;
        color: #01875f;
        border-color: #01875f;
        border: none;
    }
    
    .ratings-body {
        display: flex;
        gap: 20px;
        align-items: center;
    }
    
    .rating-score {
        text-align: center;
    }
    
    .rating-score h1 {
        font-size: 55px;
        margin: 0;
        line-height: 1;
        font-weight: 400;
    }
    
    .stars {
        font-size: 18px;
        color: #01875f;
    }
    
    .total-reviews {
        font-size: 13px;
        color: var(--text1);
        font-weight: 500;
    }
    
    .rating-score {
        text-align: center;
        padding-top: 37px;
    }
    
    .ratings-section {
        padding-bottom: 60px;
    }
    
    .rating-bars {
        flex: 1;
    }
    
    .bar {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 0px;
    }
    
    .bar span {
        font-size: 12px;
        width: 12px;
        color: var(--text1);
    }
    
    .bar-bg {
        flex: 1;
        height: 10px;
        background: #e0e0e0;
        border-radius: 20px;
        overflow: hidden;
    }
    
    .bar-fill {
        height: 100%;
        background: #01875f;
        border-radius: 4px;
    }
    /* -------------------------------- */
    
    .review-card {
        padding: 16px 0;
        /* font-family: "Google Sans", Roboto, Arial, sans-serif; */
        margin-bottom: 20px;
    }
    
    .review-header {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        position: relative;
        margin-bottom: 25px;
    }
    
    .avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        object-fit: cover;
    }
    
    .reviewer-info {
        flex: 1;
    }
    
    .reviewer-name {
        font-weight: 500;
        font-size: 15px;
    }
    
    .review-rating-date {
        font-size: 13px;
        color: #5f6368;
        display: flex;
        align-items: center;
        gap: 6px;
    }
    
    .fin {
        display: flex;
        align-items: center;
        gap: 25px;
        padding: 10px 0;
    }
    
    .fin p {
        margin-bottom: 0;
    }
    
    .add_wishlist:hover .stars {
        color: #01875f;
        font-size: 20px;
    }
    
    .menu-icon {
        position: absolute;
        right: 0;
        top: 4px;
        cursor: pointer;
        color: #5f6368;
    }
    
    .review-text {
        font-size: 16px;
        margin-top: 8px;
        line-height: 1.5;
        color: var(--text1);
    }
    
    .review-footer {
        margin-top: 12px;
        font-size: 13px;
        color: rgb(95, 99, 104);
    }
    /* .nav_inner */
    
    .helpful-buttons {
        display: flex;
        gap: 8px;
    }
    
    .helpful-buttons button {
        border: 1px solid #dadce0;
        background: transparent;
        padding: 2px 18px;
        border-radius: 999px;
        font-size: 13.9px;
        cursor: pointer;
        color: var(--text1);
        font-weight: 500;
    }
    
    .helpful-buttons button:hover {
        background: #f1f3f4;
    }
    
    .whats_new .what-name {
        font-size: 22px;
        font-weight: 500;
        cursor: pointer;
        width: fit-content;
        gap: 10px;
        color: rgb(32, 33, 36);
    }
    
    .flag {
        display: flex;
        align-items: center;
        gap: 20px;
        font-size: 15px;
        color: var(--text1);
        margin-bottom: 45px;
    }
    
    .flag .material-symbols-outlined {
        font-size: 22px;
    }
    
    .info001 {
        color: var(--text1);
        letter-spacing: 0.4px;
        padding: 30px 0;
    }
    /* ------------------------------ */
    
    .nav_inner {
        display: flex;
        /* border: 1px solid; */
        width: 500px;
        justify-content: space-between;
        padding: 25px 0;
    }
    
    .ps-footer {
        /* font-family: "Roboto", Arial, sans-serif; */
        color: rgb(95, 99, 104);
        /* border-top: 1px solid #e0e0e0; */
        padding: 0px 0;
    }
    
    .ps-row {
        display: flex;
        gap: 32px;
        align-items: flex-start;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    
    .ps-top {
        margin-bottom: 12px;
    }
    
    .ps-cluster {
        display: flex;
        flex-wrap: wrap;
        gap: 14px 18px;
    }
    
    .ps-cluster.vertical {
        flex-direction: column;
        gap: 8px;
    }
    
    .ps-cluster .ps-head {
        font-weight: 500;
        font-size: 17px;
        margin-bottom: 6px;
    }
    
    .ps-cluster a,
    .ps-legal a {
        color: rgb(95, 99, 104);
        text-decoration: none;
        font-size: 15px;
        letter-spacing: 0.2px;
        font-weight: 500;
    }
    
    .ps-cluster a:hover,
    .ps-legal a:hover {
        text-decoration: underline;
    }
    
    .border-top {
        border-top: 1px solid rgb(232, 234, 237);
    }
    
    .ps-bottom {
        /* border-top: 1px solid rgb(232, 234, 237); */
        padding-top: 0px;
    }
    
    .ps-legal {
        display: flex;
        flex-wrap: wrap;
        gap: 10px 16px;
        align-items: center;
        font-size: 13px;
        color: #5f6368;
    }
    
    .ps-legal .ps-dot {
        color: #5f6368;
    }
    
    .ps-locale {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 6px 12px;
        border: 1px solid #dadce0;
        border-radius: 24px;
        background: #fff;
        cursor: pointer;
        font-size: 13px;
        color: #202124;
    }
    
    .ps-locale:hover {
        background: #f8f9fa;
    }
    
    .ps-flag {
        display: inline-flex;
        border-radius: 2px;
        overflow: hidden;
    }
    
    .ps-locale-text {
        white-space: nowrap;
    }
    
    .ps-caret {
        opacity: 0.7;
    }
    
    @media (max-width: 768px) {
        .ps-row {
            gap: 20px;
        }
        .ps-locale-text {
            white-space: normal;
        }
    }
    /* --------------------------------- */
    
    .more_app_card {
        display: flex;
        gap: 20px;
        /* border: 1px solid */
        margin-bottom: 25px;
    }
    
    .more_app_card img {
        height: 64px;
        width: 64px;
        object-fit: cover;
        border-radius: 10px;
        box-shadow: rgba(0, 0, 0, 0.24) 0px 2px
    }
    
    .more_app_card .mac-title {
        color: rgb(32, 33, 36);
        /* font-weight: 600; */
        font-weight: 500;
        font-size: 15px;
    }
    
    .mac-rating {
        font-size: 15px;
        color: var(--text1);
        display: flex;
        align-items: center;
        gap: 3px;
    }
    
    .mac-rating i {
        font-size: 9px;
    }
    /* ----------------------------- */
    
    @media screen and (max-width:767px) {
        .navbar {
            padding-right: 1rem !important;
            padding-left: 1rem !important;
        }
        .app-details {
            display: flex;
            margin-top: 60px;
            gap: 20px;
            align-items: center;
        }
        .app-details .appmd {
            width: 72px;
            height: 72px;
            object-fit: cover;
            border-radius: 15px;
        }
        .app-details .headline_area .headline_h1 {
            margin-bottom: 0px;
            font-size: 22px;
            font-weight: 500;
        }
        .col_right {
            display: none;
        }
        .button_area {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
        }
        .button_area>*:nth-child(1) {
            flex: 1 1 100%;
            /* full row */
        }
        .button_area>*:nth-child(n+2) {
            flex: 1 1 auto;
            /* baaki normal */
        }
        .share_button {
            color: #01875f;
            font-size: 14px;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 0px 10px;
            height: 48px;
            border-radius: 10px;
            cursor: pointer;
            justify-content: end;
            width: 96px;
        }
        .add_wishlist {
            color: #01875f;
            font-size: 14px;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 0px 10px;
            height: 48px;
            border-radius: 10px;
            cursor: pointer;
            justify-content: start;
            width: 96px;
        }
        .app_screenshort {
            padding: 10px 22px 0 0;
        }
        .paddingl {
            padding-left: 10px;
        }
        .nav_inner {
            display: block;
        }
        .ps-cluster.vertical {
            flex-direction: column;
            gap: 8px;
            margin-bottom: 30px;
        }
        .main_items_1 {
            display: flex;
            justify-content: space-between;
        }
        .more_app_card {
            gap: 10px;
        }
        .more_app_card .mac-title,
        .mac-dev {
            white-space: nowrap;
            overflow: hidden;
            display: block;
            max-width: 70px;
        }
        .ps-legal {
            gap: 10px 20px;
        }
        .ps-locale {
            border: none;
            color: var(--text1);
        }
        .row_padding {
            padding: 55px 10px 65px;
        }
        .install_btn {
            width: 100%;
        }
    }