/*
Theme Name: Oojo Blog
Author: Ravi Sah
Author URI: https://www.ravisah.in 
Description: A clean and modern blog theme for the Oojo Blog. Built for speed, readability, and SEO optimization.
Version: 1.0
Text Domain: Oojo Blog Theme
Tags: blog, responsive, custom-menu, custom-logo, featured-images, one-column, translation-ready
*/

:root {
    /* Colors */
    --color-primary: #404756;
    --color-secondary: #9B9FA7;
    --color-textfooter: #626874;
    --color-accent: #FFD834;
    --color-accent-hover: #FFCC15;
    --color-border: #F0F1F2;
    --color-light-border: #C9CCD0;
    --color-light-bg: #F7F7F7;
    --color-yellow-bg: #FFF36B;
    --color-white: #FFFFFF;
    --color-error: #ff0000;
    --color-success: #03a403;
}
@font-face {
    font-family: 'roderickregular';
    src: url('assets/fonts/roderick-domox.woff2') format('woff2'),
         url('assets/fonts/roderick-domox.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
html {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: manipulation;
}
body {
    margin: 0;
    padding: 0;
    font-family: "Open Sans", sans-serif;
    color: var(--color-primary);
    background: var(--color-white);
}
.container {
    max-width: 1366px;
    margin: 0 auto;
    padding: 0 60px;
}
header {
    padding-top: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-border);
}
header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 68px;
}
header .menuandlogo,
header .buttonbestdeal {
    flex: 50% 0 0;
}
header .menuandlogo {
    display: flex;
    gap: 32px;
    align-items: center;
}
header .buttonbestdeal {
    text-align: right;
}
header nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 4px;
}
header nav a {
    text-decoration: none;
    color: var(--color-primary);
    font-weight: 600;
    font-size: 14px;
    display: inline-flex;
    padding: 0 12px;
    align-items: center;
    height: 2.5rem;
    border-radius: 6px
}
header nav a:hover {
    background-color: rgba(64,71,86,.06);
}
.parmarybtn {
    display: inline-flex;
    height: 40px;
    padding: 0 20px;
    align-items: center;
    gap: 4px;
    border-radius: 6px;
    background: var(--color-accent);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-primary);
    border: 2px solid transparent;
}
.parmarybtn:hover {
    background: var(--color-accent-hover);
}
.parmarybtn:focus {
    border: 2px solid var(--color-primary);
    background: var(--color-accent);
}
.ghostbtn {
    display: inline-flex;
    height: 40px;
    padding: 0 20px;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-primary);
    border: 1px solid var(--color-secondary);
    background: var(--color-white);
}
.ghostbtn:hover {
    background: var(--color-light-bg);
}
.ghostbtn:focus {
    border-radius: var(--border-radius-m, 6px);
    border: 2px solid var(--color-primary);
    background: var(--color-white);
}
.headerbottombox {
    padding-top: 60px;
    padding-bottom: 30px;
    display: flex;
    gap: 24px;
}
.headerbottombox .headerbottomboxtitle {
    flex: 1;
}
.headerbottombox .headerbottomboxtitle img {
    position: absolute;
    left: 410px;
    bottom: -12px;
}
.headerbottombox .headerbottomboxtitle h1 {
    color: var(--color-primary);
    font-size: 52px;
    font-weight: 600;
    line-height: 100%; 
    letter-spacing: -1.04px;
    margin: 0;
    position: relative;
}
.headerbottombox .headerbottomboxtitle h1 span {
    font-size: 72px;
    font-weight: 400;
    line-height: 52px; 
    letter-spacing: -0.72px;
    font-family: 'roderickregular';
}
.headerbottombox .headerbottomboxsearch {
    width: 300px;
    position: relative;
}
.headerbottombox .headerbottomboxsearch form input {
    width: 100%;
    height: 52px;
    padding: 4px 12px;
    border-radius: 6px;
    border: 1px solid var(--color-light-border);
    background: var(--color-white);
    font-size: 16px;
    font-weight: 400;
    color: var(--color-secondary);
    padding-top: 12px;
}
.headerbottombox .headerbottomboxsearch form input:focus {
    outline: none;
}
.floating-form {
    position: relative;
    margin-bottom: 0;
}
.floating-input {
    position: relative;
    display: flex;
    align-items: center;
}
.floating-input label {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-secondary);
    font-size: 16px;
    pointer-events: none;
    transition: 0.2s ease all;
}
.floating-input input:focus + label,
.floating-input input:not(:placeholder-shown) + label {
    top: 14px;
    font-size: 12px;
}
.floating-input .search-button {
    position: absolute;
    right: 10px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    top: 50%;
    transform: translateY(-50%);
    background: var(--color-white);
}
.postcategorybox {
    padding-top: 30px;
    padding-bottom: 20px;
    background: var(--color-white);
}
.postcategorybox ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    white-space: nowrap;
}
.postcategorybox ul li a {
    display: inline-flex;
    height: 40px;
    padding: 0 20px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: 6px;
    background: var(--color-light-bg);
    text-decoration: none;
    color: var(--color-primary);
    font-size: 14px;
    font-weight: 600;
    border: 2px solid transparent;
}
.postcategorybox ul li a.active {
    background: var(--color-accent);
}
.postcategorybox ul li a:hover {
    background: var(--color-accent-hover);
}
.postcategorybox ul li a:focus {
    border-radius: 10px;
    border: 2px solid var(--color-primary);
    background: var(--color-accent);
}
.mainpagepost {
    margin-top: 60px;
    margin-bottom: 88px;
    display: flex;
    gap: 40px;
}
.mainpagepost .postboxcontainer {
    flex: 1;
    display: flex;
    gap: 40px 24px;
    flex-wrap: wrap;
}
.mainpagepost .sidebarcontainer {
    width: 300px;
}
.titlebox {
    padding-top: 40px;
}
.titlebox h1 {
    margin: 0;
    font-size: 32px;
    font-weight: 600;
    color: var(--color-primary);
}
.post-card {
    flex: calc(50% - 12px) 0 0;
}
.post-card .views {
    display: flex;
    align-items: center;
    gap: 4px;
}
.post-card:hover h2.title {
    text-decoration: underline;
}
.post-card .thumbnail {
    width: 100%;
    border-radius: 6px;
    height: 250px;
    overflow: hidden;
    background-color: var(--color-secondary);
}
.post-card .thumbnail img {
    object-fit: cover;
    height: 100%;
    width: 100%;
    transition: transform 900ms ease-out;
}
.post-card:hover .thumbnail img {
    transform: scale(1.05);
    -webkit-transform: scale(1.05);
}
.post-card .catanddate {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 12px;
    font-weight: 600;
}
.post-card .catanddate .category a {
    text-decoration: none;
    color: var(--color-primary);
}
.post-card .catanddate .date {
    color: var(--color-secondary);
}
.post-card h2.title {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
    color: var(--color-primary);
    margin-bottom: 8px;
}
.post-card .details {
    display: flex;
    padding-top: 8px;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-secondary);
    align-items: center;
}
.post-card .details .author {
    display: flex;
    align-items: center;
    gap: 4px;
}
.post-card .details .author .author-avatar {
    width: 20px;
    height: 20px;
    border-radius: 32px;
    overflow: hidden;
}
.post-card .details .author .author-avatar img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}
.pagination {
    display: inline-flex;
    gap: 8px;
    flex-wrap: wrap;
}
.pagination .current {
    background: var(--color-accent);
    border: 1px solid var(--color-accent);
}
.pagination span,
.pagination a {
    display: inline-flex;
    min-width: 22px;
    height: 40px;
    padding: 0px 10px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: 6px;
    border: 1px solid var(--color-secondary);
    background: var(--color-white);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-primary);
}
.pagination span,
.pagination a:hover {
    background: var(--color-accent-hover);
}
.pagination a:focus {
    border-radius: 10px;
    border: 1px solid var(--color-primary);
    background: var(--color-accent);
}
.stickeypos {
    position: sticky;
    top: -16px;
    z-index: 1;
}
.promoimage {
    width: 100%; 
    height: auto;
    max-height: 410px;
    object-fit: cover;
}
.sidebar h2 {
    font-size: 24px;
    font-weight: 600;
    color: var(--color-primary);
    margin: 0;
    margin-bottom: 24px;
}
.sidebar .tag-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.sidebar .tag-list li a {
    border-radius: 6px;
    border: 1px solid var(--color-secondary);
    display: flex;
    padding: 8px 16px;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
}
.sidebar .tag-list li a:hover {
    background-color: rgb(247 247 247/1);
    border-color: hsl(221 15% 29%);
}
.socialconnect {
    margin-bottom: 40px;
    border-radius: 6px;
    background: var(--color-yellow-bg);
    display: flex;
    padding: 16px 24px;
    align-items: center;
    gap: 12px;
}
.socialconnect h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-primary);
}
.socialconnect .sociallinks {
    display: flex;
    gap: 8px;
}
.socialconnect .sociallinks a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 6px;
    border: 1px solid var(--color-secondary);
    background: var(--color-white);
}
.socialconnect .sociallinks a:hover {
    background-color: rgb(247 247 247/1);
    border-color: hsl(221 15% 29%);
}
footer {
    margin-top: 88px;
}
footer .subscribebox {
    background: var(--color-yellow-bg);
}
footer .subscribebox .subscribemain {
    display: flex;
    gap: 24px;
}
footer .subscribebox .subscribemain .subscribemainleft,
footer .subscribebox .subscribemain .subscribemainright {
    flex: 1;
}
footer .subscribebox .subscribemain .subscribemainleft {
    padding: 60px 0;
}
.subscribemainleftheading {
    font-size: 40px;
    font-weight: 600;
    line-height: 46px; 
    letter-spacing: -0.4px;
    color: var(--color-primary);
    margin-bottom: 24px;
}
.subscribemainleftperaone {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px; 
    color: var(--color-primary);
    margin-bottom: 40px;
}
.subscribemainleftperatwo {
    font-size: 12px;
    font-weight: 400;
    line-height: 17.4px; 
    color: var(--color-textfooter);
}
footer .subscribebox .subscribemain .subscribemainright {
    position: relative;
}
footer .subscribebox .subscribemain .subscribemainright img {
    position: absolute;
    left: 0;
    bottom: 0;
}
.es-form-field-container {
    display: flex;
    gap: 4px;
    align-items: center;
}
form[data-form-id="1"] .es-form-field-container .gjs-row,
#imab {
    margin-bottom: 0 !important;
}
#ic2t8 {
    margin-top: 0 !important;
}
footer form {
    margin-bottom: 24px;
}
footer form input[type="email"] {
    height: 52px;
    border-radius: 6px !important;
    border: 1px solid var(--color-light-border);
    background: var(--color-white);
    font-size: 16px;
    font-weight: 400;
    margin-left: -7px;
    width: 457px;
    padding: 4px 18px;
    padding-top: 12px;
}
footer form label {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-secondary);
    font-size: 16px;
    pointer-events: none;
    transition: 0.2s ease all;
}
footer form .gjs-cell:has(input:focus) label,
footer form .gjs-cell:has(input:not(:placeholder-shown)) label {
  top: 14px;
  font-size: 12px;
}
footer form input[type="email"]:focus {
    outline: none;
}
footer .gjs-row:last-child .gjs-cell {
    position: relative;
    display: inline-block;
}
footer .gjs-row:last-child .gjs-cell::before {
    content: '';
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='25' viewBox='0 0 24 25' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.28828 4.91675H16.7117C17.4409 4.91674 18.0335 4.91673 18.5144 4.95602C19.011 4.9966 19.4541 5.08278 19.8663 5.29278C20.5154 5.62354 21.0432 6.15132 21.374 6.80048C21.5792 7.20319 21.6661 7.63546 21.7079 8.11834C21.7544 8.2508 21.7619 8.39181 21.7331 8.52526C21.75 8.93103 21.75 9.40406 21.75 9.95501V15.7785C21.75 16.5076 21.75 17.1003 21.7107 17.5812C21.6702 18.0778 21.584 18.5209 21.374 18.933C21.0432 19.5822 20.5154 20.11 19.8663 20.4407C19.4541 20.6507 19.011 20.7369 18.5144 20.7775C18.0335 20.8168 17.4409 20.8168 16.7117 20.8167H7.28826C6.55913 20.8168 5.96647 20.8168 5.48557 20.7775C4.98896 20.7369 4.54587 20.6507 4.13374 20.4407C3.48458 20.11 2.95679 19.5822 2.62603 18.933C2.41604 18.5209 2.32985 18.0778 2.28928 17.5812C2.24999 17.1003 2.24999 16.5076 2.25 15.7785V9.95503C2.25 9.40407 2.24999 8.93103 2.26694 8.52526C2.23812 8.39181 2.24557 8.2508 2.29214 8.11833C2.33386 7.63546 2.42084 7.20319 2.62603 6.80048C2.95679 6.15132 3.48458 5.62354 4.13374 5.29278C4.54587 5.08278 4.98896 4.9966 5.48557 4.95602C5.96648 4.91673 6.55914 4.91674 7.28828 4.91675ZM3.75003 9.80726C3.75001 9.86562 3.75 9.92543 3.75 9.98675V15.7467C3.75 16.5152 3.75059 17.0464 3.7843 17.459C3.81729 17.8629 3.87825 18.0866 3.96254 18.252C4.14949 18.6189 4.44781 18.9173 4.81472 19.1042C4.98015 19.1885 5.20387 19.2495 5.60772 19.2825C6.02033 19.3162 6.55156 19.3167 7.32 19.3167H16.68C17.4485 19.3167 17.9797 19.3162 18.3923 19.2825C18.7961 19.2495 19.0199 19.1885 19.1853 19.1042C19.5522 18.9173 19.8505 18.6189 20.0375 18.252C20.1218 18.0866 20.1827 17.8629 20.2157 17.459C20.2494 17.0464 20.25 16.5152 20.25 15.7467V9.98675C20.25 9.92543 20.25 9.86562 20.25 9.80726L14.0817 14.1251C14.0494 14.1476 14.0176 14.17 13.9861 14.192C13.4863 14.5427 13.0787 14.8287 12.6168 14.9439C12.2118 15.0448 11.7882 15.0448 11.3832 14.9439C10.9213 14.8287 10.5137 14.5427 10.0139 14.192C9.9824 14.17 9.95057 14.1476 9.91833 14.1251L3.75003 9.80726ZM20.1881 8.01959L13.2215 12.8962C12.5756 13.3483 12.4102 13.4495 12.254 13.4884C12.0872 13.53 11.9128 13.53 11.746 13.4884C11.5898 13.4495 11.4244 13.3483 10.7785 12.8962L3.81191 8.01959C3.84702 7.76937 3.89792 7.60829 3.96254 7.48147C4.14949 7.11455 4.44781 6.81624 4.81472 6.62929C4.98015 6.545 5.20387 6.48404 5.60772 6.45104C6.02033 6.41733 6.55156 6.41675 7.32 6.41675H16.68C17.4485 6.41675 17.9797 6.41733 18.3923 6.45104C18.7961 6.48404 19.0199 6.545 19.1853 6.62929C19.5522 6.81624 19.8505 7.11455 20.0375 7.48147C20.1021 7.60829 20.153 7.76936 20.1881 8.01959Z' fill='%23404756'/%3E%3C/svg%3E");

    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
}
footer .gjs-row:last-child .gjs-cell input[type="submit"] {
    padding-left: 48px !important;
    padding-right: 20px;
    height: 52px;
    border-radius: 6px !important;
    background: var(--color-accent) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--color-primary) !important;
    font-family: "Open Sans", sans-serif !important;
    border: none !important;
    cursor: pointer;
    border: 2px solid transparent !important;
}
footer .gjs-row:last-child .gjs-cell input[type="submit"]:hover {
    background: var(--color-accent-hover) !important;
}
footer .gjs-row:last-child .gjs-cell input[type="submit"]:focus {
    border-radius: 10px !important;
    border: 2px solid var(--color-primary) !important;
    background: var(--color-accent) !important;
}
.emaillist {
    position: relative;
}
.es_subscription_message.error {
    color: var(--color-error);
    font-size: 12px;
    bottom: -20px;
    position: absolute;
}
footer .footerbottom {
    background-color: var(--color-light-bg);
    padding: 32px 0;
}
.footernavandsocialmedia {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
}
.footernavandsocialmedia ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}
.footernavandsocialmedia ul li:first-child {
    display: none;
}
.footernavandsocialmedia ul li a {
    font-size: 12px;
    font-weight: 600;
    line-height: 17.4px; 
    height: 2rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    color: var(--color-primary);
    border-radius: 6px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}
.footernavandsocialmedia ul li a:hover {
    background-color: rgba(64,71,86,.06);
}
.footersocialmedia {
    display: flex;
}
.footersocialmedia a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--color-primary);
    font-size: 12px;
    font-weight: 600;
    line-height: 17.4px;
    height: 32px;
    padding: 0 12px;
    text-decoration: none;
    border-radius: 6px;
}
.footersocialmedia a:hover {
    background-color: rgba(64,71,86,.06);
}
.footersocialmedia a svg {
    color: var(--color-secondary)
}
.footerbottomcontent p {
    margin: 0;
    color: var(--color-secondary);
    font-size: 12px;
    font-weight: 400;
    line-height: 17.4px;
}
.gjs-cell {
    position: relative;
}
.errorpagecontainer {
    text-align: center;
    padding: 120px 0;
    width: 100%;
}
h1.errorno {
    font-size: 32px;
    font-weight: 600;
    line-height: 36.6px;
    color: var(--color-primary)
}
.post-full {
    width: 100%;
    max-width: 680px;
}
.post-full img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover;
    border-radius: 6px;
    margin: 40px 0;
    margin-top: 20px;
}
.post-full p:has(img) {
    margin: 0 !important; /* Removes margin from <p> with only image */
}
.post-full p:has(img) + p {
    margin-top: 0 !important; /* Removes space above paragraph after image */
}
.post-full .category {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.post-full .category a {
    color: var(--color-primary);
    font-size: 14px;
    font-weight: 600;
    line-height: 21px;
    text-decoration: none;
    display: block;
}
.post-full .category a:hover {
    text-decoration: underline;
}
.post-full .category img {
    width: auto !important;
    height: 15px !important;
    border-radius: 0;
    margin: 0;
}
.post-full .post-title {
    color: var(--color-primary);
    font-size: 32px;
    font-weight: 600;
    line-height: 36.8px;
    margin: 24px 0;
}
.post-full p {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    margin-top: 0;
    margin-bottom: 24px;
}
.custom-share-icons p {
    font-weight: 600;
}
.post-full .meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 24px;
}
.post-full .meta .author-info {
    display: flex;
    align-items: center;
    gap: 12px;
}
.post-full .meta .author-info .author-avatar {
    width: 40px;
    height: 40px;
    border-radius: 32px;
    overflow: hidden;
}
.post-full .meta .author-info .author-avatar img {
    height: 100%;
    width: 100% !important;
    object-fit: cover;
    margin: 0;
}
.post-full .meta .author-info .author-bio {
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: var(--color-primary);
}
.post-full .meta .post-other-details {
    color: var(--color-secondary);
    font-size: 12px;
    font-weight: 600;
    line-height: 17.4px;
    display: flex;
    gap: 12px;
}
.post-full .meta .post-other-details .views {
    display: flex;
    align-items: center;
    gap: 4px;
}
.post-full .custom-share-icons {
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    padding: 24px 0;
    display: flex;
    gap: 12px;
    align-items: center;
}
.post-full .custom-share-icons p {
    margin: 0;
}
.post-full .custom-share-icons .icons-list {
    display: flex;
    gap: 8px;
    align-items: center;
}
.post-full .custom-share-icons .icons-list a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 6px;
    border: 1px solid var(--color-secondary);
    background: var(--color-white);
}
.post-full .custom-share-icons .icons-list a:hover {
    background-color: rgb(247 247 247/1);
    border-color: hsl(221 15% 29%);
}
.post-full .tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 40px;
}
.post-full .tags a {
    border-radius: 6px;
    border: 1px solid var(--color-secondary);
    display: flex;
    padding: 8px 16px;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
}
.post-full .tags a:hover {
    background-color: rgb(247 247 247/1);
    border-color: hsl(221 15% 29%);
}
.post-full h2,
.post-full h3,
.post-full h4, 
.post-full h5 {
    padding: 26px 0;
}
.relatedposts h2 {
    color: var(--color-primary);
    font-size: 24px;
    font-weight: 600;
    line-height: 33.6px;
    margin-bottom: 24px;
    margin-top: 0;
}
.relatedposts .related-posts-list {
    display: flex;
    gap: 40px 24px;
    flex-wrap: wrap;
}
.relatedposts .related-posts-list .post-card {
    flex: calc(33.33% - 16px) 0 0;
}
.es_subscription_message.success {
    color: var(--color-success) !important;
    font-size: 16px;
    margin-bottom: 20px;
    display: block;
}
.formobile {
    display: none !important
}
.nav-links {
    gap: 8px;
    display: flex;
}
blockquote {
    padding: 40px;
    display: block;
    position: relative;
    background-color: var(--color-yellow-bg);
    overflow: hidden;
    margin: 24px 0;
    border-radius: 6px;
}
blockquote p {
    margin: 0 !important;
}
blockquote cite {
    display: inline-block;
    position: relative;
    padding-left: 60px;
    border-color: inherit;
    line-height: 1;
    margin-top: 22px;
    font-weight: 600;
}
blockquote cite:before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 5px;
    width: 45px;
    height: 1px;
    border-top: 1px solid;
    border-color: inherit;
}
.thumb img {
    margin: 40px 0;
}
.deskshow {
    display: block !important
}
.mobileshow {
    display: none !important
}

@media screen and (max-width:959px) {
    header {
        padding: 12px;
        position: sticky;
        top: 0;
        background: var(--color-white);
        z-index: 1;
    }
    .container {
        max-width: 560px;
        padding: 0 16px;
    }
    .headerbottombox {
        flex-wrap: wrap;
        padding-bottom: 24px;
    }
    .headerbottombox .headerbottomboxtitle,
    .headerbottombox .headerbottomboxsearch,
    .mainpagepost .postboxcontainer,
    .mainpagepost .sidebarcontainer {
        flex: 100% 0 0;
        width: 100%;
    }
    .headerbottombox .headerbottomboxtitle h1 {
        font-size: 40px;
        font-weight: 600;
        line-height: 46px;
        letter-spacing: -0.4px;
    }
    .headerbottombox .headerbottomboxtitle h1 span {
        display: block;
        font-size: 56px;
        font-weight: 400;
        line-height: 46px; 
        letter-spacing: -0.56px;
    }
    .headerbottombox .headerbottomboxtitle img {
        left: 180px;
    }
    .postcategorybox {
        padding-top: 0;
        padding-bottom: 0;
        -webkit-overflow-scrolling: touch;
        overflow-y: auto;
        position: relative;
    }
    .postcategorybox::-webkit-scrollbar {
        width: 0;
        height: 0;
    }
    .postcategorybox:after {
        content: '';
        position: absolute;
        width: 16px;
        height: 100%;
        background: linear-gradient(90deg, rgba(255, 255, 255, 0.00) 0%, var(--color-white) 100%);
        right: 0;
        top: 0;
    }
    .stickeypos {
        position: sticky;
        top: 69px;
        background: var(--color-white);
        padding: 8px 0px;
        padding-left: 16px;
        z-index: 1;
        max-width: 100%;
    }
    .titlebox h1 {
        font-size: 24px;
        font-weight: 600;
        line-height: 33.6px;
    }
    .mainpagepost {
        margin-top: 24px;
        margin-bottom: 0;
        flex-wrap: wrap;
        gap: 60px;
    }
    footer {
        margin-top: 60px;
    }
    .socialconnect {
        justify-content: space-between;
    }
    .fordesktop {
        display: none !important;
    }
    .formobile {
        display: flex !important
    }
    .post-card {
        flex: 100% 0 0;
    }
    .mainpagepost .postboxcontainer {
        gap: 32px;
    }
    .post-card .thumbnail {
        height: 210px;
    }
    .pagination {
        margin-top: 60px;
    }
    footer .subscribebox .subscribemain {
        flex-wrap: wrap;
        gap: 40px;
        padding-top: 40px;
    }
    footer .subscribebox .subscribemain .subscribemainleft {
        padding: 0;
    }
    footer .subscribebox .subscribemain .subscribemainright img {
        position: relative;
    }
    .subscribemainleftheading {
        font-size: 32px;
        font-weight: 600;
        line-height: 36.8px;
        margin-bottom: 12px;
    }
    .subscribemainleftperaone {
        margin-bottom: 24px;
    }
    form[data-form-id="3"] .es-form-field-container .gjs-row {
        margin-bottom: 0 !important;
    }
    footer form input[type="email"] {
        width: 418px;
    }
    footer .footerbottom {
        text-align: center;
    }
    .footernavandsocialmedia {
        flex-wrap: wrap;
        gap: 8px;
    }
    .footernavandsocialmedia ul,
    .footersocialmedia {
        flex: 100% 0 0;
        justify-content: center;
    }
    .post-full {
        width: 100%;
    }
    .post-full .meta {
        flex-wrap: wrap;
        gap: 12px;
    }
    .post-full .meta .author-info,
    .post-full .meta .post-other-details {
        flex: 100% 0 0;
    }
    .relatedposts {
        margin-top: 60px;
    }
    .relatedposts .related-posts-list .post-card {
        flex: 100% 0 0;
    }
    .relatedposts .related-posts-list {
        gap: 32px;
    }
    header {
        border-bottom: 1px solid var(--color-border);
    }
    header .menuandlogo {
        justify-content: center;
    }
    header .mobilemenuicon,
    header .menuandlogo, 
    header .buttonbestdeal {
        flex: 1;
    }
    header .mobilemenuicon .openme {
        display: flex;
        width: 40px;
        height: 40px;
        padding: 0;
        justify-content: center;
        align-items: center;
        border-radius: 6px;
        cursor: pointer;
    }
    header .mobilemenuicon:hover .openme {
        background-color: rgba(64,71,86,.06);
    }
    .mobilemenupop {
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        z-index: 9;
        pointer-events: none;
    }
    .mobilemenupop .backdrop {
        background-color: rgb(0 0 0/.5);
        height: 100%;
        width: 100%;
        position: absolute;
        opacity: 0;
        transition: opacity 0.3s ease;
        -webkit-transition: opacity 0.3s ease;
    }
    .mobilemenupop .menuwhitebox {
        width: 300px;
        height: calc(100dvh - 2rem);
        position: absolute;
        left: 0;
        top: 0;
        background: var(--color-white);
        padding: 16px;
        transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
        transition: transform 0.3s ease;
        -webkit-transition: transform 0.3s ease;
    }
    .mobilemenupop.open .menuwhitebox {
        transform: translateX(0);
        -webkit-transform: translateX(0);
    }
    .mobilemenupop.open {
        pointer-events: auto;
    }
    .mobilemenupop.open .backdrop {
        opacity: 1;
    }
    .mobilemenupop .menuwhitebox .closeme {
        display: flex;
        width: 40px;
        height: 40px;
        padding: 0;
        justify-content: center;
        align-items: center;
        border-radius: 6px;
        cursor: pointer;
    }
    .mobilemenupop .menuwhitebox .closeme:hover {
        background-color: rgba(64,71,86,.06);
    }
    .menuandlinks {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 95%;
    }
    .menuandlinks ul {
        margin-top: 20px;
        list-style: none;
        margin: 0;
        margin-top: 20px;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .menuandlinks ul li a {
        text-decoration: none;
        font-size: .875rem;
        line-height: 1.25rem;
        font-weight: 600;
        height: 2.5rem;
        border-radius: 6px;
        color: var(--color-primary);
        display: inline-flex;
        padding: 0 12px;
        align-items: center;
        justify-content: center;
    }
    .menuandlinks ul li a:hover {
        background-color: rgba(64,71,86,.06);
    }
    .menuandlinks .parmarybtn {
        justify-content: center;
    }
    header .container {
        max-width: 100%;
        padding: 0;
        height: auto;
    }
    .postcategorybox ul {
        flex-wrap: nowrap;
    }
    .deskshow {
        display: none !important
    }
    .mobileshow {
        display: block !important
    }
}
@media screen and (max-width:598px) {
    footer form input[type="email"] {
        width: 60dvw;
    }
}
@media screen and (max-width:424px) {
    footer form input[type="email"] {
        width: 52dvw;
    }
    .mobilemenupop .menuwhitebox {
        width: 80%;
    }
}