/* extra */

/* contact-information */
:root {
 --ci-bg: linear-gradient(135deg, #1e1f26, #2b2f38);
 --ci-card-bg: rgba(255, 255, 255, 0.08);
 --ci-border: rgba(255, 255, 255, 0.15);
 --ci-text: #ffffff;
 --ci-muted: #b9c0cc;
 --ci-accent: #f75842;
 --ci-radius: 16px;
 --ci-blur: 14px;
 --ci-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

@media (prefers-color-scheme: light) {
 :root {
  --ci-bg: linear-gradient(135deg, #1e1f26, #2b2f38);
  --ci-card-bg: rgba(255, 255, 255, 0.08);
  --ci-border: rgba(255, 255, 255, 0.15);
  --ci-text: #ffffff;
  --ci-muted: #b9c0cc;
  --ci-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
 }
}

.contact-information {
 background: var(--ci-bg);
 backdrop-filter: blur(var(--ci-blur));
 padding: clamp(24px, 5vw, 30px) 0;
 color: var(--ci-text);
}

.contact-inf-container {
 width: 100%;
 margin: auto;
 padding-inline: clamp(16px, 4vw, 32px);

 display: flex;
 justify-content: center;
 align-items: stretch;
 gap: 1rem;
 flex-wrap: nowrap;
 overflow-x: auto;
 scroll-snap-type: x mandatory;
}

@media screen and (max-width: 1200px) {
 .contact-inf-container {
  display: flex;
  flex-direction: column;
 }
}

.contact-card {
 position: relative;
 background: var(--ci-card-bg);
 border: 1px solid transparent;
 border-radius: var(--ci-radius);
 backdrop-filter: blur(var(--ci-blur));
 padding: 16px 14px;
 margin-top: 10px;
 box-shadow: var(--ci-shadow);
 display: flex;
 flex-direction: column;
 gap: 6px;
 transition: transform 0.2s ease, box-shadow 0.2s ease;
 background-clip: padding-box;
 overflow: hidden;
}

.contact-card:hover {
 transform: translateY(-2px);
 box-shadow: 0 0 0 1px rgba(247, 88, 66, 0.9) inset,
  0 10px 28px rgba(247, 88, 66, 0.18);
}

.ci-icon {
 width: 42px;
 height: 42px;
 display: grid;
 place-items: center;
 border-radius: 12px;
 background: rgba(247, 88, 66, 0.15);
 color: var(--ci-accent);
 font-size: 1.3rem;
 border: 1px solid rgba(247, 88, 66, 0.4);
 transition: all 0.3s ease;
}
.contact-card:hover .ci-icon {
 background: var(--ci-accent);
 color: #fff;
}

.ci-label {
 font-size: 0.75rem;
 letter-spacing: 0.04em;
 text-transform: uppercase;
 color: var(--ci-muted);
}

.ci-value {
 font-size: 1rem;
 font-weight: 600;
 color: var(--ci-text);
}

.ci-value a {
 color: inherit;
 text-decoration: none;
}

.ci-value a:hover {
 color: var(--ci-accent);
 text-decoration: underline;
}

:root {
 --tc-primary: #f75842;
 --tc-primary-2: #ff7a5c;
 --tc-text: #1e2126;
 --tc-muted: #616b7a;
 --tc-bg: #fff;
 --tc-card: #ffffff;
 --tc-soft: #f8f9fb;
 --tc-radius-lg: 20px;
 --tc-radius: 12px;
 --tc-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
}

.main {
 position: relative;
 background: radial-gradient(
   800px 380px at 10% -10%,
   rgba(247, 88, 66, 0.18),
   transparent 60%
  ),
  linear-gradient(
   180deg,
   rgba(247, 88, 66, 0.2) 0%,
   rgba(247, 88, 66, 0.12) 35%,
   rgba(255, 255, 255, 1) 100%
  );
 background-repeat: no-repeat;
 margin-bottom: 0;
 margin-top: 10px;
 overflow: hidden;
}

.hero h1 {
 margin: 0 0 0.6rem;
 font-size: clamp(2rem, 6vw, 3.5rem);
 color: var(--tc-text);
 line-height: 1.1;
 letter-spacing: 0.2px;
}
.hero h1 span {
 color: var(--tc-text);
 font-weight: 600;
 opacity: 0.9;
}
.hero-description p {
 margin: 0 auto 1.4rem;
 max-width: 68ch;
 color: var(--tc-muted);
 line-height: 1.7;
}

.button {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 padding: 0.9rem 1.4rem;
 border-radius: 999px;
 background: linear-gradient(135deg, var(--tc-primary), var(--tc-primary-2));
 color: #fff;
 text-decoration: none;
 font-weight: 700;
 box-shadow: 0 10px 22px rgba(247, 88, 66, 0.28);
 transition: transform 0.06s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.button:hover {
 transform: translateY(-1px);
}
.button:active {
 transform: translateY(0);
}

.contact {
 padding: clamp(1.5rem, 4vw, 3rem) 0 clamp(2.5rem, 6vw, 4rem);
}
.contact-container {
 max-width: 1100px;
 margin: 0 auto;
 padding: 0 1rem;
}

.form {
 display: grid;
 grid-template-columns: 1fr;
 gap: 0;
 background: var(--tc-card);
 border-radius: var(--tc-radius-lg);
 box-shadow: var(--tc-shadow);
 overflow: hidden;
}
@media (min-width: 900px) {
 .form {
  grid-template-columns: 1.1fr 1fr;
 }
}

.contact-info {
 padding: clamp(1.5rem, 3vw, 2.25rem);
 background: radial-gradient(
   520px 280px at 100% -20%,
   rgba(247, 88, 66, 0.1),
   transparent 60%
  ),
  linear-gradient(180deg, rgba(247, 88, 66, 0.06), transparent 46%);
}
.contact-info .title {
 margin: 0 0 0.6rem;
 font-size: clamp(1.4rem, 2.4vw, 1.9rem);
 color: var(--tc-primary);
}
.contact-info .text {
 margin: 0 0 1.25rem;
 color: var(--tc-muted);
 line-height: 1.65;
}

.info {
 display: grid;
 gap: 0.9rem;
}
.information {
 display: grid;
 grid-template-columns: 28px 1fr;
 align-items: start;
 gap: 0.75rem;
}
.icon {
 color: var(--tc-primary);
 margin-top: 0.15rem;
}
.information p {
 margin: 0;
 color: var(--tc-text);
}

.social-media p {
 margin: 1rem 0 0.5rem;
 color: var(--tc-text);
 font-weight: 600;
}
.social-icons {
 display: flex;
 gap: 0.6rem;
}
.social-icons a {
 display: inline-grid;
 place-items: center;
 width: 36px;
 height: 36px;
 border-radius: 8px;
 background: linear-gradient(135deg, var(--tc-primary), var(--tc-primary-2));
 color: #fff;
 text-decoration: none;
 box-shadow: 0 6px 14px rgba(247, 88, 66, 0.25);
}

.contact-form {
 position: relative;
 padding: clamp(1.25rem, 3vw, 2rem);
 background: radial-gradient(
   240px 240px at 90% 20%,
   rgba(0, 0, 0, 0.06),
   transparent 60%
  ),
  linear-gradient(180deg, #e06e58 0%, #ffd6cf 100%);
}
.contact-form .circle {
 display: none;
}

#CommonEnquiry input,
#CommonEnquiry select,
#CommonEnquiry textarea {
 width: 100%;
 padding: 0.85rem 1rem;
 border-radius: 999px;
 border: 1.5px solid rgba(0, 0, 0, 0.08);
 outline: none;
 background: #fff;
 color: var(--tc-text);
 margin-bottom: 0.9rem;
 transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
#CommonEnquiry textarea {
 border-radius: 16px;
}
#CommonEnquiry input:focus,
#CommonEnquiry select:focus,
#CommonEnquiry textarea:focus {
 border-color: rgba(247, 88, 66, 0.6);
 box-shadow: 0 0 0 4px rgba(247, 88, 66, 0.15);
}
#CommonEnquiry button,
#CommonEnquiry [type="submit"] {
 background: linear-gradient(135deg, var(--tc-primary), var(--tc-primary-2));
 color: #fff;
 border: 0;
 border-radius: 999px;
 padding: 0.9rem 1.2rem;
 font-weight: 700;
 width: 100%;
 box-shadow: 0 10px 22px rgba(247, 88, 66, 0.28);
 cursor: pointer;
}

.big-circle {
 display: none;
}
a[href^="mailto:"],
a[href^="tel:"] {
 color: white;
 text-decoration: none;
}
a[href^="mailto:"]:hover,
a[href^="tel:"]:hover {
 text-decoration: underline;
}

.about {
 background: linear-gradient(180deg, #fff 0%, #fff5f3 100%);
 padding: clamp(3rem, 6vw, 5rem) 0;
 color: #1e2126;
 position: relative;
 overflow: hidden;
 margin-top: 0;
}

.about-container {
 display: grid;
 grid-template-columns: 1fr;
 gap: 2rem;
 align-items: center;
 max-width: 1100px;
 margin: 0 auto;
 padding: 0 1.2rem;
}

@media (min-width: 900px) {
 .about-container {
  grid-template-columns: 1.1fr 1fr;
  gap: 3rem;
 }
}

/*-----======= About us Section =======-----*/

.about-left span {
 background: var(--color-danger);
 padding: 0.5rem;
 display: inline;
 border-radius: 20px;
 position: relative;
}

.about-us::before {
 content: "";
 display: block;
 background: var(--color-danger);
 width: 0.9rem;
 height: 0.7rem;
 position: absolute;
 left: 40%;
 top: 30px;
 transform: rotate(45deg);
}

.about-us {
 display: inline-block;
 font-size: 0.95rem;
 letter-spacing: 0.05em;
 text-transform: uppercase;
 color: white;
 font-weight: 700;
 position: relative;
}

.about h2 {
 font-size: clamp(1.8rem, 4vw, 2.5rem);
 margin: 0.5rem 0 1rem;
 color: #1e2126;
 font-weight: 700;
}

.about p {
 font-size: 1rem;
 line-height: 1.75;
 color: #555;
 margin-bottom: 1.8rem;
 max-width: 55ch;
}

.button-btn {
 display: inline-block;
 padding: 0.9rem 1.6rem;
 border-radius: 999px;
 background: linear-gradient(135deg, #f75842, #ff7a5c);
 color: #fff;
 text-decoration: none;
 font-weight: 600;
 box-shadow: 0 10px 22px rgba(247, 88, 66, 0.25);
 transition: transform 0.2s ease, box-shadow 0.3s ease;
}

.button-btn:hover {
 box-shadow: 0 12px 28px rgba(247, 88, 66, 0.35);
 background: transparent;
 border: 1px solid var(--color-danger);
 color: var(--color-danger);
}

.about-rigth {
 position: relative;
 display: flex;
 justify-content: center;
 align-items: center;
}

.about-rigth iframe {
 width: 100%;
 height: 320px;
 border-radius: 12px;
 border: none;
 box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
 transition: transform 0.3s ease;
}

.about-rigth iframe:hover {
 transform: scale(1.02);
}

@media (min-width: 1000px) {
 .about-rigth iframe {
  height: 360px;
 }
}

/*-----======= Service Methodology Section =======-----*/

.service-container p a {
 display: inline;
 color: inherit;
 font-size: 1.1rem;
 color: #007bff;
}

.service {
 background: linear-gradient(180deg, #fff 0%, #fff5f3 100%);
 padding: clamp(2.5rem, 6vw, 5rem) 0;
 color: #1e2126;
 margin-top: -46px;
}

.service-container {
 max-width: 1100px;
 margin: 0 auto;
 padding: 0 1.2rem;
 display: grid;
 grid-template-columns: 1fr;
 gap: 2rem;
 align-items: start;
}

@media (min-width: 980px) {
 .service-container {
  grid-template-columns: 0.95fr 1.35fr;
  gap: 2.5rem;
 }
}

.service-left h2 {
 margin: 0 0 0.75rem;
 font-size: clamp(1.6rem, 3.8vw, 2.2rem);
 font-weight: 800;
}

/* .service-left img{
  width: 100%;
  display:block;
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(0,0,0,.08);
  margin: .75rem 0 1.25rem;
  object-fit: cover;
  aspect-ratio: 4 / 3;
} */

.service-left h3 {
 margin: 0.25rem 0 0.75rem;
 font-size: 1.1rem;
 letter-spacing: 0.02em;
 color: #f75842;
}

.btn-primary {
 display: inline-flex;
 align-items: center;
 gap: 0.55rem;
 margin: 0 0.6rem 0.6rem 0;
 padding: 0.7rem 1.05rem;
 border-radius: 999px;
 background: linear-gradient(135deg, #f75842, #ff7a5c);
 color: #fff;
 text-decoration: none;
 font-weight: 700;
 box-shadow: 0 10px 22px rgba(247, 88, 66, 0.25);
 transition: transform 0.15s ease, box-shadow 0.25s ease, opacity 0.2s ease;
 white-space: nowrap;
}
.btn-primary i {
 font-size: 1rem;
}
.btn-primary:hover {
 transform: translateY(-2px);
 box-shadow: 0 14px 28px rgba(247, 88, 66, 0.32);
}
.btn-primary:active {
 transform: translateY(0);
}

.service-rigth p {
 font-size: 1rem;
 line-height: 1.8;
 color: #535a66;
 margin: 0 0 1rem;
}

.service-rigth b {
 color: #1e2126;
}

/* .service-rigth a {
 color: #f75842;
 text-decoration: none;
 border-bottom: 1px dashed rgba(247, 88, 66, 0.45);
} */
.service-rigth a:hover {
 border-bottom-color: currentColor;
}

.service-rigth a[href^="http"]:after {
 content: "↗";
 font-size: 0.85em;
 margin-left: 0.25em;
 opacity: 0.65;
}

@media (min-width: 1100px) {
 .service-left {
  position: sticky;
  top: 90px;
 }
}

.container img {
 max-width: 100%;
 height: auto;
}

.services-header h1 {
 font-size: 2.75rem;
 margin-bottom: 3rem;
 color: var(--color-danger);
}


:root {
 --ft-brand: #f75842;
 --ft-brand-2: #ff7a5c;
 --ft-ink: #111827;
 --ft-muted: #5f6b7e;
 --ft-dark: #0f1623;
 --ft-line: #e9eef5;
 --ft-white: #fff;
}

.faq-testimonial {
 margin-top: -46px;
 padding: clamp(2rem, 5vw, 4rem) 0;
 background: linear-gradient(180deg, #fff 0%, #fff6f3 100%);
}

.faq-testi-container {
 max-width: 1100px;
 margin: 0 auto;
 padding: 0;
 display: grid;
 grid-template-columns: 1.15fr 0.85fr;
 gap: 0;
 border-radius: 22px;
 overflow: hidden;
 background: linear-gradient(90deg, #fff 0 60%, var(--ft-dark) 60% 100%);
 box-shadow: 0 20px 42px rgba(0, 0, 0, 0.12);
}

.faqs,
.testimonial-container {
 padding: clamp(1.25rem, 3vw, 1.75rem);
}

.faqs-header h2 {
 margin: 0 0 0.9rem;
 color: var(--ft-ink);
 font-size: clamp(1.5rem, 3.4vw, 2rem);
}
.testimonial-header h2 {
 margin: 0 0 0.9rem;
 color: #e7eaf6;
 font-size: clamp(1.5rem, 3.4vw, 2rem);
}

.faqs .faqs-container {
 display: grid;
 gap: 0.85rem;
}
.faq {
 position: relative;
 background: var(--ft-white);
 border: 1px solid var(--ft-line);
 border-radius: 14px;
 overflow: hidden;
 box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
 transition: border-color 0.2s, box-shadow 0.25s, transform 0.06s;
}
.faq:hover {
 transform: translateY(-1px);
 border-color: rgba(247, 88, 66, 0.35);
 box-shadow: 0 12px 28px rgba(247, 88, 66, 0.1);
}

.faq::before {
 content: "";
 position: absolute;
 inset: 0 auto 0 0;
 width: 4px;
 background: linear-gradient(180deg, var(--ft-brand), var(--ft-brand-2));
}

.faq-ans {
 position: relative;
 padding: 1rem 3rem 1rem 1rem;
 cursor: pointer;
}
.faq-ans h4 {
 margin: 0;
 color: var(--ft-ink);
 font-weight: 800;
 font-size: 1rem;
 line-height: 1.35;
}
.faq-ans p {
 margin: 0.55rem 0 0;
 color: #465268;
 line-height: 1.7;
 max-height: 0;
 opacity: 0;
 overflow: hidden;
 transition: max-height 0.35s ease, opacity 0.28s ease;
 border-top: 1px dashed var(--ft-line);
 padding-top: 0.75rem;
}

.faq-icon {
 position: absolute;
 right: 10px;
 top: 50%;
 transform: translateY(-50%) rotate(0);
 width: 28px;
 height: 28px;
 display: grid;
 place-items: center;
 border-radius: 50%;
 border: 1px solid rgba(247, 88, 66, 0.45);
 background: #fff;
 color: var(--ft-brand);
 pointer-events: none;
 transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
}
.faq-icon i {
 font-size: 14px;
}

.faq.open .faq-ans p {
 max-height: 520px;
 opacity: 1;
}
.faq.open .faq-ans h4 {
 color: var(--ft-brand);
 margin-bottom: 13px;
}
.faq.open .faq-icon {
 background: linear-gradient(135deg, var(--ft-brand), var(--ft-brand-2));
 color: #fff;
 border-color: transparent;
 transform: translateY(-50%) rotate(1deg);
}

.testimonial-container {
 color: #e7eaf6;
 margin-left: 28px;
}
.section__grid {
 display: flex;
 flex-direction: column;
 gap: 1rem;
}

.section__card {
 position: relative;
 background: rgba(255, 255, 255, 0.06);
 border: 1px solid rgba(255, 255, 255, 0.18);
 border-radius: 14px;
 padding: 1rem 0.95rem 1.05rem 2.75rem;
 box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
 transition: transform 0.15s, box-shadow 0.25s, border-color 0.2s;
}
.section__card:hover {
 transform: translateY(-2px);
 box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
 border-color: rgba(255, 255, 255, 0.28);
}

.section__card > span {
 position: absolute;
 left: 0.9rem;
 top: 0.85rem;
 width: 30px;
 height: 30px;
 display: grid;
 place-items: center;
 border-radius: 9px;
 background: linear-gradient(135deg, var(--ft-brand), var(--ft-brand-2));
 color: #fff;
 font-size: 14px;
}
.section__card p {
 margin: 0.2rem 0 0.6rem;
 color: #d7dff0;
 line-height: 1.7;
}
.section__card h5 {
 margin: 0.1rem 0 0;
 color: #fff;
 font-weight: 800;
}
.section__card h6 {
 margin: 0.12rem 0 0;
 color: #b2bed6;
 font-weight: 700;
}

@media (max-width: 900px) {
 .faq-testi-container {
  grid-template-columns: 1fr;
  background: none;
  box-shadow: none;
  border-radius: 0;
 }
 .faqs,
 .testimonial-container {
  padding: 1rem 1.2rem;
 }
 .testimonial-container {
  margin-top: 0.6rem;
  border-radius: 16px;
  background: var(--ft-dark);
  box-shadow: 0 20px 42px rgba(0, 0, 0, 0.12);
 }
}

input::placeholder, textarea::placeholder {
  color: var(--tc-text);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap; /* prevents line breaks */
  border: 0;
}