.icon-container{
    display: flex;
    justify-content: space-between;
   width: 250px;
}



/* digital marketing  */

.delhi-content-section {
  background-color: #fff; /* soft beige background */
}

.delhi-content-section span{
color: #ffd25d;
} 
.service-box {
  background-color: #fff; /* thoda darker beige tone */
  padding: 30px;
  border-radius: 6px;
  height: 100%;
  transition: all 0.3s ease;
}

/* .service-box:hover {
  background-color: #fff;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  transform: translateY(-5px);
} */

.service-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #000;
  margin-bottom: 15px;
}

.service-text {
  font-size: 1rem;
  color: #000;
  line-height: 1.6;
}


/* e-commerce */

.commerce-section {
  background-color: #0b192c; 
}

.commerce-section span{
color: #ffd25d;
} 
.commerce-section {
     background: linear-gradient(88deg, #131b2f, #00000029);
padding: 0 20px;
 
  height: 100%;
  transition: all 0.3s ease;
}



.commerce-section-title {
  font-size: 30px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 15px;
}

.commerce-section-text {

  color: #fff;
  line-height: 1.6;
}



/* faq */
.faq-section {
  background-color: var(--techguru-black);
  color: #333;
}

.faq-title {
  font-size: 60px;
  font-weight: 800;
  color: #fff;
}

.faq-title span {
 color: #ffd25d;
  font-weight: 800;
}

.divider {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
}

.divider::before,
.divider::after {
  content: "";
  height: 1px;
  width: 60px;
  margin: 0 10px;
}

.leaf-icon {
  font-size: 1.2rem;
  color: #6a994e;
}

.faq-list li {
  background: #f4f4f4;
  padding: 12px 15px;
  margin-bottom: 8px;
  border-radius: 4px;
  transition: all 0.3s ease;

}

.faq-list li:hover {
  background: #e7e7e7;
  transform: translateX(5px);
}
footer.site-footer-two {
    padding: 30px 0;
        background: #051427;
}

/* contact*/

.form-control {
    border-radius: 0.25rem;
    border: 1px solid #ccc; /* हल्का बॉर्डर रंग */
    padding: 0.75rem 0.75rem; /* इनपुट के अंदर ज़्यादा जगह */
    box-shadow: none; /* Bootstrap के डिफ़ॉल्ट फोकस शैडो को हटाएँ */
}

.form-control:focus {
    border-color: #007bff; /* फोकस पर नीला बॉर्डर (या कोई और रंग) */
    box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25);
}

.form-label {
    font-size: 0.9rem;
    color: #333;
}

/* Contact Info Styling */
.contact-info-section p {
    font-size: 0.95rem;
    line-height: 1.5;
}

.contact-info-section svg {
    color: #008080; /* Email और SMS आइकन के लिए teal जैसा रंग */
}

.contact-info-section .text-success {
    color: #008080!important; /* SMS के लिए bold/teal रंग */
}

/* Locations Section Styling */
.locations-title {
    font-size: 60px;
    color: #fff;
    border-bottom: 3px solid #008080; 
    padding-bottom: 5px;
    display: inline-block;
}

.headquarters-box {
    
}

.headquarters-box .arrow-up {
    font-size: 1.5rem;
    font-weight: bold;
    color: #555;
   
}


.headquarters-box .small {
    
    line-height: 1.3;
    color: #555;
}



/* seo package */

.pricing-card {
    /* Corner radius and default padding/styles */
    border-radius: 10px;
    color: white; /* सभी टेक्स्ट को सफेद रखें */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    padding: 20px 0; /* टॉप और बॉटम पैडिंग */
    min-height: 550px; /* ऊँचाई को नियंत्रित करने के लिए (ज़रूरतनुसार एडजस्ट करें) */
    position: relative;
    overflow: hidden; /* ताकि ऊपर का डिज़ाइन ठीक से कट हो */
}

/* Color Schemes */
.basic-card { background-color: #38c5ae; } /* Teal/Green */
.standard-card { background-color: #f7745e; } /* Orange/Coral */
.professional-card { background-color: #ffc93c; } /* Yellow/Mustard */
.enterprise-card { background-color: #38c5ae; } /* Teal/Green (मूल छवि से मेल खाने के लिए) */

/* Card Top Section (Icon and Plan Name) */
.card-top {
    padding-top: 30px;
}

/* Icon Styling (The circles with plus signs) */
.icon-box {
    width: 100px;
    height: 100px;
    background-color: rgba(255, 255, 255, 0.2); /* हल्का सफेद बैकग्राउंड */
    border-radius: 50%;
    margin: 0 auto 15px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 10;
}

.plan-icon {
    width: 60px; /* SVG/Image को उचित आकार दें */
    height: 60px;
}

.plan-name {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 20px;
}

/* Price Section Styling */
.price-box {
    margin-top: 20px;
}

.price-amount {
    font-size: 3rem; /* $XXX का बड़ा साइज़ */
    font-weight: 700;
    line-height: 1;
    display: block;
}

.price-period {
    font-size: 1rem;
    font-weight: 400;
    display: block;
}

/* Features List Styling */
.features-list li {
    font-size: 0.95rem;
    margin-bottom: 5px;
    padding: 2px 0;
    /* List items को थोड़ा अलग करने के लिए */
}

/* Footer and Button Styling */
.card-footer {
    background-color: transparent; /* Transparent footer background */
    border-top: none;
    padding-bottom: 30px;
    padding-left: 20px;
    padding-right: 20px;
}

.pricing-btn {
    width: 100%;
    max-width: 200px; /* बटन की चौड़ाई सीमित करें */
    border: 2px solid white;
    color: white;
    font-weight: 600;
    padding: 10px 15px;
    border-radius: 30px; /* गोल कोनों वाला बटन */
    transition: all 0.3s;
}

.pricing-btn:hover {
    background-color: white;
    /* बटन के बैकग्राउंड रंग के आधार पर टेक्स्ट कलर बदलें */
    color: #38c5ae; /* BASIC/ENTERPRISE */
}

/* Individual Button Hover Colors */
/* Hover color for BASIC/ENTERPRISE buttons */
.basic-btn:hover, .enterprise-btn:hover {
    color: #38c5ae;
}

/* Hover color for STANDARD button */
.standard-btn:hover {
    color: #f7745e;
}

/* Hover color for PROFESSIONAL button */
.professional-btn:hover {
    color: #ffc93c;
}



/* delhi */

 h1 {
      text-align: center;
      font-weight: 700;
      margin-bottom: 2rem;
    }
    h3 {
      font-weight: 600;
      color: #fff;
    }
    p {
      color: #cfd8e3;
    }
    .service-box {
      padding: 20px;
    }
    .service-box h3 {
      margin-bottom: 15px;
    }



    /* delhi */

    
.delhi-content-section {
  background-color: #0b192c; /* soft beige background */
}

.delhi-content-section span{
color: #ffd25d;
} 
.service-box {
  background-color: #fff; 
  padding: 30px;
  border-radius: 6px;
  height: 100%;
  transition: all 0.3s ease;
}


.delhi-content-section {
  /* background-color: #0b192c; */
}

.delhi-content-section span{
color: #ffd25d;
} 
.delhi-content-box {
  background-color: #fff;
    /* padding: 30px; */
    border-radius: 20px;
    height: 100%;
    transition: all 0.3s 
ease;
    padding: 25px;
}


.delhi-content-title {
  font-size: 23px;
  font-weight: 600;
  color: #000;
  margin-bottom: 15px;
}

.delhi-content-text {
 text-align: justify;
  color: #000;
  line-height: 1.6;
}

.delhi-content-title {
  
  font-weight: 600;
  color: #000;
  margin-bottom: 15px;
}

.delhi-content-text {
 
  color: #000;
  line-height: 1.6;
}

/* gazibad  */
.image-container{
  width: 600px;
  height: auto;
}
.image-container img{
  width: 100%;
}


.hero-section {
      background: linear-gradient( rgba(16, 2, 107, 0.85), rgba(16,2, 107, 0.85)), 
                  url('./../images/our-service/banner.png');
                  background-attachment: fixed;
      background-size: cover;
      background-position: center;
      color: #fff;
      text-align: center;
      padding: 140px 20px;
    }

    .hero-title {
      font-size: 60px;
      font-weight: 800;
      line-height: 1.3;
    }

    .hero-subtitle {
      
      margin-top: 20px;
      color: #fff;
    }

    .btn-outline-light {
      border-radius: 50px;
      padding: 12px 36px;
      font-weight: 600;
      margin-top: 30px;
      transition: all 0.3s ease;
    }

    

    @media (max-width: 768px) {
      .hero-title {
        font-size: 2.5rem;
      }
    }



      .best-box{
      text-align: center;
      padding: 30px 20px;
      border-radius: 15px;
      transition: all 0.3s ease;
      background: #fff;
    }
   
    .icon-box {
      width: 80px;
      height: 80px;
      margin: 0 auto 20px;
      border-radius: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .icon-box i {
      font-size: 36px;
    }
    h4 {
      font-weight: 700;
      margin-bottom: 15px;
      color: #000;
    }
    
    a.learn-more {
      display: inline-block;
      margin-top: 10px;
      color: #10306b;
      font-weight: 600;
      text-decoration: none;
    }
    /* advantage */
   .middel-image img{
width: 75%;
   }
   .middel-image{
  width: 600px;
  height: auto;
}



/* inner box noida */
.inner-box {
    
      text-align: center;
      padding: 30px 20px;
      border-radius: 15px;
      transition: all 0.3s ease;
      
    
}


.hero-section-two {
      background: linear-gradient(rgb(10 6 38), rgb(12 5 54 / 57%)), url(./../images/our-service/back.png);
                  background-attachment: fixed;
      background-size: cover;
      background-position: center;
      color: #fff;
      text-align: center;
      padding: 140px 20px;
    }


    /* feature section */
    .feature-section {
            padding: 10px; /* Bootstrap's py-5 */
           
        }

        /* Styling for the main headline */
        .headline {
            font-size: 37px;
            font-weight: 900;
            line-height: 1.1;

        }

        /* Custom styling for the feature list items */
        .feature-item {
            margin-bottom: 1.5rem;
            display: flex; /* To align the arrow and text */
        }

        .feature-item i {
            color: #2c9aff; /* Approximate blue color for the arrow */
            font-size: 1rem;
            margin-right: 0.5rem;
            padding-top: 0.2rem; /* Minor adjustment to align with text */
        }

        .feature-content h5 {
            font-weight: 600;
            color: #fff;
            margin-bottom: 0.2rem;
        }

        /* Styling for the red-bordered button */
        .btn-custom-outline {
            color: #dc3545; /* Red text */
            border-color: #dc3545; /* Red border */
            border-radius: 40px; /* Highly rounded corners */
            padding: 0.5rem 2rem;
            font-weight: 600;
            margin-top: 1.5rem;
        }
        .btn-custom-outline:hover {
            background-color: #dc3545;
            color: white;
        }

        /* Placeholder for the graphic on the right side */
        .graphic-placeholder {
            /* This is a simple placeholder. You would replace this with the actual SVG/image. */
            width: 100%;
            height: 400px;
            background: url('placeholder-graphic.png') no-repeat center center/contain; /* Replace 'placeholder-graphic.png' with the actual image path */
            /* Since I cannot reproduce the complex graphic with pure CSS, the structure below uses a simple div to hold the space for your image. */
        }



/* Ensure Font Awesome is linked in your HTML <head> */
/* <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"> */

.animation-container {
    position: relative;
    width: 600px; /* Adjust as needed */
    height: 600px; /* Adjust as needed */
    margin: 50px auto;
    border-radius: 50%; /* Just for visualization of the main area */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* To keep elements within bounds if needed */
}

.center-content {
    position: absolute;
    /* Adjust size and position to match the central folder image */
    width: 300px; 
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2; /* Ensure it's above rotating elements */
}

.folder-group {
    display: flex;
    align-items: flex-end; /* Align folders at the bottom */
    gap: 10px; /* Space between folders */
    position: relative;
}

.folder {
    width: 80px; /* Adjust folder size */
    height: auto;
    opacity: 0.8; /* Make them slightly transparent */
}

.social-icons-stack {
    position: absolute;
    top: -10px; /* Position above the middle folder */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
}

.twitter-icon, .facebook-icon, .google-plus-icon {
    font-size: 30px; /* Adjust icon size */
    color: white;
    padding: 5px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.twitter-icon { background-color: #1DA1F2; }
.facebook-icon { background-color: #4267B2; }
.google-plus-icon { /* Position separately */
    background-color: #DB4437;
    position: absolute;
    bottom: -15px; /* Adjust position for Google+ below folder */
    right: -10px;
}


/* --- Rotating Elements --- */
.animation-container {
    position: relative;
    width: 600px; /* Adjust as needed */
    height: 600px; /* Adjust as needed */
    margin: 50px auto;
    border-radius: 50%; /* Just for visualization of the main area */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* To keep elements within bounds if needed */
}

.center-content {
    position: absolute;
    /* Adjust size and position to match the central folder image */
    width: 300px; 
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2; /* Ensure it's above rotating elements */
}

.folder-group {
    display: flex;
    align-items: flex-end; /* Align folders at the bottom */
    gap: 10px; /* Space between folders */
    position: relative;
}

.folder {
    width: 80px; /* Adjust folder size */
    height: auto;
    opacity: 0.8; /* Make them slightly transparent */
}

.social-icons-stack {
    position: absolute;
    top: -10px; /* Position above the middle folder */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
}

.twitter-icon, .facebook-icon, .google-plus-icon {
    font-size: 30px; /* Adjust icon size */
    color: white;
    padding: 5px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.twitter-icon { background-color: #1DA1F2; }
.facebook-icon { background-color: #4267B2; }
.google-plus-icon { /* Position separately */
    background-color: #DB4437;
    position: absolute;
       background-color: #DB4437;
    position: absolute;
    bottom: -1px;
    right: -54px;
}


/* --- Rotating Elements --- */
.rotating-elements {
    position: absolute;
      width: 87%;
    height: 89%;
    /* This is the key: make elements rotate around their own center */
    animation: rotateAroundCenter 15s linear infinite; /* Adjust duration and timing */
    transform-origin: center center; /* Default, but good to be explicit */
    z-index: 1;
}

.icon-wrapper {
    position: absolute;
    width: 40px; /* Size of the individual icon container */
    height: 40px;
    border-radius: 50%;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    border: 1px solid #eee;
}

.icon-wrapper i {
    font-size: 18px; /* Size of the Font Awesome icon */
}

/* Icon colors */
.red-minus { color: #dc3545; }
.green-check { color: #28a745; }
.blue-crown { color: #007bff; } /* Assuming blue for crown */
.grey-eye { color: #6c757d; }

/* Positioning for each individual icon */
/* These values need to be carefully adjusted based on the desired radius and distribution */
.icon-1 { top: 5%; left: 45%; }
.icon-2 { top: 15%; right: 15%; }
.icon-3 { top: 45%; right: 5%; }
.icon-4 { bottom: 15%; right: 10%; }
.icon-5 { bottom: 5%; left: 40%; }
.icon-6 { bottom: 20%; left: 10%; }
.icon-7 { top: 40%; left: 5%; }
.icon-8 { top: 10%; left: 15%; }


/* Keyframes for rotation */
@keyframes rotateAroundCenter {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Optional: To make individual icons not rotate with the circle, counter-rotate them */
.icon-wrapper {
    animation: counterRotate 15s linear infinite; /* Match duration of parent rotation */
}

@keyframes counterRotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(-360deg);
    }
}



/* laxmi nagar */

/* Define the dark section background and text color */
        .dark-section {
           
            color: #ffffff; /* White text for contrast */
            padding: 5rem 0;
        }

        /* Styling for the small "About Us" tag */
        .about-tag {
            font-size: 0.9rem;
            font-weight: 500;
            color: #ffffff;
            margin-bottom: 1rem;
        }
        .about-tag::before {
            content: '+';
            color: #ccff00; /* Neon yellow-green */
            margin-right: 5px;
            font-size: 1.2rem;
            line-height: 0;
            position: relative;
            top: 2px;
        }

        /* Styling for the main heading */
        .main-heading {
            font-size: 60px; /* Adjusted for readability */
            font-weight: 800;
            line-height: 1.2;
            margin-bottom: 2rem;
        }

        /* Highlighted text styling */
        .highlight {
               color: #ffd25d;/* Neon yellow-green */
            background-color: transparent; /* Text only, no background box */
            font-weight: 900;
        }

        /* Styling for the feature boxes (Experience, Ingenuity, Low-cost) */
        .feature-box {
            text-align: center;
            padding: 1.5rem 1rem;
        }
        
        .feature-box h4 {
            font-weight: 600;
            margin-top: 1rem;
            margin-bottom: 0.5rem;
        }

        /* Icon styling */
        .feature-box i {
            font-size: 2.5rem;
            color: #ccff00; /* Neon color for icons */
            display: block;
            margin: 0 auto;
        }
        
        /* Darker text for description */
        /* .text-faded {
            color: #a0a0a0;
            font-size: 0.9rem;
        } */


        /* why choes */


        /* Base Section Styling */
        .case-studies-header {
           
            color: #ffffff; /* Default white text for body */
            padding: 5rem 0;
            position: relative; /* Needed for absolute positioning of the large title */
            overflow: hidden; /* Important to keep the large text contained */
        }

        /* --- Large Title Effect --- */

        .large-title {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            display: flex;
            font-size: 60px; /* Use viewport units for huge, responsive text */
            font-weight: 900;
            line-height: 1;
             /* Control opacity to make it a subtle background */
            z-index: 0; /* Keep it in the background */
            white-space: nowrap; /* Prevent word wrap */
        }

        .large-title .case {
            color:     #ffd25d;; /* Neon Yellow-Green */
            padding-right: 0.2em; /* Spacing between CASE and STUDIES */
        }

        .large-title .studies {
            color: transparent; /* Text outline effect */
            -webkit-text-stroke: 1px #fff; /* Outline color */
     
            letter-spacing: -0.05em; /* Adjust letter spacing */
        }
        
        /* Adjust for smaller screens where 15vw is too large */
        @media (max-width: 992px) {
            .large-title {
                font-size: 2.3rem;
                top: 2rem;
                display: flex;
                flex-wrap: wrap;
                
            }
            .large-title .case {
            color:     #ffd25d;; /* Neon Yellow-Green */
            padding-right: 0.2em; /* Spacing between CASE and STUDIES */
        }

        .large-title .studies {
            color: transparent; /* Text outline effect */
            -webkit-text-stroke: 1px #fff; /* Outline color */
     padding: 10px 10px;
            letter-spacing: -0.05em; /* Adjust letter spacing */
        }

        }


        /* --- Content Styling --- */
        
        .content-area {
            position: relative; /* Ensure content is above the large title */
            z-index: 1;
            padding-top: 5rem; /* Push content down slightly from the top */
        }

        /* Small Projects Tag */
        .projects-tag {
            font-size: 0.9rem;
            font-weight: 500;
            color: #ffffff;
            margin-bottom: 0.5rem;
        }
        .projects-tag::before {
            content: '\2726'; /* Star/Sparkle Unicode character */
            color: #ccff00; /* Neon color */
            margin-right: 8px;
            font-size: 1rem;
        }

        /* Main Heading */
        .main-heading {
            font-size: 60px;
            font-weight: 800;
            line-height: 1.1;
            margin-bottom: 2rem;
            
        }

        /* Highlighted 'Projects' text */
        .main-heading .highlight {
              color: #ffd25d;; /* Neon Yellow-Green */
        }
        
        /* Paragraph Text */
        .paragraph-text {
            color: #a0a0a0; /* Lighter grey text */
            font-size: 1rem;
            line-height: 1.6;
        }

        .hero-section-three {
      background: linear-gradient(rgb(10 6 38), rgb(12 5 54 / 57%)), url(./../images/our-service/complexity.jpg);
                  background-attachment: fixed;
      background-size: cover;
      background-position: center;
      color: #fff;
      text-align: center;
      padding: 140px 20px;
    }
/* advantage */
.service-card {
            /* हल्की शैडो, जैसा कि इमेज में दिख रहा है */
            box-shadow: 0 4px 8px rgba(0,0,0,.05); 
            border: none;
            text-align: center;
            /* कार्ड के अंदर स्पेसिंग */
            padding: 20px 0; 
        }

        .icon-wrapper {
            /* आइकन के बैकग्राउंड बॉक्स के लिए स्टाइलिंग */
            display: inline-flex;
            justify-content: center;
            align-items: center;
            width: 70px;
            height: 70px;
            border-radius: 12px; /* इमेज के अनुसार हल्का गोल कोने */
            margin-bottom: 20px;
            /* आइकन को सेंटर करने के लिए */
            margin-left: auto;
            margin-right: auto;
        }

        /* प्रत्येक आइकन के लिए विशिष्ट रंग (इमेज के रंगों से मेल खाने की कोशिश) */
        .icon-purple { background-color: #f3e5f5; color: #9c27b0; } 
        .icon-blue { background-color: #e0f7fa; color: #00bcd4; }
        .icon-red { background-color: #ffebee; color: #f44336; }
        .icon-green { background-color: #e8f5e9; color: #4caf50; }
        .icon-yellow { background-color: #fffde7; color: #ffeb3b; }
        .icon-orange { background-color: #fff3e0; color: #ff9800; }

        .card-title {
            font-weight: bold;
            font-size: 1.25rem;
            margin-bottom: 15px;
        }

        .card-text {
            color: #6c757d;
            font-size: 0.95rem;
            margin-bottom: 20px;
        }
        
        .learn-more {
            color: #007bff; /* Bootstrap primary color */
            text-decoration: none;
            font-weight: 500;
        }

        .animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}




/* button */

.btn-contact {
    display: inline-block;
    padding: 0.6rem 1rem;
    border-radius: 8px;
    background:#e7b021;
    color: white;
    text-decoration: none;
    font-weight: 600;
    /* box-shadow: 0 4px 10px rgba(11,116,222,0.18); */
    transition: transform .08s ease, box-shadow .08s ease;
  }
  .btn-contact:active { transform: translateY(1px); }
  .btn-contact:focus { outline: 3px solid rgba(136, 143, 150, 0.4); outline-offset: 2px; }

  .btn-contact:hover{
    background-color: #cbd2da;
    color: #000;
  }