/*==========================================
100App Careers
Hero Section
==========================================*/
  :root {
    --primary: #ff7a1a;
    --primary-dark: #ff6200;
    --dark: #101010;
    --dark2: #181818;
    --white: #ffffff;
    --text: #c8c8c8;
    --border: rgba(255, 122, 26, .18);
  }

  /*=========================================
RESET
=========================================*/
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    font-family: 'Poppins', sans-serif;
    background: #111;
    color: #fff;
    overflow-x: hidden;
  }

  img {
    max-width: 100%;
    display: block;
  }

  a {
    text-decoration: none;
  }

  ul {
    list-style: none;
  }

  .container,
  .career-container {
    width: 100%;
    max-width: 1320px;
    margin: auto;
    padding: 0 20px;
  }

  /*=========================================
HEADER
=========================================*/
  header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #000;
    z-index: 9999;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .3);
  }

  .header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 82px;
  }

  .logo img {
    height: 52px;
  }

  nav ul {
    display: flex;
    gap: 45px;
    align-items: center;
  }

  nav a {
    color: #fff;
    font-weight: 600;
    transition: .3s;
  }

  nav a:hover {
    color: #ff7a1a;
  }

  .header-right {
    display: flex;
    align-items: center;
    gap: 15px;
  }

  .download-btn {
    background: #ff7a1a;
    color: #fff;
    padding: 14px 28px;
    border-radius: 40px;
    font-weight: 700;
  }

  .download-btn:hover {
    background: #ff6200;
  }

  .menu-toggle {
    display: none;
    border: none;
    background: none;
    color: #fff;
    font-size: 28px;
    cursor: pointer;
  }

  /* ===========================
   FOOTER
=========================== */
  footer {
    background: #0f0f0f;
    color: #fff;
    padding: 70px 0 25px;
  }

  .footer-content {
    max-width: 1320px;
    margin: auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
  }

  .footer-column h3 {
    color: #fff;
    margin-bottom: 20px;
    font-size: 22px;
  }

  .footer-column p {
    color: #cfcfcf;
    line-height: 1.8;
  }

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

  .footer-links li {
    margin-bottom: 12px;
  }

  .footer-links a {
    color: #d5d5d5;
    text-decoration: none;
    transition: .3s;
  }

  .footer-links a:hover {
    color: #ff7a1a;
  }

  .footer-logo {
    height: 60px;
    margin-bottom: 20px;
  }

  .social-links {
    display: flex;
    gap: 12px;
    margin-top: 25px;
  }

  .social-link {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #1d1d1d;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .3s;
  }

  .social-link:hover {
    background: #ff7a1a;
  }

  .copyright {
    border-top: 1px solid rgba(255, 255, 255, .08);
    margin-top: 40px;
    padding-top: 20px;
    text-align: center;
    color: #999;
  }

  .footer-logo {
    height: 70px;
    margin-bottom: 30px;
  }

  .footer-column:first-child p {
    max-width: 320px;
    color: #bfbfbf;
    line-height: 1.9;
  }

  .footer-column h3 {
    position: relative;
    margin-bottom: 28px;
  }

  .footer-column h3::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 45px;
    height: 3px;
    background: #ff7a1a;
    border-radius: 50px;
  }

  .footer-social {
    justify-content: center;
    margin: 45px 0;
    gap: 18px;
  }

  .footer-social a {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #1f1f1f;
    font-size: 20px;
  }

  .footer-social a:hover {
    background: #ff7a1a;
    transform: translateY(-5px);
  }

  .copyright {
    margin-top: 35px;
    padding-top: 25px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    text-align: center;
    color: #999;
  }

  .footer-social {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin: 35px 0 20px;
    padding-top: 25px;
    border-top: 1px solid rgba(255, 255, 255, .08);
  }

  .footer-social .social-link {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-size: 18px;
    transition: .3s;
  }

  .footer-social .social-link:hover {
    background: #ff7a1a;
    transform: translateY(-4px);
  }

  .footer-links li a i {
    width: 22px;
    color: #ff7a1a;
  }

  /*=====================================
MOBILE HEADER
=====================================*/
  @media (max-width: 768px) {
    header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 70px;
      background: #000;
      z-index: 9999;
    }

    .header-content {
      height: 70px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .logo img {
      height: 42px;
      width: auto;
    }

    nav {
      display: none;
    }

    .download-btn {
      display: none;
    }

    .menu-toggle {
      display: flex;
      width: 42px;
      height: 42px;
      border: none;
      background: #ff7a1a;
      border-radius: 10px;
      color: #fff;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      cursor: pointer;
    }

    body {
      padding-top: 70px;
    }
  }

  .mobile-menu {
    position: fixed;
    top: 70px;
    left: -100%;
    width: 280px;
    height: calc(100vh - 70px);
    background: #111;
    padding: 25px;
    transition: .35s;
    z-index: 9998;
    overflow-y: auto;
  }

  .mobile-menu.active {
    left: 0;
  }

  .mobile-menu a {
    display: block;
    padding: 14px 0;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
  }

  .mobile-menu a:hover {
    color: #ff7a1a;
  }

  .mobile-download {
    margin-top: 20px;
    background: #ff7a1a;
    color: #fff !important;
    text-align: center;
    padding: 14px;
    border-radius: 10px;
    border: none !important;
  }

  @media(max-width:768px) {
    .career-hero {
      padding-top: 40px;
    }

    .section-tag {
      margin-top: 10px;
    }
  }

  @media(max-width:768px) {
    .footer-content {
      grid-template-columns: 1fr;
      text-align: center;
      gap: 30px;
    }

    .footer-links li a {
      justify-content: center;
    }

    .footer-social {
      margin-top: 25px;
    }
  }

  /*=========================================
MOBILE
=========================================*/
  @media(max-width:768px) {
    footer {
      padding: 60px 0 20px;
    }

    .footer-content {
          grid-template-columns: 1fr;
      gap: 35px;
    }

    .footer-column {
      text-align: center;
    }

    .footer-column h3:after {
      left: 50%;
      transform: translateX(-50%);
    }

    .footer-logo {
      margin: auto;
      margin-bottom: 20px;
    }

    .footer-column ul li a {
      justify-content: center;
    }

    .footer-social {
      gap: 12px;
    }

    .footer-social a {
      width: 44px;
      height: 44px;
    }

    .copyright {
      font-size: 13px;
      line-height: 1.8;
    }
  }

  /*End head and footer*/
  /*========================*/
  body {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    background: #111;
    color: #fff;
  }
/*=========================================
BLOG HERO
=========================================*/

.blog-hero{

    position:relative;

    overflow:hidden;

    background:linear-gradient(135deg,#111,#1c1c1c);

    padding:150px 0 100px;

    text-align:center;

}

.blog-hero-content{

    max-width:900px;

    margin:auto;

}

.blog-hero h1{

    font-size:72px;

    font-weight:800;

    margin:25px 0;

    color:#fff;

}

.blog-hero h1 span{

    color:#ff7a1a;

}

.blog-hero p{

    max-width:760px;

    margin:auto;

    color:#cfcfcf;

    line-height:1.9;

    font-size:18px;

}

.blog-stats{

    display:flex;

    justify-content:center;

    gap:70px;

    margin-top:60px;

}

.blog-stat{

    text-align:center;

}

.blog-stat h2{

    color:#ff7a1a;

    font-size:42px;

    margin-bottom:10px;

}

.blog-stat span{

    color:#bbb;

}

@media(max-width:768px){

.blog-hero{

padding:120px 0 70px;

}

.blog-hero h1{

font-size:42px;

}

.blog-hero p{

font-size:16px;

}

.blog-stats{

display:grid;

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

gap:20px;

margin-top:40px;

}

.blog-stat h2{

font-size:28px;

}

}

/*====================================
FEATURED BLOG
====================================*/

.featured-blog{

padding:100px 0;

background:#181818;

}

.featured-wrapper{

display:grid;

grid-template-columns:1.1fr 1fr;

gap:50px;

align-items:center;

margin-top:60px;

}

.featured-image{

position:relative;

overflow:hidden;

border-radius:25px;

}

.featured-image img{

width:100%;

display:block;

height:100%;

object-fit:cover;

transition:.4s;

}

.featured-wrapper:hover img{

transform:scale(1.05);

}

.featured-badge{

position:absolute;

top:20px;

left:20px;

background:#ff7a1a;

color:#fff;

padding:10px 18px;

border-radius:30px;

font-size:14px;

font-weight:600;

}

.featured-content h2{

font-size:42px;

margin:20px 0;

color:#fff;

line-height:1.3;

}

.featured-content p{

color:#bbb;

line-height:1.9;

margin-bottom:30px;

}

.blog-meta{

display:flex;

gap:25px;

flex-wrap:wrap;

color:#999;

font-size:14px;

margin-bottom:20px;

}

.blog-meta i{

color:#ff7a1a;

margin-right:6px;

}

.featured-list{

list-style:none;

padding:0;

margin:0 0 35px;

}

.featured-list li{

margin-bottom:18px;

color:#ddd;

}

.featured-list i{

color:#ff7a1a;

margin-right:10px;

}

/* Mobile */

@media(max-width:768px){

.featured-blog{

padding:70px 0;

}

.featured-wrapper{

grid-template-columns:1fr;

gap:35px;

}

.featured-content h2{

font-size:30px;

}

.blog-meta{

gap:15px;

}

}

/*====================================
LATEST ARTICLES
====================================*/

.latest-articles{

    padding:100px 0;

    background:#111;

}

.articles-grid{

    display:grid;

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

    gap:30px;

    margin-top:60px;

}

.article-card{

    background:#1d1d1d;

    border-radius:22px;

    overflow:hidden;

    border:1px solid rgba(255,122,26,.15);

    transition:.35s;

}

.article-card:hover{

    transform:translateY(-10px);

    border-color:#ff7a1a;

    box-shadow:0 20px 50px rgba(255,122,26,.12);

}

.article-image{

    position:relative;

    height:240px;

    overflow:hidden;

}

.article-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.4s;

}

.article-card:hover img{

    transform:scale(1.08);

}

.article-category{

    position:absolute;

    top:18px;

    left:18px;

    background:#ff7a1a;

    color:#fff;

    padding:8px 16px;

    border-radius:25px;

    font-size:13px;

    font-weight:600;

}

.article-content{

    padding:28px;

}

.article-meta{

    display:flex;

    justify-content:space-between;

    color:#999;

    font-size:13px;

    margin-bottom:18px;

}

.article-meta i{

    color:#ff7a1a;

    margin-right:6px;

}

.article-content h3{

    color:#fff;

    font-size:24px;

    line-height:1.5;

    margin-bottom:15px;

}

.article-content p{

    color:#bbb;

    line-height:1.8;

    margin-bottom:22px;

}

.read-btn{

    color:#ff7a1a;

    font-weight:700;

    display:inline-flex;

    align-items:center;

    gap:10px;

    transition:.3s;

}

.read-btn:hover{

    gap:16px;

}

/* Tablet */

@media(max-width:991px){

.articles-grid{

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

}

}

/* Mobile */

@media(max-width:768px){

.latest-articles{

padding:70px 0;

}

.articles-grid{

grid-template-columns:1fr;

gap:25px;

}

.article-content{

padding:22px;

}

.article-content h3{

font-size:22px;

}

}

/*====================================
BLOG CATEGORIES
====================================*/

.blog-categories{

    padding:100px 0;

    background:#181818;

}

.category-grid{

    display:grid;

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

    gap:30px;

    margin-top:60px;

}

.category-card{

    background:#222;

    border-radius:22px;

    padding:35px 25px;

    text-align:center;

    text-decoration:none;

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

    transition:.35s;

}

.category-card:hover{

    transform:translateY(-8px);

    border-color:#ff7a1a;

    box-shadow:0 20px 45px rgba(255,122,26,.15);

}

.category-icon{

    width:80px;

    height:80px;

    margin:auto;

    margin-bottom:22px;

    border-radius:50%;

    background:rgba(255,122,26,.12);

    display:flex;

    align-items:center;

    justify-content:center;

}

.category-icon i{

    font-size:34px;

    color:#ff7a1a;

}

.category-card h3{

    color:#fff;

    font-size:22px;

    margin-bottom:12px;

}

.category-card span{

    color:#bfbfbf;

    font-size:15px;

}

/* Tablet */

@media(max-width:991px){

.category-grid{

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

}

}

/* Mobile */

@media(max-width:768px){

.blog-categories{

padding:70px 0;

}

.category-grid{

grid-template-columns:1fr;

gap:20px;

}

.category-card{

padding:28px;

}

.category-icon{

width:70px;

height:70px;

}

.category-icon i{

font-size:28px;

}

}

/*====================================
NEWSLETTER
====================================*/

.blog-newsletter{

padding:100px 0;

background:#111;

}

.newsletter-box{

background:linear-gradient(135deg,#ff7a1a,#ff9c52);

border-radius:30px;

padding:70px 50px;

text-align:center;

}

.newsletter-box h2{

font-size:52px;

color:#fff;

margin:20px 0;

}

.newsletter-box h2 span{

color:#111;

}

.newsletter-box p{

max-width:700px;

margin:auto;

color:#fff;

line-height:1.9;

}

.newsletter-form{

display:flex;

max-width:700px;

margin:45px auto;

background:#fff;

border-radius:60px;

overflow:hidden;

}

.newsletter-form input{

flex:1;

padding:18px 24px;

border:none;

font-size:16px;

}

.newsletter-form button{

padding:18px 35px;

background:#111;

color:#fff;

border:none;

cursor:pointer;

font-weight:700;

}

.newsletter-stats{

display:flex;

justify-content:center;

gap:60px;

margin-top:40px;

}

.news-stat h3{

font-size:34px;

color:#fff;

margin-bottom:8px;

}

.news-stat span{

color:#fff;

opacity:.9;

}

/*====================================
BLOG CTA
====================================*/

.blog-cta{

padding:100px 0;

background:#181818;

}

.blog-cta-box{

text-align:center;

}

.blog-cta-box h2{

font-size:48px;

margin:20px 0;

color:#fff;

}

.blog-cta-box h2 span{

color:#ff7a1a;

}

.blog-cta-box p{

max-width:700px;

margin:auto;

color:#bbb;

line-height:1.9;

}

.blog-cta-buttons{

display:flex;

justify-content:center;

gap:20px;

margin-top:40px;

flex-wrap:wrap;

}

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

@media(max-width:768px){

.blog-newsletter,

.blog-cta{

padding:70px 0;

}

.newsletter-box{

padding:45px 25px;

}

.newsletter-box h2{

font-size:34px;

}

.newsletter-form{

flex-direction:column;

border-radius:18px;

}

.newsletter-form input{

width:100%;

}

.newsletter-form button{

width:100%;

}

.newsletter-stats{

display:grid;

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

gap:20px;

}

.blog-cta-box h2{

font-size:34px;

}

.blog-cta-buttons{

flex-direction:column;

}

.blog-cta-buttons a{

width:100%;

}

}