.contact-section {
 padding: 4rem 2rem;
}

.inside-cs {
 display: flex;
 gap: 20px;
 justify-content: space-between;
}

.ics-left {
 width: 40%;
 padding: 1rem;
}

.ics-right {
 width: 55%;
 padding: 3rem;
 display: flex;
 flex-direction: column;
 background: #d1cfcf;
 row-gap: 20px;
 border-radius: 33px;
}

.ics-right h2 {
 font-family: 'Space Grotesk';
 font-size: 43px;
 text-transform: capitalize;
}

.row input,
textarea {
 flex: 1;
 margin: 1rem 0;
 padding: 0.8rem;
 font-family: 'Space Grotesk';
 text-transform: capitalize;
 border-radius: 3px;
 border: 1px solid;
 outline: none;
 border: none;
}

.row {
 width: 100%;
 display: flex;
 gap: 20px;
}

form {
 width: 100%;
}

button {
 background-color: transparent;
 border: none;
 margin-top: 1rem;
}

.ics-left p {
 font-family: roboto;
 line-height: 24px;
}

.contact-info {
 padding: 4rem 2rem;
}

.cic-icon img {
 width: 3.5rem;
}

.cic-icon {
 padding: 0.8rem;
 background: aliceblue;
 border-radius: 50%;
}

.c-info-card {
 width: 25%;
 padding: 2rem 1rem;
 background: rebeccapurple;
 border-radius: 20px;
 position: relative;
}

.cic-up {
 display: flex;
 align-items: center;
 gap: 21px;
 font-family: 'Space Grotesk';
 font-size: 26px;
 line-height: 26px;
 text-transform: capitalize;
 padding-bottom: 1rem;
 margin-bottom: 1rem;
 border-bottom: 1px solid;

}

.c-info-card p {
 font-family: 'Roboto';
 line-height: 24px;
}

.c-info-card p a {
 text-decoration: none;
 text-transform: capitalize;
 color: #000000;
 display: flex;
 justify-content: center;
 align-items: center;
 gap: 10px;
}

.socials {
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: flex-start;
 font-weight: 500;
}

.socials p a i {
 font-size: 20px;
}

.inside-contact-info {
 display: flex;
 gap: 23px;
 align-items: stretch;
}

.a-icon {
 position: absolute;
 right: -3px;
 bottom: -1px;
 padding: 1rem;
 background: #fff;
 border-radius: 20px;
 font-size: 31px;
}

.a-icon::before {
 content: '';
 position: absolute;
 height: 20px;
 width: 20px;
 background-color: red;
}

@media (max-width: 1024px) {
 .contact-info {
  padding: 4rem 1rem;
 }

 .inside-contact-info {
  gap: 20px;
 }

 .cic-up {
  gap: 20px;
  font-size: 25px;
  line-height: 25px;
 }

 .cic-icon {
  padding: 0.5rem;
 }

 .cic-icon img {
  width: 3rem;
 }
}

@media (max-width: 900px) {
 .inside-contact-info {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
 }

 .contact-info {
  padding: 4rem 2rem;
 }

 .c-info-card {
  width: 100%;
 }

 .ics-left {
  width: 100%;
 }

 .ics-right {
  width: 100%;
  padding: 3rem 4rem;
 }

 .contact-section {
  padding: 4rem 3rem;
 }

 .upper-footer {
  padding: 1rem;
  gap: 2rem;
 }

 .wcuc-left {
  row-gap: 0px;
  width: 100%;
 }
}

@media (max-width: 768px) {
 .inside-faq-section {
  padding: 2rem;
  flex-direction: column;
 }

 .faq-l {
  width: 100%;
 }

 .faq-r {
  width: 100%;
 }

 .quotes {
  font-size: 60px;
 }

 .testimonial-section {
  padding: 2rem;
 }

 .testi-slide {
  row-gap: 10px;
 }
}

@media (max-width: 550px) {
 .contact-section {
  padding: 4rem 2rem;
 }

 .contact-info {
  padding: 4rem 1rem;
 }

 .inside-contact-info {
  display: flex;
  flex-direction: column;
 }

 .ics-right h2 {
  font-size: 35px;
 }

 .row {
  flex-direction: column;
  gap: 5px;
 }

 .ics-right {
  width: 100%;
  padding: 2.5rem 2rem;
 }

 .ics-right h2 {
  font-size: 35px;
 }

 .row {
  flex-direction: column;
  gap: 5px;
 }

 .wcuc-right {
  top: 23rem;
 }

 .upper-footer {
  padding: 0;
 }

 .content-card {
  padding: 1rem 0;
 }

}

@media (max-width: 375px) {
 .wcuc-right {
  top: 25rem;
 }

 .ics-right {
  width: 100%;
  padding: 1.5rem 1rem;
 }

 .ics-right h2 {
  font-size: 30px;
 }

 .f-about img {
  width: 13rem;
 }

 .contact-section {
  padding: 2rem 1.5rem;
 }

 .inside-faq-section {
  padding: 2rem 1.5rem;
 }
}

@media (max-width: 310px) {
 .social-icons {
  width: 30%;
 }

 .wcuc-right {
  top: 30rem;
 }

 .testi-slide {
  padding: 1.5rem;
 }

 .tab-num {
  gap: 10px;
 }

 .contact-section {
  padding: 1.5rem 1rem;
 }

 .ics-left {
  width: 100%;
 }

 .testimonial-section {
  padding: 1rem;
 }
}