/* -------------------------------------------------------

 01. Basics and Typography style
 02. Helper style
 03. Selection style 
 07. Navbar Top style
 08. Navbar style
 09. Header style
 10. Slider-fade style (Homepage Slider)
 11. Slider style (Inner Page Slider)
 13. Page Banner Header style
 14. Video Background style
 15. About style
 16. Services styleaccordion block
 17. Services Box style
 18. Clients style
 19. Gallery style
 20. Testimonials style 
 21. Promo Video style
 22. Form style
 23. Pricing style
 24. Accordion Box (for Faqs) style
 25. Blog style
 26. Blog 2 style
 27. Blog 3 style
 28. Post style
 29. Contact style
 30. Coming Soon
 31. 404 Page style
 32. Buttons style
 33. Footer style
 34. toTop Button style
 35. Overlay Effect Bg image style
 36. Responsive (Media Query)
 
-------------------------------------------------------black */


  .flout-box-wrapper {
    max-width: 640px;
    margin: 2.5rem auto 0 auto;
    padding: 0 1rem;
  }

  .flout-box {
    background-color: white;
    border: 1px solid #111827;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    border-radius: 1rem;
    padding: 1.25rem 1.5rem;
    text-align: center;
  }

  .flout-box h3 {
    font-size: 1rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 0.5rem;
  }

  .flout-box p {
    font-size: 1.2rem;
    color: #374151;
    margin-bottom: 0.75rem;
    max-width: 20rem;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.4;
  }

  .flout-box a {
    display: inline-block;
    font-size: 1.2rem;
    font-weight: 500;
    color: #111827;
    background-color: white;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    text-decoration: none;
    transition: background-color 0.2s ease;
  }

  .flout-box a:hover {
    background-color: goldenrod;
  }


.firebaseui-container input {
    margin: 18px 0;
    padding: 8px;
}

.firebaseui-container label {
    display: block;
    margin-bottom: 4px;
  }
#copywriteNote {

    padding: 20px;
    font-size: 12px;
    color: #888;
}

.fashion-news-btn-container {
  display: flex;
  justify-content: center;
  margin-bottom: 0px;
}

.fashion-news-btn {
  padding: 10px 20px;
  background-color: #383838;
  color: #fff;
  font-family: 'Lato', sans-serif;
  text-decoration: none;
  font-size: 18px;
  border-radius: 8px;
  box-shadow: 0px 4px 6px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  margin-top: -20px;
}

.fashion-news-btn:hover {
  background-color: #555;
  color: #fff; /* Subdued gold */
}

.fashion-news-btn i {
  margin-right: 10px;
}

/* flout logo */
/* Logo Styling */
.floutlogo {
    font-family: 'Proxima Nova', Arial, sans-serif;
    font-size: 2.5rem; /* Adjust the size as needed */
    font-weight: normal;
    position: relative;
    display: inline-block; /* Ensures the logo and slogan are treated as a block */
}

.floutlogo .ai {
    font-style: italic;
    font-weight: normal; /* Maintain consistency */
    font-size: 1.25rem;
}
/* Slogan Styling */
.slogan {
    font-size: 1.0rem; /* Smaller font size for the slogan */
    font-weight: normal;
    text-transform: lowercase;
    display: block;
    margin-top: -0.6rem; /* Adjust the vertical gap between the logo and slogan */
    padding-left: 0.1rem; /* Slight adjustment to fine-tune alignment under the "f" */
}
/* index page */

#d1 {
display: flex;
flex-direction: column;
align-items: center;
}
.unique-item {
max-width: 1000px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
}

/* chat */

.chat_send-button {
    padding: 10px 20px;
    background-color: #007bff;
    border: none;

    color: #fff;
    cursor: pointer;
    font-size: 16px;
    margin-left: 10px;
    transition: background-color 0.3s;
}

.chat_send-button:hover {
    background-color: #0056b3;
}
.chat_ResponseContainer {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 10px;
    border-radius: 5px;
}
.chat_spinner{
    display: none;
    margin-left: 10px;
    width: 24px;
    height: 24px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid darkgray;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
.chat_spinner2{
    display: none;
    margin-left: 10px;
    width: 24px;
    height: 24px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #007bff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
.chat_chat-container {
    border-radius: 10px;
    padding: 20px;
    overflow-y: auto;
    max-height: 500px;
    margin-bottom: 20px;
}

.chat_chat-message {
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
    background-color: #007bff;
    color: #fff;
    padding: 10px;
    margin-top: 20px;
    border-radius: 15px;
    margin-right: auto;
}
.chat-inner-modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 50px;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
  }

.chat-inner-modal-content {
    background-color: #fefefe;
    margin: 5% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 90%;
    max-width: 1200px;
  }

  .chat-inner-close {
    color: #aaa;
    float: right !important;
    font-size: 28px;
    font-weight: bold;
  }

  .chat-inner-close:hover, .chat-inner-close:focus {
    text-decoration: none;
    cursor: pointer;
  }

  .chat-checkbox-list {
    margin-top: 20px;
  }

  .chat-checkbox-list ul {
    list-style-type: none;
    padding: 0;
  }

  .chat-checkbox-list ul li {
    margin-bottom: 10px;
  }

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/* credits */
#credits {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid #ccc;
    padding: 10px;
  }
  .credits_table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 20px 0;
  }
  .credits_th, .credits_td {
    padding: 8px;
    text-align: left;

  }
  .credits_th {
    background-color: #f2f2f2;
  }
  .credits_copy-icon {
    cursor: pointer;
    color: #007bff;
  }
  .credits_copy-icon:hover {
    color: #0056b3;
  }
/* home page */
.pricing-container {
    position: relative;
    width: max-content;
    margin: 0 auto;
}

#overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
}
#overlaymag {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    display: flex;
    justify-content: center;
    z-index: 1000;
    align-items: center;
}
    .subscription-plans .container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
        text-align: center;
    }

    .subscription-plans h2 {
        margin-bottom: 20px;
    }
    
    .subscription-plans .plans {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        gap: 20px;
    }
    
    .subscription-plans .plan {
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 10px;
        padding: 20px;
        width: 30%;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    
    .subscription-plans .plan h3 {
        margin-top: 0;
    }
    
    .subscription-plans .plan p {
        margin: 10px 0;
    }
    
    .subscription-plans .original-price {
        text-decoration: line-through;
        color: #888;
    }
    
    .subscription-plans .discounted-price {
        color: #e74c3c;
        font-weight: bold;
        margin-left: 10px;
    }
    
    .subscription-plans .cta-wrapper {
        margin-top: auto;
    }
    
    .subscription-plans .cta {
        display: inline-block;
        padding: 10px 20px;
        background: #3498db;
        color: #fff;
        text-decoration: none;
        border-radius: 5px;
        margin-top: 15px;
    }
    
    .subscription-plans .cta:hover {
        background: #2980b9;
    }
    
    .subscription-plans .limited-time-offer {
        margin-top: 30px;
        font-size: 1.2em;
        color: #e74c3c;
    }
    


.mag-modal, .mag-inner-modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 50px;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
  }

  .mag-modal-content, .mag-inner-modal-content {
    background-color: #fefefe;
    margin: 5% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 90%;
    max-width: 1200px;
  }

  .mag-close, .mag-inner-close {
    color: #aaa;
    float: right !important;
    font-size: 28px;
    font-weight: bold;
  }

  .mag-close:hover, .mag-close:focus, .mag-inner-close:hover, .mag-inner-close:focus {
    text-decoration: none;
    cursor: pointer;
  }

  .mag-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    justify-items: center;
  }

  .mag-grid-container img {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
  }

  .mag-checkbox-list {
    margin-top: 20px;
  }

  .mag-checkbox-list ul {
    list-style-type: none;
    padding: 0;
  }

  .mag-checkbox-list ul li {
    margin-bottom: 10px;
  }





.logo-header {
    font-family: 'Bodoni Moda', serif;
    font-size: 30px;
    line-height: 1.2em;
    font-weight: 500;
    color: #14100c;
    margin-top: 10px;
}
.logo-header-scroll{
    color: #fff;
}
.logo-header span {
    font-family: 'Bodoni Moda', serif;
    font-style: italic;
    color: #aa8453;
}
.checkList {
    font-size: 18px; 
    color: gray; 
    font-weight: 600; 
    line-height: 1.0;
}
.green-tick {
    color: green;
    padding-right: 10px;
}
#panelMenu a  {
    display: block;
    text-decoration: none;
    line-height: 2.3;
}

#panelMenu a :hover {
    color:#14100c;
    cursor: pointer;
}
.resizing {
    cursor: ew-resize;
}
.genericButton {
    border: none;
    border-radius: 5px; /* slightly rounded corners */
    width: 25px;
    height: 25px;
    background-color: #87CEFA;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 10px;
    cursor: pointer;
}
/* Hover effect for the button */
.genericButton:hover {
    background-color: #87CEFA;
    color: lightgray;
}
#suppText {
    font-size: 15px;
    line-height: 1.3;
    color: #aa8453;
}
.colorSelector {
    margin-left: 20px;
    width: 90px;
    text-align: center;

    margin-top: 5px;
}

/* stylist filter slider */
.myOverlay {
    display: none; /* Initially hidden */
    position: fixed;
    top: 0;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* semi-transparent background */
    z-index: 998; /* make sure it's on top of other content */
}
#mBtn {
    display: flex;
    margin-top: -60px;
    margin-left: 270px;
    width: 30px;
    font-size: 24px; 
    cursor: pointer;
    z-index: 1000; /* Ensure the close button is on top */
}
#toggleBtn {
    position: fixed;
    height: 40px;
    width: 40px;
    top: 125px;
    left: 0px;
    cursor: pointer;
    z-index: 10000; /* Ensure the close button is on top */
}
#toggleBtn img {
    height: auto;
    display: block;
    margin: auto;
}
#toggleExpandBtn {
    font-size: 18px;
    position: fixed;
    height: 40px;
    width: 40px;
    top: 62px;
    left: 274px;
    cursor: pointer;
    z-index: 1000; /* Ensure the close button is on top */
}
#toggleExpandBtn img {
    height: auto;
    display: block;
    margin: auto;
}
#panelHeader {
    display: flex;
    height: 50px;
    width: 100%;
    z-index: 1000;
}
#panelContainer {
    position: fixed;
    top: 120px;
    left: -768px; /* hide the panel by default */
    width: 767px; /* this is ok for all device sizes coz frame and content left aligned */
    height: 100%;
    transition: left 0.3s ease-in-out;
    z-index: 999;
}

.panelContent>{
    width: 100%;
    border: none;
}

body::-webkit-scrollbar {
    width: 1px;
  }
  body::-webkit-scrollbar-thumb {
    background-color: transparent;
  }

/* stylist banner */
.scroll-paneX {
    width: 100%;
    height: auto;
    overflow: auto;
    outline: none;
    overflow-y: hidden;
    padding-bottom: 15px;
   /*  -ms-overflow-style: scroll;  // IE 10+
    scrollbar-width: none;  // Firefox */
}

.photosX {
    display: flex;
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.photosX li {
    margin: 5px;
  padding: 5px;
  /* border: 0.1px solid lightgray;
  border-radius: 10px;*/
}
.photosX li p {
  text-align: center;
  font-size: 14px;
}

.imageX {
    width: auto;
    height: 150px;
}
.imageX:hover {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.buttonRightX,
.buttonLeftX {
 width: 50px; /* Set the width of the buttons */
  height: 50px;
  background-color: #f8f8f8; /* Example background color */
  font-size: 20px;
  border-color: rgba(0.5, 0.5, 0.5, 0.3);
  box-shadow: 2px 2px rgba(0.5, 0.5, 0.5, 0.1);
  border-width: 0.5px;
  
  cursor: pointer; /* Change cursor to pointer on hover */
  border-radius: 50px;
  z-index: 1000;
  position: absolute;
  top: 40%; /* Adjust the top position as needed */
}
.buttonLeftX {
  left: 0; /* Position the button on the left */
}

.buttonRightX {
  right: 0; /* Position the button on the right */
}

.scroll-paneX::-webkit-scrollbar { 
  display: none; 
}

/* wait spinner */
  .spinnerLoader {
    border: 8px solid whitesmoke; /* Light grey */
    border-top: 8px solid orangered; /* Blue */
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spinSpinnerLoader 2s linear infinite;
  }

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

/* ======= Basic and Typography style ======= */

html,
body {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    /*font-smoothing: antialiased;*/
}
* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    outline: none;
    list-style: none;
    word-wrap: break-word;
}
body {
    font-family: 'Roboto', sans-serif;
    background-color: white;
    margin: 0;
    flex-direction: column;
}
p {
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.75em;
    margin-bottom: 20px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    line-height: 1.25em;
    margin: 0 0 20px 0;

} 
h1 {
    font-size: 60px;
}
h2 {
    font-size: 48px;
}
h3 {
    font-size: 36px;
}
h4 {
    font-size: 27px;
}
h5 {
    font-size: 24px;
}
h6 {
    font-size: 18px;
}
img {
    width: 100%;
    height: auto;
}
img {
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}
span,
a,
a:hover {
    display: inline-block;
    text-decoration: none;
    color: inherit;
}
b {
    font-weight: 500;
}
.flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    outline: none;
}
/* text field */
input[type="password"]:focus,
input[type="email"]:focus,
input[type="text"]:focus,
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus,
textarea:focus {
    outline: none;
}
input[type="password"],
input[type="email"],
input[type="text"],
input[type="file"],
textarea {
    max-width: 100%;
    margin-bottom: 15px;
    padding: 10px 10px 10px 0px;
    height: auto;
    background-color: transparent;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-width: 0 0 1px;
    border-style: solid;
    display: block;
    width: 100%;
    line-height: 1.5em;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    font-weight: 300;
    background-image: none;
    border-color: ease-in-out .15s, box-shadow ease-in-out .15s;
    border: none;
    border-bottom: 1px solid rgba(170, 132, 83, 0.2);
}
input[type="submit"],
input[type="reset"],
input[type="button"],
button {
    text-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    line-height: 1.75em;
    -webkit-transition: background-color .15s ease-out;
    transition: background-color .15s ease-out;
    background: transparent;
    border: 0px solid transparent;
}
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
button:hover {
    border: 0px solid transparent;
}


input[type="password"]:focus, 
input[type="email"]:focus, 
input[type="text"]:focus, 
input[type="file"]:focus,
textarea:active,
textarea:focus {
    border: none;
    border-bottom: 1px solid #aa8453;
}
table,
th,
tr,
td {
    border: 1px solid #f8f5f0;
}
th,
tr,
td {
    padding: 10px;
}
input[type="radio"],
input[type="checkbox"] {
    display: inline;
    margin-right: 5px;
}
input[type="submit"] {
    font-weight: 300;
    font-family: 'Roboto', sans-serif;
    text-transform: uppercase;
    background: #333;

    padding: 8px 24px;
    margin: 0;
    position: relative;
    font-size: 15px;
    letter-spacing: 2px;
}
.alert-success {
    background: transparent;
    color: #fff;
    border: 1px solid #aa8453;
    border-radius: 0px;
}
/* placeholder */
::-webkit-input-placeholder {
    color: lightslategray;
    font-size: 15px;
    font-weight: 300;
    font-style: italic;
}
:-moz-placeholder {
    color: lightslategray;
    font-style: italic;
}
::-moz-placeholder {
    color: lightslategray;
    opacity: 1;
    font-style: italic;
}
:-ms-input-placeholder {
    color: lightslategray;
    font-style: italic;
}
/* blockquote */
blockquote {
    padding: 45px;
    display: block;
    position: relative;
   
    overflow: hidden;
    margin: 35px 0;
    font-family: 'Bodoni Moda', serif;
    font-style: italic;
}
blockquote p {
    font-family: inherit;
    margin-bottom: 0 !important;
    color: inherit;
    width: 100%;
    position: relative;
    z-index: 3;
}
blockquote p {
    margin-bottom: 0;
    font-size: 18px;
}
blockquote p a {
    color: inherit;
}
blockquote cite {
    display: inline-block;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    position: relative;
    padding-left: 60px;
    border-color: inherit;
    line-height: 1;
    margin-top: 22px;
    font-style: normal;
    font-weight: 300;
}
blockquote cite:before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 5px;
    width: 45px;
    height: 1px;
    border-top: 1px solid;
    border-color: inherit;
}

/* ======= Helper style ======= */
.mt-0 {
    margin-top: 0 !important;
}
.mt-15 {
    margin-top: 15px !important;
}
.mt-20 {
    margin-top: 20px !important;
}
.mt-30 {
    margin-top: 30px !important;
}
.mt-60 {
    margin-top: 60px !important;
}
.mt-90 {
    margin-top: 90px !important;
}
.mb-0 {
    margin-bottom: 0 !important;
}
.mb-10 {
    margin-bottom: 10px !important;
}
.mb-15 {
    margin-bottom: 15px !important;
}
.mb-20 {
    margin-bottom: 15px !important;
}
.mb-30 {
    margin-bottom: 30px !important;
}
.mb-40 {
    margin-bottom: 40px !important;
}
.mb-45 {
    margin-bottom: 45px !important;
}
.mb-60 {
    margin-bottom: 60px !important;
}
.mb-90 {
    margin-bottom: 90px !important;
}
.pb-0 {
    padding-bottom: 0 !important;
}
.no-padding {
    padding: 0 !important;
}
/* important */
.o-hidden {
    overflow: hidden;
}
.position-re {
    position: relative;
}
.full-width {
    width: 100%;
}
.bg-img {
    background-size: cover;
    background-repeat: no-repeat;
}
.bg-fixed {
    background-attachment: fixed;
}
.pattern {
    background-repeat: repeat;
    background-size: auto;
}
.bold {
    font-weight: 500;
}
.count {
    font-family: 'Roboto', sans-serif;
}
.valign {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.v-middle {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 0;
    -webkit-transform: translate(0%, -50%);
    transform: translate(0%, -50%);
}
.v-bottom {
    position: absolute;
    width: 100%;
    bottom: 5%;
    left: 0;
    -webkit-transform: translate(0%, -5%);
    transform: translate(0%, -5%);
}
.js .animate-box {
    opacity: 0;
}
:root {
    scroll-behavior: auto;
}
/* background & color */
.bg-darkbrown {
    background: #14100c;
}
.bg-lightbrown {
    background: #f2efeb;
}
.bg-lightbrown2 {
    background: #fbf8f4;
}
.bg-darkbrown p {
    color: #aba59f;
}
.color-1 {
    color: #fff;
}
.color-2 {
    color: #625c56;
}
.color-3 {
    color: #14100c;
}
/* star - white  */
.star {
    position: relative;
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 0.9em;
    margin-right: 0.9em;
    margin-bottom: 2em;
    border-right: 0.3em solid transparent;
    border-bottom: 0.7em solid #fff;
    border-left: 0.3em solid transparent;
    /* Controlls the size of the stars. */
    font-size: 8px;
}
.star:before,
.star:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    top: 0.6em;
    left: -1em;
    border-right: 1em solid transparent;
    border-bottom: 0.7em solid #fff;
    border-left: 1em solid transparent;
    transform: rotate(-35deg);
}
.star:after {
    transform: rotate(35deg);
}
/* star rating  */
.star-rating {
    position: relative;
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 0.9em;
    margin-right: 0.9em;
    margin-bottom: 2em;
    border-right: 0.3em solid transparent;
    border-bottom: 0.7em solid #ffd27d;
    border-left: 0.3em solid transparent;
    /* Controlls the size of the stars. */
    font-size: 8px;
}
.star-rating:before,
.star-rating:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    top: 0.6em;
    left: -1em;
    border-right: 1em solid transparent;
    border-bottom: 0.7em solid #ffd27d;
    border-left: 1em solid transparent;
    transform: rotate(-35deg);
}
.star-rating:after {
    transform: rotate(35deg);
}
/* hr style */
hr {
    margin-top: 5px;
    margin-bottom: 15px;
    border: 0;
}
hr.border-1 {
    border-top: 1px solid rgba(170, 132, 83, 0.001);
}
hr.border-2 {
    border-top: 1px solid rgba(170, 132, 83, 0.001);
    border-width: 1px !important;
    opacity: 0.1;
}
/* hr */
hr {
    margin-top: 5px;
    margin-bottom: 15px;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
}

/* mouse button scroll  */
.mouse {
    position: absolute;
    bottom: 40px;
    z-index: 99;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    display: block
}
.mouse .mouse-icon {
    display: block;
    width: 26px;
    height: 50px;
    border: 1px solid #fff;
    border-radius: 15px;
    cursor: pointer;
    position: relative;
    text-align: center;
    -webkit-transition: .3s all ease-in-out;
    -o-transition: .3s all ease-in-out;
    transition: .3s all ease-in-out;
}
.mouse .mouse-wheel {
    height: 6px;
    margin: 2px auto 0;
    display: block;
    width: 6px;
    background-color: #fff;
    border-radius: 50%;
    -webkit-animation: 1.6s ease infinite wheel-up-down;
    -moz-animation: 1.6s ease infinite wheel-up-down;
    animation: 1.6s ease infinite wheel-up-down;
}
.mouse:hover .mouse-icon {
    border-color: #fff
}
@keyframes wheel-up-down {
    0% {
        margin-top: 2px;
        opacity: 0;
    }
    30% {
        opacity: 1;
    }
    100% {
        margin-top: 20px;
        opacity: 0;
    }
}


/* ======= Selection style ======= */
::-webkit-selection {
    color: #fff;
    background: #14100c;
}
::-moz-selection {
    color: #fff;
    background: #14100c;
}
::selection {
    color: #fff;
    background: #14100c;
}


@-webkit-keyframes rotate {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}
@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

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


/* ======= Navbar style ======= */
.navbar {
    position: relative;
    margin-top: 0;
    left: 0;
    top: 0;
    width: 100%;
    background: #fbf8f4;
    z-index: 99;
    padding-right: 0;
    padding-left: 0;
    padding-top: 0;
    padding-bottom: 0;
    height: 81px;
}


.navbar-toggler-icon {
    background-image: none;
}
.navbar .navbar-toggler-icon,
.navbar .icon-bar {
    color: #333;
}
.navbar .navbar-nav .nav-link {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin: 1px;
    -webkit-transition: all .4s;
    transition: all .4s;
    padding-right: 12px;
    padding-left: 12px;
    color: #333;
}
.navbar .navbar-nav .nav-link:hover {
    color: #aa8453;
}
.navbar .navbar-nav .active {
    color: #aa8453 !important;
}
.navbar .navbar-nav .active i {
    color: #aa8453;
}
.nav-scroll {
   
    padding: 15px 0;

    top: -125px;
    left: 0;
    width: 100%;
    -webkit-transition: -webkit-transform .5s;
    transition: -webkit-transform .5s;
    transition: transform .5s;
    transition: transform .5s, -webkit-transform .5s;
    -webkit-transform: translateY(100px);
    transform: translateY(100px);
    border: none;
    margin-top: 0;
}
.nav-scroll .navbar-nav .logo {
    padding: 15px 0;
}

.nav-scroll .logo-img {
    width: 150px;
}
.nav-scroll .logo-img {
    margin-bottom: 0px;
}
.nav-scroll .logo-wrapper .logo h2 {
    font-family: 'Bodoni Moda', serif;
    font-size: 24px;
    font-weight: 800;
    display: block;
    width: 100%;
    position: relative;
    margin-bottom: 0;
    text-transform: uppercase;
}
.nav-scroll .logo-wrapper .logo span {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-size: 9px;
    color: #aa8453;
    font-weight: 400;
    letter-spacing: 6px;
    display: block;
    margin-top: 0px;
    line-height: 1.5em;
    text-transform: uppercase;
    padding-left: 4px;
}

.dropdown .nav-link i {
    padding-left: 0px;
    font-size: 8px;
}
.navbar .dropdown-menu {
    max-height: 80px; /* Set maximum height for the dropdown menu to 80% of viewport height */
    overflow-y: auto; /* Enable vertical scrolling */
    pointer-events: auto;
}

.navbar .dropdown-menu .dropdown-item {
    padding: 7px 0;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 500;
    position: relative;
    transition: all .4s;
    background-color: transparent;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.navbar .dropdown-menu .dropdown-item span {
    display: block;
    cursor: pointer;
}
.navbar .dropdown-menu .dropdown-item i {
    padding: 13px 0 0 5px;
    font-size: 8px;
    float: right;
}
.navbar .dropdown-menu .dropdown:hover > .dropdown-item,
.navbar .dropdown-menu .dropdown-item.active,
.navbar .dropdown-toggle::after {
    display: none;
}
.navbar .dropdown-menu li {
   border-bottom: 1px dashed rgba(170, 132, 83, 0.1);
}
.navbar .dropdown-menu li:last-child {
   border-bottom: none;
}
.navbar .dropdown-menu .dropdown-menu.pull-left {
    top: 0;
    left: auto;
    right: 100%;
}

@media (max-width: 767px) {
    .floutlogo {
        font-size: 1.5rem; /* Adjust the size as needed */
    }
    #logoWrapper{
        margin-left: -70px;
    }
    .hometopsection{
        margin-top: -40px;
    }
    .unique-caption{
        padding-right: 0px;
    }
    .smallshifter{
        padding-top: 500px; 
        padding-bottom: 500px;
    }
    .navbar .navbar-collapse {

        background: whitesmoke;

    }
    .custom_alert_box{
        max-width: 95%;
    }
    .logo-header{
        left: 5px;
    }

    .services .item.right .caption.padding-left {
        padding-right: 20px;

    }
    .services .item .caption.padding-left {
        padding-left: 20px;
        
    }
    .adjustLeftMargin {
        margin-left: 0px;
    }
    .navbar {
        padding-left: 0px;
        padding-right: 0px;
      
        padding-top: 0px;
        padding-bottom: 0px;
        z-index: 10000;
    }
    
    .logo-wrapper {
        float: left;
        padding: 26px 15px;
    }
    .nav-scroll .logo-wrapper {
        padding: 26px 15px;
        background-color: transparent;
    }
    .nav-scroll .logo-img {
        width: 150px;
    }
    .navbar .logo {
        text-align: left;
        margin-left: 0px;
    }
    /*.nav-scroll .logo {}*/
    .logo-img {
        margin-bottom: 0px;
        width: 150px;
    }
    .navbar button {
        margin-right: 0px;
        outline: none !important;
        background: transparent;
        margin-top: 10px;
        border: none;
    }
    .navbar button:hover {
        background: transparent;
    }
    .navbar button:active,
    .navbar button:focus,
    .navbar button:hover {
        background: transparent;
        outline: none;
        color: transparent !important;
    }
    .navbar .container {
        max-width: 100%;
        padding: 0;
    }
    .navbar .nav-link {
        margin: 0px auto !important;
    }
    .navbar .navbar-nav .nav-link {
        font-size: 20px;
    }  
    .navbar .dropdown-menu .dropdown-item {
        padding: 0 15px;
        font-size: 13px;
        line-height: 40px;
    }
    .navbar .dropdown-menu .dropdown-item.dropdown-toggle {
        font-weight: 500;
    }
    .navbar .dropdown-submenu .dropdown-toggle::after {
        right: 15px;
        font-size: 13px;
    }
    .navbar .dropdown-submenu:hover > .dropdown-toggle::after {
        transform: rotate(0deg);
    }
    .navbar .dropdown-submenu .dropdown-toggle.show::after {
        transform: rotate(90deg);
    }
    .navbar .dropdown-menu {
        border: none;
        padding: 0;
        border-radius: 0;
        margin: 0;
        background: whitesmoke;
    }
    .navbar .dropdown-submenu .dropdown-menu {
        margin: 0;
        padding: 0 0 0 20px;
    }
    .navbar .dropdown-menu li a {
        padding: 0 15px;
    }
    .navbar .navbar-nav .nav-link {
        padding-right: 0px;
        padding-left: 0px;
    }
    
    .navbar .navbar-collapse {
        max-height: 450px;
        overflow: auto;
        background: whitesmoke;
        text-align: left;
        padding: 20px;
    }

    .navbar {
        margin-top: 0;
    }
    #logoWrapper{
        margin-left: -70px;
    }
    #owlCarousel {
        max-width: 300px; /* Set the desired width */
    }
    #indextitle {
        font-size: 32px;
    }
}
@media (min-width: 768px) and (max-width: 991px) {

    #logoWrapper{
        margin-left: -70px;
    }
    .hometopsection{
        margin-top: -40px;
    }
    .unique-caption{
        padding-right: 0px;
    }
    .smallshifter{
        padding-top: 500px; 
        padding-bottom: 500px;
    }
    .navbar .navbar-collapse {

        background: whitesmoke;

    }
    .custom_alert_box{
        max-width: 95%;
    }
    .logo-header{
        left: 5px;
    }

    .services .item.right .caption.padding-left {
        padding-right: 20px;

    }
    .services .item .caption.padding-left {
        padding-left: 20px;
        
    }
    .adjustLeftMargin {
        margin-left: 0px;
    }
    .navbar {
        padding-left: 0px;
        padding-right: 0px;
      
        padding-top: 0px;
        padding-bottom: 0px;
        z-index: 10000;
    }
    
    .logo-wrapper {
        float: left;
        padding: 26px 15px;
    }
    .nav-scroll .logo-wrapper {
        padding: 26px 15px;
        background-color: transparent;
    }
    .nav-scroll .logo-img {
        width: 150px;
    }
    .navbar .logo {
        text-align: left;
        margin-left: 0px;
    }
    /*.nav-scroll .logo {}*/
    .logo-img {
        margin-bottom: 0px;
        width: 150px;
    }
    .navbar button {
        margin-right: 0px;
        outline: none !important;
        background: transparent;
        margin-top: 10px;
        border: none;
    }
    .navbar button:hover {
        background: transparent;
    }
    .navbar button:active,
    .navbar button:focus,
    .navbar button:hover {
        background: transparent;
        outline: none;
        color: transparent !important;
    }
    .navbar .container {
        max-width: 100%;
        padding: 0;
    }
    .navbar .nav-link {
        margin: 0px auto !important;
    }
    .navbar .navbar-nav .nav-link {
        font-size: 20px;
    }  
    .navbar .dropdown-menu .dropdown-item {
        padding: 0 15px;
        font-size: 13px;
        line-height: 40px;
    }
    .navbar .dropdown-menu .dropdown-item.dropdown-toggle {
        font-weight: 500;
    }
    .navbar .dropdown-submenu .dropdown-toggle::after {
        right: 15px;
        font-size: 13px;
    }
    .navbar .dropdown-submenu:hover > .dropdown-toggle::after {
        transform: rotate(0deg);
    }
    .navbar .dropdown-submenu .dropdown-toggle.show::after {
        transform: rotate(90deg);
    }
    .navbar .dropdown-menu {
        border: none;
        padding: 0;
        border-radius: 0;
        margin: 0;
        background: whitesmoke;
    }
    .navbar .dropdown-submenu .dropdown-menu {
        margin: 0;
        padding: 0 0 0 20px;
    }
    .navbar .dropdown-menu li a {
        padding: 0 15px;
    }
    .navbar .navbar-nav .nav-link {
        padding-right: 0px;
        padding-left: 0px;
    }
    
    .navbar .navbar-collapse {
        max-height: 450px;
        overflow: auto;
        background: whitesmoke;
        text-align: left;
        padding: 20px;
    }

    .navbar {
        margin-top: 0;
    }
}
@media (min-width: 992px) {
    .unique-item {
        flex-direction: row;
        justify-content: center;
    }
    .unique-caption {
        padding-right: 40px;
    }

    #contentPageLinker {
        margin-top: -200px;
    }
    .custom_alert_box{
        max-width: 60%;
    }
    .moveleft {
        margin-left: 580px;
    }


    .adjustLeftMargin {
        margin-left: 90px;
    } 
    .logo-header{
        left: 30px;
    }
    .navbar .dropdown-menu {
        display: block;
        opacity: 0;
        visibility: hidden;
        -webkit-transform: translateY(20px);
        transform: translateY(20px);
        width: 100%;
        padding: 15px;
        border-radius: 0;
        border: 0;
 
        -webkit-transition: all .3s;
        transition: all .3s;
    }
    .navbar .dropdown-menu .dropdown-menu {
        left: calc(100% + 5px);
        top: -10px;
        right: auto;
        min-width: 100%;
        transform: translateY(0);
    }
    .navbar .dropdown:hover > .dropdown-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }  
}

/* ======= Services style  ======= */
.services {
    position: relative;
}
.services .item {
    position: relative;
}
.services .item:last-child {
    margin-bottom: 20px;
}



.services .item .caption {
    background: #fbf8f4;
    position: absolute;
    left: 0;
    top: 50%;
    width: 50%;
    padding: 20px 45px;
    -ms-transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
}
.services .item.right .caption {
    left: auto;
    right: 0;
    background: #fbf8f4;
}
.services .item .caption.padding-left {
    padding-left: 45px;
}
.services .item.right .caption.padding-left {
    padding-right: 45px;
}
.services .item .title {
    line-height: 1.2em;
    font-family: 'Bodoni Moda', serif;
    font-size: 30px;
    font-weight: 500;
    color: #14100c;
    margin-bottom: 20px;
}
.services .item p {
    color: #625c56;
}

/* ======= Pricing style ======= */
.pricing-card {
    background-color: #fbf8f4;
    margin-bottom: 30px;
}

.pricing-card .img {
    position: relative;
    overflow: hidden;
}

.pricing-card:hover .img img {
    -webkit-filter: none;
    filter: none;
    -webkit-transform: scale(1.05, 1.05);
    transform: scale(1.05, 1.05);
    -webkit-filter: brightness(75%);
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}

.pricing-card .img img {
    -webkit-transition: all .5s;
    transition: all .5s;
    /*-webkit-filter: brightness(100%);*/
}



.pricing-card .desc {
    padding: 40px;
} 
.pricing-card .name {
    line-height: 1;
    margin: 0;
    font-family: 'Bodoni Moda', serif;
    font-size: 24px;
    color: #14100c;
    margin-bottom: 30px;
}
.pricing-card .subname {
    line-height: 1;
    margin: 0;
    font-size: 12px;
    text-transform: uppercase;
    color: #625c56;
    margin-bottom: 20px;
    letter-spacing: 3px;
}
.pricing-card .amount {
    margin: 0;
    line-height: 1;
    font-family: 'Bodoni Moda', serif;
    font-size: 40px;
    margin-bottom: 20px;
    color: #aa8453;
}
.pricing-card .amount span {
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    color: #625c56;
}
.pricing-card .list {
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0px;
}
.pricing-card .list li {
  position: relative;
    font-size: 15px;
    padding-left: 30px;
}
.pricing-card .list li+li {
  margin-top: 5px;
}
.pricing-card .list li i {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    font-size: 15px;
    color: #aa8453;
}
.pricing-card .list li i.unavailable {
    color: #625c56;
    font-family: 'Roboto', sans-serif;
}


/* ======= Accordion Box (for Faqs) style ======= */
.accordion-box {
    position: relative;
    padding: 0;
}
.accordion-box .block {
    position: relative;

    border-radius: 0px;
    overflow: hidden;
    /*margin-bottom: 15px;*/
    margin-bottom: 5px;
    
}
.accordion-box .block.active-block {
    background-color: transparent;
  
}
.accordion-box .block:last-child {
    margin-bottom: 0;
}
.accordion-box .block .acc-btn {
    position: relative;
    font-family: 'Roboto', sans-serif !important; 
    font-size: 18px;
    line-height: 30px;
    font-weight: 500;
    cursor: pointer;
    /*padding: 20px 30px;*/
    padding-left: 60px;
    transition: all 500ms ease;
}
.accordion-box .block .acc-btn.size-20 {
    font-size: 18px;
}
.accordion-box .block .acc-btn .count {
    color: #aa8453;
    padding-right: 3px;
}
.accordion-box .block .acc-btn:before {
    position: absolute;
    left: 35px;
    /*top: 22px;*/
    height: 30px;
    font-size: 13px;
    font-weight: normal;
    color: #aa8453;
    line-height: 30px;
    content: "\e64b";
    font-family: "Themify";
    transition: all 500ms ease;
}
.accordion-box .block .acc-btn.active {
    background-color: lightgoldenrodyellow;
}
.accordion-box .block .acc-btn.active:before {
    font-family: 'Themify';
    content: "\e648";
}
.accordion-box .block .acc-content {
    position: relative;
    display: none;
}
.accordion-box .block .content {
     /*padding: 30px 20px 20px 20px;*/
     padding: 30px 20px 20px 20px;
    position: relative;
    background-color: transparent;
}
.accordion-box .block .acc-content.current {
    display: block;
}
.accordion-box .block .content .text {
    display: block;
    position: relative;
    top: 0px;
    display: block;
}

/* ======= Contact style ======= */
/* maps */
.google-maps {
    width: 100%;
    height: 550px;
    display: block;
    border: none;
}
.map {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}
.contact-form {
    width: 100%;
    display: block;
    padding: 60px 30px 30px 30px;
    position: relative;
    z-index: 1;
}

/* info box */
.info-box .item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 30px;
}
.info-box .item .icon {
    color: #aa8453;
    margin-right: 15px;
    background: #f2efeb;
    width: 60px;
    height: 60px;
    text-align: center;
    padding-top: 17px;
    border-radius: 100%;
}
.info-box .item .icon:before {
    font-size: 27px;
    font-weight: 400;
}
.info-box .item h5 {
    color: #333;
    margin-bottom: 0px;
    font-size: 17px;
    margin-top: 10px;
}
.info-box .item h6 {
    color: #333;
    margin-bottom: 0px;
    font-size: 22px;
}
.info-box .item p {
    font-size: 15px;
    margin-bottom: 0;
}


/* ======= 404 Page style ======= */
.notfound {
    /* min-height: 84vh; */
    min-height: calc(100vh - 125px);
    height: auto;
    position: relative;
    background-blend-mode: overlay;
    background: rgba(0, 0, 0, .4);
    background-image: url("../img/slider/2.jpg");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: #fff;
}
.notfound .item {
    background: transparent;
    border: 1px solid rgba(170, 132, 83, 0.5);
    padding: 30px 15px;
}
.notfound h6 {
    color: #fff;
    font-size: 15px;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
}
.notfound h3 {
    font-size: 45px;
    color: #fff;
    position: relative;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 0px;
}
.notfound h2 {
    font-size: 45px;
    color: #fff;
    position: relative;
    margin-bottom: 5px;
}
.notfound h2 span {
    color: #aa8453;
}
.notfound h1 {
    font-size: 180px;
    margin-bottom: 0px;
    position: relative;
    color: #aa8453;
    line-height: 1em;
}
.notfound p {
    color: #fff;
    font-size: 15px;
}
/* notfound form */
.notfound form {
    margin-top: 30px;
    position: relative;
}
.notfound form input {
    width: 100%;
    padding: 15px 50px 15px 15px;
    background-color: transparent;
    border: 1px solid rgba(255,255,255,0.6);
    border-radius: 0px;
    color: #fff;
    margin-bottom: 15px;
    outline: none;
}
.notfound form input:active,
.notfound form input:focus {
    border: 1px solid #fff;
}
.notfound form input::placeholder {
    color: #fff;
}
.notfound form button {
    background-color: #aa8453;
    padding: 12px 25px;
    border-radius: 0px;
    color: #fff;
    border: 0;
    position: absolute;
    top: 4px;
    right: 4px;
    cursor: pointer;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 500;
    outline: none;
    text-transform: uppercase;
    letter-spacing: 2px;
}
.notfound form button:hover {
    background-color: #fff;
    color: #14100c;
    outline: none;
}

.error-form {
    position: relative;
    max-width: 520px;
    margin: 50px auto 0;
}
.error-form form {
    position: relative;
}
.error-form .form-group {
    position: relative;
    margin: 0;
}
.error-form .form-group input[type="text"],
.error-form .form-group input[type="search"],
.error-form .form-group input[type="email"] {
    position: relative;
    width: 100%;
    line-height: 30px;
    padding: 20px 60px 20px 30px;
    height: 70px;
    display: block;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    background: #f4f4f4;
    color: #14100c;
    border-radius: 7px;
    border: 1px solid #f4f4f4;
    transition: all 300ms ease;
}
.error-form .form-group input[type="text"]:focus,
.error-form .form-group input[type="email"]:focus,
.error-form .form-group input[type="search"]:focus {
    border-color: #f4f4f4;
}
.error-form .form-group input::-webkit-input-placeholder {
    color: #f4f4f4;
}


/* ======= Buttons style ======= */
/* button 1 */
.button-1 {
  display: inline-block;
  height: 40px;
  border-color: gray; border-width: 1px; border-style: solid;
  padding: 6px 26px 12px 26px;
  border-radius: 10px;
  background-color: #007BFF;
  color: #f8f8f8;
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
}
.button-1:hover {
  cursor: pointer;
  background-color: #87AFC7; /* Slightly darker shade of blue */
  transform: translateY(-3px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* button 2 */
.button-2 {
  display: inline-block;
  height: auto;
  padding: 12px 26px;
  background-color:#87CEFA;
 font-size: 13px;
  line-height: 20px;
  font-weight: 500;
  text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
  text-decoration: none;
  border-radius: 3px;

}
.button-2:hover {
  cursor: pointer;
  background-color: #87AFC7; /* Slightly darker shade of blue */
  transform: translateY(-3px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}


/* button 3 */
.button-3 {
  display: inline-block;
  height: auto;
  padding: 12px 26px;
  border-color: gray; border-width: 1px; border-style: solid;
  border-radius: 0px;
  background-color: #87CEFA;
  -webkit-transition: border-color 400ms ease, color 400ms ease, background-color 400ms ease;
  transition: border-color 400ms ease, color 400ms ease, background-color 400ms ease;
  font-size: 13px;
  line-height: 20px;
  font-weight: 500;
  text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.button-3:hover {
    cursor: pointer;
    background-color: #87AFC7; /* Slightly darker shade of blue */
    transform: translateY(-3px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}


/* button 4 */
.button-4 {
  display: inline-block;
  height: auto;
  padding: 12px 26px;
  border-color: gray; border-width: 1px; border-style: solid;
  border-radius: 0px;
  background-color: #87CEFA;
  -webkit-transition: border-color 400ms ease, color 400ms ease, background-color 400ms ease;
  transition: border-color 400ms ease, color 400ms ease, background-color 400ms ease;
  font-size: 13px;
  line-height: 20px;
  font-weight: 500;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.button-4:hover {
    cursor: pointer;
    background-color: #87AFC7; /* Slightly darker shade of blue */
    transform: translateY(-3px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}


/* button link */
.link-btn {
    display: inline-block;
    position: relative;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 2px;
}
a.link-btn span {
    margin-right: 5px;
    font-size: 13px;
}
.link-btn.blck {
    color: #14100c;
}
.link-btn i {
    margin-left: 3px;
    font-size: 15px;
}
.link-btn:before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 1px;
    background-color: #aa8453;
    -webkit-transition: all ease 0.4s;
    transition: all ease 0.4s
}
.link-btn:hover::before {
    width: 100%
}

/* styles gallery */

.stylesColor {
    color: #14100c;
}


/* Override other styles */
html,
body {
    font-family: 'Roboto', sans-serif !important;
    min-width: 300px;
    color: #333;
}