:root{--bg:#667FB5;--card:#0b1220;--muted:#9aa4b2;--accent:#06b6d4;--success:#10b981}
    .col {
      flex: 1 0 0%;
    }

    .row-cols-auto > * {
      flex: 0 0 auto;
      width: auto;
    }

    .row-cols-1 > * {
      flex: 0 0 auto;
      width: 100%;
    }

    .row-cols-2 > * {
      flex: 0 0 auto;
      width: 50%;
    }

    .row-cols-3 > * {
      flex: 0 0 auto;
      width: 33.33333333%;
    }

    .row-cols-4 > * {
      flex: 0 0 auto;
      width: 25%;
    }

    .row-cols-5 > * {
      flex: 0 0 auto;
      width: 20%;
    }

    .row-cols-6 > * {
      flex: 0 0 auto;
      width: 16.66666667%;
    }

    .col-auto {
      flex: 0 0 auto;
      width: auto;
    }

    .col-1 {
      flex: 0 0 auto;
      width: 8.33333333%;
    }

    .col-2 {
      flex: 0 0 auto;
      width: 16.66666667%;
    }

    .col-3 {
      flex: 0 0 auto;
      width: 25%;
    }

    .col-4 {
      flex: 0 0 auto;
      width: 33.33333333%;
    }

    .col-5 {
      flex: 0 0 auto;
      width: 41.66666667%;
    }

    .col-6 {
      flex: 0 0 auto;
      width: 50%;
    }

    .col-7 {
      flex: 0 0 auto;
      width: 58.33333333%;
    }

    .col-8 {
      flex: 0 0 auto;
      width: 66.66666667%;
    }

    .col-9 {
      flex: 0 0 auto;
      width: 75%;
    }

    .col-10 {
      flex: 0 0 auto;
      width: 83.33333333%;
    }

    .col-11 {
      flex: 0 0 auto;
      width: 91.66666667%;
    }

    .col-12 {
      flex: 0 0 auto;
      width: 100%;
    }
    *{box-sizing:border-box}
    body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial; margin:0; background:linear-gradient(180deg,#667FB5 0%, #071223 100%); color:#e6eef6}
    header{display:flex;position:sticky;top:0;align-items:center;justify-content:space-between;margin:4px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.03);background-color:#0b1220;}
    header h1{font-size:18px;margin:0}
    header a {float:left;color:white;text-align:center;padding:12px;text-decoration:None;font-size:18px;line-height:25px;border-radius:4px;}
    header a.active{background-color:dodgerblue;color:white;}
    header logo{position:relative;width:30%;height:4%;border-radius:4px;background:linear-gradient(135deg,#0ea5a4,#818cf8);display:flex;align-items:center;justify-content:center;font-weight:600}
    header logo.img{width:100%;height:auto}
    .container{max-width:1100px;margin:28px auto;padding:0 16px}
    .grid{display:grid;grid-template-columns:260px 1fr;gap:20px}

    /* Header bar*/
    .header-right{float: right;text-align: right;}

    /* Slideshow container start*/
    /*.mySlides{display:none;}*/
    .slideshow-container::after, .row::after{
        /*max-width: 1000px;*/
        width: 100px;
        height: 100px;
        position: relative;
        background-image: url('images/slides-background.webp');
        margin: auto;
    }
    /*.text{
        color: #f2f2f2;
        font-size: 15px;
        padding: 8px 12px;
        position: absolute;
        bottom: 50px;
        width: 100%;
        text-align: right;
    }*/
    .image-box, .text-box{
        flex: 1;
        padding: 1rem;
    }
    .image-box img{
        width: 100%;
        height: auto;
        display: block;
    }
    .text-box{
        background-color: transparent;
        text-align: right;
    }
    .prev, .next{
        cursor: pointer;
        position: absolute;
        top: 50%;
        width: auto;
        padding: 16px;
        margin-top: -22px;
        color: white;
        font-size: 18px;
        transition: 0.6s ease;
        border-radius: 0 3px 3px 0;
        user-select: none;
        background-color: rgba(0,0,0,0.5);
    }
    .next{
        right: 0;
        border-radius: 3px 0 0 3px;
    }
    .prev{
        left: 0;
        border-radius: 0 3px 3px 0;
    }
    .numbertext{
        color: #f2f2f2;
        font-size: 12px;
        padding: 8px 12px;
        position: absolute;
        top: 0;
    }
    .dot{
        height: 15px;
        width: 15px;
        margin: 0 2px;
        background-color: #bbb;
        border-radius: 50%;
        display: inline-block;
        transition: background-color 0.6s ease;
    }
    .active{background-color: #717171;}
    .fade{
        animation-name: fade;
        animation-duration: 1.5s;
    }
    @keyframes fade{
        /*from{opacity: .4}
        to {opacity: 1}*/
        0% {left: inline-block}
        50% {left: 200px}
        100% {left: -100px}
    }

    /* Team Members*/
    .column {
      float: left;
      width: 33.3%;
      margin-bottom: 16px;
      padding: 0 8px;
    }

    .container-teams {
      padding: 0 16px;
    }

    .container-teams::after, .row::after {
      content: "";
      clear: both;
      display: table;
    }
    .button {
      border: none;
      outline: 0;
      display: inline-block;
      padding: 8px;
      color: white;
      background-color: #000;
      text-align: center;
      cursor: pointer;
      width: 100%;
    }

    .button:hover {
      background-color: #555;
    }

    /*--------------------------------------------------------------
    # Global Section Titles
    --------------------------------------------------------------*/
    .section-title {
      text-align: center;
      /*background-color: #0e4ac9;*/
      padding-bottom: 60px;
      margin-top: 0;
      position: relative;
    }

    .section-title h2 {
      font-size: 32px;
      font-weight: 700;
      margin-bottom: 20px;
      padding-bottom: 20px;
      text-transform: uppercase;
      position: relative;
      text-decoration: underline solid white 10%;
    }

    .section-title h2:before {
      content: "";
      position: absolute;
      display: block;
      width: 160px;
      height: 1px;
      background: color-mix(in srgb, var(--default-color), transparent 60%);
      left: 0;
      right: 0;
      bottom: 1px;
      margin: auto;
    }

    .section-title h2::after {
      content: "";
      position: absolute;
      display: block;
      width: 60px;
      height: 3px;
      background: var(--accent-color);
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
    }

    .section-title p {
      margin-bottom: 0;
    }

    /*--------------------------------------------------------------
    # Global Footer
    --------------------------------------------------------------*/
    .footer {
      color: var(--default-color);
      background-color: var(--background-color);
      font-size: 14px;
      padding-bottom: 50px;
      position: relative;
    }

    .footer .footer-newsletter {
      background-color: color-mix(in srgb, var(--heading-color), transparent 95%);
      padding: 50px 0;
    }

    .footer .footer-newsletter h4 {
      font-size: 24px;
    }

    .footer .footer-newsletter .newsletter-form {
      margin-top: 30px;
      margin-bottom: 15px;
      padding: 6px 8px;
      position: relative;
      background-color: color-mix(in srgb, var(--background-color), transparent 50%);
      border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
      box-shadow: 0px 2px 25px rgba(0, 0, 0, 0.1);
      display: flex;
      transition: 0.3s;
      border-radius: 50px;
    }

    .footer .footer-newsletter .newsletter-form:focus-within {
      border-color: var(--accent-color);
    }

    .footer .footer-newsletter .newsletter-form input[type=email] {
      border: 0;
      padding: 4px;
      width: 100%;
      background-color: color-mix(in srgb, var(--background-color), transparent 50%);
      color: var(--default-color);
    }

    .footer .footer-newsletter .newsletter-form input[type=email]:focus-visible {
      outline: none;
    }

    .footer .footer-newsletter .newsletter-form input[type=submit] {
      border: 0;
      font-size: 16px;
      padding: 0 20px;
      margin: -7px -8px -7px 0;
      background: var(--accent-color);
      color: var(--contrast-color);
      transition: 0.3s;
      border-radius: 50px;
    }

    .footer .footer-newsletter .newsletter-form input[type=submit]:hover {
      background: color-mix(in srgb, var(--accent-color), transparent 20%);
    }

    .footer .footer-top {
      padding-top: 50px;
    }

    .footer .social-links a {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: 1px solid color-mix(in srgb, var(--default-color), transparent 50%);
      font-size: 16px;
      color: color-mix(in srgb, var(--default-color), transparent 20%);
      margin-right: 10px;
      transition: 0.3s;
    }

    .footer .social-links a:hover {
      color: var(--accent-color);
      border-color: var(--accent-color);
    }

    .footer h4 {
      font-size: 16px;
      font-weight: bold;
      position: relative;
      padding-bottom: 12px;
    }

    .footer .footer-links {
      margin-bottom: 30px;
    }

    .footer .footer-links ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .footer .footer-links ul i {
      margin-right: 3px;
      font-size: 12px;
      line-height: 0;
      color: var(--accent-color);
    }

    .footer .footer-links ul li {
      padding: 10px 0;
      display: flex;
      align-items: center;
    }

    .footer .footer-links ul li:first-child {
      padding-top: 0;
    }

    .footer .footer-links ul a {
      display: inline-block;
      color: color-mix(in srgb, var(--default-color), transparent 20%);
      line-height: 1;
    }

    .footer .footer-links ul a:hover {
      color: var(--accent-color);
    }

    .footer .footer-about a {
      color: var(--heading-color);
      font-size: 28px;
      font-weight: 600;
      text-transform: uppercase;
      font-family: var(--heading-font);
    }

    .footer .footer-contact p {
      margin-bottom: 5px;
    }

    .footer .copyright {
      padding-top: 25px;
      padding-bottom: 25px;
      border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    }

    .footer .copyright p {
      margin-bottom: 0;
    }

    .footer .credits {
      margin-top: 6px;
      font-size: 13px;
    }

    /*--------------------------------------------------------------
    # Skills Section
    --------------------------------------------------------------*/
    .skills .content h3 {
      font-size: 2rem;
      font-weight: 700;
    }

    .skills .content p {
      color: color-mix(in srgb, var(--default-color), transparent 30%);
    }

    .skills .content p:last-child {
      margin-bottom: 0;
    }

    .skills .content ul {
      list-style: none;
      padding: 0;
    }

    .skills .content ul li {
      padding-bottom: 10px;
    }

    .skills .progress {
      height: 60px;
      display: block;
      background: none;
      border-radius: 0;
    }

    .skills .progress .skill {
      color: var(--default-color);
      padding: 0;
      margin: 0 0 6px 0;
      text-transform: uppercase;
      display: block;
      font-weight: 600;
      font-family: var(--heading-font);
    }

    .skills .progress .skill .val {
      float: right;
      font-style: normal;
    }

    .skills .progress-bar-wrap {
      background: color-mix(in srgb, var(--heading-color), transparent 90%);
      height: 10px;
    }

    .skills .progress-bar {
      width: 1px;
      height: 10px;
      transition: 0.9s;
      background-color: var(--heading-color);
    }

    /* sidebar */
    .sidebar{background:var(--card);padding:16px;border-radius:12px}
    .user-card{display:flex;gap:12px;align-items:center}
    .avatar{width:48px;height:48px;border-radius:8px;background:linear-gradient(135deg,#0ea5a4,#818cf8);display:flex;align-items:center;justify-content:center;font-weight:600}
    .muted{color:var(--muted);font-size:13px}
    nav{margin-top:18px}
    nav button{display:block;width:100%;text-align:left;padding:10px;border-radius:8px;border:none;background:transparent;color:inherit;margin-bottom:8px;cursor:pointer}
    nav button.active{background:linear-gradient(90deg,rgba(6,182,212,0.08),rgba(129,140,248,0.06));border:1px solid rgba(255,255,255,0.02)}

    /* card */
    .card{background:var(--card);padding:16px;border-radius:12px}
    .flex{display:flex;gap:12px;align-items:center}
    .row{display:flex;gap:12px}
    .btn{padding:8px 12px;border-radius:8px;border:none;cursor:pointer}
    .btn.primary{background:var(--accent);color:#042027}
    .btn.ghost{background:#E3E4E7;color:#042027;border:1px solid rgba(255,255,255,0.04)}
    .muted{color:var(--muted)}

    /* ad list */
    .ads-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-top:12px}
    .ad{background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);padding:12px;border-radius:10px}
    .ad img{width:100%;height:120px;object-fit:cover;border-radius:8px}
    .ad h3{margin:8px 0 4px;font-size:15px}
    .small{font-size:13px}

    /* forms */
    form{display:flex;flex-direction:column;gap:10px}
    input,select,textarea{padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:inherit}
    label{font-size:13px}

    /* login modal */
    #auth{max-width:480px;margin:80px auto}
    .center{display:flex;align-items:center;justify-content:center}

    /* table */
    table{width:100%;border-collapse:collapse}
    th,td{padding:8px;text-align:left;border-bottom:1px solid rgba(255,255,255,0.03)}

    /* footer */
    footer{margin-top:30px;text-align:center;color:var(--muted);font-size:13px}

    @media (max-width:760px){
    .grid{grid-template-columns:1fr}
    .sidebar{order:2}
    .container{padding:12px}
    .col-lg {
        flex: 1 0 0%;
      }
      .row-cols-lg-auto > * {
        flex: 0 0 auto;
        width: auto;
      }
      .row-cols-lg-1 > * {
        flex: 0 0 auto;
        width: 100%;
      }
      .row-cols-lg-2 > * {
        flex: 0 0 auto;
        width: 50%;
      }
      .row-cols-lg-3 > * {
        flex: 0 0 auto;
        width: 33.33333333%;
      }
      .row-cols-lg-4 > * {
        flex: 0 0 auto;
        width: 25%;
      }
      .row-cols-lg-5 > * {
        flex: 0 0 auto;
        width: 20%;
      }
      .row-cols-lg-6 > * {
        flex: 0 0 auto;
        width: 16.66666667%;
      }
      .col-lg-auto {
        flex: 0 0 auto;
        width: auto;
      }
      .col-lg-1 {
        flex: 0 0 auto;
        width: 8.33333333%;
      }
      .col-lg-2 {
        flex: 0 0 auto;
        width: 16.66666667%;
      }
      .col-lg-3 {
        flex: 0 0 auto;
        width: 25%;
      }
      .col-lg-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
      }
      .col-lg-5 {
        flex: 0 0 auto;
        width: 41.66666667%;
      }
      .col-lg-6 {
        flex: 0 0 auto;
        width: 50%;
      }
      .col-lg-7 {
        flex: 0 0 auto;
        width: 58.33333333%;
      }
      .col-lg-8 {
        flex: 0 0 auto;
        width: 66.66666667%;
      }
      .col-lg-9 {
        flex: 0 0 auto;
        width: 75%;
      }
      .col-lg-10 {
        flex: 0 0 auto;
        width: 83.33333333%;
      }
      .col-lg-11 {
        flex: 0 0 auto;
        width: 91.66666667%;
      }
      .col-lg-12 {
        flex: 0 0 auto;
        width: 100%;
      }
    }