/* Modern homepage overrides. Existing selectors remain unchanged. */
body { background: #fff; }

/* Hero */
.BannerBack {
    min-height: 520px;
    margin-top: 0 !important;
    padding: 28px 0;
    background-image: linear-gradient(90deg, rgba(4,19,31,.08), rgba(4,19,31,.38)), url('../../Images/BannerBackModern.png') !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: cover !important;
}
.Products {
    min-height: 470px !important;
    max-width: 1180px;
    padding: 0 28px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 26px;
    background: rgba(4,19,31,.28) !important;
    box-shadow: 0 22px 55px rgba(0,0,0,.18);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    overflow: hidden;
}
#ProductInBanner { min-height: 470px; }
#ProductInBanner .carousel-inner { min-height: 470px; }
#ProductInBanner .carousel-inner .item { min-height: 470px !important; padding: 45px 38px 55px; }
#ProductInBanner .carousel-inner .item.active,
#ProductInBanner .carousel-inner .item.next,
#ProductInBanner .carousel-inner .item.prev {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: clamp(25px, 6vw, 90px);
    direction: rtl;
}
#ProductInBanner .carousel-inner .item img {
    float: none !important;
    flex: 0 0 auto;
    width: clamp(210px, 29vw, 355px) !important;
    height: clamp(210px, 29vw, 355px) !important;
    margin: 0 !important;
    padding: 18px;
    object-fit: contain;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 28px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 24px 55px rgba(0,0,0,.28);
}
#ProductInBanner .carousel-inner .item > a {
    flex: 1 1 auto;
    max-width: 610px;
    padding: 0 !important;
    color: rgba(255,255,255,.88) !important;
    font-size: 16px !important;
    line-height: 2 !important;
    text-align: right;
}
#ProductInBanner .carousel-inner .item > a h2 {
    margin: 0 0 14px;
    color: #fff;
    font-size: clamp(27px, 3.2vw, 44px);
    line-height: 1.45;
    font-weight: 500;
}
#ProductInBanner .carousel-inner .item > a p { margin: 0; color: rgba(255,255,255,.76); font-size: 16px; line-height: 2; }
#ProductInBanner .carousel-inner .item > a br { display: none; }
#ProductInBanner .carousel-inner .item > a:after {
    content: "مشاهده محصول";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 142px;
    height: 46px;
    margin-top: 24px;
    padding: 0 22px;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 13px;
    background: #08b8d4;
    color: #fff;
    font-size: 14px;
    box-shadow: 0 12px 26px rgba(8,184,212,.24);
}
#ProductInBanner .carousel-inner .item > a:hover:after { background: #0797b3; transform: translateY(-2px); }
#ProductInBanner .carousel-indicators { bottom: 18px; }
#ProductInBanner .carousel-indicators li { width: 8px; height: 8px; margin: 0 4px; border: 0; border-radius: 10px; background: rgba(255,255,255,.4); transition: width .2s ease, background .2s ease; }
#ProductInBanner .carousel-indicators .active { width: 26px; height: 8px; margin: 0 4px; background: #08b8d4; }

/* About */
.AboutBox {
    min-height: 0 !important;
    padding: 78px 20px;
    background: #fff !important;
    color: #536474;
    font-size: 16px !important;
    line-height: 2.1 !important;
}
.AboutBox .container { position: relative; max-width: 1060px; padding: 38px clamp(24px, 5vw, 60px); border: 1px solid #e5edf1; border-radius: 22px; background: #fff; box-shadow: 0 18px 50px rgba(7,26,43,.07); }
.AboutBox .container:before { content: ""; position: absolute; top: 0; right: 46px; width: 78px; height: 4px; border-radius: 0 0 8px 8px; background: #08b8d4; }
.AboutBox h2 { margin: 0 0 18px !important; padding: 0 !important; color: #112536 !important; font-size: clamp(24px, 3vw, 32px) !important; line-height: 1.5; }
.AboutBox h1 { font-size: inherit !important; }

/* Shared section titles */
.OtherProductBox, .NewProductSection, .ArticleBox { position: relative; padding: 70px clamp(16px, 4vw, 60px) 78px !important; }
.OtherProductBox { background: #f4f8fa; }
.hrClass { display: none !important; }
.TitleClass {
    float: none !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 auto 34px !important;
    color: #102638;
    font-size: clamp(23px, 3vw, 31px) !important;
    line-height: 1.6 !important;
    font-weight: 500;
    text-align: center;
}
.TitleClass:after { content: ""; display: block; width: 54px; height: 3px; margin: 12px auto 0; border-radius: 5px; background: #08b8d4; }

/* Product cards */
#RandomProduct { max-width: 1200px; margin: 0 auto !important; padding: 8px 0 15px !important; }
#RandomProduct .owl-wrapper-outer { padding: 20px 4px 28px; }
#RandomProduct .owl-wrapper { display: flex !important; align-items: stretch; }
#RandomProduct .owl-item { height: auto !important; padding: 0 10px; display: flex !important; align-items: stretch; }
#RandomProduct .item {
    float: none !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 478px;
    margin: 0 !important;
    padding: 24px 20px 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid #e2eaee;
    border-radius: 20px;
    background: #fff;
    color: #182b3a;
    font-size: 15px !important;
    line-height: 1.9 !important;
    text-align: center;
    box-shadow: 0 12px 34px rgba(7,26,43,.07);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
#RandomProduct .item:hover { transform: translateY(-7px); border-color: rgba(8,184,212,.45); box-shadow: 0 20px 45px rgba(7,26,43,.13); }
.RpImgClass {
    flex: 0 0 auto;
    width: 100% !important;
    height: 210px;
    margin: 0 0 18px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: linear-gradient(145deg, #f7fafb, #eef4f6) !important;
    box-shadow: none !important;
    overflow: hidden;
}
.RpImgClass img { width: 175px !important; height: 175px !important; object-fit: contain; transition: transform .25s ease; }
#RandomProduct .item:hover .RpImgClass img { transform: scale(1.06); }
#RandomProduct .item > br { display: none; }
#RandomProduct .item > a {
    width: 100%;
    min-height: 145px;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #172a39;
    font-size: 16px;
    line-height: 1.9;
}
.RandomProductTitle {
    width: 100%;
    height: 91px;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    text-align: center;
}
.RandomProductPrice {
    width: 100%;
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #263b4b;
    font-size: 14px;
    line-height: 1.9;
    text-align: center;
}
#RandomProduct .item > a:hover { color: #0797b3; }
#RandomProduct .item > a:hover .RandomProductPrice { color: #087f97; }
#RandomProduct .item > .fa { display: none; }
.OrderLinkClass {
    margin-top: auto;
    padding: 9px 16px;
    border: 1px solid rgba(8,184,212,.30);
    border-radius: 11px;
    background: #edf9fb;
    color: #087f97 !important;
    font-size: 13px;
}
.OrderLinkClass:hover { border-color: #08b8d4; background: #08b8d4; color: #fff !important; transform: translateY(-2px); }
.owl-theme .owl-controls .owl-page span { width: 8px !important; height: 8px !important; background: #9fb1bd !important; }
.owl-theme .owl-controls .owl-page.active span { width: 24px !important; border-radius: 8px !important; background: #08b8d4 !important; }

/* Contact and education */
.ContactSection {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(300px, .72fr);
    grid-template-areas: "education contact";
    gap: 24px;
    padding: 76px clamp(18px, 5vw, 82px) !important;
    background: #fff;
    direction: ltr;
}
/* Bootstrap's clearfix pseudo-elements become grid items unless they are removed. */
.ContactSection:before,
.ContactSection:after,
.ArticleBox > .container-fluid:before,
.ArticleBox > .container-fluid:after { display: none !important; content: none !important; }
.ContactSection > div { float: none !important; width: auto !important; min-width: 0; margin: 0 !important; padding: 0 !important; direction: rtl; }
.ContactSection > div:first-child { grid-area: contact; display: grid; grid-template-rows: .85fr 1.15fr; gap: 24px; }
.ContactSection > .EducationBox { grid-area: education; }
.ContactBox, .MapBox, .EducationBox { overflow: hidden; border-radius: 22px; box-shadow: 0 18px 45px rgba(7,26,43,.10); }
.ContactBox {
    min-height: 220px !important;
    padding: 36px 28px !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #08b8d4, #087f97) !important;
    text-align: center;
}
.ContactBox span { margin: 0 0 14px !important; color: #fff !important; font-size: 27px !important; line-height: 1.6; }
.ContactBox br { display: none; }
.ContactBox a { display: inline-flex !important; align-items: center; justify-content: center; padding: 9px 16px; border: 1px solid rgba(255,255,255,.30); border-radius: 10px; color: #fff !important; font-size: 14px !important; }
.ContactBox a:hover { background: rgba(255,255,255,.14); transform: translateY(-2px); }
.MapBox {
    min-height: 250px !important;
    padding: 38px 30px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e4ecef;
    background: radial-gradient(circle at 15% 15%, rgba(8,184,212,.10), transparent 38%), #f6fafb !important;
}
.MapBox span { margin: 0 !important; color: #324657 !important; font-size: 15px !important; line-height: 2 !important; text-align: center; }
.EducationBox {
    min-height: 494px !important;
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    background-image: linear-gradient(90deg, rgba(4,19,31,.08) 0%, rgba(4,19,31,.26) 45%, rgba(4,19,31,.92) 100%), url('../../Images/EducationModern.png') !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: cover !important;
}
.Education {
    width: min(50%, 540px) !important;
    max-width: none !important;
    margin: 0 !important;
    padding: clamp(42px, 5vw, 72px) clamp(28px, 4vw, 58px) !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: rgba(255,255,255,.82) !important;
    font-size: 15px !important;
    line-height: 2 !important;
    text-align: right;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
}
.Education p { margin: 0 0 12px; }
.Education p:last-child { margin-bottom: 0; }
.Education strong { color: #fff; font-size: 23px !important; line-height: 1.7; }
.Education a { color: #55d7e9 !important; }
.Education a:hover { color: #fff !important; }

/* Categories */
.Category { padding: 58px clamp(16px, 4vw, 60px) !important; background: #071a2b !important; }
.CategoryBoxes {
    min-height: 0 !important;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
}
.CategoryBoxes .item,
.CategoryBoxes .item:first-child {
    float: none !important;
    width: auto !important;
    min-height: 195px;
    margin: 0 !important;
    padding: 18px 12px !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 17px;
    background: rgba(255,255,255,.055);
    color: rgba(255,255,255,.82) !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
    text-align: center !important;
}
.CategoryBoxes .item:hover { border-color: rgba(8,184,212,.65); background: rgba(8,184,212,.12); transform: translateY(-5px); }
.CategoryBoxes .item img { width: 126px !important; height: 105px !important; margin-bottom: 10px; object-fit: contain; }
.CategoryBoxes .item br { display: none; }

/* Articles */
.ArticleBox { min-height: 0 !important; background: #f4f8fa !important; }
.ArticleBox > .container-fluid { max-width: 1180px; margin: 0 auto; padding: 0 !important; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; clear: both; }
.ArticleBox > .container-fluid > div { min-width: 0; }
.ArticleItemRight, .ArticleItemLeft {
    float: none !important;
    width: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}
.ArticleItems {
    float: none !important;
    width: 100% !important;
    min-height: 215px;
    margin: 0 0 18px !important;
    padding: 27px 28px 24px !important;
    border: 1px solid #e1e9ed;
    border-radius: 18px;
    background: #fff;
    color: #607181;
    font-size: 14px !important;
    line-height: 2 !important;
    box-shadow: 0 10px 30px rgba(7,26,43,.06);
    transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
    display: flex;
    flex-direction: column;
}
.ArticleItems:hover { transform: translateY(-5px); border-color: rgba(8,184,212,.35); box-shadow: 0 17px 38px rgba(7,26,43,.10); }
.ArticleItems > .fa,
.ArticleItems > br { display: none; }
.ArticleLink {
    position: relative;
    display: -webkit-box !important;
    margin-bottom: 12px;
    padding-right: 18px;
    color: #132a3b !important;
    font-size: 18px !important;
    line-height: 1.75 !important;
    font-weight: 500;
    min-height: calc(1.75em *2);
    max-height: calc(1.75em * 2);
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}
.ArticleLink:before { content: ""; position: absolute; top: 11px; right: 0; width: 7px; height: 7px; border-radius: 50%; background: #08b8d4; box-shadow: 0 0 0 5px rgba(8,184,212,.10); }
.ArticleLink:hover { color: #0797b3 !important; transform: none !important; }
.ArticleSummary {
    display: -webkit-box;
    min-height: calc(2em * 3);
    max-height: calc(2em * 3);
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}
.ArticleMoreLink { display: inline-flex; margin-top: auto; padding-top: 12px; color: #0789a2 !important; font-size: 13px !important; }
.ArticleMoreLink:hover { color: #071a2b !important; }

@media (max-width: 1199px) {
    .CategoryBoxes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .Education { width: min(56%, 540px) !important; max-width: none !important; }
}

@media (max-width: 991px) {
    .BannerBack { min-height: 480px; }
    .Products, #ProductInBanner, #ProductInBanner .carousel-inner, #ProductInBanner .carousel-inner .item { min-height: 425px !important; }
    #ProductInBanner .carousel-inner .item { padding: 38px 24px 50px; gap: 35px; }
    .ContactSection { grid-template-columns: 1fr; grid-template-areas: "contact" "education"; }
    .ContactSection > div:first-child { grid-template-columns: repeat(2, minmax(0,1fr)); grid-template-rows: none; }
    .EducationBox { min-height: 460px !important; }
    .Education { width: min(58%, 540px) !important; }
}

@media (max-width: 767px) {
    .BannerBack { min-height: 610px; padding: 14px 12px; }
    .Products { min-height: 580px !important; padding: 0 14px; border-radius: 20px; }
    #ProductInBanner, #ProductInBanner .carousel-inner { min-height: 580px !important; }
    #ProductInBanner .carousel-inner .item { min-height: 580px !important; padding: 30px 10px 54px; }
    #ProductInBanner .carousel-inner .item.active,
    #ProductInBanner .carousel-inner .item.next,
    #ProductInBanner .carousel-inner .item.prev { flex-direction: column; justify-content: center; gap: 24px; }
    #ProductInBanner .carousel-inner .item img { width: 205px !important; height: 205px !important; border-radius: 22px; }
    #ProductInBanner .carousel-inner .item > a { max-width: 100%; text-align: center; font-size: 14px !important; line-height: 1.9 !important; }
    #ProductInBanner .carousel-inner .item > a h2 { margin-bottom: 8px; font-size: 25px; }
    #ProductInBanner .carousel-inner .item > a p { font-size: 14px; line-height: 1.9; }
    #ProductInBanner .carousel-inner .item > a:after { height: 42px; margin-top: 16px; }
    .AboutBox { padding: 45px 14px; font-size: 14px !important; }
    .AboutBox .container { padding: 30px 20px; border-radius: 17px; }
    .OtherProductBox, .NewProductSection, .ArticleBox { padding: 48px 13px 55px !important; }
    .TitleClass { margin-bottom: 24px !important; font-size: 24px !important; }
    #RandomProduct .owl-item { padding: 0 5px; }
    #RandomProduct .item { min-height: 445px; padding: 19px 15px; }
    #RandomProduct .item > a { min-height: 137px; }
    .RandomProductTitle { height: 86px; }
    .RandomProductPrice { min-height: 51px; }
    .ContactSection { gap: 16px; padding: 48px 13px !important; }
    .ContactSection > div:first-child { grid-template-columns: 1fr; gap: 16px; }
    .ContactBox { min-height: 190px !important; }
    .MapBox { min-height: 220px !important; }
    .EducationBox { min-height: 520px !important; background-position: 35% center !important; }
    .EducationBox:before { content: ""; position: absolute; inset: 0; background: rgba(4,19,31,.55); }
    .EducationBox { position: relative; }
    .Education { position: relative; z-index: 1; width: 100% !important; max-width: 100% !important; padding: 38px 25px !important; text-align: center; }
    .Category { padding: 42px 13px !important; }
    .CategoryBoxes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .CategoryBoxes .item, .CategoryBoxes .item:first-child { min-height: 165px; padding: 14px 8px !important; font-size: 13px !important; }
    .CategoryBoxes .item img { width: 96px !important; height: 84px !important; }
    .ArticleBox > .container-fluid { grid-template-columns: 1fr; gap: 0; }
    .ArticleItems { min-height: 0; padding: 22px 20px !important; }
    .ArticleSummary { min-height: auto; max-height: none; }
    .ArticleLink { font-size: 17px !important; }
}