@extends('out.pages_master')
@section('styles')
<style type="text/css">
 @media (min-width: 992px) {
    body {
        margin: 0;
        margin-left: 6%;
        margin-right: 6%;
        overflow-x: hidden;
        font-family: Poppins, sans-serif;
        font-size: 1.4rem;
        line-height: 1.6;
        color: #666;
        background: #fff;
    }
}
      @media only screen and (max-width: 449px) {
        .logo img {
          margin-left: -10px;
        }
        .logo {
          min-width: 1.4rem;
          margin-right: 2rem;
        }
        #search {
          display: block;
          width: 100%;
          min-height: 2.7rem;
        }
      }
      .header a:not(.btn) {
        color: #6a6868;
      }
      /* border-radius: 13px;
    margin-left: 13px;*/

      #scroll-top i {
        color: #fff;
        opacity: 1;
        background-color: #ef8b1a;
        border: 2px solid #e77513;
      }
      .category p {
        font-size: 12px;
      }
      .header-bottom {
        border-bottom: 1px solid #fff0f0;
      }
      .product-list .btn-product {
    background-color: transparent;
    border: 2px solid #171817;
    color: #333;
   
}
.product-list .btn-product:hover {
    background-color: #f39b09;
    border-color: #f39b09;
    color: #fff;
}
.banner .banner-content {
    position: relative;
    z-index: 1;
    text-align: center;
}
.btn-primary.btn-outline {
    color: #696a6c;
    border-color: #c1c3c6;
    background-color: transparent;
}
.btn-primary.btn-outline:hover, .btn-primary.btn-outline:active, .btn-primary.btn-outline:focus {
    background-color: #272625;
    color: #fff;
    border-color: #272625;
}
.toolbox .toolbox-show select {
    padding-left: 1.3rem;
    padding-right: 1.8rem;
    width: 10.4rem;
}
@media (max-width: 575px) {
    .toolbox .left-sidebar-toggle span {
        display: inline-block;
        padding-left: 5px;
    }
    .toolbox-right{
      display: none;
    }
}
@media (min-width: 575px) {
.sticky-link i, .cart-dropdown .sticky-link i {
   display: none;
  }
  .sticky-link.search-toggle p {
    display: none;
}
}

.back-btn {
    color: orange;
    margin-top: 0px;
}
.back-btn:hover{
  color:orange;
}
@media screen and (min-width: 550px) {
  #back-btn{
    display: none !important;
  }
}
.card-header a:hover {
    color: #2d2e2f;
}
.card-header a:hover::after {
    color: #272829;
}
.card-header a.collapse {
    color: #2e3031;
}
    .category-dropdown > a {
    background-color: #f1f1f12b;
    min-width: 28rem;
    padding: 1.9rem 1.8rem 1.7rem 2rem;
    letter-spacing: -0.025em;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    text-transform: uppercase;
  }
  .title {
    font-weight: 600;
    line-height: 1.4;
    font-size: 2.5rem;

}
p {
    font-size: 14px;
    line-height: 1.25 rem;

}
.questions p {
    margin-bottom: 2.8rem;
}
@media (min-width: 767px) {

}
@media (max-width: 499px) {
 
}
@media (min-width: 768px) {
    .col-md-12 {
        max-width: 100%;
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        padding-left: 80px;
    }
}


/*LOGIN CONVERTED TO CONTACT FORM*/

        .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-item .nav-link.active, .nav-tabs .nav-item:hover .nav-link {
        color: #f08237;
        }
        .tab-nav-underline .nav-item.show .nav-link::after, .tab-nav-underline .nav-item .nav-link.active::after, .tab-nav-underline .nav-item:hover .nav-link::after {
            border-color: #f08237;
            -webkit-transform: scaleX(1);
            transform: scaleX(1);
        }
        .text-primary {
        color: #767a7e !important;
        }
        .sign-in-text {
    display: flex;
    align-items: center;
    text-align: center;
    color: #333; /* Adjust color if needed */
}

.sign-in-text::before,
.sign-in-text::after {
    content: "";
    flex: 1;
    border-bottom: 1px solid #ccc; /* Line color */
    margin: 0 10px; /* Adjust spacing */

}
.sign-in-text {
    color: #797575;
}
.btn-primary {
    color: #fff;
    border-color: #f08237;
    border-radius: 15px;
    background-color: #f08237;
}
.btn-primary:hover, .btn-primary:active, .btn-primary:focus {
    color: #fff;
    border-color: #010101;
    background-color: #010101;
}

.login-popup #sign-up p {

    line-height: 1.84;
    font-size: 14px;
}
#scroll-top i {
    color: #fff;
    background-color: #000000;
    border: 2px solid #000000;
    border-radius: 50%;
}

.social-icon-border-color .social-icon.social-facebook {
    color: #0a4ba8;
    border-color: #0a4ba8;
    width: 90px;
    font-weight: 600;
    border-radius: 6px;
    font-size: 14px;
    border-width: 2px;
}
#scroll-top svg circle {
    stroke: #f08237;
}
.social-icon {
    font-size: 1.4rem;
    width: 32px;
    height: 32px;
    margin: 2px 10px 2px 0;
    line-height: 28px;
    border: 2px solid #ccc;
    border-radius: 0%;
    transition: color 0.4s, border 0.4s, background-color 0.4s;
    text-align: center;
}

.social-icon-border-color .social-icon:hover.social-facebook {
    background-color: #0a4ba8;
    color: #fff;
}
.login-popup .tab-pane a:not(.btn):hover {
    text-decoration: none;
}
.login-popup .form-checkbox a {
    font-size: 14px;
    color: #606362;
}
.nav-tabs {
    color: #c0c8c6;
}
.social-icon-border-color .social-icon.social-google {
    background-color: #f10818;
    border-color: #f10818;
    color: #fff;
    border-width: 2px;
    width: 90px;
    font-weight: 600;
    border-radius: 6px;
    font-size: 14px;
}
.social-icon-border-color .social-icon:hover.social-google {
    border-color: #f10818;
    color: #f10818;
    background-color: #fff;
}

@media (min-width: 575px) {
.container, .container-fluid {
    width: 100%;
    padding-left: 60px;
    padding-right: 20px;
    margin-left: auto;
    margin-right: auto;
}
.tab-pane p {
    margin-bottom: 0;
    font-size: 200%;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 2;
    padding-bottom: 50px;
}
.login-popup {
    max-width: 100rem;
    padding: 3.3rem 5rem 2.6rem;
   
}
}

   
</style>
@endsection
@section('content')
        <!-- Start of Main -->
               <!-- Start of Main -->
            <!-- Start of Main -->
        <main class="main">
            <!-- Start of Breadcrumb -->
            <nav class="breadcrumb-nav">
                <div class="container">
                    <ul class="breadcrumb bb-no">
                        <li><a href="/">Home</a></li>
                        <li><a href="javascript:void(0)">Contact</a></li>
                       
                    </ul>
                </div>
            </nav>
            <!-- End of Breadcrumb -->

            <div class="container">
                <div class="d-flex justify-content-between align-items-center">
                <!-- Back Button -->
                <a class="back-btn d-flex align-items-center" id="back-btn" onclick="goBack()">
                    <i class="w-icon-long-arrow-left"></i>
                    <div>Back</div>
                </a>
              
               </div>
            </div>

            <div class="page-content become-a-vendor">

                <div class="container questions mt-2 mt-lg-10 mb-5 mb-lg-9"  style="background-color:#f3fafb; padding-top: 60px;padding-bottom: 60px;">
                    
                    <h2 class="title title-center">Contact</h2>
                    <div class="row">
                        <div class="col-md-12">
                            
                            <p>234Deals customer support team is always ready to answer your questions and provide all the necessary assistance.</p>

                            <p>234Deals customer care department - you can email your questions, suggestions, and comments at <a href="mailto:support@234deals.com" style="text-decoration: none;color: orange;">support@234deals.com</a>.</p>

                            <p>If you found any bugs or have security-related questions, please get in touch with our team at <a href="mailto:security@234deals.com" style="text-decoration: none;color: orange;">security@234deals.com</a> </p>
                               
                         
                        </div>
                      
                    </div>

                </div>
                <!-- End of Container -->
                 <div class="container">
                    <div class="login-popup">
                       
                        <div class="tab tab-nav-boxed">
                          @include('alert')
                            <form id="submitContact" method="post" action={{ route('save-contact-us') }}>
                                @csrf
                                <div class="tab-content">
                                    <div class="tab-pane active" id="sign-in">
                                    
                                        <h2 class="title title-center" style="padding-bottom: 50px;">We love to hear from you</h2>
                                    
                                        <div class="form-group">
                                            <label>Email address *</label>
                                            <input type="text" class="form-control" name="email" id="username" placeholder="Enter your email..." required>
                                        </div>
                                        <div class="form-group mb-0">
                                            <label>Message *</label>
                            
                                        <textarea class="form-control" id="message" name="message" rows="5" placeholder="Enter your message..." style="margin-bottom: 60px; resize: vertical;" required></textarea>

                                        </div>

                                    
                                        <a href="#" id="submitContactBtn" class="btn btn-primary">Send Now</a>
                                        <div class="form-checkbox d-flex align-items-center justify-content-between">
                                    
                                        
                                        </div>
                                    </div>
                                
                                </div>
                            </form>

                        </div>
                    </div>
                </div>

              
            </div>
            <!-- End of Page Content -->
        </main>
        <!-- End of Main -->
@include('out.footer')
@endsection