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

body {
     font-family: "Josefin Sans", sans-serif;
    background-color: #f5f7fb;
    color: #333;
}
.navbar{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 5%;
    background-color: white;
    position: sticky;
    top: 0;
    z-index: 1000;
}
.logo img{
    width: 70px;
    height: 70px;
    object-fit: contain;
}
nav{
    display: flex;
    align-items: center;
    gap: 45px;
}
nav a{
    text-decoration: none;
    color: #27324a;
    font-size: 17px;
}
navbar nav a:hover,
.navbar nav a.active {
    color: #075cff;
}
.enquiry-btn{
     background-color: #075bea;
     color: white;
     padding: 13px 15px;
     border-radius: 5px;
     font-weight: bold;
}
/* Popup Background */

.modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.55);

    justify-content: center;
    align-items: center;
}


/* Enquiry Box */

.enquiry-box {
    position: relative;
    width: 450px;
    background: white;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}


/* Heading */

.enquiry-box h2 {
    text-align: center;
    margin-bottom: 25px;
    font-size: 22px;
    color: #202b3c;
}

.enquiry-box h2 span {
    color: #0866ff;
}


/* Close Button */

.close-btn {
    position: absolute;
    right: 16px;
    top: 15px;

    width: 34px;
    height: 34px;

    border: none;
    border-radius: 50%;

    background: #e9edf3;
    color: #4c5665;

    font-size: 25px;
    font-weight: bold;

    cursor: pointer;
}

.close-btn:hover {
    background: #dce2ea;
}


/* Input Box */

.input-box {
    display: flex;
    align-items: center;

    width: 100%;
    height: 43px;

    border: 1px solid #1990ff;
    border-radius: 4px;

    margin-bottom: 16px;
}

.input-box i {
    color: #075cff;
    margin-left: 12px;
    margin-right: 12px;
}

.input-box input,
.input-box select {
    width: 100%;
    height: 100%;

    border: none;
    outline: none;

    font-size: 15px;
    font-family: inherit;
}

.input-box select {
    background: white;
}


/* Message */

.textarea-box {
    height: 100px;
    align-items: flex-start;
}

.textarea-box i {
    margin-top: 13px;
}

.textarea-box textarea {
    width: 100%;
    height: 90px;

    border: none;
    outline: none;

    resize: none;

    padding-top: 12px;

    font-size: 15px;
    font-family: inherit;
}


/* Get Quote Button */

.quote-btn {
    display: block;

    margin: 15px auto 0;

    padding: 11px 25px;

    border: none;
    border-radius: 5px;

    background: #0866ff;
    color: white;

    font-size: 16px;
    font-weight: bold;

    cursor: pointer;
}

.quote-btn:hover {
    background: #0052d6;
}

.terms-page {
    width: 85%;
    max-width: 1000px;
    margin: 50px auto;
    background-color: white;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.terms-page h1 {
    text-align: center;
    color: #0860f5;
    margin-bottom: 30px;
}

.terms-page h2 {
    color: #0860f5;
    margin-top: 25px;
    margin-bottom: 10px;
}

.terms-page p {
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 15px;
}
.back-btn {
    display: inline-block;
    margin-bottom: 25px;
    padding: 10px 20px;
    background-color: #0860f5;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-size: 15px;
}

.back-btn:hover {
    background-color: #0046c7;
}

.footer {
    background-color: #0860f5;
    color: white;
    margin-top: 40px;
    padding: 40px 30px;
    box-sizing: border-box;
}

.footer-container {
    width: 95%;
    max-width: 1300px;
    margin: auto;

    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start;

    gap: 20px;
}


/* ================= LOGO ================= */

.footer-logo {
    flex: 1;
    min-width: 0;
}

.footer-logo img {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
    background-color: white;
}

.footer-logo h2 {
    margin-top: 15px;
    font-size: 24px;
    line-height: 1.3;
}


/* ================= FOOTER COLUMNS ================= */

.footer-column {
    flex: 1;
    min-width: 0;
}

.footer-column h3 {
    color: #111;
    font-size: 18px;
    margin-bottom: 20px;
    white-space: nowrap;
}

.footer-column a {
    display: block;
    text-decoration: none;
    color: white;
    margin-bottom: 12px;
    font-size: 16px;
}

.footer-column a:hover {
    text-decoration: underline;
}


/* ================= CONTACT ================= */

.contact p {
    font-size: 15px;
    margin-bottom: 15px;
    line-height: 1.5;
}

.contact i {
    margin-right: 8px;
}


/* ================= SOCIAL MEDIA ================= */

.social {
    flex: 0.8;
}

.social-icons {
    display: flex;
    gap: 12px;
}

.social-icons a {
    width: 38px;
    height: 38px;

    display: flex;
    justify-content: center;
    align-items: center;

    background-color: white;
    color: #0860f5;

    border-radius: 50%;

    text-decoration: none;
}

.social-icons a:hover {
    background-color: #111;
    color: white;
}


/* ================= POLICIES & TERMS ================= */

.policies {
    flex: 1;
}

.policies a {
    display: block;
    color: #d7d9ff;
    text-decoration: none;
    font-size: 17px;
    line-height: 1.5;
    margin-bottom: 10px;
}

.policies a span {
    font-size: 25px;
    margin-right: 8px;
    vertical-align: middle;
}

.policies a:hover {
    color: white;
}


.about-section {
    width: 100%;
    min-height: 440px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 40px 8%;
    gap: 50px;
}



\n\n/* ===== FULL RESPONSIVE PATCH: Desktop / Laptop / Tablet / Mobile ===== */
html{max-width:100%;overflow-x:hidden;-webkit-text-size-adjust:100%;}
body{max-width:100%;overflow-x:hidden;}
img,video,iframe{max-width:100%;height:auto;}
.navbar{width:100%;}
.navbar nav{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;}
.footer-container{max-width:1300px;margin-left:auto;margin-right:auto;}

@media (max-width:1180px){
  .navbar{padding-left:4%!important;padding-right:4%!important;}
  .navbar nav{gap:20px!important;}
  .navbar nav a{font-size:15px!important;}
  .footer-container{flex-wrap:wrap!important;gap:30px!important;}
  .footer-column,.footer-logo{min-width:180px!important;}
  .pricing-container{flex-wrap:wrap!important;justify-content:center!important;}
  .pricing-card{flex:0 1 320px!important;max-width:100%!important;}
}

@media (max-width:992px){
  .navbar{position:relative!important;display:flex!important;flex-direction:column!important;align-items:center!important;padding:12px 4%!important;gap:10px!important;}
  .logo img{width:64px!important;height:64px!important;}
  .navbar nav{width:100%!important;justify-content:center!important;gap:10px 18px!important;}
  .navbar nav a{font-size:15px!important;white-space:normal!important;text-align:center!important;}
  .enquiry-btn{padding:10px 14px!important;}
  .hero,.best-section,.about-section,.web-development,.website-type,.native-app,.hybrid-app,.progressive-app,.embedded-software,.digital-section,.google-section,.social-section,.email-section,.content-creation,.video-creation,.analytics-creation,.media-section,.search-engine,.vision-mission-section{padding-left:5%!important;padding-right:5%!important;gap:35px!important;}
  .hero,.best-section,.about-section,.web-development,.website-type,.native-app,.hybrid-app,.progressive-app,.embedded-software,.digital-section,.google-section,.social-section,.email-section,.content-creation,.video-creation,.analytics-creation,.media-section,.search-engine{flex-wrap:wrap!important;}
  .hero-content,.hero-image,.best-image,.best-content,.about-image,.about-content,.web-development-content,.website-image,.website-text,.native-text,.hybrid-content,.progressive-content,.embedded-content,.digital-content,.digital-image,.google-content,.google-image,.social-content,.social-image,.email-content,.email-image,.content-text,.content-image,.video-text,.video-image,.analytics-text,.analytics-image,.media-content,.media-image,.search-text,.search-image{width:100%!important;max-width:100%!important;flex:1 1 420px!important;}
  .process-container{flex-wrap:wrap!important;justify-content:center!important;gap:28px!important;}
  .process-step{width:28%!important;min-width:180px!important;}
  .testimonial-container,.projects-container{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .footer-container{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}

@media (max-width:768px){
  .navbar{position:relative!important;top:auto!important;}
  .navbar nav{flex-direction:column!important;gap:0!important;}
  .navbar nav a{width:100%!important;padding:10px 5px!important;border-bottom:1px solid #edf1f7!important;}
  .navbar .enquiry-btn{width:min(100%,260px)!important;margin-top:10px!important;}
  .hero,.best-section,.about-section,.web-development,.website-type,.native-app,.hybrid-app,.progressive-app,.embedded-software,.digital-section,.google-section,.social-section,.email-section,.content-creation,.video-creation,.analytics-creation,.media-section,.search-engine{flex-direction:column!important;text-align:center!important;padding:45px 5%!important;}
  .hero-content,.hero-image,.best-image,.best-content,.about-image,.about-content,.web-development-content,.website-image,.website-text,.native-text,.hybrid-content,.progressive-content,.embedded-content,.digital-content,.digital-image,.google-content,.google-image,.social-content,.social-image,.email-content,.email-image,.content-text,.content-image,.video-text,.video-image,.analytics-text,.analytics-image,.media-content,.media-image,.search-text,.search-image{width:100%!important;max-width:100%!important;}
  .hero-content h1{font-size:clamp(30px,7vw,40px)!important;}
  .stats{justify-content:center!important;flex-wrap:wrap!important;}
  .best-item{justify-content:flex-start!important;text-align:left!important;max-width:440px;margin-left:auto!important;margin-right:auto!important;}
  .process-step{width:42%!important;min-width:150px!important;}
  .testimonial-container,.projects-container{grid-template-columns:1fr!important;}
  .testimonial-card>p,.stars{margin-left:0!important;}
  .project-card img{height:auto!important;aspect-ratio:16/10;object-fit:cover;}
  .pricing-container{display:flex!important;flex-direction:column!important;align-items:center!important;}
  .pricing-card{width:min(100%,420px)!important;}
  .features{padding-left:0!important;}
  .footer{padding-left:5%!important;padding-right:5%!important;}
  .footer-container{grid-template-columns:1fr 1fr!important;text-align:left!important;}
  .enquiry-box{width:min(94vw,450px)!important;max-height:90vh!important;overflow-y:auto!important;}
  .terms-page{width:92%!important;padding:30px 20px!important;}
}

@media (max-width:576px){
  body{font-size:16px;}
  .navbar{padding:10px 18px!important;}
  .logo img{width:58px!important;height:58px!important;}
  .hero,.best-section,.process-section,.testimonial-section,.projects-section,.faq-section,.about-section,.web-development,.website-type,.native-app,.hybrid-app,.progressive-app,.embedded-software,.digital-section,.google-section,.social-section,.email-section,.content-creation,.video-creation,.analytics-creation,.media-section,.search-engine,.pricing-section,.vision-mission-section{padding:38px 18px!important;}
  .hero-content h1{font-size:30px!important;line-height:1.2!important;}
  .hero-content p,.process-description,.testimonial-subtitle,.faq-subtitle{font-size:16px!important;line-height:1.65!important;}
  .stats{gap:12px!important;}
  .process-container{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:24px 12px!important;}
  .process-step{width:100%!important;min-width:0!important;}
  .faq-question{gap:10px!important;}
  .footer-container{grid-template-columns:1fr!important;text-align:center!important;}
  .footer-logo img{margin-left:auto!important;margin-right:auto!important;}
  .footer-column a{margin-left:auto!important;margin-right:auto!important;}
  .social-icons{justify-content:center!important;}
  .contact p{text-align:center!important;}
  .enquiry-box{padding:24px 18px!important;}
  .input-box{width:100%!important;}
  .info-card,.service-box{width:100%!important;max-width:100%!important;}
}

@media (max-width:400px){
  .hero-content h1{font-size:27px!important;}
  .stats{display:grid!important;grid-template-columns:repeat(3,1fr)!important;width:100%!important;}
  .line{display:none!important;}
  .stat{text-align:center!important;}
  .process-container{grid-template-columns:1fr!important;}
  .footer{padding-left:16px!important;padding-right:16px!important;}
  .enquiry-box{width:96vw!important;padding:22px 14px!important;}
}