/* Fee Calculator Starts */
.calculator {
    font-family: "Roboto", sans-serif;
    width: 800px;
    background: #fff;
    box-shadow: 0 12px 50px -11px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    color: #14213d;
    overflow: hidden;
    margin: auto ; 
}

.calculator, 
.calculator * {
    box-sizing: border-box;
}

.calculator .top {
    background: #e7623d;
    color: #fff;
    padding: 25px 60px;
}

.calculator .top h2 {
    margin-top: 0;
}

.calculator form {
    display: flex;
    gap: 25px;
    justify-content: space-between;
    align-items: center;
    height: 100px;
}

.calculator .title {
    margin-bottom: 10px;
    font-size: 15px;
    font-weight: 700;
    margin-left: 4px;
    color: #14213d;
}

.calculator form input {
    font-size: 20px;
    height: 45px;
    padding: 8px 10px;
    width: 100%;
    border-radius: 8px;
    border: 0.05rem solid #9A9A9A;
    background-color: white;
    color: black;
    box-shadow: none;
    
}

.calculator form input::placeholder {
    font-size: 15px; /* Smaller font size for the placeholder */
    color: #888; /* Optional: Change the color to a lighter gray */
}

.calculator .calculate-btn {    
    background-color: var(--carribean-greem);
    color: #14213d;
    border: none;
    padding: 8px 32px;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 20px;
    height: 45px;
}


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

.calculator .result .left {
    width: 50%;
    padding: 60px;
}

.calculator .right {
    width: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
}

.calculator .left h3 {
    font-size: 15px;
    font-weight: 400;
    margin-bottom: 5px;
}

.calculator .result .value {
    font-size: 15px;
    font-weight: 900;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(20, 33, 61, 0.2);
}

.calculator .result .value::before {
    content: "\20B9";
    font-size: 15px;
    font-weight: 600;
    margin-right: 6px;
}

@media (max-width: 650px) {
    .calculator {
        width: 90%;
        max-width: 500px;
    }

    .calculator-main {
        width: 90%;
        max-width: 500px;
    }

    .calculator form {
        flex-direction: column;
        gap: 20px;
    }

    .calculator .result {
        flex-direction: column;
        text-align: center;
    }

    .calculator .top {
        height: 280px;
    }

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

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

.calculator-main {  
    width: 100%;
    max-width: 800px;
    margin: 20px auto;
    display: flex;
    align-items: center;
    flex-direction: column; 
    text-align: center;
    overflow: hidden;   
}

.calculator-main h4,.calculator-main h1,.calculator-main h2{
    margin-bottom: 10px;
}
/* Fee Calculator Ends */


/* FAQ's Starts */
:root{
    /* Fonts */
    --font-family: "Satoshi", sans-serif;
    --fs-sm: 1.4rem;
    --fs-md: 1.6rem;
    --fs-lg: 2.2rem;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-bold: 700;
    
    /* Transition & Box Shadow */
    --transition: 0.4s ease-in-out; 
    --shadow: 0px 60px 56px -12px rgba(9, 40, 163, 0.05);    
}

.container_faqs{ 
    width: 100%;
    margin: auto;
    min-height: 100vh;
    padding: 0.5rem;
    display: grid;
    place-items: center;
}

.accordion__wrapper {
    background-color: #fff;;
    box-shadow: var(--shadow);
    border-radius: 2.5rem;
    width: 100%;
    max-width: 60rem;
    padding: 2.4rem;
}

.accordion__title{
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    color:  #242e4c;
    text-align: center;
    margin-bottom: 4rem;
}

.accordion {
    border-bottom: 0.1rem solid  #dae1f5;
   
}

.accordion__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
} 

.accordion__icon {
    background-color:  #FF4B4B;
    width: 2.2rem;
    height: 2.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    color: #fff;
    flex-shrink: 0;
}

.accordion__question{
    font-size: var(--fs-md);
    font-weight: var(--fw-medium);
    color:  #242e4c;
}

.accordion__answer{
    padding: 2rem 0;
}

.accordion__content{
    overflow: hidden;
    height: 0;
    transition: var(--transition);
    line-height: 1.5;
}

@media screen and (min-width: 580px) {
    .accordion__wrapper {
        padding: 5rem 8rem;
    }
}   
/* FAQ's Ends */


/* Flatpages AboutUS Starts */
.flag_abouts{
    padding:3% 2%;
}

.flag_abouts .sm-title{
    letter-spacing: 6px;
}
/* Flatpages AboutUS Ends */


/* Flatpages_base About Us Starts */
.flag_abouts{
    padding:3% 2%;
}
.flag_abouts h2 span{
  display: flex;
  justify-content: space-between;
}
.flag_abouts h2 {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1rem;
}
.flag_abouts h2::before
 {
  content: "";
  border-top: 0.1rem double black;
  align-self: center;
}

.flag_abouts h2::after {
  content: "";
  border-top: 0.1rem double black;
  align-self: center;
}
.flag_abouts p,.flag_abouts ol,.flag_abouts ul,.flag_abouts h3,.flag_abouts h4{
  padding: 0px 10px;
}
.flag_abouts ul,.flag_abouts ol{
list-style-type: disc;
padding: 0px 25px;
list-style-position: inside;
}
p a{font-style: italic;}

.flag_abouts .sm-title{
    letter-spacing: 6px;
    line-height: normal;
    text-align: center;
}
/* Flatpages_base About Us Ends */

/* Licenes(Careers) Starts */
.careers h2 {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1rem;
}
.careers h2::before{
    content: "";
    border-top: 0.1rem double black;
    align-self: center;
}
.careers h2::after {
    content: "";
    border-top: 0.1rem double black;
    align-self: center;
}
/* License(Careers) Ends */


/* Order Tracking Starts */
.track-order-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 100px); /* Adjust the 100px as needed for header/footer */
    padding-bottom: 100px; /* Additional padding from the footer */
    text-align: center;
    position: relative;
    z-index: 2;
}

.track-order-form {
    background-color: rgba(255, 255, 255, 0.9);
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    width: 100%;
    max-width: 500px;
    position: relative;
    top: 120px; /* Adjusted position to move the form lower */
}

.track-order-form h2 {
    font-size: 2rem;
    margin-bottom: 20px;
    color: #007bff;
}

.track-order-form .form-group {
    margin-bottom: 20px;
}

.track-order-form label {
    font-weight: bold;
    font-size: 1.1rem;
    color: #333;
}

.track-order-form input {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1rem;
}

.track-order-form button {
    width: 100%;
    padding: 10px;
    background-color: #f1c40f; /* Changed button color to yellow */
    border: none;
    color: black;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
    font-size: 1.2rem;
}

.track-order-form button:hover {
    background-color: #f39c12;
    transform: scale(1.05);
}

.track-order-form .alert {
    margin-top: 15px;
    font-size: 1rem;
}

.emoji-icon {
    position: absolute;
    font-size: 3rem;
    opacity: 0.7;
    animation: float 10s infinite linear;
}

.emoji1 { left: 15%; top: 20%; animation-duration: 15s; animation-delay: -3s; }
.emoji2 { left: 70%; top: 30%; animation-duration: 18s; animation-delay: -5s; }
.emoji3 { left: calc(100% - 6rem); top: 50%; animation-duration: 12s; animation-delay: -2s; }
.emoji4 { left: 80%; top: 60%; animation-duration: 20s; animation-delay: -4s; }
.emoji5 { left: 20%; top: 60%; animation-duration: 14s; animation-delay: -6s; }
.emoji6 { left: 55%; top: 15%; animation-duration: 16s; animation-delay: -7s; }
.emoji7 { left: 10%; top: 10%; animation-duration: 17s; animation-delay: -8s; }
.emoji8 { left: 85%; top: 25%; animation-duration: 19s; animation-delay: -9s; }
.emoji9 { left: 50%; top: 50%; animation-duration: 22s; animation-delay: -10s; }
.emoji10 { left: 5%; top: 80%; animation-duration: 13s; animation-delay: -11s; }
.emoji11 { left: 75%; top: 10%; animation-duration: 21s; animation-delay: -12s; }
.emoji12 { left: 25%; top: 30%; animation-duration: 16s; animation-delay: -13s; }
.emoji13 { left: 65%; top: 45%; animation-duration: 18s; animation-delay: -14s; }
.emoji14 { left: 35%; top: 25%; animation-duration: 20s; animation-delay: -15s; }
.emoji15 { left: 45%; top: 75%; animation-duration: 19s; animation-delay: -16s; }
.emoji16 { left: 80%; top: 40%; animation-duration: 17s; animation-delay: -17s; }
.emoji17 { left: 15%; top: 50%; animation-duration: 22s; animation-delay: -18s; }
.emoji18 { left: 55%; top: 70%; animation-duration: 12s; animation-delay: -19s; }
.emoji19 { left: 25%; top: 10%; animation-duration: 14s; animation-delay: -20s; }
.emoji20 { left: 65%; top: 60%; animation-duration: 15s; animation-delay: -21s; }

@keyframes float {
    0% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-20px) rotate(15deg);
    }
    100% {
        transform: translateY(0) rotate(0deg);
    }
}

.track-order-form .quote {
    font-size: 1.5rem;
    color: #555;
    margin-top: 30px;
    animation: fadeInUp 2s ease-in-out;
    display: none; /* Hide all quotes initially */
}

.track-order-form .quote.active {
    display: block; /* Show only the active quote */
}

.track-order-form .quote span {
    display: block;
    font-size: 1.2rem;
    color: #007bff;
    font-weight: bold;
}

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

@media (max-width: 450px) {
    .track-order-form {
        top: 0; /* Move the form to the top */
        padding: 20px; /* Add padding for mobile */
        margin: 0 10px; /* Add space on sides */
    }
    /* Hide specific emojis */
    .emoji16, .emoji13, .emoji17, .emoji9, .emoji4, .emoji20, .emoji5, .emoji18, .emoji15, .emoji10 {
        display: none;
    }
}

@media (min-width: 450px) {
    .emoji10, .emoji3, .emoji15 {
        display: none;
    }
}
/* Order Tracking Ends */


/* Order Tracking Result Starts */
.order-status-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px; /* Fixed height to make the card square */
    width: 300px;  /* Fixed width to make the card square */
    text-align: center;
    position: relative;
    z-index: 2;
    background-color: rgba(255, 255, 255, 0.85);
    border-radius: 20px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    margin: auto;
    padding: 15px; /* Reduced padding */
}

.order-status-details {
    width: 100%;
    transition: transform 0.5s ease;
}

.order-status-details:hover {
    transform: scale(1.05);
}

.order-status-details .order-id {
    font-family: 'Great Vibes', cursive;
    font-size: 2.5em;  /* Slightly reduced font size */
    font-weight: bold; /* Bold styling */
    animation: colorChange 2s infinite alternate;
}

@keyframes colorChange {
    0% { color: #e57373; }
    25% { color: #f06292; }
    50% { color: #ba68c8; }
    75% { color: #7986cb; }
    100% { color: #4db6ac; }
}

.order-status-details .status {
    font-size: 1.2em;
    margin: 8px 0; /* Reduced margin */
    position: relative;
}

.order-status-details .status i {
    font-size: 1.5em;
    margin-right: 8px; /* Reduced space between icon and text */
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-20px); }
    60% { transform: translateY(-10px); }
}

.order-status-details .fa-heartbeat {
    animation: heartbeat 1.5s infinite;
}

@keyframes heartbeat {
    0% { transform: scale(1); }
    25% { transform: scale(1.2); }
    50% { transform: scale(1); }
    75% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.order-status-details .love-quote {
    font-style: italic;
    margin-top: 8px; /* Reduced margin */
    font-size: 0.9em; /* Reduced font size */
    animation: fadeIn 3s ease-in-out;
}

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.emoji-icon {
    position: absolute;
    font-size: 3rem;
    opacity: 0.7;
    animation: float 10s infinite linear;
}

.emoji1 { left: 15%; top: 20%; animation-duration: 15s; animation-delay: -3s; }
.emoji2 { left: 70%; top: 30%; animation-duration: 18s; animation-delay: -5s; }
.emoji3 { left: calc(100% - 6rem); top: 50%; animation-duration: 12s; animation-delay: -2s; } /* Positioned next to the card */
.emoji4 { left: 80%; top: 60%; animation-duration: 20s; animation-delay: -4s; }
.emoji5 { left: 20%; top: 60%; animation-duration: 14s; animation-delay: -6s; }
.emoji6 { left: 55%; top: 15%; animation-duration: 16s; animation-delay: -7s; }
.emoji7 { left: 10%; top: 10%; animation-duration: 17s; animation-delay: -8s; }
.emoji8 { left: 85%; top: 25%; animation-duration: 19s; animation-delay: -9s; }
.emoji9 { left: 50%; top: 50%; animation-duration: 22s; animation-delay: -10s; }
.emoji10 { left: 5%; top: 80%; animation-duration: 13s; animation-delay: -11s; }
.emoji11 { left: 75%; top: 10%; animation-duration: 21s; animation-delay: -12s; }
.emoji12 { left: 25%; top: 30%; animation-duration: 16s; animation-delay: -13s; }
.emoji13 { left: 65%; top: 45%; animation-duration: 18s; animation-delay: -14s; }
.emoji14 { left: 35%; top: 25%; animation-duration: 20s; animation-delay: -15s; }
.emoji15 { left: 45%; top: 75%; animation-duration: 19s; animation-delay: -16s; }
.emoji16 { left: 80%; top: 40%; animation-duration: 17s; animation-delay: -17s; }
.emoji17 { left: 15%; top: 50%; animation-duration: 22s; animation-delay: -18s; }
.emoji18 { left: 55%; top: 70%; animation-duration: 12s; animation-delay: -19s; }
.emoji19 { left: 25%; top: 10%; animation-duration: 14s; animation-delay: -20s; }
.emoji20 { left: 65%; top: 60%; animation-duration: 15s; animation-delay: -21s; }

/* Floating animation for icons */
@keyframes float {
    0% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(15deg); }
    100% { transform: translateY(0) rotate(0deg); }
}

@media (max-width: 450px) {
    .emoji3, .emoji5, .emoji9, .emoji13, .emoji15, .emoji17, .emoji18, .emoji20 { display: none; }
    .emoji4, .emoji16, .emoji10 { display: none; }
}

@media (min-width: 451px) and (max-width: 1024px) {
    .emoji4, .emoji18, .emoji20 { display: none; }
    .emoji5, .emoji15, .emoji16, .emoji10 { display: none; }
}

@media (min-width: 1025px) {
    .emoji18, .emoji15, .emoji10 { display: none; }
}
/* Order tracking Result Ends */


/* Sell On Thotfy(New Partner) Starts */
.form-outline .error-block{
    color: red;
}
.error-block ul{
  list-style-type: none;
  padding: 0%;
}
.background-radial-gradient {
  background-color: var(--body-color);
}

.background-radial-gradient #radius-shape-1 {
  height: 220px;
  width: 220px;
  top: -60px;
  left: -130px;
  background: radial-gradient(#fd7e14, #dc3545);
  overflow: hidden;
}

.background-radial-gradient #radius-shape-2 {
  border-radius: 38% 62% 63% 37% / 70% 33% 67% 30%;
  bottom: -60px;
  right: -110px;
  width: 300px;
  height: 300px;
  background: radial-gradient(#fd7e14, #dc3545);
  overflow: hidden;
}

.background-radial-gradient .bg-glass {
  background-color: hsla(0, 0%, 100%, 0.6) !important;
  backdrop-filter: saturate(200%) blur(25px);
}
.background-radial-gradient label:has(+ input:required):after {
  content: ' *';
  color: red;
}
.background-radial-gradient input[required] ~ label:after {
  content: ' *';
  color: red;
}


.ps-timeline-sec {
    position: relative;
    background: #fff;
    background-color: var(--body-color);
  }
  .ps-timeline-sec .container {
    position: relative;
    font-family: 'Lato', sans-serif;
  }
  .ps-timeline-sec .container{
    margin-left: auto;
  }
  .nav__menu#nav__menu ol, ul{
    padding-left: 0;
  }
@media screen and (max-width: 767px) {
 .ps-timeline-sec .container ol:before {
     background: #348e80;
     content: "";
     width: 10px;
     height: 10px;
     border-radius: 100%;
     position: absolute;
     top: 130px !important;
     left: 36px !important;
}
 .ps-timeline-sec .container ol:after {
     background: #348e80;
     content: "";
     width: 10px;
     height: 10px;
     border-radius: 100%;
     position: absolute;
     top: inherit !important;
     left: 36px;
}
 .ps-timeline-sec .container ol.ps-timeline {
     margin: 130px 0 !important;
     border-left: 2px solid #348e80;
     padding-left: 0 !important;
     padding-top: 120px !important;
     border-top: 0 !important;
     margin-left: 25px !important;
 margin-top: 0 !important;
}
 .ps-timeline-sec .container ol.ps-timeline li {
     height: 240px;
     float: none !important;
     width: inherit !important;
    /* &:nth-child(2) {
         .img-handler-bot {
             img {
                 width: 70px;
            }
        }
    }
     */
}
 .ps-timeline-sec .container ol.ps-timeline li:last-child {
     margin: 0;
     bottom: 0 !important;
     height: 120px;
}
 .ps-timeline-sec .container ol.ps-timeline li:last-child .ps-top {
     margin-bottom: 0 !important;
     top: 20px;
     width: 50% !important;
}
 .ps-timeline-sec .container ol.ps-timeline li span {
     left: 0 !important;
}
 .ps-timeline-sec .container ol.ps-timeline li span.ps-sp-top:before {
     content: none !important;
}
 .ps-timeline-sec .container ol.ps-timeline li span.ps-sp-top:after {
     content: none !important;
}
 .ps-timeline-sec .container ol.ps-timeline li span.ps-sp-bot:before {
     content: none !important;
}
 .ps-timeline-sec .container ol.ps-timeline li span.ps-sp-bot:after {
     content: none !important;
}
 .ps-timeline-sec .container ol.ps-timeline li p {
     text-align: left !important;
     width: 100% !important;
     margin: 0 auto !important;
     margin-top: 0px !important;
}
 .ps-timeline-sec .container ol.ps-timeline li .ps-top {
     width: 90% !important;
     float: right !important;
     right: 0;
     top: -10px;
}
 .ps-timeline-sec .container ol.ps-timeline li .ps-bot {
     width: 90% !important;
     float: right !important;
     right: 0;
     top: -60px;
}
}
.ps-timeline-sec .container ol:before {
 background: #348e80;
 content: "";
 width: 10px;
 height: 10px;
 border-radius: 100%;
 position: absolute;
 left: 8px;
 top: 49.5%;
}
.ps-timeline-sec .container ol:after {
 background: #348e80;
 content: "";
 width: 10px;
 height: 10px;
 border-radius: 100%;
 position: absolute;
 right: 8px;
 top: 49.5%;
}
.ps-timeline-sec .container ol.ps-timeline {
 margin: 390px 0;
 padding: 0;
 border-top: 2px solid #348e80;
 list-style: none;
}
.ps-timeline-sec .container ol.ps-timeline li {
 float: left;
 width: 25%;
 padding-top: 30px;
 position: relative;
}
.ps-timeline-sec .container ol.ps-timeline li h5 {
 text-align: center;
 margin: -30px 0 -40px 50px;
 font-weight: 700px;
 color: maroon;
}
.ps-timeline-sec .container ol.ps-timeline li span {
 width: 50px;
 height: 50px;
 margin-left: -25px;
 background: #fff;
 border-radius: 50%;
 box-shadow: 0 0 0 0px #fff;
 text-align: center;
 line-height: 50px -10;
 color: #df8625;
 font-size: 2em;
 font-style: normal;
 position: absolute;
 top: -26px;
 left: 50%;
}
.ps-timeline-sec .container ol.ps-timeline li span.ps-sp-top {
 border-top: 4px solid #348e80;
}
.ps-timeline-sec .container ol.ps-timeline li span.ps-sp-top:before {
 content: '';
 color: #348e80;
 width: 2px;
 height: 50px;
 background: #348e80;
 position: absolute;
 top: -50px;
 left: 50%;
}
.ps-timeline-sec .container ol.ps-timeline li span.ps-sp-top:after {
 content: '';
 color: #348e80;
 width: 8px;
 height: 8px;
 background: #348e80;
 position: absolute;
 bottom: 90px;
 left: 44%;
 border-radius: 100%;
}
.ps-timeline-sec .container ol.ps-timeline li span.ps-sp-bot {
 border-bottom: 4px solid #348e80;
}
.ps-timeline-sec .container ol.ps-timeline li span.ps-sp-bot:before {
 content: '';
 color: #348e80;
 width: 2px;
 height: 50px;
 background: #348e80;
 position: absolute;
 bottom: -50px;
 left: 50%;
}
.ps-timeline-sec .container ol.ps-timeline li span.ps-sp-bot:after {
 content: '';
 color: #348e80;
 width: 8px;
 height: 8px;
 background: #348e80;
 position: absolute;
 top: 90px;
 left: 44%;
 border-radius: 100%;
}
.ps-timeline-sec .container ol.ps-timeline li p {
 text-align: center;
 width: 100%;
 margin: 5 auto;
}
.ps-timeline-sec .container ol.ps-timeline li h4 {
 font-size: 16px;
 color: darkgreen;
 text-decoration: underline;
}
.ps-timeline-sec .container ol.ps-timeline li .ps-top {
 position: absolute;
 bottom: 0;
 margin-bottom: 105px;
min-width: 200px;
}
.ps-timeline-sec .container ol.ps-timeline li .ps-bot {
 position: absolute;
 margin-top: 50px;
min-width: 200px;
}
.ps-timeline-sec .container ol.ps-timeline li .ps-bottom {
 position: absolute;
 margin: 5px;
 text-align: center;
}
/* Sell On Thotfy(New Partner) Ends */