/* Blog Footer & Contact Section CSS */
:root {
  --primary-color: #ef6224;
  --text-color: #121212;
  --description-text-color: #595959;
}

/* Common Components */
.com-title-disc-cover h2 {
  font-size: 40px;
  color: var(--text-color);
  font-weight: 700;
  margin-top: 10px;
  margin-bottom: 12px;
}

.com-title-disc-cover h2 span {
  color: var(--primary-color);
}

.com-title-disc-cover p {
  font-size: 16px;
  color: var(--description-text-color);
}

.com-title-disc-cover p span {
  font-weight: 600;
  color: #080808;
}

.com-btn {
  background-color: var(--primary-color);
  color: #ffffff !important;
  font-weight: 500;
  padding: 10px 16px;
  font-size: 15px;
  border-radius: 9px;
  display: inline-block;
}

.com-btn img {
  width: 25px !important;
}

/* Talk Business Section */
.talk-business-main {
  width: 100%;
  display: inline-block;
  padding-bottom: 85px;
}

.talk-business-cov .com-title-disc-cover {
  text-align: left;
}

.talk-business-cov {
  width: 100%;
  display: inline-block;
  text-align: center;
  background: url(../images/talk-business-bg.png) top center no-repeat;
  background-size: 100% 100%;
  padding-top: 100px;
  padding-bottom: 100px;
}

.talk-business-cov .com-title-disc-cover p {
  font-weight: 500;
  font-size: 20px;
  line-height: 26px;
  text-transform: uppercase;
  color: var(--primary-color);
  margin-bottom: 8px;
}

.talk-business-cov .com-title-disc-cover h2 {
  margin: 0;
}

.talk-business-form-wrap {
  display: flex;
  gap: 24px;
}

.talk-business-form-wrap .contact-form-wrap h4 {
  display: inline-block;
}

.talk-business-info {
  width: 50%;
  padding-top: 55px;
}

.talk-business-form {
  width: 50%;
  background: #ffffff;
  border: 1px solid #eeeceb;
  box-shadow: 5px 5px 10px 0px #0000001c;
  border-radius: 12px;
  padding: 30px;
  margin-top: -175px;
}

.talk-business-form h4 {
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
  margin-bottom: 24px;
  color: var(--text-color);
}

.talk-business-info .contact-info-text-cov p {
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  color: var(--description-text-color);
}

/* Contact Info Details */
.contact-info-detail-cover p {
  color: #595959;
  font-size: 16px;
}

.contact-info-detail-inr {
  width: 100%;
  margin-bottom: 10px;
}

.contact-info-detail-inr a {
  display: inline-flex;
  width: 100%;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  gap: 15px;
}

.contact-info-detail-inr a p {
  color: #121212;
  font-size: 16px;
  margin: 0px;
  font-weight: 600;
}

/* What Happens Next */
.Whathappens-next-main {
  width: 100%;
  display: inline-block;
  padding-top: 80px;
}

.Whathappens-next-main h4 {
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;
  color: var(--text-color);
  margin-bottom: 16px;
}

.Whathappens-step-cov ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: inline-flex;
}

.Whathappens-step-cov ul li {
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  color: #595959;
  position: relative;
  padding-left: 30px;
}

.Whathappens-step-cov ul li:not(:last-child) {
  padding-right: 60px;
}

.Whathappens-step-cov ul li:not(:last-child)::before {
  content: "";
  width: 35px;
  height: 66px;
  background: url(../svg/arrow-step-design.svg) top center no-repeat;
  position: absolute;
  top: -2px;
  right: 19px;
}

.Whathappens-step-cov ul li span {
  font-weight: 400;
  font-size: 26px;
  line-height: 26px;
  color: #000000;
  position: absolute;
  top: 0;
  left: 0;
}

.talk-business-form .contct-attchfile-wrap .attectfile-cov {
  width: 65%;
}

/* Tell Us About You (CTA) */
.tellus-aboutyou-main {
  position: relative;
  margin-top: 150px;
  padding-top: 205px;
}

.tellus-aboutyou-cover {
  position: absolute;
  top: -118px;
  left: 0;
  right: 0;
  width: 100%;
}

.tellus-aboutyou-iner {
  display: inline-flex;
  width: 100%;
  background: url(../images/footer-bg-about.png) top center no-repeat;
  background-size: cover;
  padding: 25px 80px;
  border-radius: 30px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  flex-direction: row;
  min-height: 260px;
}

.tellus-aboutyou-cover-left {
  width: 65%;
}

.tellus-aboutyou-cover-left h6 {
  color: var(--primary-color);
  font-weight: 400;
  font-size: 20px;
  width: 100%;
  margin-bottom: 12px;
  text-transform: uppercase;
}

.tellus-aboutyou-cover-left h4 {
  color: #ffffff !important;
  font-weight: 700;
  width: 100%;
  font-size: 32px !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  /* Boost visibility if bg is dark */
}

.tellus-aboutyou-cover-right a {
  background-color: var(--primary-color);
  color: #ffffff !important;
  font-weight: 500;
  padding: 12px 20px;
  font-size: 16px;
  border-radius: 9px;
  display: inline-block;
}

/* Footer Main */
.footer-main-cover {
  display: inline-block;
  width: 100%;
  background: url(../images/world-map-image.png) center no-repeat;
  background-size: 72%;
}

footer {
  display: inline-block;
  width: 100%;
  padding-top: 80px;
  padding-bottom: 28px;
  background-color: #f8f8f8;
}

footer a {
  text-decoration: none !important;
}

footer a:hover {
  text-decoration: none !important;
  color: var(--primary-color) !important;
}

.footer-main-top {
  display: inline-flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  width: 100%;
  gap: 100px;
  border-bottom: 1px solid #dbdbdb;
  margin-bottom: 26px;
}

.footer-main-top-one {
  width: 35%;
  margin-bottom: 25px;
}

.footer-logo {
  width: 225px;
  margin-bottom: 15px;
}

.footer-main-top-one p {
  color: #595959;
}

.footer-main-top-two {
  width: 30%;
}

.footer-main-top-two ul,
.footer-main-top-three ul {
  list-style: none;
  padding: 0px;
  margin: 0px;
  margin-bottom: 35px;
}

.footer-main-top-two ul h3,
.footer-main-top-three ul h3,
.footer-main-mid h3,
.footer-main-top-one h3 {
  color: #121212;
  font-weight: 700;
  font-size: 20px;
}

.footer-main-top-two h3,
.footer-main-top-three h3 {
  display: inline-flex;
  width: 100%;
  align-items: center;
  gap: 10px;
}

.footer-main-top-two ul li,
.footer-main-top-three ul li {
  margin-top: 2px;
}

.footer-main-top-two ul li a,
.footer-main-top-three ul li a,
.footer-main-top-three ul li {
  color: #595959;
  font-size: 16px;
}

.footer-main-top-three {
  width: 25%;
}

.footer-main-mid {
  display: inline-block;
  width: 100%;
}

.footer-main-mid ul {
  display: inline-flex;
  width: 100%;
  padding: 0px;
  margin: 0px;
  justify-content: space-around;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  list-style: none;
  margin-top: 10px;
}

.footer-main-mid ul li img {
  width: 80%;
}

.footer-main-bot {
  display: inline-flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  margin-top: 28px;
  flex-direction: row-reverse;
}

.footer-main-bot p {
  color: #595959;
  margin: 0px;
  font-size: 16px;
}

.security-img-box img {
  height: 22px;
}

/* Follow Us / Social */
.follow-us-left-main-award {
  display: inline-flex;
  width: 100%;
  gap: 100px;
  border-bottom: 1px solid #dbdbdb;
  padding-top: 10px;
  padding-bottom: 32px;
}

.follow-us-left-cover-new {
  width: 56%;
}

.follow-us-left-cover-new ul {
  display: inline-flex;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 18px;
  margin-top: 0px;
}

.follow-us-left-cover-new ul li {
  margin-right: 10px;
}

.follow-us-left-cover-new ul h3 {
  width: 100%;
  color: #121212;
  font-weight: 700;
  font-size: 20px;
}

.follow-us-left-cover-new ul li a img {
  width: 30px;
  height: 30px;
}

.follow-us-left-cover-new a.com-btn {
  background-color: #ffffff;
  color: var(--primary-color) !important;
  border: 1px solid var(--primary-color);
  padding: 8px 13px;
  font-size: 15px;
  border-radius: 12px;
}

.get-in-touch-social-list ul {
  padding: 0px;
  margin: 0px;
  list-style: none;
}

.get-in-touch-social-list ul li {
  margin-top: 8px;
}

.get-in-touch-social-list ul li a {
  color: #595959;
  display: inline-flex;
  width: 100%;
  gap: 10px;
  align-items: center;
}

/* Mobile View Helper */
.mobile-view {
  display: none;
}

.desktop-view {
  display: block;
}

/* Form Styles */
.contact-form-wrap .form-group {
  margin-bottom: 24px;
}

.contact-form-wrap .form-group:last-child {
  margin-bottom: 0;
}

.contact-form-wrap .form-group input.form-control,
.contact-service-select .form-group select.form-control,
.form-group input.form-control,
.form-group select.form-select {
  padding: 21px 14px;
  height: 60px;
  font-weight: 400;
  font-size: 16px;
  line-height: normal;
  border-radius: 10px;
  border: 1px solid #e4e2e1;
  background-color: #ffffff;
  width: 100%;
  box-sizing: border-box;
}

.contact-form-wrap .form-group textarea.form-control,
.form-group textarea.form-control {
  height: 128px;
  resize: none;
  padding: 16px 14px;
  border-radius: 10px;
  border: 1px solid #e4e2e1;
  background-color: #ffffff;
  width: 100%;
  box-sizing: border-box;
}

.contact-form-wrap .form-group input::placeholder,
.contact-form-wrap .form-group textarea::placeholder {
  color: #b6b6b6;
  font-size: 16px;
}

/* Service Tags (simulate custom dropdown interaction or just list them nicely) */
.contact-service-main-wrap {
  padding-top: 24px;
  width: 100%;
  display: inline-block;
}

.contact-service-main-wrap h4 {
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  color: var(--text-color);
  margin-bottom: 10px;
}

.contact-service-main-wrap ul {
  padding: 0;
  margin: 0;
  list-style: none;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 10px 6px;
}

.contact-service-main-wrap ul li {
  border: 1px solid transparent;
  border-radius: 50px;
  padding: 6px 12px;
  background-color: #f3f5f9;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
  color: #595959;
}

.contact-service-main-wrap ul li:hover {
  background-color: #e9e9e9;
}

.contact-service-main-wrap ul li.active {
  border: 1px solid var(--primary-color);
  background-color: #ffffff;
  color: #080808;
}

/* Hide the default select if the tags are the interface, 
   OR if the select is the interface, hide the tags.
   Based on user screenshot, the tags were visible and messy.
   Let's style the tags properly as above. 
   And ensure the select box looks good too. 
*/
.contact-service-select {
  margin-bottom: 20px;
}

/* --- Responsive Styles --- */

/* Tablet & medium screens */
@media (max-width: 1199px) {

  .ecommerce-development-footer-main .tellus-aboutyou-cover-left h6 br,
  .tellus-aboutyou-cover-left h4 br {
    display: none;
  }

  .follow-us-left-cover-new ul li a img {
    width: 26px;
    height: 26px;
  }

  .follow-us-left-cover-new a.com-btn {
    font-size: 14px;
  }

  .footer-main-top {
    gap: 15px;
  }

  .talk-business-form .contct-attchfile-wrap .attectfile-cov {
    width: 100%;
  }

  .footer-main-top-two,
  .footer-main-top-three {
    width: 25%;
  }

  .footer-main-top {
    gap: 95px;
  }
}

@media (max-width: 991px) {
  .contact-info-detail-inr a {
    justify-content: center;
  }

  .contact-info-detail-cover {
    display: inline-flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    margin-top: 30px;
  }

  .tellus-aboutyou-main {
    margin-top: 50px;
    padding-top: 55px;
  }

  .tellus-aboutyou-cover {
    position: relative;
    top: 0px;
    margin-bottom: 35px;
  }

  .footer-main-top-one {
    width: 40%;
  }

  .footer-main-top {
    gap: 25px;
  }

  .follow-us-left-main-award {
    flex-wrap: wrap;
    gap: 30px;
  }

  .talk-business-form-wrap {
    flex-wrap: wrap;
  }

  .talk-business-info {
    width: 100%;
    padding-top: 0;
  }

  .talk-business-form {
    width: 100%;
    margin-top: 50px;
  }

  .talk-business-cov {
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .Whathappens-step-cov ul li:not(:last-child)::before {
    width: 30px;
    height: 55px;
    background-size: 30px;
  }

  .Whathappens-step-cov ul li:not(:last-child) {
    padding-right: 30px;
  }

  .talk-business-info .contact-info-text-cov p {
    text-align: center;
  }

  .Whathappens-next-main h4 {
    text-align: center;
  }

  .Whathappens-step-cov ul {
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .Whathappens-step-cov ul li:not(:last-child) {
    padding-right: 0;
  }

  .Whathappens-step-cov ul li:not(:last-child)::before {
    display: none;
  }

  .Whathappens-step-cov ul li {
    padding-left: 20px;
  }

  .Whathappens-step-cov ul li span {
    font-size: 16px;
    top: -2px;
  }

  .Whathappens-next-main {
    padding-top: 10px;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .tellus-aboutyou-iner {
    flex-direction: column;
    padding: 30px 20px;
    gap: 20px;
    text-align: center;
  }

  .tellus-aboutyou-cover-left,
  .tellus-aboutyou-cover-right {
    width: 100%;
  }

  .desktop-footer-main {
    display: none;
  }

  .mobile-footer-main {
    display: inline-flex;
    width: 100%;
    text-align: center;
    flex-wrap: wrap;
    justify-content: center;
  }

  .contct-attchfile-wrap {
    flex-wrap: wrap;
  }

  footer {
    padding-bottom: 20px;
  }

  .security-img-box {
    text-align: center;
    margin-bottom: 15px;
    border-bottom: 1px solid #e9e9e9;
    width: 100%;
    padding-bottom: 18px;
  }

  .footer-main-bot {
    margin-top: 20px;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
  }

  .mobile-footer-usflinkpripoli {
    display: inline-flex;
    width: 100%;
    text-align: left;
    border-top: 1px solid #e9e9e9;
    border-bottom: 1px solid #e9e9e9;
    padding-top: 25px;
    margin-top: 35px;
  }

  .footer-main-cover .footer-main-mid {
    border-bottom: 1px solid #e9e9e9;
    padding-top: 14px;
    padding-bottom: 25px;
  }

  .mobile-footer-usflinkpripoli ul {
    text-align: left;
  }

  .mobile-footer-usflinkpripoli .footer-main-top-two {
    justify-content: space-between !important;
  }

  .mobile-footer-usflinkpripoli .footer-main-top-three {
    justify-content: space-between !important;
  }

  .footer-main-cover .get-in-touch-social-list ul li {
    margin-top: 1px;
  }

  .footer-main-cover .follow-us-left-cover-new {
    width: 100%;
  }

  .footer-main-cover .footer-main-top-two ul,
  .footer-main-cover .footer-main-top-three ul {
    margin-bottom: 22px;
  }

  .footer-main-cover .get-in-touch-social-list {
    width: 100%;
    border-top: 1px solid #e9e9e9;
    border-bottom: 1px solid #e9e9e9;
    padding-top: 25px;
    padding-bottom: 25px;
    margin-bottom: 25px;
  }

  .footer-main-cover .follow-us-left-cover-new ul {
    justify-content: center;
  }

  .footer-main-cover .get-in-touch-social-list ul li a {
    justify-content: center;
  }

  .footer-main-cover .footer-main-top-two h3,
  .footer-main-cover .footer-main-top-three h3 {
    justify-content: center;
  }

  .footer-main-cover .footer-main-top-two,
  .footer-main-cover .footer-main-top-three {
    width: 100%;
    display: inline-flex;
    justify-content: center;
    text-align: center;
  }

  .footer-main-top-two,
  .footer-main-top-three {
    width: 100%;
  }

  .footer-main-top-two ul,
  .footer-main-top-three ul {
    margin-bottom: 20px;
  }
}