/* TAGS */

body {
    margin: 0;
    padding: 0;
    font: 16px/20px Arial, Helvetica, sans-serif;
    background-color: #FFF;
    min-height: 100%;
    position: relative;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.5;
}

/* MAIN */

.fL {
    float: left
}

.fR {
    float: right
}

.clear {
    clear: both
}

.im {
    margin: 0
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
}

/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: none;
}

table {
    border-collapse: collapse;
    border-width: 0;
    padding: 0;
    margin: 0;
}

html {
    height: 100%;
    -webkit-text-size-adjust: none;
    -ms-text-size-adjust: none;
}

input,
textarea {
    font: 12px "OpenSans-CondensedLight", Arial, sans-serif;
    color: #333;
    outline: none;
}

input[type="button"],
input[type="submit"],
button {
    cursor: pointer
}

td {
    margin: 0;
    padding: 0;
}

form {
    padding: 0;
    margin: 0;
}

a {
    color: #000100;
    -moz-transition: color 0.1s linear;
    -o-transition: color 0.0s linear;
    -ms-transition: color 0.0s linear;
    -webkit-transition: color 0.0s linear;
    transition: color 0.0s linear;
    text-decoration: none;
    outline: none
}

a:hover {
    text-decoration: underline;
}

input[type=submit],
input[type=button] {
    -webkit-appearance: none;
}

.clearfix:after,
.wrapper:after,
.content:after,
header:after,
footer:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

img,
iframe,
embed,
object,
video {
    max-width: 100%;
}

.hidden {
    display: none;
}

/* BG_STYLES */

.boxMain {
    margin: 0 auto;
    width: 100%;
    max-width: 2000px;
    padding: 0 8px 0 8px;
    overflow: hidden;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* HEADER */

header {
    background: url(/image/shapka_pr.png) repeat-x;
    width: 100%;
    height: 65px;
    text-align: left;
    position: relative;
    border-radius: 15px 15px 0 0;
    -moz-border-radius: 15px 15px 0 0;
    -webkit-border-radius: 15px 15px 0 0;
}

.mainLogo img {
    display: block;
    border-radius: 17px 0 0 0;
    -moz-border-radius: 17px 0 0 0;
    -webkit-border-radius: 17px 0 0 0;
}

/* CONTENT */

.content {
    width: 100%;
    text-align: left;
    display: flex;
    align-items: stretch;
}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.CenterPos {
    text-align: center;
}

/* ul, li */

.doc-ul {
    margin-bottom: 15px;
    padding-left: 20px;
    list-style-type: disc;
}

.doc-ul li {
    margin-bottom: 5px;
}

/* SIDEBAR MENU */

aside {
    background: url(/image/fonMenu.jpg) repeat-y;
    width: 177px;
    float: left;
    min-height: 752px;
    padding: 15px 0 50px 0;
    padding-left: 6px;
    position: relative;
    z-index: 2;
    box-sizing: border-box;
    /* border-right removed */
    /* box-shadow removed */
}

aside ul {
    padding: 34px 0 30px 0;
    margin: 0;
}

aside ul li {
    list-style: none;
    margin: 2px 0 0 0; /* was 8px, now 2px */
}

aside ul li a {
    display: block;
    padding: 8px 15px 8px 28px;
    color: #001520;
    text-decoration: none;
    border-left: 4px solid transparent;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 15px;
    font-weight: 500;
    position: relative;
}

aside ul li a:before {
    content: "";
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 5px;
    border: 2px solid #b0b0b0;
    transition: all 0.25s ease;
}

aside ul li a:hover:before {
    border-color: #07396A;
    background: rgba(7, 57, 106, 0.2);
    width: 6px;
    height: 6px;
}

aside ul li a.active:before {
    border-color: #07396A;
    background: #07396A;
    width: 6px;
    height: 6px;
}

aside ul li a:hover {
    background-color: rgba(7, 57, 106, 0.06);
    border-left-color: rgba(7, 57, 106, 0.3);
    color: #07396A;
    padding-left: 28px;
    background-position: 10px center;
}

aside ul li a.active {
    background-color: rgba(7, 57, 106, 0.08);
    border-left-color: #07396A;
    color: #07396A;
    font-weight: 600;
}

aside ul li a.active:after {
    content: "";
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #07396A;
}

aside ul li a span {
    background-color: transparent;
}

aside ul li a:hover span {
    background-color: transparent;
    color: #07396A;
    text-decoration: none;
}

.subLink {
    display: block;
    padding: 10px 15px;
    color: #6c757d;
    font-size: 13px;
    text-decoration: none;
    transition: color 0.2s ease;
}

.subLink:hover {
    color: #07396A;
    background-color: transparent;
    text-decoration: none;
}

aside .logo {
    margin: 12px 0 0 0;
}

/* === */

.hlp {
    color: #001520;
    font-weight: normal;
    margin-left: 40px;
}

.mainLink {
    text-decoration: underline;
}

.mainLink:hover {
    background-color: #001520;
    color: #E1F5FF;
    font-style: normal;
    text-decoration: underline;
}

.textNote {
    color: #808080;
}

.subLink {
    color: #808080;
}

.subLink:hover {
    background-color: #001520;
    color: #E1F5FF;
    text-decoration: underline;
}

.subText {
    color: #808080;
}

.subText1 {}

.subText2 {}

.subTextRed {
    color: #FF0000;
}

aside .logo {
    margin: 12px 0 0 0;
}

.contentRight {
    float: right;
    width: 100%;
    padding: 0px 15px 50px 195px;
    margin-left: -182px;
    position: relative;
    /* border-right: solid 1px #000000; */
    min-height: 752px;
    z-index: 1;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    border-right: none !important;
}

.contentRight:after {
    content: "";
    position: absolute;
    top: 0;
    right: -5px; /* Move the line to the right by the width of the parent's padding (.boxMain) */
    width: 1px;
    height: 100%;
    background-color: #000000;
    z-index: 10; /* So that it is on top of everything */
}

h1 {
    color: #001520;
    font-size: 24px;
    font-weight: bold;
    padding: 10px 0 20px 0;
    text-align: center;
}

ul {
    color: #001520;
    padding: 10px 0 10px 0;
}

/* dotfixsoft */

.Text {
    color: #001520;
    line-height: 1.5;
    padding: 10px 0 10px 0;
}

.Text a {
    outline: none;
    text-decoration: none;
    cursor: pointer;
    font-weight: bold;
}

.Text a:hover {
    text-decoration: underline;
}

.simple-title {
    font-size: 18px;
    line-height: 1.2em;
}

.code {
    FONT-FAMILY: monospace;
    BORDER-RIGHT: black 1px solid;
    BORDER-TOP: black 1px solid;
    FONT-SIZE: 10pt;
    BORDER-LEFT: black 1px solid;
    padding: 2px;
    BORDER-BOTTOM: black 1px solid;
    white-space: pre;
    line-height: 0.9em;
}

.title-top {
    margin-top: 11px;
}

/* dotfixsoft */

p {
    color: #001520;
    padding: 10px 0 10px 0;
}

span {
    font-weight: bold;
}

p a {
    color: #001520;
    font-weight: bold;
    text-decoration: underline;
    padding: 0 0 0 0;
}

p a:hover {
    background-color: #001520;
    color: #E1F5FF;
    font-style: normal;
    text-decoration: underline;
}

.NoUnderline {
    text-decoration: none;
}

.contentRight .colLeft {
    width: 260px;
    float: left;
    padding: 30px 30px 30px 0px;
    overflow: hidden;
    text-align: left;
}

.contentRight .colMobile {
    display: none;
}

.contentRight .colRight {
    width: 100%;
    float: left;
    padding: 16px 0 0 293px;
    margin-left: -280px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.contentRight .colLeft .img {
    margin-left: -7px;
    padding-bottom: 24px;
}

.buttonDownloadFile {
    display: inline-block;
    vertical-align: top;
    position: absolute;
    background: url(/image/download1.png) no-repeat left top;
    width: 110px;
    height: 24px;
}

.buttonOrderNow {
    display: inline-block;
    background: url(/image/buy_now.png) no-repeat left top;
    width: 110px;
    height: 24px;
}

.title1 {
    color: #001520;
    font-weight: bold;
    padding: 10px 0 30px 0;
}

.title2 {
    color: #001520;
    text-align: center;
    font-weight: bold;
    padding: 10px 0 30px 0;
}

p span.special {
    font-weight: normal;
    padding-right: 16px;
}

a.language {
    font-weight: normal;
}

.TableTitle {
    color: #FFFFFF;
    background-color: #07396A;
    font-size: 9pt;
    font-weight: normal;
}

.TableTitle2 {
    color: #FFFFFF;
    background-color: #07396A;
    text-align: center;
}

.Table3 {
    padding: 10px;
}

table {
    margin-left: auto;
    margin-right: auto;
    color: #001520;
    padding: 10px 0 10px 0;
}

#CODE {
    font: 12px "Courier New", Courier, monospace;
    color: #001520;
    padding: 2px 2px 2px 2px;
    border: 1px solid black;
    white-space: pre-wrap;
}

.newmenu {
    display: none;
}

/* Grid layout for sections with images */

.content-section {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 40px;
    margin-bottom: 50px;
    align-items: start;
}

.content-section.image-left {
    grid-template-columns: 280px 1fr;
}

.section-image {
    position: relative;
}

/* On desktop: image on the right = second element */

.content-section.image-right .section-image {
    order: 2;
}

.content-section.image-right .section-text {
    order: 1;
}

/* On desktop: image on the left = first element (default) */

.content-section.image-left .section-image {
    order: 1;
}

.content-section.image-left .section-text {
    order: 2;
}

/* Button group under the boxshot */

.button-group {
    display: flex;
    gap: 10px;
    margin-top: 15px;
    justify-content: center;
}

/* Responsive boxshot size */

.buttonBoxShot {
    display: block;
    background: url(/image/box.png) no-repeat center top;
    background-size: contain;
    width: 100%;
    max-width: 220px;
    height: 296px; /* proportional to 220/237 * 319 */
    margin: 0 auto;
    transition: transform 0.2s ease;
}

.buttonBoxShot:hover {
    transform: scale(1.03);
}

/* Container for CTA buttons */

.cta-buttons {
    display: flex;
    gap: 15px;
    margin-top: 30px;
    flex-wrap: wrap;
}

/* Base button styles */

.btn-primary,
.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border-radius: 6px;
    font-weight: bold;
    font-size: 16px;
    text-decoration: none;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Order button (primary) */

.btn-primary {
    background: linear-gradient(135deg, #07396A 0%, #05284d 100%);
    color: #ffffff !important;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #05284d 0%, #001520 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(7, 57, 106, 0.3);
    text-decoration: none;
}

/* Download button (secondary) */

.btn-secondary {
    background: linear-gradient(135deg, #4a7ba7 0%, #07396A 100%);
    color: #ffffff !important;
}

.btn-secondary:hover {
    background: linear-gradient(135deg, #07396A 0%, #05284d 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(74, 123, 167, 0.3);
    text-decoration: none;
}

/* Check icon in the button */

.btn-icon {
    font-size: 18px;
    font-weight: bold;
}

.btn-text {
    line-height: 1;
}

/* Active state */

.btn-primary:active,
.btn-secondary:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.buttonOrder,
.buttonDownload {
    display: inline-block;
    width: 110px;
    height: 24px;
    background-size: contain;
    background-repeat: no-repeat;
}

.buttonOrder {
    background-image: url(/image/order.png);
}

.buttonDownload {
    background-image: url(/image/download1.png);
}

/* Styles for regular images in sections */

.section-image img {
    width: 100%;
    max-width: 320px;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 21, 32, 0.1);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.section-image img:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 20px rgba(0, 21, 32, 0.15);
}

.section-text h2 {
    margin-top: 0;
    padding-top: 0;
}

.section-text p:first-child {
    margin-top: 0;
    padding-top: 0;
}

/* FOOTER */

footer {
    background: linear-gradient(180deg, #4a7ba7 0%, #07396A 100%);
    width: 100%;
    min-height: 65px;
    text-align: center;
    border-radius: 0 0 15px 15px;
    position: relative;
    padding: 20px 15px;
    box-sizing: border-box;
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.1);
}

footer p {
    color: #ffffff;
    font-weight: 600;
    font-size: 15px;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    letter-spacing: 0.3px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

footer a {
    color: rgba(255, 255, 255, 0.95);
    text-decoration: none;
    transition: all 0.2s ease;
}

footer a:hover {
    color: #ffffff;
    text-decoration: none;
}

.footer-links {
    margin-bottom: 12px;
    font-size: 13px;
}

.footer-links a {
    margin: 0 12px;
    color: rgba(255, 255, 255, 0.9);
    padding: 5px 10px;
    border-radius: 3px;
    transition: all 0.2s ease;
}

.footer-links a:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

/* SLIDER */

.slide {
    display: none;
    margin: 0;
}

img {
    vertical-align: middle;
}

.slideshow-container {
    max-width: 1000px;
    position: relative;
    margin: auto;
}

/* Next & previous buttons */

.slideshow-prev,
.slideshow-next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}

/* Position the "next button" to the right */

.slideshow-next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */

.slideshow-prev:hover,
.slideshow-next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

/* Caption text */

.slideshow-text {
    color: #ffffff;
    font-size: 15px;
    padding: 8px 12px;
    position: absolute;
    bottom: 8px;
    width: 100%;
    text-align: center;
}

/* Number text (1/3 etc) */

.slideshow-numbertext {
    color: #ffffff;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
}

/* The dots/bullets/indicators */

.slideshow-dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #999999;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.slideshow-active,
.slideshow-dot:hover {
    background-color: #111111;
}

/* Fading animation */

.fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
}

@-webkit-keyframes fade {
    from {
        opacity: .4
    }
    to {
        opacity: 1
    }
}

@keyframes fade {
    from {
        opacity: .4
    }
    to {
        opacity: 1
    }
}

/* ORDER */

/* Main container */

.table-container {
    display: grid;
    width: 75%;
    grid-template-columns: 60% 40%;
    align-items: stretch; /* Sets the same height for all elements */
    /* min-width: 834px; */
    max-width: 1080px;
    margin: 0 auto; /* Centering */
}

/* Left block */

.left-table-block {
    border: none; /* Border removed */
    display: flex;
    align-items: center; /* Vertically centers the text */
}

/* Right blocks container */

.right-table-block {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two blocks per row */
}

/* Table header */

.table-header {
    background-color: #07396A;
    color: white;
    padding: 10px;
}

.table-header-left, .table-header-right {
    text-align: center;
    font-weight: bold;
    font-size: 16px;
}

/* Each cell */

.cell {
    padding: 15px;
    text-align: center;
    border: none; /* Border removed */
    min-height: 10px; /* Fixed height for consistency */
}

/* Full-width row */

.full-row {
    grid-column: 1 / -1; /* Spans all columns */
    height: 20px; /* Row height */
    background-color: transparent; /* Make the background transparent or set a color */
}

/* Empty row between blocks */

.empty-row {
    grid-column: 1 / -1; /* Spans all columns */
    height: 10px; /* Empty row height */
    background-color: transparent; /* Transparent background */
}

.bg_purple {
    background: #F5F5FF;
}

.button-container {
    display: flex;
    justify-content: center; /* Horizontally centers the buttons */
    gap: 20px; /* Gap between buttons */
    margin-bottom: 20px; /* Bottom margin */
}

.description-container {
    text-align: center; /* Horizontally centers the buttons */
    gap: 20px; /* Gap between buttons */
    margin-bottom: 20px; /* Bottom margin */
    width: 75%;
    margin: 0 auto; /* Centering */
}

.terms-container {
    text-align: justify;
    gap: 20px; /* Gap between buttons */
    margin-bottom: 20px; /* Bottom margin */
    width: 75%;
    margin: 0 auto; /* Centering */
}

/* Buttons */

.option-button {
    padding: 10px 20px;
    cursor: pointer;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #fff;
    color: #07396A;
    transition: background-color 0.3s, color 0.3s; /* Smooth transition */
}

.option-button:hover {
    background-color: #07396A;
    color: white;
}

/* Active class for the selected button */

.active-button {
    background-color: #07396A;
    color: white;
}

/* Screenshots */

.thumb-left {
    cursor: pointer;
    max-width: 350px;
    height: auto;
    margin-right: 25px;
    float: left;
}

.thumb-right {
    cursor: pointer;
    max-width: 350px;
    height: auto;
    margin-left: 25px;
    float: right;
}

#modal {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

#modal.show {
    display: flex;
    opacity: 1;
}

#modal img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    border: 2px solid white;
    box-shadow: 0 0 25px rgba(255,255,255,0.4);
}

/* News card */

.news-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(7,57,106,0.06);
    margin-bottom: 28px;
    padding: 20px 26px;
    transition: box-shadow 0.25s ease;
    border: 1px solid #e8e8e8;
    position: relative;
    /* width: fit-content; */ /* Adjusts to content */
    max-width: 100%; /* Does not exceed parent boundaries */
}

/* Smooth shadow on hover WITHOUT scaling or shifting */

.news-card:hover {
    box-shadow: 0 4px 24px rgba(7,57,106,0.11);
}

/* Release date */

.news-date {
    color: #07396A;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 8px;
    letter-spacing: 0.03em;
    display: inline-block;
    background: rgba(7,57,106,0.06);
    padding: 3px 10px;
    border-radius: 6px;
}

/* News title */

.news-title {
    color: #001520;
    font-size: 19px;
    font-weight: 600;
    margin-bottom: 10px;
    line-height: 1.4;
    /* white-space: nowrap; */ /* If you want the title on a single line */
}

.news-desc ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.news-desc li {
    padding: 10px 14px;
    margin-bottom: 2px; /* Minimal margin */
    line-height: 1.6;
    border-radius: 4px;
}

.news-desc li.feature {
    background: linear-gradient(to right, rgba(40,167,69,0.08), rgba(40,167,69,0.02));
    border-left: 3px solid #28a745;
}

.news-desc li.bugfix {
    background: linear-gradient(to right, rgba(255,152,0,0.08), rgba(255,152,0,0.02));
    border-left: 3px solid #ff9800;
}

.news-desc li.feature::before {
    content: "FEATURE";
    display: inline-block;
    background: #28a745;
    color: white;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 3px;
    margin-right: 10px;
    letter-spacing: 0.5px;
}

.news-desc li.bugfix::before {
    content: "BUG FIX";
    display: inline-block;
    background: #ff9800;
    color: white;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 3px;
    margin-right: 10px;
    letter-spacing: 0.5px;
}

/* === */

/* Main downloads */

.main-download {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 2px solid #07396A;
    border-radius: 10px;
    padding: 32px;
    margin-bottom: 40px;
    text-align: center;
}

.product-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 16px;
}

.product-header h2 {
    color: #07396A;
    font-size: 26px;
    font-weight: 700;
    margin: 0;
    padding: 0;
    text-align: center;
}

.version-badge {
    background: #07396A;
    color: white;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.product-desc {
    color: #001520;
    font-size: 15px;
    line-height: 1.6;
    margin: 0 0 20px 0;
    padding: 0 20px;
}

.file-meta {
    color: #6c757d;
    font-size: 13px;
    margin-bottom: 24px;
}

.file-meta strong {
    color: #001520;
}

.btn-main-download {
    display: inline-block;
    background: #07396A;
    color: white;
    font-size: 16px;
    font-weight: 600;
    padding: 14px 40px;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(7,57,106,0.2);
}

.btn-main-download:hover {
    background: #0a4d8f;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(7,57,106,0.3);
    text-decoration: none;
    color: white;
}

/* Section Heading */

.section-heading {
    color: #001520;
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 20px 0;
    padding: 0 0 10px 0;
    border-bottom: 2px solid #e8e8e8;
}

/* Additional materials */

.additional-downloads {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.addon-item {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.addon-item:hover {
    border-color: #07396A;
    box-shadow: 0 2px 8px rgba(7,57,106,0.08);
}

.addon-item h3 {
    color: #001520;
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 10px 0;
    padding: 0;
}

.addon-item p {
    color: #001520;
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 12px 0;
    padding: 0;
}

.addon-meta {
    color: #6c757d;
    font-size: 13px;
    margin-bottom: 12px;
}

.addon-link {
    color: #07396A;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    transition: color 0.2s;
}

.addon-link:hover {
    color: #0a4d8f;
    text-decoration: underline;
}

/* Footer */

.download-footer {
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
}

.download-footer p {
    padding: 6px 0;
    margin: 0;
}

.download-footer a {
    color: #07396A;
    font-weight: 500;
}

.download-footer a:hover {
    color: #0a4d8f;
}

.footer-note {
    color: #6c757d;
    font-size: 14px;
    line-height: 1.6;
}

/* === */

/* Plugin with screenshot */

.addon-item.with-screenshot {
    padding: 0;
    overflow: hidden;
}

.plugin-content {
    display: flex;
    gap: 24px;
    padding: 20px;
}

.plugin-text {
    flex: 1;
    min-width: 0;
}

.plugin-screenshot {
    flex-shrink: 0;
    width: 200px;
}

.plugin-screenshot img {
    width: 100%;
    height: auto;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
}

.plugin-screenshot img:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(7,57,106,0.15);
}

/* === */

/* articles */

.article-notes {
	background: #e8f4f8;
	padding: 15px;
	border-left: 4px solid #0066cc;
	margin: 20px 0;
}

.articles-grid {
    display: grid;
    /* Auto-fill columns, min 320px width */
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px; /* More gap between tiles to avoid sticking */
    margin-top: 20px;
    width: 100%; /* Ensure container takes full width */
    box-sizing: border-box;
}

/* Article card */

.article-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 24px;
    /* Smooth transition for shadow and border color only, NO movement */
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
    display: flex;
    flex-direction: column;
    height: auto; /* Height by content, but Grid will align them in a row */
    box-sizing: border-box;
}

/* Hover effect: shadow and border color only */

.article-card:hover {
    border-color: #07396A;
    box-shadow: 0 8px 24px rgba(7,57,106,0.12);
    /* Removed transform: translateY(-3px) to prevent jumping */
}

/* First article (featured) full-width */

.article-card.featured {
    grid-column: 1 / -1; /* Stretches across all columns */
    background-color: #fcfcfc;
    border-left: 4px solid #07396A;
}

/* Highlighted article */

.article-card.highlight {
    background: #fcfbf0; /* Light yellow tint */
    border-color: #e6e2c3;
}

.article-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Stretches content to full card height */
}

.article-card h2 {
    margin: 0 0 12px 0;
    padding: 0;
    font-size: 20px;
    line-height: 1.4;
}

.article-card h2 a {
    color: #001520; /* Dark text color by default */
    text-decoration: none;
    font-weight: 700;
    transition: color 0.2s;
}

.article-card:hover h2 a {
    color: #07396A; /* Blue on card hover */
}

.article-excerpt {
    color: #555;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 20px;
    flex-grow: 1;
}

/* Card footer: link on left, date on right */

.article-footer {
    margin-top: auto; /* Pushes to the bottom */
    display: flex;
    align-items: center;
    justify-content: space-between; /* Spreads items to the edges */
    padding-top: 16px; /* Margin from text */
    /* border-top: 1px solid #f0f0f0; */ /* Optional: thin separator line */
}

/* "Read more" button */

.read-more-btn {
    display: inline-flex;
    align-items: center;
    color: #07396A;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
}

.read-more-btn:hover {
    color: #0a4d8f;
    text-decoration: none;
}

.read-more-btn::after {
    content: ">";
    margin-left: 6px;
    transition: transform 0.2s ease;
}

.read-more-btn:hover::after {
    transform: translateX(4px);
}

/* Meta info (date) */

.article-meta {
    margin-bottom: 8px; /* Margin before title */
    display: flex;
    align-items: center;
}

.article-date {
    font-size: 12px;
    color: #999;
    font-weight: 500;
    display: flex;
    align-items: center;
}

.article-date::before {
    content: "??"; /* Calendar icon */
    margin-right: 6px;
    font-size: 12px;
    opacity: 0.5;
    filter: grayscale(100%); /* Makes icon gray */
}

/* === */

/* about us */

.company-title {
    color: #07396A;
    font-size: 28px;
    margin-bottom: 16px;
    font-weight: 700;
}

.lead-text {
    font-size: 18px;
    line-height: 1.6;
    color: #2c3e50;
    margin-bottom: 32px;
    border-left: 3px solid #07396A; /* Neat thin line for lead text only */
    padding-left: 20px;
}

.about-text-grid p {
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 1.7;
    color: #4a4a4a;
}

/* Contact Integration */

.contact-integration {
    margin-top: 32px;
    padding-top: 14px;
    border-top: 1px solid #eee;
    display: flex;
    align-items: center;
    gap: 20px;
}

.contact-text {
    font-weight: 500;
    color: #555;
}

.btn-contact {
    display: inline-block;
    background: #fff;
    border: 1px solid #07396A;
    color: #07396A;
    padding: 8px 20px;
    border-radius: 20px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.2s ease;
}

.btn-contact:hover {
    background: #07396A;
    color: #fff;
    text-decoration: none;
}

/* --- Clients Section --- */

.clients-section {
    margin-bottom: 20px;
    /* background: #f9fbfd; */ /* Light background for the whole block width */
    padding: 40px 30px;
    border-radius: 12px;
    margin-left: -30px; /* Visually expand the background */
    margin-right: -30px; /* Visually expand the background */
    width: calc(100% + 60px); /* Compensate for padding */
    box-sizing: border-box;
}

.section-heading {
    text-align: center;
    color: #001520;
    font-size: 24px;
    margin-bottom: 10px;
}

.section-subheading {
    text-align: center;
    color: #666;
    margin-bottom: 32px;
    font-size: 15px;
}

.clients-logos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 24px;
    align-items: center;
    justify-items: center;
}

.logo-item {
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: grayscale(100%);
    opacity: 0.6;
    transition: all 0.3s ease;
}

.logo-item:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.1); /* Slight zoom on hover */
}

.logo-item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* --- Resellers Section --- */

.resellers-section {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.resellers-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
}

.reseller-link {
    color: #07396A;
    font-weight: 600;
    text-decoration: none;
    font-size: 15px;
}

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

.reseller-note {
    font-size: 14px;
    color: #888;
}

/* === */

/* Order Page Styles */

/* Details Grid */
.order-details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-top: 40px;
  padding-top: 30px;
  border-top: 1px solid #eee;
  text-align: justify;
}

.order-details {
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-top: 40px;
  padding-top: 30px;
  border-top: 1px solid #eee;
  text-align: justify;
}

.detail-block h5 {
  color: #07396A;
  font-size: 18px;
  margin-bottom: 15px;
}

.detail-block p {
  font-size: 14px;
  color: #555;
  margin-bottom: 8px;
}

.refund-warning {
  background: #fff3cd;
  color: #856404;
  padding: 15px;
  border-radius: 6px;
  margin-top: 30px;
  font-size: 14px;
  text-align: center;
  border: 1px solid #ffeeba;
  text-align: justify;
}

/* Compact Special Editions */

.special-editions-container {
    margin-top: 60px;
    padding-top: 30px;
    border-top: 1px solid #eee;
}

.special-editions-list {
    display: flex;
    gap: 15px;
    margin: 0 auto;
	width: 100%;
}

.special-item {
    display: flex;
    flex: 1;
    flex-basis: 50%;
    align-items: flex-start;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 16px 24px;
    transition: all 0.2s;
}

.special-item:hover {
    border-color: #bbb;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* Color accents on the left */
.special-item.edu {
    border-left: 4px solid #ffc107; /* Yellow */
}

.special-item.lite {
    border-left: 4px solid #999; /* Gray */
}

.sp-icon {
    font-size: 24px;
    margin-right: 20px;
    width: 40px;
    text-align: center;
    /* Add a small margin at the top so the icon visually aligns
	with the heading text (h3/h4) */
    margin-top: -3px; 
}

.sp-content {
    flex-grow: 1;
}

.sp-content h3 {
    margin-top: 0;
    font-size: 18px;
    color: #333;
}

.sp-content p {
    margin: 0;
    font-size: 14px;
    color: #666;
}

.sp-warning {
    font-size: 12px;
    color: #d9534f; /* Red tint for warnings */
    font-weight: 600;
    margin-top: 4px;
}

.sp-action {
    text-align: right;
    min-width: 140px;
    margin-left: 20px;
    display: flex;
    flex-direction: column;
    align-items: center; /* flex-end; */
    justify-content: flex-start; 
    margin-top: 2px;
    align-self: center;
}

.sp-price {
    font-weight: 700;
    font-size: 18px;
    color: #333;
    margin-bottom: 6px;
}

.sp-price-secondary {
    font-size: 16px;
    font-weight: normal;
    color: #999;
    margin: 5px 0 0 0;
    line-height: 1.2;
}

/* Compact buttons */
.btn-compact {
    display: inline-block;
    padding: 6px 16px;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.2s;
}

.btn-compact:hover {
    border-color: #07396A;
    color: #07396A;
    background: #f9f9f9;
    text-decoration: none;
}

.btn-compact.secondary {
    background: #f5f5f5;
    color: #555;
}

/* === */

/* Contacts Page */

.contacts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  margin-bottom: 50px;
}

.contact-card {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  padding: 30px;
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s;
}

.contact-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(7,57,106,0.08);
  border-color: #07396A;
}

.icon-box {
  font-size: 32px;
  margin-bottom: 15px;
  background: #f4f7fa;
  width: 64px;
  height: 64px;
  line-height: 64px;
  border-radius: 50%;
  display: inline-block;
}

.contact-card h3 {
  color: #07396A;
  font-size: 18px;
  margin-bottom: 10px;
}

.contact-card p {
  color: #666;
  font-size: 14px;
  margin-bottom: 20px;
  line-height: 1.5;
}

.email-link {
  color: #07396A;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  border-bottom: 2px solid rgba(7,57,106,0.1);
  transition: border-color 0.2s;
}

.email-link:hover {
  border-bottom-color: #07396A;
  text-decoration: none;
}

/* Developer Block */
.developer-block {
  background: #f9f9f9;
  border-left: 4px solid #07396A;
  padding: 25px;
  border-radius: 4px;
  margin-bottom: 40px;
}

.developer-block h3 {
  margin: 0 0 5px 0;
  color: #333;
}

.developer-block p {
  margin: 5px 0;
  color: #555;
}

.dev-desc {
  font-style: italic;
  margin-top: 15px !important;
  color: #777 !important;
}

/* FAQ Promo */
.faq-promo {
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid #eee;
  color: #666;
}

.faq-anchor {
  text-align:center;
  margin-top: 20px;
  font-size: 14px;
  color: #660;
}

.faq-link {
  color:#07396A;
  font-weight:600;
}

.faq-promo a {
  font-weight: 600;
  color: #07396A;
}

/* === */

/* FAQ Page */

.faq-category {
  color: #07396A;
  font-size: 22px;
  margin-top: 40px;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #eee;
}

.faq-container {
  margin-bottom: 30px;
}

.faq-item {
  border-bottom: 1px solid #e0e0e0;
}

.faq-item:last-child {
  border-bottom: none;
}

.faq-question {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 15px 0;
  font-size: 18px;
  color: #333;
  cursor: pointer;
  position: relative;
  transition: color 0.2s;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.faq-question:hover {
  color: #07396A;
}

/* Arrow */
.faq-question::after {
  content: "+";
  font-size: 24px;
  font-weight: normal;
  color: #888;
  margin-left: 15px;
}

/* Active state (open) */
.faq-question.active {
  color: #07396A;
}

.faq-question.active::after {
  content: "−"; /* minus */
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.faq-answer p, .faq-answer ul {
  margin: 0 0 15px 0;
  color: #555;
  font-size: 15px;
  line-height: 1.6;
}

.faq-answer ul {
  padding-left: 20px;
}

/* Footer */
.faq-footer {
  background: #f9f9f9;
  padding: 20px;
  text-align: center;
  border-radius: 8px;
  margin-top: 50px;
  font-size: 16px;
}

.faq-footer a {
  font-weight: 700;
  color: #07396A;
}

/* === */

/* RENEWAL BLOCK STYLES */

/* Stretch the card to its full width and change the direction to a column. */
.special-item.renewal.full-width {
    flex-basis: 100%;
    max-width: 100%;
    margin-top: 20px;
    flex-direction: column;
    align-items: flex-start;
    border-left: 4px solid #28a745; /* Зеленый акцент */
}

/* Card header */
.renewal-header {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 15px;
}

.renewal-header .sp-icon {
    margin-right: 15px;
    /* Override margin-top if it interferes with icon alignment */
    margin-top: 0; 
}

.renewal-title-block h3 {
    margin: 0;
}

.renewal-title-block p {
    margin: 5px 0 0 0;
    color: #666;
}

/* List container */
.renewal-list {
    width: 100%;
}

/* License line */
.renewal-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding: 8px 0;
}

.renewal-row.no-border {
    border-bottom: none;
}

/* license */
.renewal-name {
    padding-right: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

/* Group on the right: price + button */
.renewal-action-group {
    text-align: right;
    white-space: nowrap;
    display: flex;
    align-items: center;
}

/* Price within the group */
.renewal-action-group .sp-price {
    font-size: 16px;
    margin-right: 10px;
    margin-bottom: 0; /* Reset the bottom margin if the base class has one */
    font-weight: 700;
    color: #333;
}

/* Warning at bottom */
.renewal-warning {
    margin-top: 15px;
}

/* === */

/* Cookie */

#cookie-consent-banner {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 9999 !important;
  background: #FFFFFF;
  border-top: 3px solid #0493DC;
  box-shadow: 0 -2px 10px rgba(12,90,141,0.3);
  color: #0C5A8D;
  font: 14px/1.4em Arial, Helvetica, sans-serif;
  padding: 15px 19px;
}

#cookie-consent-banner * {
  box-sizing: border-box;
}

#cookie-consent-banner .cookie-banner-inner {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

#cookie-consent-banner .cookie-banner-text {
  flex: 1;
  color: black;
  font-size: 14px;
  line-height: 1.4;
}

#cookie-consent-banner .cookie-banner-text a {
  color: #0C5A8D;
  font-weight: bold;
  text-decoration: none;
}

#cookie-consent-banner .cookie-btn {
  background: #E0E0E0;
  color: #555555 !important;
  border: none;
  padding: 8px 16px;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
  font-size: 12px;
  height: auto;
  line-height: 1.2;
  min-height: 23px;
  text-shadow: 1px 1px #FFF;
}

#cookie-consent-banner .cookie-accept {
  background: #0C5A8D !important;
  color: #FFFFFF !important;
  text-shadow: none;
  margin-left: 8px;
}

#cookie-consent-banner .cookie-decline {
  margin-left: 8px;
}

/* === */

/* On small screens, increase font size */

@media only screen and (max-width: 300px) {
    .prev,
    .next,
    .text {
        font-size: 11px
    }
}

@media (max-width: 600px) {
    .renewal-row {
        flex-direction: column;
        align-items: flex-start; /* Align everything to the left */
        gap: 10px;
        padding: 12px 0;
    }

    .renewal-action-group {
        width: 100%;
        justify-content: space-between; /* Price on the left, button on the right */
        margin-top: 5px;
    }
    
    /* If the button doesn't fit on very narrow screens, you can return to wrap */
    /* .renewal-action-group { flex-wrap: wrap; } */
}

@media only screen and (max-width: 1600px) {
    .special-editions-list {
        flex-direction: column;
    }
}

@media screen and (max-width: 768px) {
    .content {
        display: block;
    }
    aside {
        display: none;
    }
    .contentRight .colLeft {
        display: none;
    }
    .contentRight .colMobile {
        display: block;
    }
    .colMain {
        display: none;
    }
    .contentRight {
        position: relative;            /* establishes positioning context */
        padding: 55px 5px 0 5px;       /* 55px top padding for the menu */
        background: url(/image/bg_for_mobile.jpg) repeat-y;
        border-right: none;
        background-size: contain;
    }
    .contentRight .colRight {
        width: initial;
    }
    .contentRight:after {
        display: none;
    }
    img.order {
        max-width: initial;
    }
    /* Mobile menu styles */
    .newmenu {
        display: block;
        position: absolute;            /* positioned relative to .contentRight */
        top: 0; left: 0; right: 0;     /* stick to the top of content area (under logo) */
        height: 48px;
        z-index: 100;
        background: #f8f9fa;           /* light gray background */
        border-bottom: 1px solid #dee2e6;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        /* Prevent font resizing on zoom (optional, like in previous site) */
        font-size: 14px;
        zoom: 1;
        -webkit-text-size-adjust: none;
        text-size-adjust: none;
    }
    .newmenu::after {
        content: '';
        position: absolute;
        top: 0; right: 0; bottom: 0;
        width: 80px;
        background: linear-gradient(to right, rgba(255,255,255,0), rgba(248,249,250,1));
        pointer-events: none;
        z-index: 101;
    }
    /* Flex container for scrollable items */
    .newmenu nav {
        display: flex;
        align-items: center;
        justify-content: flex-start;   /* align items to the left */
        height: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0 10px;
        gap: 5px;                      /* space between items */
        overflow-x: auto;              /* horizontal scroll */
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
    /* Hide scrollbar */
    .newmenu nav::-webkit-scrollbar { display: none; }
    /* Hide line breaks if present in HTML */
    .newmenu br { display: none; }
    /* Menu links styling */
    .newmenu a {
        flex: 0 0 auto;
        display: inline-block;
        padding: 6px 12px;
        color: #07396A;                /* site brand color */
        text-decoration: none;
        font-weight: 600;
        font-size: 13px;
        text-transform: uppercase;
        border-radius: 4px;
        border: 1px solid transparent; /* reserved space for border */
    }
    /* Active/Hover states */
    .newmenu a:hover,
    .newmenu a.active {
        background-color: #07396A;
        color: #ffffff;
        text-decoration: none;
        box-shadow: 0 2px 5px rgba(7, 57, 106, 0.2);
    }
    #shapka_adaptive {
        content: url("/image/shapka_mobile_begin.png");
    }
    a.language {
        line-height: 2;
    }
    .table-container {
        display: block;
    }
    .left-table-block, .right-table-block {
        display: flex;
        flex-direction: column;
        border: 1px solid #ddd;
        margin-bottom: 10px;
    }
    .cell {
        display: flex;
        justify-content: space-between;
        padding: 8px;
        border: none;
        border-bottom: 1px solid #ddd;
    }
    .cell:before {
        content: attr(data-label); /* Show header for each cell */
        font-weight: bold;
        flex: 1;
        text-align: left;
    }
    .cell:last-child {
        border-bottom: none;
    }
    .bg_purple {
        display: none;
    }

    .content-section {
        display: block;
        margin-bottom: 30px;
    }
    
    /* On mobile: always image -> text */
    
    .content-section.image-right .section-image,
    .content-section.image-left .section-image {
        order: 1; /* Image first */
    }
    
    .content-section.image-right .section-text,
    .content-section.image-left .section-text {
        order: 2; /* Text second */
    }
    
    .section-image {
        margin-bottom: 20px;
        text-align: center;
    }
    
    .section-image img {
        max-width: 100%;
    }
    
    .button-group {
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }
    
    .cta-buttons {
        flex-direction: column;
        gap: 12px;
    }

    .btn-primary,
    .btn-secondary {
        width: 100%;
        max-width: 100%;
        justify-content: center;
        padding: 5px 12px;
        box-sizing: border-box;
    }
    
    .buttonBoxShot {
        display: none;
    }

    .main-download {
        padding: 24px 16px;
    }
    
    .product-header {
        flex-direction: column;
        gap: 8px;
    }
    
    .product-desc {
        padding: 0;
    }
    
    .additional-downloads {
        grid-template-columns: 1fr;
    }
    
    .plugin-content {
        flex-direction: column;
        gap: 16px;
    }
    
    .plugin-screenshot {
        width: 100%;
        text-align: center;
    }
    
    .plugin-screenshot img {
        max-width: 280px;
    }

    .articles-grid {
        grid-template-columns: 1fr; /* Single column */
        gap: 20px;
    }
    
    .article-card {
        padding: 20px;
    }
    
    .article-card.featured {
        border-left-width: 1px; /* Remove left emphasis on mobile if it's distracting */
    }

    .clients-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 per row on mobile */
    }
    
    .about-card {
        padding: 20px;
    }
	
    .order-details-grid {
        grid-template-columns: 1fr;
    }
	
    .detail-block {
                margin: 0 5px 0 5px;
    }
	
    /* The card stretches to its full width and ALLOWS content wrapping */
    .special-item {
        flex-basis: auto;
        flex-wrap: wrap; /* This will force the elements to fall on a new line if there is no space. */
    }

    /* The block with the action (price/button) is forced to move down */
    .sp-action {
        width: 100%;
        margin-left: 0;
        margin-top: 15px;
        /* Set up a nice display: price on the left, button on the right */
        flex-direction: row; 
        justify-content: space-between;
        align-items: center;
        text-align: left;
    }

    /* Remove the indentation from the bottom of the price, since it is now located to the side of the button. */
    .sp-action .sp-price {
        margin-bottom: 0;
    }
	
  #cookie-consent-banner {
    padding: 12px 15px; /* Less padding */
  }
  
  #cookie-consent-banner .cookie-banner-inner {
    flex-direction: column !important; /* Vertical align */
    align-items: stretch !important;
    gap: 12px;
    text-align: center;
  }
  
  #cookie-consent-banner .cookie-banner-text {
    order: 1; /* Text at top */
    font-size: 14px; /* Smaller */
    margin-bottom: 8px;
  }
  
  #cookie-consent-banner .cookie-banner-buttons {
    order: 2; /* Buttons at the bottom */
    display: flex !important;
    gap: 12px;
    justify-content: center;
    width: 100%;
  }
  
  #cookie-consent-banner .cookie-btn {
    flex: 1; /* Buttons to all the width */
    max-width: 160px;
    margin-left: 0 !important; /* Remove margin-left */
  }
  
}