@import url('https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap');

body {
    font-family: 'Urbanist', sans-serif;
}



.hero-section {
    min-height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(-45deg, #ff8a00, #e73c7e, #FF9C00);
    background-size: 400% 400%;
    /* background: linear-gradient(135deg, #ff8a00 0%, #ff4d6d 100%);
            background-size: 300% 300%; */
    background-position: 100% 100%;
    animation: gradientSweep 4s ease-in-out forwards;

    animation: gradient 15s ease infinite;
}

/* custom own */
@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes gradientSweep {
    0% {
        background-position: 100% 100%;
    }

    100% {
        background-position: 0% 0%;
    }
}

.center-circle {
    width: 350px;
    height: 350px;
    background: white;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    opacity: 0;
    transform: scale(0);
    /* animation: circleAppear 1s ease-out 4s forwards; */
    animation: circleAppear 0.9s ease-out 3s forwards;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

@keyframes circleAppear {
    0% {
        opacity: 0;
        transform: scale(0);
    }

    50% {
        opacity: 1;
        transform: scale(1.1);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* VITAL text that appears first */
.vital-text {
    font-size: 64px;
    font-weight: 700;
    color: #ff4d6d;
    letter-spacing: -2px;
    text-align: center;
    position: absolute;
    opacity: 0;
    transform: translateY(20px);
    /* animation: vitalAppear 1s ease-out 5s forwards, vitalDisappear 1s ease-out 7s forwards; */
    animation: vitalAppear 0.9s ease-out 4s forwards, vitalDisappear 1s ease-out 7s forwards;
}

@keyframes vitalAppear {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes vitalDisappear {
    to {
        opacity: 0;
        transform: translateY(-20px);
    }
}

/* Main text container that appears after VITAL disappears */
.circle-text {
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    animation: textAppear 1s ease-out 8s forwards;
}

@keyframes textAppear {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.small-text {
    font-size: 30px !important;
    font-weight: 700;
    color: #ff4d6d;
    letter-spacing: 3px;
    margin-bottom: 10px;
    opacity: 0;
    animation: textAppear 0.8s ease-out 8.3s forwards;
}

.main-text {
    font-size: 65px !important;
    font-weight: 900;
    color: #ff4d6d;
    letter-spacing: -1px;
    line-height: 1;
    margin-bottom: 15px;
    opacity: 0;
    animation: textAppear 0.8s ease-out 8.6s forwards;
}

.agency-text {
    
    font-size: 34px !important;
    font-weight: 800 !important;
    letter-spacing: 16px !important;
    color: #ff4d6d;
    /* letter-spacing: 8px; */
    opacity: 0;
    animation: textAppear 0.8s ease-out 8.9s forwards;
}

.services-container {
    position: absolute;
    bottom: 50px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 80px;
    opacity: 0;
    transform: translateY(30px);
    animation: servicesAppear 1s ease-out 9.5s forwards;
}

@keyframes servicesAppear {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.service-item {
    color: white;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 2px;
    text-align: center;
    opacity: 0.9;
    transition: all 0.3s ease;
    cursor: pointer;
}

.service-item:hover {
    opacity: 1;
    transform: translateY(-3px);
}

.bottom-icon {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 2px;
    background: rgba(255, 255, 255, 0.6);
    opacity: 0;
    animation: iconAppear 1s ease-out 10s forwards;
}

@keyframes iconAppear {
    to {
        opacity: 1;
    }
}




/* logo css */
.fa-stop {
    font-size: 5px;
    color: orangered;
}




.divbutton a {
    margin-bottom: 5px !important;
    margin-left: 10px !important;
    border-radius: 30px;
    font-size: 13px !important;
      position: relative;
      color: #333;
      overflow: hidden;
      background: transparent;
      z-index: 1;
      border: 1px solid #333;
      padding: 12px 24px;
      font-family: sans-serif;
      text-decoration: none;
      display: inline-block;
      transition: all 0.3s ease;
    }

   .divbutton a:hover {
      color: white;
    }

   .divbutton a::before {
      content: "";
      position: absolute;
      width: 0%;
      height: 100%;
      background: #333;
      top: 0;
      left: 0;
      z-index: -1;
      transition: width 0.3s ease;
    }

   .divbutton a:hover::before {
      width: 100%;
    }

.borderboxed{
    box-sizing: border-box;
     /* background: #ff4d6d; */
   text-align: center;
    /* padding: 20px; */
    border-right: 1px solid #3333332b;;
    border-bottom: 1px solid #3333332b;
    /* background:  #000 !important; */
}
.imgbox{
    padding: 20px;
    text-align: center;
    /* height: 100px;
    width: 300px; */
  
}
.imgbox2{
    text-align: center;
    padding: 30px 36px !important;
}
.borderboxed img{
   height: 100%;
   width: 100%;
   object-fit: cover;
    /* opacity: 0.5; */
    /* filter: grayscale(100); */
}

/* portfolio section css */

.portfolio{
    padding: 60px !important;
    background: #FDFAEC;

}
.portfolioright{
    padding: 60px !important;
    background: #E5F6FE;
}
.portfolioimg{
   overflow: hidden;
    padding: 10px;
    height: 420px !important;
 /* background: #000; */
 width: 100%;
}
.portfolioimg img{
    height: 100%;
    width: 100%;
    object-fit: contain;
}

.iconlink{
    color: #212121;
  
    font-weight: bolder !important;
}
.iconlink:hover{
    color: #212121;
}
.arr{
    color: #BA5AE2;
    transition: 0.5s ease-in;

}
.iconlink:hover .arr{
    color: #F06F4F;
    transform: translateX(8px);
}




/* CTA section css */
.CTA{
     background-image: linear-gradient(to right, #FF9C00, #ED5E5D);
     padding: 160px 10px;
     margin-bottom: 20px;
     color: white;
     width: 100%;
}
.CTA h1{
    font-weight: 800;
    font-size: 31px;
}
.CTA p{
      font-style: italic;
      font-size: 20px;
      padding: 10px 0;
}


.btn-div{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.btn-div .b2{

 padding: 16px 60px;
    border-radius: 0;
    text-decoration: none;

}


.b2 {
 
 border: unset;
 border-radius: 15px;
 color: #f1f1f1;
 z-index: 1;
 background: transparent;
 position: relative;
 font-weight: 1000;
 font-size: 20px;
 font-weight: 900;
 /* -webkit-box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27); */
 /* box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27); */
 transition: all 250ms;

 overflow: hidden;
 border: 1px solid white;
}

.b2::before {

     border: 1px solid white;
 content: "";
 position: absolute;
 top: 0;
 left: -100%;
 height: 100%;
 width: 0;
 /* border-radius: 335px; */
 background-color: white;
 z-index: -1;
 -webkit-box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
 box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
 /* transition: all 1600ms */
 transition: all 0.5s;
}

.b2:hover {
 color: #212121;
}

.b2:hover::before {
 width: 100%;

 left: 0;
}


/* humble section start css */

.humble{
   
  background: #FDFAEC;
    /* background: #FDFAEC; */
    padding: 60px 0;
    position: relative;
    width: 100% !important;
}
    .section-text h1 {
      font-size: 4rem;
      font-weight: 800;
      line-height: 1.2;
      color: #2b2b2b;
      margin-bottom: 25px;
    }
    .section-text h1 span {
      color: #ff4c4c;
    }
    .section-text > p {
        
       
      color: #555;
    font-size: 16px;
    width: 80%;
   
    }

    .mid{
        padding: 5px;
        /* background: red; */
        display: flex;
        /* align-items: center; */
        gap: 10px;
        width: 95%;
    }
.midimg{
    /* background: #000; */
    height: 100px;
    width: 230px;
}
.midimg img{
    height: 100%;width: 100%;
    object-fit: contain;
}

.midcontent h2{
    font-size: 26px;
    margin-bottom: 30px;
}
.midcontent h5{
     color: #7A7F85;
    font-size: 15px;
}

    .btn-outline-dark {
      border-radius: 50px;
      padding: 10px 20px;
      font-weight: 600 !important;
    }
    .shadow-lg {
      box-shadow: 0 10px 20px rgba(0,0,0,0.15) !important;
    }
    /* Mobile adjustments */
    @media (max-width: 768px) {
      /* .section-text {
        text-align: center;
      } */
       .mid{
        width: 100%;
       }
.section-text > p{
    width: 99% !important;
}
.section-text h1 {
      font-size: 2rem;}

.font{
    text-align: center;
        font-size: 16px !important;
        line-height: 19px !important;
    }

     
    }

 

/* humble section end css */



.humbltbtn a {
    font-weight: 600 !important;
      position: relative;
      color: #333;
      overflow: hidden;
      background: transparent;
      z-index: 1;
      border: 1px solid #333;
      padding: 9px 28px;
      font-family: sans-serif;
      text-decoration: none;
      display: inline-block;
      transition: all 0.3s ease;
      border-radius: 30px;
    }

   .humbltbtn a:hover {
      color: white;
    }

   .humbltbtn a::before {
      content: "";
      position: absolute;
      width: 0%;
      height: 100%;
      background: #333;
      top: 0;
      left: 0;
      z-index: -1;
      transition: width 0.3s ease;
    }

    .humbltbtn a:hover::before {
      width: 100%;
    }


    /* humble right side css */
    .imageoverlaydiv{
        position: relative
    }


    .boxedimg{
        height: 250px;
        width: 70%;
        background: #000;
    }
.boxedimg .boximg1{
    height: 100%; width: 100%;
    object-fit: cover;
}
.boxedimg .boximg2{
    width: 220px;
     box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.5);
     position: absolute;
     content: "";
     left:20px;
     bottom: 60px;
}
.boxedimg .boximg3{
       width: 160px;
       height: 160px;
       object-fit: cover;
     box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.5);
      position: absolute;
     content: "";
     right:20px;
       bottom: 60px;
}
.iconheart{
     box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.235);
    height: 80px;
    width: 80px;
    align-content: center;
    border-radius: 50%;
    font-size: 35px !important;
    position: absolute;
    content: "";
    top: 70px;
    right: 38px;
     background-image: linear-gradient(to right, #FF9C00, #ED5E5D);
    color: white;
}

/* Responsive Design */
@media (max-width: 768px) {
    .center-circle {
        width: 300px;
        height: 300px;
    }

    .vital-text {
        font-size: 48px;
    }

    .main-text {
        font-size: 36px;
    }

    .agency-text {
        font-size: 18px;
        letter-spacing: 6px;
    }

    .small-text {
        font-size: 14px;
        letter-spacing: 2px;
    }

    .services-container {
        flex-direction: column;
        gap: 30px;
        bottom: 60px;
    }
    .portfolio {
        margin-bottom: 20px;
    }

     .btn-div{
    flex-direction: column;
}
.CTA{
    width: 100% !important;
    overflow: hidden;
}

.CTA h1{
  font-size: 24px !important;
}

 .humbltbtn{
    justify-content: center;
      }


      /* humble css right  */
      .boxedimg{
        width: 100% !important;
        height: 200px;
        margin-top: 40px !important;
      }


      
.boxedimg .boximg2{
    width: 160px;
     box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.5);
     position: absolute;
     content: "";
     left:0;
     bottom: -40px;
     object-fit: cover;
}
.boxedimg .boximg3{
       width: 110px;
       height: 110px;
       object-fit: cover;
     box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.5);
      position: absolute;
     content: "";
     right:10px;
       bottom: -40px;
}
.iconheart{
    top: 5px;
    right: -05px;
}

}

@media (max-width: 480px) {
    .center-circle {
        width: 260px;
        height: 260px;
    }
.center-circle::before{
    height: 310px !important;
    width: 310px !important;
}
    .vital-text {
        font-size: 36px;
    }
.small-text{
    font-size: 18px !important;
}
    .main-text {
        letter-spacing: 5px !important;
        font-size: 36px !important;
    }

    .agency-text {
        font-size: 23px !important;
        letter-spacing: 4px !important;
    }

    .services-container {
        gap: 20px;
    }

    .service-item {
        font-size: 12px;
        letter-spacing: 1px;
    }
    .portfolioimg{
        height: 300px !important;
    }
    .portfolio, .portfolioright{
        padding: 40px !important;
    }

}

/* Subtle ring effect around circle */
.center-circle::before {
    content: '';
    position: absolute;
    width: 390px;
    height: 390px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    /* animation: ringAppear 0.8s ease-out 4.5s forwards; */
    animation: ringAppear 0.2s ease-out 1.5s forwards;
}

@keyframes ringAppear {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }

    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* Floating particles */
.particle {
    position: absolute;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    /* animation: particleFloat 3s ease-out infinite; */
    animation: particleFloat 0.5s ease-out infinite;
}

@keyframes particleFloat {
    0% {
        opacity: 0;
        transform: translateY(0) scale(0);
    }

    50% {
        opacity: 1;
        transform: translateY(-50px) scale(1);
    }

    100% {
        opacity: 0;
        transform: translateY(-100px) scale(0);
    }
}

.particle:nth-child(1) {
    top: 20%;
    left: 20%;
    width: 4px;
    height: 4px;
    animation-delay: 11s;
}

.particle:nth-child(2) {
    top: 30%;
    right: 25%;
    width: 6px;
    height: 6px;
    animation-delay: 11.5s;
}

.particle:nth-child(3) {
    bottom: 30%;
    left: 30%;
    width: 3px;
    height: 3px;
    animation-delay: 12s;
}

.particle:nth-child(4) {
    bottom: 40%;
    right: 20%;
    width: 5px;
    height: 5px;
    animation-delay: 11.8s;
}




/* slider text */
.slidertext h1{
    font-weight: 900;
}
.slidertext span{
color: #F3623F;
}

/* overlay div */
.overlayuse{
    position: relative;
}

.imageslider{
    /* padding: 10px; */
    width: 100%;
    /* background: #000; */
    /* height: 100% !important; */
    height: 550px !important;
   
}
.imageslider img{
    height: 100% !important;
    width: 100%;
    object-fit: cover !important;
}


/* slider overlay content */
.slidercontent{
    color: #fff;
    /* align-content: end; */
    position: absolute;
    content: "";
   left: 0;
    bottom: 10px;
    /* height: 20%; */
    width: 100%;
    
    text-align: center;
    padding:20px 50px 0 50px 10px;
    background: #18111128;
    /* background: rgba(38, 35, 35, 0.361); */
}
.slidercontent h1{
    font-weight: 700;
    font-size: 21px;
}
.slidercontent span{
    font-weight: normal;
}


.slidercontent a {
    margin-top: 10px;
    font-weight: 500 !important;
      position: relative;
      color: #fff;
      overflow: hidden;
      background: transparent;
      z-index: 1;
      border: 1px solid #ffffff;
      padding: 8px 38px;
      border-radius: 30px;
      font-family: sans-serif;
      text-decoration: none;
      display: inline-block;
      transition: all 0.3s ease;
    }

   .slidercontent a:hover {
      color: #000;
    }

    .slidercontent a::before {
      content: "";
      position: absolute;
      width: 0%;
      height: 100%;
      background: #fff;
      top: 0;
      left: 0;
      z-index: -1;
      transition: width 0.3s ease;
    }

    .slidercontent a:hover::before {
      width: 100%;
    }

    @media (max-width: 768px){
 /* slider hegiht  */
        .slidercontent{
            padding: 30px 20px !important;
            bottom: 3px !important;
        }

        .slidercontent h1{
    font-weight: 700;
    font-size: 17px;
}

/* slide right side  */
.rightcontent{
    padding: 10px 20px !important;
}
  .rightcontent h1{
        font-weight: 800 !important;
        font-size: 16px !important;
    }
    .rightcontent p{
        padding: 5px 0;
    }
.rightbox{
    gap: 10px !important;
}
.rightbox{
    flex-direction: column !important;
}
.gaps{
    gap: 7px !important;
}

    }



   @media (max-width: 418px){

       
.imageslider{
    height: 480px !important;
}
.imageslider img{
    height: 100% !important;
}
    }



    /* slide right side content css */
    .rightbox{
        /* background: #1765e2; */
        padding: 10px;
        display: flex;
        gap: 30px;


    }
    .rightboximg{ text-align: center;
        padding: 10px;
     
        height:100% !important;

    }
    .rightboximg img{
        height: 190px;
        
        /* object-fit: contain; */
    }

    .rightcontent h1{
        font-weight: 800 !important;
        font-size: 22px;
    }
    .rightcontent p{
        font-weight: 500 !important ;
        padding: 10px 0;
    }

    .gaps{
        margin-top: 50px !important;
    }


    .font{
        font-family: serif;
        font-weight: 700;
        line-height: 40px;
        font-size: 29px;
        font-style: italic;
    }

.fa-quote-left{
    color:#F3623F ;
    
}
.corner{
    padding: 35px 20px !important;
    display: flex;
    gap: 40px;
    align-content: center;
    justify-content: end;
    align-items: center !important;
}
.corner h1{
    font-weight: 700 !important;
    font-size: 20px !important;
}
.corner p{
    font-size: 14px;
}
.corner img{
    height: 70px;
    width: 70px;
    object-fit: cover;
}







/* footer form css */
    .formdiv h1{
        font-size: 26px;
        font-weight: bold;
}

.formdiv span{
    
 color: #01928B;
 /* color: #A9BE42; */


}


.ctabtn{
        display: inline-block;
        margin-top: 10px;
        
      background: linear-gradient(45deg, #37B4AA,  #01928B);
        /* background: #9EB62A; */
        /* background: #A9BE42; */
        text-decoration: none;
        color: white;
        padding: 10px 30px;
        font-weight: 700;
        
}
   
.ctabtn:hover{ transition: none;
    opacity: 0.8;
        background: #01928B;
        color: white;
}