<footer class="footer-new">
  <div class="container jagaran-container">
    <div class="row custom-row">
      <div class="col-lg-3 custom-padding">
        <div class="contact-details">
          <h3> <span> {{__('Editorial')}} </span>  </h3>
          <p>{{__('Editor and Publisher')}} : {{__('Sompadok & Prokasok')}}</p>
          <p>{{__('Executive Editor')}} : {{__('Nirbahi Sompadok')}}</p>
          <p>{{__('Message editor')}} : {{__('Barta Sompadok')}}</p>
        </div><!--/.contact-details-->
        <ul class="social-icon footer-icon footer-icon-2">
		
		@foreach ($social_links->sortBy('id') as $social_link)
          <li><a target="_blank" href="{{ $social_link->link}}" class="{{$social_link->name}}"><i class="{{$social_link->icon}}"></i></a></li>
         @endforeach
        </ul><!--/.social-icon-->
      </div><!--/.col-lg-3-->
      <div class="col-lg-3 custom-padding">
        <div class="contact-details">
          <h3> <span> {{__('Office 1')}} </span>  </h3>
          <ul class="footer-address-ul">
            <li>
              <span class="size-w-3">
                <i class="fa fa-home" aria-hidden="true"></i>
              </span>
              <span class="size-w-4">
              {{__('Office Address')}}
              </span>
            </li>
            <li>
              <span class="size-w-3">
                <i class="fa fa-phone" aria-hidden="true"></i>
              </span>
              <span class="size-w-4">
              {{__('Mobile Number')}}
              </span>
            </li>
            <li>
              <span class="size-w-3">
                <i class="fa fa-envelope-o" aria-hidden="true"></i>
              </span>
              <span class="size-w-4">
                {{ $gs->email }}
              </span>
            </li>
            <li>
              <span class="size-w-3">
                <i class="fa fa-internet-explorer" aria-hidden="true"></i>
              </span>
              <span class="size-w-4">
                {{ route('frontend.index')}}
              </span>
            </li>
          </ul>
        </div><!--/.contact-details-->
      </div><!--/.col-md-4-->


      <div class="col-lg-3 custom-padding">
        <div class="contact-details">
          <h3> <span> {{__('Office 2')}} </span>  </h3>
          <ul class="footer-address-ul">
            <li>
              <span class="size-w-3">
                <i class="fa fa-home" aria-hidden="true"></i>
              </span>
              <span class="size-w-4">
              {{__('Address 2')}}
              </span>
            </li>
            <li>
              <span class="size-w-3">
                <i class="fa fa-phone" aria-hidden="true"></i>
              </span>
              <span class="size-w-4">
           {{__('Mobile Number')}}
              </span>
            </li>
            <li>
              <span class="size-w-3">
                <i class="fa fa-envelope-o" aria-hidden="true"></i>
              </span>
              <span class="size-w-4">
               {{ $gs->email }}
              </span>
            </li>
            <li>
              <span class="size-w-3">
                <i class="fa fa-internet-explorer" aria-hidden="true"></i>
              </span>
              <span class="size-w-4">
                {{ route('frontend.index')}}
              </span>
            </li>
          </ul>
        </div><!--/.contact-details-->
      </div><!--/.col-md-3-->
      <div class="col-lg-3 custom-padding">
        <div class="contact-details">
          <h3> <span> {{__('We are on the Map')}} </span>  </h3>
        </div>
        <div class="footer-widget-map">
          
		  {!! $gs->google_map !!}
		  
        </div>
      </div><!--/.col-lg-3-->
    </div><!--/.row-->
  </div><!--/.container-->
</footer><!--/.footer-new-->
<div class="footer">
  <div class="container custom-container">
    <div class="row custom-row footer-bottom-row">
        <div class="col-md-8 footer-copy-text">
          <p>{{__('Footer Credite')}}</p>
        </div>
   <div class="col-md-4">
    <div class="design-link">
        <span class="label-text">সকল কারিগরী সহযোগিতায়:</span>
        
        <a href="https://www.creativedesign.com.bd/" target="_blank" title="Creative Design" class="dev-link">
            <img src="/assets/images/logo/creativedesign.png" alt="Creative Design Logo">
            <span class="company-name">ক্রিয়েটিভ ডিজাইন</span>
        </a>
    </div>
</div>

<style>
    /* মেইন বক্স ডিজাইন */
    .design-link {
        display: flex;
        align-items: center;       /* লেখা ও লোগো মাঝখানে রাখে */
        justify-content: flex-start; /* বাম দিকে রাখে (প্রয়োজনে center বা flex-end দিন) */
        gap: 8px;                  /* মাঝখানের গ্যাপ */
        font-family: 'SolaimanLipi', Arial, sans-serif;
    }

    /* "সকল কারিগরী সহযোগিতায়" টেক্সট */
    .design-link .label-text {
        color: #ffffff !important; /* ধবধবে সাদা */
        font-weight: bold;         /* লেখা মোটা */
        font-size: 16px;           /* ফন্ট সাইজ */
        text-shadow: 0px 0px 1px rgba(0,0,0,0.3); /* হালকা শ্যাডো যাতে ক্লিয়ার দেখায় */
    }

    /* লিংকের ডিজাইন */
    .design-link .dev-link {
        display: flex;
        align-items: center;
        text-decoration: none;
        gap: 5px;
    }

    /* লোগো ডিজাইন */
    .design-link .dev-link img {
        height: 24px;              /* লোগোর উচ্চতা */
        width: auto;
        vertical-align: middle;
        margin-top: -2px;          /* টেক্সটের সাথে লেভেল ঠিক করার জন্য */
    }

    /* "ক্রিয়েটিভ ডিজাইন" টেক্সট */
    .design-link .company-name {
        color: #ffffff !important; /* ধবধবে সাদা */
        font-weight: bold;         /* লেখা মোটা */
        font-size: 18px;           /* এই লেখাটি একটু বড় */
        line-height: 1;
    }

    /* হোভার এফেক্ট */
    .design-link .dev-link:hover .company-name {
        color: #ffcc00 !important; /* মাউস নিলে হলুদ হবে */
        text-decoration: underline;
    }

    /* মোবাইল রেস্পন্সিভ */
    @media (max-width: 767px) {
        .design-link {
            justify-content: center; /* মোবাইলে মাঝখানে দেখাবে */
            margin-bottom: 15px;
        }
    }
</style>
    </div><!--/.custom-row-->
  </div><!--/.custom-container-->
</div><!--/.footer-->