*{
    margin: 0;
    padding: 0;
}
ul,
li{
    margin: 0;
    padding: 0;
    font-family: var(--secondary-font);
    list-style: none !important;
}
span{
    font-family: var(--secondary-font);
}
a{
    text-decoration: none;
    font-family: var(--secondary-font);
    color: var(--primary-color);
}
p{
    font-family: var(--secondary-font);
    line-height: 1.5;
}
img{
    max-width: 100%;
}
body{
    font-family: var(--secondary-font);
}
h1,
h2,
h3,
h4,
h5,
h6{
    font-family: var(--primary-font);
}
section{
    padding: 4rem 0;
}

@font-face {
    font-family: "Gued";
    src: url("../assets/font/Gued-semi.woff2") format("woff2");
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: "Gued";
    src: url("../assets/font/Gued-bold.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: "Montserrat";
    src: url("../assets/font/Montserrat-Thin.woff2") format("woff2");
    font-weight: 200;
    font-display: swap;
}
@font-face {
    font-family: "Montserrat";
    src: url("../assets/font/Montserrat-Regular.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "Montserrat";
    src: url("../assets/font/Montserrat-Medium.woff2") format("woff2");
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: "Montserrat";
    src: url("../assets/font/Montserrat-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: "Montserrat";
    src: url("../assets/font/Montserrat-Bold.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
}
:root{
    --primary-color: #27245D;
    --gradient: linear-gradient(111deg,rgba(18, 180, 229, 0) 0%, rgba(57, 92, 167, 0.72) 100%);
    --primary-font: "Gued";
    --secondary-font: "Montserrat";

}

.primeBtn{
    position:relative;
    overflow:hidden;

    display:flex;
    align-items:center;
    gap:12px;

    padding:14px 24px;

    color:#fff;
    text-decoration:none;

    background:linear-gradient(
        90deg,
        #12B4E5,
        #395CA7,
        #12B4E5
    );
width: fit-content;
    background-size:200% 100%;

    transition:
        background-position .5s ease,
        transform .3s ease,
        box-shadow .3s ease;
}

.primeBtn:hover{

    background-position:100% 0;

    transform:translateY(-3px);

    box-shadow:0 12px 30px rgba(57,92,167,.3);
}

.primeBtn span{

    transition:transform .3s ease;
}

.primeBtn:hover span{

    transform:translateX(5px);
}

.secTitle{
    overflow:hidden;
}

.split-text .char{
    display:inline-block;
}

/* ==========================================================================
   Architectural & Corporate Design (Service & Blog Pages)
   ========================================================================== */
.detailContent h2 {
    font-size: 2.2rem;
    color: var(--primary-color);
    margin-bottom: 20px;
    line-height: 1.3;
    font-weight: 700;
}
.detailContent h3 {
    font-size: 1.8rem;
    color: var(--primary-color);
    margin-top: 40px;
    margin-bottom: 20px;
    font-weight: 600;
    border-bottom: 1px solid #eaeaea;
    padding-bottom: 10px;
}
.detailContent h4 {
    font-size: 1.3rem;
    color: #333;
    margin-bottom: 15px;
    font-weight: 600;
}
.detailContent p {
    font-size: 1.05rem;
    color: #444;
    line-height: 1.8;
    margin-bottom: 20px;
}
.detailContent ul {
    margin-bottom: 25px;
    padding-left: 20px;
}
.detailContent ul li {
    font-size: 1.05rem;
    color: #444;
    line-height: 1.7;
    margin-bottom: 10px;
    list-style-type: square;
}
.detailContent ul li::marker {
    color: var(--primary-color);
}
.detailContent img {
    border-radius: 0;
    margin-bottom: 30px;
    width: 100%;
    border: 1px solid #eaeaea;
}

/* Stats Row - Corporate */
.stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0;
    margin: 40px 0;
    border: 1px solid #eaeaea;
    background: #f9f9f9;
}
.stat-box {
    padding: 30px 25px;
    text-align: center;
    border-right: 1px solid #eaeaea;
    transition: background 0.3s ease;
}
.stat-box:last-child {
    border-right: none;
}
.stat-box:hover {
    background: #ffffff;
}
.stat-box h3 {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin: 0 0 5px 0;
    font-weight: 700;
    border-bottom: none;
    padding-bottom: 0;
}
.stat-box p {
    font-size: 1rem;
    margin: 0;
    font-weight: 500;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Process Grid - Structured */
.process-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin: 40px 0;
}
.process-card {
    background: #ffffff;
    border: 1px solid #eaeaea;
    padding: 14px;
    display: flex;
    align-items: flex-start;
    transition: border-color 0.3s ease;
}
.process-card:hover {
    border-color: var(--primary-color);
}
.process-num {
    font-size: 1.5rem;
    font-weight: 700;
    color: #999;
    margin-right: 15px;
    min-width: 40px;
    border-right: 2px solid var(--primary-color);
    padding-right: 15px;
}
.process-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary-color);
    line-height: 1.4;
}

/* Industries Grid - Clean Tiles */
.industries-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin: 40px 0;
}
.industry-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 20px;
    background: #f9f9f9;
    border: 1px solid #eaeaea;
    transition: all 0.2s ease;
}
.industry-item:hover {
    background: var(--primary-color);
}
.industry-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--primary-color);
}
.industry-item:hover .industry-icon {
    color: #ffffff;
}
.industry-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: #333;
    transition: color 0.2s ease;
}
.industry-item:hover .industry-name {
    color: #ffffff;
}

/* FAQ - Minimalist */
.faq-accordion {
    margin-top: 30px;
}
.faq-item {
    border-bottom: 1px solid #eaeaea;
}
.faq-question {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 20px 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary-color);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.faq-question:hover {
    color: #111;
}
.faq-question::after {
    content: '+';
    font-size: 1.5rem;
    font-weight: 400;
    color: #999;
}
.faq-question.active::after {
    content: '−';
}
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}
.faq-answer p, .faq-answer ul {
    padding-bottom: 20px;
    margin: 0;
    color: #555;
    line-height: 1.7;
}

/* Sidebar - Structured */
.sidebar {
    position: sticky;
    top: 25px;
}

/* Corporate Consultation Widget */
.consultation-widget {
    background: var(--primary-color);
    border: none;
    color: #fff;
    padding: 40px 30px;
}
.consultation-widget h3 {
    color: #fff;
    border-bottom-color: rgba(255,255,255,0.2);
}
.consultation-widget p {
    color: rgba(255,255,255,0.8);
    margin-bottom: 25px;
    font-size: 1rem;
    line-height: 1.6;
}
.consultation-widget .primeBtn {
    width: 100%;
    justify-content: center;
    background: #fff;
    color: var(--primary-color);
    border-radius: 0;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: background 0.2s ease, color 0.2s ease;
}
.consultation-widget .primeBtn:hover {
    background: #f0f0f0;
}

/* ==========================================================================
   Blog Detail Specific Styling (Editorial & Clean)
   ========================================================================== */
.blogDetailContent {
    font-size: 1.15rem;
    line-height: 1.8;
    color: #333;
    background: #fff;
}

.blogDetailContent .blog-hero-image {
    width: 100%;
    height: auto;
    margin-bottom: 30px;
    border: none;
}

.blogDetailContent .blogDetailMeta {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eaeaea;
    font-size: 0.9rem;
    color: #777;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.blogDetailContent .blogDetailMeta span {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

.blogDetailContent .blogDetailMeta svg {
    width: 16px;
    height: 16px;
    color: var(--primary-color);
}

.blogDetailContent h2 {
    font-size: 2.4rem;
    color: var(--primary-color);
    margin-bottom: 25px;
    font-weight: 800;
    line-height: 1.3;
}

.blogDetailContent h3 {
    font-size: 1.8rem;
    color: var(--primary-color);
    margin-top: 40px;
    margin-bottom: 20px;
    font-weight: 700;
    border-bottom: none;
    padding-bottom: 0;
}

/* Editorial Blockquote */
.blogDetailContent blockquote {
    font-size: 1.4rem;
    font-style: italic;
    color: #444;
    margin: 40px 0;
    padding: 20px 0 20px 30px;
    border-left: 4px solid var(--primary-color);
    background: transparent;
    line-height: 1.6;
}

/* Blog Navigation Component */
.blog-separator {
    border: 0;
    height: 1px;
    background: #eaeaea;
    margin: 60px 0 40px 0;
}

.blog-navigation {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.blog-nav-card {
    background: #fff;
    border: 1px solid #eaeaea;
    padding: 25px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-decoration: none;
    transition: background 0.2s ease;
}

.blog-nav-card:hover {
    background: #f9f9f9;
}

.blog-nav-card .nav-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #888;
    margin-bottom: 8px;
    font-weight: 600;
}

.blog-nav-card .nav-title {
    font-size: 1.1rem;
    color: var(--primary-color);
    font-weight: 700;
    margin: 0;
    line-height: 1.4;
}

.blog-nav-card.prev-post {
    text-align: left;
    align-items: flex-start;
}
.blog-nav-card.next-post {
    text-align: right;
    align-items: flex-end;
}

@media (max-width: 768px) {
    .blog-navigation {
        grid-template-columns: 1fr;
    }
    .blog-nav-card.next-post, 
    .blog-nav-card.prev-post {
        text-align: left;
        align-items: flex-start;
    }
}