:root {
    --primary-color: #1e3a5f;
    --secondary-color: #2d5a8c;
    --accent-color: #ff6b35;
    --light-bg: #f8f9fa;
    --dark-text: #1a1a1a;
    --border-color: #e0e0e0;
    --white: #ffffff;
}

* {
  margin    :0;
    padding :      0;
    box-sizing :   border-box; 

}

html {
   scroll-behavior: smooth;
}

body {
	  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: var(--dark-text);
  background-color: var(--white);
	 line-height: 1.6;

     }

.section-container {
   max-width: 1200px;
          margin: 0 auto;
   padding: 0 20px;
}

.navbar-main {
  background: var(--white);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   position: sticky;
	top: 0;
  z-index :1000;
}

.nav-wrapper {

   max-width  : 1200px;
  margin: 0 auto;
  display: flex;
    justify-content: space-between;
  align-items: center;
   padding  :        15px 20px;}


.nav-logo img {
    height: 50px;
                    width: auto;
  filter: brightness(0) invert(1);
}

.nav-menu {
    display  :     flex;
  list-style: none;
    gap: 40px;
}

.nav-link {
      text-decoration: none;
  color: var(--dark-text);
      font-weight: 500;
  transition: color 0.3s ease;
   font-size: 16px;


}

.nav-link:hover {
  color: var(--accent-color);


}

.burger-menu
{
    display: none;
   flex-direction: column;
                    background: none;
    border: none;
    cursor: pointer;
   gap: 6px;
}

.burger-line {
      width     :25px;
    height: 3px;
  background: var(--dark-text);
       transition: all 0.3s ease;
   border-radius: 2px;
     }

.burger-menu.active .burger-line:nth-child(1)


{
  transform: rotate(45deg) translate(8px, 8px);
}

.burger-menu.active .burger-line:nth-child(2) {

	   opacity: 0;
}


.burger-menu.active .burger-line:nth-child(3)    {
  transform: rotate(-45deg) translate(7px, -7px);


}

.hero-section {

		 display: grid;
   grid-template-columns :   1fr 1fr;
    gap     :        60px;
  align-items: center;
   padding: 100px 0;
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
}

.hero-content {
	padding    : 0 20px;

}

.hero-title		{
    font-size: 48px;
 font-weight: 700;
  color: var(--primary-color);
 margin-bottom     :       20px;
      line-height: 1.2;
}

.hero-subtitle {

    font-size   : 18px;
  color: #555;
	margin-bottom: 30px;
    line-height: 1.8;


     }

.cta-button   {
    display  : inline-block;
	  background: linear-gradient(135deg, var(--accent-color), #ff8c42);
	  color: var(--white);
	   padding: 14px 32px;
		border-radius: 6px;
	    text-decoration: none;
	    font-weight: 600;
	    transition: transform 0.3s ease, box-shadow 0.3s ease;
	    cursor: pointer;
	    border: none;
	    font-size :      16px;
}

.cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(255, 107, 53, 0.3);
}

.hero-image {
  padding: 0 20px;
}

.hero-img,
.why-img {
  width: 100%;
    height:       auto;
     border-radius: 12px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

.services-preview {
  padding: 100px 0;
  background: var(--light-bg);
}

.section-title {
    font-size    :  42px;
   font-weight: 700;
	 text-align: center;
  color: var(--primary-color);
  margin-bottom: 60px; 

} 

.services-grid {

	  display     :grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 30px;
     }

.service-card {
  background: var(--white);
 padding: 30px;
   border-radius: 10px;
    text-align: center;
  transition:    transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid var(--border-color);
}

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.service-icon {
      margin-bottom: 20px;
}

.service-icon img {
   width: 50px;
          height: 50px;
   margin: 0 auto;
  display: block;
  stroke: var(--accent-color);
}

.service-title {
      font-size: 20px;
    font-weight: 600;
  color: var(--primary-color);
    margin-bottom: 15px;

}

.service-description {
  color     :        #666;
    font-size: 14px;
   line-height: 1.7;
}

.why-section {
  padding :   100px 0;
  background: var(--white);
}

.why-content {
       display: grid;

	   grid-template-columns: 1fr 1fr;

	  gap: 60px;

	  align-items  :   center;
}

.why-text {
      display: flex;
               flex-direction: column;
    gap: 30px;
}

.why-item  {
   display: flex;
  gap: 25px;
}

.why-number {
   font-size: 32px;
  font-weight: 700;
  color: var(--accent-color);
   flex-shrink: 0;
}

.why-block h3 {
	  font-size: 20px;
  color: var(--primary-color);
	margin-bottom: 10px;
     }

.why-block p {
  color: #666;
    line-height: 1.7;
}

.cta-section {
   padding: 80px 0;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));


}

.cta-block {
      text-align: center;
  color: var(--white);


}

.cta-title {
    font-size: 40px;
   font-weight: 700;
      margin-bottom: 20px; 
	
}

.cta-text {
	font-size: 18px;
  margin-bottom    :     30px;
  opacity: 0.95;
  max-width: 600px;
    margin-left: auto;
   margin-right: auto;
}



.cta-button-large {
	  background: var(--accent-color);}

.contact-section {

	    padding: 100px 0;
  background: var(--light-bg);


}

.contact-content {
    gap   :      60px;
   grid-template-columns: 1fr 1fr;
   display: grid;
}

.contact-info {
   display: flex;
	flex-direction:       column;
  gap: 40px;
}

.info-block h3 {
    font-size: 18px;
  color: var(--primary-color);
   margin-bottom: 12px;
    font-weight: 600;
}

.info-block p {
    color: #666;
	line-height: 1.8;
}

.contact-form {
   display    :      flex;
   flex-direction: column;
   gap: 20px; 

}

.form-group {
	 display: flex;
	flex-direction: column;
}

.form-input,
.form-button {
                    padding: 12px 16px;
  border: 2px solid var(--border-color);
  border-radius: 6px;
  font-size: 14px;
    font-family: inherit;
  transition: border-color 0.3s ease;
}

.form-input:focus,
.form-button:focus {


   outline: none;
  border-color: var(--accent-color);


}

.form-button   {
  background: linear-gradient(135deg, var(--accent-color), #ff8c42);
  color: var(--white);
   border: none;
   font-weight: 600;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.form-button:hover {
	  transform: translateY(-2px);
	  box-shadow: 0 8px 20px rgba(255, 107, 53, 0.3);
	}

textarea.form-input {
  resize: vertical;
   min-height: 120px;


}

.footer-section {
  background: var(--primary-color);
  color: var(--white);
  padding: 60px 0 20px;
}

.footer-wrapper {
                    max-width: 1200px;
   margin: 0 auto;
	padding: 0 20px;
}

.footer-content {


  display     :  grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 40px;
    margin-bottom  :     40px;
	}

.footer-logo {
   grid-column: 1 / -1;
     margin-bottom: 20px;
}

.footer-logo-img {
  height     :    45px;
  width:   auto;
  filter: brightness(0) invert(1);
}

.footer-block h4 {
  font-size: 16px;

	margin-bottom: 15px;

	font-weight:   600;
}

.footer-links {
  list-style: none;
        display: flex;
   flex-direction: column;
	gap: 10px;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.8);
   text-decoration: none;
    transition: color 0.3s ease; 

}

.footer-links a:hover {
  color: var(--accent-color);
}

.footer-block p {
  color: rgba(255, 255, 255, 0.8);
      font-size: 14px;
   line-height: 1.8;
}

.footer-phone {
  margin-top :        10px;
   font-weight: 600;
  color: var(--accent-color);
}

.footer-bottom {
  text-align: center;
   padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
} @media (max-width: 768px) {
    .nav-menu {
        display: none;
        position: absolute;
        top: 70px;
        left: 0;
        right: 0;
        background: var(--white);
        flex-direction: column;
        padding: 20px;
        gap: 15px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }

    .nav-menu.active {
        display: flex;
    }

    .burger-menu {
        display: flex;
    }

    .hero-section {
        grid-template-columns: 1fr;
        padding: 60px 0;
        gap: 40px;
    }

    .hero-title {
        font-size: 32px;
    }

    .hero-subtitle {
        font-size: 16px;
    }

    .section-title {
        font-size: 32px;
        margin-bottom: 40px;
    }

    .services-grid {
        grid-template-columns: 1fr;
    }

    .why-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .contact-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .cta-title {
        font-size: 28px;
    }

    .footer-content {
        grid-template-columns: 1fr;
    }

    .footer-logo {
        grid-column: 1;
    }

    .services-preview,
    .why-section,
    .contact-section {
        padding: 60px 0;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 24px;
    }

    .hero-subtitle {
        font-size: 14px;
    }

    .section-title {
        font-size: 24px;
    }

    .service-card {
        padding: 20px;
    }

    .why-item {
        gap: 15px;
    }

    .why-number {
        font-size: 24px;
    }

    .form-input,
    .form-button {
        font-size: 13px;
        padding: 10px 14px;
    }
}.services-hero {
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  color: var(--white);
  padding: 80px 0;
   text-align: center;

}

.services-hero-title {
   font-size: 48px;

	    font-weight     :700;

	    margin-bottom  :      15px;
}

.services-hero-subtitle   {
   font-size: 20px;
	 opacity: 0.95; 
	
}



.services-detailed {
		padding: 100px 0;
  background: var(--white);
}

.service-detailed-item {
   display: grid;
   grid-template-columns: 1fr 1fr;
  gap: 60px;
   align-items: center;
    margin-bottom  :       80px;
}

.service-detailed-item.reverse {
   direction :rtl;
}

.service-detailed-item.reverse > * {
   direction: ltr;
}

.service-detail-title
	{
   font-size: 36px;
    font-weight: 700;
  color: var(--primary-color);
	margin-bottom:   20px;
} 

.service-detail-description {
   font-size: 16px;
    color  :  #666;
    line-height: 1.8;
   margin-bottom:   30px;
}

.service-features {
  display: flex;
    flex-direction: column;
    gap: 15px;
}

.feature-item  {
    display: flex;
	align-items : center;
  gap: 15px;
}

.feature-icon {

 flex-shrink: 0;

}

.feature-icon img {
  width: 24px;
  height: 24px;
  stroke: var(--accent-color);
}

.detail-img {
   width  :     100%;
   border-radius: 12px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
	
}

.pricing-section {
  background: var(--light-bg);
  padding: 100px 0;
}

.pricing-grid {

	 display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
    margin-top: 60px; 

     }

.pricing-card {
  background: var(--white);
  padding: 40px;
	 border-radius: 10px;
  border: 2px solid var(--border-color);
  text-align: center;
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
   position:   relative;
}

.pricing-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  border-color: var(--accent-color);
}

.pricing-card.featured {
  border-color: var(--accent-color);
  box-shadow: 0 20px 40px rgba(255, 107, 53, 0.2);
}

.pricing-badge     {
  position  :     absolute;
    top   :-12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent-color);
  color: var(--white);
    padding: 6px 16px;
   border-radius: 20px;
    font-size:   12px;
  font-weight: 600;
	 text-transform: uppercase;
}

.pricing-title {
   font-size     :      24px;
  font-weight: 700;
  color: var(--primary-color);
  margin: 20px 0;
}

.pricing-price {
  font-size: 42px;

    font-weight: 700;

  color: var(--accent-color);

	margin-bottom: 5px;
	
}

.pricing-period {
    color: #999;
   font-size: 14px;
    margin-bottom: 30px;
}

.pricing-features {
    list-style: none;
  text-align: left;
	 margin-bottom: 30px;
               min-height: 200px;
}

.pricing-features li {
    padding: 12px 0;
  border-bottom: 1px solid var(--border-color);
   color :    #666;
	 font-size: 14px;
}

.pricing-features li:last-child {
 border-bottom :       none;
}

.pricing-button {
  display: inline-block;
  background: var(--border-color);
  color: var(--dark-text);
    padding :      12px 28px;
  border-radius: 6px;
    text-decoration: none;
   font-weight: 600;
        transition: all 0.3s ease;
   border: none;
    cursor: pointer;
  width: 100%;
}

.pricing-button:hover {

	background: #d0d0d0;

}



.pricing-button.featured-button {
  background: linear-gradient(135deg, var(--accent-color), #ff8c42);
  color: var(--white);
}

.pricing-button.featured-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(255, 107, 53, 0.3);
}

.testimonials-section {
  background: var(--white);
  padding: 100px 0;}

.testimonials-grid {
	 display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
       gap: 30px;
    margin-top: 60px;
}

.testimonial-card {
  background: var(--light-bg);
       padding: 30px;
     border-radius: 10px;
     border-left: 4px solid var(--accent-color);
      transition: transform 0.3s ease;
}

.testimonial-card:hover {
  transform: translateY(-5px);
}

.testimonial-text p {
	 font-size: 15px;
   color: #666;
   line-height: 1.8;
   font-style   :      italic;
    margin-bottom :    20px;
} 

.testimonial-author {
  border-top: 1px solid var(--border-color);
    padding-top: 20px;
}

.author-name {

	    font-weight: 600;
  color: var(--primary-color);
	 margin-bottom: 5px;

	}

.author-title {
  color: #999;
  font-size: 13px;
}

.faq-section {
  background: var(--light-bg);
   padding: 100px 0;
}

.faq-container {
  max-width:      800px;
  margin     :60px auto 0;
}



.faq-item {
  background: var(--white);
       margin-bottom: 15px;
   	border-radius: 8px;
      overflow :        hidden;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.faq-question {
        width: 100%;
   padding   :     20px;
  background: var(--white);
   border: none;
    cursor: pointer;
	 display: flex;
 justify-content: space-between;
    align-items :      center;
    font-size   :   16px;
   font-weight: 600;
  color: var(--primary-color);
	transition   :       background-color 0.3s ease;
}

.faq-question:hover {
  background: var(--light-bg);
} 

.faq-icon {
    font-size     :     24px;
  color: var(--accent-color);
  transition: transform 0.3s ease;
}

.faq-question.active .faq-icon {
  transform: rotate(45deg);
}

.faq-answer {

	    max-height: 0;
	overflow: hidden;
  transition: max-height 0.3s ease;
  background: var(--light-bg);
     }

.faq-answer.active {
	max-height: 500px;
}

.faq-answer p {
                    padding: 20px;
         color: #666;
  line-height: 1.8;
    font-size: 14px;
}


.thankyou-section 
 {
  background: linear-gradient(135deg, #f8f9fa, #ffffff);
     padding: 100px 0;
  min-height: 70vh;
  display: flex;
          align-items: center;
	
}

.thankyou-container {
    text-align: center;
  background: var(--white);
    padding: 60px;
    border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  max-width: 600px;
    margin: 0 auto;
}

.thankyou-success-icon {
   margin-bottom: 30px;
   display: flex;
    justify-content: center;
}

.thankyou-success-icon img {
      width: 80px;
	height: 80px;
  stroke: var(--accent-color);
  filter: drop-shadow(0 2px 4px rgba(255, 107, 53, 0.2));


}

.thankyou-title

{
  font-size: 42px;
   font-weight :      700;
  color: var(--primary-color);
   margin-bottom: 15px;
}

.thankyou-message
{
    font-size  :       20px;
  color: var(--accent-color);
   font-weight :       600;
   margin-bottom: 20px;
	
}

.thankyou-description {
  font-size: 15px;
    color  :   #666;
    line-height: 1.8;
   margin-bottom: 40px;
}

.thankyou-next-steps {
  background: var(--light-bg);
		 padding:        30px;
  border-radius: 8px;
    text-align: left;
  margin-bottom: 40px;
}

.next-steps-title {
		font-size: 18px;
    font-weight: 700;
  color: var(--primary-color);
    margin-bottom: 25px;
    text-align: center;

}

.next-steps-list     {
    list-style   :     none;
}

.next-steps-list li {
     display: flex;
	gap: 20px;
    margin-bottom: 20px;


}

.step-number {
  flex-shrink: 0;
   width: 40px;
   height: 40px;
  background: linear-gradient(135deg, var(--accent-color), #ff8c42);
  color: var(--white);
   border-radius: 50%;
   display: flex;
  align-items: center;
  justify-content: center;
          font-weight: 700;
  font-size: 16px;
}

.step-content strong {
     color: var(--primary-color);
    display: block;
  margin-bottom: 5px;}

.step-content p {
  color: #666;
    line-height: 1.6;
  font-size: 14px;
}

.thankyou-actions {
  display: flex;
  gap :  15px;
  justify-content: center;
   flex-wrap: wrap;
}

.action-button

{
   display: inline-block; 
   padding: 14px 32px; 
  border-radius: 6px; 
   text-decoration: none; 
    font-weight    :        600; 
    transition: all 0.3s ease; 
    cursor: pointer; 
	border   :      none; 
	font-size: 15px;
}

.action-button {
  background: linear-gradient(135deg, var(--accent-color), #ff8c42);
  color: var(--white);
}

.action-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(255, 107, 53, 0.3);
}

.action-button.secondary {
  background: var(--border-color);
  color: var(--dark-text);
}

.action-button.secondary:hover {

    background: #d0d0d0;
     }

.contact-info-section {
  background: var(--light-bg);
    padding: 80px 0;
}

.contact-options {
   display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	 gap: 40px;
   margin-top: 60px;
}

.contact-option {
     text-align  :       center;
}

.option-icon {
    margin-bottom: 20px;
  display: flex;
  justify-content: center;
}

.option-icon img {

	   width: 50px;
    height     :        50px;
  stroke: var(--accent-color);}

.contact-option h3 {
	font-size: 18px;
	font-weight  :   700;
  color: var(--primary-color);
  margin-bottom: 10px;
}

.contact-option p {
     color: #666;
   line-height: 1.7;
   font-size: 14px;
}

.option-subtitle    {
    color: #999;
  font-size: 12px;
}@media (max-width: 768px) {
    .services-hero-title {
        font-size: 32px;
    }

    .services-hero-subtitle {
        font-size: 16px;
    }

    .service-detailed-item {
        grid-template-columns: 1fr;
        gap: 40px;
        margin-bottom: 60px;
    }

    .service-detail-title {
        font-size: 24px;
    }

    .pricing-grid {
        grid-template-columns: 1fr;
    }

    .thankyou-container {
        padding: 40px;
    }

    .thankyou-title {
        font-size: 28px;
    }

    .next-steps-list li {
        gap: 15px;
    }

    .thankyou-actions {
        flex-direction: column;
    }

    .action-button {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .services-hero-title {
        font-size: 24px;
    }

    .service-detail-title {
        font-size: 20px;
    }

    .pricing-card {
        padding: 25px;
    }

    .thankyou-container {
        padding: 25px;
    }

    .thankyou-title {
        font-size: 22px;
    }

    .thankyou-description {
        font-size: 14px;
    }

    .step-number {
        width: 35px;
        height: 35px;
        font-size: 14px;
    }

    .contact-options {
        gap: 30px;
    }
}.policy-section {
    padding    :  80px 2rem;
  background: var(--light-bg);
    min-height: 70vh;
}



.policy-container {
   max-width  :   800px;
					margin: 0 auto;
    text-align: left;
}

.policy-main-title	{
    font-size: 42px;
  color: var(--primary-color);
     margin-bottom: 10px;
  font-weight: 700;
}

.policy-intro {
  color :    #999;
      font-size: 14px;
  margin-bottom: 40px;
   font-style: italic;
}

.policy-container h2 {

	  font-size: 28px;
  color: var(--primary-color);
  margin-top: 40px;
         margin-bottom: 20px;
  font-weight: 700;
   line-height: 1.3;
}

.policy-container p     {
   color    :#666;
   margin-bottom: 18px;
   line-height: 1.8;
  font-size: 15px;
   text-align: justify;
}

.policy-container p strong {
  color: var(--primary-color);
   font-weight: 600;
}

.policy-container p:first-of-type

{


    margin-top: 0; 
	
}@media (max-width: 768px) {
    .policy-section {
        padding: 60px 1rem;
    }

    .policy-container {
        max-width: 100%;
    }

    .policy-main-title {
        font-size: 32px;
        margin-bottom: 15px;
    }

    .policy-container h2 {
        font-size: 22px;
        margin-top: 30px;
        margin-bottom: 15px;
    }

    .policy-container p {
        font-size: 14px;
        line-height: 1.7;
        margin-bottom: 15px;
        text-align: left;
    }
}

@media (max-width: 480px) {
    .policy-section {
        padding: 40px 1rem;
    }

    .policy-main-title {
        font-size: 24px;
    }

    .policy-container h2 {
        font-size: 18px;
        margin-top: 25px;
    }

    .policy-container p {
        font-size: 13px;
        line-height: 1.6;
    }

    .policy-intro {
        font-size: 12px;
        margin-bottom: 25px;
    }
}