@charset "utf-8";

/*----- Stylesheets -----*/
@import "revolution-slider.css";
@import "owl.carousel.css";
@import "animate.css";
@import "cubeportfolio.min.css"; 

/*----- Fonts -----*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300;400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&display=swap');
@import "simple-line-icons.css";
@import "ionicons.min.css";
@font-face /*perintah untuk memanggil font eksternal*/
  {
    font-family: 'NewYork'; /*memberikan nama bebas untuk font*/
    src: url('../fonts/NewYork.otf');/*memanggil file font eksternalnya di folder nexa*/
  }

/*Pop Up Responsive*/
.wmBox_overlay{position:fixed;width:100%;height:100%;display:none;top:0;left:0;z-index:999}
.wmBox_centerWrap{display:table;position:absolute;width:100%;height:100%}
.wmBox_centerer{display:table-cell;vertical-align:middle}
.wmBox_centerer iframe{width:100%;display:table;margin:0 auto;position:relative;}
.wmBox_contentWrap{width:70%;margin:0 auto;position:relative}
.wmBox_scaleWrap{position:relative;height:0;padding-top:20px;padding-bottom:56.25%;width:100%}
.wmBox_centerer iframe{position:absolute;top:0;border:0;outline:0;box-shadow:0 0 10px rgba(0,0,0,0.5);left:0;width:100%;height:100%;padding:12px;background:black;border-radius:12px}
.wmBox_closeBtn{z-index:2;position:relative;margin-top:-40px}
.wmBox_closeBtn p{line-height:0;margin:0;padding:0.5em 0 0.75em;color:#FFF;background:#000;width:1.3em;font-size:25px;border-radius:100%;text-align:center;font-family:Verdana,serif;position:relative;bottom:-0.5em;right:-1.5em;cursor:pointer;float:right;box-shadow:0 0 10px rgba(0,0,0,0.5);transition:color 0.2s ease-out,background 0.2s ease-out}
.wmBox_closeBtn p:hover{background:#FFF;color:#000}
html, 
body {
    height: 100%;
    min-height: 100%;
}
html { -webkit-font-smoothing: antialiased; }
body {
    font-family: "Open Sans", sans-serif;
    font-weight: 400;
    color: #1c1c1c;
}

a {
    background: transparent;
    outline: none; 
    text-decoration: none;  
    
    -webkit-transition: .2s cubic-bezier(0.25,.46,.45,.94);
    transition: .2s cubic-bezier(0.25,.46,.45,.94);
    -webkit-transition-property: background-color,color;
    transition-property: background-color,color;
}
html::-webkit-scrollbar {
    width: 5px;
}
html::-webkit-scrollbar-track {
    background: linear-gradient(0deg, rgba(220, 220, 220, 1) 0%, rgba(212, 175, 55, 1.0) 150%);
}
html::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 5px;
    box-shadow: 0px 100px 0px #e8e8e8;
}
a:active,
a:focus {
    outline: 0;  
    color: #1c1c1c;
    text-decoration: none;    
}
a:focus, a:active, button::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, select::-moz-focus-inner, input[type="file"] > input[type="button"]::-moz-focus-inner {
    border: 0;
    outline : 0;
}

.accordion-admin {
  background-color: #424242;
  color: #fff;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: center;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active, .accordion-admin:hover {
  background-color: #ccc;
  color: #000;
  font-size:20px;
}

.panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color:#424242!important;
}

.menuAdmin {
    list-style-type: none;
    font-size:15px;
    color:#000!important;
    text-align: center;
    padding: 0;
}

.w3-modal-content {
    margin-top:50px !important;
}
.notification  {
    margin-left:-15px !important;
}

.storage-list-page {
    max-height:450px;
    overflow-y:auto;
}
.storage-page h2, p {
    text-align: center !important;
}
.non-notification {
    margin-top:150px;
}


.notification-view {
    color: #000;
    text-decoration: none;
    position: relative;
    display: inline-block;
    border-radius: 2px;
}

.btn_View:hover {
    background:#f2efc2 !important;
}

.btn_View {
    border:solid 1px #ccc;
}
.btn_Update:hover {
    background:#f2efc2 !important;
}
.btn_Update {
    width: 100%;
    max-width: 80%; /* Atur lebar maksimal button */
    margin: 0 auto;
    display: block;
    font-size:18px;
    border:solid 1px #ccc;
}

.view-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px
}

.cl-item {
    background-color: #dbdbdb;
}

.form-update-mo {
    padding: 30px;
}

.form-update-mo button {
    border: 0.5px solid;
}

.p-update-mo {
    margin-left :-15px !important;
}

.header-td tr:first-child td:first-child {
  border-radius: 10px 0 0 0 !important;
  background-color:#f2e6c9 !important;
  border:none !important;
}

.header-td tr:first-child td:last-child {
  border-radius: 0 10px 0 0 !important;
  background-color:#f2e6c9 !important;
  border:none !important;
}

.header-td tr:first-child {
  background-color:#f2e6c9 !important;
}


.header-td{
    width:65%;
    margin: 0 auto;
}

.header-input {
    text-align: left !important; 
    font-size:25px;
    font-weight:bold;
    color: #000;
}

.header-input2 {
    text-align: left !important;
    font-size:25px;
    font-weight:bold;
    color: #000;
}

.header-input-update-mo {
        border: 1px solid #ccc;
        font-size:18px;
        font-weight:bold;
        width:50%;
        background-color:;
    }
.item-update-mo {
    border:none;
    background-color:transparent;
    outline:none;
}


.header-input-update-mo input:hover, input:focus {
  border-color: #aaa;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.table-container-view {
  height: 200px; /* Atur tinggi tabel */
  overflow-y: auto; /* Tambahkan scroll jika data terlalu banyak */
}

.table-container-view table {
  width: 100%; /* Atur lebar tabel */
  border-collapse: collapse;
}

.table-container-view th, .table-container-view td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

.table-container-update-mo {
  height: 300px; /* Atur tinggi tabel */
  overflow-y: auto; /* Tambahkan scroll jika data terlalu banyak */
}

.table-container-update-mo table {
  width: 100%; /* Atur lebar tabel */
  border-collapse: collapse;
}

.table-container-update-mo th, .table-container-view td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}


.gradasi {
  background-image: linear-gradient(to bottom, #ffffff,#ffffff, #f7f7f7, #e5e5e5, #e5e5e5, #f7f7f7, #ffffff, #ffffff);
  padding: 20px;
  margin: 100px 0;
}

.btnFormStorage:hover {
    background:#f2efc2 !important;
}
.storage-header {
    margin-bottom: 200px;
}

.accordion-storage {
  color: #444;
  cursor: pointer;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.item-baru-btn {
    margin-left: -15px !important;
    width:102% !important;
    margin-top:8px;
}

.item-baru-div {
    margin-left: -15px !important;
    width:102% !important;
    margin-bottom: 10px !important;
}

.accordion-header {
  background-color: #ccc;
  color: #444;
  cursor: pointer;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
  height:55px;
}

.accordion-content {
  display: none;
  overflow: hidden;
}

.accordion-history {
  width: 100%;
  margin: 0 auto;
  max-height: 350px; /* atur tinggi maksimum */
  overflow-y: auto; 
}

.accordion-item {
  border: 1px solid #ddd;
  margin-bottom: 10px;
}

.accordion-header-history {
  display: grid;
  grid-template-columns: 1fr 80% 5%;
  align-items: center;
  padding: 10px;
  background-color: #f0f0f0;
  cursor: pointer;
}

.accordion-panel-history {
  display: none;
  padding: 10px;
  background-color: #fff;
}

.accordion-button-history {
  background-color: transparent;
  border: none;
  cursor: pointer;
}

.accordion-lines-history.header {
    font-weight: bold;
    background-color: #f0e6c5;
    position: relative;
}

.accordion-lines-history.footer {
    font-weight: bold;
    font-size: 18px;
    background-color: #fff9e3;
    position: relative;
}

.accordion-lines-history.header::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 1%;
    width: 98%;
    border-bottom: 1px solid #000;
}

.accordion-lines-history {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  align-items: center;
  padding: 10px;
  background-color: #fff9e3;
  cursor: pointer;
}

/* Style untuk (ukuran besar) Desktop*/
@media (min-width: 1025px) {
    .header .section-label {
      font-size: 14px;
      letter-spacing: 0.12em;
      color: #b8972a;
      font-weight: 600;
      margin-top: 80px;
      margin-bottom: 4px;
      text-transform: uppercase;
    }
    
    .header p:last-child {
      font-size: 13px;
      color: #6b6b6b;
      margin-bottom: 1.25rem;
    }
    
    /* ── Garis pemisah gold ── */
    .header::after {
      content: '';
      display: block;
      height: 1px;
      background: #b8972a;
      opacity: 0.3;
      margin: 0.75rem 0 1.25rem;
    }
 
    /* ── Rank Card ── */
    .rank-card {
      background: #fffefc;
      border: 1px solid #2a2a2a;
      border-left: 3px solid #b8972a;
      border-radius: 10px;
      padding: 0.85rem 1rem;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 14px;
      transition: border-color 0.2s, background 0.2s;
    }
    .rank-card:hover {
      background: #ccc2ad;
    }
    
    /* Top 3 special styling */
    .rank-card:nth-child(1) { border-left-color: #d4a017; }
    .rank-card:nth-child(2) { border-left-color: #9e9e9e; }
    .rank-card:nth-child(3) { border-left-color: #cd7f32; }
    
    /* ── Badge nomor ── */
    .rank-badge {
      min-width: 32px;
      height: 32px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 700;
      flex-shrink: 0;
    }
    .rank-1 { background: #d4a017; color: #0a0a0a; }
    .rank-2 { background: #9e9e9e; color: #0a0a0a; }
    .rank-3 { background: #cd7f32; color: #0a0a0a; }
    .rank-other { background: #ffffff; color: #555555; border: 1px solid #2a2a2a; }
    
    /* ── Avatar inisial ── */
    .sales-avatar {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 700;
      flex-shrink: 0;
      background: #1e1e1e;
      color: #b8972a;
      border: 1px solid #2a2a2a;
    }
    .rank-card:nth-child(1) .sales-avatar {
      color: #d4a017;
      border-color: #d4a017;
    }
    
    /* ── Bar wrap ── */
    .bar-wrap   { flex: 1; min-width: 0; }
    .bar-top    { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
    .sales-name { font-size: 13px; font-weight: 600; color: #000000; letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .trx-info   { text-align: right; margin-left: 12px; flex-shrink: 0; }
    .trx-num    { font-size: 13px; font-weight: 700; color: #d4a017; }
    .trx-count  { font-size: 11px; color: #555555; }
    
    /* ── Progress bar ── */
    .bar-track {
      background: #f2f2f2;
      border-radius: 3px;
      height: 4px;
      overflow: hidden;
    }
    .bar-fill {
      height: 100%;
      border-radius: 3px;
      width: 0%;
      background: #786424;
      transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .rank-card:nth-child(1) .bar-fill { background: #d4a017; }
    .rank-card:nth-child(2) .bar-fill { background: #9e9e9e; }
    .rank-card:nth-child(3) .bar-fill { background: #cd7f32; }
    
    /* ── State box (loading / error / kosong) ── */
    .state-box {
      background: #111111;
      border: 1px solid #2a2a2a;
      border-radius: 12px;
      padding: 2.5rem;
      text-align: center;
      color: #555555;
      font-size: 14px;
    }
    .retry-btn:hover { background: #b8972a; color: #0a0a0a; }

    .w3-padding-large {
        padding: 8px 24px !important;
    }
    
    /* Overlay */
    .overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.75);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1000;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.35s ease;
      padding: 1rem;
    }

    .overlay.active {
      opacity: 1;
      pointer-events: all;
    }

    /* Modal */
    .modal {
      background: var(--surface);
      border: 1px solid var(--border);
      width: 100%;
      max-width: 480px;
      position: relative;
      transform: translateY(30px) scale(0.97);
      opacity: 0;
      transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), opacity 0.35s ease;
      box-shadow: 0 40px 80px rgba(0,0,0,0.6), 0 0 0 1px var(--border);
    }

    .overlay.active .modal {
      transform: translateY(0) scale(1);
      opacity: 1;
    }

    /* Accent top bar */
    .modal-accent {
      height: 3px;
      background: linear-gradient(90deg, var(--accent), transparent);
    }

    .modal-inner { padding: 2.5rem; }

    /* Header */
    .modal-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      margin-bottom: 1.5rem;
    }

    .modal-icon {
      width: 44px;
      height: 44px;
      border: 1px solid var(--accent);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--accent);
      flex-shrink: 0;
    }

    .modal-icon svg { width: 20px; height: 20px; }

    .close-btn {
      background: none;
      border: 1px solid var(--border);
      color: var(--muted);
      width: 36px;
      height: 36px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: color 0.2s, border-color 0.2s, background 0.2s;
      flex-shrink: 0;
    }

    .close-btn:hover {
      color: var(--text);
      border-color: var(--text);
      background: rgba(255,255,255,0.05);
    }

    .close-btn svg { width: 16px; height: 16px; }

    /* Content */
    .modal-scan {
        background: var(--surface);
        width: 100%;
        max-width: 420px;
        margin: auto;
        position: relative;
        overflow: hidden;
    }
    
    .modal-label {
      font-size: 1rem;
      font-weight: 500;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--accent);
    }

    .modal-title {
      font-family: 'Playfair Display', serif;
      font-size: 1.75rem;
      font-weight: 700;
      color: var(--text);
      line-height: 1.2;
      margin-bottom: 1.25rem;
    }

    .modal-body {
      font-size: 0.9rem;
      line-height: 1.75;
      color: var(--muted);
      margin-bottom: 2rem;
    }

    /* Divider */
    .modal-divider {
      height: 1px;
      background: var(--border);
      margin-bottom: 1.75rem;
    }

    /* Actions */
    .modal-actions {
      display: flex;
      gap: 0.75rem;
      justify-content: center;
    }

    .btns {
      font-family: 'DM Sans', sans-serif;
      font-size: 0.85rem;
      font-weight: 500;
      letter-spacing: 0.05em;
      padding: 11px 24px;
      border: none;
      cursor: pointer;
      transition: all 0.2s;
    }

    .btn-ghost {
      font-size: 0.9rem;
      font-weight: 500;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      background: transparent;
      font-family: 'Montserrat';
      color: var(--muted);
      border: 1px solid var(--border);
      width: 40%;
    }

    .btn-ghost:hover {
      color: var(--text);
      border-color: rgba(255,255,255,0.2);
      background: rgba(255,255,255,0.04);
    }

    .btn-opname {
      font-size: 0.9rem;
      font-weight: 500;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      font-family: 'Montserrat';
      background: var(--accent);
      color: var(--bg);
      position: relative;
      overflow: hidden;
    }

    .btn-opname::after {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(255,255,255,0.2);
      transform: translateX(-100%);
      transition: transform 0.25s;
    }

    .btn-opname:hover { box-shadow: 0 4px 20px var(--accent-glow); }
    .btn-opname:hover::after { transform: translateX(0); }
    
    .w3-fifth {
      width: 20%;
      float: left;
      min-width: 0; /* penting! biar tidak overflow */
      box-sizing: border-box;
    }
    
    .date-row {
      display: flex;
      flex-direction: row; /* keduanya bersebelahan */
      gap: 16px;
    }
    
    .date-group {
      display: flex;
      flex-direction: column; /* label di atas input */
      gap: 6px;
    }
    
    .date-group label {
      font-size: 13px;
      font-weight: 500;
      color: #374151;
    }
    
    .date-group input {
      height: 42px;
      padding: 0 14px;
      border: 1px solid #d1d5db;
      border-radius: 6px;
      font-size: 13.5px;
    }
    
    .input-date {
        width: 100%;
    }
    
    .laporan-input {
      width: 15%;
      height: 42px;
      font-family: 'DM Sans', sans-serif;
      font-size: 13.5px;
      color: #1f2937;
      background: #fff;
      border: 1px solid #d1d5db;
      border-radius: 6px;
      outline: none;
      transition: border-color 0.18s, box-shadow 0.18s;
    }

    .laporan-input:focus {
      border-color: #3b82f6;
      box-shadow: 0 0 0 3px rgba(59,130,246,0.12);
    }

    .laporan-input::placeholder { color: #9ca3af; }
    
    .w3-row-padding {
        padding:0px !important;
    }
    
    #paginationBtnHasilOpname button {
        padding: 5px 10px;
        margin: 0 2px;
        border: 1px solid #ccc;
        border-radius: 6px;
        background: white;
        cursor: pointer;
        font-size:13px;
    }
    #paginationBtnHasilOpname button.active {
        background: #00a99d; /* sesuaikan dengan warna theme kamu */
        color: white;
        border-color: #00a99d;
        font-weight: bold;
        font-size:13px;
    }
    
    #paginationBtnOpname button {
        padding: 5px 10px;
        margin: 0 2px;
        border: 1px solid #ccc;
        border-radius: 6px;
        background: white;
        cursor: pointer;
        font-size:13px;
    }
    #paginationBtnOpname button.active {
        background: #00a99d; /* sesuaikan dengan warna theme kamu */
        color: white;
        border-color: #00a99d;
        font-weight: bold;
        font-size:13px;
    }
    
    #paginationBtnsPenjualan button {
        padding: 5px 10px;
        margin: 0 2px;
        border: 1px solid #ccc;
        border-radius: 6px;
        background: white;
        cursor: pointer;
        font-size:13px;
    }
    #paginationBtnsPenjualan button.active {
        background: #00a99d; /* sesuaikan dengan warna theme kamu */
        color: white;
        border-color: #00a99d;
        font-weight: bold;
        font-size:13px;
    }
    
    #paginationBtns button {
        padding: 5px 10px;
        margin: 0 2px;
        border: 1px solid #ccc;
        border-radius: 6px;
        background: white;
        cursor: pointer;
        font-size:13px;
    }
    #paginationBtns button.active {
        background: #00a99d; /* sesuaikan dengan warna theme kamu */
        color: white;
        border-color: #00a99d;
        font-weight: bold;
        font-size:13px;
    }
    
    .sub-menu-data:hover ul{
        background:#cccccc;
    }
    
    .panel-retail {
        display: none;
    }
    
    .panel-retail.active {
        display: block;
    }
    
    .menuRetail {
        list-style-type: none;
        color:#000!important;
        background:#ffffff;
        text-align: left;
        padding: 0;
    }
    
    .btn-detail-penjualan {
      list-style-type: none;
      text-align: center;
      font-size: 13px;
      background:#c2c2c2 !important;
      font-weight: 600;
      color: #000;
      text-decoration: none;
      position: relative;
      padding-bottom: 6px;
      margin-bottom:-20px;
    }
    
    .btn-detail-penjualan:hover {
      background:#e6e6e6 !important;
    }
    
    .thick {
      list-style-type: none;
      text-align: left;
      font-size: 12px;
      font-weight: 600;
      color: #000;
      text-decoration: none;
      position: relative;
      padding-bottom: 6px;
    }
    .thick::after {
      content: '';
      position: absolute;
      bottom: 0; left: 0;
      width: 0; height: 4px;
      background: linear-gradient(90deg, #c7aa4c, #635927);
      border-radius: 2px;
      transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    .thick:hover::after { width: 100%; }
    
    .btn-penjualan {
      display: inline-flex;
      align-items: center;
      padding: 10px 20px;
      border-radius: 10px;
      font-size: .875rem;
      font-weight: 600;
      cursor: pointer;
      border: none;
      transition: all .18s ease;
      font-family: inherit;
    }
    
    .btn-primary-load {
      background: #008080;
      color: #fff;
      box-shadow: 0 4px 14px rgba(32,178,170,.35);
    }

    .btn-primary-load:hover {
      background: #1a9e97;
      box-shadow: 0 6px 18px rgba(32,178,170,.45);
      transform: translateY(-1px);
    }
    
    .btn-submit-penjualan {
      display: inline-flex;
      align-items: center;
      padding: 10px 20px;
      border-radius: 10px;
      font-size: .875rem;
      font-weight: 600;
      cursor: pointer;
      border: none;
      transition: all .18s ease;
      font-family: inherit;
    }
    
    .btn-primary-submit {
      background: #004280;
      color: #fff;
      box-shadow: 0 4px 14px rgba(0, 66, 128, 0.35);
    }

    .btn-primary-submit:hover {
      background: #0261ba;
      box-shadow: 0 6px 18px rgba(0, 66, 128, 0.45);
      transform: translateY(-1px);
    }
    
    .btn-batal-penjualan {
      display: inline-flex;
      align-items: center;
      padding: 10px 20px;
      border-radius: 10px;
      font-size: .875rem;
      font-weight: 600;
      cursor: pointer;
      border: none;
      transition: all .18s ease;
      font-family: inherit;
    }
    
    .btn-primary-batal {
      background: #bd2915;
      color: #fff;
      box-shadow: 0 4px 14px rgba(227, 49, 25, 0.35);
    }

    .btn-primary-batal:hover {
      background: #e33119;
      box-shadow: 0 6px 18px rgba(227, 49, 25, 0.35);
      transform: translateY(-1px);
    }
    
    tbody tr {
      border-bottom: 1px solid var(--border);
      transition: background .15s;
    }

    tbody tr:last-child { border-bottom: none; }

    tbody tr:hover { background: #f8fffe; }

    tbody td {
      padding: 14px 18px;
      font-size: .875rem;
      color: #000;
      white-space: nowrap;
    }

    /* ── Badges ── */
    .barcode-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: var(--teal-light);
      color: #147d78;
      border-radius: 6px;
      padding: 3px 10px;
      font-size: .78rem;
      font-weight: 600;
      font-family: 'Courier New', monospace;
      letter-spacing: .5px;
    }


    .berat { color: var(--muted); font-size: .82rem; }


    /* ── Action Buttons ── */
    .action-group { display: flex; gap: 8px; }

    .btn-icon {
      width: 34px;
      height: 34px;
      border-radius: 8px;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all .18s;
    }

    .btn-edit { background: #eff6ff; color: #3b82f6; }
    .btn-edit:hover { background: #3b82f6; color: #fff; transform: scale(1.08); }

    .btn-delete { background: var(--danger-light); color: var(--danger); }
    .btn-delete:hover { background: var(--danger); color: #fff; transform: scale(1.08); }

    @keyframes float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-8px); }
    }

    .empty-state h3 {
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--dark);
    }

    .empty-state p {
      font-size: .875rem;
      color: var(--muted);
      max-width: 300px;
    }

    /* ── Footer / Total Row ── */
    tfoot {
      background: linear-gradient(135deg, #f0fafa 0%, #e6f7f6 100%);
      border-top: 2px solid var(--teal-mid);
    }

    tfoot td {
      padding: 14px 18px;
      font-size: .875rem;
      font-weight: 700;
      color: var(--dark);
      white-space: nowrap;
    }

    tfoot .total-label {
      color: #147d78;
      font-size: .82rem;
      text-transform: uppercase;
      letter-spacing: .6px;
    }

    tfoot .total-val {
      color: var(--teal);
      font-size: 1rem;
    }
    
    thead {
      background: linear-gradient(135deg, #f0fafa 0%, #e6f7f6 100%);
    }

    thead th {
      padding: 14px 18px;
      text-align: left;
      font-size: .78rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .7px;
      color: #5a7a79;
      white-space: nowrap;
      border-bottom: 2px solid var(--teal-mid);
    }

    thead th:not(:first-child) { border-left: 1px solid #d4eceb; }
    
    .card-penjualan {
      background: var(--white);
      border-radius: 16px;
      box-shadow: var(--shadow);
      overflow: hidden;
      border: 1px solid var(--border);
      margin-top: 30px;
    }

    .table-wrapper-penjualan {
      overflow-x: auto;
    }

    .table-penjualan {
      width: 100%;
      border-collapse: collapse;
    }
    
    .input-penjualan {
        width: 320px !important;
        height: 40px !important;
        border: 1px solid #d1d5db;
        border-radius: 6px;
        outline: none;
        transition: border-color 0.18s, box-shadow 0.18s;
    }
    
    .penjualan-content {
        max-width: 1250px !important;
    }
    
    .home-1024 img {
        width:400px !important;
    }
    .fa-plus {
      transform-origin: center;
      font-size: 20px;
    }
    
    .fa-minus {
      transform-origin: center;
      font-size: 20px;
    }
    
    #add-item-btn:hover .fa-plus {
      animation: putar 5s;
    }
    
    @keyframes putar {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
    
    #delete-item-btn:hover .fa-minus {
      animation: putar2 5s;
    }
    
    @keyframes putar2 {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
    
    .btnAddStorage {
        position:absolute;
        margin-top:-66px;
        right:180px;
        height:53px;
        background:#f2efc2;
    }
    
    .btnAddStorage i{
        width:30px;
        color:#000;
    }
    
    .btnDeleteStorage {
        position:absolute;
        margin-top:0px;
        right:180px;
        height:53px;
        background:#f2efc2;
    }
    
    .btnDeleteStorage i{
        width:30px;
        color:#000;
    }
    
    .home-heading2 img {
        width: 400px !important;
        height: auto !important;
    }
    .home-display2 img {
        margin-top: -20px;
        margin-left:-270px;
        width: 170px;
    }
    
    .home-heading img {
        width: 170px !important;
        height: auto !important;
    }
    
    .slide1-1 img{
        width: 1500px !important;
        margin-top: -80px;
        background-position: center;
    }
    
    .notification {
        color: #000;
        text-decoration: none;
        display: inline-block;
        position: fixed;
        border-radius: 2px;
    }
    
    .notification .badge {
        position: absolute;
        top: 10px;
        right: -5px;
        border-radius: 20px;
        background: red;
        color: white;
    }
    
    .notification i {
        font-size:20px;
    }
    
    .btn_Reminder {
        background-color:#e8e7da;
        border-radius:50%;
        width: 70px;
        height: 70px;
        transition: box-shadow 0.4s ease-in-out;
    }
    
    @keyframes bellshake {
      0% {
        transform: rotate(0deg);
      }
      20% {
        transform: rotate(15deg);
      }
      40% {
        transform: rotate(-15deg);
      }
      60% {
        transform: rotate(10deg);
      }
      80% {
        transform: rotate(-10deg);
      }
      100% {
        transform: rotate(0deg);
      }
    }
    .btn_Reminder:hover i {
      animation: bellshake 0.5s infinite;
    }
    
    .btn_Reminder:hover {
        background: #ffffff;
        box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.8);
    }
 
    .container2 {
        width: 100%;
        padding: 0 90px;
    }
    
    .header-icon {
        position: absolute;
        margin-top: 40px;
        right: 0;
    }

    .nav {
        margin-top: 90px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .navbar-small .header-icon {
         opacity: 0;
         height: auto;
         transition:  height 1s ease-in-out;
         visibility: hidden;
    }
    
    .navbar-small .navbar-nav {
        height: 100%;
        margin-bottom: 0px;
        marginp-top:20px
    } 

    .navbar-small .big-logo {
        position:absolute;
        opacity: 0;
        width: 120px;
        margin-top: -90px;  
        margin-left: -15px;
        -webkit-transition: all 0.4s ease;
        -moz-transition: all 0.4s ease;
        -o-transition: all 0.4s ease;
        -ms-transition: all 0.4s ease;
        transition: all 0.4s ease;
    }
    
    .navbar-small .nav {
        margin-top: 35px;
        transform: translateY(-15px);
        transition: all 0.5s ease-in-out;
    }
    
    .navbar-small {
        display: flex;
        justify-content: center;
        align-items: center;
        background: #fff;
        background-color: #fff !important;
        height: 10px;
        -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
        -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.15);
        box-shadow:0 1px 4px rgba(0, 0, 0, 0.15);
    }
    
    .navbar-small .nav-sub {
        width: 100% !important;
    }
    
    .nav-sub {
        width: 100% !important;
    }
    
    .putih-display {
        display:none;
    }
    
    .heading-featured img {
        width: 800px !important;
        height: auto !important;
        margin-top: -350px !important;
        margin-left: -1200px !important;
    }
    .login-background {
        background-image: url('../img/backgrounds/login-background.jpg');
        background-size: cover; /* lebar 100% dan tinggi 100% dari elemen */
        background-position: center;
        background-repeat: no-repeat;
    }
    
    
    .sub-caption-s1 {
        margin-top:-10px !important;
    }
    .more-info1 {
        margin-top:-40px !important;
    }
    .feature-info p {
        text-align:left !important;
    }
    
    .feature-img2 {
        display:none;
    }
    
    .about-row4 img {
        margin-right: 50px !important;
    }
    
    .about-row2 p {
        text-align: justify !important;
    }
    
    .about-row3 p {
        text-align: justify  !important;
    }
    
    .about-mission p {
        text-align: justify  !important;
    }
    
    .about-vision p {
        text-align: justify  !important;
    }
    
    .about-brand-info3 {
        margin-left: -40% !important;
    }
    
    .about-brand-info6 {
        margin-top: 10px !important;
        margin-left: -40%  !important;
    }
}

/* Style untuk mobile (ukuran sedang) */
@media (min-width: 412px) and (max-width: 1024px) {
    .form-update-mo {
        padding: 0px;
    }
    
    .form-update-mo p {
        padding-left: 20px;
    }
    
    .btnAddStorage {
        background:#f2efc2;
    }
    
    .btnDeleteStorage {
        background:#f2efc2;
    }
    
    .header-input2 {
        border:none;
        font-size:18px;
        font-weight:bold;
        margin-left:-16px;
    }
    .header-input {
        border:none;
        margin-left:-16px;
        font-size:18px;
        font-weight:bold;
        width:50%;
    }
    
    .header-td{
        width:100%;
        margin: 0 auto;
    }
    .notification {
        color: #000;
        text-decoration: none;
        display: inline-block;
        position: fixed;
        border-radius: 2px;
    }
    
    .notification .badge {
        position: absolute;
        top: 10px;
        right: -5px;
        border-radius: 20px;
        background: red;
        color: white;
    }
    
    .notification i {
        font-size:20px;
    }
    
    .btn_Reminder {
        background-color:#e8e7da;
        border-radius:50%;
        width: 60px;
        height: 60px;
        transition: box-shadow 0.4s ease-in-out;
    }


    .feature-info h4 {
        font-family: 'Playfair';
        font-weight: bolder;
        text-transform: uppercase;
        color: #1c1c1c;
        margin-top: 0px;
        -webkit-transition: all 0.2s;
        -moz-transition: all 0.2s;
        -o-transition: all 0.2s;
        transition: all 0.2s;
    }
    .home-display2 img {
        margin-top: -80px;
        margin-left: -420px;
        width: 500px !important;
        height: auto !important;
    }

    .home-heading img{
        width: 240px !important;
        margin-top: -600px !important;
        margin-left: -310px !important;
    }
    .navbar-toggle {
        margin-left:30px;
    }
    
    .slide1-1 img{
        width: 2300px !important;
        margin-top: 20px !important;
        background-position: center;
        margin-left:-300px !important;
    }
    
    .tp-banner .home-subheading .caption-s1 {
        font-size: 70px;
        margin-top: 0px !important;
        margin-left: -380px;
        text-shadow: 1px 1px 1px grey;
    }
    
    .tp-banner .home-subheading .caption-s2 {
        font-size: 70px;
        margin-left: -380px;
        margin-top: 35px;
        text-shadow: 1px 1px 1px grey;
    }
    .tp-banner .home-button a {
        margin-top: -50px !important;
        margin-left: -265px !important;
        line-height: 10px;
        font-size: 25px !important;
        padding-top: 20px !important;
        width: 220px !important;
        color: #ffffff;
        height: 60px !important;
        display: block;
    }
    
    .tp-banner .home-button2 a {
        margin-top: 170px !important;
        margin-left: 300px !important;
        line-height: 10px;
        font-size: 25px !important;
        padding-top: 20px !important;
        width: 220px !important;
        color: #ffffff;
        height: 60px !important;
        display: block;
    }
    
    
    
    .navbar-default .big-logo {
        padding-top:10px !important;
        margin-left: 0px !important;
        left: 355px !important;
    }
    
    .about-dropdown {
        margin-left:10px !important;
    }
    .container { 
        width: 100%;
        padding: 0 120px;
    }
    
    .home-display img {
        display:none;
    }
    
    .login-background {
        background-image: url('../img/backgrounds/login-background.jpg');
        background-size: cover; /* lebar 100% dan tinggi 100% dari elemen */
        background-position: left;
        background-repeat: no-repeat;
        background-color:#000 !important;
    }
    .col-twitter {
        margin-bottom: 55px;
        max-height: 160px;
    }
    
    .container {
      display: flex;
      flex-direction: column;
    }
    
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
        width 50%;
    }
    .navbar-collapse ul {
      list-style: none;
      padding: 0;
      margin-left: 25px;
      display: flex;
      flex-direction: column;
      align-items: flex-start; /* membuat item rata kiri */
    }
    .navbar-default .navbar-collapse {
        background-color: #fff;
        width: 100%;
        border-color:none !important;
    }
    .container>.navbar-header, .container>.navbar-collapse, .container-fluid>.navbar-collapse {
        background: white;
        margin-right: 0;
        margin-left: 0;
        padding-right: 25px;
        margin-top:-10px;
    }
    .container>.navbar-header {
        margin-right: 0;
        margin-left: 0;
        padding-right: 35px;
        height:110px;
    }
    .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
    }
   
    .navbar-nav {
        float: none!important;
        margin: 0;

    }
    .navbar-default .navbar-toggle { 
        margin-top: 44px;
    }
    .navbar-toggle { 
        margin-top: 11px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a,
    .navbar-nav>li>span {
        padding-top: 20px;
        padding-bottom: 12px;
    }
    .navbar-default .navbar-nav > li > a,
    .navbar-default .navbar-nav > li > span {
        color: #fff;
    }
    .navbar-default .navbar-nav > li > a:hover,
    .navbar-default .navbar-nav > li > span:hover {
        background: rgba(255,255,255, 0.03);
    }
    .navbar-collapse.collapse {
        height: auto!important;
        padding-bottom: 0;
        overflow: visible!important;
        display: none!important;
    }
    .navbar-header
    .navbar-collapse {
        margin-top: 15px;
        padding-top: 60px;
    }
    .collapse.in{
        display:block !important;
    }
    .navbar-default .container { 
        width: 100%;
    } 
    .container {
        padding-right: 0px;
        padding-left: 0px;
        width: 100%;
    } 
    .navbar-default ul li:last-child {
        border-bottom: none;
    }
    .navbar-default .navbar-right {
        margin-bottom: 3px;
    }
    .navbar-alt .container {
        margin-top:10px;
    }
    .container {
        margin-top:0px;
    }
    .header-icon {
        position: absolute;
        margin-top: 25px;
        right: 10px;
    }
   
    .feature-info p {
        text-align: left !important;
    }
    
    .service-row {
        margin-left:200px !important;
    }
    
    .info3 {
        margin-top:-220px;
    }
    
    #home-revolution-slider {
        min-height: 50% !important;
    }
    
    .techno-section {
        margin-top: -650px !important;
    }
    
    .heading-featured img {
        margin-top: -1000px;
        margin-left: -660px;
        width: 900px;
    }
    
    .feature-img2 {
        display:none;
    }
    
    .about-row1 iframe {
        width: 680px !important;
        height: 385px !important;
        margin-left: 40px !important;
    }
    
    .about-row4 img {
        width: 690px !important;
        height: 400px !important;
        margin-right: 15px !important;
        float: right !important;
        margin-top: -560px !important;
    }
    
    .about-row2 p {
        text-align: justify !important;
        width: 680px !important;
        margin-left: -375px !important;
        margin-top: 40px !important;
    }
    
    .about-row3 p {
        text-align: justify !important;
        margin-top: 420px !important;
        width: 680px !important;
        margin-left: -45px !important;
    }
    
    .section-philosophy {
        height: 19% !important;
    }
    
    .section-philosophy h2 {
        margin-top: -50px !important;
    }
    
    .about-info p {
        font-size: 14px !important;
        margin-left: -27px !important;
        margin-bottom: 40px !important;
    }
    
    .about-info h4 {
        margin-top: 20px !important;
        font-size: 15px; !important
        text-align: center !important;
        margin-right: 200px !important;
        margin-bottom: 20px !important;
    }
    
    .about-mission h4 {
        text-align: center !important;
        margin-top: 200px !important;
        margin-right: 530px !important;
    }
    
    .about-mission p {
        text-align: justify !important;
        padding-right: 15% !important;
        margin-left: -110px !important;
    }
    
    .about-vision h4 {
        text-align: center !important;
        margin-top: -320px !important;
        margin-right: -60px !important;
    }
    
    .about-vision p {
        text-align: justify !important;
        width: 400px !important;
        padding-top: 10px !important;
        margin-left: 90px !important;
        line-height: 25px !important;
    }
    
    .about-brand-info1 {
        margin-left: -30% !important;
        margin-top: 320px !important;
    }
    
    .about-brand-img1 img {
        width: 250px !important;
        margin-left: 140px !important;
        margin-top: -250px !important;
    }
    
    .section-brand-amore {
        min-height: 650px !important;
    }
    
    .section-brand-dancing {
        min-height: 650px !important;
    }
    
    .about-brand-img2 img {
        margin-left: -380px !important;
    }
    
    .section-brand-ardelia {
        min-height: 650px !important;
    }
    
    .about-brand-info3 {
        margin-left: -40% !important;
        margin-top: 230px !important;
    }
    
    .about-brand-img3 img {
        width: 280px !important;
        margin-left: 80px !important;
        margin-top: -200px !important;
    }
    
    .section-brand-bambini {
        min-height: 700px !important;
    }
    
    .about-brand-info4 {
        margin-left: -35% !important;
        margin-top: 310px !important;
    }
    
    .about-brand-img4 img {
        margin-left: 100px !important;
        margin-top: -250px !important;
    }
    
    .section-brand-dubai {
        min-height: 650px !important;
    }
    
    .about-brand-img5 img {
        margin-left: -400px !important;
    }
    
    .section-brand-oro {
        min-height: 650px !important;
    }
    
    .about-brand-info6 {
        margin-top: 30% !important;
        margin-left: -49% !important;
    }
    
    .about-brand-img6 img {
        margin-left: 0px !important;
    }

    .caption-contact1 {
        margin-left: 80px !important;
    }
    
    .caption-contact2 {
        margin-left: 90px !important;
    }
    
    .btn-contact {
        margin-left: 55px !important;
    }
}

/* Style untuk mobile (ukuran kecil) */
@media (min-width: 360px) and (max-width: 640px) {
    .accordion-header-history {
      display: grid;
      grid-template-columns: 35% 55% 10%;
      align-items: center;
      padding: 10px;
      background-color: #f0f0f0;
      cursor: pointer;
      font-size:15px;
    }
    
    .accordion-lines-history.footer {
        font-size: 15px;
    }
    
    
    .accordion-lines-history {
      font-size: 13px;
    }
        
    .form-update-mo {
        padding: 0px;
    }
    
    .form-update-mo p {
        padding-left: 20px;
    }
    
    .header-input-update-mo {
        width:100%;
    }
    
    .header-mo {
        font-size:14px;
    }
    
    .header-mo input{
        font-size:13px;
    }
    
    .btnAddStorage {
        background:#f2efc2;
    }
    
    .btnDeleteStorage {
        background:#f2efc2;
    }
    
    .header-input2 {
        border:none;
        font-size:18px;
        font-weight:bold;
        margin-left:-16px;
    }
    .header-input {
        border:none;
        margin-left:-18px;
        font-size:18px;
        font-weight:bold;
        width:50%;
    }
    
    .w3-modal {
        padding-top: 80px !important;
    }
    
    .header-td{
        width:100%;
        margin: 0 auto;
        font-size:13px;
    }
    
    .big-logo{
        margin-left: -60px !important;
        margin-top: 10px !important;
    }
    
    .view-modal {
        z-index:5000;
    } 
    
    .reminder-modal {
        z-index:2500;
    }
    
    .notification {
        color: #000;
        text-decoration: none;
        display: inline-block;
        position: fixed;
        border-radius: 2px;
        z-index: 1000; /* tambahkan ini */
    }
    
    .notification .badge {
        position: absolute;
        top: -7px;
        right: -9px;
        border-radius: 20px;
        background: red;
        color: white;
    }
    
    .notification i {
        font-size:12px;
    }
    
    .btn_Reminder {
        background-color:#e8e7da;
        border-radius:50%;
        width: 30px;
        height: 30px;
        transition: box-shadow 0.4s ease-in-out;
    }
    
    .tp-banner .home-button a {
        margin-top: 230px !important;
        margin-left: -142px !important;
        line-height: 10px;
        font-size: 10px !important;
        width: 110px !important;
        color: #ffffff;
        height: 30px !important;
        display: block;
    }
    
    .tp-banner .home-button2 a {
        margin-top: -40px !important;
        margin-left: 110px !important;
        line-height: 10px;
        font-size: 10px !important;
        width: 110px !important;
        color: #ffffff;
        height: 30px !important;
        display: block;
    }
    
    .tp-banner .home-subheading .caption-s1 {
        font-size: 35px;
        margin-top: 50px !important;
        margin-left: -140px;
        text-shadow: 1px 1px 1px grey;
    }
    
    .tp-banner .home-subheading .caption-s2 {
        font-size: 25px;
        margin-left: -140px;
        margin-top: -25px;
        text-shadow: 1px 1px 1px grey;
    }

    .about-dropdown {
        display: none;
    }
    
    .container {
      display: flex;
      flex-direction: column;
    }
    .col-xs-5ths,.col-sm-5ths,.col-md-5ths,.col-lg-5ths {
        position: relative;
        min-height: 1px;
        padding-right: 10px;
        padding-left: 10px;
        width: 20%;
        float: left;
    }
    
    .home-display img {
        display:none;
    }
    
    .login-background {
        background-image: url('../img/backgrounds/login-background.jpg');
        background-size: cover; /* lebar 100% dan tinggi 100% dari elemen */
        background-position: left;
        background-repeat: no-repeat;
    }
    .home-subheading {
        margin-top:-100px !important;
        margin-left: -10px !important;
    }
    .home-button {
        margin-top:-200px !important;
        margin-left:10px !important;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
        margin-left:-15px;
    }
    .navbar-collapse {
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
        width 50%;
    }
    .navbar-collapse ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      align-items: flex-start; /* membuat item rata kiri */
    }
    .navbar-default .navbar-collapse {
        background-color: #fff;
        width: 100%;
        border-color:none !important;
    }
    .container>.navbar-header, .container>.navbar-collapse, .container-fluid>.navbar-collapse {
        background: white;
        margin-right: 0;
        margin-left: 0;
        padding-left: 25px;
        padding-right: 25px;
        margin-top:-10px;
    }
    .container>.navbar-header {
        margin-right: 0;
        margin-left: 0;
        padding-left: 35px;
        padding-right: 35px;
        height:110px;
    }
    .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
    }
   
    .navbar-nav {
        float: none!important;
        margin: 0;

    }
    .navbar-default .navbar-toggle { 
        margin-top: 44px;
    }
    .navbar-toggle { 
        margin-top: 11px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a,
    .navbar-nav>li>span {
        padding-top: 20px;
        padding-bottom: 12px;
    }
    .navbar-default .navbar-nav > li > a,
    .navbar-default .navbar-nav > li > span {
        color: #fff;
    }
    .navbar-default .navbar-nav > li > a:hover,
    .navbar-default .navbar-nav > li > span:hover {
        background: rgba(255,255,255, 0.03);
    }
    .navbar-collapse.collapse {
        height: auto!important;
        padding-bottom: 0;
        overflow: visible!important;
        display: none!important;
    }
    .navbar-header
    .navbar-collapse {
        margin-top: 15px;
        padding-top: 60px;
    }
    .collapse.in{
        display:block !important;
    }
    .navbar-default .container { 
        width: 100%;
    } 
    .container {
        padding-right: 0px;
        padding-left: 0px;
        width: 100%;
    } 
    .navbar-default ul li:last-child {
        border-bottom: none;
    }
    .navbar-default .navbar-right {
        margin-bottom: 3px;
    }
    .navbar-alt .container {
        margin-top:10px;
    }
    .container {
        margin-top:0px;
    }
    .header-icon {
        position: absolute;
        margin-top: 25px;
        right: 0;
        margin-right: 10px;
    }
    .home-heading2 img {
        margin-top:20px;
        margin-left:-200px;
        width:900px;
    }
    .feature-info h4 {
        margin-top:90px !important;
        text-align: center !important;
    }
    .feature-icon img {
        margin-left: 60px !important;
    }
    .feature-info p {
        text-align:center !important;
    }
    
    .feature-img1 {
        display:none;
    }
}

h1, h2, h3, h4, h5 {
    font-family: 'Exo', sans-serif;
    font-weight: 700;
    line-height: 1;
    color: #1c1c1c;
}
h1 small, h2 small, h3 small {
    font-family: 'Open Sans', sans-serif;
    font-weight: 200;
    color: #1c1c1c;
}
h4 small, h5 small {
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    color: #1c1c1c;
}
h4 {
    font-size: 18px;
    letter-spacing: 1px;
}
p {
   color: #7a7a7a;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
}  
.font-montserrat {
    font-weight: 400;
    font-family: 'Montserrat', sans-serif;
}
.no-padding {
   padding: 0;
}
.section-title {
    font-size: 40px;
    font-weight: 400;
    letter-spacing: 2px;
    font-family: 'Montserrat';
    margin-bottom: 20px;
}
.subheading { 
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    margin-bottom: 42px;
}
.subheading:after {
    position: relative;
    display: block;
    content: "";
    height: 2px; 
    margin: 20px auto 20px;
    width: 115px;  
    background: #7a7a7a;
}
.subheading.grey:after { 
    background: #fff!important;
    opacity: .4;
}
.content-title {
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 2px;
    margin-top: 0;
    margin-bottom: 22px;
    font-family: 'Exo', sans-serif;
    font-size: 30px;
}
.project-title {
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0px;
    margin-top: 30px;
    margin-bottom: 10px;
    font-family: 'Exo', sans-serif;
    font-size: 50px;
}
@media (max-width:600px) {
    .project-title { 
        font-size: 24px;
    }

   .responsive-img {
    width: 100%;
    padding-bottom: 20px;
    }
 
}
@media (min-width:768px) {
   .responsive-img {
    width: 100%;
    padding-bottom: 20px;
    }
}
@media (max-width:768px) {
   .responsive-img {
    width: 100%;
    padding-bottom: 20px;
    }
}

.project-subtitle {
    margin-bottom: 50px;
    font-size: 14px;
}
.uppercase {
    text-transform: uppercase;
}
.p-info {
    line-height: 1.8;
    font-size: 14px;
}

/* Preloader */
#loader {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 9999999999;
}

  .sk-spinner-cube-grid.sk-spinner {
    width: 30px;
    height: 30px;
    margin: 0 auto; }
  .sk-spinner-cube-grid .sk-cube {
    width: 33%;
    height: 33%;
    background-color: #a88f3b;
    float: left;
    -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
            animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; }
  .sk-spinner-cube-grid .sk-cube:nth-child(1) {
    -webkit-animation-delay: 0.2s;
            animation-delay: 0.2s; }
  .sk-spinner-cube-grid .sk-cube:nth-child(2) {
    -webkit-animation-delay: 0.3s;
            animation-delay: 0.3s; }
  .sk-spinner-cube-grid .sk-cube:nth-child(3) {
    -webkit-animation-delay: 0.4s;
            animation-delay: 0.4s; }
  .sk-spinner-cube-grid .sk-cube:nth-child(4) {
    -webkit-animation-delay: 0.1s;
            animation-delay: 0.1s; }
  .sk-spinner-cube-grid .sk-cube:nth-child(5) {
    -webkit-animation-delay: 0.2s;
            animation-delay: 0.2s; }
  .sk-spinner-cube-grid .sk-cube:nth-child(6) {
    -webkit-animation-delay: 0.3s;
            animation-delay: 0.3s; }
  .sk-spinner-cube-grid .sk-cube:nth-child(7) {
    -webkit-animation-delay: 0s;
            animation-delay: 0s; }
  .sk-spinner-cube-grid .sk-cube:nth-child(8) {
    -webkit-animation-delay: 0.1s;
            animation-delay: 0.1s; }
  .sk-spinner-cube-grid .sk-cube:nth-child(9) {
    -webkit-animation-delay: 0.2s;
            animation-delay: 0.2s; }

@-webkit-keyframes sk-cubeGridScaleDelay {
  0%, 70%, 100% {
    -webkit-transform: scale3D(1, 1, 1);
            transform: scale3D(1, 1, 1); }

  35% {
    -webkit-transform: scale3D(0, 0, 1);
            transform: scale3D(0, 0, 1); } }

@keyframes sk-cubeGridScaleDelay {
  0%, 70%, 100% {
    -webkit-transform: scale3D(1, 1, 1);
            transform: scale3D(1, 1, 1); }

  35% {
    -webkit-transform: scale3D(0, 0, 1);
            transform: scale3D(0, 0, 1); } }

.cube {
  background-color: #a88f3b;
  width: 10px;
  height: 10px;
  position: absolute;
  -webkit-animation: cubemove 4s infinite ease-in-out;
  -moz-animation: cubemove 4s infinite ease-in-out;
  -o-animation: cubemove 4s infinite ease-in-out;
  animation: cubemove 4s infinite;
}

@-webkit-keyframes cubemove {
  35% {
    -webkit-transform: scale(0.005);
  }

  50% {
    -webkit-transform: scale(1.7);
  }

  65% {
    -webkit-transform: scale(0.005);
  }
}


@-moz-keyframes cubemove {
  35% {
    -moz-transform: scale(0.005);
  }

  50% {
    -moz-transform: scale(1.7);
  }

  65% {
    -moz-transform: scale(0.005);
  }
}

@-moz-keyframes cubemove {
  35% {
    -moz-transform: scale(0.005);
  }

  50% {
    -moz-transform: scale(1.7);
  }

  65% {
    -moz-transform: scale(0.005);
  }
}
.spinner {
    position: relative;
    top: 50%;
    left: 50%;
    float: left;
}

/*----- Typography -----*/
.white {
    color: #fff;
}
.grey {
    color: #d3d3d3;
}
.size-8x { font-size:8em }
.size-7x { font-size:7em }
.size-6x { font-size:6em }
.size-5x { font-size:5em }
.size-4x { font-size:4em }
.size-3x { font-size:3em }
.size-2x { font-size:2.5em }
.size-1x { font-size:1em }

.fullscreen-block {
   background-position: 50% 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    width: 100%;
    height: auto;
    overflow-x: hidden;
    overflow-y: hidden;
    vertical-align: middle;
    z-index: 1;
   display: block;
   position: relative;
}
/*----- Backgrounds ------*/
 
#home-parallax-fullscreen {
    background-image: url(../img/backgrounds/bg-home-fullscreen.jpg);
} 
#home-parallax-fullwidth {
    background-image: url(../img/backgrounds/bg-home-fullscreen.jpg);
}
#home-landing {
    background-image: url(../img/backgrounds/bg-home-fullscreen.jpg);
}
#our-brand-fullscreen {
    background-image: url(../img/backgrounds/brand.jpg);
}
.parallax-section-1 {
    background-image: url(../img/backgrounds/ytbuilding.jpg);
}
.parallax-section-2 {
    background-image: url(../img/backgrounds/Octagon-Chain.jpg);
}
.parallax-section-3 {
    background-image: url(../img/backgrounds/Box.jpg);
}
.parallax-section-4 {
    background-image: url(../img/backgrounds/HDS-Chain.png);
}
.parallax-section-5 {
    background-image: url(../img/backgrounds/Featured collection Octagon.jpg);
}
.parallax-section-6 {
    background-image: url(../img/backgrounds/bg-6.jpg);
}
.parallax-section-7 {
    background-image: url(../img/backgrounds/bg-7.jpg);
} 
.parallax-section-8 {
    background-image: url(../img/backgrounds/bg-8.jpg);
}
.parallax-section-9 {
    background-image: url(../img/backgrounds/bg-9.jpg);
}

#our-brand-fullscreen{
    background-position: center;
    background-size: cover;
    background-attachment: fixed; 
    min-height: 380px;
}
/*----- Home Sections -----*/
#home-parallax-fullscreen,
#our-brand-fullscreen,
.parallax-section-1,
.parallax-section-2,
.parallax-section-3,
.parallax-section-4,
.parallax-section-5, 
.parallax-section-6, 
.parallax-section-7,
.parallax-section-8 {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed; 
    min-height: 380px;
    z-index: 1;
}
#home-parallax-fullwidth {
    background-position: center 0%;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed; 
    display: table;
    width: 100%; 
    min-height: 400px;
    overflow-x: hidden;
    overflow-y: hidden;
    vertical-align: middle;
    z-index: 1;
}
@media (min-width:768px) {
    #home-parallax-fullwidth {
        height: 600px;
    }
}
@media (max-width:768px) {
    #home-parallax-fullwidth {
        height: 400px;
    }
}
#home-parallax-fullscreen:after,
.parallax-section-2:after,
.parallax-section-3:after,
.parallax-section-4:after, 
.parallax-section-6:after, 
.parallax-section-7:after,
.parallax-section-8:after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: -1;   
}
#home-landing:after,
#home-parallax-fullwidth:after,
#page-top .hero:after {
    content: "";
    position: absolute;
    margin-top: 200px;
    margin-bottom: -150px;
    left: 0;
    right: 0;
    z-index: 1;   
}
/*End Home Section*/
/*Featured Section*/
#featured {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 150px;
}

.techno-section {
    background-image: url('../img/backgrounds/Featured collection.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    min-height: 650px;
    margin-left: auto;
    margin-right: auto;
}
.techno-section1 {
    position: relative;
    box-sizing: border-box;
    background-color: #fff;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    width: 80%;
}
#featured-value {
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
}
.techno-section2 {
    background-image: url('../img/backgrounds/Octagon-Chain.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    min-height: 550px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 100px;
}
.techno-section3 {
    background-image: url('../img/backgrounds/Box-Chain.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    min-height: 510px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 150px;
}
.techno-section4 {
    background-image: url('../img/backgrounds/HDS.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    min-height: 700px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 150px;
}
.caption-featured-section {
    margin-top: 45%;
}
.caption-featured-section1 {
    margin-left: 35%;
    margin-top: 15%;
}
.caption-featured1{
    text-align: left;
    font-family: 'Montserrat', sans-serif;
    color: #fff;
    font-size: 45px;
    font-weight: 400;
    letter-spacing: 1.5px;
    margin-bottom: 40px;
}
.info-featured1{
    text-align: left !important;
    font-family: 'Montserrat', sans-serif;
    color: #fff;
    font-size: 20px;
    font-weight: 300;
    line-height: 25px;
    letter-spacing: 1.5px;
}
.caption-featured-section2 {
    margin-right: 45%;
    margin-top: 15%;
}
.caption-featured2{
    text-align: right;
    font-family: 'Montserrat', sans-serif;
    color: #fff;
    font-size: 45px;
    font-weight: 400;
    letter-spacing: 1.5px;
    margin-bottom: 40px;
}
.info-featured2{
    text-align: right !important;
    font-family: 'Montserrat', sans-serif;
    color: #fff;
    font-size: 20px;
    font-weight: 300;
    line-height: 25px;
    letter-spacing: 1.5px;
}
.caption-featured-section3 {
    margin-right: auto;
    margin-left: auto;
}
.caption-featured3{
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    color: #000;
    font-size: 45px;
    font-weight: 400;
    letter-spacing: 1.5px;
    margin-bottom: 40px;
}
.info-featured3{
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    color: #000;
    font-size: 20px;
    font-weight: 300;
    line-height: 25px;
    letter-spacing: 1.5px;
}
.featured-main2-row {
    margin-bottom: 40px;
    width: 80%;
    text-align: center;
    color: #000;
}
.featured-main2-row p {
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 35px;
    letter-spacing: 1.5px;
    color: #000;
}
#features1 {
    padding-top: 30px;
    margin-bottom: 50px;
}
#features2 {
    padding-bottom: 10px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
.feature-row1 {  
  position: relative;
  width: 100%;
}
.feature-row2 {  
  position: relative;
  min-height: 340px;
  margin-bottom: 100px;
  overflow: hidden;
} 
.feature-column {
  position: absolute;
}
.feature-column img {
    max-width: 100%;
    -webkit-transition: 0.7s ease;
    transition: 0.7s ease;
}
.feature-row2:hover .feature-img1 img{
    -webkit-transform: scale(1.08);
    transform: scale(1.08);
}
@media (min-width: 992px) {
    .feature-row {
        margin-bottom: 20px;
        text-align: left
    }
    .lookbook-row {
        margin-bottom: 20px;
        text-align: left
    }
    .back-icon {
        z-index: -1;
        color: #f8f8f8;
        position: absolute;
        padding-left: 40px;
        left: 0;
        top: 0;
        width: 134px;
        height: 134px;
        line-height: 134px;
        font-size: 134px;
    }
}
@media (max-width: 992px) {     
    .back-icon {
        z-index: -1;
        color: #f8f8f8;
        position: absolute;
        padding-left: 30px;
        left: 0;
        top: 0;
        width: 80px;
        height: 80px;
        line-height: 80px;
        font-size: 80px;
    }
}
.feature-info h4 {
    font-family: 'Playfair';
    font-weight: bolder;
    text-transform: uppercase;
    color: #1c1c1c;
    margin-top: 0px;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
}
.feature-info p {
    text-align:left;
    font-weight: 500;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
}
.feature-info {
    padding-top: 5px;
}
.feature-icon img{
    float: left;
    width: 120px;
    margin-top: -30px;
}
.feature-icon img:hover{
    animation: tada 1000ms;
}
.feature-description {
    line-height: 23px;
    padding-right: 10px;
}
.ion-2-5x {
    font-size: 2.5em;
}
.feature-buttons {
    margin-top: 40px;
}
#featured-value {
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 170px;
    font-family: 'Montserrat';
    font-weight: bold;
    letter-spacing: 4px;
    color: #ad9860; 
}
.featured-section {
    background-image: url('../img/backgrounds/featured collectionArtboard.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 660px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 100px;
}
.featured-heading{
    margin-top: 280px;
    margin-left: -400px;
}
.featured-caption1 {
    text-align: center;
    letter-spacing: 2px;
    font-size: 45px;
    margin-top: 120px !important;
    margin-left: 100px;
    text-shadow: 1px 1px 1px grey;
}
/*End Featured Section*/

.home-banner ul li{
    cursor: move;
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}
.home-banner ul li:active {
    cursor: grabbing !important;
    cursor: -moz-grabbing !important;
    cursor: -webkit-grabbing !important;
}
.tp-banner li:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 0!important;   
}  
.tp-banner-video li:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 2!important;
}
#page-hero {
    height: 400px;
}
#home-landing {
    background-position: center 0%;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    display: table;
    width: 100%;
    height: 100%;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
    vertical-align: middle;
    z-index: 1;
}
#home-parallax-fullscreen {
    display: table;
}   
.home-container {
    position: relative;
    display: table-cell;
    vertical-align: middle;
    z-index: 3;
}
.home-title {
    position: relative;
    text-transform: uppercase;
    color: #1c1c1c;
    z-index: 3;
    margin-left: auto;
    margin-right: auto; 
}
#home-parallax-fullwidth .home-title {
    margin-top: 130px;
}
.home-title h1 {
    letter-spacing: 2px; 
}
.home-heading {
    font-family: 'Exo', sans-serif;
    font-weight: 700;
    letter-spacing: 0px;
    text-transform: uppercase;
    color: #fff;
}

.tp-banner ul>li.cover-banner1>img{
    width: 100%;
}
.tp-banner ul>li.cover-banner2>img{
    width: 100%;
}
.cover-featured img{
    width: 100%;
}
.info-latest-1 img{
    width: 100%;
}
.info-latest-2 img{
    width: 100%;
}
@media (min-width:992px) {
    .home-heading {
        font-size: 72px;
    }
}
/*PHONE_SET*/
/*phone1 ex: galaxy*/
@media only screen and (max-width:369px) {
    #loader .spinner{
        margin-left: -15px !important;
    }
    .to-section {
        border-bottom-style: none !important;
    }
    .tp-banner ul>li>img{
        width: 650px !important;
        margin-left: -10px !important;
        margin-top: 140px !important;
    }
    .tp-banner ul>li>img{
        width: 1100px !important;
        margin-left: -390px !important;
        margin-top: 50px !important;
    }
    .home-heading img{
        width: 300px;
        margin-left: -160px;
        margin-top: -260px;
        text-shadow: 1px 10px 1px grey;
    }
    .slide1 img{
        margin-left: -150px !important;
        margin-top: 20px !important;
        width: 1150px !important;
        -webkit-transition: opacity 0.3s;
        -moz-transition: opacity 0.3s;
        -o-transition: opacity 0.3s;
        transition: opacity 0.3s;
    }

    .tp-banner .home-subheading .heading-caption img{
        margin-top: 120px !important;
        margin-left: -200px;
        width: 250px !important;
        height: auto !important;
        text-shadow: 1px 1px 1px grey;
    }
    
    
    .tp-banner .btn {
        display: none;
    }
    
    #services {
        margin-top: 100px !important;
    }
    .section-title {
        font-size: 21px !important;
    }
    #features1 {
        margin-top: 50px !important;
        margin-bottom: 20px !important;
    }
    .feature-row2 {
        width: auto !important;
    }
    .feature-img1 {
        display: none !important;
    }
    #features2 {
        width: auto !important;
        margin-left: -10px !important;
        margin-bottom: -170px !important;
    }
    .feature-img2 img{ 
        width: 420px !important;
        height: 190px !important;
    }
    .tp-banner .featured-subheading {
        margin-top: 120px !important;
        margin-left: 200px;
        width: 250px !important;
        height: auto !important;
        text-shadow: 1px 1px 1px grey;
    }
    .footer-copyright{
        margin-left: -55px;
    }
    .heading-featured {
        width:350px;
        margin-top:100px;
    }
    
    .hero {
        margin-top: 50px !important;
    }
    .hero2 {
        margin-top: 50px !important;
    }
    .lookbook-slider {
        margin-left: -1px !important;
    }
    .box::before,
    .box::after{
        content: '';
        position: absolute;
        top: 98%;
        bottom: 1px;
        filter: blur(2px);
        background: rgba(0, 0, 0, 0.5);
        box-shadow: 0 0 30px rgba(0, 0, 0, 1);
        z-index: -1;
    }
    .box::before {
        left: 75px;
        right: 40px !important;
        transform: rotate(5deg) !important;
    }
    .box2::before,
    .box2::after{
        content: '';
        position: absolute;
        top: 60% !important;
        bottom: 0px;
        filter: blur(2px);
        background: rgba(0, 0, 0, 0.4);
        box-shadow: 0 0 30px rgba(0, 0, 0, 1);
        z-index: -1;
    }
    .box2::before {
        left: 83%;
        right: 48px !important;
        transform: rotate(-6deg) !important;
    }
    .copyright {
        display: none;
    }
    .copyright2 p{
        font-size: 12px !important;
        font-weight: 300 !important;
        color: #fff !important;
        margin-top: 150px !important;
        margin-bottom: -100px !important;
        margin-left: -40px !important;
    }
    .search-box {
        display: none;
    }
    .search-box2 {
        width: 160px;
        margin-top: 20px !important;
    }
    .search-input2 {
        border-color: #d4af37;
        border: 1px;
        border-bottom-style: solid !important;
    }
    ul li ul.about-dropdown {
    /*min-width: 100%;  Set width of the dropdown */
    border-bottom-style: none !important;
    }
    .featured-subheading {
        display: none;
    }
    .featured-subheading2 img{
        margin-bottom: -580px;
        margin-left: 40px;
        width: 280px !important;
        height: auto !important;
    }
    .cover-featured{
        display: none !important;
    }
    .cover-featured2 img{
        width: 1200px !important;
        margin-top: 50px !important;
        margin-left: -410px !important;
    }
    #about {
        margin-top: 150px !important;
    }
    .section-about {
        font-size: 20px !important;
        margin-left: 15px !important;
    }
    .subsection-about {
        font-size: 15px !important;
        margin-left: 10px !important;
    }
    .about-main-row {
        text-align: justify !important;
        margin-top: 130px !important;
        width: 85% !important;
    }
    .about-main2-row {
        margin-top: -70px !important;
    }
    .about-info h4 {
        margin-left: 90px !important;
    }
    .about-info p {
        margin-left: 20px !important;
    }
    .about-row1 iframe {
        width: 90% !important;
        height: auto !important;
        margin-left: 15px !important;
    }
    .about-row2 p {
        margin-top: 30px !important;
        margin-left: -100px !important;
        width: 250px !important;
    }
    .about-row4 img {
        margin-top: -430px !important;
        width: 80% !important;
        margin-right: 30px !important;
        height: auto !important;
    }
    .about-row3 p {
        margin-top: 160px !important;
        width: 250px !important;
        margin-left: -50px !important;
    }
    .section-philosophy {
        background-image: url('../img/backgrounds/bg-about2.jpg') !important;
        width: 380px !important;
        height: 350px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .section-philosophy h2 {
        margin-top: -70px;
    }
    .caption-philosophy {
        padding-bottom: 100px !important;
        bottom: 300px !important;
        float: none !important;
        margin-left: auto !important;
        margin-right: auto !important;
        font-size: 30px !important;
        text-shadow: 1px 3px 1px grey !important;
    }
    #service-about {
        margin-left: -90px !important;
    }
    #service-about h4 {
        text-align:center !important;
    }
    #service-about p{
        text-align:center !important;
    }
    #our-values2 {
        margin-top: 30px !important;
        margin-bottom: 100px !important;
    }
    .section-vision-mission {
        background-image: url('../img/backgrounds/mission.png') !important;
        width: 370px !important;
        height: 500px !important;
        padding-top: 100px !important;
    }
    .about-mission h4{
        text-align: center !important;
        margin-left: -150px !important;
    }
    .about-mission p{
        text-align: justify !important;
        margin-left: -20px !important;
        margin-top: 4px !important;
        width: 320px !important;
    }
    .about-vision {
        background-image: url('../img/backgrounds/vision.png') !important;
        width: 380px !important;
        margin-top: -40px !important;
        margin-bottom: 1200px !important;
        margin-left: -80px !important;
    }
    .about-vision p{
        text-align: justify !important;
        margin-left: -40px !important;
        margin-top: 20px !important;
        width: 330px !important;
    }
    .lookbook-flip iframe{
        width: 300px !important;
    }
    .featured-main2-row {
        width: 200px !important;
    }
    .volume-lookbook {
        font-size: 28px !important;
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}
/*phone2 ex: iphone x*/
@media only screen and (min-width: 370px) and (max-width:599px) {
    #loader .spinner{
        margin-left: -15px !important;
    }
    .to-section {
        border-bottom-style: none !important;
    }
    .home-heading img{
        width: 350px;
        margin-left: -180px;
        margin-top: -450px;
        text-shadow: 1px 10px 1px grey;
    }
    .slide1 img{
        margin-left: -230px !important;
        margin-top: 10px !important;
        width: 1500px !important;
        -webkit-transition: opacity 0.3s;
        -moz-transition: opacity 0.3s;
        -o-transition: opacity 0.3s;
        transition: opacity 0.3s;
    }
    .slide1-1{
        display: none !important;
    }
    .tp-banner .home-subheading .caption-s1 {
        font-size: 35px;
        margin-top: 120px !important;
        margin-left: -160px;
        text-shadow: 1px 1px 1px grey;
    }
    .tp-banner .home-subheading .caption-s2 {
        font-size: 25px;
        margin-top: -25px;
        margin-left: -160px;
        text-shadow: 1px 1px 1px grey;
    }
    .tp-banner .home-subheading .heading-caption img{
        margin-top: 60px !important;
        margin-left: -230px;
        width: 300px !important;
        height: auto !important;
        text-shadow: 1px 1px 1px grey;
    }
    .tp-banner .home-button a {
        margin-top: 200px !important;
        margin-left: -170px !important;
        line-height: 20px;
        font-size: 15px !important;
        width: 150px !important;
        height: 40px !important;
        color: #ffffff;
        display: block;
    }
    .tp-banner .home-button2 a {
        margin-top: 210px !important;
        margin-left: 120px !important;
        line-height: 20px;
        font-size: 15px !important;
        width: 150px !important;
        height: 40px !important;
        color: #ffffff;
        display: block;
    }
    .tp-banner .btn {
        display: none;
    }
    .big-logo{
        margin-left: -65px !important;
        margin-top: 10px !important;
    }
    .section-title {
        font-size: 22px !important;
    }
    #features1 {
        margin-top: 50px !important;
        margin-bottom: 20px !important;
    }
    .feature-row2 {
        width: auto !important;
    }
    .feature-img1 {
        display: none !important;
    }
    #features2 {
        width: auto !important;
        margin-left: -10px !important;
        margin-bottom: -170px !important;
    }
    .feature-img2 img{ 
        min-height: 200px !important;
    }
    .footer-copyright{
        margin-left: -55px;
    }
    .hero {
        margin-top: 50px !important;
    }
    .hero2 {
        margin-top: 50px !important;
    }
    .lookbook-slider {
        margin-left: -1px !important;
    }
    .box::before,
    .box::after{
        content: '';
        position: absolute;
        top: 98%;
        bottom: 1px;
        filter: blur(2px);
        background: rgba(0, 0, 0, 0.5);
        box-shadow: 0 0 30px rgba(0, 0, 0, 1);
        z-index: -1;
    }
    .box::before {
        left: 75px;
        right: 40px !important;
        transform: rotate(5deg) !important;
    }
    .box2::before,
    .box2::after{
        content: '';
        position: absolute;
        top: 60% !important;
        bottom: 0px;
        filter: blur(2px);
        background: rgba(0, 0, 0, 0.4);
        box-shadow: 0 0 30px rgba(0, 0, 0, 1);
        z-index: -1;
    }
    .box2::before {
        left: 83%;
        right: 48px !important;
        transform: rotate(-6deg) !important;
    }
    .copyright {
        display: none;
    }
    .copyright2 p{
        font-size: 12px !important;
        font-weight: 300 !important;
        color: #fff !important;
        margin-top: 150px !important;
        margin-left: -40px !important;
    }
    .search-box {
        display: none;
    }
    .search-box2 {
        width: 160px;
        margin-top: 20px !important;
    }
    .search-input2 {
        border-color: #d4af37;
        border: 1px;
        border-bottom-style: solid !important;
    }
    ul li ul.about-dropdown {
    /*min-width: 100%;  Set width of the dropdown */
    border-bottom-style: none !important;
    }
    .featured-subheading {
        display: none;
    }
    .featured-subheading2 img{
        margin-bottom: -720px;
        margin-left: 40px;
        width: 300px !important;
        height: auto !important;
    }
    .cover-featured{
        display: none !important;
    }
    .cover-featured2 img{
        width: 1200px !important;
        margin-top: 50px !important;
        margin-left: -400px !important;
    }
    #about {
        margin-top: 150px !important;
    }
    .section-about {
        font-size: 20px !important;
        margin-left: 15px !important;
    }
    .subsection-about {
        font-size: 15px !important;
        margin-left: 10px !important;
    }
    .about-main-row {
        text-align: justify !important;
        margin-top: 130px !important;
        width: 84% !important;
    }
    .about-main2-row {
        margin-top: -70px !important;
    }
    .about-p1 p{
        margin-left: 50px !important;
    }
    .about-info p{
        width: 92% !important;
    }
    .about-info h4{
        margin-left: 50px !important;
    }
    .about-row1 iframe {
        width: 90% !important;
        height: auto !important;
        margin-left: 15px !important;
    }
    .about-row2 p {
        margin-top: 30px !important;
        margin-left: -105px !important;
        width: 270px !important;
    }
    .about-row4 img {
        margin-top: -420px !important;
        width: 80% !important;
        margin-right: 40px !important;
        height: auto !important;
    }
    .about-row3 p {
        margin-top: 160px !important;
        width: 270px !important;
        margin-left: -55px !important;
    }
    .section-philosophy {
        background-image: url('../img/backgrounds/bg-about2.jpg') !important;
        width: 400px !important;
        height: 360px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .section-philosophy h2 {
        margin-top: -70px;
    }
    .caption-philosophy {
        padding-bottom: 100px !important;
        bottom: 300px !important;
        float: none !important;
        margin-left: auto !important;
        margin-right: auto !important;
        font-size: 30px !important;
        text-shadow: 1px 3px 1px grey !important;
    }
    #service-about {
        margin-left: -90px !important;
    }
    #service-about h4 {
        text-align:center !important;
    }
    #service-about p{
        text-align:center !important;
        margin-left: 40px !important;
        padding-bottom: 30px !important;
    }
    #our-values2 {
        margin-top: 30px !important;
        margin-bottom: 100px !important;
    }
    .section-vision-mission {
        background-image: url('../img/backgrounds/mission.png') !important;
        width: 415px !important;
        height: 530px !important;
        padding-top: 100px !important;
    }
    .about-mission h4{
        text-align: center !important;
        margin-left: -60px !important;
    }
    .about-mission p{
        text-align: justify !important;
        margin-top: 4px !important;
        width: 320px !important;
    }
    .about-vision {
        background-image: url('../img/backgrounds/vision.png') !important;
        width: 415px !important;
        margin-top: -40px !important;
        margin-bottom: 1200px !important;
        margin-left: -78px !important;
    }
    .about-vision h4{
        margin-left: 50px !important;
        margin-top: 60px !important;
        padding-top: 130px !important;
        text-align: left;
    }
    .about-vision p{
        text-align: justify !important;
        margin-left: -40px !important;
        margin-top: 20px !important;
        width: 330px !important;
    }
    .about-brand-info1 img {
        margin-top: -50px !important;
        margin-left: 85px !important;
        width: 30% !important;
    }
    .about-brand-info1 p {
        font-size: 13px !important;
        text-align: center !important;
        margin-top: 290px !important;
        margin-left: 50px !important;
        padding-left: 30px !important;
    }
    .about-brand-img1 img {
        margin-top: -320px !important;
        margin-left: -80px !important;
        width: 160px !important;
    }
    .section-brand-dancing {
        min-height: 100px !important;
    }
    .about-brand-info2 img {
        margin-top: -190px !important;
        margin-left: -160px !important;
        width: 45% !important;
    }
    .about-brand-info2 p {
        font-size: 13px !important;
        text-align: center !important;
        margin-top: 290px !important;
        margin-left: -200px !important;
        padding-left: 30px !important;
    }
    .about-brand-img2 img {
        margin-left: -100px !important;
        width: 200px !important;
    }
    .section-brand-ardelia {
        min-height: 100px !important;
    }
    .about-brand-info3 img {
        margin-top: -200px !important;
        margin-left: 85px !important;
        width: 20% !important;
    }
    .about-brand-info3 p {
        font-size: 13px !important;
        text-align: center !important;
        margin-top: 290px !important;
        margin-left: 50px !important;
        padding-left: 30px !important;
    }
    .about-brand-img3 img {
        margin-top: -360px !important;
        margin-left: -100px !important;
        width: 200px !important;
    }
    .about-brand-info4 img {
        margin-top: -60px !important;
        margin-left: 140px !important;
        width: 20% !important;
    }
    .about-brand-info4 p {
        font-size: 13px !important;
        text-align: center !important;
        margin-top: 290px !important;
        margin-left: 120px !important;
        padding-left: 30px !important;
    }
    .about-brand-img4 img {
        margin-top: -360px !important;
        margin-left: -90px !important;
        width: 200px !important;
    }
    .section-brand-dubai {
        min-height: 100px !important;
    }
    .about-brand-info5 img {
        margin-top: -190px !important;
        margin-left: -150px !important;
        width: 40% !important;
    }
    .about-brand-info5 p {
        font-size: 13px !important;
        text-align: center !important;
        margin-top: 290px !important;
        margin-left: -200px !important;
        padding-left: 30px !important;
    }
    .about-brand-img5 img {
        margin-top: 10px !important;
        margin-left: -110px !important;
        width: 230px !important;
    }
    .section-brand-oro {
        min-height: 100px !important;
    }
    .about-brand-info6 img {
        margin-top: -150px !important;
        margin-left: 85px !important;
        width: 25% !important;
    }
    .about-brand-info6 p {
        font-size: 13px !important;
        text-align: center !important;
        margin-top: 290px !important;
        margin-left: 50px !important;
        padding-left: 30px !important;
    }
    .about-brand-img6 img {
        margin-top: -450px !important;
        margin-left: -100px !important;
        width: 250px !important;
    }
    .lookbook-flip iframe {
        width: 300px !important;
    }
    .featured-main2-row {
        width: 100% !important;
        text-align: center !important;
    }
    .featured-main2-row p {
        width: 150% !important;
        margin-left: -45px !important;
    }
    .volume-lookbook {
        font-size: 30px !important;
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .techno-section {
        margin-top: 150px !important;
        min-height: 350px !important;
        margin-bottom: 20px !important;
    }
    .techno-section1 {
        width: 50% !important;
        margin-bottom: 80px !important;
    }
    .techno-section2 {
        min-height: 200px !important;
    }
    .caption-featured1 {
        font-size: 15px !important;
        margin-left: -47px !important;
    }
    .info-featured1 {
        font-size: 10px !important;
        font-weight: 200 !important;
        margin-top: -25px !important;
        margin-left: -45px !important;
        width: 260px !important;
    }
    .techno-section3 {
        min-height: 200px !important;
    }
    .caption-featured2 {
        font-size: 15px !important;
        margin-right: -15px !important;
    }
    .info-featured2 {
        font-size: 10px !important;
        font-weight: 200 !important;
        margin-top: -25px !important;
        margin-left: 20px !important;
        width: 220px !important;
    }
    .techno-section4 {
        min-height: 150px !important;
    }
    .caption-featured3 {
        font-size: 15px !important;
        margin-top: -50px !important;
    }
    .info-featured3 {
        font-size: 10px !important;
        font-weight: 350 !important;
        margin-top: -20px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        width: 220px !important;
    }
    #featured-value {
        margin-top: -20px !important;
    }
    .cover-featured {
        display: none;
    }
    .caption-contact1 {
        font-size: 40px !important;
        margin-left: 90px !important;
        margin-top: -100px !important;
    }
    .caption-contact2 {
        text-align: center !important;
        width: 350px !important;
        margin-left: 50px !important;
    }
    .form-contact {
        margin-left: 10px !important;
    }
    .form-contact-button {
        margin-left:auto !important;
        margin-right:auto !important;
        display:block;
    }
    .form-contact-control {
        padding-top: 200px;
    }
    .input-control {
        margin-bottom: 30px !important;
    }
    .input-contact2 {
        width: 320px !important;
        height: 100px !important;
    }
    .textarea-control textarea{
        width: 320px !important;
        float: left;
    }
    .label-contact {
        margin-right: 220px;
    }
    .btn-contact {
        margin-left: 195px !important;
    }
    .contact-section1 {
        min-height: 200px !important;
    }   
}
/*phone2b ex: android*/
@media only screen and (min-width: 100px) and (max-width:740px) {
    #loader .spinner{
        margin-left: -15px !important;
    }
    .to-section {
        border-bottom-style: none !important;
    }
    .home-heading img{
        width: 100px !important;
        margin-left: -140px;
        margin-top: -270px;
        text-shadow: 1px 10px 1px grey;
    }
    .home-display img {
        display:none !important;
    }
    .slide1 img{
        margin-left: -250px !important;
        margin-top: -40px !important;
        width: 1500px !important;
        -webkit-transition: opacity 0.3s;
        -moz-transition: opacity 0.3s;
        -o-transition: opacity 0.3s;
        transition: opacity 0.3s;
    }
    .slide1-1{
        margin-left:-300px;
        margin-top: 15px;
    }
    
    .tp-banner .home-subheading .heading-caption img{
        margin-top: 120px !important;
        margin-left: -220px;
        width: 300px !important;
        height: auto !important;
        text-shadow: 1px 1px 1px grey;
    }
    
    .tp-banner .btn {
        display: none;
    }
    
    .section-title {
        font-size: 22px !important;
    }
    #features1 {
        margin-top: 50px !important;
        margin-bottom: 20px !important;
    }
    .feature-row2 {
        width: auto !important;
    }
    .feature-img1 {
        display: none !important;
    }
    #features2 {
        width: auto !important;
        margin-left: -10px !important;
        margin-bottom: -170px !important;
    }
    .feature-img2 img{ 
        min-height: 200px !important;
    }
    .footer-copyright{
        margin-left: -55px;
    }
    .hero {
        margin-top: 50px !important;
    }
    .hero2 {
        margin-top: 50px !important;
    }
    .lookbook-slider {
        margin-left: -1px !important;
    }
    .box::before,
    .box::after{
        content: '';
        position: absolute;
        top: 98%;
        bottom: 1px;
        filter: blur(2px);
        background: rgba(0, 0, 0, 0.5);
        box-shadow: 0 0 30px rgba(0, 0, 0, 1);
        z-index: -1;
    }
    .box::before {
        left: 75px;
        right: 40px !important;
        transform: rotate(5deg) !important;
    }
    .box2::before,
    .box2::after{
        content: '';
        position: absolute;
        top: 60% !important;
        bottom: 0px;
        filter: blur(2px);
        background: rgba(0, 0, 0, 0.4);
        box-shadow: 0 0 30px rgba(0, 0, 0, 1);
        z-index: -1;
    }
    .box2::before {
        left: 83%;
        right: 48px !important;
        transform: rotate(-6deg) !important;
    }
    .copyright {
        display: none;
    }
    .copyright2 p{
        font-size: 12px !important;
        font-weight: 300 !important;
        color: #fff !important;
        margin-top: 150px !important;
        margin-left: -40px !important;
    }
    .search-box {
        display: none;
    }
    .search-box2 {
        width: 160px;
        margin-top: 20px !important;
    }
    .search-input2 {
        border-color: #d4af37;
        border: 1px;
        border-bottom-style: solid !important;
    }
    ul li ul.about-dropdown {
    /*min-width: 100%;  Set width of the dropdown */
    border-bottom-style: none !important;
    }
    .featured-subheading {
        display: none;
    }
    .featured-subheading2 img{
        margin-bottom: -720px;
        margin-left: 40px;
        width: 300px !important;
        height: auto !important;
    }
    .cover-featured{
        display: none !important;
    }
    .cover-featured2 img{
        width: 1200px !important;
        margin-top: 50px !important;
        margin-left: -400px !important;
    }
    #about {
        margin-top: 150px !important;
    }
    .section-about {
        font-size: 20px !important;
        margin-left: 15px !important;
    }
    .subsection-about {
        font-size: 15px !important;
        margin-left: 10px !important;
    }
    .about-main-row {
        text-align: justify !important;
        margin-top: 130px !important;
        width: 84% !important;
    }
    .about-main2-row {
        margin-top: -70px !important;
        margin-left: auto !important;
        width: 90% !important;
    }
    .about-info p{
        width: 92% !important;
    }
    .about-row1 iframe {
        width: 90% !important;
        height: auto !important;
        margin-left: 15px !important;
    }
    .about-row2 p {
        text-align:justify !important;
        margin-top: 30px !important;
        padding-left: 0px !important;
        padding-right: 25px !important;
        width: 270px !important;
    }
    .about-row4 img {
        margin-top: -420px !important;
        width: 80% !important;
        height: auto !important;
    }
    .about-row3 p {
        text-align:justify !important;
        margin-top: 160px !important;
        width: 265px !important;
        padding-left: 7px;

    }
    .section-philosophy {
        background-image: url('../img/backgrounds/bg-about2.jpg') !important;
        width: 360px !important;
        height: 320px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .section-philosophy h2 {
        margin-top: -70px;
    }
    .caption-philosophy {
        padding-bottom: 100px !important;
        bottom: 300px !important;
        float: none !important;
        margin-left: auto !important;
        margin-right: auto !important;
        font-size: 30px !important;
        text-shadow: 1px 3px 1px grey !important;
    }
    #service-about {
        margin-left: -90px !important;
    }
    #service-about h4 {
        text-align:center !important;
    }
    #service-about p{
        text-align:center !important;
        margin-left: 40px !important;
        padding-bottom: 30px !important;
    }
    #our-values2 {
        margin-top: 170px !important;
        margin-bottom: 100px !important;
    }
    .section-vision-mission {
        background-image: url('../img/backgrounds/mission.png') !important;
        width: 415px !important;
        height: 530px !important;
        padding-top: 100px !important;
    }
    .about-mission h4{
        text-align: center !important;
    }
    .about-mission p{
        text-align: justify !important;
        margin-top: 4px !important;
        width: 370px !important;
        margin-left: -50px !important;
    }
    .about-vision {
        background-image: url('../img/backgrounds/vision.png') !important;
        width: 415px !important;
        margin-top: -40px !important;
        margin-bottom: 1200px !important;
        margin-left: -78px !important;
    }
    .about-vision h4{
        margin-left: -360px !important;
        margin-top: 70px !important;
        padding-top: 170px !important;
        text-align: left;
    }
    .about-vision p{
        text-align: justify !important;
        margin-left: -60px !important;
        margin-top: 20px !important;
        width: 330px !important;
    }
    .about-brand-info1 img {
        margin-top: -50px !important;
        margin-left: 80px !important;
        width: 30% !important;
    }
    .about-brand-info1 p {
        font-size: 13px !important;
        text-align: center !important;
        margin-top: 290px !important;
        margin-left: 10px !important;
        padding-left: 60px !important;
    }
    .about-brand-img1 img {
        margin-top: -320px !important;
        margin-left: -80px !important;
        width: 160px !important;
    }
    .section-brand-dancing {
        min-height: 100px !important;
        margin-top: -400px !important;
    }
    .about-brand-info2 img {
        margin-top: -190px !important;
        margin-left: -140px !important;
        width: 45% !important;
    }
    .about-brand-info2 p {
        font-size: 13px !important;
        text-align: center !important;
        margin-top: 290px !important;
        margin-left: -175px !important;
        padding-left: 50px !important;
        padding-right: 20px !important;
    }
    .about-brand-img2 img {
        margin-left: -100px !important;
        width: 200px !important;
    }
    .section-brand-ardelia {
        min-height: 100px !important;
    }
    .about-brand-info3 img {
        margin-top: -200px !important;
        margin-left: 80px !important;
        width: 20% !important;
    }
    .about-brand-info3 p {
        font-size: 13px !important;
        text-align: center !important;
        margin-top: 290px !important;
        margin-left: 50px !important;
        padding-left: 30px !important;
        padding-right: 20px !important;
    }
    .about-brand-img3 img {
        margin-top: -360px !important;
        margin-left: -100px !important;
        width: 200px !important;
    }
    .section-brand-bambini {
        min-height: 100px !important;
        margin-top: -450px !important;
    }
    .about-brand-info4 img {
        margin-top: -60px !important;
        margin-left: 140px !important;
        width: 20% !important;
    }
    .about-brand-info4 p {
        font-size: 13px !important;
        text-align: center !important;
        margin-top: 290px !important;
        margin-left: 120px !important;
        padding-left: 20px !important;
        padding-right: 40px !important;
    }
    .about-brand-img4 img {
        margin-top: -360px !important;
        margin-left: -90px !important;
        width: 200px !important;
    }
    .section-brand-dubai {
        min-height: 100px !important;
        margin-top: -300px !important;
    }
    .about-brand-info5 img {
        margin-top: -190px !important;
        margin-left: -140px !important;
        width: 40% !important;
    }
    .about-brand-info5 p {
        font-size: 13px !important;
        text-align: center !important;
        margin-top: 290px !important;
        margin-left: -175px !important;
        padding-left: 50px !important;
        padding-right: 20px !important;
    }
    .about-brand-img5 img {
        margin-top: 10px !important;
        margin-left: -110px !important;
        width: 230px !important;
    }
    .section-brand-oro {
        min-height: 100px !important;
        margin-top: -350px !important;
    }
    .about-brand-info6 img {
        margin-top: -150px !important;
        margin-left: 85px !important;
        width: 25% !important;
    }
    .about-brand-info6 p {
        font-size: 13px !important;
        text-align: center !important;
        margin-top: 290px !important;
        margin-left: 50px !important;
        padding-left: 40px !important;
        padding-right: 30px !important;
    }
    .about-brand-img6 img {
        margin-top: -450px !important;
        margin-left: -100px !important;
        width: 250px !important;
    }
    .lookbook-flip iframe {
        width: 300px !important;
    }
    .featured-main2-row {
        width: 100% !important;
        text-align: center !important;
    }
    .featured-main2-row p {
        width: 150% !important;
        margin-left: -45px !important;
    }
    .volume-lookbook {
        font-size: 30px !important;
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .heading-featured {
        margin-top: 150px !important;
        min-height: 350px !important;
        margin-bottom: 20px !important;
    }
    
    .techno-section {
        margin-top: 150px !important;
        min-height: 350px !important;
        margin-bottom: 20px !important;
    }
    .techno-section1 {
        width: 50% !important;
        margin-bottom: 80px !important;
    }
    .techno-section2 {
        min-height: 200px !important;
    }
    .caption-featured1 {
        font-size: 15px !important;
        margin-left: -47px !important;
    }
    .info-featured1 {
        font-size: 10px !important;
        font-weight: 200 !important;
        margin-top: -25px !important;
        margin-left: -45px !important;
        width: 260px !important;
    }
    .techno-section3 {
        min-height: 200px !important;
    }
    .caption-featured2 {
        font-size: 15px !important;
        margin-right: -15px !important;
    }
    .info-featured2 {
        font-size: 10px !important;
        font-weight: 200 !important;
        margin-top: -25px !important;
        width: 220px !important;
    }
    .techno-section4 {
        min-height: 150px !important;
    }
    .caption-featured3 {
        font-size: 15px !important;
        margin-top: -50px !important;
    }
    .info-featured3 {
        font-size: 10px !important;
        font-weight: 350 !important;
        margin-top: -20px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        width: 220px !important;
    }
    #featured-value {
        margin-top: -20px !important;
    }
    .cover-featured {
        display: none;
    }
    .caption-contact1 {
        font-size: 40px !important;
        margin-left: 65px !important;
        margin-top: -100px !important;
    }
    .caption-contact2 {
        text-align: center !important;
        width: 320px !important;
        margin-left: 35px !important;
    }
    .form-contact {
        margin-left: -10px !important;
    }
    .form-contact-control {
        padding-top: 200px;
    }
    .input-control {
        margin-bottom: 30px !important;
    }
    .input-contact2 {
        width: 320px !important;
        height: 100px !important;
    }
    .textarea-control textarea{
        width: 320px !important;
        float: left;
    }
    .label-contact {
        margin-right: 220px;
    }
    .btn-contact {
        margin-left: 90px !important;
    }
    .contact-section1 {
        min-height: 200px !important;
    }
    .caption-partner-section1 {
        width: 91% !important;
        height: 10px !important;
    }
    .partner-list {
        width: 80% !important;
    }
    .partner-list select {
        font-size: 16px !important;
    }
    .partner-list option {
        font-size: 10px !important;
    }
    .frame-map {
        margin-left: 15px !important;
        width: 90% !important;
    }
    .frame-map iframe{
        width: 100% !important;
    }
    .table-partner {
        width: 50% !important;
    }
    .body-partner {
        width: 80% !important;
    }
    .fa-size {
        font-size: 15px !important;
    }
    .form_map {
        font-size: 13px !important;
        background-color: grey !important;
        background-size: 50% !important;
    }
}
/*phone3 ex: ipad*/
@media only screen and (min-width:600px) and (max-width:799px){
    #loader .spinner{
        margin-left: -20px !important;
    }
    .to-section {
        border-bottom-style: none !important;
    }
    .tp-banner ul>li>img{
        width: 1250px !important;
        margin-left: 20px !important;
        margin-top: 120px !important;
    }
    .tp-banner ul>li.cover-banner2>img{
        width: 1650px !important;
        margin-left: -480px !important;
        margin-top: 50px !important;
    }
    .home-heading img{
        width: 200px;
        margin-left: -360px;
        margin-top: -500px;
        text-shadow: 1px 10px 1px grey;
    }
    .tp-banner .home-subheading .caption-s1{
        font-size: 55px;
        padding-bottom: 50px;
        margin-top: 210px;
        margin-left: -250px;
        text-shadow: 1px 1px 1px grey;
    }
    .tp-banner .home-subheading .caption-s2{
        font-size: 35px;
        padding-bottom: 50px;
        margin-top: -60px;
        margin-left: -250px;
        text-shadow: 1px 1px 1px grey;
    }
    .tp-banner .home-button a {
        margin-top: 230px;
        margin-left: -245px;
        line-height: 20px;
        color: #ffffff;
        font-size: 18px !important;
        width: 190px !important;
        letter-spacing: 4px;
        text-shadow: 1px 1px 1px grey;
        display: block;
    }
    .slide1 img{
        margin-left: -200px !important;
        margin-top: -100px !important;
        width: 2100px !important;
        -webkit-transition: opacity 0.3s;
        -moz-transition: opacity 0.3s;
        -o-transition: opacity 0.3s;
        transition: opacity 0.3s;
    }
    .slide1-1{
        display: none !important;
    }
    .tp-banner .home-subheading .heading-caption img{
        margin-top: 90px !important;
        margin-left: -390px;
        width: 450px !important;
        height: auto !important;
        text-shadow: 1px 1px 1px grey;
    }
    .tp-banner .home-button2 a {
        margin-top: 290px !important;
        margin-left: 290px !important;
        line-height: 20px;
        font-size: 16px !important;
        width: 180px !important;
        height: 40px !important;
        color: #ffffff;
        height: 40px !important;
        display: block;
    }
    .tp-banner .btn {
        display: none;
    }
    .big-logo{
        margin-left: -65px !important;
        margin-top: 10px !important;
    }
    .navbar-alt .navbar-nav li {
        margin-top: 20px !important;
    }
    #features1 {
        margin-top: 30px !important;
        margin-bottom: 20px !important;
    }
    .feature-row2 {
        width: auto !important;
    }
    .feature-img1 {
        display: none !important;
    }
    #features2 {
        width: auto !important;
    }
    .feature-img2 img{ 
        width: 820px !important;
        height: 350px !important;
    }
    .footer-copyright{
        margin-left: -55px;
    }
    .hero {
        margin-top: 100px !important;
    }
    .hero2 {
        margin-top: 100px !important;
    }
    #services {
        padding-top: 10px !important;
    }
    .lookbook-slider {
        margin-left: -6px !important;
    }
    .box::before,
    .box::after{
        content: '';
        position: absolute;
        top: 98%;
        bottom: 1px;
        filter: blur(2px);
        background: rgba(0, 0, 0, 0.5);
        box-shadow: 0 0 30px rgba(0, 0, 0, 1);
        z-index: -1;
    }
    .box::before {
        left: 75px;
        right: 40px !important;
        transform: rotate(5deg) !important;
    }
    .box2::before,
    .box2::after{
        content: '';
        position: absolute;
        top: 60% !important;
        bottom: 0px;
        filter: blur(2px);
        background: rgba(0, 0, 0, 0.4);
        box-shadow: 0 0 30px rgba(0, 0, 0, 1);
        z-index: -1;
    }
    .box2::before {
        left: 83%;
        right: 48px !important;
        transform: rotate(-6deg) !important;
    }
    .info1 {
        margin-left: -30px !important;
    }
    .info2 {
        margin-top: -277px !important;
        margin-left: 190px !important;
    }
    .info3 {
        margin-top: -277px !important;
        margin-left: 400px !important;
        margin-right: -550px !important;
        width: 300px !important;
    }
    .copyright {
        display: none;
    }
    .copyright2 p{
        font-size: 12px !important;
        font-weight: 300 !important;
        color: #fff !important;
        margin-top: 250px !important;
        margin-left: -460px !important;
    }
    .featured-subheading img{
        margin-top: -140px;
        margin-left: 20px;
        width: 350px !important;
        height: auto !important;
        text-shadow: 1px 1px 1px grey;
    }
    .featured-subheading2 {
        display: none;
    }
    .cover-featured{
        display: none !important;
    }
    .cover-featured2 img{
        width: 1300px !important;
        margin-top: 50px !important;
        margin-left: -100px !important;
    }
    .search-box {
        display: none;
    }
    .search-box2 {
        width: 160px;
    }
    .search-input2 {
        margin-top: 30px !important;
        border-color: #d4af37;
        border: 1px;
        border-bottom-style: solid !important;
    }
    .about-main-row {
        text-align: justify !important;
        width: 80% !important;
    }
    .about-row1 iframe {
        width: 40% !important;
        height: auto !important;
        margin-left: 60px !important;
    }
    .about-row2 p {
        margin-top: -200px !important;
        width: 250px !important;
    }
    .about-row3 p {
        margin-top: -80px !important;
        margin-left: -10px !important;
        width: 245px !important;
    }
    .about-row4 img {
        margin-top: 30px !important;
        width: 40% !important;
        height: auto !important;
        float: right !important;
        margin-right: 70px !important;
    }
    .section-philosophy {
        background-image: url('../img/backgrounds/bg-about1.jpg') !important;
        width: 770px !important;
        height: 200px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .section-philosophy h2 {
        margin-left: auto !important;
        margin-right: auto !important;
        margin-top: -70px;
    }
    .caption-philosophy {
        font-size: 25px !important;
    }
    .about-info h4 {
        font-size: 14px !important;
        text-align: center !important;
        margin-left: -110px !important;
    }
    .about-info p {
        font-size: 14px !important;
        width: 400px !important;
        text-align: center !important;
        margin-left: 90px !important;
        margin-bottom: 90px !important;
    }
    .feature-icon h4{
        text-align: left !important;
    }
    .feature-icon img{
        margin-left: 170px !important;
    }
    #our-values2 {
        margin-bottom: -400px !important;
    }
    .section-vision-mission {
        margin-left: auto !important;
        margin-right: auto !important;
        margin-top: -250px !important;
        background-size: 850px !important;
        background-repeat: no-repeat !important;
    }
    .about-mission h4 {
        margin-left: -30px !important;
        margin-top: 130px !important;
        font-size: 10px !important;
    }
    .about-mission p {
        margin-left: -30px !important;
        margin-top: -10px !important;
        width: 320px !important;
        font-size: 9px !important;
        line-height: 17px !important;
    }
    .about-vision h4 {
        margin-left: 70px !important;
        margin-top: -218px !important;
        font-size: 10px !important;
    }
    .about-vision p {
        margin-left: 70px !important;
        margin-top: -10px !important;
        width: 320px !important;
        font-size: 9px !important;
        line-height: 17px !important;
    }
    .lookbook-flip iframe{
        width: 700px !important;
    }
    .featured-main2-row {
        width: 100% !important;
        text-align: center !important;
    }
    .featured-main2-row p{
        width: 140% !important;
        margin-left: -80px !important;
    }
    .volume-lookbook {
        font-size: 30px !important;
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .techno-section {
        min-height: 550px !important;
        margin-bottom: 20px !important;
    }
    .techno-section1 {
        width: 50% !important;
        margin-bottom: 80px !important;
    }
    .techno-section2 {
        min-height: 300px !important;
    }
    .caption-featured1 {
        font-size: 15px !important;
        margin-left: -47px !important;
    }
    .info-featured1 {
        font-size: 10px !important;
        font-weight: 200 !important;
        margin-top: -25px !important;
        margin-left: -45px !important;
        width: 260px !important;
    }
    .techno-section3 {
        min-height: 300px !important;
    }
    .caption-featured2 {
        font-size: 15px !important;
        margin-right: -15px !important;
    }
    .info-featured2 {
        font-size: 10px !important;
        font-weight: 200 !important;
        margin-top: -25px !important;
        margin-left: 215px !important;
        width: 220px !important;
    }
    .techno-section4 {
        min-height: 300px !important;
    }
    .caption-featured3 {
        font-size: 15px !important;
    }
    .info-featured3 {
        font-size: 10px !important;
        font-weight: 350 !important;
        margin-top: -20px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        width: 220px !important;
    }
    #featured-value {
        margin-top: -20px !important;
    }
}

/*END_PHONE_SET*/
/*PC_SET*/
    
    
    .copyright2 {
        display: none;
    }
    .search-box2 {
        display: none !important;
    }
    .cover-featured2 img{
        display: none !important;
    }
    .home-heading img {
        width: 170px;
        height: auto !important;
    }
    .featured-heading img {
        width: 250px !important;
        height: auto !important;
    }
    .featured-subheading2 {
        display: none;
    }
    
    
    .slide1{
        display: none !important;
    }
    .slide1-1 img{
        width: 1500px;
        margin-top: -80px;
        background-position: center;
    }
    .heading-featured img {
        width: 500px !important;
        height: auto !important;
    }
    .heading-caption img {
        display: none !important;
    }
/*Login Form*/
    .label-login {
        font-family: Montserrat;
        letter-spacing: 2px;
        margin-left: 15px;
        width: 250px;
        color: white;
    }   
    .content-login {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        border-radius: 5px;
        padding: 40px 40px 40px 40px;
        max-width: 600px;
        margin: auto;
    }
    .div-login {
        width: 350px; /* atur lebar form */
        margin: auto;
        position: relative;
        top: 50%;
        transform: translateY(-10%);
        padding: 10px 30px;
        background-color: #424242;
    }
    .form-login {
        background-color: #424242;
        border-radius: 3px;
        width:350px;
    }
    .form-login-control {
        padding-top: 20px;
    }
    .input-login {
        width: 290px;   
        height: 35px;
        font-size: 13px;
        border-radius: 6px;
        border: 0.1rem outset #a6966a;
        background-color: white;
    }
    .custom-hr {
        border: none;
        border-top: 1px solid #a88e62;
        margin-bottom: -1px;
    }
    .header-login {
        margin-top: 25px;
    }
    .logo-login {
        display: block;
        margin: 0 auto 10px auto;
        max-width: 120px;
        height: auto;
    }
    .btn-login {
      font-family: Montserrat;
      border-radius: 6px;
      font-weight: bold;
      color: black;
      background-color: #d1ccbe;
      border:none;
      box-sizing: border-box;
      cursor: pointer;
      font-size: 13px;
      height: 40px;
      width: 290px;
      margin-top: 15px;
      margin-left:30px;
      margin-bottom: 20px;
      transition: background-color 0.3s 
    }
/*End Login Form*/
/*Registration Form*/
.label-registration {
        display: block;
        margin: 30px auto -10px 40px;
        max-width: 240px;
        height: auto;
        font-size:20px;
        color:#fff;
    }
/*End Registration Form*/
/*Retail Form*/
    /* Set gray background color and 100% height */
    .sidenav {
      background-color: #000000;
      height: 100%;
    }
    .div-retail {
        width:14% !important;
        text-align: center;
    }
    .label-retail {
        font-family: Montserrat;
        letter-spacing: 2px;
        margin-left: 15px;
        width: 250px;
        color: white;
    }   
    .custom-hr-retail {
        border: none;
        border-top: 1px solid #a88e62;
        margin-bottom: 40px;
    }
    
    .btnMenuRetail {
        background-color: #e3e3e3; /* Warna latar belakang tombol */
        color: #000000; /* Warna teks tombol */
        padding: 5px 20px; /* Jarak antara teks dan border tombol */
        margin: 0 auto 10px auto; /* Menambahkan margin auto untuk membuat tombol berada di tengah */
        border: none; /* Menghilangkan border default */
        border-radius: 0px; /* Sudut tombol */
        border-bottom: 1px solid #786647; /* Border bawah dengan warna #a88e62 */
        cursor: pointer; /* Mengubah kursor menjadi pointer */
        text-decoration: none; /* Menghilangkan garis bawah */
        display: block; /* Mengubah display menjadi block */
        text-align: center; /* Membuat teks berada di tengah */
        transition: all 0.2s ease-in-out; /* Menambahkan efek transisi */
        width: 100%; /* Menambahkan max-width agar tidak melebihi parent */
        font-size:15px;
    }
    
    .btnMenuRetail:hover {
        background-color: #d6d0b8; /* Warna latar belakang tombol saat dihover */
        color: #000000; /* Warna teks tombol saat dihover */
    }
    
    .btnMenuRetail:active {
        background-color: #a88c48 !important; /* Warna latar belakang tombol saat di klik  */
        border-bottom: 2px solid #594736 !important; /* Warna border bawah saat di klik */
        transform: scale(0.95); /* Efek skala untuk membuat tombol terlihat di tekan */
        transition: all 0.1s ease-in-out; /* Menambahkan efek transisi */
        color:#000000 !important;
    }
    
    .btnMenuRetail:focus {
        background-color: #806c3e; /* Warna latar belakang tombol saat di klik */
        border-bottom: 2px solid #b57f00; /* Warna border bawah saat di klik */
        color: #ffffff; /* Warna teks setelah di klik dan dilepas */
    }
    
    .btnOnClick {
        background-color: #806c3e; /* Warna latar belakang tombol saat di klik */
        border-bottom: 2px solid #b57f00; /* Warna border bawah saat di klik */
        color: #ffffff; /* Warna teks setelah di klik dan dilepas */
        pointer-events: none;
    }
    
    .logo-retail {
        max-width: 80px;
        height: 50px;
        margin-top:20px;
    }
    .content-retail {
        display: flex;
        justify-content: center;
        height: 100vh;
        border-radius: 5px;
        max-width: 600px;
    }
    .form-retail-control {
        padding-top: 20px;
    }
    .input-retail {
        width: 290px;   
        height: 35px;
        font-size: 13px;
        border-radius: 6px;
        border: 0.1rem outset #a6966a;
        background-color: white;
    }
    .btnRetail1 {
        background-color: #808080; /* Warna latar belakang tombol */
        color: #ffffff; /* Warna teks tombol */
        padding: 5px 20px; /* Jarak antara teks dan border tombol */
        margin: 0 auto 10px auto; /* Menambahkan margin auto untuk membuat tombol berada di tengah */
        border: none; /* Menghilangkan border default */
        border-radius: 0px; /* Sudut tombol */
        border-bottom: 1px solid #786647; /* Border bawah dengan warna #a88e62 */
        cursor: pointer; /* Mengubah kursor menjadi pointer */
        text-decoration: none; /* Menghilangkan garis bawah */
        display: block; /* Mengubah display menjadi block */
        text-align: center; /* Membuat teks berada di tengah */
        transform: scale(0.95); /* Efek skala untuk membuat tombol terlihat di tekan */
        transition: all 0.1s ease-in-out;
        font-size:24px;
        width:150px;
        height:50px;
    }
    .btnRetail1:hover {
        background-color: #d6d0b8; /* Warna latar belakang tombol saat dihover */
        color: #000000; /* Warna teks tombol saat dihover */
    }
    
    .btnRetail1:active {
        background-color: #a88c48 !important; /* Warna latar belakang tombol saat di klik  */
        border-bottom: 2px solid #594736 !important; /* Warna border bawah saat di klik */
        transform: scale(0.95); /* Efek skala untuk membuat tombol terlihat di tekan */
        transition: all 0.1s ease-in-out; /* Menambahkan efek transisi */
        color:#000000 !important;
    }
    
    .btnRetail1:focus {
        background-color: #806c3e; /* Warna latar belakang tombol saat di klik */
        border-bottom: 2px solid #b57f00; /* Warna border bawah saat di klik */
        color: #ffffff; /* Warna teks setelah di klik dan dilepas */
    }
    .btnRetail2 {
        background-color: #b5ed9f; /* Warna latar belakang tombol */
        color: #ffffff; /* Warna teks tombol */
        padding: 5px 20px; /* Jarak antara teks dan border tombol */
        margin: 0 auto 10px auto; /* Menambahkan margin auto untuk membuat tombol berada di tengah */
        border: none; /* Menghilangkan border default */
        border-radius: 0px; /* Sudut tombol */
        border-bottom: 1px solid #786647; /* Border bawah dengan warna #a88e62 */
        cursor: pointer; /* Mengubah kursor menjadi pointer */
        text-decoration: none; /* Menghilangkan garis bawah */
        display: block; /* Mengubah display menjadi block */
        text-align: center; /* Membuat teks berada di tengah */
        transform: scale(0.95); /* Efek skala untuk membuat tombol terlihat di tekan */
        transition: all 0.1s ease-in-out;
        font-size:24px;
        width:150px;
        height:50px;
    }
    .btnRetail2:hover {
        background-color: #d6d0b8; /* Warna latar belakang tombol saat dihover */
        color: #000000; /* Warna teks tombol saat dihover */
    }
    
    .btnRetail2:active {
        background-color: #a88c48 !important; /* Warna latar belakang tombol saat di klik  */
        border-bottom: 2px solid #594736 !important; /* Warna border bawah saat di klik */
        transform: scale(0.95); /* Efek skala untuk membuat tombol terlihat di tekan */
        transition: all 0.1s ease-in-out; /* Menambahkan efek transisi */
        color:#000000 !important;
    }
    
    .btnRetail2:focus {
        background-color: #806c3e; /* Warna latar belakang tombol saat di klik */
        border-bottom: 2px solid #b57f00; /* Warna border bawah saat di klik */
        color: #ffffff; /* Warna teks setelah di klik dan dilepas */
    }
    .btnRetail3 {
        background-color: #eda79f; /* Warna latar belakang tombol */
        color: #ffffff; /* Warna teks tombol */
        padding: 5px 20px; /* Jarak antara teks dan border tombol */
        margin: 0 auto 10px auto; /* Menambahkan margin auto untuk membuat tombol berada di tengah */
        border: none; /* Menghilangkan border default */
        border-radius: 0px; /* Sudut tombol */
        border-bottom: 1px solid #786647; /* Border bawah dengan warna #a88e62 */
        cursor: pointer; /* Mengubah kursor menjadi pointer */
        text-decoration: none; /* Menghilangkan garis bawah */
        display: block; /* Mengubah display menjadi block */
        text-align: center; /* Membuat teks berada di tengah */
        transform: scale(0.95); /* Efek skala untuk membuat tombol terlihat di tekan */
        transition: all 0.1s ease-in-out;
        font-size:24px;
        width:150px;
        height:50px;
    }
    .btnRetail3:hover {
        background-color: #d6d0b8; /* Warna latar belakang tombol saat dihover */
        color: #000000; /* Warna teks tombol saat dihover */
    }
    
    .btnRetail3:active {
        background-color: #a88c48 !important; /* Warna latar belakang tombol saat di klik  */
        border-bottom: 2px solid #594736 !important; /* Warna border bawah saat di klik */
        transform: scale(0.95); /* Efek skala untuk membuat tombol terlihat di tekan */
        transition: all 0.1s ease-in-out; /* Menambahkan efek transisi */
        color:#000000 !important;
    }
    
    .btnRetail3:focus {
        background-color: #806c3e; /* Warna latar belakang tombol saat di klik */
        border-bottom: 2px solid #b57f00; /* Warna border bawah saat di klik */
        color: #ffffff; /* Warna teks setelah di klik dan dilepas */
    }
    .bg-btn-retail {
        margin-top:-10px !important;
        background-color: #ffffff !important;
        border: none; !important;
    }
    
/*End Retail Form*/
.home-subheading {
    font-family: 'Montserrat';
    font-size: 30px;
    font-weight: bold;
    letter-spacing: 4px;
    color: #ad9860; 
    z-index:999!important;
}
.caption-s1{
    text-align: center;
    font-size: 75px;
    line-height: 80px;
    letter-spacing: 2px;
}
.caption-s2{
    text-align: center;
    font-size: 45px;
    letter-spacing: 1px;
}
.sub-caption-s1 {
    margin-left: 30px;
    margin-top: 100px;
}
.sub-caption-s1 a{
    font-weight: bold;
    text-align: center;
    line-height: 25px;
    font-size: 20px;
    font-family: 'Montserrat';
}
.tp-banner .home-subheading {
    line-height: 40px!important;
}
.home-button {
    margin-top: 80px;
}
.home-bottom {
    position: absolute;
    z-index: 99;
    width: 100%;
    left: 0;
    bottom: 0;
    text-align: center;
    opacity: 0.9;
} 

ul li a:hover {
    margin-top: 5px;
}
ul li ul.about-dropdown {
    /*min-width: 100%;  Set width of the dropdown */
    background: #f2f2f2;
    display: none;
    position: absolute;
    border-radius: 10px;
    padding: 15px;
    z-index: 999;
}
ul li:hover ul.about-dropdown {
    display: block; /* Display the dropdown */
    margin-left: -20px;
}
ul li ul.about-dropdown li {
    display: block;
}
.about-dropdown{
    width: 200px;
}
ul li ul.about-dropdown a {
    color: #000;
}
ul li ul.about-dropdown a:hover {
    margin-left: 5px;
    color: #d4af37;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.move {
    width: 40px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 15px;
    color: grey;
}
.bounce {
    -webkit-animation: bounce 2s infinite;
    -moz-animation: bounce 2s infinite;
    -ms-animation: bounce 2s infinite;
    animation: bounce 2s infinite;
}
.home-bottom a {
    padding-top: 7px;
    padding-bottom: 17px;
    padding-left: 7px;
    padding-right: 7px;
    color: #a3a3a3; 
    
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
} 
.home-bottom a:hover {
    opacity: .9; 
}
.home-bottom a { 
    font-size: 22px;
}

#multi-page, #one-page {
    padding-top: 60px;
    padding-bottom: 60px; 
}

/*----- Home Revolution Slider -----*/
#home-revolution-slider  {
    min-height: 90%;
}
.hero {
    position: relative; 
    z-index: 1;
    margin-top: 200px;
    margin-bottom: -150px;
    left: 0;
    right: 0;
    background-size: cover; 
}
.hero2 {
    position: relative; 
    z-index: 1;
    margin-top: 200px;
    margin-bottom: -220px;
    left: 0;
    right: 0;
    background-size: cover; 
}
.content {
    position: relative;
    z-index: 3; 
    background-color: #fff;
}
.home-subheading,
.home-button,
.home-heading2 {
    position: relative;
    z-index: 1; 
    text-align: center;
    transform: translateY(0px);
    /*-webkit-transition: 1s opacity ease-in-out;*/
}

.tp-loader.spinner1 {
    width: 40px;
    height: 40px;
    background: url(../img/assets/rev-loader.GIF) no-repeat center center;
    background-color: transparent;
    box-shadow:  none;
    -webkit-box-shadow: none;
    margin-top: -20px;
    margin-left: -20px;
    -webkit-animation: none;
    animation: none;
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
}
 
.tp-banner-container{
    width:100%;
    position:relative;
    padding:0;
    margin-top: 0;
} 
.tparrows.preview4:after {
    background: #fff;
    background: rgba(255,255,255,.05);
}
.tp-caption a {
    color: #fff;
    padding: 9px 22px;
    box-shadow: 0 -3px rgba(0, 0, 0, 0.3) inset;
    -moz-box-shadow: 0 -3px rgba(0, 0, 0, 0.3) inset;
    -webkit-box-shadow: 0 -3px rgba(0, 0, 0, 0.3) inset;
    -o-box-shadow: 0 -3px rgba(0, 0, 0, 0.3) inset;
    margin-left: 60px;
    margin-top:60px;
    text-transform: uppercase;
}
.tp-caption a:hover {
    color: #fff;
}
.html5-video-container video {
    width: 100%!important;
    height: auto!important;
    left: 0!important
}
/*----- Header -----*/ 
nav {
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

.navbar {
    min-height: 70px;
    border: none;
}
.navbar-default {
    position: fixed;
    background-color: #fff;
    border-radius: 0;
    border-color: none;
    border-bottom: none;
    top: 0;
    left: 0;
    width: 100%;
    padding: 0;
    z-index: 4;
    /*border-bottom: 1px solid rgba(255,255,255,0.25);*/
}
.navbar-alt {
    background-color: transparent;
}

.navbar-default .container {
    position: relative;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
}


.navbar-default .navbar-nav {
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 400    ;
    text-transform: uppercase;
    height: 100%;
    margin-bottom: 10px;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

.navbar-alt .navbar-nav > li > a,
.navbar-alt .navbar-nav > li > span {
    color: #000;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.navbar-nav>li>a,
.navbar-nav>li>span {
    margin-top: 3px;
    padding-top: 16px;
    padding-bottom: 13px;
}
.nav>li>a,
.nav>li>span {
    padding-left: 10px;
    padding-right: 10px;
}
.nav > li > span {
    position: relative;
    display: block; 
    cursor: pointer;
}
.navbar-nav .caret {
    margin-left: 3px;
    margin-top: -3px;
}
/*Navbar Toggle*/
.navbar-default .navbar-toggle {
    position: relative;
    float: left;
    padding: 9px 2px;
    margin-top: 26px;
    margin-right: 0px;
    margin-bottom: 8px;
    background-color: transparent;
    background-image: none;
    border: none;
    border-radius: none;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: transparent;
    outline: none;
}
.navbar-toggle .icon-bar {
  display: block;
  width: 22px;
  height: 3px;
  border-radius: 2px;
}
/*Navbar Collapse Menu*/
.navbar-collapse {
    padding-right: 0px;
    padding-left: 0px;
    color: #3a3a3a;
}
.navbar-default .navbar-nav>li>a:focus {
    color: #000;
}
.navbar-small .navbar-nav>li>a:focus {
    color: #000;
}

.header-icon i:hover {
    color: #d4af37;
}
.header-icon a{
    position: relative;
    float: right;
    margin-left: 20px;
    width: 13px;
    list-style: none;
    color: #000;
}
.header-icon i{
    width: 13px;
}
.navbar>.container .navbar-brand {
    margin-left: 0;
}
.navbar-brand {
    float: none;
    height: 55px;
    font-size: 30px;
    line-height: 20px;
}
/* Logo Big White */
.navbar-default .big-logo {
    position: absolute;
    opacity: 1;
    width: 120px;
    margin-left: -10px;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
.navbar-default .small-logo {
    display: none;
    margin-top: -50px;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
/* End Logo Big White */
/* Logo Small Black */

/* End Logo Small Black */


.navbar-default .navbar-nav>.active>a, 
.navbar-default .navbar-nav>.active>a:hover, 
.navbar-default .navbar-nav>.active>a:focus {
    background-color: transparent;
}
.navbar-default .navbar-nav>.open>a, 
.navbar-default .navbar-nav>.open>a:hover, 
.navbar-default .navbar-nav>.open>a:focus {
    background-color: transparent;
}
.dropdown .arrow {
    font-size:9px;    
}
.menu-padding { 
    padding-top:70px; 
}
.content { 
    margin-top:0px; 
}
.navbar .icon {
    font-size: 18px;
}
.navbar .social-icon {
    padding-left: 15px;
    padding-right: 0;
}
/*----- Latest News Section -----*/
.latest-section {
    position: relative;
    box-sizing: border-box;
    background-color: #fff;
    margin-left: auto;
    margin-right: auto;
    margin-top: 180px;
    text-align: center;
    width: 100%;
}
.latest-subheading {
    margin-left: auto;
    margin-right: auto;
}
.caption-latest1{
    font-family: 'Montserrat' !important;
    text-align: center;
    font-weight: bolder;
    font-size: 30px;
    margin-left: -10px;
}
.caption-latest2{
    font-family: 'Montserrat' !important;
    text-align: center;
    margin-top: -130px;
    margin-left: -10px;
    font-size: 15px;
}
.caption-latest3{
    font-family: 'NewYork' !important;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 15px;
    font-weight: 500 !important;
    font-size: 70px;
    width: 110vh;
}
.latest-content {
    margin-top: 70px;
    width: 150vh;
    margin-bottom: -40px;
}
.latest-content p{
    font-family: 'Montserrat', sans-serif;
    text-align: justify;
    font-size: 15px;
    font-weight: 500;
    line-height: 35px;
    letter-spacing: 1.5px;
    color: #000;
}
.latest-content2{
    margin-top: 100px;
    margin-bottom: 100px;
    width: 75%;
}
.latest-content2 img{
    width: 100%;
}
#latest {
    text-align:center;
    padding-bottom: 85px;
}
.latest-slider {
    position:relative;
    margin-top: 2%;
    margin-left: 4%;
}
/*----- End Latest News Section -----*/
/*----- About Section -----*/
#about {
    margin-top: 25%;
    margin-bottom: 15%;
}
.section-about {
    font-size: 50px;
    font-weight: bolder;
    letter-spacing: 12px;
    font-family: 'Montserrat';
    margin-bottom: 40px;
    transform: translateY(0px);
}
.subsection-about {
    font-size: 25px;
    font-weight: bolder;
    letter-spacing: 8px;
    font-family: 'Montserrat';
    text-transform: uppercase;
    margin-bottom: 10px;
    transform: translateY(0px);
}
.about-text {
    margin-top: 20px;
    padding-right: 60px;
}
.about-col {
    margin-bottom: -5px;
}
.about-main-row {
    text-align: justify !important;
    margin-bottom: 20px;
    width: 87%;
    text-align: justify;
    margin-top: 100px;
    color: #000;
}
.about-main-row p {
    text-align: justify !important;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 25px;
    color: #000;
}
#about-main {
    padding-top: 75px;
    margin-top: -60px;
    margin-bottom: 70px;
    width: 100%;
}
#about-main p {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #000;
    text-align: justify;
}
.about-row1 iframe {
    width: 490px;
    height: 280px;
    margin-left: 65px;
}
.about-row2 {
    float: right;
    margin-right: 80px;
    margin-top: 10px;
    width: 35%;
}
.about-row2 p {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #000;
    text-align: justify;
    line-height: 25px;
}
.about-row4 img {
    width: 490px;
    height: 280px;
    margin-right: 80px;
    float: right;
}
.about-row3 {
    float: left;
    margin-top: 80px;
    margin-left: 65px;
    width: 35%;
}
.about-row3 p {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #000;
    text-align: justify;
    line-height: 25px;
}
#our-values {
    width: 100%;
    height: 100%;
    margin-bottom: -250px;
}
#our-values2 {
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
}
/*START AMORE*/
.about-brand-info1 p, 
.about-brand-info2 p,
.about-brand-info3 p,
.about-brand-info4 p,
.about-brand-info5 p,
.about-brand-info6 p {
    text-align: justify;
    width: 390px;
    font-weight: 500;
    color: #000;
    letter-spacing: 2px;
    line-height: 25px;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
}
.section-brand-amore {
    background-image: url('../img/backgrounds/Background Our product-01.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    min-height: 400px;
    margin-bottom: 600px;
}
.brand-amore{
    width: 100%;
    height: 300px;
    margin-top: 20%;
}
.about-brand-info1 {
    margin-left: -20%;
}
.about-brand-info1 img {
    width: 200px;
    padding-bottom: 10px;
}
.about-brand-img1 img {
    position: absolute;
    width: 300px;
    margin-left: 300px;
    margin-top: -310px;
}
/*END AMORE*/
/*START DANCING*/
.section-brand-dancing {
    background-image: url('../img/backgrounds/Background Our product-02.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    min-height: 850px;
    margin-bottom: 600px;
}
.brand-dancing{
    width: 100%;
    height: 300px;
    margin-top: 20%;
}
.about-brand-info2 {
    margin-left: 40%;
}
.about-brand-info2 img {
    width: 200px;
    padding-bottom: 10px;
}
.about-brand-img2 img {
    position: absolute;
    width: 300px;
    margin-left: -500px;
}
/*END DANCING*/
/*START ARDELIA*/
.section-brand-ardelia {
    background-image: url('../img/backgrounds/Background Our product-03.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    min-height: 750px;
    margin-bottom: 600px;
}
.brand-ardelia{
    width: 100%;
    height: 300px;
    margin-top: 20%;
}
.about-brand-info3 {
    margin-left: -20%;
}
.about-brand-info3 img {
    margin-top: -1%;
    width: 150px;
    padding-bottom: 10px;
}
.about-brand-img3 img {
    position: absolute;
    width: 300px;
    margin-left: 300px;
    margin-top: -200px;
}
/*END ARDELIA*/
/*START BAMBINI*/
.section-brand-bambini {
    background-image: url('../img/backgrounds/Background Our product-01.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    min-height: 400px;
    margin-bottom: 600px;
    margin-left: auto;
    margin-right: auto;
}
.brand-bambini{
    width: 100%;
    height: 300px;
    margin-top: 20%;
}
.about-brand-info4 {
    margin-left: -35%;
    padding-bottom: 20px;
}
.about-brand-info4 img {
    width: 150px;
    padding-bottom: 10px;
}
.about-brand-img4 img {
    position: absolute;
    width: 300px;
    margin-left: 250px;
    margin-top: -310px;
}
/*END BAMBINI*/
/*START DUBAI*/
.section-brand-dubai {
    background-image: url('../img/backgrounds/Background Our product-02.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    min-height: 850px;
    margin-bottom: 600px;
}
.brand-dubai{
    width: 100%;
    height: 300px;
    margin-top: 20%;
}
.about-brand-info5 {
    margin-top: -1%;
    margin-left: 40%;
}
.about-brand-info5 img {
    width: 200px;
    padding-bottom: 10px;
}
.about-brand-img5 img {
    position: absolute;
    width: 340px;
    margin-left: -500px;
}
/*END DUBAI*/
/*START ORO*/
.section-brand-oro {
    background-image: url('../img/backgrounds/Background Our product-03.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    min-height: 750px;
    margin-bottom: 600px;
}
.brand-oro{
    width: 100%;
    height: 300px;
    margin-top: 20%;
}
.about-brand-info6 {
    margin-top: -1%;
    margin-left: -20%;
}
.about-brand-info6 img {
    margin-top: -1%;
    width: 150px;
    padding-bottom: 10px;
}
.about-brand-img6 img {
    position: absolute;
    width: 500px;
    margin-left: 200px;
    margin-top: -340px;
}
/*END ORO*/
.section-philosophy {
    background-image: url('../img/backgrounds/bg-about1.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 58%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 170px;
}
.section-philosophy h2 {
    font-size: 50px;
    font-weight: bolder;
    letter-spacing: 12px;
    color: #fff;
    line-height: 10px;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 1px 3.5px 6px grey;
    font-family: 'Montserrat';
}
.caption-philosophy {
    font-size: 50px;
    font-weight: bolder;
    letter-spacing: 12px;
    color: #fff;
    text-shadow: 1px 3.5px 6px grey;
    font-family: 'Montserrat';
    text-align: center;
    padding-top: 160px;
}

.section-vision-mission {
    background-image: url('../img/backgrounds/bg-about2.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    margin-left: auto;
    margin-right: auto;
    height: 80%;
    padding-left: 15%;
    padding-top: 7%;
}
.about-mission{
    display: block;
}
.about-mission p {
    padding-right: 15%;
    margin-left: 40px;
}
.about-vision{
    padding-left: 34%;
    display: block;
}
.about-vision p {
    padding-right: 17%;
}
.about-section{
  padding: 3em;
  height: 100vh;
  position: relative;
  box-sizing: border-box;
  background-color: #fff;
}

#about-p1 {
    margin-top: 200px;
}
.about-main2-row {
    margin-bottom: 20px;
    width: 85%;
    text-align: center;
    color: #000;
}
.about-main2-row p {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 25px;
    letter-spacing: 1.5px;
    color: #000;
}

.about-info h4 {
    font-family: 'Montserrat';
    font-weight: bolder;
    text-transform: uppercase;
    color: #000;
    margin-top: 0px;
    font-size: 12px;
    letter-spacing: 1.5px;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
    text-align: center !important;
}
.about-info p {
    text-align: justify;
    width: 320px;
    font-weight: 500;
    color: #000;
    letter-spacing: 1.5px;
    padding-left: 40px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
}
.about-info {
    padding-top: 5px;
}

.about-mission h4 {
    font-family: 'Montserrat';
    font-weight: bolder;
    text-transform: uppercase;
    text-align: center !important;
    color: #000;
    margin-top: 40px;
    margin-right:-55px;
    font-size: 14px;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
}
.about-mission p {
    text-align: justify;
    width: 450px;
    font-weight: 500;
    color: #000;
    padding-top: 10px;
    line-height: 25px;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
}

.about-vision h4 {
    font-family: 'Montserrat';
    font-weight: bolder;
    text-transform: uppercase;
    text-align: center !important;
    color: #000;
    margin-top: 40px;
    margin-right: -220px;
    font-size: 14px;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
}
.about-vision p {
    text-align: justify;
    width: 450px;
    font-weight: 500;
    color: #000;
    padding-top: 10px;
    margin-left: 30px;
    line-height: 25px;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
}
#service-about {
    padding-top: 50px;
    margin-bottom: 200px;
}

/*Contact Us Section*/
.contact-subheading {
    font-family: 'NewYork';
    font-weight: 500;
    color: #000;
}
.caption-contact1{
    font-family: 'Montserrat' !important;
    text-align: left;
    font-size: 80px;
    line-height: 80px;
    letter-spacing: 7px;
}
.caption-contact2{
    font-family: 'Montserrat' !important;
    width: 450px;
    text-align: left;
    line-height: 30px;
    margin-left: 40px;
    margin-top: 25px;
    font-weight: normal !important;
    font-size: 15px;
    letter-spacing: 2px;
}
.form-contact {
    margin-top: 70px;
    width: 750px;
    margin-bottom: -40px;
}
.label-contact {
    font-family: 'Montserrat';
    letter-spacing: 2px;
    margin-left: 15px;
    width: 250px;
}
.label-contact2 {
    font-family: 'Montserrat';
    font-size: 11px;
    font-weight: normal;
    letter-spacing: 2px;
}
.label-contact3 {
    font-family: 'Montserrat';
    font-size: 11px;
    font-weight: normal;
    letter-spacing: 2px;
    color: red;
}
.input-contact {
    width: 320px;
    height: 45px;
    border-radius: 6px;
    border: 0.1rem outset #d1d1d1;
    padding-left: 10px;
}
.input-contact2 {
    width: 695px;
    height: 45px;
    border-radius: 6px;
    border: 0.1rem outset #d1d1d1;
    padding-left: 10px;
}
.textarea-contact {
    width: 695px;
    height: 230px;
    border-radius: 15px;
    border: 0.1rem outset #d1d1d1;
    margin-bottom: 80px;
    background-color: #fff;
    resize: none;
    color: #000;
    padding-left: 10px;
    padding-top: 10px;
}

.btn-contact {
  font-family: 'Montserrat';
  border-radius: 16px;
  font-weight: bold;
  color: #000;
  background-color: #dfc286;
  border: 0;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 18px;
  margin-left: 185px;
  margin-bottom: 80px;
  height: 45px;
  width: 150px;
}
.btn-partner {
  font-family: 'Montserrat';
  border-radius: 16px;
  font-weight: bold;
  color: #000;
  background-color: #dfc286;
  border: 0;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 18px;
  margin-bottom: 80px;
  margin-top:80px;
  margin-left:-90px;
  height: 45px;
  width: 150px;
}
#contact-value {
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
}
.contact-section1 {
    background-image: url('../img/backgrounds/Contact Us BawahArtboard 2.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    min-height: 900px;
    margin-left: auto;
    margin-right: auto;
}
/*End Contact Us Section*/

/*Partner Session*/
.partner-section {
    position: relative;
    box-sizing: border-box;
    background-color: #fff;
    margin-left: auto;
    margin-right: auto;
    margin-top: 180px;
    text-align: center;
    width: 100%;
}
.partner-caption {
    font-size: 28px;
    font-weight: bold;
    letter-spacing: 3px;
    font-family: 'Montserrat';
    margin-bottom: 80px;
}
.partner-main-row {
    width: 80%;
    text-align: center;
    color: #000;
}
#partner-value {
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
}
.partner-section2 {
    background-image: url('../img/backgrounds/Store Page BGArtboard 1.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    min-height: 650px;
    margin-left: auto;
    margin-right: auto;
}
.caption-partner-section1 {
    margin-left: 4%;
    margin-top: 3%;
    border-radius: 2%;
    min-height: 100px;
    padding-top: 100px;
    padding-bottom: 70px;
    float: left;
    background-color: #fff;
    box-shadow: 3px 4px 10px rgba(0,0,0,0.6);
}
.caption-partner1{
    text-align: left;
    font-family: 'Montserrat', sans-serif;
    color: #000;
    font-size: 14px;
    padding-left: 30px;
    font-weight: 500;
    letter-spacing: 1.5px;
    margin-top: -60px;
    margin-bottom: 40px;
}
.info-partner1{
    text-align: left;
    font-family: 'Montserrat', sans-serif;
    color: #000;
    font-size: 20px;
    font-weight: 300;
    line-height: 25px;
    letter-spacing: 1.5px;
}
#city_list{
    font-size: 20px;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    padding-bottom: 5px;
    border: none;
    outline: none;
}
.styleSelect select {
  background: transparent;
  width: 360px;
  padding-left: 5px;
  font-size: 16px;
  line-height: 2;
  height: 50px;
  -webkit-appearance: none;
  color: #000;
}

.styleSelect select option {
    min-height: 50px;
}

.styleSelect {
  width: 350px;
  height: 34px;
  margin-top: -25px;
  overflow: hidden;
  margin-left: 28px;
  padding-bottom: 40px;
  border-bottom: 2px solid;
  background: url("../img/assets/arrowdown.png") no-repeat right #fff;
}
.styleSelect:focus {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}
select option:checked,
select option:hover {
    box-shadow: 0 0 10px 100px #000 inset;
}

#city_list option:hover,
    #city_list option:focus,
    #city_list option:active {
        background: linear-gradient(#000000, #000000);
        background-color: #000000 !important; /* for IE */
        color: #ffed00 !important;
    }

    #city_list option:checked {
        background: linear-gradient(#d6d6d6, #d6d6d6);
        background-color: #d6d6d6 !important; /* for IE */
        color: #000000 !important;
    }
#myScrollTable tbody {
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 1px;
    clear: both;
    border: 0px;
    width: 380px;
    height: 300px;
    margin-top: 25px;
    margin-left: 15px;
    line-height: 40px;
    overflow: auto;
    float: left;
}
table tbody {
    overflow-x: hidden !important;
}
table tbody::-webkit-scrollbar {
    width: 3px !important;
}
table tbody::-webkit-scrollbar-track {
    background: #e1e1e1 !important;
}
table tbody::-webkit-scrollbar-thumb {
    background: #636363!important;
    border-radius: 5px!important;
    box-shadow: 1px 1px 1px #fff !important;
}

select::-webkit-scrollbar {
    width: 3px !important;
}
select::-webkit-scrollbar-track {
    background: #e1e1e1 !important;
}
select::-webkit-scrollbar-thumb {
    background: #636363!important;
    border-radius: 5px!important;
    box-shadow: 1px 1px 1px #fff !important;
}
.hover_act::hover {
    background-color: red !important;
}
#partner_list {
    padding-top: -100px;
}
.frame-map {
    margin-top: 3%;
    margin-left: 40%;
    background-color: none;
}
.frame-map iframe{
    border-radius: 10px;
    box-shadow: 3px 4px 10px rgba(0,0,0,0.6);
    background-color: none;
}
.frame-map2 {
    margin-left: auto;
    margin-right: auto;
    background-color: none;
}
.form_map {
    width: 380px;
}
.btn_map button{
    width: 370px;
    min-height: 25px;
    margin-left: -370px;
    color: none;
    background-color: transparent;
    border: none;
}
.btn_map button:focus{
    border-top: 1px transparent;
    border-bottom: 3px solid #d4af37;
    border-left: 1px transparent;
    border-right: 1px transparent;
    opacity: 40%;
    padding-bottom: 6px;
    border-radius: 8px;
}
.fa-size {
    font-size: 25px;
    width: 30px;
}
/*End Partner Session*/
.progress {
    border-radius: 3px;
    height: 6px;
    background-color: #ebebeb;
    overflow: visible;
    margin-bottom: 20px; 
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -o-border-radius: 3px;
    -moz-border-radius: 3px;
    
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) inset;
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) inset;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) inset;
    -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) inset;
}
.progress-bar {
    position: relative;
    border-radius: 3px;
    box-shadow: none; 
}
.progress-bars p {
    line-height: .5;
}
#skills .progress-bars p {
    color: #dedede;
}
.progress-bar-tooltip {
    position: absolute;
    background-color: #343434;
    top: -30px;
    padding: 1px 6px;
    font-size: 11px;
    right: -10px;
    border-radius: 3px;
    color: #dedede; 
}
.progress-bar-tooltip:after {
    position: absolute;
    border-color: #343434 transparent;
    border-style: solid;
    border-width: 5px 5px 0;
    bottom: -5px;
    content: "";
    left: 35%;
}

/*----- Fun Facts -----*/
#fun-facts {
    display: table;
    width: 100%;
    height: 20%;
    z-index: 1;
} 
.fact-container {
    padding-top:40px;
    padding-bottom:30px;
}
.fact h2 {
    font-size: 65px;
    letter-spacing: 0px;
    margin: 0;
    line-height: 65px; 
}
.fact h4 {
    font-size: 14px;
    margin-bottom: 0px;
}
.fact p {
    font-size: 13px;
    margin-top: 3px;
}
.counter {
    font-family: 'Exo', sans-serif;
    font-size: 65px;
    font-weight: 700;
    letter-spacing: 0px;
    margin: 0;
    line-height: 65px;  
}
#fun-facts .lead {
    font-size: 16px;
}

/*----- Services -----*/
#services {
    padding-top: 75px;
    margin-top: -60px;
}
.service-row{
    text-align: left
}
.service-col1 {
    margin-bottom: 50px;
}
.service-col2 {
    margin-bottom: 50px;
}
.service-col3 {
    margin-top: 0px;
}
.service {
    margin-top: 20px;
}
.service-info {
    margin-top: 40px;
}
.btn-effect {
    display: inline-block;
    text-align: center;
    cursor: pointer;
    color: #fff;
    font-family: 'Exo', sans-serif;
    font-weight: 400!important;
    font-size: 14px; 
    overflow: hidden;
    position: relative;
    z-index: 0;
    vertical-align: middle;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    text-decoration: none;
    text-shadow: none;
    border: 0;
    padding: 8px 22px;
    border: 1px solid rgba(255,255,255,.7);
    border-radius: 3px;
    margin-top: 20px;
    margin-bottom: 20px;
} 
.btn-effect:after {
    content: '';
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 0;
    bottom: 0;
    left: 0;
    transition: all 0.3s;
}
.btn-effect:hover {
    background: none;
    opacity: 1!important;
    color: #fff;
}
.btn-effect:hover:after {
    height: 100%;
}

/*----- lookbook -----*/
.lookbook-section {
    margin-top: 180px;
}
#lookbook {
    text-align:center;
    padding-bottom: 85px;
}
#lookbook2 {
    padding-top: 150px;
    text-align:center;
    padding-bottom: 85px;
}
.lookbook-slider {
    position:relative;
    margin-top: 2%;
    margin-left: 4%;
}
.lookbook{
    width: 80%;
    height: auto;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    -webkit-transition: 0.7s ease;
    transition: 0.7s ease;
}
.lookbook:hover{
    width: 80%;
    height: auto;
    -webkit-transform: scale(1.08);
    transform: scale(1.08);
}
.lookbook:active{
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
}
.box{
    margin-top: 30px;
    margin-bottom: 40px;
}
.box::before,
.box::after{
    content: '';
    position: absolute;
    top: 98%;
    bottom: 1px;
    filter: blur(2px);
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 30px rgba(0, 0, 0, 1);
    z-index: -1;
}
.box::before {
    left: 75px;
    right: 35px;
    transform: rotate(5deg);
}
.box2::before,
.box2::after{
    content: '';
    position: absolute;
    top: 50%;
    bottom: -1.5px;
    filter: blur(2px);
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 30px rgba(0, 0, 0, 1);
    z-index: -1;
}
.box2::before {
    left: 83%;
    right: 43px;
    transform: rotate(-5deg);
}
.volume-lookbook {
    font-size: 30px;
    font-weight: 300;
    text-align: left;
    margin-left: 50px;
    letter-spacing: 2px;
    font-family: 'Montserrat';
    margin-bottom: 20px;
}
/*End Lookbook*/

/*----- Google maps -----*/
#map {
    height:450px;
    width:100%;
}

/*----- Footer 1 -----*/
.footer-info h4 {
    letter-spacing: 1px;
    font-family: 'Playfair Display', serif;
    text-transform: uppercase;
    color: #1c1c1c;
    font-size:17px;
    margin-top: 10px;
    margin-left: 85px;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
}
.footer-info p {
    text-align:left;
    font-weight: 500;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
}
.footer-icon img{
    float: left;
    width: 120px;
    margin-top: -30px;
}
.footer-info {
    padding-top: 5px;
    margin-bottom: 50px;
}
.footer-info ul.footer-form li i.fa {
    color:#fff;
}
.footer-info ul.footer-form li h6 {
    font-size:11px;
    color:#fff;
    font-family: 'Montserrat';
}
.footer-form li{
    list-style: none;
    text-align: left;
}
.footer-form{
    margin-left: 50px;
}
.footer-widgets {
    background-color: #252525;
    color: #7e7e7e;
    padding: 55px 0px 0 0;
    margin-bottom: 0px
}
.footer-building{
    margin-left: 25px;
    margin-top: -15px;
}
.footer-phone{
    margin-left: 25px;
    margin-top: -15px;
}
.footer-home{
    margin-left: 25px;
    margin-top: -15px;
}
.footer-mail{
    margin-left: 25px;
    margin-top: -15px;
}
.footer-ig{
    margin-left: 25px;
    margin-top: -15px;
}
.footer-fb{
    margin-left: 25px;
    margin-top: -15px;
}
.footer-yt{
    margin-left: 25px;
    margin-top: -15px;
}
.form-group {
    margin-bottom: 30px;
    width: 240px;
    float: left;
}
.form-group input{
    background-color: #707070;
    color: white !important;
    border-radius: 8px;
    border: none;
}
.col-footer {
    margin-bottom: 55px;
    max-height: 160px;
}

footer h4 {
    font-size: 16px;
    color: #DDD;
    margin-bottom: 20px;
    text-transform: uppercase;
}
footer p {
    font-size: 13px;
    color: #a0a0a0;
}
.tweet ul {
    list-style: none;
    padding-left: 0;
}
.tweet ul li {
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 400;
    color: #a0a0a0;
}
.tweet ul li .date {
    color: #CCC;
}
footer .contact-details {
    list-style: none;
    margin: 0;
    padding: 0
}
.contact-details .icon {
    font-size: 1.2em;
    margin-right: 8px;
}
.footer-copyright {
    padding-top: 40px;
    padding-bottom: 100px;
    background-color: #282828;
}
.footer-copyright h4{
    color: #fff;
}
.footer-copyright p {
    margin: 0;
    line-height: 22px;
    color: #8C8989;
    padding-bottom: 10px;
}
.copyright p {
    margin-top: 300px; 
    color: #fff; 
    margin-bottom: -100px; 
    font-size: 11px; 
    font-weight: 300;
}
footer #social-icons {
    list-style: none;
    text-align: right;
    margin: 0;
}
footer .social-icons {
    list-style: none;
    text-align: center;
    margin: 0;
    padding: 0;
}
footer .social-icons li {
    font-size: 20px;
    display: inline-block;
    margin-left: 10px;
    margin-right: 10px;
}
footer .social-icons li a {
    color: #46494a;
}

@media (max-width:992px) {
    .footer-copyright p {
        text-align: center;
    }
    footer #social-icons {
        float: none!important;
        text-align: center;
        padding-left: 0px;
        padding-top: 10px;
    } 
}
footer #social-icons li {
    font-size: 20px;
    display: inline-block;
    margin-left: 10px;
    margin-right: 10px;
}
footer #social-icons li a {
    color: #46494a;
}
footer a:hover {
    color: #fff;
}
/*----- Subscribe Form -----*/
.alert_wrapper{
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 999;
}
.alert_wrapper .alert_item{
    z-index: 3; 
    position: fixed;
    top: -100%;
    left: 50%;
    transform: translate(-50%,-50%);
    display: flex;
    align-items: center;
    padding: 25px 50px;
    border-radius: 3px;
    transition: all 0.2s ease;
}

.alert_wrapper .alert_item .data{
    margin: 0 50px;
}
.alert_wrapper .alert_item .data .title{
    font-size: 18px;
    margin-bottom: 5px;
}
.alert_wrapper .alert_item .data span{
    font-weight: 700;
}
.alert_wrapper .alert_item .data .sub{
    font-size: 14px;
    font-weight: 100;
}
.alert_wrapper .alert_item .icon{
    font-size: 32px;
}
.alert_wrapper .alert_item .close{
    cursor: pointer;
}

.alert_item.alert_info .close:hover{
    color: #a5c7d8;
}

.alert_item.alert_warning .close:hover{
    color: #dcd4a2;
}

.alert_item.alert_error .close:hover{
    color: #c79995;
}

.alert_item.alert_success .close:hover{
    color: #adc5a5;
}

.alert_wrapper.active{
    visibility: visible;
}
.alert_wrapper.active .alert_item{
    top: 50%;
}

/*----- Back to Top Button -----*/
#back-to-top {
    position: fixed;
    color: #fff;
    z-index: 100;
    line-height: 26px;
    bottom: -50px;
    right: 20px;
    display: none;
    cursor: pointer;
    border-radius: 2px;
    height: 30px;
    width: 30px;
    display: block;
    text-align: center;
    transition: background-color 0.1s linear;
    -moz-transition: background-color 0.1s linear;
    -webkit-transition: background-color 0.1s linear;
    -o-transition: background-color 0.1s linear;
}
#back-to-top:hover {
    color: #fff;
    background-color: #121212;
}
#back-to-top .icon {
    font-size: 10px;
}
.to-top {
    cursor: default;
}
 

/*----- Shortcodes -----*/

/*-- Buttons --*/
.btn-primary {
    text-transform: uppercase;
    -webkit-transition: all ease .3s;
    -moz-transition: all ease .3s;
    -o-transition: all ease .3s;
    -ms-transition: all ease .3s;
    transition: all ease .3s;
    background-color: #ad9860 !important;
    width: 165px;
    height: 40px;
}
.btn, 
.btn-default, 
.btn-primary, 
.btn-success, 
.btn-info, 
.btn-warning, 
.btn-danger {
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: none;
    border-radius: 12px;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    line-height: 1.6;
    letter-spacing: 0.5px;
    margin: 0 5px 0 5px;
    padding: 10px 22px;
    text-align: center;

    box-shadow: 0 -3px rgba(0, 0, 0, 0.3) inset;
    -moz-box-shadow: 0 -3px rgba(0, 0, 0, 0.3) inset;
    -webkit-box-shadow: 0 -3px rgba(0, 0, 0, 0.3) inset;
    -o-box-shadow: 0 -3px rgba(0, 0, 0, 0.3) inset;
    
    -webkit-transition: all ease .3s;
    -moz-transition: all ease .3s;
    -o-transition: all ease .3s;
    -ms-transition: all ease .3s;
    transition: all ease .3s;
}
.btn:hover, 
.btn-primary:hover, 
.btn-success:hover, 
.btn-info:hover, 
.btn-warning:hover, 
.btn-danger:hover {
    border-color: none;
    opacity: .7;
}
.btn:focus, 
.btn-primary:focus, 
.btn-success:focus, 
.btn-info:focus, 
.btn-warning:focus, 
.btn-danger:focus {
    border-color: none;
}
.btn-primary:hover, 
.btn-primary:focus, 
.btn-primary:active, 
.btn-primary.active, 
.open>.dropdown-toggle.btn-primary {
    color: #fff;
    background-color: #1C1C1C;
    border-color: none;
}
.btn:focus, 
.btn:active:focus, 
.btn.active:focus, 
.btn.focus, .btn:active
.focus, 
.btn.active.focus {
outline: none;
outline-offset: 0;
}
.btn-default {
    color: #1c1c1c;
    background-color: #fff;
    border-color: none;
    border: none;
}
.btn-default:hover {
    color: #fff;
}
.btn-primary-full {
    width: 100%;
    font-family: 'Montserrat';
    text-transform: uppercase;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: none;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    line-height: 2;
    margin: 0;
    padding: 5px 20px;
    text-align: center;  
    transition: background-color 0.1s linear;
    -moz-transition: background-color 0.1s linear;
    -webkit-transition: background-color 0.1s linear;
    -o-transition: background-color 0.1s linear;
}
.btn-primary-full:hover {
    background-color: #1c1c1c; 
}
.open .dropdown-toggle.btn-primary {
    border-color: none;
}
.btn-transparent {
    padding: 6.5px 20px!important;
    color: #fff;
    font-family: 'Exo', sans-serif;
    font-weight: 400!important;
    background-color: transparent;
    border: 2.3px solid rgba(255,255,255,.8);
}
.btn-transparent-dark {
    padding: 6.5px 20px!important;
    color: #252525;
    font-family: 'Exo', sans-serif;
    text-transform: uppercase;
    font-weight: 700!important;
    background-color: transparent;
    border: 2.3px solid rgba(0,0,0,.7);
}
.btn-buy {
    color: #f6f7f7;
    padding: 2px 6px;
    font-size: 10px;
    line-height: 1;
    border-radius: 2px;
    transition: background-color 0.1s linear;
    -moz-transition: background-color 0.1s linear;
    -webkit-transition: background-color 0.1s linear;
    -o-transition: background-color 0.1s linear;
}
.btn-icon .icon {
    margin-right: 5px;
}
#page-top {
   background: url(../img/backgrounds/bg-shortcodes.jpg);
   height: 500px;
}
#page-top img {
    position:fixed;
    width: 100%;
}
.page-top-title {
    top:160px;
    position:relative;
    z-index: 99;
}
.page-top-title h2 {
    font-size:60px;
    letter-spacing:2px;
}

.btn-link:hover,
.btn-link:focus {
  color: #3a3a3a;
  text-decoration: underline;
  background-color: transparent;
}
.form-control:focus {
    border-color: #3a3a3a;
    outline: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.form-control {
    margin-top: 20px;
    border-radius: 0px;
}
/*--tabs--*/
.nav-tabs>li>a {
    font-family: 'Exo', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #666;
    cursor: default;
    background-color: #f0f0f0;
    border: 1px solid #f0f0f0;
    border-radius: 4px;
}
.nav-tabs>li>a:hover {
    color: #fff;
    cursor: pointer;
}
.nav-tabs {
    border-bottom: none;
}
.tab-pane p {
    line-height: 24px;
}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus {
    font-family: 'Exo', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #fff;
    cursor: default; 
    border: 1px solid #f0f0f0;
    border-radius: 4px;
    cursor: pointer;
}
.tab-content {
    padding-top: 20px;
}
/*----- Owl Carousel -----*/  
.owl-theme .owl-controls .owl-buttons div {  
    color: #1C1C1C;
    display: inline-block; 
    margin: 5px 3px 10px 3px;
    padding: 0px 10px;
    font-size: 12px; 
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0; 
}
.owl-carousel  .owl-item {
    cursor: move; /* fallback if grab cursor is unsupported */        
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}
 /* Applies a "closed-hand" cursor during drag operation. */            
.owl-carousel  .owl-item:active { 
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
}
.owl-theme .owl-controls .owl-page span {
    cursor: pointer;
    display: inline-block;
    background-color: #bbb;
    border-color: #bbb;
    border: 2px solid transparent;
    height: 12px;
    width: 12px;
    border-radius: 50%;
    margin: 0 3px; 
    -moz-background-clip: content;
    -webkit-background-clip: content;
    background-clip: content-box;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}
.owl-theme .owl-controls .owl-page.active span {
    border-color: #f0f0f0;
    background-color: transparent;
}
.owl-carousel{
    overflow: hidden;
}
.owl-theme .owl-controls .owl-buttons div {
    padding: 5px 9px;
    background: rgba(0,0,0,.2);
    opacity: 0;
}
.owl-carousel:hover .owl-controls .owl-buttons div { 
    opacity: 1;
}
.owl-prev:hover,
.owl-next:hover { 
    opacity: .7!important;
}
.owl-theme .owl-controls .owl-buttons div,
.owl-carousel:hover .owl-controls .owl-buttons div { 
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
}
.owl-buttons i { 
    font-size: 16px;
    color: #fff;
}
.owl-buttons div {
    position: absolute;
}
.owl-buttons .owl-prev {
    left: -6px; 
    height: 115px;
    width: 43px;
    line-height: 111px; 
}
.owl-buttons .owl-next {
    right: -6px; 
    height: 115px;
    width: 43px; 
    line-height: 111px;
}
.blog-post-fullwidth .owl-buttons .owl-prev,
.blog-post-fullwidth .owl-buttons .owl-next {
    margin-top: 10%;
}
.blog-post .owl-pagination {
    display: block;
    width: 100%;
    position: absolute;
    bottom: 20px;
    left: 0;
    text-align: center;
    z-index: 100 !important;
} 
.blog-post .owl-theme .owl-controls .owl-page span {
    cursor: pointer;
    display: inline-block;
    background-color: #888;
    border-color: #888;
    border: 2px solid transparent;
    height: 12px;
    width: 12px; 
    margin: 0 3px;
    opacity: 1;
    -moz-background-clip: content;
    -webkit-background-clip: content;
    background-clip: content-box;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}
.blog-post .owl-theme .owl-controls .owl-page.active span {
    border-color: #888; 
    background-color: transparent;
}
.blog-post .owl-controls.clickable {
    margin-top: 0; 
    text-align: center;
}
.blog-post .btn {
    margin-top: 10px;
    margin-left: 0;
}
/*Search Section*/
.search-box:hover > .search-input {
    position: absolute;
    right: 75px;
    width: 150px;
    border-radius: 5px;
    background: #fff;
    border-color: #d4af37 !important;
    border: 2px;
    border-bottom-style: solid;
}
.search-box{
    list-style: none;
    float: right;
}
.search-input{
    border: none;
    width: 0px;
    outline: none;
}
.search-btn:hover {
    margin-top: 0px;
}
.search-btn {
    border: none;
    background-color: transparent;
}
/*END_PC_SET*/