*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Josefin Sans", sans-serif;

}
.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;
}
nav a :hover{
    color: blue;
    border-bottom: 2px solid blue;
}
.enquiry-btn{
     background-color: #075bea;
     color: white;
     padding: 13px 15px;
     border-radius: 5px;
     font-weight: bold;
}
/* =====================================
   WEB DEVELOPMENT SECTION
===================================== */

.web-development {
    padding: 70px 7%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    background-color: white;
}


/* LEFT CONTENT */

.web-development-content {
    width: 52%;
}

.web-development-content h1 {
    font-size: 45px;
    color: #27324a;
    margin-bottom: 25px;
}

.web-development-content h1 span {
    color: #075bea;
}

.web-development-content p {
    font-size: 17px;
    line-height: 1.8;
    color: #333;
}


/* RIGHT IMAGE */

.about-image {
    width: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.about-image img {
    width: 100%;
    max-width: 420px;
    height: auto;
    object-fit: contain;
}


/* =====================================
   DEVELOPMENT PROCESS BOXES
===================================== */

.service-box {
    width: 17%;
    min-height: 150px;

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

    text-align: center;

    background-color: white;

    border-radius: 10px;

    padding: 20px 10px;

    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.10);

    transition: 0.3s;
}

.service-box img {
    width: 55px;
    height: 55px;
    object-fit: contain;
    margin-bottom: 15px;
}

.service-box h2 {
    font-size: 17px;
    color: #27324a;
    font-weight: 600;
}


/* Hover */

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

.service-box:hover h2 {
    color: #075bea;
}


/* =====================================
   STATIC / DYNAMIC / E-COMMERCE
===================================== */

.website-type {
    padding: 80px 7%;

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

    gap: 60px;

    background-color: #f8faff;
}

.website-type.reverse {
    background-color: white;
}


.website-text {
    width: 50%;
}

.website-text h2 {
    font-size: 40px;
    color: #27324a;
    margin-bottom: 25px;
}

.website-text h2 span {
    color: #075bea;
}

.website-text p {
    font-size: 17px;
    line-height: 1.8;
    color: #444;
    margin-bottom: 20px;
}
/* Images */

.website-image {
    width: 45%;
    display: flex;
    justify-content: center;
}

.website-image img {
    width: 100%;
    max-width: 430px;
    height: auto;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Josefin Sans", sans-serif;
    background-color: white;
}


/* Pricing Section */

.pricing-section {
    width: 100%;
    padding: 35px 0 50px;
}

.pricing-section h1 {
    text-align: center;
    font-size: 32px;
    margin-bottom: 48px;
    color: #111;
}

.pricing-section h1 span {
    color: #075cff;
}


/* Container */

.pricing-container {
    width: 78%;
    margin: auto;

    display: flex;
    justify-content: space-between;
    gap: 32px;
}


/* Pricing Card */

.pricing-card {
    width: 33.33%;
    min-height: 650px;

    background-color: #e2ecff;

    position: relative;

    text-align: center;

    border-radius: 0 0 160px 160px;

    box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.12);

    overflow: hidden;

    padding-bottom: 25px;

    display: flex;
    flex-direction: column;
}


/* Blue Top */

.card-top {
    width: 100%;
    height: 130px;

    background-color: #075cff;

    border-radius: 0 0 160px 160px;

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

.card-top h2 {
    color: white;
    font-size: 21px;
    margin-top: -15px;
}


/* Price Circle */

.price {
    width: 82px;
    height: 82px;

    background-color: #65c8f0;

    border: 3px solid white;

    border-radius: 50%;

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

    position: absolute;

    top: 83px;
    left: 50%;

    transform: translateX(-50%);

    font-size: 17px;
    font-weight: 700;

    box-shadow: 0px 8px 18px rgba(0, 0, 0, 0.15);
}


/* Features */

.features {
    margin-top: 88px;

    text-align: left;

    padding: 0 48px;

    flex-grow: 1;
}

.features p {
    font-size: 16px;

    font-weight: 600;

    margin-bottom: 24px;

    line-height: 1.3;
}

.features span {
    color: #075cff;

    font-size: 22px;

    font-weight: bold;

    margin-right: 8px;
}


/* Book Now Button */

.pricing-card button {
    background-color: #075cff;

    color: white;

    border: none;

    padding: 12px 22px;

    border-radius: 6px;

    font-family: "Josefin Sans", sans-serif;

    font-size: 16px;

    font-weight: 700;

    cursor: pointer;

    align-self: center;

    margin-top: auto;
}

.pricing-card button:hover {
    background-color: #0047d4;
}



/* =====================================
   ENQUIRY BUTTON
===================================== */

.enquiry-btn {
    background-color: #075bea;
    color: white;

    padding: 13px 20px;

    border: none;
    border-radius: 5px;

    font-weight: bold;
    cursor: pointer;

    transition: 0.3s;
}

.enquiry-btn:hover {
    background-color: #0548b8;
}


/* =====================================
   NAVBAR HOVER FIX
===================================== */

nav a:hover {
    color: #075bea;
    border-bottom: 2px solid #075bea;
    padding-bottom: 5px;
}

.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;}
}