/* =========================================================
   ROOT VARIABLES
========================================================= */
:root{
  --primary:#25aae1;
  --primary-hover:#4338ca;

  --secondary:#6c757d;
  --success:#22c55e;
  --danger:#ef4444;
  --warning:#f59e0b;
  --info:#17a2b8;

  --light:#f8f9fa;
  --dark:#343a40;
  --white:#ffffff;

  --bg:#ffffff;
  --text:#000000;
  --card:#ffffff;
  --border:#e5e7eb;

  --font:'Roboto',sans-serif;

  --base:.75rem;
  --heading-md:16px;

  --radius:8px;

  --gradient-primary:
    linear-gradient(to right,#25aae1,#4481eb,#04befe,#3f86ed);

  --gradient-secondary:
    linear-gradient(135deg,#6366f1,#06b6d4);

  --shadow-sm:0 2px 10px rgba(0,0,0,.05);
  --shadow-md:0 4px 20px rgba(0,0,0,.05);
  --shadow-lg:0 10px 30px rgba(0,0,0,.08);

  --btn-text: white;
}

/* =========================================================
   THEMES
========================================================= */
[data-theme="dark"]{
  --bg:#121212;
  --text:#ffffff;
  --card:#1e1e1e;
  --border:#333;
}

[data-theme="blue"]{
  --primary:#3b82f6;
  --primary-hover:#2563eb;
}

[data-theme="green"]{
  --primary:#10b981;
  --primary-hover:#059669;
}

[data-theme="purple"]{
  --primary:#8b5cf6;
  --primary-hover:#7c3aed;
}

[data-theme="orange"]{
  --primary:#f97316;
  --primary-hover:#ea580c;
}

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

html,
body{
  width:100%;
  overflow-x:hidden;
}

body{
  font:var(--base) var(--font);
  background:var(--bg);
  color:var(--text);
  transition:.3s;
  line-height:1.5;
}

body.login-page{
  background:url('../images/login/tb-portal-login-bg.jpg')
  center/cover no-repeat;
}

.sidebar .nav.sub-menu{
    padding: 0.25rem .8rem;
}

.sidebar .nav.sub-menu .nav-item{
    margin: 1px 0;
}

p{
  font-size:var(--base);
  margin-bottom:.5rem;
}

a{
  text-decoration:none;
  color:var(--primary);
  transition:.3s;
}

a:hover{
  text-decoration:none;
}

img{
  max-width:100%;
  height:auto;
}

ul{
  padding-left:1rem;
}

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

/* =========================================================
   DISPLAY UTILITIES
========================================================= */
.d-flex{display:flex !important;}
.d-block{display:block !important;}
.d-inline-block{display:inline-block !important;}
.d-none{display:none !important;}

.flex{display:flex;}
.flex-column{flex-direction:column;}
.flex-wrap{flex-wrap:wrap;}
.flex-nowrap{flex-wrap:nowrap;}
.flex-grow{flex-grow:1;}

.align-center{align-items:center;}
.justify-center{justify-content:center;}
.justify-between{justify-content:space-between;}

.flex-center{
  display:flex;
  align-items:center;
  justify-content:center;
}

.flex-between{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

/* =========================================================
   GAP UTILITIES
========================================================= */
.gap-5{gap:5px;}
.gap-10{gap:10px;}
.gap-15{gap:15px;}
.gap-20{gap:20px;}
.gap-30{gap:30px;}

/* =========================================================
   TEXT UTILITIES
========================================================= */
.text-left{text-align:left;}
.text-center{text-align:center;}
.text-right{text-align:right;}

.text-bold{font-weight:bold;}
.text-white{color:#fff !important;}
.text-primary{color:var(--primary) !important;}
.text-success{color:var(--success) !important;}
.text-danger{color:var(--danger) !important;}
.text-warning{color:var(--warning) !important;}
.text-muted{color:#6b7280 !important;}

/* =========================================================
   BACKGROUND UTILITIES
========================================================= */
.bg-white{
  background:#fff !important;
}

.bg-primary{
  background:var(--primary) !important;
  color:#fff !important;
}

.bg-gradient{
  background:var(--gradient-primary) !important;
  color:#fff !important;
}

/* =========================================================
   BORDER / SHADOW
========================================================= */
.rounded{
  border-radius:var(--radius);
}

.border-none{
  border:none !important;
}

.shadow-sm{
  box-shadow:var(--shadow-sm);
}

.shadow-md{
  box-shadow:var(--shadow-md);
}

.shadow-lg{
  box-shadow:var(--shadow-lg);
}

/* =========================================================
   WIDTH UTILITIES
========================================================= */
.w-auto{width:auto !important;}
.w-5{width:5%}
.w-10{width:10%}
.w-15{width:15%}
.w-20{width:20%}
.w-25{width:25%}
.w-30{width:30%}
.w-40{width:40%}
.w-50{width:50%}
.w-60{width:60%}
.w-70{width:70%}
.w-75{width:75%}
.w-100{width:100%}

.min-w-150{
  min-width:150px;
}

.max-w-100{
  max-width:100%;
}

/* =========================================================
   SPACING UTILITIES
========================================================= */
.m-0{margin:0 !important;}

.mt-5{margin-top:5px;}
.mt-10{margin-top:10px;}
.mt-15{margin-top:15px;}
.mt-20{margin-top:20px;}
.mt-30{margin-top:30px;}

.mb-5{margin-bottom:5px;}
.mb-10{margin-bottom:10px;}
.mb-15{margin-bottom:15px;}
.mb-20{margin-bottom:20px;}
.mb-30{margin-bottom:30px;}

.ml-auto{margin-left:auto;}
.mr-auto{margin-right:auto;}

.p-5{padding:5px;}
.p-10{padding:10px;}
.p-15{padding:15px;}
.p-20{padding:20px;}
.p-30{padding:30px;}

/* =========================================================
   BUTTONS
========================================================= */
.tb-btn{
  border:none;
  cursor:pointer;
  outline:none;
  user-select:none;
  transition:.3s;
  border-radius:10px;
  padding:.75rem 1rem;
  font-size:.9rem;
  letter-spacing:.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: white;
}

.tb-btn:focus{
  outline:0;
  box-shadow:none;
}

.tb-btn:disabled{
  opacity:.6;
  cursor:not-allowed;
}

.tb-btn-sm{
  height:40px !important;
}

.tb-btn-hover{
  width:150px;
  height:48px;
  color:var(--btn-text);
  text-align:center;

  background:linear-gradient(
    to right,
    #25aae1,
    #4481eb,
    #04befe,
    #3f86ed
  );

  background-size:300% 100%;
  box-shadow:0 4px 15px rgba(65,132,234,.75);
}

.tb-btn-hover:hover{
  background-position:100% 0;
}

.tb-btn-primary{
  background:var(--gradient-primary);
  color:#fff;
}

.tb-btn-primary:hover{
  opacity:.9;
}

.tb-btn-outline{
  border:1px solid var(--border);
  background:transparent;
}

.tb-btn-sm{
  padding:.4rem .7rem;
  font-size:.7rem;
}

.tb-btn-icon{
  width:35px;
  height:35px;
  padding:0;

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

/* =========================================================
   FORM
========================================================= */
.form-group{
  margin-bottom:15px;
}

.tb-label{
  display:block;
  margin-bottom:5px;
  font-size:var(--base);
}

.form-control,
.select2-container--default .select2-selection--single{
  width:100%;
  padding:.5rem .75rem;
  border:1px solid var(--border);
  border-radius:8px;
  font-size:var(--base);
  background:#fff;
}

.form-control:focus{
  outline:none;
  border-color:var(--primary);
}

.form-control:disabled{
  background:#f3f4f6;
  cursor:not-allowed;
}

.form-control-sm{
  padding:.35rem .5rem;
  font-size:.7rem;
}

.form-control-lg{
  padding:.8rem 1rem;
}

textarea.form-control{
  resize:vertical;
  min-height:100px;
}

/* =========================================================
   CARDS
========================================================= */
.card,
.custom-card,
.quick-links-card,
.activity-card{
  background:var(--card);
  border-radius:16px;
  box-shadow:var(--shadow-lg);
  transition:.3s;
  border:1px solid var(--border);
}

.card-hover:hover,
.custom-card:hover{
  /* transform:translateY(-3px); */
  box-shadow:0 12px 25px rgba(0,0,0,.1);
}

.custom-card,
.quick-links-card{
  padding:15px;
}

.card-header{
  padding:15px;
  border-bottom:1px solid var(--border);
  font-weight:600;
  font-size:var(--heading-md);
}

.card-body{
  padding:15px;
}

.card-footer{
  padding:15px;
  border-top:1px solid var(--border);
  background:transparent;
}

.card-title{
  font-size:var(--heading-md);
  font-weight:600;
  margin-bottom:10px;
}

/* =========================================================
   CARD 2
========================================================= */
.card-option {
      background: white;
      border-radius: 20px;
      padding: 25px;
      text-align: center;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      cursor: pointer;
      box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    }

    .card-option:hover {
      transform: translateY(-8px);
      box-shadow: 0 10px 25px rgba(0,0,0,0.12);
    }

    .card-option i {
      font-size: 3rem;
      margin-bottom: 15px;
      color: #0d6efd;
    }

    .card-option h5 {
      font-weight: 600;
      margin-bottom: 10px;
    }

    .card-option p {
      font-size: 0.9rem;
      color: #6c757d;
    }


/* =========================================================
   QUICK LINKS
========================================================= */
.quick-links{
  display:grid;
  gap:12px;
}

.quick-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px;
  border-radius:12px;
  background:#f8f9fd;
  transition:.3s;
  color:#333;
}

.quick-item:hover{
  background:var(--gradient-primary);
  color:#fff;
  transform:translateX(3px);
}

.quick-item i{
  width:30px;
  height:30px;
  border-radius:10px;
  background:#e9ecff;

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

.quick-item:hover i{
  background:#ffffff22;
  color:#fff;
}

/* =========================================================
   STATS
========================================================= */
.stats-box{
  display:flex;
  gap:15px;
}

.stat-card{
  flex:1;
  display:flex;
  align-items:center;
  gap:15px;
  padding:20px;
  border-radius:14px;
  background:var(--gradient-secondary);
  color:#fff;
}

.stat-card i{
  font-size:24px;
}

.stat-card h3{
  font-size:var(--heading-md);
}

.stat-card p{
  opacity:.9;
}

/* =========================================================
   TABLE
========================================================= */
.table-responsive{
  width:100%;
  overflow-x:auto;
}

.table{
  width:100%;
  border-collapse:collapse;
}

.table th,
.table td{
  padding:10px;
  border:1px solid var(--border);
  vertical-align:middle;
}

.table th{
  background:#f8f9fa;
}

.table-hover tbody tr:hover{
  background:#f8fafc;
}

.table-striped tbody tr:nth-child(even){
  background:#fafafa;
}

.table td.fit,
.table th.fit{
  width:1%;
  white-space:nowrap;
}

.table td p{
  margin-bottom:0;
}

.table-modern-wrapper{
  width: 100%;
  background:#fff;
  padding:20px;
  border-radius:16px;
  box-shadow:var(--shadow-md);
}

.table-modern{
  width:100%;
  border-collapse:separate;
  border-spacing:0 10px;
  overflow: visible !important;
}

.table-modern thead th{
  background:#f7f9fc;
  padding: 5px 14px;
  border:none;
  color:#6b7280;
      white-space: nowrap;
}


.table-modern tbody tr{
  background:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
  transition:.2s;
}

.table-modern tbody tr,
.table-modern tbody td{
    overflow: visible !important;
}


.table-modern tbody tr:hover{
  /* transform:translateY(-2px); */
  box-shadow:0 6px 18px rgba(0,0,0,.08);
}

.table-modern tbody tr td.dropdown{
    position: relative;
}
.table-modern .dropdown .dropdown-toggle::after{
  display: none;
}
.table-modern a.dropdown-toggle {
    padding: 5px 10px;
    background: #dddddd;
    cursor: pointer;
    border-radius: 7px;
}

.dropdown-menu{
    z-index: 9999 !important;
}

.dropdown-item,
.dropdown .dropdown-menu .dropdown-item{
    padding: .25rem 0.5rem;
}
.dropdown-item img{
    width: 26px;
    height: 26px;
    margin-right: 0.5rem;   
}

.table-modern td{
  padding:10px;
  border:none;
}

/* =========================================================
   ACTION BUTTONS
========================================================= */
.tb-btn img{
  width:20px;
  height:20px;
}
.action-group{
  display:flex;
  gap:8px;
  justify-content:center;
}

.action-btn{
  width:30px;
  height:30px;
  border:none;
  border-radius:8px;
  cursor:pointer;
  transition:.2s;

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

.action-btn:hover{
  transform:scale(1.05);
}

.action-btn.view{
  background:#e0f2fe;
  color:#0284c7;
}

.action-btn.edit{
  background:#fef3c7;
  color:#d97706;
}

.action-btn.delete{
  background:#fee2e2;
  color:#dc2626;
}

/* =========================================================
   BADGES
========================================================= */
.badge{
  padding:6px 12px;
  border-radius:20px;
  font-size:12px;
}

.badge-primary{
  background:#eef2ff;
  color:#4f46e5;
}

.badge-success{
  background:#dcfce7;
  color:#15803d;
}

.badge-danger{
  background:#fee2e2;
  color:#dc2626;
}

/* =========================================================
   DASHBOARD
========================================================= */
.dashboard{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

.content-wrapper{
  flex:1;
  padding:20px;
}

.content-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:20px;
}

/* =========================================================
   SIDEBAR
========================================================= */
.sidebar .nav{
  margin-left:0;
}

.sidebar .nav-link{
  padding:.6rem .8rem;
  border-radius:10px;
  transition:.3s;
}

.sidebar .nav-link:hover,
.sidebar .nav-item .nav-link.active{
  background:var(--gradient-primary) !important;
  color:#fff;
}

/* =========================================================
   FILTER BAR
========================================================= */
.filter-bar{
  background:#fff;
  padding:15px;
  border-radius:14px;
  box-shadow:var(--shadow-sm);
  min-width: 300px;
}

.filter-bar-input-group{
  display:flex;
  gap:10px;
}

/* =========================================================
   LOADER
========================================================= */
.loader-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.5);

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

  z-index:9999;
}

.spinner{
  width:50px;
  height:50px;
  border:5px solid #fff;
  border-top:5px solid var(--primary);
  border-radius:50%;
  animation:spin 1s linear infinite;
}

.loader-sm{
  width:18px;
  height:18px;
  border-width:2px;
}

.loader-lg{
  width:70px;
  height:70px;
  border-width:6px;
}

@keyframes spin{
  100%{
    transform:rotate(360deg);
  }
}

/* =========================================================
   UPLOAD BOX
========================================================= */
.upload-box{
  border:2px dashed #c7d2fe;
  border-radius:16px;
  height:220px;
  background:#f8fafc;
  cursor:pointer;
  overflow:hidden;
  position:relative;
  transition:.3s;

  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
}

.upload-box:hover{
  background:#eef2ff;
  border-color:#6366f1;
}

.upload-box i{
  font-size:40px;
  color:#6366f1;
}

.upload-box img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* =========================================================
   REMOVE BUTTONS
========================================================= */
.remove-img,
.remove-slot{
  position:absolute;
  top:10px;
  right:10px;
  width:30px;
  height:30px;
  border:none;
  border-radius:50%;
  background:transparent;
  cursor:pointer;

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

.remove-img:hover,
.remove-slot:hover{
  background:#dfdfdf;
}

/* =========================================================
   TIMELINE
========================================================= */
.timeline{
  position:relative;
}

.timeline::before{
  content:"";
  position:absolute;
  left:-20px;
  top:0;
  width:3px;
  height:100%;
  background:#dbeafe;
}

.slot-item{
  position:relative;
}

.slot-item::before{
  content:"";
  position:absolute;
  left:-28px;
  top:20px;
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--gradient-secondary);
}

/* =========================================================
   TABS
========================================================= */
.tab-content,
.tab-pane.container{
  padding:0 !important;
  width:100%;
  border:none;
}

/* =========================================================
   NAVIGATION SCROLL
========================================================= */
.nav-scroll-wrapper{
  position:relative;
  display:flex;
  align-items:center;
}

.scroll-btn{
  width:35px;
  height:35px;
  border:none;
  cursor:pointer;
  background:#ffffffcc;
  transition:.3s;
}

.scroll-btn:hover{
  background:var(--primary);
  color:#fff;
}

/* =========================================================
   IMAGE HELPERS
========================================================= */
.object-cover{
  object-fit:cover;
}

.object-contain{
  object-fit:contain;
}

.img-circle{
  border-radius:50%;
}

/* =========================================================
   TRANSITIONS / EFFECTS
========================================================= */
.transition{
  transition:.3s ease;
}

.hover-scale:hover{
  transform:scale(1.03);
}

.hover-up:hover{
  transform:translateY(-2px);
}

/* =========================================
    ITINERARY
============================================ */
.airline-offer-container .form-control{
  height: unset;
}
.hotel-offer-container .form-control{
  height: unset;
}
.hotel-offer-container .form-control{
  height: unset;
}
.itinerary-nav-scroll-wrapper .scroll-btn{
  height: stretch !important;
}
.input-height-unset{
  height: 2.875rem !important;
}

/* =========================================================
   SCROLLBAR
========================================================= */
.dt-buttons button{
  background-color: #f3f3f3;
  border-color: #f3f3f3;
  padding: 0.475rem .75rem;
}

/* =========================================================
   SCROLLBAR
========================================================= */
::-webkit-scrollbar{
  width:8px;
  height:8px;
}

::-webkit-scrollbar-track{
  background:#f1f1f1;
}

::-webkit-scrollbar-thumb{
  background:#bdbdbd;
  border-radius:10px;
}

::-webkit-scrollbar-thumb:hover{
  background:#888;
}

/* =========================================================
   ANIMATIONS
========================================================= */
@keyframes bounce{
  0%,100%{
    transform:translateY(0);
  }

  50%{
    transform:translateY(-20px);
  }
}

/* =========================================================
   DARK MODE IMPROVEMENTS
========================================================= */
[data-theme="dark"] body{
  background:var(--bg);
  color:var(--text);
}

[data-theme="dark"] .card,
[data-theme="dark"] .custom-card,
[data-theme="dark"] .table-modern-wrapper,
[data-theme="dark"] .filter-bar{
  background:var(--card);
  border-color:var(--border);
}

[data-theme="dark"] .table th{
  background:#2a2a2a;
  color:#fff;
}

[data-theme="dark"] .form-control{
  background:#2a2a2a;
  border-color:#444;
  color:#fff;
}

[data-theme="dark"] .quick-item{
  background:#2a2a2a;
  color:#fff;
}

/* =========================================================
   RESPONSIVE
========================================================= */
@media(max-width:992px){

  .stats-box{
    flex-direction:column;
  }

  .filter-bar,
  .table-modern-wrapper{
    width:100%;
  }

  .hide-lg{
    display:none !important;
  }

  .w-lg-100{
    width:100% !important;
  }
}

@media(max-width:768px){

  .content-header{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }

  .scroll-btn{
    display:none;
  }

  .quick-links{
    grid-template-columns:1fr;
  }

  .table{
    min-width:700px;
  }

  .hide-md{
    display:none !important;
  }

  .text-md-center{
    text-align:center !important;
  }

  .flex-md-column{
    flex-direction:column !important;
  }

  .w-md-100{
    width:100% !important;
  }
}

@media(max-width:576px){

  .table{
    min-width:900px;
  }

  .hide-sm{
    display:none !important;
  }

  .p-sm-10{
    padding:10px !important;
  }
}

/*input style*/
.form-control, .asColorPicker-input, .dataTables_wrapper select, .jsgrid .jsgrid-table .jsgrid-filter-row input[type=text], .jsgrid .jsgrid-table .jsgrid-filter-row select, .jsgrid .jsgrid-table .jsgrid-filter-row input[type=number], .select2-container--default .select2-selection--single, .select2-container--default .select2-selection--single .select2-search__field, .typeahead, .tt-query, .tt-hint{
  height: 0.875rem;
}

.car-voucher-edit .form-control, 
.car-voucher-edit .asColorPicker-input, 
.car-voucher-edit .dataTables_wrapper select, 
.car-voucher-edit .jsgrid .jsgrid-table .jsgrid-filter-row input[type=text], 
.car-voucher-edit .jsgrid .jsgrid-table .jsgrid-filter-row select, 
.car-voucher-edit .jsgrid .jsgrid-table .jsgrid-filter-row input[type=number], 
.car-voucher-edit .select2-container--default .select2-selection--single, 
.car-voucher-edit .select2-container--default .select2-selection--single .select2-search__field, 
.car-voucher-edit .typeahead, 
.car-voucher-edit .tt-query, 
.car-voucher-edit .tt-hint{
  height: unset
}
.car-voucher-create .form-control, 
.car-voucher-create .asColorPicker-input, 
.car-voucher-create .dataTables_wrapper select, 
.car-voucher-create .jsgrid .jsgrid-table .jsgrid-filter-row input[type=text], 
.car-voucher-create .jsgrid .jsgrid-table .jsgrid-filter-row select, 
.car-voucher-create .jsgrid .jsgrid-table .jsgrid-filter-row input[type=number], 
.car-voucher-create .select2-container--default .select2-selection--single, 
.car-voucher-create .select2-container--default .select2-selection--single .select2-search__field, 
.car-voucher-create .typeahead, 
.car-voucher-create .tt-query, 
.car-voucher-create .tt-hint{
  height: unset
}

.input-group {
  position: relative;
  width: 100%;
  margin-top: 0.4rem;
  margin-bottom: 0.4rem;
}

.animated-input{
    position: relative;
}

.animated-input .input{
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e3e3e3;
    border-radius: 6px;
    outline: none;
    background: transparent;
    color: #787878;
    transition: .3s;
}

.animated-input .input:focus{
    border-color: #ce6349;
}

/* Placeholder / Floating Label */
.animated-input .placeholder{
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 0 5px;
    font-size: 14px;
    color: #787878;
    background: #fff;
    pointer-events: none;
    transition: .3s;
}

/* Active State */
.animated-input .input:focus + .placeholder,
.animated-input .input:not(:placeholder-shown) + .placeholder{
    top: -9px;
    left: 8px;
    font-size: 12px;
    color: #ce6349;
    border-radius: 4px;
}

/*end input style*/

.table td img, .jsgrid .jsgrid-table td img{
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 0px;
}

/* ================== cloud animation ==================== */
    .clouds {
      position: relative;
      display: flex;
      align-items: center;
      height: 230px;
    }
    
    .animation {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
    }
    
    .animation::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      /*background: linear-gradient(0deg, #fff, #0000, #fff);*/
      background-image: radial-gradient(circle, #f5f7ff, #ffffff00, #ffffff00, #ffffff00, #ffffff00, #ffffff00, #ffffff00, #ffffff00, #ffffff00, #ffffffb8, #fffffff2, #f5f7ff);
     /* backdrop-filter: blur(8px);             - blur effect */
     /*-webkit-backdrop-filter: blur(8px);     - Safari support */

      z-index: 1;
    }
    
    .animation::after {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height:100%;
      background: #03a9f445;
    }
    
    .animation .cloud {
      background-repeat: repeat-X;
      height: 100%;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
    }
    
    .animation .cloud1 {
      background-image: url('https://raw.githubusercontent.com/gestok/clouds/main/clouds/clouds_1.png');
      animation: move1 20s infinite linear;
    }
    .animation .cloud2 {
      background-image: url('https://raw.githubusercontent.com/gestok/clouds/main/clouds/clouds_2.png');
      animation: move1 15s infinite linear;
    }
    .animation .cloud3 {
      background-image: url('https://raw.githubusercontent.com/gestok/clouds/main/clouds/clouds_3.png');
      animation: move1 17s infinite linear;
    }
    .clouds {
      text-align: center;
    }
    .clouds h2 {
      font-size: 40px;
      text-shadow: 0 1px 2px #15151550;
      margin: 0 0 12px;
    }
    .clouds p {
      max-width: 400px;
      margin: 6px auto 24px;
      text-shadow: 0 1px 2px #15151550;
    }
    .clouds .btn {
      text-shadow: 0 1px 2px #15151550;
      background: transparent;
      border: solid 1px #fff;
      padding: 10px 21px;
      color: inherit;
      font-weight: 700;
      font-size: 17px;
      cursor: pointer;
      box-shadow: 0 8px 16px -4px #15151550;
    }
    .clouds .btn:hover {
      background: #fff2;
    }
    
    .divider {
      position: relative;
      height: 28px;
    }
    
    .divider::before,
    .divider::after {
      content: '';
      position: absolute;
      left: 50%;
      top: 50%;
    }
    
    .divider::before {
      width: 100px;
      height: 1px;
      background: linear-gradient(90deg, #fff 35%, transparent 35%, transparent 65%, #fff 65%);
      transform: translate(-50%,-50%);
    }
    
    .divider::after {
      width: 10px;
      height: 10px;
      background: #fff;
      transform: translate(-50%,-50%) rotate(45deg);
      box-shadow: 0 1px 2px #15151540;
    }
    
    @keyframes move1 {
      100% {background-position: -1000px 0;}
    }
    @keyframes move2 {
      100% {background-position: -1000px 0;}
    }
    @keyframes move3 {
      100% {background-position: -1579px 0;}
    }
    /* Options */
    .options {
      position: fixed;
      bottom: 20px;
      right: 20px;
      display: flex;
      flex-flow: row wrap;
      gap: 10px;
      z-index: 10;
    }
    .options .opt {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      border: none;
      cursor: pointer;
      box-shadow: 4px 4px 8px 0px #0005;
    }
    .opt1 {
      background: linear-gradient(45deg, #fff 50%, #03a9f445 50%);
    }
    .opt2 {
      background: linear-gradient(45deg, #151515 50%, #f96 50%);
    }
    .opt3 {
      background: linear-gradient(45deg, #353535 50%, #009688 50%);
    }
    .opt4 {
      background: linear-gradient(45deg, #b2ebf2 50%, #034070 50%);
    }
/* ================== end cloud animation ==================== */

/* =========================================================
   preloader
========================================================= */
#preloader {
    position: fixed;
    inset: 0;
    z-index: 99999;

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

    background:
        radial-gradient(circle, #111827 0%, #020617 100%);
}

.neon-loader {
    position: relative;
    text-align: center;
}

.logo {
    width: 110px;
    position: relative;
    z-index: 2;

    animation: logoScale 2s ease infinite;
}

/* .energy-ring {
    position: absolute;
    width: 220px;
    height: 220px;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    background:
        conic-gradient(
            #00f0ff,
            #7c3aed,
            #00f0ff
        );

    filter: blur(12px);

    animation: spin 4s linear infinite;
} */

.progress-bar {
    width: 220px;
    height: 4px;

    margin-top: 40px;

    background: rgba(255,255,255,0.1);
    overflow: hidden;
    border-radius: 20px;
}

.progress-bar span {
    display: block;
    width: 40%;
    height: 100%;

    background: linear-gradient(
        90deg,
         #ffffff00,
        #ffffff
       
    );

    animation: loading 2s ease infinite;
}

@keyframes spin {
    to {
        transform:
            translate(-50%, -50%)
            rotate(360deg);
    }
}

@keyframes loading {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(350%);
    }
}

@keyframes logoScale {
    0%,100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.08);
    }
}