body{
  overflow-x: hidden;

  background-color: #14213D;
}
.container {
  max-width: 100vw;
}

#templatemo_nav_top i {
  color: #23D366;
  font-size: 20px;
}

#templatemo_nav_top {
  min-height: 40px;
  background-color: #2C363E;
  padding: 25px 20px;
}


#templatemo_nav_top .info {
  margin-left: 11px;
}




#templatemo_nav_top .social img {
  margin-right: 10px;
}

#templatemo_nav_top .info i {
  color: #f39c12;
}

.navbar {
  color: white;
  background-color: #14213D;
}

#templatemo_nav_top {
  font-size: 20px;
}
#templatemo_nav_main img {
  width: 250px !important;
  margin-left: 11px !important ;
}

#templatemo_main_nav a:hover {
 color:#f39c12 !important;
}


#templatemo_nav_main {
        z-index: 1000; /* Ensure the navbar stays above other elements */
    }
    @media (min-width: 992px) {
      .whatsapp-icon {
        
          display: none;
      }
  }
  @media (max-width: 992px) {
    #templatemo_nav_main i {
      
        display: none;
    }
}
  #templatemo_main_nav .whatsapp i {
    color: #23D366;
    
  }
#custom-toggler {
  margin-right: 14px;
  width: 41px;
  height: 35px;
  color: transparent; /* Hide the default icon */
  background-image: url("../img/Frame\ 13.svg"); /* Replace 'path/to/your/image.png' with the path to your image */
  background-size: cover; /* Cover the entire button */
  background-repeat: no-repeat; /* Prevent the image from repeating */
}




#template-mo-zay-hero-carousel .carousel-item  {
  min-height: 0rem !important;
  position: relative; /* Ensure relative positioning for absolute overlay */
}

.carousel-item img {
  width: 100%;
  height: 750px;
}
@media (max-width: 782px) {
  .carousel-item img {
    width: 50%;
    height: 200px;
  }
}


#text {
  font-size: 30px;
  margin-top: 10px;
}
#items {
  font-size: 50px;
  margin-top: 10px;
}
#latest {
  background-color: #FCA311!important; 
  border-color: #FCA311;
  text-decoration: none;
  background-color:#FCA311!important; 
  border-radius: 0%;
  outline: none; /* Remove the blue border */
}

/* Overlay for image */
.carousel-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(rgba(0, 0, 0, 0.5),
  rgba(0, 0, 0, 0.5)), url("url_of_image");
}

/* Center the carousel caption */
.carousel-caption {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1; /* Ensure caption appears on top of overlay */
}
@media (max-width: 992px) {
  .carousel-caption {
    text-align: center;
}

/* Adjust font sizes for smaller screens */
#items {
  font-size: 35px!important;
}

#text {
  font-size: 21px;
  margin-top: 14px;
}

.carousel-caption .btn {
  font-weight: 600;
  width: 146px;
    font-size: 13px;
    padding:9px;
    margin-top: 4px;
   
    white-space: normal; /* Allow button text to wrap */
}
}

/* Adjust text alignment for small screens */
@media (max-width: 768px) {
  .carousel-caption {
      text-align: center;
  }

  /* Adjust font sizes for smaller screens */
  #items {
    font-size: 13px!important;
  }

  #text {
    font-size: 10px;
    margin-top: -6px;
  }

  .carousel-caption .btn {
      font-size: 13px;
      padding: 5px;
      margin-top: -6px;
     
      white-space: normal; /* Allow button text to wrap */
  }
}
/* Additional styles for button */
.btn-primary {
    border-radius: 9px;
   border:4px solid #FCA311 !important;
    background-color: transparent !important;
    color: white !important;
    transition: background-color 0.3s, border-color 0.3s;
}

.btn-primary:hover {
    background-color: #ffa6004e !important;
}
span{
    color: #FCA311 ;
}



.fantastic{
  margin-bottom: 80px!important;
    color: #cccccc;
}
#fantastic1 { 
  background-color: #14213D!important;
}
#fantastic { 
    background-color: #14213D!important;
  }

  .row>*{
    margin-bottom: 20px;
    padding: 0px 4px !important;
  }
  @media (max-width: 768px) {
    .img-fantastic {
      margin-bottom: 10px;
  }
}

#offer {
 
    background-color: #14213D;
    
}

#offer h1 {
  margin-top: 60px;
    color: white;
    font-size: 36px;
    margin-bottom: 20px;
}

#offer p {
    color: #cccccc !important;
    font-size: 18px;
    margin-bottom: 30px;
}

@media (max-width: 991.98px) {
    .form1 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (max-width: 575.98px) {
    .form1{
        flex: 0 0 100%;
        max-width: 50%;
    }
}

.img-fluid {
  height: 100%;
}
  
.form-label {
  font-size: 20px;
  color: orange;
}

#button1 {
border-radius: 0px;
  background-color: orange !important;
  color: white !important;    width: 100% !important;
  
}
#form {
  background-image: url("../img/building.png");
  background-color: rgba(0, 0, 0, 0.5); /* Adjust the last value (0.5) for opacity */
  background-blend-mode: overlay; /* Helps blend the background color with the image */
  background-size: cover;
  background-repeat: no-repeat;
  
}
@media (max-width: 768px) {
  .container-bg {
      padding: 30px; /* Adjust padding for smaller screens */
  }
  .form-label {
      color: #FCA311; /* Override label color */
      font-size: 16px; /* Adjust label font size */
  }
  .form-control {
      width: 100%; /* Make form controls full width */
  }
  @media (min-width: 768px) and (max-width: 992px) {

      .container-bg {
          padding: 30px; /* Adjust padding for smaller screens */
      }
      .form-label {
          font-size: 18px; /* Adjust label font size for medium screens */
      }
      .form-control {
          width: 100%; /* Make form controls full width */
      }
  }
}
@media (max-width: 991.98px) {
  .form1 {
      flex: 0 0 50%;
      max-width: 50%;
  }
}

@media (max-width: 575.98px) {
  .form1{
      flex: 0 0 100%;
      max-width: 50%;
  }
}
.about {
  background-color: #14213D !important;
  color: white;
  padding-bottom: 40px;
  text-align: center; /* Center align all contents */
}

.about h1 {
  padding-top: 50px;
  padding-bottom: 15px  ;
  margin-bottom: 30px;
}

.about h3 {
  color: orange !important;
}

.paragrph {
  display: flex;
  flex-direction: column;
  align-items: center; /* Center align items horizontally */
}

.para1 {
  max-width: 600px;
}
footer {
    position: relative;
  width: 100%;
  height: auto;
  /* padding-top: 80px; */
  background-color: #DCDCDD;}

.container1 {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  /* padding: 0 12px; */
}

.wrapper {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: wrap;
}

.wrapper .footer-widget {
  width: calc(20% - 30px);
  margin: 0 15px 50px;
  /* padding: 0 12px; */
}

.wrapper .footer-widget:nth-child(1) {
  width: calc(40% - 50px);
  margin-right: 15px;
}

.wrapper .footer-widget .logo {
  margin-top: 20px;
  margin-bottom: 30px;
  vertical-align: middle;
}

.wrapper .footer-widget p {
  margin-bottom: 30px;
  font-size: 16px;
  line-height: 24px;
}

.wrapper .footer-widget .socials {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.wrapper .footer-widget .socials li {
  list-style: none;
}

.wrapper .footer-widget .socials li a {
  width: 44px;
  height: 44px;
  margin-right: 10px;
  color: #242C33;
  border-radius: 50%;
  font-size: 20px;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease-out;
}



.wrapper .footer-widget h6 {
  color: #585978;
  margin: 10px 0 35px;
  font-size: 20px;
  font-weight: 600;
}

.wrapper .footer-widget .links li {
  list-style: none;
}

.wrapper .footer-widget .links li a {
  color: #585978;
  font-size: 16px;
  text-decoration: none;
  text-transform: capitalize;
  line-height: 32px;
  transition: all 0.3s ease-out;
}

.wrapper .footer-widget .links li a:hover {
  color: #037ef3;
}

.copyright-wrapper {
  /* padding: 20px 0; */
  border-top: 1px solid rgba(88, 89, 120, 0.4);
}

.copyright-wrapper p {
  color: rgba(88, 89, 120, 0.6);
  font-size: 14px;
  font-weight: 500;
  text-align: center;
}

.copyright-wrapper p a {
  color: inherit;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s ease-out;
}

.copyright-wrapper p a:hover {
  color: #037ef3;
}

/* Let's write the media query */
@media (max-width: 992px) {
  .container {
    max-width: 960px;
  }

  .wrapper .footer-widget,
  .wrapper .footer-widget:nth-child(1) {
    width: calc(50% - 30px);
  }
}

@media (max-width: 768px) {
  .container {
    max-width: 720px;
  }

  .wrapper .footer-widget,
  .wrapper .footer-widget:nth-child(1) {
    width: 100%;
    margin: 0 10px 50px;
  }
}
/* Add this CSS for the icon */
.wrapper #tweets .tweet i {
  margin-right: 10px;
}

/* Additional styles for the tweet content */
.wrapper #tweets .tweet p {
  display: inline;
}

/* Additional styles for the icon */
.wrapper #tweets .tweet i {
  color: #1DA1F2; /* Twitter blue color */
}

/* Adjust the margin and other styles as needed */
@media (max-width: 768px) {
  .wrapper #tweets .tweet i {
    margin-right: 5px; /* Adjust based on your design */
  }
}
/* Additional styles for the photo */
.wrapper #photo .photo {
  display: flex;
  align-items: center;
}

.wrapper #photo .photo img {
  width: 120px; /* Increase the width of the photo */
  height: auto;
  margin-right: 15px; /* Increase the margin between the photo and the paragraph */
}

/* Additional styles for the paragraph */
.wrapper #photo .photo p {
  display: inline;
  margin: 0; /* Reset margin to remove any default spacing */
  /* padding: 0; Reset padding */
}

/* Adjust the width of the paragraph container */
.wrapper #photo .photo p {
  flex: 1; /* Let the paragraph take remaining space */
}

/* Adjust the margin and other styles as needed */
@media (max-width: 768px) {
  .wrapper #photo .photo img {
    width: 50px; /* Adjust based on your design */
  }
}
footer h6 {
  color: #14213D !important; /* Set color for h6 */
}

/* Style for links within the div with id "services" */
#services .links li a {
  color: #5F6368 !important; /* Set color for links */
}

/* Style for paragraph within the div with id "tweets" */
#tweets p {
  color: #989FA7 !important; /* Set color for paragraph */
}

/* Style for paragraph within the divs with id "logo" and "photo" */
#logo p,
#photo p {
  color: #242C33 !important; /* Set color for paragraph */
}

#whatsapp-container {
  color: transparent; /* Hide the default icon */

  background-image: url("../img/building.png");
  background-color: rgba(0, 0, 0, 0.5); /* Adjust the last value (0.5) for opacity */
  background-blend-mode: overlay;  
  background-size: cover;
  background-position: center;
  padding: 70px;
}

#whatsapp-container h1 {
  margin-bottom: 20px;
  color: white;
  text-align: center;
}
#whatsapp-container a {
text-decoration: none;
}


#whatsapp-container button {
 
  border-color: #23D366 !important;
  background-color: #25D366 !important; /* Change the button background color to green */
  color: white;
  display: block;
  margin: 0 auto;
}

#whatsapp-container button .whatsapp-icon {
  color: white; /* Set WhatsApp icon color to white */
}

.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  /* background-color: rgba(255, 255, 255, 0.8); */
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.preloader-inner {
  text-align: center;
}

.preloader img {
  width: 100px; /* Adjust size as needed */
  height: 100px; /* Adjust size as needed */
}

/*

TemplateMo 559 Zay Shop

https://templatemo.com/tm-559-zay-shop

---------------------------------------------
Table of contents
------------------------------------------------
1. Typography
2. General
3. Nav
4. Hero Carousel
5. Accordion
6. Shop
7. Product
8. Carousel Hero
9. Carousel Brand
10. Services
11. Contact map
12. Footer
13. Small devices (landscape phones, 576px and up)
14. Medium devices (tablets, 768px and up)
15. Large devices (desktops, 992px and up)
16. Extra large devices (large desktops, 1200px and up)
--------------------------------------------- */
/* Typography */
/* Nav */



/* General */
.logo { font-weight: 500 !important;}
.text-warning {  color: #ede861 !important;}
.text-muted { color: #bcbcbc !important;}
.text-success { color: #59ab6e !important;}
.text-light { color: #cfd6e1 !important;}
.bg-dark { background-color: #212934 !important;}
.bg-light { background-color: #e9eef5 !important;}
.bg-black { background-color: #1d242d !important;}
.bg-success { background-color: #59ab6e !important;}
.btn-success {
  background-color: #59ab6e !important;
  border-color: #56ae6c !important;
}
.pagination .page-link:hover {color: #000;}
.pagination .page-link:hover, .pagination .page-link.active {
  background-color: #69bb7e;
  color: #fff;
}
/* Nav */

#templatemo_main_nav a { color: #F0F0F0;
  #5F6368;
  ; font-size: 20px;}
#templatemo_main_nav  i { color: #23D366; font-size: 40px;}

#templatemo_main_nav a:hover { color: #69bb7e;}
#templatemo_main_nav .navbar .nav-icon { margin-right: 20px;}


@media (min-width: 576px) {
  .tempaltemo-carousel .h1 { font-size: 1em !important;}
}

/*// Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
  #templatemo_main_nav .navbar-nav {max-width: 450px;}
 }

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
  #templatemo_main_nav .navbar-nav {max-width: 550px;}
  #template-mo-zay-hero-carousel .carousel-item {min-height: 30rem !important;}
  .product-wap .h3, .product-wap li, .product-wap i, .product-wap p {font-size: 18px !important;}
  .product-wap .product-color-dot {
    width: 12px;
    height: 12px;
  }
}

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {}