:root {




   --color_blu_premey: #21385E;
    --blue_secondery: #0C295A;
    --Orange_premery: #DE8333;
    --White_Title: #F2F2F2;
    --black_secondery: #1E1E1E;
    --gray-light: #f5f5f5;
    --gray-text: #666;






  --theme-color-white: #ffffff;
  --theme-color-white-rgb: 255, 255, 255;
  --theme-color-light: #f8f5f0;
  --theme-color-gray: #f6f6f6;
  --theme-color-black: #000000;
  --theme-color-black-rgb: 0, 0, 0;
  --theme-color1: #21385E;
  --theme-color1-rgb: 34, 36, 41;
  --theme-color2: #DE8333;
  --theme-color2-rgb: 255, 170, 23;
  --theme-color3: #9DAAA4;
  --theme-color4: #21385E;
  --theme-color5: #21385E;
  --theme-color6: #30443C;
  --theme-color7: #dd8b44;
  --theme-color8: #F8F9F5;
  --theme-bg-color1: #F0FDFE;
  --bg-theme-color1: var(--theme-color1);
  --bg-theme-color2: var(--theme-color2);
  --bg-theme-color3: var(--theme-color3);
  --border-theme-color1: var(--theme-color1);
  --border-theme-color2: var(--theme-color2);
  --border-theme-color3: var(--theme-color3);
  --text-color-bg-theme-color1: #fff;
  --text-color-bg-theme-color2: #0f0f0f;
  --text-color-bg-theme-color3: #fff;
  --gradient-1: linear-gradient(313.49deg, #FFF4DD 2.4%, #F1FFDE 49.55%, #E7FFD8 82.23%);
  --gradient-2: linear-gradient(247.34deg, #B0DBE5 -0.54%, #F3FDFF 39.73%, #F1FCFE 62.81%, #C9E8EF 93.75%);
  --gradient-3: linear-gradient(180deg, rgba(12, 35, 24, 0) 40%, #0B4654 100%);
  --gradient-4: linear-gradient(180deg, rgba(11, 70, 84, 0) 60%, #0B4654 100%);
  --gradient-5: linear-gradient(270deg, rgba(12, 35, 24, 0) 41.35rgb(5, 5, 5)654 90%);
  --gradient-6: linear-gradient(180deg, rgba(12, 35, 24, 0) 30%, #0C2318 95%);
  --text-color: #A8BFC4;
  --heading-color: #21385E;
  --link-color: #0B4654;
  --link-hover-color: #5b8c51;
  --text-font: "Noto Sans", sans-serif;
  --title-font: "Outfit", sans-serif;
  --body-font-size: 16px;
  --body-line-height: 28px;
  --body-font-weight: 400;
  --line-height-heading-h1: 1em;
  --line-height-heading: 1.2em;
  --line-height-heading-small: 1.4em;
  --h1-font-size: 50.8px;
  --h2-font-size: 48px;
  --h3-font-size: 31.2px;
  --h4-font-size: 23.2px;
  --h5-font-size: 18px;
  --h6-font-size: 14px;
  --h1-font-weight: 600;
  --h2-font-weight: 700;
  --h3-font-weight: 700;
  --h4-font-weight: 700;
  --h5-font-weight: 700;
  --h6-font-weight: 700;
  --sec-title-subtitle-color: var(--theme-color2);
  --sec-title-subtitle-font-size: 13px;
  --sec-title-subtitle-font-family: var(--text-font);
  --sec-title-subtitle-font-weight: 700;
  --sec-title-subtitle-line-height: 1.2em;
  --sec-title-color: var(--heading-color);
  --sec-title-font-size: 50px;
  --sec-title-font-family: var(--title-font);
  --sec-title-font-weight: var(--h2-font-weight);
  --theme-light-background: #f8f6f1;
  --theme-light-background-text-color: var(--heading-color);
  --theme-black: #222429;
  --container-width: 1350px;
  --main-container-width: 1320px;
  --small-container-width: 1000px;
  --large-container-width: 1550px;
  --container-pt: 120px;
  --container-pb: 120px;
}

/*
 * typography.scss
 * -----------------------------------------------
*/



/*======top menu======*/
/* =========================
ACCOUNT DROPDOWN
========================= */



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

.account_btn{

    border: none;

    background: transparent;

    display: flex;

    align-items: center;

    gap: 6px;

    cursor: pointer;

    font-size: 18px;

    font-weight: 600;

    color: #ffffff;

    transition: .3s;
}


.account_btn:hover{

    opacity: .85;
}


.account_btn svg{

    width: 22px;

    height: 22px;
}


.account_btn i{

    font-size: 20px;
}



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

.login_btn{

    display: flex;

    align-items: center;

    gap: 8px;

    font-size: 18px;

    font-weight: 600;

    color: #101820;

    transition: .3s;
}


.login_btn:hover{

    color: #DE8333;
}
/* =========================
TOP HEADER
========================= */

.top_header{

    width: 100%;

    background: #eef2f5;

    border-bottom: 1px solid #e5e7eb;

    padding: 14px 80px;

      position: relative;
height:50px;
    z-index: 99999;
    display:flex;
     flex-wrap: nowrap;


}


.top_header_container{

    display: flex;

    justify-content: flex-end;

    align-items: center;

    gap: 40px;
}



/* LINKS */
.top_header_container a{

    font-size: 14px;

    font-weight: 500;

    color: #101820;

    transition: .3s;
}


.top_header_container a:hover{

    color: #DE8333;
}



/* =========================
LANGUAGE
========================= */

.language_dropdown{

    position: relative;
}


.lang_btn{

    border: none;

    background: transparent;

    display: flex;

    align-items: center;

    gap: 6px;

    cursor: pointer;

    font-size: 16px;

    font-weight: 600;

    color: #101820;
}


.lang_btn i{

    font-size: 20px;
}



/* MENU */
.lang_menu{

    position: absolute;

    top: 45px;

    right: 0;

    width: 190px;

    background: white;

    border-radius: 14px;

    padding: 10px;

    display: none;

    flex-direction: column;

    gap: 5px;

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



/* FORM */
.lang_menu form{

    width: 100%;
}



/* BUTTON */
.lang_menu button{

    width: 100%;

    border: none;

    background: transparent;

    padding: 12px 14px;

    border-radius: 10px;

    text-align: left;

    cursor: pointer;

    font-size: 15px;

    font-weight: 500;

    transition: .3s;
}


.lang_menu button:hover{

    background: #f3f4f6;

    color: #DE8333;
}



/* ACTIVE */
.language_dropdown.active .lang_menu{

    display: flex;
}



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

@media(max-width:768px){

    .top_header{

        padding: 12px 20px;
        height:50px;
    z-index: 99999;
    display:flex;
    flex-wrap: nowrap;
    display:none;
    }

    .top_header_container{

        justify-content: center;

        gap: 15px;

        flex-wrap: wrap;
    }

    .top_header_container a{

        font-size: 14px;
    }

}

@media(max-width:768px){

    .account_dropdown{

        width: 100%;
    }


    .account_btn{

        width: 100%;

        display: flex;

        align-items: center;

        justify-content: space-between;

        padding: 14px 18px;

        font-size: 16px;

        color: #fff;
    }


    .account_btn span{

        display: block;
    }



    /* MENU */
    .account_menu{

        position: relative;

        top: 0;

        right: 0;

        width: 100%;

        max-width: 100%;

        margin-top: 10px;

        border-radius: 14px;

        padding: 10px;

        box-shadow: none;

        background: #ffffff;

        animation: none;

        display: none; /* 🔥 IMPORTANT */
    }



    /* ACTIVE */
    .account_dropdown.active .account_menu{

        display: flex !important;

    }



    .account_info h4{

        font-size: 16px;
    }


    .account_info p{

        font-size: 13px;
    }


    .account_menu a{

        font-size: 14px;

        padding: 12px;
    }

}


::selection {
  background: var(--theme-color2);
  color: #fff;
  text-shadow: none;
}

::-moz-selection {
  background: var(--theme-color2); /* Firefox */
  color: #fff;
  text-shadow: none;
}

::-webkit-selection {
  background: var(--theme-color2); /* Safari */
  color: #fff;
  text-shadow: none;
}

:active,
:focus {
  outline: none !important;
}

::-webkit-input-placeholder {
  color: #7c858c;
}

::-moz-input-placeholder {
  color: #7c858c;
}

::-ms-input-placeholder {
  color: #7c858c;
}

body {
  background-color: #fff;
  background-attachment: fixed;
  -ms-word-wrap: break-word;
  word-wrap: break-word;
  counter-reset: my-sec-counter;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  color: var(--text-color);
  font-size: var(--body-font-size);
  font-family: var(--text-font);
  font-weight: var(--body-font-weight);
  line-height: var(--body-line-height);
}

p, .text {
  color: var(--text-color);
  font-size: var(--body-font-size);
  font-family: var(--text-font);
  font-weight: var(--body-font-weight);
  line-height: var(--body-line-height);
}

/* -------- Headings ---------- */
h1, h2, h3, h4, h5, h6 {
  color: var(--heading-color);
  font-family: var(--title-font);
  position: relative;
  line-height: var(--line-height-heading-);
}
h1 small,
h1 .small, h2 small,
h2 .small, h3 small,
h3 .small, h4 small,
h4 .small, h5 small,
h5 .small, h6 small,
h6 .small {
  font-weight: normal;
  line-height: 1;
  color: var(--heading-color);
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  color: inherit;
  font-weight: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-bottom: 5px;
}

h1 {
  font-size: var(--h1-font-size);
  font-weight: var(--h1-font-weight);
  line-height: var(--line-height-heading-h1);
}

h2 {
  font-size: var(--h2-font-size);
  font-weight: var(--h2-font-weight);
  line-height: var(--line-height-heading);
}

h3 {
  font-size: var(--h3-font-size);
  font-weight: var(--h3-font-weight);
  line-height: var(--line-height-heading);
}

h4 {
  font-size: var(--h4-font-size);
  font-weight: var(--h4-font-weight);
  line-height: var(--line-height-heading-small);
}

h5 {
  font-size: var(--h5-font-size);
  font-weight: var(--h5-font-weight);
  line-height: var(--line-height-heading-small);
}

h6 {
  font-size: var(--h6-font-size);
  font-weight: var(--h6-font-weight);
  line-height: var(--line-height-heading-small);
}

/* -------- Body Text ---------- */
table p {
  margin-bottom: 0;
}

p {
  margin-bottom: 12px;
}
p a:not(.button):not(.btn):hover, p a:not(.button):not(.btn):focus {
  text-decoration: underline;
}

/* -------- other ---------- */
a {
  color: var(--link-color);
  text-decoration: none;
  font-weight: var(--body-font-weight);
  cursor: pointer;
  transition: all 0.3s ease;
}
a:hover, a:focus {
  color: inherit;
  text-decoration: none;
  outline: none;
}
a b, a strong {
  transition: all 0.3s ease;
}
a img {
  border: none;
}

pre,
ul,
ol,
dl,
dd,
blockquote,
address,
table,
fieldset {
  margin-bottom: 10px;
}

ol, ul {
  list-style-position: inside;
  margin: 0;
  padding: 0;
}

b, strong {
  color: #333;
  font-weight: var(--body-font-weight-bold);
}

iframe {
  border: none !important;
}

.reveal {
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  visibility: hidden;
  overflow: hidden;
}

.reveal img {
  -o-object-fit: cover;
  object-fit: cover;
  -webkit-transform-origin: left;
  transform-origin: left;
}

label {
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
}

.fade-in {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1.5s ease-out, transform 1.5s ease-out;
}

.boxs {
  opacity: 0;
  will-change: transform, opacity;
}

#smooth-wrapper {
  overflow: hidden;
}




/*------ register forms (ISOLATED) */


.register-page .auth-section {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f7fa;
  padding: 25px 50px;
}


.auth-section{
  width: 100%;
  height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f7fa;
}


.register-page .auth-container {
  width: 95%;

  display: flex;
  background: #fff;
  border-radius: 15px;
  overflow: visible;
}

/* LEFT */
.register-page .auth-left {
  width: 45%;
  background: #eaf0f6;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;

}

.register-page .auth-left img {
  width: 90%;
}

/* RIGHT */
.auth-right {
  width:100%;
  padding: 30px;
  overflow: visible; /* 🔥 FIX */
}


.register-page .auth-right h2 {
  margin: 20px 0;
  font-size: 18px;
  font-weight: 500;
}

/* BUTTON GROUP */
.register-page .btn-group {
  display: flex;
  gap: 10px;
}

.register-page .prev-btn {
  background: #ccc;
  color: #000;
}

/* STEPS */
.register-page .steps {
  display: flex;
  align-items: center;
  gap: 10px;
}

.register-page .step {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.2s;
}

.register-page .step.active {
  background: #ff7a00;
  color: #fff;
}

.register-page .step:hover {
  transform: scale(1.1);
}

.register-page .line {
  flex: 1;
  height: 3px;
  background: #ddd;
}

.register-page .line.active {
  background: #ff7a00;
}

/* FORM */
.register-page .form-step {
  display: none;
  flex-direction: column;
  gap: 10px;
}

.register-page .form-step.active {
  display: flex;
}

.register-page .input-row {
  display: flex;
  gap: 10px;
}

/* INPUT */
.register-page input {
  width: 100%;
  padding: 12px;
  border: none;
  background: #f1f1f1;
  border-radius: 5px;
}

/* BUTTONS */
.register-page button {
  padding: 12px;
  border: none;
  background: #0b2c5f;
  color: #fff;
  cursor: pointer;
  border-radius: 5px;
}

.register-page button:hover {
  opacity: 0.9;
}

/* RESPONSIVE */

@media (max-width: 768px) {
  .register-page .auth-container {
    flex-direction: column;
  }

  .register-page .auth-left {
    display:none;
  }

.auth-section{
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f7fa;

}

.register-page .auth-section {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f7fa;
  padding: 10px 5px;
}
  .register-page .auth-right {
    width: 100%;
  }

  .register-page .input-row {
    flex-direction: column;
  }
}

/* PHONE */
.register-page .phone-group {
  width: 100%;
}

.register-page .iti {
  width: 100%;
}

.register-page .iti input {
  width: 100%;
  padding: 12px;
  background: #f1f1f1;
  border-radius: 5px;
  border: none;
}

/* SELECT FIX 🔥🔥🔥 */
.register-page .input-box {
  width: 100%;
  margin-bottom: 15px;
}

.register-page .custom-select {
  width: 100%;
  padding: 12px 15px;

  border: none;
  outline: none;

  background: #f1f1f1;
  border-radius: 8px;

  font-size: 15px;
  color: #555;

  cursor: pointer;

  /* 🔥 VERY IMPORTANT */
  appearance: auto;
  -webkit-appearance: auto;
  -moz-appearance: auto;
}

/* REMOVE CUSTOM ARROW (LI TE KOZE BUG LA) */
.register-page .input-box::before,
.register-page .input-box::after {
  display: none !important;
}

/* CONDITION */
.register-page .condition a {
  color: var(--Orange_premery);
}

.register-page .condition label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #555;
  cursor: pointer;
}

.register-page .condition input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: #0b2c5f;
}

.register-page .condition label:hover {
  color: #0b2c5f;
}










/* ===========dasboard users =======*/


.dasboard{
    width: 100%;
    height: 100vh;
    display: flex;
    position: relative;
}

 .side_nav{
   position: sticky;
   top: 0px;
   left: 0;
   bottom: 0;
   width: 280px;
   background-color: var(--color_blu_premey);
   height: auto;
 box-shadow: 4px 0px 12px rgba(0, 0, 0, 0.2);
 padding: 50px 15px;

display: flex;
flex-direction: column;
margin-top: 0.5px;

}



.side_nav ul li{
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 10px;



}
.side_nav svg {
    width: 20px;
    height: 24px;
    color: var(--text-color-bg-theme-color1);
}
.side_nav ul li span{
    font-weight: 500;
    margin-left: 15px;
    font-size: 1rem;
    color: var(--text-color-bg-theme-color1);
}

.side_nav  li.active{

    padding: 10px;
    background-color: #294c80b5;
    border-radius: 10px;
}


.side_nav  li:hover{

    padding: 10px;
    background-color: #294c80b5;
    border-radius: 10px;
    transition: 0.5s ease;
}


.right_main{
    padding: 30px;
    background-color: var(--White_Title);
    width: 100%;
    overflow-y: auto;
}

.right_main h2{
    font-size: 22px;
    font-weight: 600;
    color: var(--black_secondery);
    margin-bottom: 8px;
}

.right_main p{
    margin-top: 0;
    font-size: 15px;
    color: var(--black_secondery);
    font-weight: 600;
    opacity: 90%;
}



.process_1{
    width: 100%;
    background-color: var(--theme-color-white);
    box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.08);
    padding: 8px;
    border-radius: 10px;

}


.process_container{
    display: flex;
    gap: 15px;
    padding: 20px 0px;
}


.process_container h4{
    font-size: 24px;
    padding-top:10px ;
    font-weight: 500;
}

.process_container h4 span{
    font-size: 18px;
    color: var(--black_secondery);
}

 .back_design{
    padding: 10px;

    border-radius: 10px;
}




.pending{
    display: flex;
    align-items: center;


}

.pending, svg span{
    color: var(--Orange_premery);
    font-weight: 600;

}

.pending span{
    margin-left: 10px;
}

.process_1:nth-child(1){
     background-color:#db9e692b ;

}


.process_1:nth-child(2){
     background-color:#708fc631 ;

}

.process_1:nth-child(2) .pending span{
    color: var(--blue_secondery);

}
.process_1:nth-child(2) .pending span{
    color: var(--blue_secondery);

}


.process_1:nth-child(3){
     background-color:#70c6bc31 ;

}

.process_1:nth-child(4){
   background: linear-gradient(
  to right,
  #db9e692b,
  #ffffff
);

}

.process_1:nth-child(3) svg{
    color:#035a219e ;

}


.process_1:nth-child(3) .pending span{
    color:#035a219e ;
}





.shippements_tab_left {
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    width: 50%;
    margin: 20px 0;
}

.shippements_tab_left h4 {
    margin-bottom: 15px;
}

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

thead {
    background: #f1f5f9;
}

th, td {
    text-align: left;
    padding: 12px;
    font-size: 14px;
}

tr {
    border-bottom: 1px solid #eee;
}

tr:hover {
    background: #f9fafb;
}



.status {
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

/* Pending */
.status.pending_status {
    background: #fef3c7;
    color: #b45309;
}

/* In Transit */
.status.transit {
    background: #dbeafe;
    color: #1d4ed8;
}

/* Delivered */
.status.delivered {
    background: #dcfce7;
    color: #15803d;
}



.shippements_tab_right {
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    width: 50%;
    height: auto;
    margin: 20px 10px;
}

.shippements_tab_right h4 {
    margin-bottom: 15px;
}

.shippements_tables{
    display: flex;
}



/*=========responsive phone dashboard ==========*/

@media (max-width: 1024px) {

    .dasboard{
    width: 100%;

    display: flex;


}

.right_main{
    padding: 10px;
}

.side_nav  li.active{

    padding: 10px;
    background-color:var(--Orange_premery);
    border-radius: 10px;
}

 .side_nav span{
    display: none;
 }
 .side_nav svg{
    width: 30px;

 }
 .side_nav{
position: fixed;

right: 0;
left: 0;
width: 100%;


background-color: var(--color_blu_premey);
bottom: 0px;
 bottom: 0 !important;
  top: auto !important;
z-index: 9999;

 padding: 20px 55px;
}
 .side_nav ul{
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;

 }

.shippements_tables{
    display: flex;
    flex-direction: column;
    overflow-x: scroll;
}


.shippements_tab_left , .shippements_tab_right{
    width: 100%;
    margin: 20px 0;
    overflow-x: scroll;

}
}


@media (max-width: 768px){
   .dasboard{
    width: 100%;

    display: flex;



}


.shippements_tab_left , .shippements_tab_right{
    width: 100%;
    margin: 10px 0;
    overflow-x: scroll;

}

 .side_nav span{
    display: none;
 }
 .side_nav svg{
    width: 20px;

 }
 .side_nav{
position: fixed;

right: 0;
left: 0;
width: 100%;


background-color: var(--color_blu_premey);
bottom: 0px;
 bottom: 0 !important;
  top: auto !important;
z-index: 9999;

 padding: 20px 15px;
}
 .side_nav ul{
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;

 }

 .process_container{
    display: grid;

    padding: 8px;
    border-radius: 10px;
    border: 1px solid #dbeafe;

}


}


.page {
  display: none;
  animation: fade 0.3s ease;
}

.page.active {
  display: block;
}

@keyframes fade {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}





/*========= address user part ===========*/




.adresses_user{
      padding: 30px;
    background-color: var(--White_Title);
    width: 100%;
    overflow-y: auto;
}

.adresses_user h2{
     font-size: 22px;
    font-weight: 600;
    color: var(--black_secondery);
    margin-bottom: 8px;

}

.adresses_user p{
        margin-top: 0;
    font-size: 15px;
    color: var(--black_secondery);
    font-weight: 600;
    opacity: 90%;
}




.trasports{
    width: 100%;
    background-color: var(--theme-color-white);
    padding: 30px;
    border-radius: 15px;
    box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.08);

}

.mode_title{
    display: flex;
    align-items: center;
    padding: 10px 0;
}
.mode_title svg{
    color: rgba(3, 21, 158, 0.602);
    width: 25px;
}

.mode_title span{
    font-weight: 600;
    font-size: 18px;
    margin-left: 10px;
     color: var(--blue_secondery);
     opacity: 80%;
}

.details_address{
     background: linear-gradient(
    to left,
    #f8fafc,
    #eef2ff,
    #e0e7ff
  );

  padding: 15px 20px;
  border-radius: 10px;

  border: 1px solid #dbeafe;

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
  position: relative;
}
.details_address h2{
    font-weight: 500;
    font-size: 18px;
    margin: 0;
}

.details_address p{
    font-weight: 500;
    font-size: 15px;
  margin-top: 8px;
  text-transform: capitalize;
  opacity: 80%;
}
.copy{
    position: absolute;
    right: 20px;
    bottom: 10px;
    cursor: pointer;
background-color:  #e0e7ff;
  padding: 5px 10px;
  border-radius: 50px;
  border: 1px solid #dbeafe;

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
}

.copy svg{
    color: rgba(3, 21, 158, 0.602);
    width: 18px;
}

.copy span{
   color: rgba(3, 21, 158, 0.602);
   text-transform: capitalize;
   margin: 0;
}


.adresses_items{
 display: flex;
 flex-direction: row;
 gap: 15px;

}

.additional_addresses{
    width: 600px;
    background-color: var(--theme-color-white);
    padding: 20px;
    border-radius: 15px;
}

.additional_addresses p{
    font-size: 14px;
    margin: 0;
    line-height: 1.3;
    font-weight: 400;

}





.additional_addresses p{
    font-size: 14px;
    margin: 0 0 15px 0;
    line-height: 1.4;
    color: #64748b;
}

/* TITLE (CLICKABLE) */
.add_address_name{
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 15px;
    margin-bottom: 10px;

    border-radius: 12px;
    cursor: pointer;

    background: linear-gradient(to right, #ffffff, #eef2ff);
    border: 1px solid #dbeafe;

    transition: 0.3s;
}

.add_address_name:hover{
    background: #eef2ff;
}

.add_address_name span{
    font-weight: 600;
    color: #1e293b;
}

/* CONTENT (HIDDEN) */
.add_address_content{
    max-height: 0;
    overflow: hidden;
    transition: 0.3s ease;

    padding: 0 15px;
}

.add_address_content p{
    margin: 5px 0;
    color: #475569;
}

/* ACTIVE */
.add_address_name.active + .add_address_content{
    max-height: 100px;
    padding: 10px 15px;
}

/* ICON ROTATION */
.add_address_name.active i{
    transform: rotate(45deg);
    transition: 0.3s;
}




/*==========responsive address=======*/



@media (max-width: 768px){
    .adresses_items{
 display: flex;
 flex-direction: column;

 gap: 15px;

}

.additional_addresses{
    width: 100%;
    background-color: var(--theme-color-white);
    padding: 10px;
    border-radius: 10px;
}


.adresses_user{
    padding: 15px;
}

.copy span{
    display: none;
}


}



@media (max-width: 1024px){
    .copy span{

     font-size: 10px;
     padding: 5px 8px;
}

}



/* ===========dasboard users =======*/


.dasboard{
    width: 100%;
    height: 100vh;
    display: flex;
    position: relative;
}

 .side_nav{
   position: sticky;
   top: 0px;
   left: 0;
   bottom: 0;
   width: 280px;
   background-color: var(--color_blu_premey);
   height: auto;
 box-shadow: 4px 0px 12px rgba(0, 0, 0, 0.2);
 padding: 50px 15px;

display: flex;
flex-direction: column;
margin-top: 0.5px;

}



.side_nav ul li{
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 10px;



}
.side_nav svg {
    width: 20px;
    height: 24px;
    color: var(--text-color-bg-theme-color1);
}
.side_nav ul li span{
    font-weight: 500;
    margin-left: 15px;
    font-size: 1rem;
    color: var(--text-color-bg-theme-color1);
}

.side_nav  li.active{

    padding: 10px;
    background-color: #294c80b5;
    border-radius: 10px;
}


.side_nav  li:hover{

    padding: 10px;
    background-color: #294c80b5;
    border-radius: 10px;
    transition: 0.5s ease;
}


.right_main{
    padding: 30px;
    background-color: var(--White_Title);
    width: 100%;
    overflow-y: auto;
}

.right_main h2{
    font-size: 22px;
    font-weight: 600;
    color: var(--black_secondery);
    margin-bottom: 8px;
}

.right_main p{
    margin-top: 0;
    font-size: 15px;
    color: var(--black_secondery);
    font-weight: 600;
    opacity: 90%;
}



.process_1{
    width: 100%;
    background-color: var(--theme-color-white);
    box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.08);
    padding: 8px;
    border-radius: 10px;

}


.process_container{
    display: flex;
    gap: 15px;
    padding: 20px 0px;
}


.process_container h4{
    font-size: 24px;
    padding-top:10px ;
    font-weight: 500;
}

.process_container h4 span{
    font-size: 18px;
    color: var(--black_secondery);
}

 .back_design{
    padding: 10px;

    border-radius: 10px;
}




.pending{
    display: flex;
    align-items: center;


}

.pending, svg span{
    color: var(--Orange_premery);
    font-weight: 600;

}

.pending span{
    margin-left: 10px;
}

.process_1:nth-child(1){
     background-color:#db9e692b ;

}


.process_1:nth-child(2){
     background-color:#708fc631 ;

}

.process_1:nth-child(2) .pending span{
    color: var(--blue_secondery);

}
.process_1:nth-child(2) .pending span{
    color: var(--blue_secondery);

}


.process_1:nth-child(3){
     background-color:#70c6bc31 ;

}

.process_1:nth-child(4){
   background: linear-gradient(
  to right,
  #db9e692b,
  #ffffff
);

}

.process_1:nth-child(3) svg{
    color:#035a219e ;

}


.process_1:nth-child(3) .pending span{
    color:#035a219e ;
}





.shippements_tab_left {
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    width: 50%;
    margin: 20px 0;
}

.shippements_tab_left h4 {
    margin-bottom: 15px;
}

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

thead {
    background: #f1f5f9;
}

th, td {
    text-align: left;
    padding: 12px;
    font-size: 14px;
}

tr {
    border-bottom: 1px solid #eee;
}

tr:hover {
    background: #f9fafb;
}



.status {
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

/* Pending */
.status.pending_status {
    background: #fef3c7;
    color: #b45309;
}

/* In Transit */
.status.transit {
    background: #dbeafe;
    color: #1d4ed8;
}

/* Delivered */
.status.delivered {
    background: #dcfce7;
    color: #15803d;
}



.shippements_tab_right {
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    width: 50%;
    height: auto;
    margin: 20px 10px;
}

.shippements_tab_right h4 {
    margin-bottom: 15px;
}

.shippements_tables{
    display: flex;
}



/*=========responsive phone dashboard ==========*/

@media (max-width: 1024px) {

    .dasboard{
    width: 100%;

    display: flex;


}


.right_main{
    padding: 10px;
}

.side_nav  li.active{

    padding: 10px;
    background-color:var(--Orange_premery);
    border-radius: 10px;
}

 .side_nav span{
    display: none;
 }
 .side_nav svg{
    width: 30px;

 }
 .side_nav{
position: fixed;

right: 0;
left: 0;
width: 100%;

background-color: var(--color_blu_premey);
bottom: 0px;
 bottom: 0 !important;
  top: auto !important;
z-index: 9999;

 padding: 20px 55px;

}



.side_nav{
  z-index: 1 !important;

  background-color: var(--color_blu_premey) !important;

  opacity: 1 !important;

  backdrop-filter: none !important; /* 🔥 sa ka koz transparans */
  -webkit-backdrop-filter: none !important;

  background-image: none !important; /* si gen gradient */
}
.mobile-menu {
  position: fixed;
  z-index: 99999 !important;


}


footer *{
    position: relative !important;
    z-index: 0 !important;
}











 .side_nav ul{
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;

 }

.shippements_tables{
    display: flex;
    flex-direction: column;
    overflow-x: scroll;
}


.shippements_tab_left , .shippements_tab_right{
    width: 100%;
    margin: 20px 0;
    overflow-x: scroll;

}
}


@media (max-width: 768px){
   .dasboard{
    width: 100%;

    display: flex;



}


.shippements_tab_left , .shippements_tab_right{
    width: 100%;
    margin: 10px 0;
    overflow-x: scroll;

}

 .side_nav span{
    display: none;
 }
 .side_nav svg{
    width: 20px;

 }
 .side_nav{
position: fixed;

right: 0;
left: 0;
width: 100%;


background-color: var(--color_blu_premey);
bottom: 0px;
 bottom: 0 !important;
  top: auto !important;
z-index: 9999;

 padding: 20px 15px;
}
 .side_nav ul{
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;

 }

 .process_container{
    display: grid;

    padding: 8px;
    border-radius: 10px;
    border: 1px solid #dbeafe;

}


}


.page {
  display: none;
  animation: fade 0.3s ease;
}

.page.active {
  display: block;
}

@keyframes fade {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}





/*========= address user part ===========*/




.adresses_user{
      padding: 30px;
    background-color: var(--White_Title);
    width: 100%;
    overflow-y: auto;
}

.adresses_user h2{
     font-size: 22px;
    font-weight: 600;
    color: var(--black_secondery);
    margin-bottom: 8px;

}

.adresses_user p{
        margin-top: 0;
    font-size: 15px;
    color: var(--black_secondery);
    font-weight: 600;
    opacity: 90%;
}




.trasports{
    width: 100%;
    background-color: var(--theme-color-white);
    padding: 30px;
    border-radius: 15px;
    box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.08);

}

.mode_title{
    display: flex;
    align-items: center;
    padding: 10px 0;
}
.mode_title svg{
    color: rgba(3, 21, 158, 0.602);
    width: 25px;
}

.mode_title span{
    font-weight: 600;
    font-size: 18px;
    margin-left: 10px;
     color: var(--blue_secondery);
     opacity: 80%;
}

.details_address{
     background: linear-gradient(
    to left,
    #f8fafc,
    #eef2ff,
    #e0e7ff
  );

  padding: 15px 20px;
  border-radius: 10px;

  border: 1px solid #dbeafe;

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
  position: relative;
}
.details_address h2{
    font-weight: 500;
    font-size: 18px;
    margin: 0;
}

.details_address p{
    font-weight: 500;
    font-size: 15px;
  margin-top: 8px;
  text-transform: capitalize;
  opacity: 80%;
}
.copy{
    position: absolute;
    right: 20px;
    bottom: 10px;
    cursor: pointer;
background-color:  #e0e7ff;
  padding: 5px 10px;
  border-radius: 50px;
  border: 1px solid #dbeafe;

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
}

.copy svg{
    color: rgba(3, 21, 158, 0.602);
    width: 18px;
}

.copy span{
   color: rgba(3, 21, 158, 0.602);
   text-transform: capitalize;
   margin: 0;
}


.adresses_items{
 display: flex;
 flex-direction: row;
 gap: 15px;

}

.additional_addresses{
    width: 600px;
    background-color: var(--theme-color-white);
    padding: 20px;
    border-radius: 15px;
}

.additional_addresses p{
    font-size: 14px;
    margin: 0;
    line-height: 1.3;
    font-weight: 400;

}





.additional_addresses p{
    font-size: 14px;
    margin: 0 0 15px 0;
    line-height: 1.4;
    color: #64748b;
}

/* TITLE (CLICKABLE) */
.add_address_name{
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 15px;
    margin-bottom: 10px;

    border-radius: 12px;
    cursor: pointer;

    background: linear-gradient(to right, #ffffff, #eef2ff);
    border: 1px solid #dbeafe;

    transition: 0.3s;
}

.add_address_name:hover{
    background: #eef2ff;
}

.add_address_name span{
    font-weight: 600;
    color: #1e293b;
}

/* CONTENT (HIDDEN) */
.add_address_content{
    max-height: 0;
    overflow: hidden;
    transition: 0.3s ease;

    padding: 0 15px;
}

.add_address_content p{
    margin: 5px 0;
    color: #475569;
}

/* ACTIVE */
.add_address_name.active + .add_address_content{
    max-height: 100px;
    padding: 10px 15px;
}

/* ICON ROTATION */
.add_address_name.active i{
    transform: rotate(45deg);
    transition: 0.3s;
}




/*==========responsive address=======*/



@media (max-width: 768px){
    .adresses_items{
 display: flex;
 flex-direction: column;

 gap: 15px;

}

.additional_addresses{
    width: 100%;
    background-color: var(--theme-color-white);
    padding: 10px;
    border-radius: 10px;
}


.adresses_user{
    padding: 15px;
}

.copy span{
    display: none;
}


}



@media (max-width: 1024px){
    .copy span{

     font-size: 10px;
     padding: 5px 8px;
}

}


/*========== setting Dashboard=======*/




.setting_dash h3{
    font-weight: 500;
    font-size: 24px;
}
.setting_dash{
    padding: 30px;
    width: 100%;

    background-color: var(--White_Title);
    height: auto;
    overflow-y: scroll;
}
.profiles{
       width: 100%;
    background-color: var(--theme-color-white);
    padding: 15px 20px;
    border-radius: 10px;
     align-items: center;
}
.profile_informations{
    width: 100%;
    background-color: var(--theme-color-white);
    padding: 15px 30px;
    border-radius: 10px;
     border: 1px solid #dbeafe;
     display: flex;
     position: relative;
     align-items: center;


}

.names_initials{
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: #dbeafe;
    border: 1px solid #ccd7e4;

    display: flex;
    align-items: center;     /* vètikal */
    justify-content: center; /* horizontal */
    margin-right: 20px;
}


.names_initials h4{

    margin: 0;
    opacity: 90%;
    display: inline-block;
    padding: 0;
}

.profile_informations{
    display: flex;
    align-items: center;


    border-radius: 10px;
    padding: 15px;

}



.profile_names p svg{
    width: 20px;
  color: #15803d;
    opacity: 90%;
}
.profile_names span{
     color: #15803d;
    opacity: 90%;
    margin-left: 2px;
    font-weight: 600;

}

.adress_profiles p{
    color: var(--color_blu_premey);
    font-weight: 600;
   margin: 0;
   opacity: 90%;

}

.profile_names h5{
  font-size: 22px;
  margin-bottom: 0;
  opacity: 90%;
  display: inline-block;
  padding-bottom: 5px;
}

.edite{
    right: 30px;
    top: 30px;
    position: absolute;
}

.suits{
    width: 100%;
    background-color: var(--text-color-bg-theme-color1);

   border: 0.05px solid #ccd7e4;
   border-radius:10px ;
}

.suits p{
    display: inline-block;
    margin: 0;

    background: linear-gradient(to left, #ffffff, #eef2ff);
    width: 100%;
    padding: 10px 15px;
    border-radius: 10px 10px 0 0;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--color_blu_premey);
    font-weight: 600;
    opacity: 905;
}

.suits h4{
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
    padding: 10px 15px;
    gap: 10px;
    opacity: 80%;
}

.suit_mail{
    display: flex;
    gap: 15px;
    padding-top: 15px;
}


.update_left {
    width: 100%;
    background-color: var(--theme-color-white);
    padding: 20px 30px;
    border-radius: 10px;
   border: 0.5px solid #ccd7e4;
}
.update_left h4{
    font-weight:500;
    font-size: 18px;
    display: inline-block;
    padding: 20px 30px;
    text-transform: capitalize;
border-bottom: 1px solid #ccd7e4;
    width: 100%;

    background: linear-gradient(to left, #ffffff, #f6f7fb);
}

.update_left input{
    width: 100%;
    border: 1px solid #ccd7e4;
    background-color: var(--theme-color-white);
    display: flex;
    padding: 8px 5px;
}
.update_left label{
    font-size: 16px;
    color: var(--color_blu_premey);
    font-weight: 500;
    text-transform: capitalize;
    opacity: 80%;
    display: inline-block;
    padding: 10px 0;
}

.update_profile{
    display: flex;
    gap: 15px;
    padding: 20px 0;
}

.update_left button{
    width: 100%;
    display: inline-block;
    padding: 10px 0;
    color: var(--White_Title);
    font-weight: 600;
    text-transform: capitalize;
    margin-top: 15px;
background-color: var(--Orange_premery);
}


/*===========setting responsive ==========*/



@media (max-width: 1024px){

    .setting_dash h3{
    font-weight: 500;
    font-size: 20px;
}

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


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

.setting_dash{
    padding: 15px;
    width: 100%;

    background-color: var(--White_Title);
    height: auto;
    overflow-y: scroll;
}

.names_initials{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #dbeafe;
    border: 1px solid #ccd7e4;

    display: flex;
    align-items: center;     /* vètikal */
    justify-content: center; /* horizontal */
    margin-right: 20px;
}


.suit_mail{
    display: flex;
    gap: 15px;
    padding-top: 15px;
    flex-wrap: wrap;
}


.update_profile{
    display: flex;
    gap: 15px;
    padding: 20px 0;
    flex-wrap: wrap;
}


.edite svg{
    width: 15px;
    color: var(--Orange_premery);
}
.edite span{
    text-transform: capitalize;
    color: var(--Orange_premery);
}
.edite{
    position: absolute;
    top: 10px;
    right: 10px;


}


}




#message{
    margin-top: 10px;
    font-weight: bold;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 15px 10px ;
    background: linear-gradient(to left, #ffffff, #f6f7fb);


}





/*=======login style =====*/



  /* container right side */
.auth-right {
    width: 100%;
    max-width: 500px;
    margin: auto;
}

/* form */
#multiForm {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* title */
.form-step h2 {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 10px;
}

/* input style */
#multiForm input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    transition: 0.2s ease;
}

/* focus */
#multiForm input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}

/* input row */
.input-row {
    display: flex;
    gap: 10px;
}

/* button */
.submit-btn {
    width: 100%;
    padding: 12px;
    border: none;
    background: #DE8333;
    color: white;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.2s ease;
}

.submit-btn:hover {
    background: #DE8333;
}

/* checkbox */
.condition {
    font-size: 13px;
    color: #555;
}

.condition a {
    color: #2563eb;
    text-decoration: none;
}

/* error style (improved) */
.error-message {
    color: #dc2626;
    font-size: 12px;
    margin-top: 3px;
    display: none;
}

.error-message.active {
    display: block;
}

/* input error */
.input-error {
    border: 1.5px solid #dc2626 !important;
    background-color: #fef2f2;
}


.login_h2{

font-size:600;
}


/* responsive */
@media (max-width: 768px) {
    .auth-container {
        flex-direction: column;
    }

    .auth-left {
        display: none;
    }
}

    .error-message {
    color: #dc2626; /* red-600 */
    font-size: 14px;
    margin-top: 6px;
    display: none;
    font-weight: 600;

}

.error-message.active {
    display: block;
}

.input-error {
    border: 1.5px solid #dc2626 !important;
    background-color: #fef2f2; /* light red background */
}

/* optional: smooth effect */
input, select {
    transition: all 0.2s ease;
}


  /* input box */
.input-box {
    position: relative;
    width: 100%;
}

/* password eye icon */
.password-box {
    position: relative;
}

.toggle-password {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 16px;
}

/* remember me */
.remember-me {
    font-size: 13px;
    color: #555;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* checkbox style */
.remember-me input {
    cursor: pointer;
}

/* spacing */
.form-step {
    display: flex;
    flex-direction: column;
    gap: 15px;
}





.user_log_prof {
    display: flex;
    align-items: center
;

margin: auto 15px;
padding: 10px 0;

}



.user_log_prof span{
    color: var(--White_Title);
    font-weight: 500;
    margin: 0px 18px 0px 8px;
}

.user_log_prof a{
    color: var(--White_Title);
    font-weight: 500;

}

.user_log_prof svg{
    color: var(--White_Title);
}

.log_out_btn{
    cursor: pointer;
}

.profil_log_out{
    cursor: pointer;
}





/* OVERLAY (background sonb ki kouvri tout ekran an) */
.logout_overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* sonb, transparan */
    display: none;
    align-items: center;    /* vètikalman nan mitan */
    justify-content: center; /* orizontalman nan mitan */
    z-index: 9999; /* pou l parèt sou tout lòt bagay */

}
.mobile-menu *{
    pointer-events: auto;
}
.profil_log_out{
    position: relative;
    z-index: 10000; /* pi wo pase menu */
    cursor: pointer;
}

/* POPUP la (kad blan an) */
.logout_pop {
    background: white;
    padding: 30px 40px;
    border-radius: 12px;
    text-align: center;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    animation: fadeIn 0.3s ease; /* ti efè rantre */
}

.logout_pop h4 {
    margin: 0 0 10px 0;
    font-size: 20px;
    color: var(--black_secondery);
    text-transform: capitalize;
}

.logout_pop p {
    margin: 0 0 20px 0;
    font-size: 14px;
    color: #6b7280;
    line-height: 1.5;
    font-weight: 500;
}

/* bouton Confirm ak Cancel */
.btn_confirm {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.btn_confirm input[type="submit"] {
    background: var(--Orange_premery); /* wouj pou confirm */
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    transition: background 0.3s;
    width: 100%;
    border-radius: 10px;
}

.btn_confirm input[type="submit"]:hover {
    background: var(--Orange_premery);
}

.btn_confirm a {
    display: flex;
    width: 100%;
    border: 2px solid var(--Orange_premery);
   align-items: center;
   justify-content: center;
   border-radius: 10px;
   color: var(--Orange_premery);


}

.btn_confirm a:hover {
    background: rgba(255, 166, 0, 0.163);
}

/* Ti animasyon */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}





/*==========  track page =========*/




/*====== tracking pages======*/


.hearder_tracking p{
  font-size: 75px;
  line-height: 1;
  font-weight: 600;
  text-transform: capitalize;
  color: #101820;
}

.hearder_tracking h4{
  font-size: 20px;
  font-weight: 500;
  display: flex;
  padding: 8px 0;
  color: #101820;
}
.hearder_tracking{
  width: 100%;
  display: flex;
  padding: 50px 100px;
  height: 100%;
}


.right_trk{
    width: 50%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;

    position: relative;
}



.image{
  padding-top: 100px;
}




.hearder_tracking span{
  color: var(--Orange_premery);
  font-weight: 500;
  display: flex;
  padding: 10px 0;
}

.left_trk{
  padding: 100px 0;
}

.right_trk{
  height: 100%;
  object-fit: contain;
}

.right_trk img{
  width: 100%;
  height: 100%;
}

.left_trk , .right_trk{
  width: 100%;
  height: 100%;
}




.input_container{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    border-radius: 10px;

}

.input_container i{
    font-size: 24px;
    color: var(--Orange_premery);
}
.input_container input{
    width: 100%;
    display: flex;
    width: 100%;
    text-transform: capitalize;
    padding: 10px 15px;
    color: var(--black_secondery);
    opacity: 70%;
    font-weight: 500;
    background: none;
}

.searcher_container button{
    width: 200px;
    background: linear-gradient(135deg, #DE8333, #F5A623);
    text-transform: capitalize;
    font-weight: 600;
    color: var(--theme-color-white);
     height: 100%;
     padding:10px 0;
     border-radius:10px
}
.searcher_container{
   display: flex;
   width: 100%;
   border: 1px solid #dbeafe;
   flex-wrap: nowrap;
   padding: 4px 5px;
   background: linear-gradient(to bottom, #ffffff, #F2F2F2);
   border-radius: 10px;

}








.hearder_tracking{
    width: 100%;
    height: 100vh;
    display: flex;
    padding: 50px 80px;
    position: relative;
    overflow: hidden;
    z-index: 1;

    /* soft clean background */
    background: linear-gradient(
        120deg,
        #f7f4f1 0%,
        #f4efea 45%,
        #f7f4f1 100%
    );
}


/* BIG SOFT GLOW RIGHT */
.hearder_tracking::before{
    content: "";
    position: absolute;

    width: 900px;
    height: 900px;

    right: -350px;
    top: -200px;

    border-radius: 50%;

    background:
    radial-gradient(
        circle,
        rgba(222,131,51,0.18) 0%,
        rgba(222,131,51,0.10) 25%,
        rgba(222,131,51,0.04) 45%,
        transparent 70%
    );

    filter: blur(90px);

    animation: softFloat 8s ease-in-out infinite;
}


/* SECOND LIGHT GLOW */
.hearder_tracking::after{
    content: "";
    position: absolute;

    width: 700px;
    height: 700px;

    left: -250px;
    bottom: -250px;

    border-radius: 50%;

    background:
    radial-gradient(
        circle,
        rgba(222,131,51,0.10) 0%,
        rgba(222,131,51,0.05) 30%,
        transparent 70%
    );

    filter: blur(100px);

    animation: softFloatTwo 10s ease-in-out infinite;
}


/* SOFT ANIMATION */
@keyframes softFloat{

    0%{
        transform: translateY(0px) translateX(0px);
        opacity: .5;
    }

    50%{
        transform: translateY(25px) translateX(-20px);
        opacity: .9;
    }

    100%{
        transform: translateY(0px) translateX(0px);
        opacity: .5;
    }
}


@keyframes softFloatTwo{

    0%{
        transform: scale(1);
        opacity: .3;
    }

    50%{
        transform: scale(1.08);
        opacity: .6;
    }

    100%{
        transform: scale(1);
        opacity: .3;
    }
}




/* FIX INPUT CLICK */
.hearder_tracking::before,
.hearder_tracking::after{
    pointer-events: none;
}


.left_trk{
    position: relative;
    z-index: 5;
}

.searcher_container{
    position: relative;
    z-index: 10;
}




/*====== customer -contact */


.constomer_section {
  width: 100%;
  padding: 100px;
  height: 100%;
  align-items: center;
  display: flex;
  justify-content: center;
}

.constomer_card {
  width: 70%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background-color: var(--White_Title);
  padding: 20px 0;
  border-radius: 20px;

  box-shadow:
    0 10px 25px rgba(0,0,0,0.05),
    0 20px 60px rgba(222,131,51,0.10);
    position: relative;
}

.constomer_card .image{
  width: 300px;
  position: absolute;
right: 0;
}

.constomer_card p{
  font-size: 24px;
  text-transform: capitalize;
  font-weight: 700;
  color: var(--theme-color-black);
}

.constomer_card p span{
  color: var(--Orange_premery);
}

.constomer_card button{
  background: none;
  font-size: 16px;
  color: var(--Orange_premery);
  font-weight: 600;
  border: 1px solid var(--Orange_premery);
  margin-top: 10px;
  padding:10px 15px;

}

.constomer_card button:hover{
  transition: all 0.5s ease;

  background-color:var(--Orange_premery) ;
  color: var(--White_Title);

}



/*======faq ==== section ====*/

.faq_section{
    width: 100%;
    padding: 80px;
    display: flex;
    justify-content: space-between;
    gap: 80px;
}


/* LEFT */
.faq_left{
    width: 45%;
}

.faq_left span{
    font-size: 60px;
    font-weight: 600;
    line-height: 90px;
    color: #0D1320;
}

.faq_left p{
    font-size: 24px;
    margin-top: 10px;
    color: #333;
}


.faq_image{
    width: 100%;
    margin-top: 40px;
    position: relative;

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

.faq_image img{
    width: 100%;
    max-width: 650px;
    object-fit: contain;
}

.small_circle{
    position: absolute;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: white;

    top: 80px;
    right: 40px;

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



/* RIGHT */
.faq_right{
    width: 50%;
}


.faq_item{
    width: 100%;
    border-bottom: 1px solid #ddd;
    padding: 30px 0;
}


.faq_question{
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    gap: 10px;
}

.faq_question h3{
    font-size: 24px;
    line-height: 30px;
    color: #0D1320;
    font-weight: 400;
}


.faq_question i{
    font-size: 24px;
    color: #DE8333;
    transition: .3s;
}


/* ANSWER */
.faq_answer{
    max-height: 0;
    overflow: hidden;
    transition: .4s ease;
}

.faq_answer p{
    padding-top: 25px;
    font-size: 22px;
    line-height: 40px;
    color: #555;
}



/* ACTIVE */
.faq_item.active .faq_answer{
    max-height: 500px;
}

.faq_item.active .faq_question i{
    transform: rotate(45deg);
}


/*==== tracking sections======*/




.tracking_section{
    width: 100%;
    background: #fff;
    border-radius: 30px;
    padding: 50px 100px;
    box-shadow: 0 10px 40px rgba(0,0,0,.05);
}


/* TOP */
.tracking_top{
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 60px;
}

.tracking_number span{
    color: #777;
    font-size: 18px;
}

.tracking_number h2{
    margin-top: 10px;
    font-size: 24px;
    color: #111827;
}


.delivery_status{
    display: flex;
    align-items: center;
    gap: 10px;

    background: #f3fbf5;
    padding: 15px;
    border-radius: 20px;
    max-width: 600px;
}

.delivery_status i{
    font-size: 30px;
    color: #22c55e;
}

.delivery_status h3{
    color: #16a34a;
    font-size: 24px;
}

.delivery_status p{
    margin-top: 10px;
    color: #555;
    line-height: 32px;
    font-size: 20px;
}


/* TIMELINE */
.timeline_container{
    position: relative;
}

.timeline_container::before{
    content: "";
    position: absolute;
    left: 15px;
    top: 0;
    width: 2px;
    height: 100%;
    background: #e5e7eb;
}

.timeline_item{
    display: flex;
    gap: 10px;
    margin-bottom: 40px;
    position: relative;
}

.timeline_left{
    display: flex;
    gap: 20px;
    min-width: 250px;
}

.check_box{
    width: 30px;
    height: 30px;
    border-radius: 14px;
    background: #22c55e;

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

    position: relative;
    z-index: 2;
}

.check_box i{
    color: white;
    font-size: 28px;
}

.timeline_date h4{
    font-size: 24px;
    color: #111827;
}

.timeline_date span{
    color: #777;
    font-size: 16px;
}


.timeline_content{
    flex: 1;
    background: #fafafa;
    padding: 30px;
    border-radius: 24px;
}

.timeline_content h3{
    font-size: 24px;
    color: #111827;
}

.location{
    display: flex;
    align-items: center;
    gap: 8px;

    margin-top: 15px;
    color: #DE8333;
    font-size: 18px;
}

.timeline_content p{
    margin-top: 10px;

    color: #555;
    font-size: 18px;
}

.timeline_content a{
    display: inline-block;
    margin-top: 10px;
    color: #DE8333;
    font-weight: 600;
    text-decoration: none;
    font-size: 18px;
}

.delivered_box{
    background: #f2fbf5;
}

.timeline_date h4{
  font-size: 18px;
}


/* FOOTER */
.tracking_footer{
    width: 100%;
    margin-top: 20px;

    background: #f8f8f8;
    border-radius: 20px;

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

    padding: 20px 25px;
}

.footer_item{
    display: flex;
    align-items: center;
    gap: 12px;

    color: #555;
    font-size: 18px;
}

.footer_item strong{
    color: #DE8333;
}

.footer_item i{
    font-size: 18px;
}



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

    .tracking_section{
        padding: 25px;
    }

    .tracking_top{
        flex-direction: column;
    }

    .tracking_number h2{
        font-size: 28px;
        word-break: break-all;
    }

    .delivery_status{
        width: 100%;
    }

    .delivery_status h3{
        font-size: 24px;
    }

    .delivery_status p{
        font-size: 16px;
        line-height: 28px;
    }

    .timeline_item{
        flex-direction: column;
        gap: 20px;
        padding-left: 10px;
    }

    .timeline_left{
        min-width: 100%;
    }

    .timeline_container::before{
        left: 24px;
    }

    .timeline_content{
        margin-left: 75px;
    }

    .timeline_content h3{
        font-size: 24px;
    }

    .timeline_content p{
        font-size: 17px;
        line-height: 30px;
    }

    .location{
        font-size: 16px;
    }

    .tracking_footer{
        flex-direction: column;
        gap: 20px;
        align-items: flex-start;
    }

    .footer_item{
        font-size: 16px;
    }
}






/*======media header tracking ======*/



@media (max-width: 480px){

.hearder_tracking p{
  font-size: 30px;
}

.hearder_tracking h4{
  font-size: 18px;
  font-weight: 500;
  display: flex;
  padding: 8px 0;
  color: #101820;
}
.hearder_tracking{
  width: 100%;
  display: flex;
  padding: 20px 15px;
  height: 100%;
  flex-direction: column;
}






.hearder_tracking span{
  color: var(--Orange_premery);
  font-weight: 500;
  display: flex;
  padding: 10px 0;
}

.left_trk{
  padding: 30px 0px 5px 0px;
}

.right_trk{
  height: 100%;
  object-fit: contain;
}


.left_trk , .right_trk{
  width: 100%;
  height: 100%;
}


.right_trk{
  height: 100%;
  object-fit: contain;
}

.right_trk img{
  width: 100%;

}





.input_container{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    border-radius: 10px;


}

.input_container i{
    font-size: 24px;
    color: var(--Orange_premery);
}
.input_container input{
    width: 100%;
    display: flex;
    width: 100%;
    text-transform: capitalize;
    padding: 10px 15px;
    color: var(--black_secondery);
    opacity: 70%;
    font-weight: 500;
    background: none;
}

.searcher_container button{
    width: 100%;
    background: linear-gradient(135deg, #DE8333, #F5A623);
    text-transform: capitalize;
    font-weight: 600;
    color: var(--theme-color-white);
     height: 100%;
}
.searcher_container{
   display: flex;
   width: 100%;
   border: 1px solid #dbeafe;
   flex-wrap: nowrap;
   padding: 4px 5px;
   background: linear-gradient(to bottom, #ffffff, #F2F2F2);
   border-radius: 10px;
   flex-direction: column;
   gap: 10px;

}





.constomer_section {
  width: 100%;
  padding: 10px;
  height: 100%;
  align-items: center;
  display: flex;
  justify-content: center;
}

.constomer_card {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background-color: var(--White_Title);
  padding: 20px 0;
  border-radius: 20px;

  box-shadow:
    0 10px 25px rgba(0,0,0,0.05),
    0 20px 60px rgba(222,131,51,0.10);
    position: relative;
}


.constomer_card{
  align-items: center;
  }
.constomer_card .image{
  width: 100px;
  position: absolute;
right: 0;
}

.constomer_card p{
  font-size: 24px;
  text-transform: capitalize;
  font-weight: 700;
  color: var(--theme-color-black);
  text-align:center
}

.constomer_card p span{
  color: var(--Orange_premery);
}

.constomer_card button{
  background: none;
  font-size: 16px;
  color: var(--Orange_premery);
  font-weight: 600;
  border: 1px solid var(--Orange_premery);
  margin-top: 10px;
  padding:8px 10px
}

.constomer_card button:hover{
  transition: all 0.5s ease;

  background-color:var(--Orange_premery) ;
  color: var(--White_Title);

}




}




/* =========================
   LARGE LAPTOP
========================= */
@media (max-width: 1400px){

    .faq_section{
        padding: 60px;
        gap: 60px;
    }

    .faq_left span{
        font-size: 55px;
        line-height: 70px;
    }

}



/* =========================
   LAPTOP
========================= */
@media (max-width: 1200px){

    .faq_section{
        gap: 40px;
    }

    .faq_left{
        width: 42%;
    }

    .faq_right{
        width: 58%;
    }

    .faq_left span{
        font-size: 48px;
        line-height: 60px;
    }

    .faq_left p{
        font-size: 20px;
    }

    .faq_question h3{
        font-size: 22px;
    }

    .faq_answer p{
        font-size: 18px;
        line-height: 34px;
    }

}



/* =========================
   TABLET
========================= */
@media (max-width: 991px){

    .faq_section{
        flex-direction: column;
        padding: 50px 30px;
        gap: 50px;
    }

    .faq_left,
    .faq_right{
        width: 100%;
    }

    .faq_left{
        text-align: center;
    }

    .faq_left span{
        font-size: 42px;
        line-height: 55px;
    }

    .faq_left p{
        font-size: 18px;
    }

    .faq_image{
        margin-top: 30px;
    }

    .faq_image img{
        max-width: 500px;
    }

    .small_circle{
        width: 55px;
        height: 55px;
        top: 50px;
        right: 80px;
    }

    .faq_item{
        padding: 25px 0;
    }

    .faq_question h3{
        font-size: 20px;
        line-height: 30px;
    }

    .faq_answer p{
        font-size: 17px;
        line-height: 32px;
    }

}



/* =========================
   MOBILE
========================= */
@media (max-width: 768px){

    .faq_section{
        padding: 40px 20px;
        gap: 40px;
    }

    .faq_left span{
        font-size: 36px;
        line-height: 45px;
    }

    .faq_left p{
        font-size: 16px;
    }

    .faq_image img{
        max-width: 100%;
    }

    .small_circle{
        width: 45px;
        height: 45px;

        top: 40px;
        right: 20px;
    }

    .faq_question{
        align-items: flex-start;
    }

    .faq_question h3{
        font-size: 18px;
        line-height: 28px;
    }

    .faq_question i{
        font-size: 22px;
        min-width: 22px;
    }

    .faq_answer p{
        padding-top: 18px;
        font-size: 15px;
        line-height: 28px;
    }

}



/* =========================
   SMALL MOBILE
========================= */
@media (max-width: 480px){

    .faq_section{
        padding: 30px 15px;
    }

    .faq_left span{
        font-size: 30px;
        line-height: 38px;
    }

    .faq_left p{
        font-size: 15px;
    }

    .faq_item{
        padding: 20px 0;
    }

    .faq_question{
        gap: 8px;
    }

    .faq_question h3{
        font-size: 16px;
        line-height: 25px;
    }

    .faq_question i{
        font-size: 20px;
    }

    .faq_answer p{
        font-size: 14px;
        line-height: 24px;
    }

    .small_circle{
        width: 35px;
        height: 35px;

        top: 25px;
        right: 10px;
    }

}


.check_box{

    border-radius: 14px;

    background: white;

    border: 2px solid #d1d5db;

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

    transition: .3s ease;
}

.check_box i{
    color: white;
    font-size: 24px;
}

.check_box.active{
    background: #22c55e;
    border-color: #22c55e;
}








	/* =========================
   TRACK SEARCH BOX
========================= */

.btn_Trc{
  margin-bottom: 10px;
}

.track_my_package{

    width: 100%;

    max-width: 1100px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    overflow: hidden;

    border-radius: 18px;

    background: #fff;

    border: 2px solid #e7eefb;

    padding: 8px;

    box-shadow:
    0 10px 30px rgba(0,0,0,.04);

}


/* INPUT */
.track_my_package input{


       width: 100%;
    display: flex;
    width: 100%;
    text-transform: capitalize;
    padding: 3px 15px;
    color: var(--black_secondery);
    opacity: 70%;
    font-weight: 500;
    background: none;

}


/* PLACEHOLDER */
.track_my_package input::placeholder{

    color: #a0a7b3;

    font-weight: 500;

}


/* BUTTON */
.track_my_package button{

    width: 200px;
    background: linear-gradient(135deg, #DE8333, #F5A623);
    text-transform: capitalize;
    font-weight: 600;
    color: var(--theme-color-white);
     height: 100%;
     padding:10px 0;
     border-radius:10px

}


/* HOVER */
.track_my_package button:hover{

    transform: translateY(-2px);

    box-shadow:
    0 12px 25px rgba(222,131,51,.35);

}


/* ICON */
.track_my_package button i{

    font-size: 20px;

}





/*====== phone contact list =====*/



@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* =====================================
GLOBAL
===================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Inter',sans-serif;
}

body{
    background:#f5f7fb;
    color:#111827;
}

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

.capterms-container{
    width:90%;
    max-width:1300px;
    margin:auto;
}

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

.capterms-hero-area{
    position:relative;
    height:420px;

    background:
    linear-gradient(rgba(0,0,0,.65), rgba(0,0,0,.30)),
    url("../images/Cargomages/term & condition.png") center/cover no-repeat;
    center/cover no-repeat;

    display:flex;
    align-items:center;
    overflow:hidden;
}

.capterms-dark-overlay{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
}

.capterms-hero-content{
    position:relative;
    z-index:2;
    color:#fff;
}

.capterms-mini-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:#ff9800;
    font-weight:600;
    margin-bottom:20px;
    font-size:15px;
}

.capterms-hero-content h1{
    font-size:65px;
    font-weight:800;
    margin-bottom:20px;
    line-height:1.1;
    color:#fff;
}

/* =====================================
BREADCRUMB
===================================== */

.capterms-breadcrumb-wrap{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:15px;
}

.capterms-breadcrumb-wrap a{
    color:#fff;
    text-decoration:none;
}

.capterms-breadcrumb-wrap span{
    color:#ff9800;
}

.capterms-breadcrumb-wrap i{
    color:#fff;
}

/* =====================================
MAIN SECTION
===================================== */

.capterms-main-section{
    padding:50px 0;
}

/* =====================================
UPDATE BOX
===================================== */

.capterms-update-card{
    background:#fff;
    border-radius:20px;
    padding:20px;
    display:flex;
    gap:15px;
    align-items:center;
    box-shadow:0 5px 20px rgba(0,0,0,.05);
    margin-bottom:35px;
    border:1px solid #eee;
}

.capterms-update-icon{
    min-width:50px;
    width:50px;
    height:50px;
    border-radius:50%;
    background:#fff4e8;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
    color:#ff9800;
}

.capterms-update-info h4{
    font-size:20px;
    margin-bottom:10px;
}

.capterms-update-info span{
    color:#ff9800;
}

.capterms-update-info p{
    color:#6b7280;
    line-height:1.7;
}

/* =====================================
ACCORDION
===================================== */

.capterms-accordion-wrapper{
    background:#fff;
    border-radius:25px;
    overflow:hidden;
    border:1px solid #eee;
    box-shadow:0 10px 30px rgba(0,0,0,.04);
}

/* =====================================
ITEM
===================================== */

.capterms-accordion-item{
    border-bottom:1px solid #eee;
}

.capterms-accordion-item:last-child{
    border-bottom:none;
}

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

.capterms-accordion-header{
    padding:24px 20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    cursor:pointer;
    transition:.3s;
    gap:20px;
}

.capterms-accordion-header:hover{
    background:#fafafa;
}

/* =====================================
LEFT SIDE
===================================== */

.capterms-header-left{
    display:flex;
    align-items:flex-start;
    gap:10px;
    width:100%;
}

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

.capterms-item-icon{
    width:50px;
    height:50px;
    min-width:50px;
    border-radius:50%;
    background:#fff4e8;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#ff9800;
    font-size:24px;
}

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

.capterms-item-text h3{
    font-size:24px;
    margin-bottom:10px;
    color:#111827;
}

.capterms-item-text p{
    color:#6b7280;
    line-height:1.7;
}

/* =====================================
ARROW
===================================== */

.capterms-arrow-icon{
    font-size:30px;
    color:#ff9800;
    transition:.4s;
    min-width:25px;
}

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

.capterms-accordion-content{
    max-height:0;
    overflow:hidden;
    transition:max-height .5s ease;
    padding:0 30px;
}

.capterms-accordion-content p{
    color:#6b7280;
    line-height:1.9;
    padding-bottom:30px;
}

/* =====================================
ACTIVE
===================================== */

.capterms-accordion-item.active .capterms-accordion-content{
    max-height:300px;
}

.capterms-accordion-item.active .capterms-arrow-icon{
    transform:rotate(180deg);
}

/* =====================================
BOTTOM CONTACT BOX
===================================== */

.capterms-support-box{
    margin-top:40px;
    background:var(--blue_secondery);
    border-radius:25px;
    padding:28px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:30px;
    flex-wrap:wrap;
}

/* =====================================
LEFT CONTACT
===================================== */

.capterms-support-left{
    display:flex;
    align-items:center;
    gap:20px;
}

.capterms-support-icon{
    width:50px;
    height:50px;
    border-radius:50%;
    background:#0c2348;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#ff9800;
    font-size:35px;
}

.capterms-support-text h3{
    color:#fff;
    font-size:28px;
    margin-bottom:10px;
}

.capterms-support-text p{
    color:#cbd5e1;
    max-width:600px;
    line-height:1.8;
}

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

.capterms-support-btn{
    background:#ff9800;
    color:#fff;
    text-decoration:none;
    padding:18px 35px;
    border-radius:12px;
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:600;
    transition:.3s;
}

.capterms-support-btn:hover{
    transform:translateY(-5px);
    background:#ff8700;
}

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

@media(max-width:992px){

    .capterms-hero-content h1{
        font-size:50px;
    }

    .capterms-item-text h3{
        font-size:21px;
    }

}

@media(max-width:768px){

    .capterms-hero-area{
        height:350px;
    }

    .capterms-hero-content h1{
        font-size:40px;
    }

    .capterms-accordion-header{
        padding:25px 10px;
    }

    .capterms-update-card{
        flex-direction:column;
        text-align:center;
    }

    .capterms-header-left{
        gap:15px;
    }

    .capterms-item-icon{
        width:55px;
        height:55px;
        min-width:55px;
        font-size:24px;
    }

    .capterms-item-text h3{
        font-size:18px;
    }

    .capterms-item-text p{
        font-size:14px;
    }

    .capterms-support-left{
        flex-direction:column;
        text-align:center;
    }

    .capterms-support-box{
        justify-content:center;
        text-align:center;
    }

}

@media(max-width:576px){

    .capterms-hero-content h1{
        font-size:32px;
    }

    .capterms-breadcrumb-wrap{
        flex-wrap:wrap;
    }

    .capterms-accordion-header{
        gap:15px;
    }

    .capterms-arrow-icon{
        font-size:25px;
    }

}








/* =====================================================
DASHBOARD CALCULATOR
===================================================== */

.dash-calc-section{
    width:100%;
    padding:30px;
    background:#f5f7fb;
    overflow:scroll;
    height:100%;
}

/* CONTAINER */

.dash-calc-container{
    width:100%;
}

/* TOP */

.dash-calc-top{
    margin-bottom:30px;
}

.dash-calc-page-title{
    font-size:30px;
    font-weight:700;
    color:#082255;
    margin-bottom:8px;
}

.dash-calc-page-subtitle{
    color:#64748b;
    font-size:16px;
}

/* GRID */

.dash-calc-grid{
    display:grid;
    grid-template-columns:1fr 500px;
    gap:25px;
}

/* CARDS */

.dash-calc-left-card,
.dash-calc-right-card{
    background:#fff;
    border-radius:25px;
    padding:30px;
    border:1px solid #edf2f7;
}

/* HEADER */

.dash-calc-card-header{
    display:flex;
    align-items:center;
    gap:18px;
    margin-bottom:30px;
}

.dash-calc-icon{
    width:50px;
    height:50px;
    border-radius:18px;
    background:#fff1df;

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

.dash-calc-icon i{
    font-size:24px;
    color:#ff8800;
}

.dash-calc-card-title{
    font-size:24px;
    font-weight:800;
    color:#082255;
}

.dash-calc-small{
    color:#64748b;
    margin-top:5px;
}

/* GRID */

.dash-calc-two-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    margin-bottom:20px;
}

.dash-calc-three-grid{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:20px;
    margin-bottom:25px;
}

/* LABEL */

.dash-calc-label{
    margin-bottom:10px;
    font-size:15px;
    font-weight:700;
    color:#082255;
}

/* INPUT */

.dash-calc-input{
    width:100%;
    height:58px;
    border:1px solid #dbe4ee;
    border-radius:14px;
    padding:0 18px;
    outline:none;
}

/* FAKE SELECT */

.dash-fake-select{
    width:100%;
    height:58px;

    border:1px solid #dbe4ee;
    border-radius:14px;

    padding:0 18px;

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

    background:#fff;

    cursor:pointer;
}

.dash-fake-left{
    display:flex;
    align-items:center;
    gap:12px;
}

.dash-fake-left i{
    color:#ff8800;
    font-size:20px;
}

.dash-fake-left span{
    color:#082255;
    font-size:15px;
}

.dash-fake-select > i{
    color:#64748b;
    font-size:20px;
}

/* DIMENSION */

.dash-dimension-title{
    font-size:22px;
    font-weight:800;
    color:#082255;
    margin:10px 0 20px;
}

/* BUTTON */

.dash-calc-btn{
    width:100%;
    height:52px;

    border-radius:16px;

    background:#ff8800;
    color:#fff;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    font-size:18px;
    font-weight:500;

    cursor:pointer;

    margin-top:10px;
}

/* PRICE BOX */

.dash-price-box{
    background:#041c4a;
    border-radius:20px;
    padding:35px;
    text-align:center;
    margin-bottom:25px;
}

.dash-price-label{
    color:#fff;
    margin-bottom:10px;
    font-size:18px;
}

.dash-main-price{
    font-size:34px;
    font-weight:600;
    color:#ff8800;
    margin-bottom:10px;
}

.dash-price-days{
    color:#fff;
}

/* PRICE LIST */

.dash-price-list{
    border:1px solid #edf2f7;
    border-radius:18px;
    overflow:hidden;
}

.dash-price-row{
    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:14px 16px;

    border-bottom:1px solid #edf2f7;
}

.dash-price-row:last-child{
    border-bottom:none;
}

.dash-price-row span{
    color:#64748b;
}

.dash-price-row strong{
    color:#082255;
}

/* TOTAL */

.dash-total-row{
    display:flex;
    align-items:center;
    justify-content:space-between;

    margin-top:20px;

    padding:20px;

    border-radius:16px;

    background:#fff7ed;
}

.dash-total-row span{
    font-size:18px;
    font-weight:800;
    color:#082255;
}

.dash-total-row strong{
    font-size:24px;
    color:#ff8800;
}

/* RESPONSIVE */

@media(max-width:1200px){

    .dash-calc-grid{
        grid-template-columns:1fr;
    }

}

@media(max-width:768px){

    .dash-calc-section{
        padding:15px;
    }

    .dash-calc-two-grid,
    .dash-calc-three-grid{
        grid-template-columns:1fr;
    }

    .dash-main-price{
        font-size:45px;
    }

    .dash-total-row{
        flex-direction:column;
        gap:10px;
    }

}

@media(max-width:576px){

    .dash-calc-page-title{
        font-size:28px;
    }

    .dash-calc-left-card,
    .dash-calc-right-card{
        padding:20px;
    }

    .dash-calc-card-header{
        flex-direction:column;
        text-align:center;
    }

}



/*===== read more index page */



.full_text{
    display:none;
}

.service_text.active .short_text{
    display:none;
}

.service_text.active .full_text{
    display:inline;
}

.read_more_btn{
    background:none;
    border:none;
    color:var(--Orange_premery);
    cursor:pointer;
    font-weight:600;
    margin-left:5px;
}




/*=========grid_kyc========*/




.grid_kyc {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: auto;
   padding: 10px 30px;
   /* Orange KYC Warning Background */
   background: #FFF6EA;
   border: 1px solid #F6D7A8;
   border-radius:10px;
   object-fit: cover;
   overflow: hidden;
    gap: 30px;
}

.grid_kyc p{
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-weight: 500;
}

.grid_kyc p:nth-child(1){
    color: var(--Orange_premery);
    font-size: 18px;
    display: flex;
    padding: 3px 0;
    font-weight: 600;
}

.logo_verify i{
    color: var(--Orange_premery);
    font-size: 50px;
}

.notes {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 5px;
}

.notes span{
    color: black;
    display: flex;
    align-items: center;
    gap: 8px;

}

.identity_badge i{
    font-size: 50px;
    color: var(--Orange_premery);
}

.btn-kyc{
    display: flex;
    flex-direction: column;
}

.btn-kyc button{
    display: flex;
    width: 140px;
    flex-wrap: nowrap;
    background-color: var(--Orange_premery);
    padding: 4px 10px;
    text-align: center;

}





/* ========================= */
/* Tablet */
/* ========================= */

@media(max-width:900px){

    .grid_kyc{
        grid-template-columns:70px 1fr;
        gap:20px;
    }

    .identity_badge{
        display:none;
    }

    .btn-kyc{
        grid-column:1 / -1;
    }

}



/* ========================= */
/* Mobile */
/* ========================= */

@media(max-width:600px){

    .grid_kyc{
        grid-template-columns:1fr;
        text-align:center;
        padding:10px;
        display: flex;
        flex-direction: column;
        padding: 10px 20px;
        gap:5px
    }




    .grid_kyc p {
        font-size: 12px;

    }

    .logo_verify,
    .identity_badge{
        margin:auto;
    }


    .notes span{
    color: black;
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 8px;

}


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

    }

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

    .info_midle :nth-child(1){
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .btn-kyc{
        width:100%;
    }

    .btn-kyc button{
        width:100%;

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

}



/*========= kyc page ========*/

.kyc_section{
    width:100%;
    padding:30px;

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




/* Main Box */

.kyc_box{
    width:100%;
    background:white;
    border-radius:20px;
    padding:35px;
    border:1px solid #ECECEC;
}


.kyc-verification{
    width:100%;

    justify-content:center;

}
.kyc_box_title{
    margin-bottom:30px;
}

.kyc_box_title h3{
    font-size:30px;
    margin-bottom:10px;
    color:var(--black_secondery);
}

.kyc_box_title p{
    color:var(--gray-text);
}



/* Document Types */

.document_types{
    width:100%;
    background:#F8FAFF;
    padding:18px;
    border-radius:14px;
    display:flex;
    gap:15px;
    flex-wrap:wrap;
    margin-bottom:30px;
}

.doc_type{
    padding:10px 18px;
    border-radius:10px;
    background:white;
    font-size:14px;
    color:var(--gray-text);
    cursor:pointer;
    border:1px solid #E7E7E7;
}

.doc_type.active{
    background:#FFF6EA;
    color:var(--Orange_premery);
    border-color:#FFD9B2;
}



/* Upload */

.upload_wrapper{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:25px;
    margin-bottom:30px;
}

.upload_box h4{
    margin-bottom:15px;
    color:var(--black_secondery);
}

.upload_area{
    border:2px dashed #D9D9D9;
    border-radius:18px;
    padding:15px 20px;
    text-align:center;
    cursor:pointer;
    transition:0.3s;
    background:#FCFCFC;
}

.upload_area:hover{
    border-color:var(--Orange_premery);
    background:#FFF9F4;
}

.upload_area i{
    font-size:30px;
    color:var(--Orange_premery);
    margin-bottom:15px;
}

.upload_area h5{
    font-size:18px;
    margin-bottom:10px;
    color:var(--black_secondery);
}

.upload_area span{
    font-size:14px;
    color:var(--gray-text);
}



/* Security */

.kyc_security{
    width:100%;
    background:#F8FAFF;
    padding:20px;
    border-radius:15px;
    display:flex;
    align-items:flex-start;
    gap:15px;
    margin-bottom:30px;
}

.kyc_security i{
    font-size:22px;
    color:var(--Orange_premery);
}

.kyc_security h5{
    margin-bottom:5px;
    color:var(--black_secondery);
}

.kyc_security p{
    color:var(--gray-text);
    font-size:14px;
}



/* Button */

.kyc_btn{
    width:100%;
    height:60px;
    border:none;
    border-radius:15px;
    background:var(--Orange_premery);
    color:white;
    font-size:15px;
    font-weight:500;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    transition:0.3s;
}

.kyc_btn:hover{
    background:#c97125;
}

.kyc_btn i{
    font-size:24px;
}



/* Responsive */

@media(max-width:900px){

    .upload_wrapper{
        grid-template-columns:1fr;
    }

    .step_line{
        width:80px;
    }

}


@media(max-width:600px){

    .kyc_section{
        padding:15px;

    }

    .kyc_box{
        padding:20px;
    }

    .kyc_header_text h2{
        font-size:28px;
    }

    .step_line{
        width:40px;
    }

}

.kyc-verification {
    height: 100%;
    overflow-y: scroll;
}



.upload_area{
    min-height:220px;

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

    overflow:hidden;
    cursor:pointer;
}

.doc_type{
    cursor:pointer;
}

.doc_type.active{
    background:#FFF6EA;
    border:1px solid #DE8333;
    color:#DE8333;
}





/*====== warehouse select  ==*/


select[name="default_pickup"]{

    width:100%;

    height:55px;

    padding:0 14px;

    border-radius:12px;

    border:1px solid #dbe2ea;

    background:#fff;

    font-size:15px;

    color:#334155;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

}