:root {
  --primary-dark: #1a3a52;
  --primary-medium: #2d5a7b;
  --accent-orange: #ff6b35;
  --accent-light: #64b5f6;
  --text-main: #2c3e50;
  --bg-light: #f8f9fb;
  --border-light: #d0d4d9;
}

html {
   scroll-behavior: smooth;
}

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

.navwrapper {
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-medium) 100%);
  padding  :1.2rem 0;
	position: sticky;
    top: 0;
  z-index :      1000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.navcontainer 
 {
    max-width: 1200px;
    margin: 0 auto;
    padding  :0 2rem;
					display: flex;
	 justify-content: space-between;
   align-items: center;
}

.logosection {
		display: flex;
    align-items: center;
   gap:      0.8rem; 
	
}

.logoimg {

	  height: 45px;
	 object-fit: contain;}

.navlinks {
   display: flex;
    gap:    2.5rem;
      align-items: center;
}

.navlinks a {
    color: #ffffff;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  transition: color 0.3s ease;
   position: relative;
    padding: 0.25rem 0;
}

.navlinks a:hover {
  color: var(--accent-light);
}

.navlinks a::after {
  content: '';
       position: absolute;
      bottom     : -5px;
      left: 0;
           width: 0;
       height: 2px;
     background: var(--accent-light);
   	transition: width 0.3s ease;}

.navlinks a:hover::after {
   width: 100%;
}

.hamburgerbtn  
  {
   display: none;
	background: none;
    border: none;
   cursor: pointer;
       flex-direction: column;
    gap: 5px;
  padding: 0.5rem;
	}

.hamburgerbtn span {
    width: 25px;
	 height: 2.5px;
  background: #ffffff;
    transition: all 0.3s ease;
   border-radius :    2px;
}

.hamburgerbtn.active span:nth-child(1) {
  transform: rotate(45deg) translate(8px, 8px);


}

.hamburgerbtn.active span:nth-child(2) {
	opacity: 0;
}

.hamburgerbtn.active span:nth-child(3) {

  transform: rotate(-45deg) translate(7px, -7px);

}@media (max-width: 768px) {
  .hamburgerbtn {
    display: flex;
  }

  .navlinks {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-medium) 100%);
    flex-direction: column;
    gap: 0;
    padding: 1.5rem 2rem;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    width: 100%;
  }

  .navlinks.active {
    max-height: 300px;
  }

  .navlinks a {
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: block;
  }

  .navlinks a::after {
    display: none;
  }
}

@media (max-width: 480px) {
  .navcontainer {
    padding: 0 1rem;
  }

  .logoimg {
    height: 38px;
  }

  .navlinks {
    padding: 1rem 1.5rem;
  }
}.pageheader {
  background: linear-gradient(135deg, #0f2841 0%, #1a3a52 50%, #2d5a7b 100%);
	 color     :#ffffff;
  padding:       4rem 2rem;
  text-align: center;
    position: relative;
   overflow: hidden;
}

.pageheader::before {
  content: '';
    position: absolute;
  top: 0;
  left    :  0;
    right: 0;
  bottom   :        0;
  background: radial-gradient(circle at 30% 50%, rgba(100, 181, 246, 0.1), transparent);
   pointer-events: none;
}

.pageheader h1 {
    font-size: 2.8rem;
    margin-bottom: 0.8rem;
  font-weight: 700;
  position: relative;
   z-index: 2;
}

.pageheader p    {
            font-size: 1.1rem;
  opacity: 0.9;
   max-width: 600px;
  margin: 0 auto;
  position: relative;
    z-index     :  2;}

.maincontainer {
	 max-width: 1200px;
    margin: 0 auto;
   padding: 0 2rem;
}

.sectionspacer {
  padding: 4rem 0;
}

.sectitle {
   font-weight: 700;
    letter-spacing: -0.5px;
   font-size     :       2.2rem;
    margin-bottom: 1rem;
  color: #1a3a52;
}

.sectionsubtitle {
   font-size: 1rem;
   color: #666;
   margin-bottom: 2.5rem;
		line-height: 1.7;
}

.servicegrid {


   display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
   gap: 2.2rem;}

.servicecard {
   background  :      #f8f9fb;
   padding: 2.5rem;
   border-radius: 8px;
    border-top: 5px solid #ff6b35;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   position: relative;
       overflow: hidden;

}

.servicecard::before {
  content: '';
   position: absolute;
   top: 0;
   left: -100%;
	width: 100%;
    height: 100%;
  background: rgba(255, 107, 53, 0.03);
  transition  : left 0.4s ease;
	z-index :  0;


}

.servicecard:hover
	{
  transform: translateY(-8px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    background :    #ffffff; 

}

.servicecard:hover::before {
    left: 0;
}

.servicecard > * {
         position: relative;
    z-index     :        1;

}

.cardtitle {
	 font-size: 1.4rem;
    margin-bottom: 1.2rem;
    color: #1a3a52;
	 font-weight: 600;
   letter-spacing: -0.3px;
}

.cardtext 
 {
  font-size: 0.95rem;
    color :  #555;
  line-height: 1.8;
  margin-bottom: 1.5rem;
}

.cardlist {
   list-style: none;
    margin-bottom: 1.5rem; 

}

.cardlist li {
    font-size: 0.9rem;
  position   :     relative;
  padding: 0.5rem 0;
   color: #555;
    padding-left: 1.8rem;
   line-height: 1.6;
}

.cardlist li:before {
  content: '▸';
  position: absolute;
    left:        0;
  color: #ff6b35;
   font-weight: bold;
	font-size: 1.1rem;
}

.cardprice {
    font-size: 1.2rem;
	font-weight: 600;
  color: #ff6b35;
  margin-bottom: 1rem;
}

.cardbtn {
    display     :       inline-block;
   background  :    #ff6b35;
    color: white;
    padding: 0.8rem 1.8rem;
  text-decoration: none;
   border-radius: 4px;
    font-weight: 600;
   transition: all 0.3s ease;
  font-size:     0.9rem;
               border: 2px solid #ff6b35; 

}

.cardbtn:hover {
    background: #ff5722;
   border-color: #ff5722;
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);


}

.detailsection {
  background: #f8f9fb;
    padding: 3.5rem 2rem;
    margin: 3rem 0;
          border-radius  :      8px;
  border-left: 5px solid #ff6b35;
}

.detailcontent {
	   max-width: 900px;
   margin: 0 auto;}

.detailtext  
  {
    font-size: 1rem;
     line-height: 1.9;
  color: #555;
    margin-bottom: 1.5rem;


}

.detaillist {
	   list-style: none;
   margin: 1.5rem 0;
}

.detaillist li {
  padding: 0.8rem 0; 
	    padding-left: 2rem; 
	   position: relative; 
	    color: #555; 
	    font-size: 0.95rem; 
	  line-height: 1.7;
}

.detaillist li:before  {


  content: '→';
    position: absolute;
       left: 0;
    color: #ff6b35;
 font-weight: bold;
  font-size: 1.2rem;
	}

.processblock {
   background: white;
      padding: 2.5rem;
	margin-bottom: 2rem;
    border-left: 5px solid #ff6b35;
    border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.processblock:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  transform: translateX(5px);
}

.processtitle {
      font-size: 1.2rem;
	font-weight: 600;
    color: #1a3a52;
    margin-bottom: 0.8rem;
}

.processtext  {
    color:    #555;
    line-height: 1.8;
    font-size: 0.95rem; 
}

.testimonialsection {
  background: linear-gradient(135deg, #f5f7fa 0%, #eef2f7 100%);
        padding: 3.5rem 2rem;
		margin: 3rem 0;
   border-radius: 8px;
}

.testimonialsgrid		{

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

.testimonialcard {
    background: white;
    padding   : 2rem;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
   border-top: 3px solid #ff6b35;

}  

.testimonialcard:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
	
}

.testimonialtext {
       color  :    #555;
  line-height: 1.8;
  margin-bottom: 1.2rem;
   font-size: 0.95rem;
   font-style: italic;
}

.testimonialauthor {
  font-weight: 600; 
	   color  :  #1a3a52; 
	    font-size    :        0.95rem; 
	   margin-bottom: 0.3rem;
}

.testimonialrole {
   font-size: 0.85rem;
  color: #999;
}

.pricingcontainer {
  background: linear-gradient(135deg, #f5f7fa 0%, #eef2f7 100%);

	   padding: 3.5rem 2rem;

	  margin: 3rem 0;

	  border-radius: 8px;
}

.pricinggrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.pricingcard {
 background:    white;
  padding: 2.5rem;
  border-radius: 8px;
   text-align: center;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.pricingcard::after {
  content: '';
   position: absolute;
   top: 0;
  left: 0;
    right     :      0;
   bottom: 0;
  background: linear-gradient(135deg, rgba(255, 107, 53, 0.05), transparent);
  border-radius: 8px;
    opacity: 0;
    transition: opacity 0.3s ease;
  pointer-events: none;
}

.pricingcard:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.pricingcard:hover::after	{
   opacity: 1;
}

.pricingcard > *
	{
  position: relative;
   z-index: 2;
	
}

.pricingcard.featured {
    border-top: 5px solid #ff6b35;
  transform: scale(1.02);
  box-shadow: 0 4px 20px rgba(255, 107, 53, 0.2);
}

.priceamount {
     font-size: 2.5rem;
    font-weight: 700;
   color: #ff6b35;
   margin: 1rem 0;
}

.pricecurrency {

	   font-size: 1.2rem;

}

.pricingdesc {
  font-size     :    0.9rem; 
	    color: #666; 
		 margin-bottom     : 1.5rem; 
	  min-height: 60px; 
	   line-height: 1.6;
	
}

.featurelist {
  text-align: left;
   list-style: none;
	 margin: 1.5rem 0;
}

.featurelist li {
  padding: 0.6rem 0;
    color: #555;
   font-size: 0.9rem;
}

.featurelist li:before    {
    color: #ff6b35;
     content: '✓';
      margin-right: 0.8rem;
      font-weight  : bold;

}

.successcontainer {
    max-width: 900px;
    margin: 0 auto;
    padding: 4rem 2rem;
}

.successbox {
          background: white;
    padding   :  4rem;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
   text-align: center;
    animation    :        slideUp 0.5s ease-out;
}@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}.successicon {
  font-size: 4rem;
    margin-bottom: 1.5rem;
  color: #ff6b35;
    font-weight: bold;
}

.successtitle {
    font-size: 2rem;
	color: #1a3a52;
   margin-bottom: 1rem;
  font-weight :      700;
}

.successtext {

  font-size:  1.05rem;
  color: #555;
   margin-bottom: 1.5rem;
    line-height: 1.8;
}

.infosection {
    background: #f8f9fb;
   padding: 2rem;
  border-radius: 8px;
    margin    :       2rem 0;
   text-align: left;
	border-left: 5px solid #ff6b35;
}

.inforow {
    display: flex;
  gap: 1.5rem;
    margin-bottom: 1rem;
   padding: 0.8rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.infolabel {

	  font-weight: 600;
    color: #1a3a52;
    min-width  :     120px;
}

.infovalue {
  color: #555;
	flex: 1;
}

.actionbuttons     {
   margin-top   : 2rem;
    justify-content: center;
  flex-wrap: wrap;
     display: flex;
       gap: 1.2rem;
}

.actionbtn {
       display    :   inline-block;
    padding: 0.9rem 2rem;
   text-decoration: none;
    border-radius: 4px;
	 font-weight   :     600;
  transition: all 0.3s ease;
					font-size: 0.95rem;
}

.btnprimary {
	               background  :      #ff6b35;
   color  :  white;


}

.btnprimary:hover   {


	background: #ff5722;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3); 
}

.btnsecondary {
  background: #1a3a52;
       color  : white;
}

.btnsecondary:hover {
         background: #0f2841;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(26, 58, 82, 0.3);
}

.nextboxes {
    display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap: 1.5rem;
    margin: 3rem 0;
}



.nextbox {
  background: #f8f9fb;
	 padding: 1.8rem;
  border-radius: 8px;
   text-align: center;
    transition: all 0.3s ease;
  border-top: 3px solid #ff6b35;
}



.nextbox:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

.nextboxtitle {
    color: #1a3a52;
	font-weight: 600;
   margin-bottom: 0.8rem;
    font-size: 1.1rem;
}

.nextboxtext {
  font-size: 0.9rem;
    color: #666;
  line-height: 1.6;
}@media (max-width: 768px) {
    .pageheader h1 {
        font-size: 1.8rem;
    }

    .sectitle {
        font-size: 1.6rem;
    }

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

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

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

    .maincontainer {
        padding: 0 1rem;
    }

    .successbox {
        padding: 2rem;
    }

    .actionbuttons {
        flex-direction: column;
    }

    .actionbtn {
        width: 100%;
    }

    .inforow {
        flex-direction: column;
        gap: 0.3rem;
    }

    .infolabel {
        min-width: auto;
    }

    .pricingcard.featured {
        transform: scale(1);
    }

    .sectionspacer {
        padding: 2.5rem 0;
    }
}

@media (max-width: 480px) {
    .pageheader {
        padding: 2rem 1rem;
    }

    .pageheader h1 {
        font-size: 1.4rem;
        margin-bottom: 0.6rem;
    }

    .pageheader p {
        font-size: 0.95rem;
    }

    .sectitle {
        font-size: 1.4rem;
    }

    .sectionsubtitle {
        font-size: 0.9rem;
    }

    .servicecard {
        padding: 1.5rem;
    }

    .cardtitle {
        font-size: 1.1rem;
    }

    .cardtext {
        font-size: 0.85rem;
    }

    .detailsection {
        padding: 2rem 1rem;
    }

    .successtitle {
        font-size: 1.4rem;
    }

    .successtext {
        font-size: 0.95rem;
    }

    .priceamount {
        font-size: 2rem;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}.servicecard {
  animation     :fadeIn 0.6s ease-out;
}

.processblock {
  animation: slideInLeft 0.5s ease-out;
} 

.testimonialcard {
    animation: slideInRight 0.5s ease-out;
}@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media print {
    .navwrapper,
    .footerwrapper,
    .actionbuttons,
    .hamburgerbtn {
        display: none;
    }

    body {
        background: white;
    }

    .successbox,
    .servicecard,
    .pricingcard {
        box-shadow: none;
        border: 1px solid #ddd;
    }
}.policySection {
     padding   :      80px 2rem;
    background: #f8f9fa;
}

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

.policyContainer h2 {
	font-size: 2.5rem;
    color: #2c3e50;
  margin-bottom: 1.5rem;
    font-weight: 700;
}

.policyContainer p {
   color : #7f8c8d;
  margin-bottom: 1.5rem;
	line-height: 1.7;
          font-size: 1.1rem;
}@media (max-width: 768px) {
    .policyContainer h2 {
        font-size: 2rem;
    }

    .policyContainer p {
        font-size: 1rem;
    }

    .policySection {
        padding: 60px 1rem;
    }
}