.contact-form1
       {
            padding: 35px;
            margin-right: 10px;       
            border-radius: 7%;
            width: 90%;
            margin-top: -6%;  
            background-color: white;     
       }
.contact-form1 h4
{ 
        color:black;
        font-size:28px;

}
 /* Large Tablets */
        @media (max-width: 992px) {
            .contact-form1{
                border-radius: 20px;
            }
        }
        
        /* Tablets */
        @media (max-width: 768px) {
            .contact-form1{
                border-radius: 20px;
            }
        }
        
        /* Mobile */
        @media (max-width: 576px) {
            .contact-form1{
                border-radius: 20px;
            }
        }
        
        /* Small Mobile */
        @media (max-width: 400px) {
            .contact-form1{
                border-radius: 10px;
            }
        }

        /* Mobile: the desktop layout floats this form over the hero image
           with a negative top margin and fixed 35px padding — once columns
           stack on mobile that negative margin pulls it into the heading
           above, and 90% width + 35px padding + margin-right leaves too
           little room for the inputs. */
        @media (max-width: 576px) {
            .contact-form1{
                width: 100%;
                margin-right: 0;
                margin-top: 25px;
                padding: 20px;
            }

            /* hr-hero-content only carries pl-160 (left padding) with no
               matching right-side padding class — fine on desktop where
               the background image fills the right side, but on mobile it
               left the form hugging the right edge with no breathing room.
               Add matching right padding so it sits evenly centered. */
            .hr-hero-content{
                padding-right: 20px;
            }
        }
      
.conn 
{
       width: 100%;       
       display: flex;
       padding-right: 3%;
       padding-left: 3%;;
}  


.con
{
       color: #FF4D67; 
}

                     input::placeholder
                     {
                     color: gray;
                     font-size: 16px;
                     
                     opacity: 4.9; /* Makes the placeholder fully visible */
                     }


           .input-select select
           {
              width: 95%;
              height: 52px;
              margin-left: 3%;
              border: 1px solid #ccc;
              border-radius: 5%;
           }           
       input[type="text"]
       {
              width: 90%;
              height: 52px;
              padding: 8px 15px;
              margin: 8px 0;
              display: inline-block;
              border: 1px solid #ccc;
              box-sizing: border-box;
              border-radius: 5%;
       }
       input[type="email"] 
       {
              width: 90%;
              height: 52px;
              padding: 12px 20px;
              margin: 8px 0;
              display: inline-block;
              border: 1px solid #ccc;
              box-sizing: border-box;
       }
        input[type="tel"] 
       {
              width: 100%;
              padding: 12px 20px;
              margin: 8px 0;
              display: inline-block;
              border: 1px solid #ccc;
              box-sizing: border-box;
       }

      textarea
       {
              width: 100%;
              height: 10vh;
              padding: 12px 20px;
              margin: 8px 0;
              display: inline-block;
              border: 1px solid #ccc;
              box-sizing: border-box;
       }


       .newser 
       {
              border:1px solid rgb(116, 114, 114);
              padding: 3%;
              border-radius:2%;

       }
.newone 
{
       display: flex;
}
.newo 
{
       padding-left: 6%;
}

.tot h4
{
    font-size:46px;
    font-weight:450;
    line-height:1;
    color:#000;
    letter-spacing:-2px;
     font-family: "Inter", "Poppins", "Manrope", Arial, sans-serif;
    
}

.underline{
    position:relative;
    display:inline-block;
}

.underline::after{
    content:"";
    position:absolute;
    left:-10px;
    bottom:-18px;
    width:110%;
    height:26px;
    border-bottom:6px solid #c8ef12;
    border-radius:50%;
}

@media (max-width:992px){

.hero{
    padding:50px 30px;
}

.tot h4{
    font-size:35px;
    line-height:1;
}

.underline::after{
    height:22px;
    border-bottom:5px solid #c8ef12;
}

}

/* Mobile */
@media (max-width:768px){

.tot{
    padding:30px 20px;
}

.tot h4{
    font-size:30px;
    line-height:1.10;
    letter-spacing:-1px;
    margin-top: -7%;
    font-family: "Inter", "Poppins", "Manrope", Arial, sans-serif;
}

.underline::after{
    bottom:-12px;
    height:18px;
    border-bottom:4px solid #c8ef12;
}

}
@media (max-width:768px){

.hon{
       margin-top:10%;
}
}
@media (max-width:768px){

.poon{
       margin-top:5%;
}
}
@media (max-width:768px){

.pon{
       margin-top:-10%;
}
}




.section-title{
    color:white;
    font-size:52px;
    font-weight:700;
    margin-bottom:20px;
    font-family: "Inter", "Poppins", "Manrope", Arial, sans-serif;
}

.service-card{
    background:black;
    border:2px solid rgba(255,255,255,.12);
    border-radius:15px;
    padding: 17px 13px 17px 13px;
    display:flex;
    flex-direction:column;
    transition:.4s;
}


.service-card:hover{
     background-color:#18114a;
    transform:translateY(-8px);
}

.service-card h4{
    color:#198754;
    font-size:24px;
    font-weight:700;
    line-height:1.4;
    margin-bottom:20px;
    font-family: "Inter", "Poppins", "Manrope", Arial, sans-serif;
}
.service-card:hover h4,p
{
   color:white;
}


.service-card p{
    color:#e4e4e4;
    font-size:14px;
    line-height:1.9;
    flex:1;
}

.card-footer-box{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:35px;
}

.service-btn
{
    color:#fff;
    text-decoration:none;
    border:1px solid #FF4D67;
    padding:12px 28px;
    border-radius:40px;
    transition:.3s;
    font-size:16px;
}

.service-btn:hover{
    background:#FF4D67;
    border-color:#8B5CF6;
    color:#fff;
}

.arrow-btn{
    width:46px;
    height:46px;
    border:1px solid #fff;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#fff;
    text-decoration:none;
    font-size:22px;
    transition:.3s;
}

.arrow-btn:hover{
    background:#FF4D67;
    border-color:#8B5CF6;
    color:#fff;
}

/*-----------------------
Tablet
-----------------------*/

@media (max-width:991px){

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

.service-card{
    padding:30px;
}

.service-card h4{
    font-size:22px;
}

.service-card p{
    font-size:16px;
}

}

/*-----------------------
Mobile
-----------------------*/

@media (max-width:767px){

.services{
    padding:60px 0;
}

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

.service-card{
    padding:25px;
}

.service-card h4{
    font-size:20px;
}

.service-card p{
    font-size:15px;
    line-height:1.8;
}

.service-btn{
    padding:10px 22px;
    font-size:15px;
}

.arrow-btn{
    width:42px;
    height:42px;
    font-size:20px;
}

}

/* Small Mobile */

@media (max-width:480px){

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

.service-card{
    padding:20px;
}

.service-card h4{
    font-size:18px;
}

.service-card p{
    font-size:14px;
}

.service-btn{
    font-size:14px;
    padding:9px 18px;
}
}
/* This is a Casse CArd comment */
.flip-box {
  background-color: transparent;
  width: 300px;
  height: 180px;
  perspective: 1000px;
   border:none;
}

.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.case-study{
    overflow:hidden;
    background-color:black;
   
}

.case-study h2{
    font-size:40px;
    font-weight:700;
}

.study-card{
    position:relative;
    border-radius:15px;
    overflow:hidden;
    height:350px;
    transition:.4s;
    background:#111;
}

.study-card img{
    width:100%;
    height:270px;
    object-fit:cover;
    display:block;
    transition:.4s;
}

.study-card:hover img{
    transform:scale(1.05);
}

.overlay-title{
    position:absolute;
    bottom:75px;
    left:18px;
    color:#8E44FF;
    font-size:54px;
    font-weight:800;
    line-height:1;
    text-transform:uppercase;
}

.last-footer-box{
    background:#171528;
    padding:18px 18px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.last-footer-box h5{
    color:#198754;
    font-size:24px;
    margin:0;
    font-weight:600;
}

.last-footer-box a{
    width:34px;
    height:34px;
    background:#FF4D67;
    color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    text-decoration:none;
    font-size:18px;
}

.study-card:hover{
    transform:translateY(-8px);
}



.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
}

.flip-box-front, .flip-box-back {
  position: absolute;
  width: 100%;

  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-box-front {
  background-color: #bbb;
  color: black;
}

.flip-box-back {
  background-color:#03045e;
  color: white;
  height:400px; 
  transform: rotateY(180deg);
}

.flip-box-back p
{
        color:white;
        padding:20px;
         text-align:center;
}
.casse { margin-top:10%;}


/*      Reviews Sections   */
/* Testimonial Section (new namespaced version) */
.ceen h3
{
    color:white;
    font-size:35px;
    font-weight: 400;
    text-align: center;
    
}
.teen p
{
    text-align: left;
    padding-top:2%;
    font-size:15px;
     
}

.ween 
{
    margin-top:30px; ;
    background-color:#18114a;
    padding: 30px 25px 30px 25px ;
    border-radius:10px;
    height: 320px;
}

.ween:hover
{
    border: 1px solid white;
}
.ween h3{ 
    color:white;
    font-size:24px;
    
}
.ween p 
{
    font-size:14px;
   
}


.seo-section{
    padding:70px 0;
}
.seos{
    width:100%;
    padding:10px 180px 10px 150px;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:10px;
}
.seo-content{
    flex:1;
}
.seo-content h4{
    font-size:40px;
    line-height:1.15;
    font-weight:400;
}
.seo-content hr{
    border:none;
    height:1px;
    background:#ddd;
    margin-bottom:30px;
}
.seo-content p{
    font-size:16px;
    line-height:1.6;
    color:#333;
}
.seo-content ul{
    padding-left:22px;
}
.seo-content ul li{
    font-size:15px;
    margin-bottom:15px;
    line-height:1.6;
}
.seo-image{
    flex:1;
    text-align:right;
}
.seo-image img{
    width:100%;
    max-width:650px;
    height:auto;
}

/*-----------------------
 Tablet
------------------------*/
@media(max-width:991px){
    .seos{
        padding:10px 40px;
        gap:40px;
    }
    .seo-content h4{
        font-size:32px;
    }
    .seo-content p{
        font-size:16px;
    }
    .seo-content ul li{
        font-size:15px;
    }
}

/*-----------------------
 Mobile
------------------------*/
@media(max-width:767px){
    .seos{
        padding:50px 20px;
        flex-direction:column;
        text-align:center;
        gap:30px;
    }
    .seo-content h4{
        font-size:26px;
    }
    .seo-content p{
        font-size:16px;
        line-height:1.8;
    }
    .seo-content ul{
        text-align:left;
        display:inline-block;
        margin-top:20px;
        padding-left:0;
    }
    .seo-content ul li{
        font-size:16px;
        margin-bottom:10px;
    }
    .seo-image{
        text-align:center;
    }
    .seo-image img{
        max-width:100%;
    }
}


.cees a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;

    background:#FF4D67;;
    color:#000;
    text-decoration:none;

    padding:10px 30px;
    border-radius:10px;

    font-size:18px;
    font-weight:500;
    letter-spacing:1px;
    text-transform:uppercase;

    transition:0.3s ease;
}

.cees span{
    font-size:24px;
    transition:.3s;
}

.cees a:hover{
    background:#000;
    color:#fff;
    border:1px solid #FF4D67 ;
}

.cees a:hover span{
    transform:translate(5px,-5px);
}

/* Tablet */
@media (max-width:992px){

.cees a{
    padding:16px 32px;
    font-size:20px;
}

.cees a span{
    font-size:22px;
}

}

/* Mobile */
@media (max-width:576px){

.cees a{
    width:100%;
    max-width:260px;
    padding:15px 20px;
    font-size:17px;
    gap:8px;
    border-radius:8px;
}

.cees a span{
    font-size:18px;
}

}

















/* .flip-box had a hardcoded 300px width, which worked inside the old
   fixed-column grid but doesn't adapt to the different slide widths the
   case-studies Swiper creates at each breakpoint. */
.ff-case-slider .flip-box {
    width: 100%;
}

/* Touch devices don't get a real :hover state, so the flip-box cards
   never flipped on mobile. A JS tap toggles this class as a hover
   equivalent. */
.flip-box.flipped .flip-box-inner {
    transform: rotateY(180deg);
}

/* .video-section's container-fluid has inline padding:0 90px (180px
   total, no responsive handling at all), which squeezed this section's
   text down to ~250px wide on mobile. Combined with text-align:justify,
   that narrow width was stretching word-spacing into ugly gaps. Using
   !important since the original padding is an inline style. */
@media (max-width: 576px) {
    .video-section .container-fluid {
        padding: 0 20px !important;
    }
    .video-section p {
        text-align: left !important;
    }
}

/* Blog slider and "What our customers say" testimonial slider share the
   .hr-team-arrow wrapper class for their prev/next buttons. Both now run
   on autoplay, so the manual arrows are redundant clutter on mobile. */
@media (max-width: 576px) {
    .hr-team-arrow {
        display: none;
    }
}

/* Meet Our Team carousel: hide manual arrows on mobile since it now
   autoplays, and center the team-box within its slide (it previously
   sat inside a fixed grid column, not a slider). */
@media (max-width: 576px) {
    .ff-team-arrow-wrap {
        display: none !important;
    }
    #meetTeamSection .team-box {
        margin-left: auto;
        margin-right: auto;
    }
}

/* Correction: the border/padding I removed from testimonial slides
   earlier ("What our Customer Says") was NOT leftover debug styling —
   it was the actual bordered-card look that visually separated each
   column on desktop. Restoring it on desktop/tablet. Mobile keeps the
   nicer shadow-card treatment added below instead, since a plain black
   border with only 5px padding looked cramped on a single-column phone
   layout. */
.hr-team-active .tp-blog-item {
    border: 1px solid #000;
    padding: 5px;
}
@media (max-width: 576px) {
    .hr-team-active .tp-blog-item {
        border: none;
        padding: 0;
    }
}

/* Blog, testimonial ("What our customers say"), and team sliders all
   show one item at a time on mobile, so there's no adjacent card to
   create visible separation. Giving each card its own background,
   shadow, and rounded corners makes it read as a distinct card instead
   of content floating on the page background. */
@media (max-width: 576px) {
    .hr-blog-active .tp-blog-item,
    .hr-team-active .tp-blog-item {
        background: #fff;
        border-radius: 14px;
        overflow: hidden;
        box-shadow: 0 4px 18px rgba(0,0,0,0.10);
    }
    .hr-blog-active .tp-blog-content,
    .hr-team-active .tp-blog-content {
        padding: 16px;
    }
    .ff-team-slider .team-box {
        background: #fff;
        border-radius: 14px;
        box-shadow: 0 4px 18px rgba(0,0,0,0.10);
        padding: 20px 16px;
    }
}

/* Case Studies: run the original desktop grid (with its zig-zag stagger)
   and the mobile one-at-a-time slider as two separate blocks, switching
   between them by breakpoint, so desktop stays pixel-identical to before
   and only mobile gets the slider treatment. */
.case-study-mobile-slider {
    display: none;
}
@media (max-width: 576px) {
    .case-study-desktop-grid {
        display: none;
    }
    .case-study-mobile-slider {
        display: block;
    }
}

/* Services ("What We Provide") and Meet Our Team: same pattern as Case
   Studies — original desktop layout in one block, mobile slider in a
   separate block, toggled by breakpoint. */
.services-mobile-slider,
.team-mobile-slider {
    display: none;
}
@media (max-width: 576px) {
    .services-desktop-grid,
    .team-desktop-grid {
        display: none;
    }
    .services-mobile-slider,
    .team-mobile-slider {
        display: block;
    }
}

/* Testimonial and blog images use the theme's "tp-anim-img" reveal
   animation, which starts at opacity:0 and relies on a scroll-triggered
   JS animation to fade it in. That trigger doesn't reliably fire for
   images inside a Swiper carousel (slides are shown via transform, not
   real scroll position), so the image stays invisible while still
   reserving its full layout space — which is exactly the blank area
   above each testimonial/blog card's text. Forcing it visible here. */
.hr-team-active .tp-anim-img,
.hr-blog-active .tp-anim-img {
    opacity: 1 !important;
}