/*
Table OF Contents
------------------------------------
1 > General
2 > Header
3 > TOP HEADER
4 > LOGO
5 > Navigation
6 > Banner content
7 > 

------------------------------------*/

/*------------------------------------*\
	General
\*------------------------------------*/

@font-face {
    font-family: 'newsgoth_btroman';
    src: url('../custom-font/news_gothic_bt-webfont.woff2') format('woff2'),
         url('../custom-font/news_gothic_bt-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

/* -- typography -- */

body {
    font-family: 'newsgoth_btroman';
    /* font-size: 16px; */
    line-height: 1.6;
    overflow-x: hidden;
    color: #000000;
}

h1, h2, h3, h4, h5, h6 {
   
    font-weight: 700;
    margin-top: 0px;
    margin-bottom: 20px;
    color: #10161A;
}

h1 {
    font-size: 44px;
}

h2 {
    font-size: 36px;
}

h3 {
    font-size: 21px;
}

h4 {
    font-size: 18px;
}

h5 {
    font-size: 16px;
}
.enqnow.mr-50 {
    margin-right: 50px;
    margin-top: 3px;
}
.enqnow.mr-50 .contact_us{
    margin-top: 0px;
}
.ml-auto {
    margin-left: auto;
}
a {
    text-decoration: none;
    -webkit-transition: 0.2s opacity;
    transition: 0.2s opacity;
	font-family: 'newsgoth_btroman', Roman;
}

/*a:hover, a:focus {*/
/*    text-decoration: none;*/
/*    outline: none;*/
/*    opacity: 1;*/
/*    color: #6195FF;*/
/*}*/

.main-color {
    color: #6195FF;
}

.white-text {
    color: #FFF;
}
p{
	padding:0px;
	margin:0px;
	font-family: 'newsgoth_btroman', Roman;
	padding: 0;
	font-size: 16px;
	font-weight: 500;
	margin:0;
	color: #2a353e;
}
::-moz-selection {
    background-color: #6195FF;
    color: #FFF;
}

::selection {
    background-color: #6195FF;
    color: #FFF;
}

ul, ol {
    margin: 0;
    padding: 0;
    list-style: none
}
li{
    font-size: 20px;
}
.mt-40{
    margin-top: 40px;
}
.commonfireframe, .work-samplee-in {
    position: relative;
    background: #fff;
    width: 100%;
    padding: 50px 0px 50px 0px;
}
.grey-background{background: #F9FAFB}
.why-work-with-us{margin: 50px 0px 0px;}
.whyjoin p{font-size: 20px;
line-height: 30px;
margin-bottom: 15px;
font-weight: bold;}
.bg-Primary {
    background-color: #ee212b;
}

.apply-btn{background: #e11e33;font-size: 14px;border-radius: 0px;padding: 5px 10px;}
.btn-fill-xl {
        display: inline-block;
    font-weight: 700;
    font-size: 15px;
    padding: 14px 40px;
    border-radius: 4px;
    z-index: 1;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    border: none;


}
.text-textprimary {
    color: #ffffff !important;
}
.panel-title {
   font-size: 24px; 
}

.main-nav li:last-child{
 padding-right: 0px;
}
/* -- section  -- */

.section {
    position: relative;
}

.md-padding {
    padding-top: 120px;
    padding-bottom: 120px;
}

.sm-padding {
    padding-top: 60px;
    padding-bottom: 60px;
}


/* --  background section  -- */

.bg-grey {
    background-color: #FAFAFA;
    border-top: 1px solid #EEE;
    border-bottom: 1px solid #EEE;
}

.bg-dark {
    background-color: #1C1D21;
}


/* --  background image section  -- */

.bg-img {
    position: absolute;
    left: 0;
    top: 5%;
    right: 0;
    bottom: 0;
    z-index: -1;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}

.bg-img .overlay {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    opacity: .8;
    background: #1C1D21;
}
/* --  section header  -- */

.section-header {
    position: relative;
    margin-bottom: 60px;
}

.section-header .title {
    text-transform: capitalize;
}

.title:after {
    content:"";
  	display:block;
  	height:4px;
  	width:40px;
  	background-color: #e11e33;
    margin-top: 20px;
}

.text-center .title:after {
    margin: 20px auto 0px;
}

.research-hero {
    position: relative;
    overflow: hidden;
    padding: 60px 0;
    background: #ffffff;
}  

/* =====================================================
   BACKGROUND DECORATION
===================================================== */

.research-hero::before {
    content: "";
    position: absolute;
    width: 600px;
    height: 600px;
    right: -280px;
    top: -300px;
    border-radius: 50%;
    background: rgba(225, 30, 51, 0.045);
}

.research-hero::after {
    content: "";
    position: absolute;
    width: 450px;
    height: 450px;
    left: -300px;
    bottom: -300px;
    border-radius: 50%;
    background: rgba(225, 30, 51, 0.035);
}

.research-hero-shape {
    position: absolute;
    z-index: 1;
    pointer-events: none;
}

.shape-top {
    width: 8px;
    height: 75px;
    top: 20%;
    left: 0;
    background: #e11e33;
    border-radius: 0 5px 5px 0;
}

.shape-bottom {
    width: 11px;
    height: 11px;
    right: 13%;
    bottom: 20%;
    border: 3px solid rgba(225, 30, 51, 0.25);
    border-radius: 50%;
}

/* =====================================================
   CONTENT
===================================================== */

.research-hero-content {
    position: relative;
    z-index: 5;
    padding-right: 35px;
}

/* Label */

.research-label {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    color: #e11e33;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.label-line {
    width: 40px;
    height: 3px;
    display: inline-block;
    background: #e11e33;
    border-radius: 10px;
}

/* Main heading */

.research-hero h1 {
    margin: 0;
    color: #17243a;
    font-size: clamp(42px, 5vw, 64px);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -2px;
}

.research-hero h1 span {
    display: block;
    color: #e11e33;
}

/* Secondary heading */

.research-hero h2 {
    max-width: 650px;
    margin: 24px 0 20px;
    color: #1d3555;
    font-size: 27px;
    line-height: 1.4;
    font-weight: 700;
}

/* Paragraph */

.research-hero p {
    max-width: 650px;
    margin: 0;
    color: #5c6675;
    font-size: 16px;
    line-height: 1.8;
}

/* =====================================================
   BOTTOM AREA
===================================================== */

.research-hero-bottom {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 28px;
    margin-top: 32px;
}

/* =====================================================
   BUTTON
===================================================== */

.research-btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px; 
    color: #ffffff !important;
    background: #e11e33;
    border: 1px solid #e11e33;
    border-radius: 7px;
    text-decoration: none !important;
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 12px 28px rgba(225, 30, 51, 0.18);
    transition: all 0.3s ease;
}

.research-btn i {
    width: 24px;
    height: 24px; 
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    color: #e11e33;
    border-radius: 50%;
    font-size: 12px;
    transition: transform 0.3s ease;
}

.research-btn:hover {
    background: #c9182d;
    border-color: #c9182d;
    color: #ffffff !important;
    transform: translateY(-3px);
    box-shadow: 0 18px 35px rgba(225, 30, 51, 0.23);
}

.research-btn:hover i {
    transform: translateX(4px);
}

/* =====================================================
   FEATURES
===================================================== */

.research-features {
    display: flex;
    align-items: center;
    gap: 17px;
    margin-top: 25px;
}

.research-feature {
    display: flex;
    align-items: center;
    gap: 8px;
}

.feature-icon {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: #e11e33;
    border-radius: 50%;
    font-size: 12px;
}

.research-feature strong {
    display: block;
    max-width: 85px;
    color: #26364d;
    font-size: 15px; 
    line-height: 1.35;
    font-weight: 700;
}

.feature-divider {
    width: 1px;
    height: 38px;
    background: #e2e5e9;
}

/* =====================================================
   RIGHT VISUAL
===================================================== */

.research-hero-visual {
    position: relative;
    z-index: 3;
    min-height: 550px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px; 
}

/* Large soft blue/red background */

.visual-circle {
    position: absolute;
    width: 500px;
    height: 400px;
    border-radius: 50%;
    background:
        radial-gradient(
            circle at center,
            rgba(225, 30, 51, 0.10) 0%,
            rgba(225, 30, 51, 0.045) 45%,
            rgba(225, 30, 51, 0) 72%
        );
}

/* Image */

.visual-image {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 610px;
}

.visual-image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

/* =====================================================
   FLOATING ANALYTICS CARD
===================================================== */

.floating-analytics {
    position: absolute;
    z-index: 6;
    left: 5px;
    bottom: 55px;

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

    padding: 12px 17px;

    background: #ffffff;
    border: 1px solid rgba(225, 30, 51, 0.08);
    border-radius: 9px;

    box-shadow: 0 14px 35px rgba(28, 42, 61, 0.12);
}

.floating-analytics-icon {
    width: 39px;
    height: 39px;
    display: flex;
    align-items: center;
    justify-content: center;

    color: #ffffff;
    background: #e11e33;
    border-radius: 7px;
    font-size: 15px;
}

.floating-analytics span {
    display: block;
    color: #7b8490;
    font-size: 13px;
    line-height: 1.2;
}

.floating-analytics strong {
    display: block;
    margin-top: 2px;
    color: #24364e;
    font-size: 16px;
}

/* =====================================================
   FLOATING CHECK
===================================================== */

.floating-check {
    position: absolute;
    z-index: 7;
    top: 65px;
    right: 35px;

    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #ffffff;
    background: #e11e33;
    border: 6px solid #ffffff;
    border-radius: 50%;

    box-shadow: 0 10px 25px rgba(225, 30, 51, 0.20);
}

.floating-check i {
    font-size: 14px;
}

/* =====================================================
   TABLET
===================================================== */

@media (max-width: 991px) {

    .research-hero {
        padding: 70px 0;
    }

    .research-hero-content {
        padding-right: 0;
    }

    .research-hero h1 {
        font-size: 50px;
    }

    .research-hero h2 {
        font-size: 24px;
    }

    .research-hero-visual {
        min-height: 430px;
        margin-top: 45px;
    }

    .floating-analytics {
        left: 5%;
        bottom: 45px;
    }
}

/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 767px) {

    .research-hero {
        padding: 55px 0 65px;
    }

    .research-hero h1 {
        font-size: 40px;
        letter-spacing: -1px;
    }

    .research-hero h2 {
        margin-top: 18px;
        font-size: 21px;
        line-height: 1.45;
    }

    .research-hero p {
        font-size: 15px;
        line-height: 1.7;
    }

    .research-hero-bottom {
        align-items: flex-start;
        flex-direction: column;
        gap: 22px;
    }

    .research-btn {
        width: 100%;
        max-width: 220px;
    }

    .research-features {
        width: 100%;
        justify-content: space-between;
        gap: 8px;
    }

    .research-feature {
        gap: 6px;
    }

    .feature-divider {
        height: 35px;
    }

    .research-hero-visual {
        min-height: 350px;
        margin-top: 25px;
        padding: 5px;
    }

    .visual-circle {
        width: 350px;
        height: 320px;
    }

    .floating-analytics {
        left: 0;
        bottom: 25px;
        padding: 9px 12px;
    }

    .floating-analytics-icon {
        width: 34px;
        height: 34px;
        font-size: 12px;
    }

    .floating-check {
        top: 35px;
        right: 10px;
        width: 40px;
        height: 40px;
        border-width: 5px;
    }
}

/* =====================================================
   SMALL MOBILE
===================================================== */

@media (max-width: 480px) {

    .research-hero h1 {
        font-size: 35px;
    }

    .research-hero h2 {
        font-size: 19px;
    }

    .research-label {
        font-size: 11px;
    }

    .label-line {
        width: 28px;
    }

    .research-features {
        gap: 5px;
    }

    .research-feature strong {
        max-width: 65px;
        font-size: 9px;
    }

    .feature-icon {
        width: 29px;
        height: 29px;
        font-size: 10px;
    }

    .feature-divider {
        height: 30px;
    }

    .research-hero-visual {
        min-height: 290px;
    }

    .visual-circle {
        width: 280px;
        height: 270px;
    }

    .floating-analytics {
        display: none;
    }
}


/* =====================================================
   ABOUT HEAD SECTION
===================================================== */

#about-head {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 60px 0; 
    text-align: center;
    background: #223646;
}

/* =====================================================
   BACKGROUND DECORATIONS
===================================================== */

#about-head::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        linear-gradient(
            135deg,
            rgba(225, 30, 51, 0.04),
            transparent 45%,
            rgba(225, 30, 51, 0.03)
        );
    pointer-events: none;
}

/* Large circles */

.about-bg-circle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.about-circle-one {
    width: 380px;
    height: 380px;
    top: -230px;
    right: -120px;
    border: 1px solid rgba(225, 30, 51, 0.18);
}

.about-circle-two {
    width: 260px;
    height: 260px;
    bottom: -190px;
    left: -100px;
    border: 45px solid rgba(225, 30, 51, 0.045);
}

/* Dot pattern */

.about-pattern {
    position: absolute;
    right: 7%;
    bottom: 25px;
    width: 90px;
    height: 70px;
    opacity: 0.45;

    background-image: radial-gradient(
        rgba(225, 30, 51, 0.7) 1.5px,
        transparent 1.5px
    );

    background-size: 14px 14px;
}

/* =====================================================
   CONTENT BOX
===================================================== */

.about-content-box {
    position: relative;
    z-index: 2;
    max-width: 1000px;
    margin: 0 auto;
    padding: 10px 35px 5px;
}

/* Red top accent */

/* =====================================================
   LABEL
===================================================== */

.about-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    margin-bottom: 25px;

    color: #e11e33;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.about-label-line {
    display: inline-block;
    width: 32px;
    height: 2px;
    background: #e11e33;
    border-radius: 10px;
}

/* =====================================================
   DESCRIPTION
===================================================== */

#about-head .description {
    position: relative;
    width: 100%;
    max-width: 950px;
    margin: 0 auto;
    text-align: center;
} 

#about-head .description p {
    margin: 0;
    color: rgba(255, 255, 255, 0.92);
    font-size: 24px;
    line-height: 1.85;
    font-weight: 400;
    letter-spacing: 0.1px;
}

/* =====================================================
   SIDE ACCENTS
===================================================== */

#about-head .description::before,
#about-head .description::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 5px;
    height: 55px;
    transform: translateY(-50%);
    background: #e11e33;
    border-radius: 5px;
}

#about-head .description::before {
    left: -40px;
}

#about-head .description::after {
    right: -40px;
} 

/* =====================================================
   HOVER / SUBTLE EFFECT
===================================================== */

.about-content-box {
    transition: transform 0.3s ease;
}

.about-content-box:hover {
    transform: translateY(-2px);
}

/* =====================================================
   TABLET
===================================================== */

@media (max-width: 991px) {

    #about-head {
        padding: 65px 0;
    }

    .about-content-box {
        padding-left: 25px;
        padding-right: 25px;
    }

    #about-head .description p {
        font-size: 19px;
        line-height: 1.8;
    }

    #about-head .description::before {
        left: -15px;
    }

    #about-head .description::after {
        right: -15px;
    }
}

/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 767px) {

    #about-head {
        padding: 55px 0;
    }

    .about-content-box {
        padding: 10px 15px 0;
    }

    .about-label {
        margin-bottom: 20px;
        font-size: 11px;
        letter-spacing: 1.5px;
    }

    .about-label-line {
        width: 25px;
    }

    #about-head .description p {
        font-size: 17px;
        line-height: 1.75;
    }

    #about-head .description::before,
    #about-head .description::after {
        display: none;
    }

    .about-pattern {
        right: 3%;
        bottom: 15px;
        transform: scale(0.7);
    }
}

/* =====================================================
   SMALL MOBILE
===================================================== */

@media (max-width: 480px) {

    #about-head {
        padding: 45px 0;
    }

    .about-content-box {
        padding-left: 5px;
        padding-right: 5px;
    }

    #about-head .description p {
        font-size: 15px;
        line-height: 1.75;
    }

    .about-label {
        gap: 9px;
        font-size: 10px;
    }

    .about-label-line {
        width: 20px;
    }

    .about-circle-one {
        width: 250px;
        height: 250px;
        right: -170px;
        top: -170px;
    }
}

/* =========================================================
   PHD SERVICES SECTION
========================================================= */

.phd-services-section {
    position: relative;
    overflow: hidden;
    padding: 60px 0 ;
    /*background: #f8fafc;*/
}

/* Background */

.phd-services-bg {
    position: absolute;
    width: 550px;
    height: 550px;
    right: -300px;
    top: -280px;
    border-radius: 50%;
    background: rgba(225, 30, 51, 0.045);
}

.phd-services-section::before {
    content: "";
    position: absolute;
    width: 350px;
    height: 350px;
    left: -220px;
    bottom: -220px;
    border-radius: 50%;
    border: 60px solid rgba(34, 54, 70, 0.025);
}

/* Pattern */

.phd-services-pattern {
    position: absolute;
    right: 6%;
    top: 100px;
    width: 80px;
    height: 80px;
    opacity: 0.5;

    background-image: radial-gradient(
        #e11e33 1.5px,
        transparent 1.5px
    );

    background-size: 13px 13px;
}


/* =========================================================
   HEADER
========================================================= */

.phd-services-header {
    position: relative;
    z-index: 2;
    margin-bottom: 40px; 
    text-align: center;
}

.services-label {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;

    color: #e11e33;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.services-label span {
    width: 30px;
    height: 2px;
    background: #e11e33;
    border-radius: 5px;
}

.phd-services-header h2 {
    margin: 0;
    color: #223646;
    font-size: 45px;
    font-weight: 800;
}

.phd-services-header h2 span{
    color: var(--red); 
}
.header-line {
    width: 55px;
    height: 3px;
    margin: 17px auto 0;
    background: #e11e33;
    border-radius: 10px;
}


/* =========================================================
   ROW
========================================================= */

.phd-services-row {
    position: relative;
    z-index: 2;
}


/* =========================================================
   SERVICE CARD
========================================================= */

.phd-service-card {
    position: relative;
    height: 100%;
    background: #ffffff;
    border: 1px solid #e8edf1;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 35px rgba(34, 54, 70, 0.055);
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
    padding: 20px; 
}

/* Top red line */

.phd-service-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;

    width: 0;
    height: 4px;

    background: #e11e33;

    transition: width 0.35s ease;
}

.phd-service-card:hover {
    transform: translateY(-9px);
    border-color: rgba(225, 30, 51, 0.16);
    box-shadow: 0 20px 50px rgba(34, 54, 70, 0.12);
}

.phd-service-card:hover::before {
    width: 100%;
}


/* =========================================================
   NUMBER
========================================================= */

.service-number {
    position: absolute;
    top: 20px;
    right: 20px;

    color: rgba(34, 54, 70, 0.18);

    font-size: 14px;
    font-weight: 800;
    letter-spacing: 1px;
}


/* =========================================================
   IMAGE
========================================================= */

.service-image {
    position: relative;
    margin: 38px auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Circle */

.image-circle {
    position: absolute;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(225, 30, 51, 0.10) 0%,
            rgba(225, 30, 51, 0.045) 60%,
            rgba(225, 30, 51, 0) 75%
        );

    transition: transform 0.4s ease;
}

.phd-service-card:hover .image-circle {
    transform: scale(1.12);
}

.service-image img {
    position: relative;
    z-index: 2;

    width: 125px;
    height: 125px;

    object-fit: contain;

    transition: transform 0.4s ease;
}

.phd-service-card:hover .service-image img {
    transform: scale(1.07);
}


/* =========================================================
   CONTENT
========================================================= */

.service-card-content {
    text-align: center;
}

.service-card-content h3 {
    min-height: 55px;
    margin: 0 0 22px;
    color: #223646;
    font-size: 22px;
    line-height: 1.45;

    font-weight: 700;
}

.service-card-content h3 span {
    display: inline;
}


/* =========================================================
   READ MORE
========================================================= */

.service-read-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    color: #e11e33 !important;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;

    text-decoration: none !important;

    transition: all 0.3s ease;
}

.service-read-more i {
    width: 29px;
    height: 29px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #ffffff;
    background: #e11e33;

    border-radius: 50%;

    font-size: 10px;

    transition: transform 0.3s ease;
}

.service-read-more:hover {
    color: #c9182d !important;
}

.service-read-more:hover i {
    transform: translateX(5px);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .phd-services-section {
        padding: 60px 0;
    }

    .phd-services-header {
        margin-bottom: 40px;
    }

    .phd-services-header h2 {
        font-size: 31px;
    }

    .phd-service-card {
        min-height: 350px;
    }

    .service-image {
        margin-top: 32px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .phd-services-section {
        padding: 50px 0;
    }

    .phd-services-header {
        margin-bottom: 35px;
    }

    .services-label {
        font-size: 10px;
        letter-spacing: 1.5px;
    }

    .services-label span {
        width: 22px;
    }

    .phd-services-header h2 {
        font-size: 27px;
    }

    .phd-service-card {
        max-width: 370px;
        min-height: 350px;
        margin: 0 auto 25px;
    }

    .service-image {
        width: 155px;
        height: 155px;
    }

    .image-circle {
        width: 135px;
        height: 135px;
    }

    .service-image img {
        width: 115px;
        height: 115px;
    }

    .service-card-content h3 {
        font-size: 17px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .phd-services-section {
        padding: 50px 0;
    }

    .phd-services-header h2 {
        font-size: 24px;
    }

    .phd-service-card {
        min-height: 330px;
    }

    .service-number {
        top: 16px;
        right: 16px;
        font-size: 12px;
    } 
 
    .service-card-content {
        padding-left: 20px; 
        padding-right: 20px;  
    }
 
    .service-card-content h3 {
        font-size: 16px;
    } 

}  

/* =========================================================
   SOFTWARE IMPLEMENTATION
   BOOTSTRAP 3 COMPATIBLE
========================================================= */

.software-implementation {
    position: relative;
    padding: 60px 0;
    background: #f7f9fb; 
    overflow: hidden;
}


/* Background decoration */

.software-implementation:before {
    content: "";
    position: absolute;

    width: 420px;
    height: 420px;

    top: -220px;
    right: -180px;

    border: 75px solid rgba(225, 30, 51, 0.035);

    border-radius: 50%;
}

.software-implementation:after {
    content: "";
    position: absolute;

    width: 350px;
    height: 350px;

    bottom: -220px;
    left: -180px;

    border: 60px solid rgba(34, 54, 70, 0.035);

    border-radius: 50%;
}


/* =========================================================
   GRID
========================================================= */

.software-grid {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;  
} 

.software-grid > [class*="col-"] {
    margin-bottom: 30px;
}


/* =========================================================
   CARD
========================================================= */

.software-card {
    position: relative;
    height: 100%;
    padding: 30px 25px 26px;

    background: #fff;

    border: 1px solid #e8edf1;

    border-radius: 12px;

    text-align: center;

    box-shadow: 0 8px 28px rgba(34, 54, 70, 0.055);

    overflow: hidden;

    transition: all .35s ease;
}


/* Red top line */

.software-card:before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    background: #e11e33;

    transform: scaleX(0);

    transition: transform .35s ease;
}


.software-card:hover {
    transform: translateY(-8px);

    border-color: rgba(225, 30, 51, .15);

    box-shadow: 0 18px 45px rgba(34, 54, 70, .12);
}

.software-card:hover:before {
    transform: scaleX(1);
}


/* =========================================================
   NUMBER
========================================================= */

.software-number {
    position: absolute;

    top: 17px;
    right: 20px;

    color: #e11e33;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 1px;

    opacity: .55;
}


/* =========================================================
   ICON
========================================================= */

.software-icon {
    position: relative;

    width: 105px;
    height: 105px;

    margin: 0 auto 22px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #fff5f6;

    border-radius: 50%;

    transition: all .35s ease;
}


/* Outer ring */

.software-icon:before {
    content: "";

    position: absolute;

    width: 88px;
    height: 88px;

    border: 1px dashed rgba(225, 30, 51, .25);

    border-radius: 50%;

    transition: all .35s ease;
}


.software-icon img {
    position: relative;
    z-index: 2;

    width: 65px;
    height: 65px;

    object-fit: contain;

    transition: all .35s ease;
}

 
/* Hover icon */

.software-card:hover .software-icon {
    background: #e11e33;
}

.software-card:hover .software-icon:before {
    border-color: rgba(255,255,255,.6);

    transform: rotate(25deg);
}

.software-card:hover .software-icon img {
    transform: scale(1.08);
}

.phd-services-header p{
    padding-top: 15px;
    max-width: 600px; 
    color: #71808b; 
    margin: 0 auto; 
} 

/* =========================================================
   CONTENT
========================================================= */

.software-content {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 335px; 
}
 

.software-content h4 {
    margin: 0 0 13px;
    color: #223646;
    font-size: 18px;
    font-weight: 700;

    line-height: 1.4; 
}


.software-content p { 
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    color: #71808b;
}


/* =========================================================
   READ MORE
========================================================= */

.software-btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: fit-content;

    margin: auto auto 0;

    padding: 9px 14px;

    color: #e11e33;

    background: #fff;

    border: 1px solid rgba(225, 30, 51, .2);

    border-radius: 5px;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: .6px;

    text-decoration: none;

    transition: all .3s ease;
}


.software-btn i {
    width: 20px;
    height: 20px;

    margin-left: 7px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: #fff;

    background: #e11e33;

    border-radius: 50%;

    transition: all .3s ease;
}


.software-btn:hover {
    color: #fff;

    background: #e11e33;

    border-color: #e11e33;

    text-decoration: none;
}


.software-btn:hover i {
    color: #e11e33;

    background: #fff;

    transform: translateX(3px);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .software-implementation {
        padding: 70px 0;
    }

    .software-section-header h2 {
        font-size: 30px;
    }


}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .software-implementation {
        padding: 60px 0;
    }

    .software-section-header {
        margin-bottom: 35px;
    }

    .software-section-header h2 {
        font-size: 27px;
    }
 
    .software-grid {
        display: block;
    }

    .software-card {
        min-height: 0;
    }

    .software-content {
        height: auto;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .software-implementation {
        padding: 50px 0;
    }

    .software-section-header h2 {
        font-size: 24px;
    }

    .software-card {
        padding: 27px 20px;
    }

    .software-icon {
        width: 95px;
        height: 95px;
    }

}

/* =========================================================
   WEB SERVICES SECTION
   Bootstrap 3 Compatible
========================================================= */

.web-services-section {
    position: relative; 
    padding: 60px 0; 
    background: #ffffff; 
    overflow: hidden; 
} 


/* Background decoration */

.web-services-section:before {
    content: "";
    position: absolute;

    width: 420px;
    height: 420px;

    top: -250px;
    left: -220px;

    border: 70px solid rgba(225, 30, 51, 0.035);
    border-radius: 50%;
}

.web-services-section:after {
    content: "";
    position: absolute;

    width: 350px;
    height: 350px;

    bottom: -230px;
    right: -180px;

    border: 60px solid rgba(34, 54, 70, 0.035);
    border-radius: 50%;
}


/* =========================================================
   SECTION HEADING
========================================================= */

.web-services-heading {
    position: relative;
    z-index: 2;

    margin-bottom: 55px;
}

.web-services-heading > span {
    display: block;

    margin-bottom: 8px;

    color: #e11e33;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 2px;
    text-transform: uppercase;
}

.web-services-heading h2 {
    margin: 0 0 12px;

    color: #223646;

    font-size: 35px;
    font-weight: 700;

    text-transform: uppercase;
}

.web-services-heading p {
    max-width: 650px;

    margin: 0 auto;

    color: #71808b;

    font-size: 14px;
    line-height: 1.7;
}


/* Heading line */

.heading-line {
    position: relative;

    width: 65px;
    height: 3px;

    margin: 18px auto 0;

    background: #e11e33;

    border-radius: 10px;
}

.heading-line i {
    position: absolute;

    width: 7px;
    height: 7px;

    top: -2px;
    left: 50%;

    margin-left: -3px;

    background: #ffffff;

    border: 2px solid #e11e33;

    border-radius: 50%;
}


/* =========================================================
   MAIN LAYOUT
========================================================= */

.web-services-layout {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: stretch;
}


/* =========================================================
   FEATURED SERVICE
========================================================= */

.web-featured {
    position: relative;

    height: 100%;
    min-height: 455px;

    padding: 38px 35px;

    background: #223646;

    border-radius: 12px;

    overflow: hidden;

    box-shadow: 0 18px 45px rgba(34, 54, 70, 0.13);
}


/* Red vertical accent */

.web-featured:before {
    content: "";

    position: absolute;

    left: 0;
    top: 35px;
    bottom: 35px;

    width: 4px;

    background: #e11e33;
}


/* Featured top */

.featured-top {
    position: relative;

    margin-bottom: 30px;
}

.featured-number {
    position: absolute;

    top: -15px;
    right: 0;

    color: rgba(255,255,255,.25);

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 2px;
}


.featured-icon {
    width: 105px;
    height: 105px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.08);

    border: 1px solid rgba(255,255,255,.12);

    border-radius: 50%;
}


.featured-icon img {
    width: 65px;
    height: 65px;
    object-fit: contain;
     filter: brightness(0) invert(1);
}


/* Featured content */

.featured-content {
    position: relative;
    z-index: 3;
}

.small-title {
    display: block;

    margin-bottom: 9px;

    color: #e11e33;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 1.5px;
}


.featured-content h3 {
    margin: 0 0 17px;

    color: #ffffff;

    font-size: 27px;
    font-weight: 700;

    line-height: 1.3;
}


.featured-content p {
    margin: 0 0 30px;
    color: rgba(255,255,255,.72);
    font-size: 15px;
    line-height: 1.8;
}


/* Featured button */

.featured-btn {
    display: inline-flex;
    align-items: center;
    padding: 11px 17px;
    color: #ffffff;
    background: #e11e33;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 700;

    text-decoration: none;

    transition: all .3s ease;
}

.featured-btn i {
    margin-left: 12px;

    transition: transform .3s ease;
}

.featured-btn:hover {
    color: #ffffff;

    background: #c9182d;

    text-decoration: none;
}

.featured-btn:hover i {
    transform: translateX(4px);
}


/* Featured decoration */

.featured-decoration {
    position: absolute;

    width: 210px;
    height: 210px;

    right: -90px;
    bottom: -90px;

    border: 40px solid rgba(255,255,255,.035);

    border-radius: 50%;
}


/* =========================================================
   RIGHT SERVICE CARDS
========================================================= */

.web-service-list {
    margin-left: 5px;
}

.web-service-list > [class*="col-"] {
    margin-bottom: 25px;
}


.web-service-card {
    position: relative;

    min-height: 215px;

    padding: 27px 25px;

    display: flex;
    align-items: flex-start;

    background: #ffffff;

    border: 1px solid #e8edf1;

    border-radius: 10px;

    box-shadow: 0 7px 25px rgba(34, 54, 70, 0.055);

    overflow: hidden;

    transition: all .35s ease;
}


/* Red hover line */

.web-service-card:before {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 0;
    height: 3px;

    background: #e11e33;

    transition: width .35s ease;
}


.web-service-card:hover {
    transform: translateY(-6px);

    border-color: rgba(225,30,51,.18);

    box-shadow: 0 16px 38px rgba(34,54,70,.10);
}


.web-service-card:hover:before {
    width: 100%;
}


/* Card icon */

.web-card-icon {
    flex: 0 0 70px;

    width: 70px;
    height: 70px;

    margin-right: 18px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #fff5f6;

    border-radius: 10px;

    transition: all .35s ease;
}


.web-card-icon img {
    width: 46px;
    height: 46px;

    object-fit: contain;

    transition: all .35s ease;
}


.web-service-card:hover .web-card-icon {
    background: #e11e33;
}

.web-service-card:hover .web-card-icon img {
    transform: scale(1.08);
}


/* Card content */

.web-card-content {
    position: relative;

    flex: 1;
}


.service-number {
    position: absolute;

    top: -4px;
    right: 0;

    color: #dfe5e9;

    font-size: 11px;
    font-weight: 700;
}


.web-card-content h4 {
    margin: 0 25px 10px 0;
    color: #223646;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
}


.web-card-content p {
    margin: 0 0 14px;
    color: #71808b;
    font-size: 15px; 
    line-height: 1.65;
}


/* Read more */

.web-card-content > a {
    color: #e11e33;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: .7px;

    text-decoration: none;

    transition: all .3s ease;
}


.web-card-content > a i {
    margin-left: 5px;

    transition: transform .3s ease;
}


.web-card-content > a:hover {
    color: #223646;

    text-decoration: none;
}


.web-card-content > a:hover i {
    transform: translateX(4px);
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .web-services-section {
        padding: 70px 0;
    }

    .web-services-heading h2 {
        font-size: 30px;
    }

    .web-services-layout {
        display: block;
    }

    .web-featured {
        min-height: 0;

        margin-bottom: 25px;
    }

    .web-service-list {
        margin-left: -15px;
        margin-right: -15px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .web-services-section {
        padding: 60px 0;
    }

    .web-services-heading {
        margin-bottom: 35px;
    }

    .web-services-heading h2 {
        font-size: 26px;
    }

    .web-services-heading p {
        font-size: 13px;
    }

    .web-featured {
        padding: 32px 27px;

        min-height: 390px;
    }

    .featured-content h3 {
        font-size: 24px;
    }

    .web-service-card {
        min-height: 0;

        padding: 24px 20px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .web-services-section {
        padding: 50px 0;
    }

    .web-services-heading h2 {
        font-size: 23px;
    }

    .web-featured {
        padding: 28px 23px;
    }

    .featured-icon {
        width: 90px;
        height: 90px;
    }

    .featured-icon img {
        width: 55px;
        height: 55px;
    }

    .web-service-card {
        display: block;

        text-align: left;
    }

    .web-card-icon {
        margin-bottom: 18px;
    }


}

/* =========================================================
   MODERN ABOUT SECTION
   Bootstrap 3 Compatible
========================================================= */

.modern-about-section {
    position: relative;
    padding: 60px 0;
    background: #fff; 
    overflow: hidden;
}


/* =========================================================
   BACKGROUND DECORATION
========================================================= */

.modern-about-section:before {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    left: -250px;
    top: -230px;

    border: 65px solid rgba(225, 30, 51, 0.035);

    border-radius: 50%;
}


.modern-about-section:after {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    right: -180px;
    bottom: -190px;

    border: 55px solid rgba(34, 54, 70, 0.035);

    border-radius: 50%;
}


/* =========================================================
   ROW
========================================================= */

.about-row {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;
}


/* =========================================================
   IMAGE AREA
========================================================= */

.about-image-wrap {
    position: relative;

    padding: 20px 25px 35px 15px;
}


/* Main image */

.about-image {
    position: relative;
    z-index: 2;
}


.about-image img {
    width: 100%;

    height: auto;

    display: block;

    transition: transform .5s ease;
}


.about-image-wrap:hover .about-image img {
    transform: scale(1.035);
}


/* =========================================================
   IMAGE RED ACCENT
========================================================= */

.about-image-line {
    position: absolute;

    left: 0;
    bottom: 5px;

    width: 75px;
    height: 75px;

    background: #e11e33;

    border-radius: 8px;

    z-index: 1;
}


/* =========================================================
   IMAGE NUMBER
========================================================= */

.about-image-number {
    position: absolute;

    right: 0;
    top: 0;

    width: 105px;
    height: 105px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    background: #223646;

    border-radius: 8px;

    z-index: 3;

    box-shadow: 0 12px 30px rgba(34, 54, 70, .15);
}


.about-image-number span {
    color: #ffffff;

    font-size: 25px;

    font-weight: 700;

    line-height: 1;
}


.about-image-number small {
    margin-top: 7px;

    color: rgba(255,255,255,.65);

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.5px;
}


/* =========================================================
   CONTENT
========================================================= */

.modern-about-content {
    position: relative;

    padding: 15px 0 15px 45px;
}


.modern-about-content h2 span {
    color: #e11e33;
}


/* =========================================================
   DIVIDER
========================================================= */

.about-divider {
    position: relative;

    width: 65px;
    height: 3px;

    margin: 20px 0 23px;

    background: #e11e33;

    border-radius: 10px;
}


.about-divider span {
    position: absolute;

    width: 7px;
    height: 7px;

    top: -2px;
    right: 0;

    background: #ffffff;

    border: 2px solid #e11e33;

    border-radius: 50%;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.modern-about-content p {
    max-width: 650px;

    margin: 0;

    color: #71808b;

    font-size: 17px;

    line-height: 1.9;
}


/* =========================================================
   BOTTOM AREA
========================================================= */

.about-bottom {
    display: flex;

    align-items: center;

    margin-top: 30px;
}


/* =========================================================
   READ MORE BUTTON
========================================================= */

.about-read-btn {
    display: inline-flex;

    align-items: center;

    padding: 12px 17px;

    color: #ffffff;

    background: #e11e33;

    border-radius: 5px;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: .8px;

    text-decoration: none;

    box-shadow: 0 8px 20px rgba(225, 30, 51, .18);

    transition: all .3s ease;
}


.about-read-btn i {
    margin-left: 13px;

    font-size: 12px;

    transition: transform .3s ease;
}


.about-read-btn:hover {
    color: #ffffff;

    background: #c9182d;

    text-decoration: none;

    transform: translateY(-2px);

    box-shadow: 0 12px 25px rgba(225, 30, 51, .25);
}


.about-read-btn:hover i {
    transform: translateX(4px);
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .modern-about-section {
        padding: 70px 0;
    }

    .about-row {
        display: block;
    }

    .about-image-wrap {
        max-width: 600px;

        margin: 0 auto 45px;
    }

    .modern-about-content {
        padding: 0;
    }

    .modern-about-content h2 {
        font-size: 29px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .modern-about-section {
        padding: 60px 0;
    }

    .about-image-wrap {
        padding: 15px 15px 30px 10px;

        margin-bottom: 35px;
    }

    .about-image-number {
        width: 85px;
        height: 85px;
    }

    .about-image-number span {
        font-size: 21px;
    }

    .modern-about-content h2 {
        font-size: 26px;

        line-height: 1.45;
    }

    .modern-about-content p {
        font-size: 13px;

        line-height: 1.8;
    }

    .about-bottom {
        display: block;
    }

    .about-mini-text {
        margin: 18px 0 0;

        padding-left: 15px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .modern-about-section {
        padding: 50px 0;
    }

    .modern-about-content h2 {
        font-size: 23px;
    }

    .about-image-number { 
        width: 75px;
        height: 75px; 
    }

    .about-image-number span {
        font-size: 19px;
    }

    .about-image-number small {
        font-size: 7px;
    }

}

.modern-about-content .phd-services-header{
    text-align: left;
} 

.modern-about-content .phd-services-header .header-line{
    margin: 17px 0;
}

#steps-sucessfull-business .section-header h2{
    font-size: 45px !important; 
}

#steps-sucessfull-business .section-header{ 
    padding: 0 !important;  
} 

.process-card { 
    background: #fff; 
    padding: 20px;  
    border-radius: 20px;  
    min-height: 365px; 
} 

.process-card .steps-content h3 {
    color: #e11e33;
    margin-top: 20px;
}

.process-card .steps-content p{
    font-size: 17px;
    color: #71808b;
}

/* =========================================================
   MODERN NUMBERS / STATS SECTION
   Bootstrap 3 Compatible
========================================================= */

.modern-numbers-section {
    position: relative;
    width: 100%;
    overflow: hidden;
}


/* =========================================================
   BACKGROUND
========================================================= */

.numbers-bg-img {
    position: relative;
    padding: 60px 0;
    background:
        linear-gradient(
            135deg,
            #223646 0%,
            #182b3a 100%
        );

    overflow: hidden;
}


/* Decorative circles */

.numbers-bg-img:before {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    left: -250px;
    top: -250px;

    border: 70px solid rgba(255, 255, 255, 0.035);

    border-radius: 50%;
}


.numbers-bg-img:after {
    content: "";

    position: absolute;

    width: 360px;
    height: 360px;

    right: -230px;
    bottom: -240px;

    border: 60px solid rgba(225, 30, 51, 0.08);

    border-radius: 50%;
}


/* =========================================================
   OPTIONAL OVERLAY
========================================================= */

.numbers-overlay {
    position: absolute;

    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    background:
        radial-gradient(
            circle at 50% 100%,
            rgba(225, 30, 51, 0.08),
            transparent 45%
        );

    pointer-events: none;
}


/* =========================================================
   HEADING
========================================================= */

.numbers-heading {
    position: relative;

    z-index: 2;

    text-align: center;

    margin-bottom: 55px;
}


.numbers-heading > span {
    display: inline-block;
    margin-bottom: 11px;
    color: #e11e33;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
}


.numbers-heading h2 {
    margin: 0;
    color: #ffffff;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.4;
}


/* Heading line */

.numbers-heading-line {
    position: relative;

    width: 65px;

    height: 3px;

    margin: 18px auto 0;

    background: #e11e33;

    border-radius: 10px;
}


.numbers-heading-line i {
    position: absolute;

    width: 7px;
    height: 7px;

    top: -2px;
    right: 0;

    background: #223646;

    border: 2px solid #e11e33;

    border-radius: 50%;
}


/* =========================================================
   STATISTICS ROW
========================================================= */

.numbers-row {
    position: relative;

    z-index: 2;
}


/* =========================================================
   STAT CARD
========================================================= */

.modern-number-card {
    position: relative;

    min-height: 190px;

    margin-bottom: 20px;

    padding: 32px 20px;

    text-align: center;

    background: rgba(255, 255, 255, 0.055);

    border: 1px solid rgba(255, 255, 255, 0.11);

    border-radius: 10px;

    backdrop-filter: blur(8px);

    -webkit-backdrop-filter: blur(8px);

    transition: all .35s ease;
}


.modern-number-card:hover {
    transform: translateY(-7px);

    background: rgba(255, 255, 255, 0.09);

    border-color: rgba(225, 30, 51, 0.45);

    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.18);
}


/* =========================================================
   ICON
========================================================= */

.number-icon {
    margin: 0 auto 17px;
    display: table;
    transition: all .3s ease;
}

.number-icon i {
    display: table-cell;
    vertical-align: middle; 
    color: #fff;
    font-size: 55px; 
}

.modern-number-card:hover .number-icon i {
    color: #ffffff;
}


/* =========================================================
   NUMBER
========================================================= */

.number-content h3 {
    margin: 0 0 7px;

    color: #ffffff;

    font-size: 38px;

    font-weight: 700;

    line-height: 1;
}


.number-content h3 b {
    color: #e11e33;

    font-size: 25px;

    font-weight: 700;
}


.number-content > span {
    display: block;
    color: rgba(255, 255, 255, 0.72);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: .4px;
} 

/* =========================================================
   RED ACCENT
========================================================= */
 
.modern-number-card:after { 
    content: "";

    position: absolute;

    left: 50%;

    bottom: 0;

    width: 0;

    height: 3px;

    background: #e11e33;

    transform: translateX(-50%);

    border-radius: 5px 5px 0 0;

    transition: width .35s ease;
}


.modern-number-card:hover:after {
    width: 55px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .numbers-bg-img {
        padding: 75px 0;
    }

    .numbers-heading h2 {
        font-size: 27px;
    }

    .modern-number-card {
        min-height: 180px;

        padding: 28px 15px;
    }

    .number-content h3 {
        font-size: 34px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .numbers-bg-img {
        padding: 60px 0;
    }

    .numbers-heading {
        margin-bottom: 40px;
    }

    .numbers-heading h2 {
        font-size: 24px;

        padding: 0 15px;
    }

    .modern-number-card {
        min-height: 175px;

        margin-bottom: 20px;

        padding: 25px 10px;
    }

    .number-content h3 {
        font-size: 31px;
    }

    .number-content > span {
        font-size: 11px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .numbers-heading h2 {
        font-size: 21px;
    }

    .modern-number-card {
        min-height: 165px;

        padding: 22px 8px;
    }

    .number-icon {
        width: 44px;
        height: 44px;

        margin-bottom: 14px;
    }

    .number-icon i {
        font-size: 17px;
    }

    .number-content h3 {
        font-size: 27px; 
    }

    .number-content > span { 
        font-size: 10px;
    }

}

/* =========================================================
   MODERN CONSULTANT CTA
   Bootstrap 3 Compatible
========================================================= */

.modern-consultant-section {
    position: relative;

    padding: 0 !important;

    background: #f7f9fa;

    overflow: hidden;
}

.modern-consultant-section .container-fluid { 
    padding: 0 !important;
} 

/* Background decorative circle */

.modern-consultant-section:before {
    content: "";

    position: absolute;

    width: 330px;
    height: 330px;

    left: -210px;
    top: -190px;

    border: 55px solid rgba(225, 30, 51, 0.04);

    border-radius: 50%;
}


.modern-consultant-section:after {
    content: "";

    position: absolute;

    width: 250px;
    height: 250px;

    right: -160px;
    bottom: -160px;

    border: 45px solid rgba(34, 54, 70, 0.04);

    border-radius: 50%; 
} 


/* =========================================================
   MAIN CTA BOX
========================================================= */

.consultant-box { 
    position: relative; 
    z-index: 2;  
    display: table;
    width: 100%; 
    padding: 50px 110px; 
    /* border-radius: 10px; */
    overflow: hidden; 
    box-shadow: 0 18px 45px rgba(34, 54, 70, 0.14); 
    background: #e11e33;  
    text-align: left;  
} 

/* Red accent */

.consultant-box:before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;
    bottom: 0;

    width: 5px;

    background: #e11e33;
}


/* Decorative circle inside box */

.consultant-box:after {
    content: "";

    position: absolute;

    width: 260px;
    height: 260px;

    right: -130px;
    top: -150px;

    border: 45px solid rgba(255,255,255,0.035);

    border-radius: 50%;
}


/* =========================================================
   CONTENT
========================================================= */

.consultant-content {
    display: table-cell;
    vertical-align: middle;
    width: 75%;
    padding-right: 35px;
}


.consultant-label {
    display: inline-block;
    margin-bottom: 8px;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
}


.consultant-content h2 {
    margin: 0 0 12px;

    color: #ffffff;

    font-size: 36px;

    font-weight: 700;

    line-height: 1.3;
}


.consultant-content p {
    max-width: 720px;

    margin: 0;

    color: rgba(255,255,255,0.90);

    font-size: 17px;

    line-height: 1.8;
}


/* =========================================================
   ACTION
========================================================= */

.consultant-action {
    display: table-cell;

    vertical-align: middle;

    width: 25%;

    text-align: right;
}


/* =========================================================
   CONTACT BUTTON
========================================================= */

.modern-contact-btn {
    position: relative; 
    display: inline-flex; 
    align-items: center;
    padding: 14px 20px;
    color: #ffffff;
    background: #223646;
    border: 1px solid #223646;
    border-radius: 5px;
    font-size: 14px; 
    font-weight: 700;
    letter-spacing: 1px;
    text-decoration: none;
    box-shadow: 0 8px 22px rgba(225, 30, 51, 0.25);
    transition: all .3s ease;
}


.modern-contact-btn i {
    margin-left: 15px;

    font-size: 12px;

    transition: transform .3s ease;
}


.modern-contact-btn:hover {
    color: #e11e33;

    background: #ffffff;

    border-color: #ffffff;

    text-decoration: none;

    transform: translateY(-2px);

    box-shadow: 0 12px 28px rgba(0,0,0,0.15);
}


.modern-contact-btn:hover i {
    transform: translateX(4px);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .modern-consultant-section {
        padding: 0 !important; 
    }

    .consultant-box {
        padding: 38px 35px;
    }

    .consultant-content {
        width: 70%;
    }

    .consultant-action {
        width: 30%;
    }

    .consultant-content h2 {
        font-size: 27px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .modern-consultant-section {
        padding:  0 !important;
    }

    .consultant-box {
        display: block;

        padding: 35px 25px;
    }

    .consultant-content,
    .consultant-action {
        display: block;

        width: 100%;
    }

    .consultant-content {
        padding-right: 0;
    }

    .consultant-content h2 {
        font-size: 25px;
    }

    .consultant-content p {
        font-size: 12px;

        line-height: 1.8;
    }

    .consultant-action {
        margin-top: 25px;

        text-align: left;
    }

}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .modern-consultant-section {
        padding: 45px 0;
    }

    .consultant-box {
        padding: 30px 20px;
    }

    .consultant-content h2 {
        font-size: 23px;
    }

    .modern-contact-btn { 
        padding: 12px 16px;  
    }
}

  :root{
    --red: #e11e33;
    --red-dark: #b8152a;
    --red-tint: #fdecee;
    --ink: #12172b;
    --slate: #5c6675;
    --slate-light: #8a93a3;
    --line: #eceef2;
    --paper: #ffffff;
    --canvas: #fbfbfc;
  }

  .company-overview-page{
    padding: 60px 0;
    background:
      radial-gradient(ellipse 60% 50% at 8% 8%, rgba(225,30,51,0.05), transparent 60%),
      var(--canvas);
    overflow:hidden;
  }

  .overview-grid{
    display:grid;
    grid-template-columns: 1.02fr 0.98fr;
    gap: 72px;
    align-items:center;
  }

  /* ---------- LEFT: copy ---------- */

  h2.headline { 
    font-weight:800; 
    font-size: 45px;
    line-height:1.06; 
    color:var(--ink);
    margin: 0 0 26px 0;
  }
  h2.headline .accent{ color:var(--red); }

  .lede{
    font-size: 16px; 
    line-height:1.75;
    color:var(--slate);
    max-width: 54ch;
    margin: 0 0 18px 0;
  }

  .feature-row{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:18px;
    margin-top: 40px;
  }

  .feature-card{
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:14px;
    padding:24px 20px;
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
  }
  .feature-card:hover{
    border-color: rgba(225,30,51,0.35);
    transform: translateY(-3px);
    box-shadow: 0 16px 32px -20px rgba(18,23,43,0.25);
  }

  .feature-card .icon{
    width:42px;height:42px;
    border-radius:10px;
    background:var(--red-tint);
    display:flex;align-items:center;justify-content:center;
    margin-bottom:16px;
  }
  .feature-card .icon svg{ width:20px; height:20px; }

  .feature-card h3{
    font-size:16px;
    font-weight:700;
    color:var(--ink);
    margin:0 0 6px 0;
  }
  .feature-card p{
    font-size:13.5px;
    line-height:1.55;
    color:var(--slate);
    margin:0;
  }

  /* ---------- RIGHT: visual ---------- */

  .visual-wrap{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    min-height: 560px;
  }

  .visual-backdrop{
    position:absolute;
    width: 250px;
    height: 250px;
    background: var(--red);
    right: 6%;
    top: 4%;
    clip-path: polygon(30% 0, 100% 0, 100% 55%, 45% 100%, 0 62%);
    opacity:0.92;
  }
  .visual-backdrop.lower{
    right:auto;
    left: 4%;
    top:auto;
    bottom: 6%;
    width:170px; height:170px;
    opacity:0.85;
  }

  .visual-panel{
    position:relative;
    width: 92%;
    max-width: 480px;
    aspect-ratio: 1 / 1.05;
    clip-path: polygon(24% 0%, 100% 12%, 100% 68%, 58% 100%, 0% 84%, 0% 20%);
    background: var(--paper);
    box-shadow: 0 40px 80px -30px rgba(18,23,43,0.4);
  } 
 
  .visual-panel .photo-inset { 
    position:absolute;
    top:9px;
    /*left:9px; */
    /*right:9px;*/
    bottom:9px;
    /*clip-path: polygon(24% 0%, 100% 12%, 100% 68%, 58% 100%, 0% 84%, 0% 20%);*/
    overflow:hidden;
    background: linear-gradient(155deg, #1a2138 0%, #12172b 60%, #23293f 100%);
  } 

  .visual-panel .photo-inset img { 
    width:100%; 
    height:100%;
    object-fit: cover;
    object-position: center;
    display:block;
    color: transparent; /* hide alt text if the image path 404s */
  }

  .badge{
    position:absolute;
    display:flex;
    align-items:center;
    gap:12px;
    background:var(--paper);
    border-radius:12px;
    padding: 12px 18px 12px 12px;
    box-shadow: 0 20px 40px -18px rgba(18,23,43,0.28);
    z-index:2;
  }
  .badge .badge-icon{
    width:38px;height:38px;border-radius:9px;
    background:var(--red);
    display:flex;align-items:center;justify-content:center;
    flex:none;
  }
  .badge .badge-icon svg{width:18px;height:18px;stroke:#fff;}
  .badge-text{
   
    font-weight:700;
    font-size:13.5px;
    color:var(--ink);
    line-height:1.3;
  }

  .badge.top-left{ top: 4%; left: -2%; }
  .badge.bottom-right{ bottom: 8%; right: -4%; }


  @media (max-width: 940px){
    .overview-grid{ grid-template-columns: 1fr; gap:56px; }
    .feature-row{ grid-template-columns: 1fr; }
    .visual-wrap{ min-height: 420px; order:-1; }
    .company-overview-page{ padding: 56px 6vw; }
  }
  
   .gray-area{
    background: #fff;
    padding: 60px 0;
  }

  /* Bootstrap 3's .row already handles the negative-margin grid;
     we just vertically center the two columns for this layout. */
     
  .gray-area .row{
    display:flex; 
    flex-wrap:wrap; 
    align-items:center;
  }


  /* ---------- LEFT: image card ---------- */

  .graphs{
    background: var(--paper); 
    border-radius: 20px;  
    /*padding: 28px;*/ 
    box-shadow: 0 30px 60px -34px rgba(18,23,43,0.18);
  }
  .graphs img{
    width:100%;
    height:auto;
    display:block;
    border-radius: 10px;
    object-fit:cover;
  }

  

  .graphs-content h2{
    font-weight:800; 
    font-size:45px; 
    line-height:1.08; 
    color:var(--ink);
    margin: 0 0 18px 0; 
  }
  .graphs-content h2 .accent{ color:var(--red); }

  .heading-rule{
    width:64px;
    height:3px;
    background:var(--red);
    border-radius:2px;
    margin: 0 0 28px 0;
  }

  .graphs-content .lede{
    font-weight:700;
    font-size:19px;
    line-height:1.5;
    color:var(--ink);
    margin: 0 0 22px 0;
  }

  .graphs-content p.body-text{
    font-size:16px;
    line-height:1.8;
    color:var(--slate);
    margin: 0 0 18px 0;
    max-width: 52ch;
  }

  .quote-box{
    display:flex;
    align-items:flex-start;
    gap:16px;
    background: var(--red-tint);
    border-radius: 10px;
    padding: 20px 24px;
    margin-top: 28px;
  }
  .quote-box .bar{
    width:4px;
    align-self:stretch;
    background: var(--red);
    border-radius:2px;
    flex:none;
  }
  .quote-box p{
    margin:0;
    font-weight:700;
    font-size:16.5px;
    line-height:1.55;
    color:var(--ink); 
  }

  @media (max-width: 767px){
    .graphs{ margin-bottom: 32px; }
    .gray-area{ padding: 64px 0; }
  }
  
  .clssection{
      background: var(--canvas);
  } 

  /* ---------- Heading ---------- */

  .inner-head-2{
    text-align:center;
    max-width: 720px;
    margin: 0 auto 30px auto; 
  }

  .inner-head-2 h2{
    font-weight:800; 
    font-size: 45px; 
    line-height:1.15;
    color:var(--ink);
    margin: 0;
  }
  
  .inner-head-2 h2 .accent{ color:var(--red); }

  h3.text-center{
    font-weight:400;
    font-size:17px;
    line-height:1.7;
    color:var(--slate);
    max-width: 680px;
    margin: 0 auto 25px auto;
  }

  /* ---------- Values grid ---------- */

  ul.driveaList{
    list-style:none;
    margin: 0 0 0 0; 
    padding:0;
    display:flex; 
    flex-wrap:wrap;
    justify-content:center;
    /*gap: 24px;*/
  }

  ul.driveaList li{
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 32px 26px;
    flex: 1 1 280px;
    max-width: 340px;
    text-align:left;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  }

  ul.driveaList li:hover{
    transform: translateY(-4px);
    box-shadow: 0 24px 44px -26px rgba(18,23,43,0.28);
    border-color: rgba(225,30,51,0.3);
  }

  ul.driveaList li img{
    width: 100px;
    height: 100px;
    object-fit:contain;
    padding:12px;
    background: var(--red-tint);
    border-radius: 12px;
    margin-bottom:20px;
  }

  ul.driveaList li h3{
   
    font-weight:700; 
    font-size:20px;
    color:var(--ink);
    margin: 0 0 10px 0;
  }

  ul.driveaList li p{
    font-size:14.5px;
    line-height:1.7;
    color:var(--slate); 
    margin:0;
  }

  @media (max-width: 767px){
    .clssection{ padding:50px 0; }
    ul.driveaList{ gap:18px; }
    ul.driveaList li{ flex: 1 1 100%; max-width: 440px; }
  }
  
  /* =========================================
   MK CONSULTING - WHY WORK WITH US
========================================= */

.mk-why-work-section {
    position: relative;
    padding: 60px 0;
    background: #f8f9fb;
    overflow: hidden;
}

.mk-why-work-section::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: rgba(225, 30, 51, 0.035);
    top: -180px;
    left: -180px;
}

.mk-why-work-section::after {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: rgba(225, 30, 51, 0.025);
    bottom: -160px;
    right: -100px;
}

.mk-why-work-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    align-items: center;
    gap: 80px;
}

/* =========================================
   IMAGE
========================================= */

.mk-why-work-image {
    position: relative;
}

.mk-image-frame {
    position: relative;
    /*padding: 15px;*/
    background: #ffffff;
    border-radius: 28px;
    box-shadow: 0 20px 60px rgba(20, 30, 50, 0.10);
    overflow: visible;
}

.mk-image-frame img {
    width: 100%;
    object-fit: cover;
    border-radius: 20px;
    display: block;
}

.mk-image-badge {
    position: absolute;
    left: -35px;
    bottom: 40px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 15px 20px;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 15px 40px rgba(20, 30, 50, 0.14);
    min-width: 205px;
}

.mk-badge-icon {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(225, 30, 51, 0.10);
    color: #e11e33;
    border-radius: 12px;
    font-size: 18px;
}

.mk-image-badge strong {
    display: block;
    color: #172033;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 3px;
}

.mk-image-badge small {
    display: block;
    color: #7a8291;
    font-size: 11px;
}

/* =========================================
   CONTENT
========================================= */

.mk-why-work-content {
    padding: 10px 0;
}

.mk-section-label {
    display: inline-flex;
    align-items: center;
    gap: 12px; 
    color: #e11e33; 
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.mk-section-label span {
    width: 35px;
    height: 2px;
    background: #e11e33;
    display: inline-block;
}

.mk-why-work-content h2 {
    margin: 0 0 20px;
    color: #172033;
    font-size: 45px;
    font-weight: 700;
} 

.mk-why-work-content h2 span {
    color: #e11e33;
}

.mk-intro-text {
    max-width: 680px;
    margin: 0 0 30px;
    color: var(--slate);
    font-size: 16px;
    line-height: 1.8; 
}

/* =========================================
   BENEFITS
========================================= */

.mk-benefits-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.mk-benefit-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: #ffffff;
    border: 1px solid #edf0f4;
    border-radius: 14px;
    transition: all 0.3s ease;
}

.mk-benefit-item:hover {
    border-color: rgba(225, 30, 51, 0.25);
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(20, 30, 50, 0.08);
}

.mk-benefit-icon {
    flex: 0 0 43px;
    width: 43px;
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: rgba(225, 30, 51, 0.08);
    color: #e11e33;
    font-size: 17px;
    transition: all 0.3s ease;
}

.mk-benefit-item:hover .mk-benefit-icon {
    background: #e11e33;
    color: #ffffff;
}

.mk-benefit-content h4 {
    margin: 0 0 4px; 
    color: #172033; 
    font-size: 15px;  
    font-weight: 700;  
}

.mk-benefit-content p {
    margin: 0;
    color: #7a8291;
    font-size: 13px;
    line-height: 1.5;
}  

/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 991px) { 
 
    .mk-why-work-section {
        padding: 50px 0;
    }

    .mk-why-work-grid {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .mk-why-work-image {
        max-width: 650px;
        margin: 0 auto;
        width: 100%;
    }

    .mk-why-work-content h2 {
        font-size: 36px;
    }
}

@media (max-width: 767px) {

    .mk-why-work-section {
        padding: 40px 0;
    }
  

    .mk-image-badge {
        left: 15px;
        bottom: 25px;
    }

    .mk-why-work-content h2 {
        font-size: 31px;
    }

    .mk-benefits-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {

    .mk-image-shape {
        width: 60px;
        height: 60px;
        right: -12px;
        top: -12px;
    }

    .mk-image-badge {
        left: 10px;
        bottom: 18px;
        min-width: auto;
        padding: 12px 15px;
    }

    .mk-badge-icon {
        width: 38px;
        height: 38px;
    }

    .mk-why-work-content h2 {
        font-size: 28px;
    }

    .mk-intro-text {
        font-size: 14px;
    }
}

/* ==========================================
   MODAL
========================================== */

.mk-career-modal{
    padding-right: 0 !important;
}

.mk-career-modal .modal-dialog{
    width: 720px;
    max-width: calc(100% - 30px);
    margin: 45px auto;
}

.mk-modal-content{
    position: relative;
    overflow: hidden;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 22px;
    box-shadow: 0 30px 80px rgba(18, 23, 43, .20);
}


/* ==========================================
   HEADER
========================================== */

.mk-modal-header{
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 32px 35px 28px;
    background: var(--canvas);
    border-bottom: 1px solid var(--line);
}

.mk-modal-heading{
    position: relative;
}

.mk-modal-label{
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 10px;
    color: var(--red);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
}

.mk-modal-label::before{
    content: "";
    width: 25px;
    height: 2px;
    background: var(--red);
}

.mk-modal-heading h3{
    margin: 0 0 7px;
    color: var(--ink);
    font-size: 27px;
    line-height: 1.2;
    font-weight: 750;
}

.mk-modal-heading p{
    margin: 0;
    color: var(--slate);
    font-size: 13px;
    line-height: 1.6;
}


/* ==========================================
   CLOSE BUTTON
========================================== */

.mk-modal-close{
    width: 38px;
    height: 38px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--paper);
    color: var(--slate);
    font-size: 25px;
    font-weight: 300;
    line-height: 1;
    transition: all .3s ease;
}

.mk-modal-close:hover{
    background: var(--red);
    border-color: var(--red);
    color: var(--paper);
    transform: rotate(90deg);
}


/* ==========================================
   BODY
========================================== */

.mk-modal-body{
    padding: 30px 35px 35px;
}


/* ==========================================
   FORM GRID
========================================== */

.mk-form-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.mk-form-group{
    margin-bottom: 20px;
}

.mk-form-group label{
    display: block;
    margin: 0 0 8px;
    color: var(--ink);
    font-size: 12px;
    font-weight: 700;
}


/* ==========================================
   INPUT
========================================== */

.mk-input-wrap{
    position: relative;
}

.mk-input-wrap > i{
    position: absolute;
    left: 15px;
    top: 50%;
    z-index: 2;
    color: var(--slate-light);
    font-size: 14px;
    transform: translateY(-50%);
    transition: color .3s ease;
}

.mk-form-control{
    width: 100%;
    height: 48px;
    padding: 0 15px 0 43px;
    border: 1px solid var(--line);
    border-radius: 9px;
    outline: none;
    background: var(--canvas);
    color: var(--ink);
    font-size: 13px;
    box-shadow: none;
    transition: all .3s ease;
}

.mk-form-control::placeholder{
    color: var(--slate-light);
}

.mk-form-control:focus{
    border-color: var(--red);
    background: var(--paper);
    box-shadow: 0 0 0 3px rgba(225, 30, 51, .08);
}

.mk-input-wrap:focus-within > i{
    color: var(--red);
}


/* ==========================================
   RESUME
========================================== */

.mk-resume-group{
    margin-top: 2px;
}

.mk-upload-box{
    position: relative;
    display: flex !important;
    align-items: center;
    gap: 15px;
    width: 100%;
    min-height: 82px;
    padding: 15px 18px;
    margin: 0 !important;
    border: 1px dashed #d8dce4;
    border-radius: 11px;
    background: var(--canvas);
    cursor: pointer;
    transition: all .3s ease;
}

.mk-upload-box:hover{
    border-color: var(--red);
    background: var(--red-tint);
}

.mk-upload-box input[type="file"]{
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.mk-upload-icon{
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: var(--red-tint);
    color: var(--red);
    font-size: 18px;
}

.mk-upload-content{
    flex: 1;
}

.mk-upload-content strong{
    display: block;
    margin-bottom: 4px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 750;
}

.mk-upload-content span{
    display: block;
    color: var(--slate-light);
    font-size: 11px;
    font-weight: 400;
}

.mk-upload-arrow{
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--paper);
    color: var(--slate);
    font-size: 12px;
    transition: all .3s ease;
}

.mk-upload-box:hover .mk-upload-arrow{
    background: var(--red);
    border-color: var(--red);
    color: var(--paper);
}


/* ==========================================
   CAPTCHA
========================================== */

.mk-captcha-area{
    min-height: 20px;
    margin-top: 5px;
}


/* ==========================================
   FOOTER
========================================== */

.mk-modal-footer{
    display: flex;
    justify-content: flex-end;
    padding-top: 10px;
    margin-top: 5px;
    border-top: 1px solid var(--line);
}

.mk-submit-btn{
    display: inline-flex;
    align-items: center;
    gap: 17px;
    min-height: 46px;
    padding: 0 18px 0 22px;
    border: 0;
    border-radius: 7px;
    background: var(--red);
    color: var(--paper);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    cursor: pointer;
    outline: none;
    transition: all .3s ease;
}

.mk-submit-btn i{
    font-size: 14px;
    transition: transform .3s ease;
}

.mk-submit-btn:hover{
    background: var(--red-dark);
    box-shadow: 0 10px 25px rgba(225, 30, 51, .22);
}

.mk-submit-btn:hover i{
    transform: translateX(5px);
}

.mk-submit-btn:focus{
    outline: none;
}


/* ==========================================
   MOBILE
========================================== */

@media(max-width: 767px){

    .mk-career-modal .modal-dialog{
        width: auto;
        max-width: calc(100% - 20px);
        margin: 25px auto;
    }

    .mk-modal-header{
        padding: 25px 22px 22px;
    }

    .mk-modal-body{
        padding: 25px 22px 28px;
    }

    .mk-form-grid{
        grid-template-columns: 1fr;
        gap: 0;
    }

    .mk-modal-heading h3{
        font-size: 24px;
    }

    .mk-modal-heading p{
        padding-right: 15px;
    }

    .mk-submit-btn{
        width: 100%;
        justify-content: center;
    }

}


/* ==========================================
   SMALL MOBILE
========================================== */

@media(max-width: 480px){

    .mk-career-modal .modal-dialog{
        max-width: calc(100% - 12px);
        margin: 15px auto;
    } 

    .mk-modal-header{
        padding: 22px 18px;
    } 

    .mk-modal-body{
        padding: 22px 18px 25px;
    } 
 
    .mk-modal-close{
        width: 34px;
        height: 34px;
        font-size: 22px;
    } 

    .mk-modal-heading h3{
        font-size: 22px;
    } 

    .mk-upload-box{
        padding: 12px;
    }

}
.mk-program-section{
    position: relative;
    padding: 60px 0;
    background: var(--paper); 
    overflow: hidden;
}


/* ==========================================
   HEADING
========================================== */

.mk-program-heading{
    max-width: 780px;
    margin: 0 auto 55px;
    text-align: center;
}

.mk-section-label{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 17px;
    color: var(--red);
    font-size: 12px; 
    font-weight: 800;
    letter-spacing: 2.5px;
    text-transform: uppercase;
} 
 
.mk-section-label > span { 
    width: 28px; 
    height: 2px; 
    display: inline-block;
    background: var(--red);
} 

.mk-program-heading h2{
    margin: 0 0 15px;
    color: var(--ink);
    font-size: 45px; 
    font-weight: 750;
}

.mk-program-heading h2 span{
    color: var(--red);
}

.mk-program-heading p{
    max-width: 600px;
    margin: auto;
    color: var(--slate);
    font-size: 16px; 
    line-height: 1.8;
}


/* ==========================================
   CARD GRID
========================================== */

.mk-program-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}


/* ==========================================
   CARD
========================================== */

.mk-program-card{
    position: relative;
    min-height: 365px;
    display: flex;
    flex-direction: column;
    padding: 27px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 12px 35px rgba(18, 23, 43, .045);
    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}

.mk-program-card::before{
    content: "";
    position: absolute;
    width: 90px;
    height: 90px;
    right: -40px;
    top: -40px;
    border-radius: 50%;
    background: var(--red-tint);
    transition: transform .4s ease;
}

.mk-program-card:hover{
    transform: translateY(-8px);
    border-color: rgba(225, 30, 51, .25);
    box-shadow: 0 22px 50px rgba(18, 23, 43, .10);
}

.mk-program-card:hover::before{
    transform: scale(2.5);
}


/* ==========================================
   CARD TOP
========================================== */

.mk-program-card-top{
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 28px;
}

.mk-program-number{
    color: var(--slate-light);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
}


/* ==========================================
   ICON
========================================== */

.mk-program-icon{
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: var(--red-tint);
    transition: all .35s ease;
}

.mk-program-icon img{
    width: 70px;
    height: 70px;
    object-fit: contain;
}

.mk-program-card:hover .mk-program-icon{
    background: var(--red);
    transform: translateY(-3px);
}

.mk-program-card:hover .mk-program-icon img{
    filter: brightness(0) invert(1);
}


/* ==========================================
   CONTENT
========================================== */

.mk-program-content{
    position: relative;
    z-index: 2;
    flex: 1;
}

.mk-program-type{
    display: block;
    margin-bottom: 9px;
    color: var(--red);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.8px;
}

.mk-program-content h3{
    margin: 0 0 13px;
    color: var(--ink);
    font-size: 21px;
    line-height: 1.3;
    font-weight: 750;
}

.mk-program-content p{
    margin: 0;
    color: var(--slate);
    font-size: 16px; 
    line-height: 1.75;
}


/* ==========================================
   CARD ARROW
========================================== */

.mk-program-arrow{
    position: relative;
    z-index: 2;
    width: 38px;
    height: 38px;
    margin-top: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--slate);
    font-size: 13px;
    transition: all .3s ease;
}

.mk-program-card:hover .mk-program-arrow{
    background: var(--red);
    border-color: var(--red);
    color: var(--paper);
}

.mk-program-card:hover .mk-program-arrow i{
    transform: translateX(3px);
}

.mk-program-arrow i{
    transition: transform .3s ease;
}


/* ==========================================
   TABLET
========================================== */

@media(max-width: 991px){

    .mk-program-section{
        padding: 75px 0;
    }

    .mk-program-grid{
        grid-template-columns: 1fr;
        max-width: 650px;
        margin: auto;
    }

    .mk-program-card{
        min-height: auto;
    }

}


/* ==========================================
   MOBILE
========================================== */

@media(max-width: 767px){

    .mk-program-section{
        padding: 65px 0;
    }

    .mk-program-heading{
        margin-bottom: 38px;
    }

    .mk-program-heading h2{
        font-size: 31px;
    }

    .mk-program-heading p{
        font-size: 13px;
    }

    .mk-program-card{
        padding: 22px;
        border-radius: 15px;
    }

    .mk-program-icon{
        width: 60px;
        height: 60px;
    }

    .mk-program-icon img{
        width: 37px;
        height: 37px;
    }

}


/* ==========================================
   SMALL MOBILE
========================================== */

@media(max-width: 480px){

    .mk-program-heading h2{
        font-size: 27px;
    }

    .mk-program-content h3{
        font-size: 19px;
    }

    .mk-program-content p{
        font-size: 14px;
    }

    .mk-program-btn{
        width: 100%;
        justify-content: center;
    }

} 


    .language-value-section { 
        position: relative;
        padding: 60px 0; 
        background: var(--canvas); 
        overflow: hidden; 
    } 

    .language-value-section::before {
        content: "";
        position: absolute;
        width: 380px;
        height: 380px;
        border-radius: 50%;
        background: var(--red-tint);
        top: -190px;
        right: -120px;
        opacity: .55;
    }

    .language-value-section .container {
        position: relative;
        z-index: 2;
    }

    .language-value-grid {
        display: grid;
        grid-template-columns: 1.05fr .95fr;
        align-items: center;
        gap: 80px;
    }

    /* CONTENT */

    .language-value-content {
        max-width: 650px;
    }

    .section-eyebrow {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 20px;
        color: var(--red);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 2px;
    }

    .eyebrow-line {
        width: 38px;
        height: 2px;
        background: var(--red);
        display: inline-block;
    }

    .language-value-content h2 {
        margin: 0 0 25px;
        color: var(--ink);
        font-size: 45px;
        font-weight: 700;
    }

    .language-value-content h2 span {
        color: var(--red);
    }

    .language-value-description {
        margin: 0;
        color: var(--slate);
        font-size: 16px;
        line-height: 1.85;
        max-width: 620px;
    }

    /* HIGHLIGHT */

    .language-value-highlight {
        display: flex;
        align-items: center;
        gap: 17px;
        margin-top: 32px;
        padding: 18px 20px;
        background: var(--paper);
        border: 1px solid var(--line);
        border-left: 3px solid var(--red);
        max-width: 560px;
        box-shadow: 0 12px 35px rgba(18, 23, 43, .05);
    }

    .highlight-icon {
        width: 42px;
        height: 42px;
        flex: 0 0 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--red-tint);
        color: var(--red);
        border-radius: 50%;
        font-size: 15px;
    }

    .language-value-highlight strong {
        display: block;
        margin-bottom: 4px;
        color: var(--ink);
        font-size: 15px;
        font-weight: 700;
    }

    .language-value-highlight span {
        display: block;
        color: var(--slate); 
        font-size: 14px;
        line-height: 1.5;
    }

    /* IMAGE AREA */

    .language-value-visual {
        position: relative;
        padding: 35px 25px 25px 35px;
    }

    .visual-number {
        position: absolute;
        top: -5px;
        left: 0;
        z-index: 3;
        color: var(--red);
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 2px;
    }

    .language-image-card {
        position: relative;
        min-height: 440px;
        background: var(--paper);
        border: 1px solid var(--line);
        overflow: hidden;
        box-shadow: 0 25px 60px rgba(18, 23, 43, .09);
    }

    .image-accent {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 5px;
        background: var(--red);
        z-index: 2;
    }

    .language-image-card img {
        width: 100%;
        /*height: 440px;*/
        display: block;
        object-fit: cover;
        transition: transform .5s ease;
    }

    .language-image-card:hover img {
        transform: scale(1.03);
    }

    .image-caption {
        position: absolute;
        left: 22px;
        right: 22px;
        bottom: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 18px;
        background: rgba(255, 255, 255, .95);
        border: 1px solid rgba(236, 238, 242, .9);
        backdrop-filter: blur(8px);
    }

    .image-caption span {
        color: var(--red);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 1.8px;
    }

    .image-caption strong {
        color: var(--ink);
        font-size: 14px;
        font-weight: 700;
    }

    /* RESPONSIVE */

    @media (max-width: 991px) {

        .language-value-section {
            padding: 40px 0;
        }

        .language-value-grid {
            grid-template-columns: 1fr;
            gap: 55px;
        }

        .language-value-content {
            max-width: 100%;
        }

        .language-value-visual {
            max-width: 700px;
            width: 100%;
            margin: 0 auto;
        }
    }

    @media (max-width: 575px) {

        .language-value-section {
            padding: 40px 0;
        }

        .language-value-content h2 {
            font-size: 38px;
            letter-spacing: -1px;
        }

        .language-value-description {
            font-size: 15px;
            line-height: 1.75;
        }

        .language-value-highlight {
            align-items: flex-start;
        }

        .language-value-visual {
            padding: 25px 10px 15px 20px;
        }

        .language-image-card {
            min-height: 320px;
        }

        .language-image-card img {
            height: 320px;
        }

        .image-caption {
            left: 12px;
            right: 12px;
            bottom: 12px;
        }

        .image-caption strong { 
            font-size: 12px;
        }
    }
    
    .approach-section {
        position: relative;
        padding: 60px 0;
        background: var(--paper);
        overflow: hidden;
    } 
  
/* =========================================
   HEADER
========================================= */

.approach-header {
    display: grid; 
    grid-template-columns: 1.1fr .9fr;
    gap: 80px;
    align-items: end;
    margin-bottom: 65px;
}

.approach-heading-wrap h2 {
    max-width: 700px;
    margin: 0;
    color: var(--ink);
    font-size: 45px; 
    font-weight: 700;
}

.approach-heading-wrap h2 strong {
    color: var(--red);
    font-weight: 700;
}

.approach-intro {
    padding-bottom: 5px;
}

.approach-intro p {
    max-width: 510px;
    margin: 0;
    color: var(--slate);
    font-size: 16px;
    line-height: 1.85;
}


/* =========================================
   APPROACH LIST
========================================= */

.approach-list {
    border-top: 1px solid var(--line);
}

.approach-item {
    position: relative;
    display: grid;
    grid-template-columns: 130px 1fr 50px;
    gap: 30px;
    align-items: center;
    padding: 38px 25px;
    border-bottom: 1px solid var(--line);
    transition: all .35s ease;
}

.approach-item:hover {
    background: var(--canvas);
    padding-left: 35px;
    padding-right: 35px;
}


/* NUMBER */


/* ICON */

.approach-icon {
    width: 130px;
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--red-tint);
    border-radius: 50%;
    transition: all .35s ease;
}

.approach-icon img {
    width: 100px;
    height: 70px; 
    object-fit: contain;
}

.approach-item:hover .approach-icon {
    background: var(--red);
}

.approach-item:hover .approach-icon img {
    filter: brightness(0) invert(1);
}


/* CONTENT */

.approach-content {
    max-width: 850px;
}

.approach-small-title {
    display: block;
    margin-bottom: 8px;
    color: var(--red);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.7px;
}

.approach-content h3 {
    margin: 0 0 12px;
    color: var(--ink);
    font-size: 25px;
    line-height: 1.3;
    font-weight: 700;
}

.approach-content p {
    max-width: 850px;
    margin: 0;
    color: var(--slate);
    font-size: 16px; 
    line-height: 1.8; 
} 


/* ARROW */

.approach-arrow {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--slate-light);
    transition: all .3s ease;
}

.approach-item:hover .approach-arrow {
    background: var(--red);
    border-color: var(--red);
    color: #fff;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991px) {

    .approach-section {
        padding: 50px 0;
    }

    .approach-header {
        grid-template-columns: 1fr;
        gap: 25px;
        margin-bottom: 45px;
    }

    .approach-intro p {
        max-width: 700px;
    }

    .approach-item {
        grid-template-columns: 55px 130px 1fr 45px;
        gap: 20px;
        padding: 30px 15px;
    }

    .approach-item:hover {
        padding-left: 20px;
        padding-right: 20px;
    }

    .approach-icon {
        width: 62px;
        height: 62px;
    }

    .approach-icon img {
        width: 36px;
        height: 36px;
    }

    .approach-content h3 {
        font-size: 20px;
    }

    .approach-content p {
        font-size: 13px;
    }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .approach-section {
        padding: 45px 0;
    }

    .approach-heading-wrap h2 {
        font-size: 38px;
        letter-spacing: -1px;
    }

    .approach-list {
        border-top: 0;
    }

    .approach-item {
        display: block;
        padding: 30px 0;
    }

    .approach-item:hover {
        padding-left: 0;
        padding-right: 0;
    }

    .approach-number {
        margin-bottom: 18px;
    }

    .approach-icon {
        margin-bottom: 20px;
    }

    .approach-content h3 {
        font-size: 20px;
    }

    .approach-content p {
        font-size: 14px;
        line-height: 1.75;
    }

    .approach-arrow {
        display: none;
    }

 } 
 
 
/* =========================================
   SECTION
========================================= */

.what-we-do-section {
    position: relative;
    padding: 60px 0;
    background: var(--canvas);
    overflow: hidden;
}

.what-we-do-section::after {
    content: "";
    position: absolute;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: var(--red-tint);
    right: -180px;
    bottom: -180px;
    opacity: .6;
}

/* =========================================
   GRID
========================================= */

.what-we-do-grid {
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    gap: 90px;
    align-items: center;
}


/* =========================================
   IMAGE SIDE
========================================= */

.what-we-do-visual {
    position: relative;
    padding: 25px 25px 25px 0;
}

.visual-label {
    position: absolute;
    top: 0;
    left: -12px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--ink);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
}

.visual-label span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: var(--red);
    color: #fff;
    font-size: 11px;
    letter-spacing: 0;
}


.image-wrapper {
    position: relative;
    z-index: 2;
    overflow: hidden;
    background: var(--paper);
    border: 1px solid var(--line);
    box-shadow: 0 25px 60px rgba(18, 23, 43, .10);
}

.image-red-block {
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    background: var(--red);
    z-index: 3;
}

.image-wrapper img {
    display: block;
    width: 100%;
    /*height: 510px;*/ 
    object-fit: cover;
    transition: transform .6s ease;
}

.image-wrapper:hover img {
    transform: scale(1.035);
}


/* IMAGE INFO */

.image-bottom-info {
    position: absolute;
    left: 25px;
    right: 25px;
    bottom: 22px;
    z-index: 4;
    padding: 17px 20px;
    background: rgba(255, 255, 255, .96);
    border-left: 3px solid var(--red);
    box-shadow: 0 10px 30px rgba(18, 23, 43, .08);
}

.image-bottom-info span {
    display: block;
    margin-bottom: 5px;
    color: var(--red);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.7px;
}

.image-bottom-info strong {
    display: block;
    color: var(--ink);
    font-size: 16px;
    font-weight: 700;
}


/* OUTLINE */

.visual-outline {
    position: absolute;
    width: 170px;
    height: 170px;
    right: -10px;
    bottom: 0;
    border: 1px solid var(--red);
    opacity: .35;
    z-index: 1;
}


/* =========================================
   CONTENT
========================================= */

.what-we-do-content {
    max-width: 650px;
}

.what-we-do-content h2 {
    margin: 0 0 20px; 
    color: var(--ink);
    font-size: 45px; 
    font-weight: 700;
}

.what-we-do-content h2 em {
    color: var(--red);
    font-style: normal;
}

.what-we-do-content p {
    margin: 0 0 18px;
    color: var(--slate);
    font-size: 16px; 
    line-height: 1.85;
}


/* =========================================
   NOTE BOX
========================================= */

.expertise-note {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 28px;
    padding: 18px 20px;
    background: var(--paper);
    border: 1px solid var(--line);
    box-shadow: 0 12px 35px rgba(18, 23, 43, .05);
}

.note-icon {
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--red-tint);
    color: var(--red);
    font-size: 14px;
}

.note-content strong {
    display: block;
    margin-bottom: 4px;
    color: var(--ink);
    font-size: 16px;
    font-weight: 700;
}

.note-content span {
    display: block;
    color: var(--slate); 
    font-size: 15px;
    line-height: 1.5;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991px) {

    .what-we-do-section {
        padding: 40px 0;
    }

    .what-we-do-grid {
        grid-template-columns: 1fr;
        gap: 65px;
    }

    .what-we-do-visual {
        max-width: 700px;
        width: 100%;
        margin: 0 auto;
    }

    .what-we-do-content {
        max-width: 100%;
    }

    .image-wrapper img {
        height: 450px;
    }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 575px) {

    .what-we-do-section {
        padding: 40px 0;
    }

    .what-we-do-grid {
        gap: 45px;
    }

    .what-we-do-visual {
        padding: 20px 12px 20px 0;
    }

    .visual-label {
        left: 0;
        font-size: 9px;
        letter-spacing: 1.5px;
    }

    .visual-label span {
        width: 34px;
        height: 34px;
    }

    .image-wrapper img {
        height: 320px;
    }

    .image-bottom-info {
        left: 12px;
        right: 12px;
        bottom: 12px;
        padding: 13px 15px;
    }

    .what-we-do-content h2 {
        font-size: 46px;
        letter-spacing: -1.5px;
    }

    .what-we-do-content p {
        font-size: 14px;
        line-height: 1.75;
    }

    .expertise-note {
        align-items: flex-start;
    }

    .visual-outline {
        width: 100px;
        height: 100px;
        right: 0;
    }
}

/* ==========================================
   MAIN SECTION
========================================== */

.thesis-editing-hero {
    position: relative;
    min-height: 720px;
    padding: 60px 0 !important;
    background: var(--paper);
    overflow: hidden;
}

.thesis-editing-hero .container {
    position: relative;
    z-index: 5;
}


/* ==========================================
   BACKGROUND SHAPES
========================================== */

.thesis-bg-shape {
    position: absolute;
    pointer-events: none;
}

.shape-one {
    width: 520px;
    height: 700px;
    right: 5%;
    top: -130px;
    background: linear-gradient(
        125deg,
        transparent 0%,
        var(--canvas) 48%,
        #f6f7fa 100%
    );
    transform: skewX(-12deg);
}

.shape-two {
    width: 330px;
    height: 330px;
    right: -100px;
    top: 110px;
    border-radius: 50%;
    background: var(--red-tint);
    opacity: .75;
}


/* ==========================================
   GRID
========================================== */

.thesis-editing-grid {
    display: grid;
    grid-template-columns: 48% 52%;
    align-items: center;
    min-height: 540px;
}


/* ==========================================
   LEFT CONTENT
========================================== */

.thesis-editing-content {
    position: relative;
    z-index: 10;
    max-width: 650px;
}

.thesis-editing-content h2 {
    margin: 0 0 20px; 
    color: var(--ink);
    font-size: 45px;
    font-weight: 700;
}

.thesis-editing-content h2 strong {
    color: var(--red);
    font-weight: 700;
}

.thesis-main-text {
    max-width: 600px;
    margin: 0 0 25px;
    color: var(--slate);
    font-size: 16px;
    line-height: 1.85;
}


/* ==========================================
   DESCRIPTION
========================================== */

.thesis-description {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    max-width: 620px;
}

.description-check {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 4px;
    border-radius: 50%;
    background: var(--red);
    color: #fff;
    font-size: 13px;
}
 
.thesis-description p { 
    margin: 0; 
    color: var(--slate);
    font-size: 16px; 
    line-height: 1.8; 
}


/* ==========================================
   FEATURES
========================================== */

.thesis-features {
    display: flex;
    align-items: stretch;
    margin-top: 38px;
    max-width: 600px;
}

.thesis-feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 25%;
    padding: 0 18px;
    border-right: 1px solid var(--line);
    text-align: center;
}

.thesis-feature:first-child {
    padding-left: 0;
}

.thesis-feature:last-child {
    border-right: 0;
} 


.feature-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    color: #fff; 
    font-size: 21px;
} 

.thesis-feature span {
    color: var(--ink);
    font-size: 14px; 
    line-height: 1.4;
    font-weight: 600;
} 

 
/* ==========================================
   RIGHT VISUAL
========================================== */

.thesis-editing-visual {
    position: relative;
    height: 570px;
    margin-left: 30px;
}


/* ==========================================
   DOT PATTERN
========================================== */

.visual-dots {
    position: absolute;
    width: 85px;
    height: 85px;
    background-image: radial-gradient(
        var(--red) 1.5px,
        transparent 1.5px
    );
    background-size: 14px 14px;
    opacity: .25;
}

.dots-top {
    top: 0;
    right: 35px;
}

.dots-bottom {
    bottom: 5px;
    left: 45px;
}


/* ==========================================
   THESIS BOOKS
========================================== */

.thesis-books {
    position: absolute;
    top: 50px;
    right: 70px;
    width: 390px;
    height: 210px;
    transform: rotate(-4deg);
}


.thesis-book {
    position: absolute;
    right: 0;
    width: 350px;
    height: 58px;
    border-radius: 2px 7px 7px 2px;
    box-shadow: 8px 12px 20px rgba(18, 23, 43, .15);
}

.thesis-book-red {
    top: 0;
    height: 105px;
    background: linear-gradient(
        145deg,
        var(--red),
        #c8172d
    );
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: Georgia, serif;
    font-size: 24px;
    letter-spacing: 2px;
    box-shadow: 10px 15px 25px rgba(18, 23, 43, .18);
}

.thesis-book-red::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 0;
    width: 3px;
    height: 100%;
    background: rgba(255,255,255,.3);
}

.thesis-book-black {
    top: 103px;
    right: 7px;
    background: #202331;
}

.thesis-book-white {
    top: 157px;
    right: 14px;
    background: #fff;
    border: 1px solid var(--line);
}


/* ==========================================
   NOTEBOOK
========================================== */

.thesis-notebook {
    position: absolute;
    left: 15px;
    top: 220px;
    width: 390px;
    height: 270px;
    padding: 40px;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: 10px 25px 40px rgba(18, 23, 43, .12);
    transform: rotate(-13deg);
    z-index: 3;
}


.notebook-heading {
    margin-bottom: 20px;
    color: var(--ink);
    font-family: Georgia, serif;
    font-size: 27px;
    text-align: center;
}


.notebook-lines {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.notebook-lines span {
    display: block;
    width: 85%;
    height: 2px;
    background: #e3e5e9;
}

.notebook-lines span:nth-child(2) {
    width: 70%;
}

.notebook-lines span:nth-child(4) {
    width: 90%;
}

.notebook-lines span:nth-child(5) {
    width: 65%;
}


/* ==========================================
   PEN
========================================== */

.notebook-pen {
    position: absolute;
    width: 13px;
    height: 210px;
    right: 70px;
    bottom: -45px;
    border-radius: 8px;
    background: linear-gradient(
        90deg,
        #171923,
        #353846,
        #11131b
    );
    transform: rotate(-32deg);
    box-shadow: 5px 10px 15px rgba(0,0,0,.18);
}

.notebook-pen::after {
    content: "";
    position: absolute;
    bottom: -13px;
    left: 2px;
    width: 9px;
    height: 18px;
    background: var(--red);
    clip-path: polygon(50% 100%, 0 0, 100% 0);
}


/* ==========================================
   PLANT
========================================== */

.thesis-plant {
    position: absolute;
    right: 15px;
    bottom: 50px;
    width: 100px;
    height: 150px;
    z-index: 5;
}

.plant-leaf {
    position: absolute;
    width: 32px;
    height: 70px;
    border-radius: 100% 0 100% 0;
    background: #536d4d;
    transform-origin: bottom center;
}

.leaf-one {
    left: 35px;
    top: 0;
    transform: rotate(0deg);
}

.leaf-two {
    left: 10px;
    top: 22px;
    transform: rotate(-38deg);
}

.leaf-three {
    right: 5px;
    top: 27px;
    transform: rotate(38deg);
}

.leaf-four {
    left: 38px;
    top: 35px;
    transform: rotate(55deg);
}

.plant-pot {
    position: absolute;
    bottom: 0;
    left: 18px;
    width: 68px;
    height: 55px;
    background: #fff;
    border-radius: 5px 5px 25px 25px;
    box-shadow: 0 8px 20px rgba(18,23,43,.15);
}


/* ==========================================
   QUOTE CARD
========================================== */

.thesis-quote-card {
    position: absolute;
    right: -5px;
    bottom: 5px;
    z-index: 10;
    width: 270px;
    min-height: 205px;
    padding: 25px 28px;
    background: rgba(255,255,255,.96);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 20px 45px rgba(18,23,43,.12);
}


.quote-mark {
    margin-bottom: 5px;
    color: var(--red);
    font-family: Georgia, serif;
    font-size: 55px;
    line-height: .6;
    font-weight: 700;
}


.thesis-quote-card p {
    margin: 20px 0 18px;
    color: var(--ink);
    font-size: 17px;
    line-height: 1.55;
    font-weight: 600;
}


.quote-line {
    width: 60px;
    height: 3px;
    background: var(--red);
}


/* ==========================================
   TABLET
========================================== */

@media (max-width: 1100px) {

    .thesis-editing-grid {
        grid-template-columns: 50% 50%;
    }

    .thesis-editing-content h2 {
        font-size: 55px;
    }

    .thesis-editing-visual {
        transform: scale(.9);
        transform-origin: center right;
    }

}


/* ==========================================
   MOBILE
========================================== */

@media (max-width: 991px) {

    .thesis-editing-hero {
        padding: 75px 0;
    }

    .thesis-editing-grid {
        grid-template-columns: 1fr;
        gap: 70px;
    }

    .thesis-editing-content {
        max-width: 750px;
    }

    .thesis-editing-visual {
        width: 100%;
        max-width: 650px;
        margin: 0 auto;
        transform: none;
    }

    .shape-one {
        right: -300px;
    }

}


@media (max-width: 600px) {

    .thesis-editing-hero {
        padding: 60px 0;
    }

    .thesis-editing-content h2 {
        font-size: 44px;
        letter-spacing: -1px;
    }

    .thesis-main-text {
        font-size: 15px;
    }

    .thesis-description p {
        font-size: 14px;
    }

    .thesis-features {
        flex-wrap: wrap;
    }

    .thesis-feature {
        width: 50%;
        margin-bottom: 25px;
    }

    .thesis-feature:nth-child(2) {
        border-right: 0;
    } 

    .thesis-editing-visual {
        height: 470px;
        transform: scale(.82);
        transform-origin: top center;
        margin-bottom: -70px;
    } 

    .thesis-books { 
        right: 10px;
    }

    .thesis-notebook {
        left: 0;
    }

    .thesis-quote-card {
        right: 0;
        bottom: 0;
    }

} 


/* ==========================================
   SECTION
========================================== */

.statistical-analysis-section {
    position: relative;
    padding: 60px 0;
    background: var(--canvas);
    overflow: hidden;
}


/* ==========================================
   MAIN GRID
========================================== */

.stat-analysis-layout {
    display: grid;
    grid-template-columns: 1fr .95fr;
    gap: 90px;
    align-items: center;
}


/* ==========================================
   CONTENT
========================================== */

.stat-analysis-content {
    max-width: 650px;
}

.stat-section-label {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    color: var(--red);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
}

.stat-section-label span {
    width: 38px;
    height: 2px;
    background: var(--red);
    display: inline-block;
}


.stat-analysis-content h2 {
    margin: 0 0 28px;
    color: var(--ink);
    font-size: 45px; 
    font-weight: 700;
}

.stat-analysis-content h2 strong {
    color: var(--red);
    font-weight: 700;
}


.stat-analysis-content p {
    margin: 0 0 18px;
    color: var(--slate);
    font-size: 16px;
    line-height: 1.85;
}

.stat-analysis-content .stat-intro {
    color: var(--ink);
    font-size: 17px;
    line-height: 1.75;
    font-weight: 500;
}


/* ==========================================
   SOFTWARE TAGS
========================================== */

.software-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 30px;
}

.software-list span {
    padding: 8px 13px;
    background: var(--paper);
    border: 1px solid var(--line);
    color: var(--ink);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    transition: all .25s ease;
}

.software-list span:hover {
    background: var(--red);
    border-color: var(--red);
    color: #fff;
}


/* ==========================================
   VISUAL
========================================== */

.stat-analysis-visual {
    position: relative;
    min-height: 570px;
    padding: 20px 0 35px 30px;
}


/* ==========================================
   IMAGE
========================================== */

.stat-image-wrap {
    position: relative;
    height: 450px;
    overflow: hidden;
    background: var(--paper);
    border: 1px solid var(--line);
    box-shadow: 0 25px 55px rgba(18, 23, 43, .12);
}

.stat-image-wrap::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
    background: var(--red);
    z-index: 4;
}

.stat-image-wrap img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .6s ease;
}

.stat-image-wrap:hover img {
    transform: scale(1.04); 
}


/* ==========================================
   VISUAL LABEL
========================================== */

.visual-top-label {
    position: absolute;
    top: 25px;
    right: 25px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 13px;
    background: rgba(255,255,255,.94);
    color: var(--ink);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.pulse-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--red);
}


/* ==========================================
   FLOATING ANALYSIS CARD
========================================== */

.analysis-card {
    position: absolute;
    left: -5px;
    bottom: 80px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 245px;
    padding: 17px 20px;
    background: var(--paper);
    border: 1px solid var(--line);
    box-shadow: 0 18px 40px rgba(18, 23, 43, .15);
}

.analysis-card-icon {
    width: 43px;
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 43px;
    background: var(--red-tint);
    color: var(--red);
    font-size: 17px;
}

.analysis-card span {
    display: block;
    margin-bottom: 4px;
    color: var(--slate-light);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.4px;
}

.analysis-card strong {
    display: block;
    color: var(--ink);
    font-size: 14px;
    font-weight: 700;
}


/* ==========================================
   METHOD CARD
========================================== */

.method-card {
    position: absolute;
    left: 0;
    right: 35px;
    bottom: 0;
    z-index: 6;
    padding: 20px 25px;
    background: var(--ink);
    box-shadow: 0 18px 40px rgba(18, 23, 43, .16);
}

.method-card-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 17px;
    color: #fff;
    font-size: 12px; 
    font-weight: 700;
    letter-spacing: 1.7px;
}

.method-card-heading span {
    color: var(--red);
    font-size: 13px;
}


.method-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.method-grid > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 0 10px;
    border-right: 1px solid rgba(255,255,255,.12);
    text-align: center;
}

.method-grid > div:last-child {
    border-right: 0;
}

.method-grid i {
    color: var(--red);
    font-size: 18px;
}

.method-grid span { 
    color: rgba(255,255,255,.78); 
    font-size: 12px;  
    font-weight: 500;
} 


/* ==========================================
   TABLET
========================================== */

@media (max-width: 991px) {

    .statistical-analysis-section {
        padding: 50px 0;
    }

    .stat-analysis-layout {
        grid-template-columns: 1fr;
        gap: 65px;
    }

    .stat-analysis-content {
        max-width: 750px;
    }

    .stat-analysis-visual {
        max-width: 700px;
        width: 100%;
        margin: 0 auto;
    }

}


/* ==========================================
   MOBILE
========================================== */ 

@media (max-width: 600px) { 

    .statistical-analysis-section {
        padding: 40px 0;
    }

    .stat-analysis-layout {
        gap: 45px;
    }

    .stat-analysis-content h2 {
        font-size: 38px;
        letter-spacing: -1px;
    }

    .stat-analysis-content p {
        font-size: 14px;
        line-height: 1.75;
    }

    .stat-analysis-content .stat-intro {
        font-size: 15px;
    }

    .software-list {
        margin-top: 25px;
    }

    .stat-analysis-visual {
        min-height: 480px;
        padding-left: 10px;
    }

    .stat-image-wrap {
        height: 370px;
    }

    .analysis-card {
        left: 0;
        bottom: 85px;
        min-width: 220px;
    }

    .method-card {
        left: 0;
        right: 10px;
        padding: 17px 12px;
    }

    .method-grid > div {
        padding: 0 5px;
    }

    .method-grid span { 
        font-size: 9px;
    } 
}

/* ========================================== 
   SECTION
========================================== */ 

.why-statistics-section {
    position: relative; 
    padding: 60px 0; 
    background: var(--canvas);  
    overflow: hidden; 
}  
 

/* ==========================================
   GRID
========================================== */

.why-statistics-grid {
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    gap: 90px;
    align-items: center;
}


/* ==========================================
   IMAGE AREA
========================================== */

.statistics-visual {
    position: relative;
    min-height: 560px;
    padding: 25px 35px 25px 0;
}


/* NUMBER */

.visual-number {
    position: absolute;
    top: 0;
    left: -18px;
    z-index: 5;

    width: 65px;
    height: 65px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--red);
    color: #fff;

    font-size: 17px;
    font-weight: 700;
    letter-spacing: 1px;

    box-shadow: 0 12px 30px rgba(225, 30, 51, .2);
}


/* IMAGE FRAME */

.visual-frame {
    position: relative;
    z-index: 3;

    height: 500px;

    overflow: hidden;

    background: var(--paper);

    border: 1px solid var(--line);

    box-shadow:
        0 25px 60px rgba(18, 23, 43, .12);
}


/* RED SIDE ACCENT */

.visual-accent {
    position: absolute;
    top: 0;
    left: 0;

    width: 6px;
    height: 100%;

    background: var(--red);

    z-index: 5;
}


/* IMAGE */

.statistics-image {
    width: 100%;
    /*height: 100%;*/
    display: block;
    object-fit: cover;

    transition: transform .6s ease;
}

.visual-frame:hover .statistics-image {
    transform: scale(1.04);
}


/* IMAGE CAPTION */

.image-caption {
    position: absolute;

    left: 25px;
    right: 25px;
    bottom: 22px;

    padding: 17px 20px;

    background: rgba(255,255,255,.96);

    border-left: 3px solid var(--red);

    box-shadow: 0 12px 30px rgba(18,23,43,.10);

    z-index: 6;
}

.image-caption span {
    display: block;

    margin-bottom: 5px;

    color: var(--red);

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.8px;
}

.image-caption strong {
    display: block;

    color: var(--ink);

    font-size: 15px;
    font-weight: 700;
}


/* OUTLINE */

.visual-outline {
    position: absolute;

    width: 180px;
    height: 180px;

    right: 0;
    bottom: 0;

    border: 1px solid var(--red);

    opacity: .3;

    z-index: 1;
}


/* ==========================================
   CONTENT
========================================== */

.statistics-content {
    max-width: 650px;
}



/* HEADING */

.statistics-content h2 {
    margin: 0 0 20px; 
    color: var(--ink);
    font-size: 45px; 
    font-weight: 700;
}

.statistics-content h2 strong {
    color: var(--red);
    font-weight: 700;
}


/* TEXT */

.statistics-content p {
    margin: 0 0 17px;
    color: var(--slate);
    font-size: 16px;
    line-height: 1.85; 
}

.statistics-content .lead-text {
    color: var(--ink);

    font-size: 16px;

    line-height: 1.8;

    font-weight: 500;
}


/* ==========================================
   HIGHLIGHTS
========================================== */

.statistics-highlights {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 30px;
}

.statistics-highlight {
    display: flex;

    align-items: flex-start;

    gap: 13px;

    padding: 17px;

    background: var(--paper);

    border: 1px solid var(--line);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.statistics-highlight:hover {
    transform: translateY(-3px);

    box-shadow: 0 12px 30px rgba(18,23,43,.07);
}


/* ICON */

.highlight-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--red-tint);

    color: var(--red);

    font-size: 16px;
}


/* HIGHLIGHT TEXT */

.statistics-highlight strong {
    display: block;
    margin-bottom: 5px;
    color: var(--ink);
    font-size: 14px; 
    font-weight: 700;
}

.statistics-highlight span {
    display: block;
    color: var(--slate);
    font-size: 12px;
    line-height: 1.55;
}


/* ==========================================
   BUTTON
========================================== */

.statistics-action {
    margin-top: 30px;
}

.statistics-btn {
    display: inline-flex;

    align-items: center;

    gap: 18px;

    padding: 15px 22px;

    background: var(--red);

    color: #fff !important;

    text-decoration: none !important;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1px;

    transition: all .3s ease;
}

.statistics-btn i {
    font-size: 15px;

    transition: transform .3s ease;
}

.statistics-btn:hover {
    background: var(--red-dark);

    color: #fff !important;

    box-shadow: 0 12px 28px rgba(225,30,51,.22);
}

.statistics-btn:hover i {
    transform: translateX(5px);
}


/* ==========================================
   TABLET
========================================== */

@media (max-width: 991px) {

    .why-statistics-section {
        padding: 40px 0;
    }

    .why-statistics-grid {
        grid-template-columns: 1fr;

        gap: 65px;
    }

    .statistics-content {
        max-width: 750px;
    }

    .statistics-visual {
        max-width: 680px;

        width: 100%;

        margin: 0 auto;
    }

}


/* ==========================================
   MOBILE
========================================== */

@media (max-width: 600px) {

    .why-statistics-section {
        padding: 40px 0;
    }

    .why-statistics-grid {
        gap: 45px;
    }

    .statistics-visual {
        min-height: 420px;

        padding:
            20px
            15px
            20px
            0;
    }

    .visual-frame {
        height: 380px;
    }

    .visual-number {
        left: -5px;

        width: 50px;
        height: 50px;

        font-size: 14px;
    }

    .visual-outline {
        width: 100px;
        height: 100px;
    }

    .image-caption {
        left: 12px;
        right: 12px;
        bottom: 12px;

        padding: 13px 15px;
    }

    .statistics-content h2 {
        font-size: 38px;

        letter-spacing: -1px;
    }

    .statistics-content p {
        font-size: 14px;

        line-height: 1.75;
    }

    .statistics-content .lead-text {
        font-size: 15px;
    }

    .statistics-highlights {
        grid-template-columns: 1fr;
    }

}


/* ==========================================
   MAIN SECTION
========================================== */

.what-we-do-modern {
    position: relative;
    padding: 60px 0; 
    background: var(--paper);
    overflow: hidden; 
}


/* ==========================================
   HEADER
========================================== */

.what-we-do-header {
    display: grid;
    grid-template-columns: 75px auto 1fr;
    align-items: end;
    gap: 25px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--line);
}


/* NUMBER */

.what-we-do-number {
    width: 62px;
    height: 62px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--red);

    color: #fff;

    font-size: 16px;
    font-weight: 700;

    letter-spacing: 1px;

    box-shadow:
        0 12px 30px rgba(225,30,51,.18);
}


/* TITLE */

.what-we-do-title {
    padding-bottom: 2px;
}

.section-label {
    display: block;

    margin-bottom: 10px;

    color: var(--red);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2px;
}


.what-we-do-title h2 {
    margin: 0;
    color: var(--ink);
    font-size: 45px; 
    line-height: 1;
    letter-spacing: -2px;
    font-weight: 700;
}

.what-we-do-title h2 span {
    color: var(--red);
}


/* HEADER LINE */

.header-line {
    position: relative;

    height: 1px;

    margin-bottom: 15px;

    background: var(--line);
}


/* ==========================================
   BODY
========================================== */

.what-we-do-body {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 70px;
    padding: 55px 0 50px;
    max-width: 1000px;
    margin: 0 auto;
} 
 

/* INTRO */

.body-intro {
    padding-top: 8px;
}

.intro-label {
    display: block;
    color: var(--red);
    font-size: 25px;
    font-weight: 700;
    letter-spacing: 1.8px;
}

.intro-line {
    width: 35px;
    height: 2px;

    margin-top: 13px;

    background: var(--red);
}


/* CONTENT */

.body-content {
    max-width: 800px;
}

.body-content p {
    margin: 0;
    color: var(--slate);
    font-size: 18px;
    line-height: 1.85;
    font-weight: 400;
}


/* ==========================================
   BOTTOM STRIP
========================================== */

.consulting-strip {
    display: grid;

    grid-template-columns: repeat(3, 1fr) 65px;

    border-top: 1px solid var(--line);

    border-bottom: 1px solid var(--line);

    background: var(--paper);
}


/* STRIP ITEM */

.strip-item {
    display: flex;

    align-items: center;

    gap: 15px;

    min-height: 90px;

    padding: 15px 22px;

    border-right: 1px solid var(--line);
}


/* NUMBER */

.strip-number {
    color: var(--red);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 1px;
}


/* TEXT */

.strip-item strong {
    display: block;
    margin-bottom: 4px;
    color: var(--ink);
    font-size: 18px;
    font-weight: 700;
}

.strip-item small {
    display: block;
    color: var(--slate);
    font-size: 16px;
    letter-spacing: .3px;
}


/* ACCENT */

.strip-accent {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--red);
    color: #fff;
    font-size: 20px;
}

.strip-accent i {
    transition: transform .3s ease;
}

.strip-accent:hover i {
    transform: translateX(5px);
}


/* ==========================================
   HOVER
========================================== */

.strip-item {
    transition: background .25s ease;
}

.strip-item:hover {
    background: #fffafa;
}


/* ==========================================
   TABLET
========================================== */

@media (max-width: 991px) {

    .what-we-do-modern {
        padding: 80px 0;
    }

    .what-we-do-header {
        grid-template-columns: 65px auto;
    }

    .header-line {
        display: none;
    }

    .what-we-do-body {
        grid-template-columns: 140px 1fr;

        gap: 40px;
    }

    .body-content p {
        font-size: 17px;
    }

    .consulting-strip {
        grid-template-columns: 1fr 1fr;
    }

    .strip-accent {
        display: none;
    }

} 


/* ==========================================
   MOBILE 
========================================== */

@media (max-width: 600px) {

    .what-we-do-modern { 
        padding: 60px 0; 
    } 

    .what-we-do-header {
        grid-template-columns: 52px 1fr;
        gap: 18px;
        padding-bottom: 25px;
    }

    .what-we-do-number {
        width: 52px;
        height: 52px;
        font-size: 13px;
    }

    .section-label {
        font-size: 9px;
        letter-spacing: 1.5px;
    }

    .what-we-do-title h2 {
        font-size: 40px;
        letter-spacing: -1.2px;
    }

    .what-we-do-body {
        display: block;
        padding: 35px 0 35px;
    }

    .body-intro {
        margin-bottom: 18px;
    }

    .body-content p {
        font-size: 15px;
        line-height: 1.8;
    }

    .consulting-strip {
        display: block;
    }

    .strip-item {
        min-height: 72px;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .strip-item:last-of-type {
        border-bottom: 0;
    }

} 


/* =========================================================
   SECTION
========================================================= */

.stat-tests-section {
    position: relative;
    padding: 60px 0;
    background: var(--canvas);
    overflow: hidden;
}

.stat-tests-section::before {
    content: "";
    position: absolute;

    width: 500px;
    height: 500px;

    right: -300px;
    top: -250px;

    border-radius: 50%;

    background: var(--red-tint);

    opacity: .7;
}

.stat-tests-section::after {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    left: -90px;
    bottom: -90px;

    border: 1px solid rgba(225, 30, 51, .16);

    transform: rotate(45deg);
}

/* =========================================================
   HEADER
========================================================= */

.stat-tests-header {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 70px;
    align-items: end;
    margin-bottom: 55px;
}


.stat-tests-heading h2 {
    max-width: 760px;
    margin: 0 0 20px;
    color: var(--ink);
    font-size: 45px;
    font-weight: 700;
}

.stat-tests-heading h2 span {
    display: block;

    color: var(--red);
}

.stat-tests-heading p{
    color: var(--slate);
    font-size: 16px; 
} 

/* =========================================================
   FEATURED TESTS
========================================================= */

.featured-tests {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 22px;

    margin-bottom: 75px;
}


/* CARD */

.featured-test-card {
    position: relative;

    padding: 12px;

    background: var(--paper);

    border: 1px solid var(--line);

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

.featured-test-card:hover {
    transform: translateY(-7px);

    box-shadow:
        0 22px 45px rgba(18, 23, 43, .12);
}


/* TOP */

.test-card-top {
    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 10px 7px 14px;
}

.test-number {
    width: 32px;
    height: 32px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: var(--red);

    color: #fff;

    font-size: 10px;

    font-weight: 700;
}

.test-label {
    color: var(--slate-light);

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.5px;
}


/* IMAGE */

.test-card-image {
    position: relative;

    height: 280px;

    overflow: hidden;

    background: #eee;
}

.test-card-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    transition: transform .6s ease;
}

/* IMAGE TITLE */

.test-image-title {
    position: absolute;

    left: 22px;
    right: 22px;
    bottom: 20px;

    z-index: 3;
}

.test-image-title h3 {
    margin: 0 0 5px;

    color: #fff;

    font-size: 22px;

    line-height: 1.2;

    font-weight: 700;
}

.test-image-title span {
    color: rgba(255,255,255,.75);

    font-size: 9px;

    font-weight: 600;

    letter-spacing: 1px;

    text-transform: uppercase;
}


/* =========================================================
   OTHER TESTS
========================================================= */

.other-tests-wrapper {
    padding: 45px;

    background: var(--paper);

    border: 1px solid var(--line);

    box-shadow:
        0 18px 45px rgba(18, 23, 43, .05);
}


/* HEADING */

.other-tests-heading {
    display: flex;

    align-items: flex-end;

    gap: 35px;

    margin-bottom: 35px;

    padding-bottom: 22px;

    border-bottom: 1px solid var(--line);
}

.other-tests-kicker {
    display: block;

    margin-bottom: 7px;

    color: var(--red);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.7px;
}

.other-tests-heading h3 {
    margin: 0;

    color: var(--ink);

    font-size: 27px;

    line-height: 1.2;

    font-weight: 700;
}

.other-tests-line {
    flex: 1;

    height: 1px;

    margin-bottom: 8px;

    background: var(--line);
}


/* =========================================================
   TEST LIST
========================================================= */

.tests-list-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 0 45px;
}


.tests-list-column {
    border-left: 1px solid var(--line);

    padding-left: 22px;
}


.test-list-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 52px;
    border-bottom: 1px solid var(--line);
    transition:
        padding-left .25s ease,
        background .25s ease;
}

.test-list-item:last-child {
    border-bottom: 0;
}


.test-list-item::before {
    content: "";

    position: absolute;

    left: -23px;

    top: 0;

    width: 2px;

    height: 0;

    background: var(--red);

    transition: height .25s ease;
}


.test-list-item:hover {
    padding-left: 7px;
}

.test-list-item:hover::before {
    height: 100%;
}


.test-list-item > span {
    color: var(--red);
    font-size: 12px;
    font-weight: 700;
    min-width: 20px;
}


.test-list-item strong {
    color: var(--slate);
    font-size: 14px; 
    line-height: 1.4;
    font-weight: 600;
    transition: color .25s ease;
}

.test-list-item:hover strong {
    color: var(--ink);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .stat-tests-section {
        padding: 80px 0;
    }

    .stat-tests-header {
        grid-template-columns: 1fr;

        gap: 25px;
    }

    .stat-tests-intro {
        max-width: 400px;
    }

    .featured-tests {
        grid-template-columns: repeat(3, 1fr);

        gap: 15px;
    }

    .test-card-image {
        height: 230px;
    }

    .other-tests-wrapper {
        padding: 30px;
    }

    .tests-list-grid {
        gap: 0 25px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .stat-tests-section {
        padding: 65px 0;
    }

    .stat-tests-header {
        margin-bottom: 40px;
    }

    .stat-tests-heading h2 {
        font-size: 39px;

        letter-spacing: -1.2px;
    }

    .featured-tests {
        grid-template-columns: 1fr;

        gap: 20px;

        margin-bottom: 50px;
    }

    .test-card-image {
        height: 300px;
    }

    .other-tests-wrapper {
        padding: 25px 20px;
    }

    .other-tests-heading {
        display: block;

        margin-bottom: 20px;
    }

    .other-tests-line {
        display: none;
    }

    .other-tests-heading h3 {
        font-size: 23px;
    }

    .tests-list-grid {
        grid-template-columns: 1fr;
    }

    .tests-list-column {
        padding-left: 18px;

        margin-bottom: 0;
    } 

    .tests-list-column + .tests-list-column {
        border-top: 1px solid var(--line);
        padding-top: 5px;
    } 

    .test-list-item::before {
        left: -19px;
    } 
} 
  
.inner-head-2 h2 span{
    color: var(--red); 
} 
 
/* ==========================================
   SECTION
========================================== */

.synopsis-intro-section {
    position: relative; 
    padding: 60px 0;
    background: var(--canvas); 
    overflow: hidden;
}


/* ==========================================
   MAIN LAYOUT
========================================== */

.synopsis-intro {
    display: grid;

    grid-template-columns: 210px 1fr;

    gap: 75px;

    max-width: 1150px;

    margin: 0 auto;
}


/* ==========================================
   LEFT SIDE
========================================== */

.synopsis-side {
    position: relative;

    padding-top: 5px;
}


.synopsis-number {
    width: 72px;
    height: 72px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-bottom: 30px;

    background: var(--red);

    color: #fff;

    font-size: 17px;

    font-weight: 700;

    letter-spacing: 1px;

    box-shadow:
        0 15px 35px rgba(225, 30, 51, .18);
}


.synopsis-label {
    display: block;
    max-width: 150px;
    color: var(--ink);
    font-size: 40px;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 1.5px;
}

.synopsis-label span{
    color: var(--red);
}
 

.synopsis-line {
    width: 45px;
    height: 3px;

    margin-top: 20px;

    background: var(--red);
}


/* ==========================================
   CONTENT
========================================== */

.synopsis-content {
    position: relative;

    padding-left: 55px;

    border-left: 1px solid var(--line);
}


.synopsis-content::before {
    content: "";

    position: absolute;

    left: -2px;
    top: 0;

    width: 3px;
    height: 70px;

    background: var(--red);
}


/* HEADING */

.synopsis-content h2 {
    margin: 0 0 30px;
    color: var(--ink);
    font-size:45px;
    font-weight: 700;
}


.synopsis-content h2 span {
    color: var(--red);
}


/* ==========================================
   TEXT
========================================== */

.synopsis-content p {
    max-width: 850px;
    margin: 0 0 18px;
    color: var(--slate);
    font-size: 16px; 
    line-height: 1.85;
}



/* ==========================================
   POINTS
========================================== */

.synopsis-points {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    margin-top: 32px;

    border-top: 1px solid var(--line);

    border-bottom: 1px solid var(--line);

    background: var(--paper);
}


.synopsis-point {
    display: flex;

    align-items: center;

    gap: 12px;

    min-height: 65px;

    padding: 10px 15px;

    border-right: 1px solid var(--line);
}


.synopsis-point:last-child {
    border-right: 0;
}


.synopsis-point span {
    color: var(--red);
    font-size: 18px; 
    font-weight: 700; 
} 


.synopsis-point strong {
    color: var(--ink);
    font-size: 18px;
    font-weight: 700; 
}



/* ==========================================
   TABLET
========================================== */

@media (max-width: 991px) {

    .synopsis-intro-section {
        padding: 40px 0;
    }

    .synopsis-intro {
        grid-template-columns: 150px 1fr;

        gap: 45px;
    } 

    .synopsis-content {
        padding-left: 40px;
    } 

    .synopsis-content h2 {
        font-size: 46px;
    } 

} 


/* ==========================================
   MOBILE
========================================== */

@media (max-width: 767px) {

    .synopsis-intro-section {
        padding: 50px 0;
    }

    .synopsis-intro {
        display: block;
    }

    .synopsis-side {
        margin-bottom: 35px;
    }

    .synopsis-number {
        width: 55px;
        height: 55px;

        margin-bottom: 18px;

        font-size: 14px;
    }

    .synopsis-label {
        max-width: none;

        font-size: 9px;
    }

    .synopsis-line {
        margin-top: 13px;
    }

    .synopsis-content {
        padding-left: 20px;
    }

    .synopsis-content h2 {
        font-size: 39px;

        letter-spacing: -1px;

        margin-bottom: 25px;
    }

    .synopsis-content p {
        font-size: 14px;
        line-height: 1.8;
    }

    .synopsis-points {
        display: block;
    }

    .synopsis-point {
        min-height: 55px;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }
    
    .synopsis-point:last-child {
        border-bottom: 0;
    } 
}

/* =========================================================
   SECTION
========================================================= */

.phd-benefits-section {
    position: relative;
    padding: 60px 0;
    background: var(--canvas);
    overflow: hidden;
}


/* BACKGROUND DECORATION */

.phd-benefits-section::before {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    left: -250px;
    top: -190px;

    border-radius: 50%;

    background: var(--red-tint);

    opacity: .7;
}

.phd-benefits-section::after {
    content: "";

    position: absolute;

    width: 170px;
    height: 170px;

    right: -85px;
    bottom: -85px;

    border: 1px solid rgba(225, 30, 51, .16);

    transform: rotate(45deg);
}

/* =========================================================
   MAIN GRID
========================================================= */

.phd-benefits-grid {
    display: grid;

    grid-template-columns: .9fr 1.1fr;

    gap: 75px;

    align-items: center;
}


/* =========================================================
   IMAGE AREA
========================================================= */

.benefits-visual {
    position: relative;
}


.benefits-image-frame {
    position: relative;

    padding: 12px;

    background: var(--paper);

    border: 1px solid var(--line);

    box-shadow:
        0 25px 60px rgba(18, 23, 43, .08);
}


/* RED SIDE ACCENT */

.benefits-image-frame::before {
    content: "";

    position: absolute;

    width: 55px;
    height: 55px;

    left: -12px;
    top: -12px;

    border-top: 3px solid var(--red);
    border-left: 3px solid var(--red);

    z-index: 3;
}


/* IMAGE */

.benefits-image-frame img {
    width: 100%;

    height: 500px;

    display: block;

    object-fit: cover;
}


/* NUMBER */

.image-number {
    position: absolute;

    top: 30px;
    right: 30px;

    width: 50px;
    height: 50px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: var(--red);

    color: #fff;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 1px;

    box-shadow:
        0 10px 25px rgba(225, 30, 51, .22);
}


/* =========================================================
   CONTENT
========================================================= */

.benefits-content {
    position: relative;
}

/* HEADING */

.benefits-content h2 {
    max-width: 650px;
    margin: 0 0 25px;
    color: var(--ink);
    font-size: 45px; 
   
    font-weight: 700;
}


.benefits-content h2 span {
    color: var(--red);
}


/* INTRO */

.benefits-intro {
    margin: 0 0 12px;
    color: var(--slate);
    font-size: 16px;
    line-height: 1.75;
    font-weight: 500;
}


.benefits-description {
    margin: 0 0 30px;
    color: var(--slate);
    font-size: 16px;
    line-height: 1.7;
}


/* =========================================================
   BENEFIT ITEMS
========================================================= */

.benefit-item {
    position: relative;

    display: grid;

    grid-template-columns: 45px 1fr 30px;

    gap: 18px;

    align-items: start;

    padding: 20px 15px;

    border-top: 1px solid var(--line);

    transition:
        background .3s ease,
        padding-left .3s ease;
}


.benefit-item:last-child {
    border-bottom: 1px solid var(--line);
}


/* HOVER */

.benefit-item:hover {
    padding-left: 22px;

    background: var(--paper);
}


/* NUMBER */

.benefit-number {
    width: 38px;
    height: 38px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: var(--red-tint);

    color: var(--red);

    font-size: 10px;

    font-weight: 700;

    transition:
        background .3s ease,
        color .3s ease;
}


.benefit-item:hover .benefit-number {
    background: var(--red);

    color: #fff;
}


/* TEXT */

.benefit-text h3 {
    margin: 0 0 6px;
    color: var(--ink);
    font-size: 16px;
    line-height: 1.4;
    font-weight: 700;
}


.benefit-text p {
    margin: 0;
    color: var(--slate);
    font-size: 14px; 
    line-height: 1.7;
}


/* ARROW */

.benefit-arrow {
    display: flex;

    align-items: center;
    justify-content: center;

    height: 38px;

    color: var(--slate-light);

    font-size: 13px;

    transition:
        color .3s ease,
        transform .3s ease;
}


.benefit-item:hover .benefit-arrow {
    color: var(--red);

    transform: translateX(4px);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .phd-benefits-section {
        padding: 50px 0;
    }

    .phd-benefits-grid {
        grid-template-columns: 1fr 1fr;

        gap: 40px;
    }

    .benefits-image-frame img {
        height: 430px;
    }

    .benefits-content h2 {
        font-size: 40px;
    }

    .benefit-item {
        grid-template-columns: 38px 1fr;

        gap: 12px;

        padding: 17px 10px;
    }

    .benefit-arrow {
        display: none;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .phd-benefits-section {
        padding: 50px 0;
    }

    .phd-benefits-grid {
        display: block;
    }

    .benefits-visual {
        margin-bottom: 45px;
    }

    .benefits-image-frame img {
        height: 350px;
    }


    .benefits-content h2 {
        font-size: 37px;

        letter-spacing: -1px;
    }

    .benefits-intro {
        font-size: 15px;
    }  

    .benefit-item {
        grid-template-columns: 38px 1fr;
        gap: 12px;
        padding: 18px 5px;
    }  
 
    .benefit-text p {
        font-size: 12px;
    } 
}  
  
.new-col {
    display: flex;
    flex-direction: column;
    align-items: center;
} 

.why-p {  
    color: var(--slate); 
    font-size: 16px; 
    margin-top: 15px; 
} 

/* =========================================================
   SECTION
========================================================= */

.additional-help-section {
    position: relative; 
    padding: 60px 0;
    background: var(--paper);
    overflow: hidden;
}

/* =========================================================
   MAIN GRID
========================================================= */

.additional-help-grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 75px;
    align-items: center;
}


/* =========================================================
   IMAGE
========================================================= */

.help-image-area {
    position: relative;
}


.help-image-box {
    position: relative;

    padding: 12px;

    background: var(--paper);

    border: 1px solid var(--line);

    box-shadow:
        0 25px 55px rgba(18, 23, 43, .08);
}


/* RED CORNER */

.help-image-box::before {
    content: "";

    position: absolute;

    width: 65px;
    height: 65px;
    left: -12px;
    top: -12px;
    border-top: 3px solid var(--red);
    border-left: 3px solid var(--red);
    z-index: 3;
}


/* IMAGE */

.help-image-box img {
    display: block;
    width: 100%;
    /*height: 500px;*/
    object-fit: cover;
}


/* IMAGE TAG */

.help-image-tag {
    position: absolute;
    left: 32px;
    bottom: 32px;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 18px 12px 12px;
    background: var(--ink);
    color: #fff;
    box-shadow:
        0 12px 30px rgba(18, 23, 43, .2);
}


.help-image-tag span {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--red);
    font-size: 11px;
    font-weight: 700;
}


.help-image-tag strong {
    font-size: 9px;
    letter-spacing: 1.4px;
}


/* =========================================================
   CONTENT
========================================================= */

.help-content { 
    position: relative;
} 


/* HEADING */

.help-heading h2 {
    margin: 0 0 25px;
    color: var(--ink);
    font-size: 45px; 
    font-weight: 700;
} 

.help-heading h2 span {
    color: var(--red);
}


/* INTRO */

.help-description {
    margin: 0 0 12px; 
    color: var(--slate);
    font-size: 16px;
    line-height: 1.7;
}


/* =========================================================
   SUPPORT POINTS
========================================================= */

.help-points {
    border-top: 1px solid var(--line);
}


.help-point {
    display: grid;
    grid-template-columns: 45px 1fr 38px;
    gap: 18px;
    align-items: center;
    padding: 17px 10px;
    border-bottom: 1px solid var(--line);
    background: transparent;
    transition:
        background .3s ease,
        padding-left .3s ease;
}


.help-point:hover {
    padding-left: 20px;
    background: var(--paper);
}


/* NUMBER */

.help-point-number {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--red-tint);
    color: var(--red);
    font-size: 10px;
    font-weight: 700;
    transition:
        background .3s ease,
        color .3s ease;
}


.help-point:hover .help-point-number {
    background: var(--red);
    color: #fff;
}


/* CONTENT */

.help-point-content h3 {
    margin: 0 0 4px; 
    color: var(--ink);
    font-size: 16px; 
    line-height: 1.4;
    font-weight: 700;
}


.help-point-content p {
    margin: 0;
    color: var(--slate);
    font-size: 14px;
    line-height: 1.6;
}


/* ICON */

.help-point-icon {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    color: var(--slate-light);
    font-size: 11px;
    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;
}


.help-point:hover .help-point-icon {
    background: var(--red);
    border-color: var(--red);
    color: #fff;
    transform: translateX(3px);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .additional-help-section {
        padding: 50px 0;
    }

    .additional-help-grid {
        grid-template-columns: 1fr 1fr;

        gap: 40px;
    }

    .help-image-box img {
        height: 430px;
    }

    .help-heading h2 {
        font-size: 40px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .additional-help-section {
        padding: 65px 0;
    }

    .additional-help-grid {
        display: block;
    }

    .help-image-area {
        margin-bottom: 45px;
    }

    .help-image-box img {
        height: 350px;
    }

    .help-image-tag {
        left: 20px;
        bottom: 20px;
    }

    .help-heading h2 {
        font-size: 37px;
        letter-spacing: -1px;
    }

    .help-point {
        grid-template-columns: 38px 1fr;
        gap: 12px;
        padding: 17px 5px;
    }

    .help-point-icon {
        display: none;
    }

}

/* =========================================================
   MAIN SECTION
========================================================= */

.thesis-chapter-modern {
    position: relative;
    padding: 60px 0;
    background: var(--paper);
    overflow: hidden;
}


/* TOP RIGHT DECORATION */

.thesis-chapter-modern::after {
    content: "";

    position: absolute;

    width: 330px;
    height: 330px;

    right: -170px;
    top: -170px;

    border: 1px solid rgba(225, 30, 51, .14);

    border-radius: 50%;
}


/* =========================================================
   TOP AREA
========================================================= */

.chapter-top {
    position: relative;

    z-index: 2;

    margin-bottom: 60px;
}


.chapter-top-label {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 22px;

    color: var(--red);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2px;
}


.chapter-top-label span {
    width: 42px;
    height: 2px;

    background: var(--red);

    display: block;
}


.chapter-top-grid {
    display: grid;

    grid-template-columns: 1.15fr .85fr;

    gap: 70px;

    align-items: end;
}


/* TITLE */

.chapter-title-wrap h2 {
    margin: 0;
    color: var(--ink);
    font-size: 45px; 
    font-weight: 700;
}


.chapter-title-wrap h2 strong {
    color: var(--red);
    font-weight: 700;
}


/* INTRO */

.chapter-intro {
    padding-bottom: 7px;

    max-width: 470px;
}


.chapter-intro p {
    margin: 0;

    color: var(--slate);

    font-size: 16px;

    line-height: 1.8;
}


/* =========================================================
   CONTENT AREA
========================================================= */

.chapter-content-area {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns: .7fr 1.3fr;

    min-height: 430px;

    border-top: 1px solid var(--line);

    border-bottom: 1px solid var(--line);
}


/* =========================================================
   VISUAL BLOCK
========================================================= */

.chapter-visual {
    position: relative;

    display: flex;

    align-items: center;
    justify-content: center;

    min-height: 430px;

    background: var(--ink);

    overflow: hidden;
}


/* RED SHAPE */

.chapter-visual::before {
    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    border-radius: 50%;

    background: var(--red);

    right: -100px;
    bottom: -130px;

    opacity: .95;
}


/* INNER */

.chapter-visual-inner {
    position: relative;

    z-index: 2;

    width: 70%;

    height: 70%;

    border: 1px solid rgba(255,255,255,.16);

    padding: 30px;
}


/* ICON */

.chapter-document-icon {
    width: 55px;
    height: 55px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: var(--red);

    color: #fff;

    font-size: 19px;
}


/* NUMBER */

.chapter-visual-number {
    margin-top: 40px;

    color: rgba(255,255,255,.95);

    font-size: 92px;

    line-height: .8;

    font-weight: 700;

    letter-spacing: -6px;
}


/* TEXT */

.chapter-visual-text {
    position: absolute;

    left: 30px;
    bottom: 27px;
}


.chapter-visual-text span {
    display: block;
    color: rgba(255,255,255,.55);
    font-size: 16px;  
    letter-spacing: 2px; 
    font-weight: 700;  
}


.chapter-visual-text strong {
    display: block;
    margin-top: 4px; 
    color: #fff;  
    font-size: 22px; 
    letter-spacing: 1px; 
}


/* =========================================================
   READING AREA
========================================================= */

.chapter-reading {
    padding: 18px 55px;

    background: var(--canvas);
}


.reading-block {
    display: grid;

    grid-template-columns: 48px 1fr;

    gap: 25px;

    padding: 27px 0;

    border-bottom: 1px solid var(--line);
}


.reading-block:last-child {
    border-bottom: 0;
}


/* NUMBER */

.reading-number {
    width: 36px;
    height: 36px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: var(--red-tint);

    color: var(--red);

    font-size: 10px;

    font-weight: 700;
}


/* TEXT */

.reading-block p {
    margin: 0; 
    color: var(--slate); 
    font-size: 16px;  
    line-height: 1.85; 
}


/* =========================================================
   BOTTOM CTA
========================================================= */

.chapter-bottom {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 40px;

    padding: 32px 0;
}


.chapter-bottom-content span {
    display: block;

    margin-bottom: 7px;

    color: var(--red);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.8px;
}


.chapter-bottom-content h3 {
    margin: 0;

    color: var(--ink);

    font-size: 20px;

    font-weight: 600;
}


/* BUTTON */

.chapter-modern-btn {
    display: inline-flex;

    align-items: center;

    gap: 18px;

    padding: 16px 23px;

    background: var(--red);

    color: #fff !important;

    text-decoration: none !important;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1px;

    white-space: nowrap;

    transition: .3s ease;
}


.chapter-modern-btn i {
    font-size: 14px;

    transition: transform .3s ease;
}


.chapter-modern-btn:hover {
    background: var(--red-dark);

    box-shadow:
        0 12px 28px rgba(225,30,51,.2);
}


.chapter-modern-btn:hover i {
    transform: translateX(5px);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .thesis-chapter-modern {
        padding: 40px 0;
    }

    .chapter-top-grid {
        gap: 40px;
    }

    .chapter-title-wrap h2 {
        font-size: 55px;
    }

    .chapter-content-area {
        grid-template-columns: .75fr 1.25fr;
    }

    .chapter-reading {
        padding: 15px 30px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .thesis-chapter-modern {
        padding: 40px 0;
    }

    .chapter-top {
        margin-bottom: 40px;
    }

    .chapter-top-grid {
        display: block;
    }

    .chapter-title-wrap h2 {
        font-size: 43px;
        letter-spacing: -1.5px;
    }

    .chapter-intro {
        margin-top: 25px;
    }

    .chapter-intro p {
        font-size: 14px;
    }

    .chapter-content-area {
        display: block;
    }

    .chapter-visual {
        min-height: 300px;
    }

    .chapter-visual-inner {
        width: 85%;
        height: 75%;
        padding: 22px;
    }


    .chapter-visual-number {
        margin-top: 25px;

        font-size: 70px;
    }


    .chapter-visual-text {
        left: 22px;
        bottom: 20px;
    }


    .chapter-reading {
        padding: 5px 20px;
    }


    .reading-block {
        grid-template-columns: 38px 1fr;
        gap: 15px;
        padding: 22px 0;
    }

    .reading-block p,
    .reading-block:first-child p {
        font-size: 13px;
        line-height: 1.8;
    }

    .chapter-bottom {
        display: block;
        padding: 27px 0;
    } 

    .chapter-bottom-content h3 {
        font-size: 17px;
        line-height: 1.5;
    } 

    .chapter-modern-btn {
        margin-top: 20px;
    }
}

/* ========================================================= 
   SECTION
========================================================= */ 

.phd-data-benefits {
    position: relative;
    padding: 60px 0;
    background: var(--canvas);
    overflow: hidden;
}


/* Decorative background */

.phd-data-benefits::before {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    right: -230px;
    top: -200px;

    border: 1px solid rgba(225, 30, 51, .12);

    border-radius: 50%;
}


.phd-data-benefits::after {
    content: "";

    position: absolute;

    width: 200px;
    height: 200px;

    left: -120px;
    bottom: -100px;

    background: var(--red-tint);

    border-radius: 50%;
}


.phd-data-benefits .container {
    position: relative;
    z-index: 2;
}


/* =========================================================
   MAIN GRID
========================================================= */

.data-benefits-wrapper {
    display: grid;

    grid-template-columns: 1.15fr .85fr;

    gap: 80px;

    align-items: center;
}


/* =========================================================
   CONTENT
========================================================= */

.data-benefits-content {
    max-width: 700px;
}
/* HEADING */

.data-benefits-content h2 {
    margin: 0 0 15px;
    color: var(--ink);
    font-size: 45px; 
    font-weight: 700;
}


.data-benefits-content h2 strong {
    color: var(--red);
    font-weight: 700;
}

/* INTRO */

.intro-text {
    max-width: 650px;
    margin: 0 0 30px;
    color: var(--slate); 
    font-size: 16px;
    line-height: 1.85;
}


/* =========================================================
   BENEFIT LIST
========================================================= */

.benefit-list {
    border-top: 1px solid var(--line);
}


.benefit-item {
    display: grid;

    grid-template-columns: 55px 1fr;

    gap: 20px;

    align-items: center;

    padding: 18px 0;

    border-bottom: 1px solid var(--line);

    transition: all .3s ease;
}


.benefit-item:hover {
    padding-left: 12px;

    background: var(--paper);
}


/* NUMBER */

.benefit-number {
    width: 42px;
    height: 42px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: var(--red-tint);

    color: var(--red);

    font-size: 10px;

    font-weight: 700;

    transition: .3s ease;
}


.benefit-item:hover .benefit-number {
    background: var(--red);

    color: #fff;
}


/* TEXT */

.benefit-text h3 {
    margin: 0 0 3px;
    color: var(--ink);
    font-size: 16px; 
    font-weight: 700;
}


.benefit-text p {
    margin: 0;
    color: var(--slate);
    font-size: 14px; 
    line-height: 1.6;
}


/* =========================================================
   CONCLUSION
========================================================= */

.data-conclusion {
    display: flex;

    align-items: flex-start;

    gap: 15px;

    margin-top: 28px;

    padding: 20px;

    background: var(--paper);

    border-left: 3px solid var(--red);

    box-shadow:
        0 12px 30px rgba(18, 23, 43, .05);
}


.conclusion-icon {
    flex-shrink: 0;

    width: 34px;
    height: 34px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: var(--red);

    color: #fff;

    font-size: 11px;
}


.data-conclusion p {
    margin: 0;
    color: var(--slate);
    font-size: 15px;
    line-height: 1.75;
}


/* =========================================================
   IMAGE / VISUAL
========================================================= */

.data-benefits-visual {
    position: relative;

    padding: 20px;
}


.visual-frame {
    position: relative;

    padding: 12px;

    background: var(--paper);

    border: 1px solid var(--line);

    box-shadow:
        0 25px 60px rgba(18, 23, 43, .09);
}


/* Red corner */

.visual-frame::before {
    content: "";

    position: absolute;

    width: 75px;
    height: 75px;

    left: -12px;
    top: -12px;

    border-top: 4px solid var(--red);

    border-left: 4px solid var(--red);

    z-index: 3;
}


/* IMAGE */

.visual-image {
    position: relative;
    overflow: hidden;
}


.visual-image img {
    display: block;
    width: 100%;
    /*height: 500px;*/
    object-fit: cover;
    transition: transform .5s ease;
}

/* =========================================================
   FLOATING BADGE
========================================================= */

.visual-badge {
    position: absolute;
    left: 0;
    bottom: 55px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 17px 10px 10px;
    background: var(--ink);
    color: #fff;
    box-shadow:
        0 12px 30px rgba(18, 23, 43, .2);
}


.visual-badge span {
    width: 38px;
    height: 38px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: var(--red);

    font-size: 11px;

    font-weight: 700;
}


.visual-badge small {
    font-size: 9px;

    letter-spacing: 1.5px;

    font-weight: 700;
}


/* LARGE WATERMARK */

.visual-number {
    position: absolute;

    right: -12px;
    bottom: -30px;

    color: rgba(18, 23, 43, .045);

    font-size: 75px;

    font-weight: 800;

    letter-spacing: -4px;

    pointer-events: none;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .phd-data-benefits {
        padding: 40px 0;
    }

    .data-benefits-wrapper {
        grid-template-columns: 1fr 1fr;

        gap: 45px;
    }

    .data-benefits-content h2 {
        font-size: 40px;
    }

    .visual-image img {
        height: 420px;
    }

    .visual-badge {
        left: -15px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .phd-data-benefits {
        padding: 65px 0;
    }


    .data-benefits-wrapper {
        display: flex;
        flex-direction: column;
        gap: 45px;
    }


    /* Put image first on mobile */

    .data-benefits-visual {
        order: -1;
        width: 100%;
        padding: 12px;
    }


    .visual-image img {
        height: 350px;
    }


    .visual-badge {
        left: 5px;
        bottom: 35px;
    }


    .data-benefits-content h2 {
        font-size: 38px;
        letter-spacing: -1px;
    }


    .intro-text {
        font-size: 14px;
    }


    .benefit-item {
        grid-template-columns: 45px 1fr;
        gap: 14px;
        padding: 16px 0;
    }


    .benefit-number {
        width: 38px;
        height: 38px;
    }


    .data-conclusion {
        padding: 16px;
    }


    .data-conclusion p {
        font-size: 12px;
    }

}

/* =========================================================
   SECTION
========================================================= */

.data-info-section {
    position: relative;
    padding: 60px 0;
    background: var(--paper);
    overflow: hidden;
}


/* Background decoration */

.data-info-section::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    right: -250px;
    top: -230px;
    border: 1px solid rgba(225, 30, 51, .12);
    border-radius: 50%;
}


.data-info-section::after {
    content: "";
    position: absolute;
    width: 170px;
    height: 170px;
    left: -100px;
    bottom: -90px;
    background: var(--red-tint);
    border-radius: 50%;
}


.data-info-section .container {
    position: relative;
    z-index: 2;
}


/* =========================================================
   HEADER
========================================================= */

.data-info-header {
    margin-bottom: 55px;
}

.data-info-heading {
    display: grid;
    grid-template-columns: 1fr .65fr;
    gap: 80px;
    align-items: end;
} 


.data-info-heading h2 {
    margin: 0;
    color: var(--ink);
    font-size: 45px; 
    font-weight: 700;
}


.data-info-heading h2 strong {
    color: var(--red);
    font-weight: 700;
}


.data-info-heading p {
    max-width: 430px;
    margin: 0;
    padding-bottom: 5px;
    color: var(--slate);
    font-size: 16px; 
    line-height: 1.8; 
}


/* =========================================================
   GRID
========================================================= */

.data-info-grid {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 20px;
}


/* =========================================================
   CARD
========================================================= */

.data-info-card {
    position: relative;

    min-height: 315px;

    padding: 32px;

    background: var(--canvas);

    border: 1px solid var(--line);

    overflow: hidden;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}


.data-info-card:hover {
    transform: translateY(-7px);

    border-color: rgba(225, 30, 51, .22);

    box-shadow:
        0 22px 45px rgba(18, 23, 43, .09);
}


/* =========================================================
   CARD TOP
========================================================= */

.data-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 20px;
}


/* NUMBER */

.data-card-number {
    color: var(--slate-light);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1px;
}


/* ICON */

.data-card-icon {
    width: 65px;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center; 
    background: var(--red-tint);
    border-radius: 50%;
    transition: .35s ease;
}

.data-card-icon img {
    width: 38px;
    height: 38px;

    object-fit: contain;
}

.data-info-card:hover .data-card-icon {
    background: var(--red);

    transform: rotate(5deg);
}

/* =========================================================
   CARD CONTENT
========================================================= */

.data-card-content {
    max-width: 510px;
}

.data-card-content h3 {
    margin: 0 0 12px;
    color: var(--ink);
    font-size: 22px;
    line-height: 1.3;
    font-weight: 700;
}


.data-card-content p {
    margin: 0;
    color: var(--slate);
    font-size: 16px;
    line-height: 1.8;
}


/* =========================================================
   CARD ARROW
========================================================= */

.data-card-arrow {
    position: absolute;

    right: 30px;
    bottom: 27px;

    width: 35px;
    height: 35px;

    display: flex;

    align-items: center;
    justify-content: center;

    color: var(--red);

    border: 1px solid var(--line);

    font-size: 12px;

    transition: .3s ease;
}


.data-info-card:hover .data-card-arrow {
    background: var(--red);

    color: #fff;

    border-color: var(--red);
}


/* =========================================================
   FEATURED CARD
========================================================= */

.featured-card {
    background: var(--red-tint);

    border-color: transparent;
}


.featured-card .data-card-icon {
    background: var(--paper);
}


.featured-card .data-card-number {
    color: var(--red);
}


.featured-card:hover {
    border-color: rgba(225, 30, 51, .18);
}


/* =========================================================
   DARK CARD
========================================================= */

.dark-card {
    background: var(--ink);

    border-color: var(--ink);
}


.dark-card .data-card-number {
    color: rgba(255,255,255,.45);
}


.dark-card .data-card-content h3 {
    color: #fff;
}


.dark-card .data-card-content p {
    color: rgba(255,255,255,.66);
}


.dark-card .data-card-arrow {
    border-color: rgba(255,255,255,.15);

    color: #fff;
}


.dark-card:hover {
    border-color: var(--ink);
}


/* =========================================================
   DECORATIVE CARD ELEMENT
========================================================= */

.data-info-card::after {
    content: "";

    position: absolute;

    width: 130px;
    height: 130px;

    right: -75px;
    bottom: -75px;

    border: 1px solid rgba(225, 30, 51, .10);

    border-radius: 50%;
}


.dark-card::after {
    border-color: rgba(255,255,255,.08);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .data-info-section {
        padding: 40px 0;
    }


    .data-info-heading {
        grid-template-columns: 1fr .8fr;

        gap: 40px;
    }


    .data-info-heading h2 {
        font-size: 48px;
    }


    .data-info-card {
        padding: 26px;

        min-height: 330px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .data-info-section {
        padding: 50px 0;
    }


    .data-info-header {
        margin-bottom: 38px;
    }


    .data-info-heading {
        display: block;
    }


    .data-info-heading h2 {
        font-size: 39px;

        letter-spacing: -1.2px;
    }


    .data-info-heading p {
        margin-top: 22px;

        font-size: 13px;
    }


    .data-info-grid {
        grid-template-columns: 1fr;

        gap: 15px;
    }


    .data-info-card {
        min-height: auto;

        padding: 25px;
    }
    
    .data-card-top {
        margin-bottom: 20px;
    }


    .data-card-icon {
        width: 58px;
        height: 58px;
    }


    .data-card-icon img {
        width: 34px;
        height: 34px;
    }


    .data-card-content h3 {
        font-size: 18px;
    }


    .data-card-content p {
        font-size: 16px;
        line-height: 1.75;
        padding-right: 15px;
    }


    .data-card-arrow {
        right: 22px;
        bottom: 22px;
    }

}


/* =========================================================
   SECTION
========================================================= */

.phd-data-hero {
    position: relative;

    padding: 60px 0;

    background:
        radial-gradient(
            circle at 75% 20%,
            rgba(225, 30, 51, .035),
            transparent 25%
        ),
        #ffffff;

    overflow: hidden;
}


/* =========================================================
   BACKGROUND DOTS
========================================================= */

.phd-data-hero::before {
    content: "";

    position: absolute;

    width: 160px;
    height: 120px;

    top: 0;
    right: 16%;

    background-image:
        radial-gradient(
            rgba(225, 30, 51, .18) 1.5px,
            transparent 1.5px
        );

    background-size: 22px 22px;

    opacity: .45;
}


/* =========================================================
   MAIN GRID
========================================================= */

.phd-data-grid {

    display: grid;

    grid-template-columns: 48% 52%;

    align-items: center;

    min-height: 650px;

}


/* =========================================================
   LEFT CONTENT
========================================================= */

.phd-data-content {
    position: relative;
    z-index: 5;
    padding: 35px 30px 35px 0;

}


/* =========================================================
   HEADING
========================================================= */

.phd-data-content h1 {
    
    margin: 0 0 15px;
    max-width: 650px;
    color: var(--ink);
    font-size: 45px;
    font-weight: 700;

}


.phd-data-content h1 span {
    color: var(--red);

}


/* =========================================================
   DESCRIPTION
========================================================= */

.phd-description {

    max-width: 650px;

    margin: 0 0 18px;

    color: var(--slate);

    font-size: 16px;

    line-height: 1.8;

}


/* =========================================================
   DATA TYPE BOX
========================================================= */

.phd-data-types {

    display: flex;

    align-items: center;

    max-width: 680px;

    margin-top: 30px;

    padding: 18px 20px;

    background: #fff;

    border: 1px solid var(--line);

    border-radius: 12px;

    box-shadow:
        0 12px 35px rgba(18,23,43,.06);

}


.data-type {

    display: flex;

    align-items: center;

    gap: 12px;

    flex: 1;

}


.data-icon {

    width: 46px;
    height: 46px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    color: #fff;

    background: var(--red);

    border-radius: 50%;

    font-size: 17px;

}


.data-type strong {

    display: block;
    color: var(--ink);
    font-size: 15px;
    line-height: 1.3;

}


.data-type span {

    display: block;

    color: var(--ink);

    font-size: 14px;

}


.data-divider {

    width: 1px;
    height: 45px;

    margin: 0 15px;

    background: var(--line);

}


/* =========================================================
   CTA
========================================================= */

.phd-action-row {

    display: flex;
    align-items: center;
    gap: 28px;
    margin-top: 30px;

}


/* =========================================================
   RIGHT IMAGE AREA
========================================================= */

.phd-data-visual {

    position: relative;

    height: 650px;

}


/* =========================================================
   RED BACKGROUND CORNER
========================================================= */

.phd-red-corner {

    position: absolute;

    width: 430px;
    height: 430px;

    top: -80px;
    right: -180px;

    background: var(--red);

    clip-path: polygon(
        25% 0,
        100% 0,
        100% 100%,
        70% 80%,
        20% 55%
    );

}


/* =========================================================
   IMAGE
========================================================= */

.phd-image-frame {

    position: absolute;

    z-index: 2;

    top: 45px;
    right: -10px;

    width: 93%;
    height: 575px;

    overflow: hidden;

    border-radius:
        180px
        25px
        25px
        180px;

    border: 2px solid var(--red);

    box-shadow:
        0 25px 60px rgba(18,23,43,.13);

}


.phd-image-frame img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    transition: transform .6s ease;

}


.phd-image-frame:hover img {

    transform: scale(1.04);

}


/* =========================================================
   FLOATING CARD
========================================================= */

.phd-floating-card {

    position: absolute;

    z-index: 5;

    right: 25px;

    top: 135px;

    display: flex;

    align-items: center;

    gap: 15px;

    min-width: 250px;

    padding: 22px;

    background: rgba(255,255,255,.94);

    border-radius: 18px;

    box-shadow:
        0 15px 40px rgba(18,23,43,.13);

    backdrop-filter: blur(10px);

}


.floating-card-icon {

    width: 48px;
    height: 48px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    color: #fff;

    background: var(--red);

    border-radius: 50%;

    font-size: 19px;

}


.phd-floating-card strong {

    display: block;

    margin-bottom: 4px;

    color: var(--ink);

    font-size: 15px;

}


.phd-floating-card span {

    display: block;

    color: var(--slate);

    font-size: 12px;

    line-height: 1.55;

}


/* =========================================================
   CIRCLE DECORATION
========================================================= */

.phd-circle-decoration {

    position: absolute;

    z-index: 1;

    width: 150px;
    height: 150px;

    left: 30px;
    bottom: 30px;

    border: 1px solid rgba(225,30,51,.20);

    border-radius: 50%;
}




/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .phd-data-grid {

        grid-template-columns: 50% 50%;

    }


    .phd-data-content h1 {
        font-size: 30;

    }


    .phd-description {

        font-size: 14px;

    }


    .phd-image-frame {

        width: 95%;

        height: 530px;

    }


    .phd-data-visual {

        height: 600px;

    }


    .phd-service-strip {

        padding: 20px;

    }


}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .phd-data-hero {
        padding: 50px 0 ;

    }


    .phd-data-grid {

        display: flex;
        flex-direction: column;
        min-height: auto;

    }


    .phd-data-content {

        width: 100%;
        padding: 0;

    }


    .phd-data-content h1 {

        font-size: 30px;
        letter-spacing: -2px;

    }


    .phd-description {
        font-size: 14px;
        line-height: 1.75;

    }


    .phd-data-types {
        display: block;

    }


    .data-type {
        padding: 8px 0;

    }


    .data-divider {
        width: 100%;
        height: 1px;
        margin: 8px 0;

    }


    .phd-action-row {
        display: block;

    }

    .phd-support-badge {
        margin-top: 15px;

    }


    /* IMAGE */

    .phd-data-visual {
        width: 100%;
        height: 440px;
        margin-top: 40px;

    }


    .phd-red-corner {
        width: 260px;
        height: 260px;
        top: -30px;
        right: -120px;

    }


    .phd-image-frame {
        top: 30px;
        right: 0;
        width: 94%;
        height: 380px;
        border-radius:
            100px
            20px
            20px
            100px;

    }


    .phd-floating-card {
        right: 5px;
        top: 75px;
        min-width: 205px;
        padding: 14px;

    }


    .floating-card-icon {
        width: 40px;
        height: 40px;

    }


    .phd-floating-card strong {
        font-size: 12px;

    }


    .phd-floating-card span {
        font-size: 10px;

    }


    /* SERVICE STRIP */

    .phd-service-strip {
        display: block;
        margin-top: 10px;
        padding: 15px 20px;

    }


    .phd-service-item {

        padding: 12px 0;

    }

    .service-strip-line {

        width: 100%;
        height: 1px;
        margin: 0;

    }

}

.phd-service-strip {

    position: relative;

    z-index: 10;

    display: flex;

    align-items: center;

    margin-top: -5px;

    padding: 24px 35px;

    background: #fff;

    border-radius: 14px;

    border: 1px solid var(--line);

    box-shadow:
        0 15px 40px rgba(18,23,43,.07);

}


.phd-service-item {

    display: flex;

    align-items: center;

    gap: 14px;

    flex: 1;

}


.service-icon {

    width: 47px;
    height: 47px;
    display: flex; 
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--red);
    background: var(--red-tint);
    border-radius: 50%;
    font-size: 18px;

}

.phd-service-item strong {
    display: block;
    color: var(--ink);
    font-size: 16px;

} 

.phd-service-item span {
    display: block;
    margin-top: 3px;
    color: var(--slate);
    font-size: 14px;

} 

.service-strip-line {
 
    width: 1px;
    height: 45px;
    margin: 0 25px;
    background: var(--line);

}

/* ================================
   WEB AUDIT SECTION
================================ */

.web-audit-section {
    position: relative;
    padding: 60px 0;
    background: var(--paper); 
    overflow: hidden;
}

/* ================================
   HEADER
================================ */

.web-audit-header {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 800px;
    margin: 0 auto 55px;
}


.web-audit-header h2 {
    color: var(--ink);
    font-size: 45px;
    line-height: 1.2;
    font-weight: 700;
    margin: 0;
}

.web-audit-header h2 span{
    color: var(--red); 
}


/* ================================
   MAIN CARD
================================ */

.web-audit-card {
    position: relative;
    z-index: 2;
    max-width: 1120px;
    min-height: 440px;
    margin: auto;
    display: grid;
    grid-template-columns: 38% 62%;
    background: var(--paper);
    border: 1px solid var(--line);
    box-shadow: 0 25px 60px rgba(18, 23, 43, .08);
    overflow: hidden;
}

/* ================================
   LEFT VISUAL
================================ */

.web-audit-visual {
    position: relative;
    padding: 45px;
    background: var(--ink);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}

.web-audit-visual::before {
    content: "";
    position: absolute;
    width: 330px;
    height: 330px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 50%;
    top: -120px;
    right: -120px;
}

.web-audit-visual::after {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    border: 1px solid rgba(225,30,51,.35);
    border-radius: 50%;
    bottom: -130px;
    left: -90px;
}

/* Number */

.audit-circle {
    position: relative;
    z-index: 2;
    width: 82px;
    height: 82px;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.audit-circle::before {
    content: "";
    position: absolute;
    width: 62px;
    height: 62px;
    background: var(--red);
    border-radius: 50%;
}

.audit-circle span {
    position: relative;
    z-index: 2;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
}

/* Visual Content */

.audit-visual-content {
    position: relative;
    z-index: 2;
    max-width: 300px;
}

.audit-visual-content span {
    display: block;
    color: var(--red);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 14px;
}

.audit-visual-content h3 {
    color: #fff;
    font-size: 40px;
    line-height: 1.35;
    font-weight: 600;
    margin: 0;
}

/* Pattern */

.audit-pattern {
    position: absolute;
    right: 35px;
    bottom: 35px;
    display: grid;
    grid-template-columns: repeat(4, 5px);
    gap: 7px;
    opacity: .5;
}

.audit-pattern span {
    width: 5px;
    height: 5px;
    background: var(--red);
    border-radius: 50%;
}

/* ================================
   RIGHT CONTENT
================================ */

.web-audit-body {
    padding: 55px 60px;
}

.audit-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--red);
    background: var(--red-tint);
    padding: 9px 14px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 25px;
}

.audit-tag i {
    font-size: 14px;
}

.web-audit-body p {
    color: var(--slate);
    font-size: 16px;
    line-height: 1.85;
    margin: 0 0 15px;
    max-width: 700px;
}

/* ================================
   FEATURES
================================ */

.audit-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    border-top: 1px solid var(--line);
    margin-top: 30px;
    padding-top: 28px;
}

.audit-feature {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.audit-feature-icon {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--red-tint);
    color: var(--red);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.audit-feature strong {
    display: block;
    color: var(--ink);
    font-size: 16px;
    margin-bottom: 5px;
}

.audit-feature span {
    display: block;
    color: var(--slate);
    font-size: 14px;
    line-height: 1.5;
}

/* ================================
   TABLET
================================ */

@media (max-width: 991px) {

    .web-audit-section {
        padding: 40px 0;
    }

    .web-audit-header h2 {
        font-size: 34px;
    }

    .web-audit-card {
        grid-template-columns: 1fr;
    }

    .web-audit-visual {
        min-height: 280px;
    }

    .web-audit-body {
        padding: 40px;
    }

    .audit-features {
        grid-template-columns: 1fr;
    }

}

/* ================================
   MOBILE
================================ */

@media (max-width: 767px) {

    .web-audit-section {
        padding: 40px 0;
    }

    .web-audit-header {
        margin-bottom: 35px;
    }

    .web-audit-header h2 {
        font-size: 28px;
    }

    .web-audit-visual {
        min-height: 270px;
        padding: 30px;
    }

    .audit-visual-content h3 {
        font-size: 23px;
    }

    .web-audit-body {
        padding: 30px 25px;
    }

    .web-audit-body p {
        font-size: 15px;
        line-height: 1.75;
    }

    .audit-features {
        margin-top: 25px;
        padding-top: 22px;
        gap: 18px;
    }
 
} 


  /* Web Presence Audit - Help Section */
  .audit-help-section {
    position: relative;
    padding: 60px 0;
    background: var(--paper);
    overflow: hidden;
  }

  .audit-help-row {
    display: flex;
    align-items: center;
    gap: 70px;
  }

  /* Image */
  .audit-visual-col {
    width: 50%;
  }

  .audit-visual {
    position: relative;
    padding: 18px;
  }

  .audit-visual::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 78%;
    height: 78%;
    background: var(--red-tint);
    border-radius: 24px;
    z-index: -1;
  }

  .audit-visual::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 85px;
    height: 85px;
    border-right: 3px solid var(--red);
    border-bottom: 3px solid var(--red);
    border-radius: 0 0 15px 0;
  }

  .audit-visual img {
    display: block;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 15px;
    box-shadow: 0 18px 45px rgba(18, 23, 43, 0.09);
  }

  /* Content */
  .audit-content-col {
    width: 50%;
  }

  .audit-content {
    max-width: 570px;
  }

  .audit-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 17px;
    color: var(--red-dark);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
  }

  .audit-eyebrow::before {
    content: "";
    width: 28px;
    height: 2px;
    background: var(--red);
  }

  .audit-content h2 {
    margin: 0 0 22px; 
    color: var(--ink); 
    font-size: 45px; 
    line-height: 1.18; 
    font-weight: 700;  
    letter-spacing: -1px; 
  }

  .audit-content h2 span {
    color: var(--red);
  }

  .audit-content p {
    margin: 0;
    color: var(--slate);
    font-size: 16px;
    line-height: 1.9;
  }

  /* Small bottom indicator */
  .audit-highlight {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
    color: var(--ink);
    font-size: 16px;
    font-weight: 600;
  }

  .audit-highlight-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--red-tint);
    color: var(--red);
    border-radius: 10px;
    font-size: 15px;
  }

  /* Tablet */
  @media (max-width: 991px) {
    .audit-help-section {
      padding: 50px 0;
    }

    .audit-help-row {
      gap: 40px;
    }

    .audit-content h2 {
      font-size: 34px;
    }

    .audit-content p {
      font-size: 15px;
    }
  }

  /* Mobile */
  @media (max-width: 767px) {
    .audit-help-section {
      padding: 60px 0;
    }

    .audit-help-row {
      display: block;
    }

    .audit-visual-col,
    .audit-content-col {
      width: 100%;
    }

    .audit-visual {
      margin-bottom: 45px;
    }

    .audit-content {
      max-width: 100%;
    }

    .audit-content h2 {
      font-size: 30px;
      letter-spacing: -.5px;
    }

    .audit-content p {
      font-size: 15px;
      line-height: 1.8;
    }

    .audit-visual img {
      border-radius: 16px;
    }
  }
  
  /* ==========================================
   WEB PRESENCE AUDIT
   WHY SECTION
========================================== */

.audit-why-modern {
    position: relative;
    padding: 60px 0;
    background: var(--canvas) !important; 
    overflow: hidden; 
}


/* ==========================================
   HEADER
========================================== */

.audit-why-header {  
    position: relative;
    z-index: 2;
    margin-bottom: 25px;
} 
 

.audit-why-heading-wrap {
    display: flex;
    align-items: flex-start;
    gap: 28px;
}

.audit-why-heading-wrap h2 {
    margin: 0;
    max-width: 750px;
    color: var(--ink, #12172b);
    font-size: 45px;
}

.audit-why-heading-wrap h2 em {
    color: var(--red, #e11e33);
    font-style: normal;
}


/* ==========================================
   MAIN CONTENT
========================================== */

.audit-why-main {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: 40% 60%;

    border-top: 1px solid var(--line, #eceef2);
    border-bottom: 1px solid var(--line, #eceef2);
}


/* ==========================================
   LEFT STATEMENT
========================================== */

.audit-why-statement {
    position: relative;

    padding: 60px 55px 60px 0;

    border-right: 1px solid var(--line, #eceef2);
}

.audit-why-quote {
    width: 45px;
    height: 45px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 28px;

    background: var(--red-tint, #fdecee);
    color: var(--red, #e11e33);

    border-radius: 50%;

    font-size: 15px;
}

.audit-why-statement h3 {
    margin: 0;
    max-width: 400px; 
    color: var(--ink);
    font-size: 38px;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -0.8px;
}

.audit-why-statement h3 span {
    display: block;
    color: var(--red);
}

.audit-why-line {
    width: 55px;
    height: 3px;

    margin: 28px 0 24px;

    background: var(--red, #e11e33);
}

.audit-why-statement p {
    max-width: 390px;
    margin: 0;
    color: var(--slate, #5c6675);
    font-size: 16px;
    line-height: 1.8;
}


/* ==========================================
   RIGHT DETAILS
========================================== */

.audit-why-details {
    padding: 15px 0 15px 55px;
}

.audit-detail-item {
    display: grid;
    grid-template-columns: 55px 1fr;
    gap: 20px;

    padding: 30px 0;

    border-bottom: 1px solid var(--line, #eceef2);
}

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

.audit-detail-number {
    color: var(--red);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 1px;
    padding-top: 4px;
}

.audit-detail-content h4 {
    margin: 0 0 12px;
    color: var(--ink, #12172b);
    font-size: 20px;
    font-weight: 700;
}

.audit-detail-content p {
    max-width: 620px; 
    margin: 0; 
    color: var(--slate); 
    font-size: 16px; 
    line-height: 1.8;
}

/* ==========================================
   TABLET
========================================== */

@media (max-width: 991px) {

    .audit-why-modern {
        padding: 40px 0;
    }

    .audit-why-heading-wrap h2 {
        font-size: 44px;
    }

    .audit-why-main {
        grid-template-columns: 1fr;
    }

    .audit-why-statement {
        padding: 45px 0;
        border-right: none;
        border-bottom: 1px solid var(--line, #eceef2);
    }

    .audit-why-details {
        padding: 15px 0;
    }

}


/* ==========================================
   MOBILE
========================================== */

@media (max-width: 767px) {

    .audit-why-modern {
        padding: 40px 0; 
    }

    .audit-why-header {
        margin-bottom: 30px;
    }

    .audit-why-heading-wrap {
        gap: 15px;
    }

    .audit-why-heading-wrap h2 {
        font-size: 34px;
        letter-spacing: -1px;
    }

    .audit-why-statement {
        padding: 35px 0;
    }

    .audit-why-statement h3 {
        font-size: 27px;
    }

    .audit-why-details {
        padding: 5px 0;
    }

    .audit-detail-item {
        grid-template-columns: 40px 1fr;
        gap: 12px;
        padding: 25px 0;
    }

    .audit-detail-content h4 {
        font-size: 16px;
    }

    .audit-detail-content p {
        font-size: 14px;
    }

}


/* ==========================================
   SMALL MOBILE
========================================== */

@media (max-width: 480px) {

    .audit-why-heading-wrap h2 {
        font-size: 29px;
    }

    .audit-why-label {
        font-size: 9px;
        letter-spacing: 1.8px;
    }

    .audit-why-statement h3 {
        font-size: 24px;
    }

    .audit-bottom-text strong {
        font-size: 13px;
        line-height: 1.5;
    }

} 


/* =========================================================
   YOUR MAIN THEME
========================================================= */

.web-reputation-modern {
    position: relative;
    overflow: hidden; 
    padding: 60px 0 0;
    background: var(--paper);
}



/* =========================================================
   BACKGROUND DOTS
========================================================= */

.web-reputation-dots {

    position: absolute;

    width: 100px;
    height: 75px;

    opacity: .55;

    pointer-events: none;

    background-image: radial-gradient(
        rgba(225, 30, 51, .28) 1.5px,
        transparent 1.5px
    );

    background-size: 20px 20px;
}


.reputation-dots-top {

    top: 35px;

    left: 44%;
}


.reputation-dots-bottom {

    left: -5px;

    bottom: 30px;
}



/* =========================================================
   MAIN LAYOUT
========================================================= */

.web-reputation-layout {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns: 48% 52%;

    min-height: 720px;
}



/* =========================================================
   LEFT CONTENT
========================================================= */

.web-reputation-content {

    position: relative;

    z-index: 5;

    padding: 35px 35px 70px 0;
}



/* =========================================================
   MAIN HEADING
========================================================= */

.web-reputation-content h1 {

    max-width: 650px;  
    margin: 0 0 20px; 
    color: var(--ink); 
    font-size: 45px;
    font-weight: 700;
}


.web-reputation-content h1 span {
    display: block;
    color: var(--red);
}


/* =========================================================
   DESCRIPTION
========================================================= */

.reputation-description {
    max-width: 650px;
}


.reputation-description p {
    margin: 0 0 18px;
    color: var(--slate);
    font-size: 16px;
    line-height: 1.75;
}


.reputation-description p:last-child {
    margin-bottom: 0;
}



/* =========================================================
   FEATURE CARDS
========================================================= */

.reputation-methods {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    margin-top: 30px;

    border: 1px solid var(--line);

    border-radius: 14px;

    background: var(--paper);

    box-shadow: 0 15px 40px rgba(18, 23, 43, .05);

    overflow: hidden;
}


.reputation-method {

    position: relative;

    min-height: 160px;

    padding: 23px 20px;

    background: var(--paper);

    transition: all .3s ease;
}


.reputation-method:hover {

    background: var(--canvas);

    transform: translateY(-3px);
}


.reputation-method + .reputation-method {

    border-left: 1px solid var(--line);
}



/* =========================================================
   FEATURE ICON
========================================================= */

.reputation-method-icon {

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 14px;

    color: var(--red);

    background: var(--red-tint);

    border: 1px solid rgba(225, 30, 51, .25);

    border-radius: 50%;

    font-size: 15px;

    transition: all .3s ease;
}


.reputation-method:hover .reputation-method-icon {

    color: #fff;

    background: var(--red);

    border-color: var(--red);

    transform: scale(1.05);
}



/* =========================================================
   FEATURE TITLE
========================================================= */

.reputation-method h3 {

    margin: 0 0 7px;

    color: var(--ink);

    font-size: 16px;

    line-height: 1.3;

    font-weight: 700;
}



/* =========================================================
   FEATURE TEXT
========================================================= */

.reputation-method p {

    margin: 0;
    color: var(--slate);
    font-size: 14px;
    line-height: 1.6;
}




/* =========================================================
   RIGHT VISUAL
========================================================= */

.web-reputation-visual {

    position: relative;

    min-height: 720px;
}



/* =========================================================
   CIRCULAR IMAGE FRAME
========================================================= */

.reputation-image-frame {

    position: absolute;
    top: -25px;
    right: -35px;
    width: 510px;
    height: 510px;
    padding: 9px;
    background: var(--paper);
    border: 10px solid var(--red);
    border-radius: 50%;
    box-shadow:
        0 0 0 8px rgba(225, 30, 51, .13),
        0 25px 55px rgba(18, 23, 43, .13);
    overflow: hidden;
}


.reputation-image-frame::before {

    content: "";
    position: absolute;
    inset: -22px;
    border: 1px dashed rgba(225, 30, 51, .22);
    border-radius: 50%;
    pointer-events: none;
}


.reputation-image-circle {

    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 50%;
}


.reputation-image-circle img {

    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .7s ease;
}


.reputation-image-frame:hover img {
    transform: scale(1.05);
}



/* =========================================================
   FLOATING BADGE
========================================================= */

.reputation-floating-badge {

    position: absolute;
    left: 40px; 
    top: 245px;
    z-index: 10;
    width: 170px; 
    height: 170px; 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 18px;
    text-align: center;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 50%;
    box-shadow:
        0 15px 35px rgba(18, 23, 43, .14),
        0 0 0 7px rgba(255, 255, 255, .8);
}


.reputation-badge-icon {

    width: 40px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 10px;

    color: var(--red);

    background: var(--red-tint);

    border-radius: 50%;

    font-size: 18px;
}


.reputation-floating-badge strong {
    color: var(--ink);
    font-size: 14px;
    line-height: 1.45;
}



/* =========================================================
   DARK BOTTOM PANEL
========================================================= */

.reputation-visual-bottom {
    position: absolute;
    right: -12rem;
    bottom: 16rem;
    width: 540px;
    min-height: 210px;
    padding: 55px 60px 40px 190px;
    background: var(--ink);
    border-radius: 130px 0 0 0;
    overflow: hidden;
    z-index: 3;
}


/* =========================================================
   RED CURVED ELEMENT
========================================================= */

.reputation-visual-bottom::before {

    content: "";

    position: absolute;

    left: -35px;

    top: -120px;

    width: 150px;

    height: 390px;

    border-right: 10px solid var(--red);

    border-radius: 50%;
}



/* =========================================================
   QUOTE SYMBOL
========================================================= */

.reputation-bottom-symbol {

    margin-bottom: 5px;

    color: var(--red);

    font-size: 45px;

    line-height: .7;

    font-weight: 700;
}



/* =========================================================
   QUOTE TEXT
========================================================= */

.reputation-visual-bottom p {

    max-width: 300px;
    margin: 0;
    color: #fff;
    font-size: 18px;
    line-height: 1.6;
}



/* =========================================================
   BOTTOM RED LINE
========================================================= */

.reputation-bottom-line {

    width: 65px;

    height: 4px;

    margin-top: 18px;

    background: var(--red);

    border-radius: 10px;
}



/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1199px) {

    .web-reputation-layout {

        grid-template-columns: 50% 50%;
    }


    .web-reputation-content h1 {

        font-size: 46px;
    }


    .reputation-image-frame {

        width: 460px;

        height: 460px;

        right: -50px;
    }


    .reputation-floating-badge {

        left: -5px;

        top: 235px;

        width: 135px;

        height: 135px;
    }


    .reputation-visual-bottom {

        width: 500px;

        right: -50px;

        padding-left: 165px;
    }

}



/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .web-reputation-modern {
        padding-top: 70px;
    }


    .web-reputation-layout {

        grid-template-columns: 1fr;

        min-height: auto;
    }


    .web-reputation-content {

        padding: 0 0 50px;
    }


    .web-reputation-content h1 {

        font-size: 48px;
    }


    .reputation-description {

        max-width: 800px;
    }


    .web-reputation-visual {

        min-height: 610px;

        margin-top: 10px;
    }


    .reputation-image-frame {

        top: 0;

        right: 50%;

        transform: translateX(50%);

        width: 500px;

        height: 500px;
    }


    .reputation-floating-badge {

        left: calc(50% - 285px);

        top: 235px;
    }


    .reputation-visual-bottom {

        right: 50%;

        transform: translateX(50%);

        width: 500px;

        min-height: 200px;
    }

}



/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .web-reputation-modern {

        padding: 55px 0 0;
    }


    .web-reputation-dots {

        display: none;
    }



    .web-reputation-content h1 {

        font-size: 38px;

        letter-spacing: -1.2px;
    }


    .reputation-description p {
        font-size: 14px;
        line-height: 1.75;
    }



    /* Feature Cards */

    .reputation-methods {

        grid-template-columns: 1fr;

        border-radius: 12px;
    }


    .reputation-method {

        min-height: auto;

        padding: 18px;
    }


    .reputation-method + .reputation-method {

        border-left: none;

        border-top: 1px solid var(--line);
    }


    .reputation-method-icon {

        display: inline-flex;

        margin-right: 8px;

        margin-bottom: 0;

        vertical-align: middle;
    }


    .reputation-method h3 {

        display: inline-block;
        vertical-align: middle;
    }


    .reputation-method p {
        margin-top: 10px;
    }


    .reputation-quote-btn {
        width: 100%;
    }


    /* Visual */

    .web-reputation-visual {
        min-height: 500px;
    }


    .reputation-image-frame {
        width: 390px;
        height: 390px;
        border-width: 8px;
    }


    .reputation-floating-badge {
        width: 120px;
        height: 120px;
        left: calc(50% - 220px);
        top: 180px;
        padding: 12px;
    }

    .reputation-badge-icon {
        width: 32px;
        height: 32px;
        margin-bottom: 6px;
        font-size: 16px;
    }

    .reputation-floating-badge strong {
        font-size: 9px;
    }

    /* Bottom Panel */

    .reputation-visual-bottom {

        width: 100%;
        right: 0;
        transform: none;
        min-height: 165px;
        padding: 42px 25px 30px 135px;
        border-radius: 90px 0 0 0;
    }


    .reputation-visual-bottom::before {

        left: -65px;
    }


    .reputation-visual-bottom p {

        font-size: 13px;
        line-height: 1.55;
    }

}



/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .web-reputation-content h1 {
        font-size: 32px;
    }


    .reputation-description p {
        font-size: 13.5px;
    }


    .reputation-quote-btn {

        width: 100%;
        justify-content: space-between;
    }


    .web-reputation-visual {
        min-height: 425px;
    }


    .reputation-image-frame {

        width: 295px;
        height: 295px;
        top: 10px;
        border-width: 7px;
    }


    .reputation-floating-badge {

        width: 100px;
        height: 100px;
        left: 5px;
        top: 140px;
    }


    .reputation-badge-icon {
        width: 28px;
        height: 28px;
        margin-bottom: 5px;
        font-size: 13px;
    }


    .reputation-floating-badge strong {
        font-size: 8px;
    }


    .reputation-visual-bottom {

        min-height: 140px;
        padding: 32px 18px 22px 95px;
        border-radius: 65px 0 0 0;
    }


    .reputation-bottom-symbol {
        font-size: 35px;
    }


    .reputation-visual-bottom p {

        font-size: 11px;
        line-height: 1.5;
    }


    .reputation-bottom-line {

        width: 50px;
        height: 3px;
        margin-top: 12px;
    }
}


.reputation-partner-section {
    position: relative;
    overflow: hidden;
    padding: 60px 0;
    background: var(--canvas);
}


/* =========================================================
   MAIN WRAPPER
========================================================= */

.reputation-partner-wrapper {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns: 45% 55%;

    align-items: center;

    max-width: 1180px;

    margin: 0 auto;
}



/* =========================================================
   LEFT VISUAL
========================================================= */

.reputation-partner-visual {

    position: relative;
    min-height: 570px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =========================================================
   IMAGE BOX
========================================================= */

.reputation-image-box {

    position: relative;
    padding: 12px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: 
        0 25px 60px rgba(18, 23, 43, .10); 

    overflow: visible; 
    z-index: 2; 
    transition: transform .4s ease;
    height: 100%; 
    width: 100%; 
}


.reputation-image-box:hover {

    transform: rotate(0deg) translateY(-5px);
}


.reputation-image-box img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    border-radius: 12px;
}



/* =========================================================
   IMAGE RED ACCENT
========================================================= */

.image-accent {

    position: absolute;

    width: 75px;

    height: 75px;

    right: -22px;

    top: -22px;

    border-top: 5px solid var(--red);

    border-right: 5px solid var(--red);

    border-radius: 0 15px 0 0;
}


.image-accent::after {

    content: "";

    position: absolute;

    width: 30px;

    height: 5px;

    background: var(--red);

    right: 0;

    bottom: -35px;

    transform: rotate(90deg);

    transform-origin: right center;
}



/* =========================================================
   FLOATING MINI CARD
========================================================= */

.reputation-mini-card {

    position: absolute;

    right: 5px;

    bottom: 45px;

    z-index: 10;

    display: flex;

    align-items: center;

    gap: 12px;

    min-width: 175px;

    padding: 15px 18px;

    background: var(--paper);

    border: 1px solid var(--line);

    border-radius: 10px;

    box-shadow: 0 15px 35px rgba(18, 23, 43, .12);
}


.mini-card-icon {

    width: 38px;

    height: 38px;

    flex: 0 0 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--red);

    background: var(--red-tint);

    border-radius: 50%;

    font-size: 14px;
}


.reputation-mini-card strong {

    display: block;

    color: var(--ink);

    font-size: 14px;

    line-height: 1.3;
}


.reputation-mini-card span:not(.mini-card-icon) {

    display: block;
    margin-top: 2px;
    color: var(--slate-light);
    font-size: 12px;
    line-height: 1.3;
}



/* =========================================================
   RIGHT CONTENT
========================================================= */

.reputation-partner-content {
    padding: 20px 0 20px 65px;
}


/* ========================================================= 
   HEADING 
========================================================= */ 

.reputation-partner-content h2 { 
    max-width: 650px;
    margin: 0 0 20px;
    color: var(--ink);
    font-size: 45px;
    font-weight: 700;
}


.reputation-partner-content h2 span {
    display: block;
    margin-top: 7px;
    color: var(--red);
}


/* =========================================================
   CONTENT
========================================================= */

.reputation-partner-content p {
    max-width: 650px;
    margin: 0 0 18px;
    color: var(--slate);
    font-size: 16px;
    line-height: 1.8;
}


.reputation-partner-content .reputation-lead {
    color: #424b5b;
}



/* =========================================================
   HIGHLIGHT BOX
========================================================= */

.reputation-highlight {
    display: flex; 
    align-items: center; 
    gap: 15px;
    max-width: 570px;
    margin-top: 30px;
    padding: 18px 20px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-left: 4px solid var(--red);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(18, 23, 43, .04);
}


.highlight-icon {

    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--red-tint);
    color: var(--red);
    border-radius: 50%;
    font-size: 13px;
}


.highlight-content strong {

    display: block;
    margin-bottom: 3px;
    color: var(--ink);
    font-size: 14px;
    line-height: 1.4;
}


.highlight-content span {

    display: block;
    color: var(--red);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .5px;
}



/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1199px) {

    .reputation-partner-wrapper {
        grid-template-columns: 45% 55%;
    }

    .reputation-partner-content {
        padding-left: 45px;
    }


    .reputation-partner-content h2 {
        font-size: 38px;
    }

}



/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .reputation-partner-section {
        padding: 75px 0;
    }


    .reputation-partner-wrapper {

        grid-template-columns: 1fr;
        gap: 55px;
    }


    .reputation-partner-visual {
        min-height: 500px;
        max-width: 600px;
        width: 100%;
        margin: 0 auto;
    }

    .reputation-partner-content {
        padding: 0;
        max-width: 760px;
        margin: 0 auto;
    }


    .reputation-partner-content h2 {
        font-size: 42px;
    }


    .visual-label {
        left: 20px;
        bottom: 55px;
    }


    .reputation-mini-card {
        right: 45px;
    }

}



/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .reputation-partner-section {
        padding: 60px 0;
    }


    .reputation-partner-wrapper {
        gap: 40px;
    }


    .reputation-partner-visual {
        min-height: 410px;
    }


    .visual-number {
        top: 0;
        left: 0;
        font-size: 80px;
    }


    .visual-label {
        display: none;
    }


    .reputation-mini-card {

        right: calc(50% - 170px);
        bottom: 10px;
        min-width: 155px;
        padding: 12px 14px;
    }


    .mini-card-icon {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }


    .reputation-partner-content h2 {
        font-size: 34px;
        letter-spacing: -1px;
    }


    .reputation-partner-content p {

        font-size: 14px;
        line-height: 1.75;
    }


    .reputation-highlight {
        margin-top: 25px;
    }

}



/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .reputation-partner-section {
        padding: 50px 0;
    }


    .reputation-partner-visual {
        min-height: 350px;
    }


    .reputation-image-box img {
        border-radius: 9px;
    }


    .image-accent {

        width: 55px;
        height: 55px;
        right: -15px;
        top: -15px;
        border-width: 4px;
    }


    .reputation-mini-card {
        right: 0;
        bottom: 0;
        min-width: 145px;
        padding: 10px 12px;
    }


    .reputation-mini-card strong {
        font-size: 11px;
    }


    .reputation-mini-card span:not(.mini-card-icon) {
        font-size: 9px;
    }


    .reputation-partner-content h2 {

        font-size: 29px;
        line-height: 1.2;
    }


    .reputation-section-label {

        font-size: 9px;
        letter-spacing: 1.5px;
    }


    .reputation-section-label span {
        width: 25px;
    }


    .reputation-highlight {

        padding: 14px;
        gap: 10px;
    }


    .highlight-content strong {
        font-size: 12px;
    }

}
/* ==========================================
   EXPERT TEAM SECTION
========================================== */

.expert-team-section {
    position: relative;
    padding: 60px 0;
    background: #fbfbfc;
    overflow: hidden;
}

/* Background decoration */
.expert-team-section::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    border: 1px solid rgba(225, 30, 51, 0.08);
    border-radius: 50%;
    left: -220px;
    top: 80px;
}

.expert-team-section::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    background-image: radial-gradient(
        rgba(225, 30, 51, 0.16) 1px,
        transparent 1px
    );
    background-size: 10px 10px;
    right: 30px;
    bottom: 50px;
    opacity: .45;
}

/* ==========================================
   MAIN WRAPPER
========================================== */

.expert-team-wrapper {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    align-items: center;
    gap: 85px;
}


/* ==========================================
   CONTENT
========================================== */

.expert-team-content {
    max-width: 650px;
}

.expert-team-content h2 {
    margin: 0 0 20px;
    color: #12172b;
    font-size: 45px;
    font-weight: 700;
}

.expert-team-content h2 span {
    color: #e11e33;
}


.expert-team-content > p {
    margin: 0 0 17px; 
    color: #5c6675; 
    font-size: 16px; 
    line-height: 1.85; 
}


/* ==========================================
   EXPERT POINTS
========================================== */

.expert-points {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 32px;
}

.expert-point {
    min-height: 145px;
    padding: 20px 16px;
    background: #ffffff;
    border: 1px solid #eceef2;
    transition: all .3s ease;
}

.expert-point:hover {
    border-color: rgba(225, 30, 51, .35);
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(18, 23, 43, .07);
}

.point-number {
    margin-bottom: 12px;
    color: #e11e33;
    font-size: 12px;
    font-weight: 700; 
    letter-spacing: 1px;
}

.expert-point h4 {
    margin: 0 0 7px;
    color: #12172b;
    font-size: 16px;
    font-weight: 700;
}

.expert-point p {
    margin: 0;
    color: var(--slate);  
    font-size: 14px; 
    line-height: 1.6; 
}


/* ==========================================
   VISUAL
========================================== */

.expert-team-visual {
    position: relative;
    padding: 20px 20px 45px 0;
}

.visual-frame {
    position: relative;
    overflow: visible;
}

.visual-frame::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 18px;
    left: 18px;
    border: 2px solid #e11e33;
    z-index: -1;
}

.visual-frame img {
    display: block;
    width: 100%;
    height: 520px;
    object-fit: cover;
    object-position: center;
    border-radius: 3px;
    position: relative;
    z-index: 1;
}

.visual-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(
        180deg,
        transparent 55%,
        rgba(18, 23, 43, .35) 100%
    );
    pointer-events: none;
}


/* ==========================================
   FLOATING BADGE
========================================== */

.expert-badge {
    position: absolute;
    left: -45px;
    bottom: 25px;
    z-index: 5;

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

    min-width: 245px;
    padding: 18px 20px;

    background: #ffffff;
    border-left: 4px solid #e11e33;
    box-shadow: 0 18px 45px rgba(18, 23, 43, .13);
}

.badge-icon {
    width: 43px;
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    color: #e11e33;
    background: #fdecee;
    border-radius: 50%;
    font-size: 16px;
}

.expert-badge strong {
    display: block;
    margin-bottom: 3px;
    color: var(--ink);
    font-size: 16px;
}

.expert-badge span {
    display: block;
    color: var(--slate);
    font-size: 14px;
    line-height: 1.5;
}


/* ==========================================
   NUMBER
========================================== */

.visual-number {
    position: absolute;
    right: -5px;
    bottom: -5px;

    color: rgba(225, 30, 51, .10);
    font-size: 110px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -6px;
}


/* ==========================================
   TABLET
========================================== */

@media (max-width: 991px) {

    .expert-team-section {
        padding: 75px 0;
    }

    .expert-team-wrapper {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .expert-team-content {
        max-width: 100%;
    }

    .expert-team-content h2 {
        font-size: 42px;
    }

    .expert-team-visual {
        max-width: 700px;
        width: 100%;
        margin: 0 auto;
    }

}


/* ==========================================
   MOBILE
========================================== */

@media (max-width: 767px) {

    .expert-team-section {
        padding: 60px 0;
    }

    .expert-team-wrapper {
        gap: 45px;
    }

    .expert-team-content h2 {
        font-size: 34px;
        letter-spacing: -1px;
    }

    .expert-team-content > p {
        font-size: 14px;
        line-height: 1.75;
    }

    .expert-points {
        grid-template-columns: 1fr;
    }

    .expert-point {
        min-height: auto;
    }

    .expert-team-visual {
        padding: 10px 12px 45px 0;
    }

    .visual-frame img {
        height: 380px;
    }

    .expert-badge {
        left: 10px;
        bottom: 20px;
        min-width: 220px;
    }

    .visual-number {
        font-size: 75px;
    }

}


/* ==========================================
   SMALL MOBILE
========================================== */

@media (max-width: 480px) {

    .expert-team-content h2 {
        font-size: 30px;
    }


    .visual-frame img {
        height: 320px;
    }

    .expert-badge {
        left: 5px;
        padding: 14px;
    } 

    .badge-icon {
        width: 38px;
        height: 38px;
    } 
 
} 


/* ==========================================
   OUR EXPERTISE
========================================== */

.expertise-section {
    position: relative;
    padding: 60px 0;
    background: #fbfbfc;
    overflow: hidden;
}

/* Background detail */
.expertise-section::before {
    content: "";
    position: absolute;
    width: 420px; 
    height: 420px; 
    left: -230px; 
    top: 80px;
    border: 1px solid rgba(225, 30, 51, 0.08);
    border-radius: 50%;
}

.expertise-section::after {
    content: ""; 
    position: absolute;
    width: 150px;
    height: 150px;
    right: 40px;
    top: 70px;
    background-image: radial-gradient(
        rgba(225, 30, 51, 0.16) 1px,
        transparent 1px
    );
    background-size: 10px 10px;
    opacity: .5;
}

/* ==========================================
   MAIN GRID
========================================== */

.expertise-wrapper {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    align-items: center;
    gap: 85px;
}


/* ==========================================
   IMAGE AREA
========================================== */

.expertise-visual {
    position: relative;
}

.expertise-image-wrap {
    position: relative;
    z-index: 2;
    overflow: hidden;
    background: #fff;
    border-radius: 3px;
}


.expertise-image-wrap img {
    display: block;
    width: 100%;
    /*height: 520px;*/
    object-fit: cover;
    object-position: center;
}

/* Red offset frame */
.expertise-image-wrap::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 18px;
    top: 18px;
    border: 2px solid #e11e33;
    z-index: -1;
}


/* ==========================================
   LARGE NUMBER
========================================== */

.expertise-number {
    position: absolute;
    right: -5px;
    bottom: 0;
    color: rgba(225, 30, 51, .10);
    font-size: 115px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -7px;
    z-index: 1;
}


/* ==========================================
   FLOATING BADGE
========================================== */

.expertise-badge {
    position: absolute;
    z-index: 5;
    left: -35px;
    bottom: 25px;

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

    min-width: 245px;
    padding: 17px 20px;

    background: #ffffff;
    border-left: 4px solid #e11e33;
    box-shadow: 0 18px 45px rgba(18, 23, 43, .14);
}

.badge-icon {
    width: 43px;
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    color: #e11e33;
    background: #fdecee;
    border-radius: 50%;
    font-size: 16px;
}

.expertise-badge strong {
    display: block;
    color: var(--ink);
    font-size: 15px;
    margin-bottom: 3px;
}

.expertise-badge small {
    display: block;
    color: var(--slate);
    font-size: 12px;
}


/* ==========================================
   CONTENT
========================================== */

.expertise-content {
    max-width: 680px;
}

.expertise-label {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 17px;

    color: #e11e33;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
}

.expertise-label span {
    width: 32px;
    height: 2px;
    background: #e11e33;
}

.expertise-content h2 {
    margin: 0 0 20px; 
    color: #12172b; 
    font-size: 45px; 
    font-weight: 700;  
} 

.expertise-content h2 strong {
    color: #e11e33;
    font-weight: 700;
}

.expertise-content > p {
    margin: 0 0 16px;
    color: #5c6675;
    font-size: 16px;
    line-height: 1.85;
}


/* ==========================================
   EXPERTISE POINTS
========================================== */

.expertise-points {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 30px 0 0;
}

.expertise-point {
    padding: 18px 15px;
    background: #ffffff;
    border: 1px solid #eceef2;
    transition: all .3s ease;
}

.expertise-point:hover {
    transform: translateY(-4px);
    border-color: rgba(225, 30, 51, .35);
    box-shadow: 0 12px 30px rgba(18, 23, 43, .07);
}

.expertise-point > span {
    display: block;
    margin-bottom: 9px;
    color: #e11e33;
    font-size: 11px;
    font-weight: 700;
}

.expertise-point h4 {
    margin: 0 0 5px;
    color: #12172b;
    font-size: 16px;
    font-weight: 700;
}

.expertise-point p {
    margin: 0;
    color: var(--slate); 
    font-size: 14px;
    line-height: 1.55;
}


/* ==========================================
   TABLET
========================================== */

@media (max-width: 991px) {

    .expertise-section {
        padding: 45px 0;
    }
    .expertise-wrapper {
        grid-template-columns: 1fr;
        gap: 60px;
    }
    .expertise-content {
        max-width: 100%;
    }
    .expertise-content h2 {
        font-size: 40px;
    }
    .expertise-visual {
        max-width: 700px;
        width: 100%;
        margin: auto;
    }
}


/* ==========================================
   MOBILE
========================================== */

@media (max-width: 767px) {

    .expertise-section {
        padding: 50px 0;
    }
    .expertise-wrapper {
        gap: 45px;
    }
    .expertise-content h2 {
        font-size: 33px;
        letter-spacing: -1px;
    }
    .expertise-content > p {
        font-size: 14px;
        line-height: 1.75;
    }
    .expertise-points {
        grid-template-columns: 1fr;
    }
    .expertise-point {
        padding: 16px;
    }
    .expertise-visual {
        padding: 10px 12px 50px 0;
    }
    .expertise-image-wrap img {
        height: 390px;
    }
    .expertise-badge {
        left: 8px;
        bottom: 20px;
    }
    .expertise-number {
        font-size: 80px;
    }
}


/* ==========================================
   SMALL MOBILE
========================================== */

@media (max-width: 480px) {

    .expertise-content h2 {
        font-size: 29px;
    }
    .expertise-label {
        font-size: 9px;
        letter-spacing: 1.5px;
    }
    .expertise-image-wrap img {
        height: 320px;
    }
    .expertise-badge {
        min-width: 215px;
        padding: 14px;
    }
    .expertise-cta {
        width: 100%;
        justify-content: space-between;
    }
}

/* ==========================================
   WEB STRATEGIC PLANNING
========================================== */

.web-strategy-section {
    position: relative;
    padding: 60px 0;
    background: #fbfbfc;
    overflow: hidden;
}

.web-strategy-section::before {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    left: -300px;
    top: -100px;
    border: 1px solid rgba(225, 30, 51, .07);
    border-radius: 50%;
}

.web-strategy-section::after {
    content: "";
    position: absolute;
    width: 170px;
    height: 170px;
    right: 40px;
    bottom: 40px;
    background-image: radial-gradient(
        rgba(225, 30, 51, .14) 1px,
        transparent 1px
    );
    background-size: 10px 10px;
    opacity: .55;
}

/* ==========================================
   MAIN LAYOUT
========================================== */

.web-strategy-layout {
    display: grid;
    grid-template-columns: .7fr 1.4fr;
    gap: 30px; 
    align-items: stretch;
}


/* ==========================================
   LEFT HEADING
========================================== */

.web-strategy-heading {
    position: relative;
    padding: 20px 0;
}

.strategy-number {
    margin-bottom: 8px;

    color: rgba(225, 30, 51, .12);
    font-size: 95px;
    line-height: .8;
    font-weight: 800;
    letter-spacing: -6px;
}

.web-strategy-heading h2 {
    margin: 20px 0 0;
    color: #12172b;
    font-size: 45px;
    font-weight: 700;
}

.web-strategy-heading h2 strong {
    color: var(--red); 
    font-weight: 700;
}

.strategy-line {
    width: 55px;
    height: 3px;
    margin: 28px 0;
    background: #e11e33;
}

.strategy-intro {
    max-width: 350px;
    margin: 0;

    color: #5c6675;
    font-size: 16px;
    line-height: 1.75;
}


/* ==========================================
   RIGHT CONTENT
========================================== */

.web-strategy-content {
    position: relative;
    padding: 45px;
    background: #ffffff;
    border: 1px solid #eceef2;
    box-shadow: 0 20px 50px rgba(18, 23, 43, .05);
}

.strategy-content-top,
.strategy-content-bottom {
    position: relative;
}

.content-tag {
    display: inline-block;
    margin-bottom: 18px;
    color: #e11e33;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.8px;
}

.strategy-content-top p,
.strategy-content-bottom p {
    margin: 0;
    color: #5c6675;
    font-size: 16px;
    line-height: 1.9;
}

.strategy-divider {
    width: 100%;
    height: 1px;
    margin: 28px 0;

    background: #eceef2;
}


/* ==========================================
   ROADMAP
========================================== */

.strategy-roadmap {
    display: flex;
    align-items: center;

    margin-top: 38px;
    padding: 22px;

    background: #12172b;
}

.roadmap-item {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.roadmap-number {
    width: 35px;
    height: 35px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    color: #e11e33;
    background: #fdecee;

    font-size: 10px;
    font-weight: 700;
}

.roadmap-item strong {
    display: block;
    margin-bottom: 3px; 
    color: #ffffff; 
    font-size: 15px; 
}

.roadmap-item small {
    display: block; 
    color: #8a93a3;
    font-size: 13px;
    line-height: 1.4;
}

.roadmap-line {
    width: 25px;
    height: 1px;
    margin: 0 10px;

    background: rgba(255, 255, 255, .18);
}


/* ==========================================
   TABLET
========================================== */

@media (max-width: 991px) {

    .web-strategy-section {
        padding: 40px 0;
    }

    .web-strategy-layout {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .web-strategy-heading {
        padding-bottom: 0;
    }

    .web-strategy-heading h2 {
        font-size: 44px;
    }

    .strategy-intro {
        max-width: 600px;
    }

}


/* ==========================================
   MOBILE
========================================== */

@media (max-width: 767px) { 
    
    .web-strategy-section { 
        padding: 40px 0; 
    } 

    .web-strategy-heading h2 {
        font-size: 35px;
        letter-spacing: -1px;
    }
    .strategy-number {
        font-size: 75px;
    }
    .strategy-intro {
        font-size: 14px;
    }

    .web-strategy-content {
        padding: 30px 25px;
    }
    .strategy-content-top p,
    .strategy-content-bottom p {
        font-size: 14px;
        line-height: 1.75;
    }
    .strategy-roadmap {
        display: block;
        padding: 20px;
    }
    .roadmap-item {
        margin-bottom: 15px;
    }
    .roadmap-item:last-child {
        margin-bottom: 0;
    }
    .roadmap-line {
        display: none;
    }
}


/* ==========================================
   SMALL MOBILE
========================================== */

@media (max-width: 480px) {
    .web-strategy-heading h2 {
        font-size: 30px;
    }

    .strategy-label {
        font-size: 9px;
        letter-spacing: 1.5px;
    }

    .web-strategy-content {
        padding: 25px 20px;
    }

}

/* ==========================================
   DESK MARKET RESEARCH
========================================== */

.desk-market-section {
    position: relative;  
    padding: 60px 0; 
    background: #ffffff; 
    overflow: hidden; 
}

.desk-market-section::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    right: -250px;
    top: -180px;
    border: 1px solid rgba(225, 30, 51, .08);
    border-radius: 50%;
}

.desk-market-section::after {
    content: "";
    position: absolute;
    width: 130px;
    height: 130px;
    left: 30px;
    bottom: 40px;

    background-image: radial-gradient(
        rgba(225, 30, 51, .16) 1px,
        transparent 1px
    );

    background-size: 9px 9px;
    opacity: .45;
}

.desk-market-section .container {
    position: relative;
    z-index: 2;
}


/* ==========================================
   HEADER
========================================== */

.desk-market-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 50px;

    padding-bottom: 55px;
    border-bottom: 1px solid #eceef2;
}

.desk-market-title {
    max-width: 700px;
} 

.desk-market-title h2 { 
    margin: 0;
    color: var(--ink);  
    font-size: 45px;  
    font-weight: 700;
} 
 
.desk-market-title h2 span {
    display: block; 
    color: var(--red); 
} 

/* Header Note */

.desk-market-header-note {
    width: 250px;
    padding-left: 25px;
    border-left: 2px solid #e11e33;
}

.desk-market-header-note span {
    display: block;
    margin-bottom: 10px;
    color: #8a93a3;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.desk-market-header-note p {
    margin: 0; 
    color: var(--slate); 
    font-size: 16px;
    line-height: 1.65;
}


/* ==========================================
   FLOW
========================================== */

.desk-market-flow {
    display: grid;
    grid-template-columns: 1fr 45px 1fr 45px 1fr;
    align-items: stretch;

    padding: 60px 0 55px;
}


/* ==========================================
   STEP
========================================== */

.desk-market-step {
    display: flex;
    flex-direction: column;
}

.step-marker {
    width: 54px;
    height: 54px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 25px;

    background: #fdecee;
    border: 1px solid rgba(225, 30, 51, .15);
}

.step-marker span {
    color: #e11e33;
    font-size: 11px;
    font-weight: 700;
}

.step-marker.active {
    background: #e11e33;
    border-color: #e11e33;
}

.step-marker.active span {
    color: #ffffff;
}


/* Step Content */

.step-content {
    padding-right: 25px;
}

.step-content small {
    display: block;
    margin-bottom: 12px;

    color: #e11e33;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.step-content h3 {
    margin: 0 0 15px;

    color: #12172b;
    font-size: 23px;
    line-height: 1.3;
    font-weight: 600;
}

.step-content h3 strong {
    display: block;
    color: #e11e33;
    font-weight: 700;
}

.step-content p {
    margin: 0;
    color: var(--slate);
    font-size: 16px;
    line-height: 1.8;
}


/* ==========================================
   CONNECTORS
========================================== */

.desk-market-connector {
    position: relative;
    height: 100%;
}

/* ==========================================
   BOTTOM STATEMENT
========================================== */

.desk-market-bottom {
    position: relative;

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

    padding: 27px 30px;

    background: #12172b;
    overflow: hidden;
}

.desk-market-bottom::after {
    content: "";
    position: absolute;

    right: -40px;
    top: -100px;

    width: 220px;
    height: 220px;

    border: 1px solid rgba(255,255,255,.08);
    border-radius: 50%;
}

.bottom-icon {
    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    color: #e11e33;
    background: #fdecee;
    border-radius: 50%;
}

.bottom-text {
    position: relative;
    z-index: 2;
}

.bottom-text span {
    display: block;
    margin-bottom: 5px;

    color: #e11e33;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.bottom-text strong {
    display: block;

    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
}

.bottom-number {
    position: absolute;
    right: 25px;
    top: 3px;

    color: rgba(255,255,255,.05);
    font-size: 90px;
    line-height: 1;
    font-weight: 800;
} 

/* ==========================================
   TABLET
========================================== */

@media (max-width: 991px) {

    .desk-market-section {
        padding: 50px 0;
    }

    .desk-market-title h2 {
        font-size: 43px;
    }

    .desk-market-header {
        align-items: flex-start;
    }

    .desk-market-flow {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .desk-market-connector {
        display: none;
    }

    .desk-market-step {
        display: grid;
        grid-template-columns: 60px 1fr;
        gap: 20px;
    }

    .step-marker {
        margin-bottom: 0;
    }

    .step-content {
        padding-right: 0;
    }

}


/* ==========================================
   MOBILE
========================================== */

@media (max-width: 767px) {

    .desk-market-section {
        padding: 40px 0;
    }

    .desk-market-header {
        display: block;
        padding-bottom: 35px;
    }

    .desk-market-title h2 {
        font-size: 34px;
        letter-spacing: -1px;
    }

    .desk-market-header-note {
        width: auto;
        margin-top: 25px;
    }

    .desk-market-flow {
        padding: 40px 0;
        gap: 30px;
    }

    .desk-market-step {
        grid-template-columns: 48px 1fr;
        gap: 15px;
    }

    .step-marker {
        width: 48px;
        height: 48px;
    }

    .step-content h3 {
        font-size: 19px;
    }

    .step-content p {
        font-size: 13px;
    }

    .desk-market-bottom {
        padding: 22px 18px;
    }

    .bottom-text strong {
        font-size: 13px;
        line-height: 1.5;
    }

    .bottom-number {
        display: none;
    }

}


/* ==========================================
   SMALL MOBILE
========================================== */

@media (max-width: 480px) {

    .desk-market-title h2 {
        font-size: 29px;
    }
    .desk-market-label {
        font-size: 9px;
    } 
    .step-content h3 {
        font-size: 18px;
    } 
    .step-content p {
        font-size: 12px;
        line-height: 1.7;
    } 
} 


/* ==========================================
   DESK MARKET - WHY CHOOSE US
========================================== */

.desk-whychoose {
    position: relative; 
    padding: 60px 0; 
    background: var(--canvas);
    overflow: hidden;
}

/* ==========================================
   MAIN LAYOUT
========================================== */

.desk-whychoose-wrap {
    display: grid;
    grid-template-columns: 46% 54%;
    align-items: center;
}


/* ==========================================
   IMAGE
========================================== */

.desk-whychoose-image {
    position: relative;
    padding-right: 45px;
}

.desk-whychoose-image::before {
    content: "";
    position: absolute;
    width: 85%;
    height: 85%;
    left: -25px;
    top: 8%; 
    background: var(--red-tint);
    z-index: 0; 
} 

.desk-whychoose-image img {
    position: relative;
    z-index: 1;

    width: 100%;
    display: block;

    object-fit: cover;
}


/* ==========================================
   CONTENT
========================================== */

.desk-whychoose-content {
    position: relative;
    padding: 20px 0 20px 45px;
} 

/* Heading */ 
 
.desk-whychoose-content h2 {
    position: relative;
    margin: 0 0 25px; 
    color: var(--ink);
    font-size: 45px;
    font-weight: 700;
}

/* Paragraph */

.desk-whychoose-content p {
    margin: 0;
    color: var(--slate);
    font-size: 16px; 
    line-height: 1.9;
}


/* ==========================================
   RESPONSIVE
========================================== */

@media (max-width: 991px) {

    .desk-whychoose {
        padding: 70px 0;
    }

    .desk-whychoose-wrap {
        grid-template-columns: 1fr 1fr;
    }

    .desk-whychoose-image {
        padding-right: 25px;
    }

    .desk-whychoose-content {
        padding-left: 25px;
    }

    .desk-whychoose-content h2 {
        font-size: 38px;
    }

}


@media (max-width: 767px) {

    .desk-whychoose {
        padding: 60px 0;
    }

    .desk-whychoose-wrap {
        grid-template-columns: 1fr;
    }

    .desk-whychoose-image {
        padding-right: 20px;
        margin-bottom: 40px;
    }

    .desk-whychoose-content {
        padding: 0;
    }

    .desk-whychoose-content h2 {
        font-size: 34px;
        letter-spacing: -1px;
    }

    .desk-whychoose-content p {
        font-size: 13px;
        line-height: 1.8;
    }

}
 

@media (max-width: 480px) {

    .desk-whychoose-content h2 {
        font-size: 29px;
    }

    .desk-whychoose-image {
        padding-right: 10px;
    } 
}

.desk-whychoose-content h2 span {
    color: var(--red);
} 

.timeline { 
    padding: 60px 0;
} 

/* =========================================
   WHY CHOOSE US
========================================= */

.why-choose-section { 
    position: relative; 
    padding: 60px 0; 
    background: var(--paper); 
    overflow: hidden; 
} 

.why-choose-section::after {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    border: 1px solid rgba(225, 30, 51, 0.05);
    border-radius: 50%;
    right: -260px;
    bottom: -280px;
}


/* Main Layout */

.why-choose-layout {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 40px;
    align-items: center;
}


/* =========================================
   CONTENT
========================================= */

.why-choose-content-new {
    position: relative;
    z-index: 2;
    max-width: 650px;
}

.why-choose-content-new h2 {
    margin: 0 0 28px; 
    color: var(--ink); 
    font-size: 45px; 
    font-weight: 700; 
}

.why-choose-content-new h2 span {
    display: block;
    color: var(--red);
}

.why-choose-content-new p {
    margin: 0;
    color: var(--slate);
    font-size: 16px;
    line-height: 1.8;
}

/* =========================================
   VISUAL
========================================= */

.why-choose-visual {
    position: relative;
    min-height: 470px;
    padding: 30px 30px 30px 45px;
}

.visual-frame {
    position: relative;
    z-index: 2;
    padding: 28px;
    background: var(--paper); 
    border: 1px solid var(--line); 
} 

.visual-frame::before {
    content: "";
    position: absolute;
    top: 14px;
    left: 14px;
    width: 35px;
    height: 35px;
    border-top: 2px solid var(--red);
    border-left: 2px solid var(--red);
}

.visual-top-label {
    margin-bottom: 20px;
    padding-left: 4px;
    color: var(--red);
    font-size: 12px; 
    font-weight: 700;
    letter-spacing: 2px;
}

.visual-image {
    position: relative;
}

.visual-image img {
    display: block;
    width: 100%;
    height: 400px;
    transition: transform 0.5s ease;
}

.visual-frame:hover .visual-image img {
    transform: scale(1.025);
}


/* Decorative Element */

.visual-accent {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 115px;
    height: 115px;
    border-right: 2px solid var(--red);
    border-bottom: 2px solid var(--red);
    z-index: 1;
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 991px) {

    .why-choose-section {
        padding: 80px 0;
    }

    .why-choose-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .why-choose-content-new {
        max-width: 100%;
    }

    .why-choose-content-new h2 {
        font-size: 38px;
    }

    .why-choose-visual {
        max-width: 700px;
        width: 100%;
        margin: 0 auto;
    }
}


@media (max-width: 767px) {

    .why-choose-section {
        padding: 60px 0;
    }

    .why-choose-layout {
        gap: 40px;
    }

    .why-choose-content-new h2 {
        font-size: 31px;
        letter-spacing: -0.5px;
    }

    .why-choose-content-new p {
        font-size: 14px;
        line-height: 1.8;
    }

    .why-choose-visual {
        min-height: auto;
        padding: 25px 15px 25px 25px;
    }

    .visual-frame {
        padding: 20px;
    }

    .visual-accent {
        width: 75px;
        height: 75px;
    }
}

/* =========================================
   NEED WEB WIREFRAMING
========================================= */

.wireframe-need-section {
    position: relative;
    padding: 60px 0;
    background: var(--canvas);
    overflow: hidden;
}

.wireframe-need-section::before {
    content: "";
    position: absolute;
    top: -180px;
    left: -180px;
    width: 420px;
    height: 420px;
    border: 1px solid rgba(225, 30, 51, 0.06);
    border-radius: 50%;
}


/* =========================================
   MAIN LAYOUT
========================================= */

.wireframe-need-layout { 
    display: grid; 
    grid-template-columns: 1.05fr 0.95fr; 
    gap: 40px; 
    align-items: center; 
}
 

/* =========================================
   VISUAL
========================================= */

.wireframe-need-visual {
    position: relative;
    padding: 35px 25px 35px 45px;
}

.wireframe-number {
    position: absolute;
    top: -20px;
    left: 0;
    z-index: 0;

    color: rgba(18, 23, 43, 0.055);
    font-size: 105px;
    line-height: 1;
    font-weight: 800;
}

.wireframe-image-wrap {
    position: relative;
    z-index: 2;
    padding: 28px;
    background: var(--paper);
    border: 1px solid var(--line);
}

.wireframe-image-wrap::before {
    content: "";
    position: absolute;
    top: 14px;
    left: 14px;

    width: 38px;
    height: 38px;

    border-top: 2px solid var(--red);
    border-left: 2px solid var(--red);
}

.wireframe-image-label {
    margin-bottom: 18px;
    padding-left: 3px;
    color: var(--red); 
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
}

.wireframe-image {
    overflow: hidden;
    background: var(--canvas);
    border: 1px solid var(--line);
}

.wireframe-image img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.5s ease;
}

.wireframe-image-wrap:hover .wireframe-image img {
    transform: scale(1.025);
}


/* Decorative Corner */

.wireframe-corner {
    position: absolute;
    right: 0;
    bottom: 0;

    width: 110px;
    height: 110px;

    border-right: 2px solid var(--red);
    border-bottom: 2px solid var(--red);

    z-index: 1;
}


/* =========================================
   CONTENT
========================================= */

.wireframe-need-content {
    max-width: 620px;
}

.wireframe-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 20px;

    color: var(--red);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
}

.wireframe-eyebrow::before {
    content: "";
    width: 32px;
    height: 2px;
    background: var(--red);
}

.wireframe-need-content h2 {
    margin: 0 0 28px;
    color: var(--ink);
    font-size: 45px;
    font-weight: 700; 
}

.wireframe-need-content h2 span {
    display: block;
    color: var(--red);
}

.wireframe-need-content p {
    margin: 0;
    color: var(--slate);
    font-size: 16px;
    line-height: 1.9;
}

/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 991px) {

    .wireframe-need-section {
        padding: 80px 0;
    }

    .wireframe-need-layout {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .wireframe-need-content {
        max-width: 100%;
    }

    .wireframe-need-content h2 {
        font-size: 38px;
    }

    .wireframe-need-visual {
        max-width: 700px;
        width: 100%;
        margin: 0 auto;
    }
}


@media (max-width: 767px) {

    .wireframe-need-section {
        padding: 60px 0;
    }

    .wireframe-need-layout {
        gap: 30px;
    }

    .wireframe-need-content h2 {
        font-size: 31px;
        letter-spacing: -0.5px;
    }

    .wireframe-need-content p {
        font-size: 14px;
        line-height: 1.8;
    }

    .wireframe-need-visual {
        padding: 25px 15px 25px 25px;
    }

    .wireframe-number {
        font-size: 70px;
    }

    .wireframe-image-wrap {
        padding: 20px;
    }

    .wireframe-corner {
        width: 75px;
        height: 75px;
    }
}

/* =========================================
   WHAT IS WEB WIREFRAMING
========================================= */

.wireframe-about-section { 
    position: relative; 
    padding: 60px 0; 
    background: var(--paper); 
    overflow: hidden; 
}


.wireframe-about-layout {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 0.7fr 1.3fr;
    gap: 40px;
    align-items: center;
}


/* =========================================
   LEFT MARK
========================================= */

.wireframe-about-mark {
    position: relative;
    min-height: 360px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-section-number {
    position: absolute;
    top: -20px;
    left: -15px;

    color: rgba(18, 23, 43, 0.055);
    font-size: 150px;
    line-height: 1;
    font-weight: 800;
}

.about-mark-box {
    position: relative;

    width: 220px;
    height: 260px;

    display: flex;
    align-items: flex-end;

    padding: 28px;

    background: var(--ink);
}

.about-mark-box::before {
    content: "";
    position: absolute;
    top: 18px;
    left: 18px;

    width: 42px;
    height: 42px;

    border-top: 2px solid var(--red);
    border-left: 2px solid var(--red);
}

.about-mark-box::after {
    content: "";
    position: absolute;
    right: -12px;
    bottom: -12px;

    width: 65px;
    height: 65px;

    border-right: 2px solid var(--red);
    border-bottom: 2px solid var(--red);
}

.about-mark-text {
    color: #fff;
    font-size: 25px;
    line-height: 1.35;
    font-weight: 700;
    letter-spacing: 2px;
}

/* =========================================
   CONTENT
========================================= */

.wireframe-about-content {
    max-width: 760px;
} 

.wireframe-about-content h2 {
    margin: 0 0 30px;
    color: var(--ink);
    font-size: 45px;
    font-weight: 700;
} 

.wireframe-about-content h2 span {
    color: var(--red);
}

.wireframe-about-content p {
    max-width: 720px;
    margin: 0;
    color: var(--slate);
    font-size: 18px;
    line-height: 1.95;
}


/* =========================================
   BOTTOM KEYWORDS
========================================= */

.about-bottom-new {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin-top: 30px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
}

.about-bottom-new span { 
    position: relative; 
    padding: 0 22px; 
    color: var(--slate-light);  
    font-size: 14px; 
    font-weight: 700; 
    letter-spacing: 1.5px; 
}

.about-bottom-new span:first-child {
    padding-left: 0;
}

.about-bottom-new span:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%; 
    right: 0;
    width: 3px; 
    height: 3px;
    border-radius: 50%;
    background: var(--red);
    transform: translateY(-50%);
} 


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 991px) {

    .wireframe-about-section {
        padding: 80px 0;
    }

    .wireframe-about-section::before {
        width: 100%;
        height: 40%;
        bottom: 0;
        top: auto;
    }

    .wireframe-about-layout {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .wireframe-about-mark {
        min-height: 300px;
        justify-content: flex-start;
        padding-left: 60px;
    }

    .wireframe-about-content {
        max-width: 100%;
    }

    .wireframe-about-content h2 {
        font-size: 42px;
    }
}


@media (max-width: 767px) {

    .wireframe-about-section {
        padding: 60px 0;
    }

    .wireframe-about-layout {
        gap: 40px;
    }

    .wireframe-about-mark {
        min-height: 240px;
        padding-left: 35px;
    }

    .about-section-number {
        font-size: 100px;
        left: 0;
    }

    .about-mark-box {
        width: 175px;
        height: 210px;
        padding: 22px;
    }

    .about-mark-text {
        font-size: 15px;
    } 

    .wireframe-about-content h2 {
        font-size: 33px;
        letter-spacing: -0.7px;
    }  

    .wireframe-about-content p {
        font-size: 15px; 
        line-height: 1.85;
    }  
  
    .about-bottom {
        gap: 12px 0;
    } 
 
    .about-bottom span {
        padding: 0 13px;
    }

    .about-bottom span:first-child {
        padding-left: 0;
    }
}

    .white-new{
        font-size: 45px;
        max-width: 800px;
        margin: 0 auto; 
    } 
    
    .white-new span{
        color: var(--red);
    }
    
    .cloud-timeline .title{
        text-align: left;
    }
    
    .cloud-timeline .title:after {
        margin: 15px 0;
    }
    
    /* =========================================
   CLOUD WHY CHOOSE US
========================================= */

.cloud-why-section {
    position: relative;
    padding: 60px 0; 
    background: var(--canvas);
    overflow: hidden;
}

.cloud-why-section::before {
    content: "";
    position: absolute;
    top: -220px;
    right: -220px;
    width: 500px;
    height: 500px;
    border: 1px solid rgba(225, 30, 51, 0.06);
    border-radius: 50%;
}

.cloud-why-section::after {
    content: "";
    position: absolute;
    bottom: -250px;
    left: -200px;
    width: 450px;
    height: 450px;
    border: 1px solid rgba(18, 23, 43, 0.04);
    border-radius: 50%;
}


/* =========================================
   MAIN LAYOUT
========================================= */

.cloud-why-layout {
    position: relative;
    z-index: 1;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}


/* =========================================
   CONTENT
========================================= */

.cloud-why-content {
    max-width: 650px;
}

.cloud-why-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 22px;

    color: var(--red);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
}

.cloud-why-eyebrow::before {
    content: "";
    width: 32px;
    height: 2px;
    background: var(--red);
}


/* Heading */

.cloud-why-heading {
    position: relative;
    margin-bottom: 30px;
}

.cloud-why-number {
    position: absolute;
    left: 0;
    top: 3px;

    color: var(--red);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
}

.cloud-why-heading h2 {
    margin: 0;
    color: var(--ink);
    font-size: 45px;
    font-weight: 700;
}

.cloud-why-heading h2 span {
    display: block;
    color: var(--red);
}


/* Paragraph */

.cloud-why-content p {
    margin: 0 0 15px; 
    color: var(--slate);
    font-size: 16px;
    line-height: 1.9;
}


/* =========================================
   VISUAL
========================================= */

.cloud-why-visual {
    position: relative;
    padding: 35px 25px 35px 35px;
}

.cloud-visual-number {
    position: absolute;
    top: -25px;
    right: 0;

    color: rgba(18, 23, 43, 0.05);
    font-size: 130px;
    line-height: 1;
    font-weight: 800;

    z-index: 0;
}

.cloud-image-frame {
    position: relative;
    z-index: 2;

    padding: 25px;

    background: var(--paper);
    border: 1px solid var(--line);
}


/* Image Header */

.cloud-image-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 18px;
    padding: 0 3px;

    color: var(--slate-light);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.6px;
}

.cloud-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    color: var(--red);
}

.cloud-status i {
    display: block;

    width: 6px;
    height: 6px;

    border-radius: 50%;
    background: var(--red);
}


/* Image */

.cloud-image {
    padding: 20px;

    background: var(--canvas);
    border: 1px solid var(--line);
    overflow: hidden;
}

.cloud-image img {
    display: block;
    width: 100%;
    height: auto;

    transition: transform 0.5s ease;
}

.cloud-image-frame:hover .cloud-image img {
    transform: scale(1.025);
}


/* Red Corner */

.cloud-corner {
    position: absolute;
    right: 0;
    bottom: 0;

    width: 105px;
    height: 105px;

    border-right: 2px solid var(--red);
    border-bottom: 2px solid var(--red);

    z-index: 1;
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 991px) {

    .cloud-why-section {
        padding: 80px 0;
    }

    .cloud-why-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .cloud-why-content {
        max-width: 100%;
    }

    .cloud-why-heading h2 {
        font-size: 38px;
    }

    .cloud-why-visual {
        max-width: 700px;
        width: 100%;
        margin: 0 auto;
    }
}


@media (max-width: 767px) {

    .cloud-why-section {
        padding: 60px 0;
    }

    .cloud-why-layout {
        gap: 20px; 
    } 

    .cloud-why-heading {
        padding-left: 38px;
    }

    .cloud-why-heading h2 {
        font-size: 31px;
        letter-spacing: -0.5px;
    }

    .cloud-why-content p {
        font-size: 14px;
        line-height: 1.8;
    }

    .cloud-why-visual {
        padding: 25px 15px 30px 20px;
    }

    .cloud-image-frame {
        padding: 18px;
    }

    .cloud-image {
        padding: 12px;
    }

    .cloud-visual-number {
        font-size: 80px;
    }

    .cloud-corner {
        width: 75px;
        height: 75px;
    }

    .cloud-image-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .cloud-why-footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 18px;
    }
}
   
 /* Academic Research Assistance */
  .academic-assist-section { 
    position: relative; 
    padding: 60px 0; 
    background: var(--canvas);
    overflow: hidden;
  }

  .academic-assist-section::before {
    content: "";
    position: absolute;
    top: -130px;
    right: -100px;
    width: 330px;
    height: 330px;
    border: 1px solid rgba(225, 30, 51, 0.12);
    border-radius: 50%;
  }

  .academic-assist-section::after {
    content: "";
    position: absolute;
    bottom: -120px;
    left: -100px;
    width: 280px;
    height: 280px;
    background: var(--red-tint);
    border-radius: 50%;
    opacity: .65;
  }

  .academic-assist-section .container {
    position: relative;
    z-index: 2;
  }

  /* Heading */
  .academic-assist-heading {
    max-width: 780px;
    margin: 0 auto 55px;
    text-align: center;
  }

  .academic-assist-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    color: var(--red-dark);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
  }

  .academic-assist-label::before,
  .academic-assist-label::after {
    content: "";
    width: 28px;
    height: 2px;
    background: var(--red);
  }

  .academic-assist-heading h2 {
    margin: 0;
    color: var(--ink);
    font-size: 45px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.8px;
  }
  
  .academic-assist-heading h2 span{
      color: var(--red); 
  } 

  /* Main layout */
  .academic-assist-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    max-width: 1120px;
    margin: 0 auto;
  }

  /* Main panels */
  .academic-assist-panel {
    position: relative;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 38px 38px 32px;
    box-shadow: 0 12px 35px rgba(18, 23, 43, 0.05);
    overflow: hidden;
  }

  .academic-assist-panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--red);
  }

  .academic-assist-panel.offer-panel::before {
    background: var(--ink);
  }

  /* Panel heading */
  .academic-panel-header {
    display: flex;
    align-items: center;
    gap: 18px;
    padding-bottom: 25px;
    margin-bottom: 5px;
    border-bottom: 1px solid var(--line);
  }

  .academic-panel-icon {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--red-tint);
    color: var(--red);
    border-radius: 14px;
    font-size: 20px;
  }

  .offer-panel .academic-panel-icon {
    background: var(--ink);
    color: var(--paper);
  }

  .academic-panel-heading small {
    display: block;
    margin-bottom: 5px;
    color: var(--slate-light);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
  }

  .academic-panel-heading h3 {
    margin: 0;
    color: var(--ink);
    font-size: 23px;
    line-height: 1.3;
    font-weight: 700;
  }

  /* List */
  .academic-assist-list {
    margin: 0;
    padding: 10px 0 0;
    list-style: none;
  }

  .academic-assist-list li {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 15px 0; 
    color: var(--slate);
    font-size: 16px; 
    line-height: 1.7;
    border-bottom: 1px solid var(--line);
  }

  .academic-assist-list li:last-child {
    border-bottom: 0;
  }

  .academic-assist-list li i {
    flex: 0 0 19px;
    margin-top: 4px;
    color: var(--red);
    font-size: 15px;
  }

  .offer-panel .academic-assist-list li i {
    color: var(--red);
  }

  /* Remove old empty list items visually */
  .academic-assist-list li:empty,
  .academic-assist-list li:has(> br:only-child) {
    display: none;
  }

  /* Bottom label */
  .academic-panel-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    color: var(--ink); 
    font-size: 16px; 
    font-weight: 600;
  }

  .academic-panel-footer i {
    color: var(--red);
  }

  /* Responsive */
  @media (max-width: 991px) {
    .academic-assist-section {
      padding: 75px 0;
    }

    .academic-assist-heading h2 {
      font-size: 34px;
    }

    .academic-assist-layout {
      gap: 18px;
    }

    .academic-assist-panel {
      padding: 30px 28px;
    }
  }

  @media (max-width: 767px) {
    .academic-assist-section {
      padding: 60px 0;
    }

    .academic-assist-heading {
      margin-bottom: 35px;
    }

    .academic-assist-heading h2 {
      font-size: 29px;
    }

    .academic-assist-layout {
      grid-template-columns: 1fr;
      gap: 18px;
    }

    .academic-assist-panel {
      padding: 28px 23px;
      border-radius: 15px;
    }

    .academic-panel-heading h3 {
      font-size: 20px;
    }

    .academic-assist-list li {
      font-size: 14px;
      line-height: 1.65;
    }
  }
  
  /* =========================================
   Academic Research Assist Section
========================================= */

.academic-research-section {
    position: relative; 
    padding: 60px 0; 
    background: var(--canvas);
    overflow: hidden;
}

.academic-research-layout {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    align-items: center;
    gap: 80px;
}

/* =========================================
   Image
========================================= */

.academic-research-visual {
    position: relative;
}

.academic-research-image-wrap {
    position: relative;
    padding: 25px;
    background: var(--paper);
    border: 1px solid var(--line);
}

.academic-research-image-wrap::before {
    content: "";
    position: absolute;
    top: -14px;
    left: -14px;
    width: 85px;
    height: 85px;
    border-top: 2px solid var(--red);
    border-left: 2px solid var(--red);
}

.academic-research-image-wrap::after {
    content: "";
    position: absolute;
    right: -14px;
    bottom: -14px;
    width: 85px;
    height: 85px;
    border-right: 2px solid var(--red);
    border-bottom: 2px solid var(--red);
}

.academic-research-image {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    z-index: 1;
}

/* Number */
.academic-research-number {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 75px;
    height: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--red);
    z-index: 2;
}

.academic-research-number span {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 1px;
}

/* =========================================
   Content
========================================= */

.academic-research-content {
    max-width: 680px;
}

.academic-research-content h2 { 
    margin: 0 0 20px; 
    max-width: 650px;
    color: var(--ink);
    font-size: 45px;
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -1.2px;
}

.academic-research-content h2 em {
    color: var(--red);
    font-style: normal;
}

.academic-research-content p {
    margin: 0;
    color: var(--slate); 
    font-size: 16px; 
    line-height: 1.85;
    font-weight: 400;
}

/* =========================================
   Button
========================================= */

.academic-research-action {
    margin-top: 35px;
}

.academic-quote-btn {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    padding: 15px 24px;
    background: var(--ink);
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .4px;
    transition: all .3s ease;
}

.academic-quote-btn i {
    color: #fff;
    font-size: 13px;
    transition: transform .3s ease;
}

.academic-quote-btn:hover {
    background: var(--red);
    color: #fff;
    text-decoration: none;
}

.academic-quote-btn:hover i {
    transform: translateX(4px);
}

/* =========================================
   Responsive
========================================= */

@media (max-width: 991px) {

    .academic-research-section {
        padding: 50px 0;
    }

    .academic-research-layout {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .academic-research-content {
        max-width: 100%;
    }

    .academic-research-content h2 {
        font-size: 38px;
    }

    .academic-research-visual {
        max-width: 650px;
        margin: 0 auto;
        width: 100%;
    }
}

@media (max-width: 767px) {

    .academic-research-section {
        padding: 50px 0;
    }

    .academic-research-layout {
        gap: 40px;
    }

    .academic-research-image-wrap {
        padding: 15px;
    }

    .academic-research-image-wrap::before,
    .academic-research-image-wrap::after {
        width: 55px;
        height: 55px;
    }

    .academic-research-number {
        width: 60px;
        height: 60px;
    }

    .academic-research-number span {
        font-size: 18px;
    }

    .academic-research-content h2 {
        font-size: 31px;
        letter-spacing: -.5px;
    }

    .academic-research-content p {
        font-size: 16px;
        line-height: 1.75;
    }

    .academic-research-action {
        margin-top: 28px;
    }
}

/* =========================================
   Academic Research Constraints
========================================= */

.research-constraints-section {
    position: relative;
    padding: 60px 0; 
    background: var(--paper);
    overflow: hidden;
}

/* =========================================
   Left Side
========================================= */

.research-constraints-side {
    padding-top: 8px;
}

.research-constraints-line {
    width: 45px;
    height: 2px;
    margin: 22px 0 18px;
    background: var(--red);
}

.research-constraints-side span {
    display: block;
    max-width: 110px;
    color: var(--slate-light);
    font-size: 11px;
    line-height: 1.6;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

/* =========================================
   Main Content
========================================= */

.research-constraints-content {
    max-width: 850px;
    padding: 0 0 10px; 
    margin: 0 auto;
}


.research-constraints-content h2 {
    margin: 0;
    /*max-width: 760px;*/
    color: var(--ink);
    font-size: 45px; 
    font-weight: 700;
}

.research-constraints-content h2 span {
    color: var(--red);
}

.research-constraints-content p {
    /*max-width: 780px;*/
    margin: 30px 0 0;
    color: var(--slate);
    font-size: 19px;
    line-height: 1.85;
}

.research-constraints-bottom {
    display: flex;
    align-items: center;
    margin-top: 38px;
}


/* =========================================
   Responsive
========================================= */

@media (max-width: 991px) {

    .research-constraints-section {
        padding: 75px 0;
    }

    .research-constraints-section::before {
        width: 20%;
    }

    .research-constraints-layout {
        grid-template-columns: 130px 1fr;
        gap: 45px;
    }

    .research-constraints-number {
        font-size: 40px;
    }

    .research-constraints-content h2 {
        font-size: 42px;
    }

    .research-constraints-content p {
        font-size: 17px;
    }
}

@media (max-width: 767px) {

    .research-constraints-section {
        padding: 60px 0;
    }

    .research-constraints-section::before {
        display: none;
    }

    .research-constraints-layout {
        display: block;
    }

    .research-constraints-side {
        display: flex;
        align-items: center;
        gap: 15px;
        margin-bottom: 28px;
        padding: 0;
    }

    .research-constraints-number {
        font-size: 32px;
        letter-spacing: -1px;
    }

    .research-constraints-line {
        width: 30px;
        margin: 0;
    }

    .research-constraints-side span {
        max-width: none;
        font-size: 10px;
    } 

    .research-constraints-content h2 {
        font-size: 34px;
        letter-spacing: -.8px;
    } 

    .research-constraints-content p {
        margin-top: 22px;
        font-size: 16px;
        line-height: 1.75;
    }

    .research-constraints-bottom {
        margin-top: 28px;
    }
} 
 
.research-constraints-layout{
    text-align: center;
    margin: 0 auto;
} 

.mk-contact-section{
    padding:60px 0;
    background:var(--canvas);
}
.mk-contact-section .container{
    max-width:1200px;
    margin:0 auto; 
    padding:0 24px; 
} 
 
/* Heading */
.mk-contact-heading{
    text-align:center;
    max-width:620px;
    margin:0 auto 56px;
}
.mk-contact-heading .services-label{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-size:13px;
    color:var(--red);
    font-weight:600;
    margin-bottom:18px;
}
.mk-contact-heading .services-label span{
    width:22px;
    height:1px;
    background:var(--red);
    display:inline-block;
}
.mk-contact-heading h2{
    font-weight:800;
    font-size:45px;
    line-height:1.15;
    color:var(--ink);
    margin:0 0 16px;
}
.mk-contact-heading h2 span{
    color:var(--red);
}

.mk-contact-heading p{
    font-size:16px;
    line-height:1.6;
    color:var(--slate);
    margin:0;
}

/* Grid */
.mk-contact-grid{
    display:grid;
    grid-template-columns: 5fr 7fr; 
    gap: 50px; 
    border-radius:20px;
    /*overflow:hidden;*/
    /*box-shadow:0 30px 60px rgba(18,23,43,.08);*/ 
    align-items:stretch;
}

/* LEFT PANEL — stays put while the right column scrolls */
.mk-contact-left{
    background:var(--ink);
    color:#EDEEF3;
    padding:56px 44px;
    position:sticky;
    top:100px; 
    align-self:flex-start; 
    border-radius: 15px;
}
.mk-contact-left::before{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 100% 0%, rgba(225,30,51,.18), transparent 55%);
    pointer-events:none;
}
.mk-contact-left-inner{
    position:relative;
    z-index:1;
}
.mk-left-title{
    font-weight:700;
    font-size:26px;
    color:#fff;
    margin:0 0 10px;
}
.mk-left-sub { 
    font-size:16px; 
    line-height:1.6;
    color:var(--slate-light);
    margin:0 0 36px;
    max-width:340px;
}

.mk-info-row{
    display:flex;
    gap:16px;
    padding:18px 0;
    border-top:1px solid rgba(255,255,255,.08);
}
.mk-info-row:first-of-type{border-top:1px solid rgba(255,255,255,.08);}
.mk-info-icon{
    flex:0 0 auto;
    width:40px;
    height:40px;
    border-radius:10px;
    background:rgba(225,30,51,.14);
    color:var(--red);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:16px;
}
.mk-info-body{
    display:flex;
    flex-direction:column;
    gap:4px;
}
.mk-info-label{
    font-size:12px;
    color:var(--slate-light);
    text-transform:uppercase;
    letter-spacing:.06em;
}
.mk-info-body a,
.mk-info-body .mk-info-text{
    font-family:'Manrope', Arial, sans-serif;
    font-size:15.5px;
    color:#F2F3F7;
    text-decoration:none;
    display:flex;
    align-items:center;
    gap:8px;
}
.mk-info-body a:hover{ color:var(--red); }

/* RIGHT PANEL — its own scroll area, cards styled to match the left */
.mk-contact-right {
    /* background: var(--paper); */
    padding:  0;
    display: flex;
    flex-direction: column;
    /* max-height: calc(100vh - 64px); */
    /* overflow-y: auto; */
    /* scrollbar-width: thin; */
    /* scrollbar-color: var(--line) transparent; */
}
.mk-contact-right::-webkit-scrollbar{
    width:6px;
}
.mk-contact-right::-webkit-scrollbar-thumb{
    background:var(--line);
    border-radius:6px;
}
.mk-contact-right::-webkit-scrollbar-track{
    background:transparent;
}

.mk-form-card{
    display:flex;
    align-items:center;
    gap:16px;
    padding:20px 0 0 22px;
    /*border:1px solid var(--line);*/
    border-radius:14px;
    background:var(--paper);
    margin-bottom:24px;
}
.mk-form-card-icon{
    flex:0 0 auto;
    width:40px;
    height:40px;
    border-radius:10px;
    background:var(--red-tint);
    color:var(--red);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:16px;
}
.mk-form-label{
  
    font-size:12px;
    letter-spacing:.06em;
    color:var(--red);
    font-weight:600;
    text-transform:uppercase;
}
.mk-form-card h3{
    
    font-weight:700;
    font-size:22px;
    color:var(--ink);
    margin:4px 0 0;
}

.mk-contact-form{
    flex:1;
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:14px;
    padding:4px;
}
.mk-zohoframe{
    width:100%;
    height:640px;
    border:none;
    display:block;
    background:var(--paper); /* forces a white surface instead of the default dark iframe background */
    border-radius:12px;
}

/* Responsive — sticky/scroll only makes sense side-by-side */
@media (max-width: 900px){
    .mk-contact-grid{
        grid-template-columns:1fr;
    }
    .mk-contact-left, .mk-contact-right{
        padding:40px 28px; 
        position:static; 
        max-height:none; 
        overflow:visible; 
    }
    .mk-contact-heading h2{ font-size:32px; }
}

   /* =========================================================
   MK CONSULTING - COMPANY OVERVIEW
========================================================= */

.company-overview-page {
    position: relative;
    padding: 60px 0; 
    background: var(--canvas);
    overflow: hidden; 
}


/* =========================================================
   MAIN GRID
========================================================= */

.company-overview-page .overview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(430px, 0.85fr);
    align-items: center;
    gap: 80px;
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.company-overview-page .wireframing {
    max-width: 680px;
}

.company-overview-page .headline {
    margin: 0 0 25px;
    color: var(--ink);
    font-size: 45px;
    font-weight: 700;
    line-height: 1.08;
}

.company-overview-page .headline .accent {
    color: var(--red);
}

.company-overview-page .lede {
    max-width: 650px;
    margin: 0 0 18px;
    color: var(--slate);
    font-size: 16px;
    line-height: 1.85;
}


/* =========================================================
   FEATURE ROW
========================================================= */

.company-overview-page .feature-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 34px;
    padding-top: 28px;
    border-top: 1px solid var(--line);
}

.company-overview-page .feature-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.company-overview-page .feature-card .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    background: var(--red-tint);
    border-radius: 7px;
}

.company-overview-page .feature-card .icon svg {
    display: block;
    width: 20px;
    height: 20px;
}

.company-overview-page .feature-content h3 {
    margin: 2px 0 5px;
    color: var(--ink);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
}

.company-overview-page .feature-content p {
    margin: 0;
    color: var(--slate-light);
    font-size: 14px;
    line-height: 1.5;
}


/* =========================================================
   RIGHT VISUAL
========================================================= */

.company-overview-page .visual-wrap {
    position: relative;
    min-height: 530px;
    padding: 28px 30px 35px 25px;
}

.company-overview-page .visual-backdrop {
    position: absolute;
    top: 0;
    right: 0;
    width: 75%;
    height: 78%;
    background: var(--red); 
    border: 1px solid rgba(225, 30, 51, 0.10);
}

.company-overview-page .visual-backdrop.lower {
    top: auto;
    right: auto;
    bottom: 0;
    left: 0;
    width: 55%;
    height: 25%;
    background: transparent;
    border: 0;
    border-left: 1px solid rgba(225, 30, 51, 0.15);
    border-bottom: 1px solid rgba(225, 30, 51, 0.15);
}


/* =========================================================
   IMAGE PANEL
========================================================= */

.company-overview-page .visual-panel {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 430px;
    padding: 9px;
    background: var(--paper);
    box-shadow: 0 22px 55px rgba(18, 23, 43, 0.11);
}

.company-overview-page .photo-inset {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.company-overview-page .photo-inset img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.company-overview-page .visual-panel:hover .photo-inset img {
    transform: scale(1.03);
}


/* =========================================================
   BADGES
========================================================= */

.company-overview-page .badge {
    position: absolute;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 190px;
    padding: 14px 17px;
    background: var(--paper);
    border: 1px solid var(--line);
    box-shadow: 0 12px 30px rgba(18, 23, 43, 0.10);
}

.company-overview-page .badge.top-left {
    top: 82px;
    left: -5px;
}

.company-overview-page .badge.bottom-right {
    right: -2px;
    bottom: 58px;
}

.company-overview-page .badge-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    background: var(--red);
    border-radius: 6px;
}

.company-overview-page .badge-icon svg {
    display: block;
    width: 18px;
    height: 18px;
}

.company-overview-page .badge-text strong,
.company-overview-page .badge-text span {
    display: block;
}

.company-overview-page .badge-text strong {
    margin-bottom: 3px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
}

.company-overview-page .badge-text span {
    color: var(--slate);
    font-size: 11px;
    line-height: 1.3;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1199px) {

    .company-overview-page {
        padding: 80px 0;
    }

    .company-overview-page .overview-grid {
        gap: 50px;
    }

    .company-overview-page .feature-row {
        gap: 10px;
    }

    .company-overview-page .visual-wrap {
        min-height: 490px;
        padding-right: 20px;
    }

    .company-overview-page .visual-panel {
        height: 400px;
    }
}


/* =========================================================
   MOBILE / TABLET
========================================================= */

@media (max-width: 991px) {

    .company-overview-page {
        padding: 70px 0;
    }

    .company-overview-page .overview-grid {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .company-overview-page .wireframing {
        max-width: 100%;
    }

    .company-overview-page .lede {
        max-width: 100%;
    }

    .company-overview-page .visual-wrap {
        width: 82%;
        margin: 0 auto;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .company-overview-page {
        padding: 55px 0;
    }

    .company-overview-page .headline {
        margin-bottom: 20px;
        font-size: 38px;
    }

    .company-overview-page .lede {
        font-size: 14px;
        line-height: 1.75;
    }

    .company-overview-page .feature-row {
        grid-template-columns: 1fr;
        gap: 18px;
        margin-top: 28px;
        padding-top: 24px;
    }

    .company-overview-page .feature-card {
        align-items: center;
    }

    .company-overview-page .visual-wrap {
        width: 100%;
        min-height: 400px;
        padding: 18px 15px 25px 10px;
    }

    .company-overview-page .visual-panel {
        height: 330px;
        padding: 7px;
    }

    .company-overview-page .badge.top-left {
        top: 55px;
        left: -2px;
    }

    .company-overview-page .badge.bottom-right {
        right: -2px;
        bottom: 25px;
    }

    .company-overview-page .badge {
        min-width: 165px;
        padding: 11px 13px;
    }

    .company-overview-page .badge-icon {
        flex-basis: 34px;
        width: 34px;
        height: 34px;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .company-overview-page .headline {
        font-size: 34px;
    }

    .company-overview-page .visual-wrap {
        min-height: 355px;
    }

    .company-overview-page .visual-panel {
        height: 285px;
    }

    .company-overview-page .badge {
        min-width: 145px;
    }

    .company-overview-page .badge-text strong {
        font-size: 11px;
    }

    .company-overview-page .badge-text span {
        font-size: 10px;
    }

    .company-overview-page .badge.top-left {
        top: 45px;
    }

    .company-overview-page .badge.bottom-right {
        bottom: 15px;
    }
}