/* MAIN INTRO */

/* .hero{
    min-height:80vh;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    background:#f8fafc;
    padding:2rem;
}

.hero-content{
    max-width:700px;
}

.hero h1{
    font-size:3rem;
    color:#0f172a;
    margin-bottom:1rem;
}

.hero p{
    font-size:1.1rem;
    color:#475569;
    line-height:1.8;
    margin-bottom:2rem;
}

.btn{
    display:inline-block;
    padding:.9rem 2rem;
    background:#2563eb;
    color:white;
    text-decoration:none;
    border-radius:.5rem;
    transition:.3s;
}

.btn:hover{
    background:#1d4ed8;
} */




/* ==========================
        HERO SECTION
========================== */

.hero{

    position:relative;

    width:100%;

    min-height:85vh;

    background:url("TMIS copy.jpeg") center center/cover no-repeat;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    overflow:hidden;
}

/* Dark overlay */

.overlay{

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:100%;

    background:rgba(0,0,0,0.55);

    z-index:1;
}

/* Content */

.hero-content{

    position:relative;

    z-index:2;

    max-width:850px;

    padding:20px;

    color:#fff;
}

.hero-content h1{

    font-size:3.5rem;

    margin-bottom:20px;

    font-weight:700;

    line-height:1.2;
}

.hero-content p{

    font-size:1.2rem;

    color:#e5e7eb;

    margin-bottom:35px;

    line-height:1.7;
}

/* Button */

.hero-btn{

    display:inline-block;

    padding:16px 40px;

    background:#F5BE24;

    color:#000;

    text-decoration:none;

    font-weight:700;

    border-radius:40px;

    transition:.3s;
}

.hero-btn:hover{

    background:#E91568;

    color:#fff;

    transform:translateY(-3px);
}

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

@media (max-width:992px){

.hero{

    min-height:75vh;
}

.hero-content h1{

    font-size:2.8rem;
}

.hero-content p{

    font-size:1.05rem;
}

}

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

@media (max-width:768px){

.hero{

    min-height:65vh;

    padding:80px 20px;
}

.hero-content h1{

    font-size:2rem;
}

.hero-content p{

    font-size:1rem;

    margin-bottom:25px;
}

.hero-btn{

    padding:14px 30px;

    font-size:15px;
}

}


/* info 1 */


/* villian ***********************************************************************  */



.villian {
    width: 100%;
    padding: 100px 7%;
    background: #f6f7f9;
    overflow: hidden;
}

.villian-content {
    max-width: 1250px;
    margin: auto;

    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;

    gap: 80px;
}


/* ==============================
   TEXT
================================ */

.villian-text {
    position: relative;
}

.villian-text::before {
    content: "3+ YEARS";

    display: inline-block;

    margin-bottom: 20px;
    padding: 8px 18px;

    border-radius: 30px;

    background: #fff0df;
    color: #d88b42;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
}


.villian-text h1 {
    margin: 0;

    font-size: clamp(42px, 5vw, 68px);
    line-height: 1.05;

    font-weight: 800;

    letter-spacing: -2px;

    color: #17243a;
}


.villian-text h1 span {
    display: block;

    color: #54BEE6;
}


.villian-text p {
    max-width: 570px;

    margin: 30px 0 35px;

    font-size: 17px;
    line-height: 1.8;

    color: #687386;
}


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

.villian-buttons {
    display: flex;
    align-items: center;
}


.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 15px 25px;

    background: #17243a;
    color: #ffffff;

    border-radius: 8px;

    text-decoration: none;

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

    transition: all 0.3s ease;
}


.btn-primary:hover {
    background: #d88b42;

    transform: translateY(-3px);

    box-shadow:
        0 12px 25px rgba(216, 139, 66, 0.25);
}


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

.villian-image {
    position: relative;
}


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

    display: block;

    width: 100%;
    height: 460px;

    object-fit: cover;

    border-radius: 28px;

    box-shadow:
        0 25px 50px rgba(23, 36, 58, 0.18);

    transition: transform 0.5s ease;
}


.villian-image:hover img {
    transform: scale(1.02);
}


/* ==============================
   DECORATIVE CIRCLE
================================ */

.villian-image::before {
    content: "";

    position: absolute;

    width: 120px;
    height: 120px;

    top: -35px;
    right: -35px;

    border: 14px solid #d88b42;

    border-radius: 50%;

    z-index: 1;
}


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

.villian-image::after {
    content: "";

    position: absolute;

    width: 90px;
    height: 90px;

    bottom: -30px;
    left: -30px;

    background: #17243a;

    border-radius: 20px;

    z-index: 1;
}


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

@media (max-width: 900px) {

    .villian {
        padding: 75px 6%;
    }

    .villian-content {
        grid-template-columns: 1fr;

        gap: 55px;
    }

    .villian-text {
        text-align: center;
    }

    .villian-text p {
        margin-left: auto;
        margin-right: auto;
    }

    .villian-buttons {
        justify-content: center;
    }

    .villian-image {
        max-width: 650px;
        width: 100%;
        margin: auto;
    }

}


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

@media (max-width: 600px) {

    .villian {
        padding: 60px 20px;
    }

    .villian-content {
        gap: 45px;
    }


    .villian-text h1 {
        font-size: 40px;

        letter-spacing: -1px;
    }


    .villian-text p {
        font-size: 15px;

        line-height: 1.7;

        margin-top: 22px;
    }


    .btn-primary {
        width: 100%;

        padding: 15px 20px;
    }


    .villian-image img {
        height: 300px;

        border-radius: 22px;
    }


    .villian-image::before {
        width: 70px;
        height: 70px;

        top: -20px;
        right: -15px;

        border-width: 9px;
    }


    .villian-image::after {
        width: 60px;
        height: 60px;

        bottom: -20px;
        left: -15px;

        border-radius: 15px;
    }

}
  






/* program section */

/* ===========================
      PROGRAM SECTION
=========================== */

.programs-section{

    padding:80px 20px;
    background:#fff;
}

.programs-container{

    max-width:1200px;
    margin:auto;

    display:grid;
    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:center;
}


/* ===========================
      LEFT IMAGES
=========================== */

.program-images{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:20px;
}

.img{

    width:100%;
    object-fit:cover;

    box-shadow:0 12px 30px rgba(0,0,0,.15);

    transition:.4s;
}

.img:hover{

    transform:translateY(-8px);
}

/* Image Shapes */

.img1{

    height:360px;

    border-radius:120px 120px 20px 20px;
}

.img2{

    height:220px;

    border-radius:50%;
    border:3px dashed #f59e0b;
    padding:8px;
}

.img3{

    grid-column:1/3;

    height:260px;

    border-radius:25px 100px 25px 100px;
}


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

.program-content{

    display:flex;
    flex-direction:column;

    gap:35px;
}

.program-box{

    display:flex;

    gap:20px;

    align-items:flex-start;
}

.icon{

    width:70px;
    height:70px;

    border-radius:50%;

    background:#F57C00;

    display:flex;

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

    flex-shrink:0;
}

.icon i{

    color:white;

    font-size:30px;
}

.program-box h3{

    color:#1E3A8A;

    font-size:28px;

    margin-bottom:12px;
}

.program-box p{

    color:#555;

    line-height:1.8;

    font-size:17px;
}


/* ===========================
      QUOTE
=========================== */

.quote-box{

    background:#eef5f6;

    padding:30px;

    border-radius:18px;

    border-left:6px solid #F57C00;
}

.quote-box p{

    color:#444;

    font-size:18px;

    line-height:1.8;
}


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

@media(max-width:992px){

.programs-container{

    grid-template-columns:1fr;
}

.program-content{

    margin-top:30px;
}

}


@media(max-width:768px){

.program-images{

    grid-template-columns:1fr;
}

.img3{

    grid-column:auto;
}

.img1{

    height:320px;
}

.img2{

    height:260px;
    border-radius:25px;
    border:none;
    padding:0;
}

.img3{

    height:240px;
}

.program-box{

    flex-direction:column;
    text-align:center;
    align-items:center;
}

.quote-box{

    text-align:center;
}

.program-box h3{

    font-size:24px;
}

.program-box p{

    font-size:16px;
}

}


@media(max-width:480px){

.programs-section{

    padding:60px 15px;
}

.img1{

    height:260px;
}

.img2{

    height:220px;
}

.img3{

    height:220px;
}

.icon{

    width:60px;
    height:60px;
}

.icon i{

    font-size:24px;
}

.program-box h3{

    font-size:22px;
}

}



/* hear from our founders */

/* ==========================
   HEAR FROM OUR FOUNDERS
========================== */

.founders-section{
    width:100%;
    padding:90px 7%;
    background:#f8fafc;
}

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

.founders-heading{
    max-width:750px;
    margin:0 auto 70px;
    text-align:center;
}

.founders-heading span{
    display:inline-block;
    color:#54BEE6;
    font-size:.95rem;
    font-weight:700;
    letter-spacing:3px;
    margin-bottom:12px;
}

.founders-heading h2{
    color:#1e2640;
    font-size:2.8rem;
    margin-bottom:18px;
    font-family:Georgia, serif;
}

.founders-heading p{
    color:#666;
    font-size:1.05rem;
    line-height:1.8;
}


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

.founder-card{
    max-width:1150px;
    margin:0 auto 70px;

    display:grid;
    grid-template-columns:1fr 1fr;

    align-items:center;

    background:#ffffff;

    border-radius:20px;

    overflow:hidden;

    box-shadow:
        0 15px 40px rgba(30,38,64,.10);

    transition:.4s;
}

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

    box-shadow:
        0 20px 50px rgba(30,38,64,.16);
}


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

.founder-image{
    height:500px;
    overflow:hidden;
}

.founder-image img{
    width:100%;
    height:100%;

    object-fit:cover;

    display:block;

    transition:transform .5s ease;
}

.founder-card:hover .founder-image img{
    transform:scale(1.05);
}


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

.founder-content{
    padding:55px 60px;
    position:relative;
}

.quote-icon{
    font-family:Georgia, serif;
    font-size:6rem;
    line-height:.5;

    color:#54BEE6;

    opacity:.2;

    position:absolute;

    top:45px;
    left:45px;
}

.founder-message{
    position:relative;

    color:#555;

    font-size:1.12rem;

    line-height:1.9;

    text-align:justify;

    margin-bottom:30px;
}


/* ==========================
      FOUNDER LINE
========================== */

.founder-line{
    width:60px;
    height:4px;

    background:#F5BE24;

    margin-bottom:18px;

    border-radius:10px;
}


/* ==========================
      FOUNDER NAME
========================== */

.founder-content h3{
    color:#1e2640;

    font-size:1.5rem;

    margin-bottom:6px;

    font-family:Georgia, serif;
}

.founder-content span{
    color:#54BEE6;

    font-size:.95rem;

    font-weight:600;
}


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

/*
   Founder 2:
   Image appears on right
   Text appears on left
*/

.founder-reverse{
    grid-template-areas:
        "content image";
}

.founder-reverse .founder-image{
    grid-area:image;
}

.founder-reverse .founder-content{
    grid-area:content;
}


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

@media(max-width:900px){

    .founders-section{
        padding:70px 5%;
    }

    .founder-card{
        grid-template-columns:1fr;
    }

    .founder-reverse{
        grid-template-areas:
            "image"
            "content";
    }

    .founder-reverse .founder-image{
        grid-area:image;
    }

    .founder-reverse .founder-content{
        grid-area:content;
    }

    .founder-image{
        height:450px;
    }

    .founder-content{
        padding:45px;
    }

}


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

@media(max-width:600px){

    .founders-section{
        padding:60px 5%;
    }

    .founders-heading{
        margin-bottom:45px;
    }

    .founders-heading h2{
        font-size:2.1rem;
    }

    .founders-heading p{
        font-size:.95rem;
    }

    .founder-card{
        margin-bottom:45px;
        border-radius:15px;
    }

    .founder-image{
        height:350px;
    }

    .founder-content{
        padding:35px 25px;
    }

    .founder-message{
        font-size:1rem;
        line-height:1.8;
        text-align:left;
    }

    .quote-icon{
        font-size:5rem;
        top:35px;
        left:20px;
    }

    .founder-content h3{
        font-size:1.3rem;
    }

}




/* why choose us *************************************************************************************** */

/* ==============================
   WHY CHOOSE US
================================ */
/* =========================================
   WHY CHOOSE US
========================================= */

.why-choose {
    position: relative;
    width: 100%;
    padding: 100px 5% 110px;

    background: #f8f9fb;

    overflow: hidden;
}


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

.section-heading {
    position: relative;
    z-index: 2;

    text-align: center;

    margin-bottom: 60px;
}

.section-heading span {
    display: block;

    margin-bottom: 12px;

    color: #54BEE6;

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

    letter-spacing: 3px;
}

.section-heading h2 {
    margin: 0;

    color: #18213d;

    font-size: 44px;
    line-height: 1.2;

    font-weight: 700;
}

.section-heading h2 strong {
    color: #54BEE6;
}


/* =========================================
   CARDS CONTAINER
========================================= */

.choose-container {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 1400px;

    margin: auto;

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 30px;
}


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

.choose-card {
    position: relative;

    background: #ffffff;

    border-radius: 18px;

    overflow: hidden;

    text-align: center;

    box-shadow:
        0 12px 35px rgba(24, 33, 61, 0.10);

    border-top: 4px solid #1e293b;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}


/* Hover */

.choose-card:hover {
    transform: translateY(-12px);

    box-shadow:
        0 22px 45px rgba(24, 33, 61, 0.16);
}


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

.choose-card img {
    width: 100%;

    height: 270px;

    display: block;

    object-fit: cover;

    transition: transform 0.5s ease;
}


/* Image hover */

.choose-card:hover img {
    transform: scale(1.06);
}


/* =========================================
   TITLE
========================================= */

.choose-card h3 {
    margin: 0;

    padding: 25px 15px 28px;

    color: #18213d;

    font-size: 20px;

    font-weight: 700;

    line-height: 1.4;
}


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

.why-choose::before {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    top: -160px;
    left: -100px;

    border-radius: 50%;

    background: #eeeae5;
}


.why-choose::after {
    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    right: -120px;
    bottom: -150px;

    border-radius: 50%;

    background: #e9eaee;
}


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

@media (max-width: 1100px) {

    .why-choose {
        padding: 85px 4% 95px;
    }

    .choose-container {
        grid-template-columns: repeat(2, 1fr);

        gap: 30px;
    }

    .choose-card img {
        height: 300px;
    }

    .section-heading h2 {
        font-size: 40px;
    }
}


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

@media (max-width: 600px) {

    .why-choose {
        padding: 65px 20px 75px;
    }

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

    .section-heading span {
        font-size: 12px;

        letter-spacing: 2px;
    }

    .section-heading h2 {
        font-size: 32px;
    }

    .choose-container {
        grid-template-columns: 1fr;

        gap: 25px;
    }

    .choose-card img {
        height: 280px;
    }

    .choose-card h3 {
        padding: 22px 12px 25px;

        font-size: 19px;
    }
}


/* ************************************************************************************************************** */

/* =========================================
   WHY TMIS SECTION
========================================= */

.why-tmis {
    position: relative;
    width: 100%;
    padding: 85px 6%;
    background: #f8f9fb;
    overflow: hidden;
}


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

.why-tmis::before {
    content: "";

    position: absolute;

    width: 260px;
    height: 260px;

    top: -150px;
    left: -100px;

    background: #eeeae5;

    border-radius: 50%;
}


.why-tmis::after {
    content: "";

    position: absolute;

    width: 250px;
    height: 250px;

    right: -120px;
    bottom: -140px;

    background: #e9eaee;

    border-radius: 50%;
}


/* =========================================
   MAIN WRAPPER
========================================= */

.why-tmis-wrapper {
    position: relative;

    z-index: 2;

    max-width: 1250px;

    margin: auto;

    display: grid;

    grid-template-columns: 1fr 1fr;

    align-items: center;

    gap: 70px;
}


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

.why-tmis-content {
    position: relative;

    z-index: 3;
}


/* Small heading */

.why-tmis-label {
    display: inline-block;

    margin-bottom: 12px;

    color: #54BEE6;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 2.5px;
}


/* Main heading */

.why-tmis-content h2 {
    margin: 0;

    color: #18213d;

    font-size: clamp(40px, 4vw, 56px);

    font-weight: 700;

    line-height: 1.1;
}


/* Orange heading */

.why-tmis-content h2 span {
    color: #54BEE6;
}


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

.why-tmis-line {
    position: relative;

    width: 65px;
    height: 4px;

    margin: 20px 0 25px;

    background: #54BEE6;

    border-radius: 20px;
}


.why-tmis-line::after {
    content: "";

    position: absolute;

    width: 25px;
    height: 4px;

    left: 75px;

    background: #18213d;

    border-radius: 20px;
}


/* =========================================
   INTRODUCTION
========================================= */

.why-tmis-intro {
    max-width: 610px;

    margin: 0 0 35px;

    color: #596273;

    font-size: 15.5px;

    line-height: 1.8;
}


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

.why-tmis-features {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 18px 25px;
}


.why-tmis-column {
    display: flex;

    flex-direction: column;

    gap: 12px;
}


.why-tmis-feature {
    display: flex;

    align-items: center;

    gap: 12px;

    padding: 11px 12px;

    border-radius: 10px;

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease;
}


.why-tmis-feature:hover {
    background: #ffffff;

    transform: translateX(6px);

    box-shadow: 0 8px 25px rgba(24, 33, 61, 0.08);
}


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

.why-tmis-check {
    flex-shrink: 0;

    width: 26px;
    height: 26px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #54BEE6;

    color: #ffffff;

    border-radius: 50%;

    font-size: 14px;

    font-weight: 700;

    box-shadow: 0 5px 12px rgba(220, 151, 80, 0.25);
}


.why-tmis-feature p {
    margin: 0;

    color: #344054;

    font-size: 15px;

    font-weight: 500;

    line-height: 1.5;
}


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

.why-tmis-image {
    position: relative;

    min-height: 500px;

    display: flex;

    align-items: center;

    justify-content: center;
}


/* Image frame */

.why-tmis-image-frame {
    position: relative;

    width: 100%;

    height: 500px;

    overflow: hidden;

    border-radius: 25px;

    box-shadow:
        0 25px 60px rgba(24, 33, 61, 0.18);

    z-index: 2;
}


.why-tmis-image-frame img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform 0.7s ease;
}


.why-tmis-image-frame:hover img {
    transform: scale(1.05);
}


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

.why-tmis-image-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(24, 33, 61, 0.65),
            rgba(24, 33, 61, 0.08) 55%,
            transparent
        );
}


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

.why-tmis-image-badge {
    position: absolute;

    left: 25px;
    bottom: 25px;

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 13px 20px;

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

    backdrop-filter: blur(10px);

    border-radius: 12px;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}


.why-tmis-image-badge > span {
    width: 38px;
    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #dc9750;

    color: #ffffff;

    font-size: 18px;
}


.why-tmis-image-badge strong {
    display: block;

    margin-bottom: 3px;

    color: #18213d;

    font-size: 14px;
}


.why-tmis-image-badge small {
    display: block;

    color: #687184;

    font-size: 11px;
}


/* =========================================
   DECORATIVE CIRCLE
========================================= */

.why-tmis-circle {
    position: absolute;

    width: 170px;
    height: 170px;

    top: -55px;
    right: -55px;

    border-radius: 50%;

    background: #dc9750;

    opacity: 0.14;

    z-index: 1;
}


/* =========================================
   DOT PATTERN
========================================= */

.why-tmis-dots {
    position: absolute;

    width: 120px;
    height: 120px;

    left: -45px;
    bottom: -35px;

    background-image: radial-gradient(
        #dc9750 2px,
        transparent 2px
    );

    background-size: 15px 15px;

    opacity: 0.6;

    z-index: 1;
}


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

@media (max-width: 1000px) {

    .why-tmis {
        padding: 70px 5%;
    }

    .why-tmis-wrapper {
        grid-template-columns: 1fr;

        gap: 55px;
    }

    .why-tmis-content {
        text-align: center;
    }

    .why-tmis-intro {
        margin-left: auto;
        margin-right: auto;
    }

    .why-tmis-line {
        margin-left: auto;
        margin-right: auto;
    }

    .why-tmis-features {
        text-align: left;
    }

    .why-tmis-image {
        width: 100%;

        max-width: 700px;

        margin: auto;
    }
}


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

@media (max-width: 650px) {

    .why-tmis {
        padding: 60px 20px;
    }

    .why-tmis-content h2 {
        font-size: 38px;
    }

    .why-tmis-intro {
        font-size: 15px;

        line-height: 1.7;
    }

    .why-tmis-features {
        grid-template-columns: 1fr;

        gap: 5px;
    }

    .why-tmis-column {
        gap: 5px;
    }

    .why-tmis-feature {
        padding: 10px 5px;
    }

    .why-tmis-feature p {
        font-size: 14px;
    }

    .why-tmis-image {
        min-height: 380px;
    }

    .why-tmis-image-frame {
        height: 400px;

        border-radius: 18px;
    }

    .why-tmis-image-badge {
        left: 15px;
        bottom: 15px;

        padding: 10px 14px;
    }

    .why-tmis-image-badge > span {
        width: 32px;
        height: 32px;

        font-size: 15px;
    }

    .why-tmis-image-badge strong {
        font-size: 12px;
    }

    .why-tmis-image-badge small {
        font-size: 9px;
    }

    .why-tmis-circle {
        width: 110px;
        height: 110px;

        right: -30px;
        top: -30px;
    }

    .why-tmis-dots {
        left: -25px;
        bottom: -20px;
    }
}



/* news section ************************************************************************** */
/* =========================================
   TMIS NEWS SECTION
========================================= */

.news-section {
    position: relative;

    width: 100%;

    padding: 100px 6% 110px;

    background: #ffffff;

    overflow: hidden;
}


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

.news-header {
    position: relative;

    z-index: 2;

    max-width: 750px;

    margin: 0 auto 60px;

    text-align: center;
}


.news-header > span {
    display: block;

    margin-bottom: 12px;

    color: #54BEE6;

    font-size: 14px;

    font-weight: 800;

    letter-spacing: 3px;
}


.news-header h2 {
    margin: 0;

    color: #18213d;

    font-size: clamp(36px, 4vw, 52px);

    line-height: 1.15;

    font-weight: 700;
}


.news-header h2 strong {
    color: #54BEE6;
}


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

.news-line {
    position: relative;

    width: 70px;

    height: 4px;

    margin: 20px auto;

    background: #54BEE6;

    border-radius: 20px;
}


.news-line::after {
    content: "";

    position: absolute;

    width: 25px;

    height: 4px;

    left: 22px;

    top: 7px;

    background: #18213d;

    border-radius: 20px;
}


.news-header p {
    max-width: 600px;

    margin: 28px auto 0;

    color: #18213d;

    opacity: 0.7;

    font-size: 15px;

    line-height: 1.8;
}


/* =========================================
   NEWS CONTAINER
========================================= */

.news-container {
    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 1250px;

    margin: auto;

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 30px;
}


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

.news-card {
    position: relative;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid rgba(24, 33, 61, 0.12);

    border-radius: 18px;

    box-shadow:
        0 10px 35px rgba(24, 33, 61, 0.08);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}


.news-card:hover {
    transform: translateY(-10px);

    box-shadow:
        0 20px 45px rgba(24, 33, 61, 0.15);
}


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

.news-image {
    width: 100%;

    height: 260px;

    overflow: hidden;

    border-bottom: 4px solid #54BEE6;
}


.news-image img {
    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform 0.6s ease;
}


.news-card:hover .news-image img {
    transform: scale(1.06);
}


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

.news-content {
    padding: 25px 25px 30px;
}


.news-content h3 {
    margin: 0 0 14px;

    color: #18213d;

    font-size: 21px;

    line-height: 1.4;

    font-weight: 700;
}


.news-content p {
    margin: 0;

    color: #18213d;

    opacity: 0.72;

    font-size: 14px;

    line-height: 1.75;

    /*
       Approximately 5 lines
       with the current card width
    */
    display: -webkit-box;

    -webkit-line-clamp: 5;

    -webkit-box-orient: vertical;

    overflow: hidden;
}


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

.news-section::before {
    content: "";

    position: absolute;

    width: 270px;
    height: 270px;

    top: -150px;
    left: -120px;

    border-radius: 50%;

    background: #54BEE6;

    opacity: 0.12;
}


.news-section::after {
    content: "";

    position: absolute;

    width: 230px;
    height: 230px;

    right: -100px;
    bottom: -120px;

    border-radius: 50%;

    background: #18213d;

    opacity: 0.08;
}


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

@media (max-width: 1000px) {

    .news-section {
        padding: 80px 5% 90px;
    }

    .news-container {
        grid-template-columns: repeat(2, 1fr);

        gap: 25px;
    }

    .news-image {
        height: 260px;
    }
}


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

@media (max-width: 650px) {

    .news-section {
        padding: 65px 20px 75px;
    }

    .news-header {
        margin-bottom: 40px;
    }

    .news-header h2 {
        font-size: 34px;
    }

    .news-header p {
        font-size: 14px;
    }

    .news-container {
        grid-template-columns: 1fr;

        gap: 25px;
    }

    .news-image {
        height: 250px;
    }

    .news-content {
        padding: 22px 20px 28px;
    }

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

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