@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");


.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6,
p {
   margin-bottom: 0 !important;
}

::-webkit-scrollbar {
   display: none;
}

.cursor-pointer {
   cursor: pointer !important;
}

.form-group,
.form-check {
   margin-bottom: 1rem;
}

a {
   text-decoration: none;
}

ul {
   margin: 0 !important;
   padding: 0 !important;
   list-style-type: none;
}

/*------------------------------------------------
--------------- Global Css strat here-------------
--------------------------------------------------*/

section {
   padding: 50px 0;
   position: relative;
   overflow: hidden;
   display: flex;
   justify-content: center;
   align-items: center;
}

section#memories,
section.service {
    padding: 100px 0 50px 0;
}

.bg_img {
   height: 80vh;
   width: 100%;
   background-size: cover;
   background-position: 50% 50%;
   background-repeat: no-repeat;
}


.rtl {
   direction: rtl;
}

/* --------------- mouse background circle --------------- */
/* .cursor {
   display: block;
   width: 30px;
   height: 30px;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%);
   border-radius: 50%;
   background: transparent;
   pointer-events: none;
   z-index: 9999;
   border: 2px solid var(--bs-primary);
   transition: all 0.2s ease-out;
   animation: moveCursor1 .5s infinite alternate;
} */

/* ----------------text shadow css--------------- */
.text_shadow,
.text_shadow.t_work {
   font-size: 5.3rem;
   font-weight: 700;
   margin-left: -100px;
   opacity: 0.12;
   text-transform: uppercase;
}

.main_text {
   position: relative;
   font-size: 2.2rem;
   font-weight: 600;
   display: flex;
   align-items: center;
   color: #303246;
}

.text_shadow.t_work {
   font-size: 4.3rem;
}

.title_right {
   margin-right: -77px;
}
/*------------------------------------------------
--------------- Global Css end here---------------
--------------------------------------------------*/


/*------------------------------------------------
----------- 01 header css start here --------------
--------------------------------------------------*/
header {
   transition: all ease-out 0.5s;
}

header.scroll {
   background: var(--bs-body-bg);
   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.header_nav .nav-item {
   padding: 0 20px !important;
}

.header_nav.navbar-nav .nav-link.active,
.header_nav .nav-link:hover {
   background: var(--bs-gradient);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent
}

.header_nav .nav-link {
   color: #22253E;
   position: relative;
}

.dark_mode {
   background-color: #22253E !important;
   color: var(--bs-body-bg) !important;
}

.header-toggle-icon.dropdown-toggle::after {
   display: none;
}

.header_nav .nav-link:before {
   content: "";
   width: 100%;
   height: 3px;
   border-radius: 10px;
   position: absolute;
   left: 0;
   bottom: 0;
   background: var(--bs-gradient);
   transition: 0.5s transform ease;
   transform: scale3d(0, 1, 1);
   transform-origin: 0 50%;
}

.header_nav .nav-link:hover:before {
   transform: scale3d(1, 1, 1);
}

.dropdown:hover .dropdown-menu {
   display: block;
   transition: 0.5s transform ease;
}

/*------------------------------------------------
---------- 01 header css end here ----------------
--------------------------------------------------*/

/*------------------------------------------------
--------- 02 hero section css start here-----------
--------------------------------------------------*/
/* .hero {
  
   background-size: cover;
   background-position: 50% 50%;
   background-repeat: no-repeat;
   position: relative;
   overflow: hidden;
   width: 100%;
   height: 100vh;
} */

.hero {
   width: 100%;
   height: 100vh;
}

.hero #particles-js {
   background-image: url("../img/home_page/hero_section/bg3.png");
   width: 100%;
   height: 100%;
   background-size: cover;
   background-position: 50% 50%;
   background-repeat: no-repeat;
   position: absolute;
   /* filter: blur(130px); */
}

.hero-text h1 {
   font-size: 6rem;
   font-weight: 800;
   animation: flip 2s infinite;
}

.hero-text h3 {
   margin-bottom: 15px;
   font-size: 3rem;
}

.particles-js-canvas-el {
   position: relative;
}

/*------------------------------------------------
--------- 02 hero section css end here ------------
------------------------------------------------*/

/*------------------------------------------------
---- 03 how we work section css start here -------
------------------------------------------------*/
.we_work .icon_shap {
   line-height: 75px;
   font-size: 46px;
   text-align: center;
   display: grid;
   align-items: center;
   background: var(--bs-gradient);
   width: 110px;
   height: 110px;
   border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
   animation: morph 3s linear infinite;
   color: #fff;
   font-weight: 700;
   margin: 4px;
}

.we_work .work_title_line::after {
   content: "";
   width: 100px;
   height: 3px;
   background: var(--bs-gradient);
   position: absolute;
   transition: all 0.6s ease-in-out;
   border-radius: 8px;
   z-index: -1;
}


/*--------- How we work blob keyframe end hear -----------*/

/*------------------------------------------------
---- 03 how we work section css end here ---------
------------------------------------------------*/

/*------------------------------------------------
---- 04 Technologies section css start here ------
------------------------------------------------*/
.technologies .nav-link {
   padding: 20px 60px;
   position: relative;
   color: #303246;
   background-color: #fff;
   margin: 1rem 0;
   width: 78%;
}

.technologies .nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
   background-color: #fff;
}

.technologies .nav-pills .nav-link.active .tab_text {
   background: var(--bs-gradient);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}

.technologies .nav-pills .nav-link::after {
   content: '';
   display: block;
   border-top: 12px solid transparent;
   border-left: 14px solid #a2399a;
   border-bottom: 12px solid transparent;
   position: absolute;
   top: 50%;
   right: -25px;
   transform: translateY(-50%);
   opacity: 0;
}

.technologies .nav-pills .nav-link.active::after {
   opacity: 1;
}

.technologies .nav-pills .nav-link::before {
   content: '';
   display: block;
   position: absolute;
   background: var(--bs-gradient);
   width: 100px;
   height: 86px;
   z-index: -1;
   right: -12px;
   top: -18px;
   margin: 10px 0;
   opacity: 0;
   border-radius: 0px 15px 15px 0px;
}

.technologies .nav-pills .nav-link.active::before {
   opacity: 1;
}

.technologies .icon-set {
   padding: 10px;
}

.technologies .bg {
   background: rgba(255, 255, 255, 0.02); 
}

.technologies .work-card {
   margin: auto;
   height: 175px;
   width: 175px;
   text-align: center;
   display: grid;
   align-items: center;
   border-radius: 15px 70px;
   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.technologies .img-fluid {
   width: 40%;
}

/*------------------------------------------------
-------- Technologies section css end here -------
------------------------------------------------*/

/*------------------------------------------------
 05 Modern & Outstanding portfolio css start here
------------------------------------------------*/
.modern_portfolio .portfolio-filter .filter-button {
   text-decoration: none;
   color: rgb(109, 109, 109);
   display: inline-block;
   padding: 0 20px;
   position: relative;
   margin: 10px 0;
    text-align: center;
}

.modern_portfolio .portfolio-filter .filter-button.active {
   color: #fff;
   background-color: var(--bs-primary);
   border-radius: 35px;
   padding: 10px 1rem;
}

/* modern_portfolio pachad na circle ni css */
.modern_portfolio .modern_portfolio-grid::after {
   content: ' ';
   border: 4px dashed #222439;
   width: 50%;
   height: 85%;
   border-radius: 50%;
   position: absolute;
   left: calc(52% - 700px/2);
   z-index: -1;
   top: 7%;
   opacity: 0.1;
}
.portfolio-filter {
    text-align: center;
}

/*------------------------------------------------
- 05 Modern & Outstanding portfolio css end here -
------------------------------------------------*/


/*------------------------------------------------
--- 06 client review section css start here ------
------------------------------------------------*/
.client_review .client_testimonial {
   position: relative;
   justify-content: center;
}

.client_review .client_testimonial .icon_left,
.client_review .client_testimonial .icon_right {
   position: absolute;
   font-size: 90px;
   background: var(--bs-gradient);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   opacity: 0.2;
   line-height: initial;
}

.client_review .client_testimonial .icon_left {
   left: 0;
}

.client_review .client_testimonial .icon_right {
   right: 0;
   bottom: 0;
}

.client_review .client_testimonial .text {
   margin: auto;
   letter-spacing: 0.5px;
}

.client_review .client_testimonial .user {
   display: flex;
   align-items: center;
}


.client_review .client_testimonial .user .user-info span.checked {
   color: #EC6A78;
}

.client_review .client_testimonial .user .user-info span {
   padding: 0 3PX;
}

.client_review .client_testimonial .owl-carousel .owl-item img {
   width: 100px !important;
   margin-right: 20px;
}

.client_review .client_testimonial .owl-carousel .owl-dots {
   position: absolute;
   left: 0;
   right: 0;
   bottom: -60px;
   text-align: center;
   width: 100%;
}

.client_review .client_testimonial .owl-carousel .owl-dot {
   width: 16px;
   height: 16px;
   background-color: #ffffff;
   display: inline-block;
   margin: 0 6px;
   text-align: center;
   border-radius: 50%;
   border: 1px solid #F06D76;
}

.client_review .client_testimonial .owl-carousel .owl-dot.active {
   background: var(--bs-gradient);
}

.client_review .client_testimonial .owl-carousel .slide {
   position: relative;
   border: 5px solid transparent;
   background: var(--bs-body-bg);
   background-clip: padding-box;
   border-radius: 16px;
}

.client_review .client_testimonial .owl-carousel .slide::after {
   content: '';
   position: absolute;
   top: -5px;
   bottom: -5px;
   left: -5px;
   right: -5px;
   background: var(--bs-gradient);
   z-index: -1;
   border-radius: 10px;
}

/*------------------------------------------------
------ 06 client review section css end here -----
------------------------------------------------*/

/*------------------------------------------------
-07 Work and Achievements section css strat here -
------------------------------------------------*/

.achievements .a_img_one {
   position: relative;
}

.achievements .a_img_one img {
   width: 130px;
}

.achievements .work_a_img {
   display: flex;
   align-items: center;
   justify-content: center;

}

/*----- shadow color -----*/
.achievements .work_a_img .a_img_one::after {
   content: "";
   border-radius: 50%;
   position: absolute;
   width: 150px;
   height: 150px;
   opacity: 0.2;
   top: 10px;
   z-index: -1;
   transition: all 1s;
}

/*----- img blue -------*/

.achievements .work_a_img .a_img_one.blue h3 {
   color: #5290DB;
}

.achievements .work_a_img .a_img_one.blue::after {
   background-color: #5290DB;
   right: -25%;
}

.achievements .work_a_img:hover .a_img_one.blue::after {
   right: -3% !important;
}


/*------- img yellow -------*/
.achievements .work_a_img .a_img_one.yellow h3 {
   color: #FFE02F;
}

.achievements .work_a_img .a_img_one.yellow::after {
   background-color: #FFE02F;
   right: -40%;
}

.achievements .work_a_img:hover .a_img_one.yellow::after {
   right: -10%;
}

/*------- img pink --------*/

.achievements .work_a_img .a_img_one.pink h3 {
   color: #FF4FB9;
}

.achievements .work_a_img .a_img_one.pink::after {
   background: #FF4FB9;
   right: -20%;
}

.achievements .work_a_img:hover .a_img_one.pink::after {
   right: 7%;
}

/*---------- img green ---------*/
.achievements .work_a_img .a_img_one.green h3 {
   color: #46CC6B;
}

.achievements .work_a_img .a_img_one.green::after {
   background: #46CC6B;
   right: -30%;
}

.achievements .work_a_img:hover .a_img_one.green::after {
   right: -6%;

}


/*----- border -----*/
.achievements .work_a_img .a_img_one .border_after::after {
   content: "";
   height: 5px !important;
   display: block;
   width: calc(0% - 60px);
   position: absolute;
   height: 2px;
   transition: width 350ms ease-out;
}

.achievements .work_a_img:hover .a_img_one .border_after::after {
   width: calc(100% - 0px);
   transition: width 350ms ease-out;
}

.achievements .work_a_img .a_img_one .border_after.blue::after {
   background: linear-gradient(90deg, #5290DB 0.78%, rgba(255, 79, 185, 0.05) 100%);
}

.achievements .work_a_img .a_img_one .border_after.yellow::after {
   background: linear-gradient(90deg, #FFE02F 0.78%, rgba(255, 79, 185, 0.05) 100%);
}

.achievements .work_a_img .a_img_one .border_after.pink::after {
   background: linear-gradient(90deg, #FF4FB9 0.78%, rgba(255, 79, 185, 0.05) 100%);
}

.achievements .work_a_img .a_img_one .border_after.green::after {
   background: linear-gradient(90deg, #46CC6B 0.78%, rgba(255, 79, 185, 0.05) 100%);
}

/*------------------------------------------------
- 07 Work and Achievements section css end here --
------------------------------------------------*/

/*------------------------------------------------
----- 08 our field section css start here --------
------------------------------------------------*/

/*------------------------------------------------
------ 08 our field section css end here ---------
------------------------------------------------*/

/*------------------------------------------------
------- 09 slider section css start here ---------
------------------------------------------------*/
.valuable_clients .slider {
   overflow: hidden;
   position: relative;
}

.valuable_clients .slider::before,
.valuable_clients .slider::after {
   background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);
   content: "";
   height: 100px;
   position: absolute;
   width: 200px;
   z-index: 2;
}

.valuable_clients .slider::after {
   right: 0;
   top: 0;
   transform: rotateZ(180deg);
}

.valuable_clients .slider::before {
   left: 0;
   top: 0;
}

.valuable_clients .slider .slide-track {
   -webkit-animation: scroll 40s linear infinite;
   animation: scroll 40s linear infinite;
   display: flex;
   width: calc(250px * 14);
}

.valuable_clients .slider .slide {
   height: 100px;
   width: 250px;
}

/*------------------------------------------------
------- 09 slider section css end here -----------
------------------------------------------------*/
/*------------------------------------------------
------ 10 footer section css strat here ----------
------------------------------------------------*/
.footer {
   background-color: #fff;
   box-shadow: 0px -10px 6px rgba(0, 0, 0, 0.02), 0px -5px 5px rgba(0, 0, 0, 0.03), 0px -1px 3px rgba(0, 0, 0, 0.03), 0px 0px 0px rgba(0, 0, 0, 0.03);
}

.footer-top {
   padding: 30px 25px;
}

.widget-title {
   background: var(--bs-gradient);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}

.f_text {
   text-align: justify;
}

.post-date {
   color: var(--bs-body-color);
}

.footer-bottom {
   padding: 13px 0;
   background: var(--bs-gradient);
}


/*------------------------------------------------
------- 10 footer section css end here -----------
------------------------------------------------*/

/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------- service page start -------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/* partical slider */
.service .service-logo img {
   display: none;
}

.h_title_left {
   font-size: 4rem;
   font-weight: 700;
}
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------- about us page start ---------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

/*------------------------------------------------
----- 01 about hero section css start here -------
------------------------------------------------*/
.aboutus {
   background-image: url(../img/aboutus_page/hero/herobg.png);
   background-color: var(--bs-body-color);
}

/*------- leader name after css ------*/
.leader .name_border::after {
   position: absolute;
   content: "";
   width: 50%;
   height: 4px;
   background: var(--bs-gradient);
   margin: 0 auto;
   bottom: -4px;
   left: 0px;
}

/*------- rating and rewview -------*/
.review_box::after {
   content: " ";
   position: absolute;
   width: 100%;
   height: 100%;
   background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, #000000 100%);
   opacity: 0.04;
   padding: 5rem;
}

/*--------- our team -----------*/
.our_team .our_team_carousel .our_team_border {
   position: relative;
   border: 5px solid transparent;
   background: var(--bs-body-bg);
   background-clip: padding-box;
   border-radius: 90% 40%;
}

.our_team .our_team_carousel .our_team_border::after {
   content: '';
   position: absolute;
   top: -5px;
   bottom: -5px;
   left: -5px;
   right: -5px;
   background: var(--bs-gradient);
   z-index: -1;
   border-radius: 90% 40%;
}

.our_team .our_team_carousel img {
   border-radius: 50%;
   /* width: 80%; */
}

.our_team .owl-dots {
   text-align: center;
}

.our_team .slider_title
{
    color: var(--bs-primary);
}

/*------------------------------------------------
------- 01 about hero section css end here -------
------------------------------------------------*/


/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------- heart at vraj css start ---------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

/* ----------- Memories css srart hear ----------- */
.memories .memories_carousel .memories_border {
   position: relative;
   border: 5px solid transparent;
   background: var(--bs-body-bg);
   background-clip: padding-box;
   border-radius: 90% 40%;
}

.memories .memories_carousel .memories_border::after {
   content: '';
   position: absolute;
   top: -5px;
   bottom: -5px;
   left: -5px;
   right: -5px;
   background: var(--bs-gradient);
   z-index: -1;
   border-radius: 90% 40%;
}

.memories .memories_carousel img {
   border-radius: 50%;
   width: 80%;
}

.memories .owl-dots {
   text-align: center;
}

.memories .owl-carousel button.owl-dot {
   background-color: #EBEBEB;
   width: 150px;
   height: 10px;
}

button.owl-dot.active {
   background-color: #F16E76 !important;
   border-radius: 20px;
}

/*------------------------------------------------
- 01 hear at vraj Memories section css end here -
------------------------------------------------*/


/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------- get in touch section css start ---------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

.getin_hero .getin_h_text {
   color: var(--bs-primary);
}

.getin_hero img {
   width: 100%;
}

/* ---------form css  --------------- */
.c_form .form-control
{
    padding: 15px !important;
    background-color: rgba(223, 223, 223, 0.4);
}
.form-control::placeholder {
    color: #0F0F0F;
} 
::-webkit-input-placeholder {
    color: #fff;
 }
.form-control:focus{
    border-color: #6D6D6D !important;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, .1);
}
/* ------------ support css --------------- */
.q_support .support_icon::after{
   background: #E3657B;
   content: "";
   border-radius: 50%;
   position: absolute;
   width: 55px;
   height: 55px;
   opacity: 0.2;
   z-index: 1;
   transition: all 1s;
   left: 18px;
   bottom: 0;
}

.q_support .support_icon {
   font-size: 50px;
}

.q_support .q_card
{
    position: relative;
    border: 5px solid transparent;
    background: var(--bs-body-bg);
    background-clip: padding-box;
    border-radius: 16px;
}

.q_support .q_card::after
{
    content: '';
    position: absolute;
    top: -5px;
    bottom: -5px;
    left: -5px;
    right: -5px;
    background: var(--bs-gradient);
    z-index: -1;
    border-radius: 10px;
}


/*------------------------------------------------
-------------------- Key frame---------------------
------------------------------------------------*/

/*--------- How we woek blob keyframe start hear ---------*/
@keyframes morph {

   0%,
   100% {
      border-radius: 40% 60% 70% 30% / 40% 40% 60% 50%;
   }

   34% {
      border-radius: 70% 30% 50% 50% / 30% 30% 70% 70%;
   }

   67% {
      border-radius: 100% 60% 60% 100% / 100% 100% 60% 60%;
   }
}


/*-------------- valuable slider keyframes -------------*/
@-webkit-keyframes scroll {
   0% {
      transform: translateX(0);
   }

   100% {
      transform: translateX(calc(-250px * 7));
   }
}

@keyframes scroll {
   0% {
      transform: translateX(0);
   }

   100% {
      transform: translateX(calc(-250px * 7));
   }
}



/* ------------------ portfolio page css ------------- ---------------------------*/
.portfolio .port_img img{
   width: 100%;
}

.portfolio .portfolio-filter .filter-button.active {
   color: #fff;
   background-color: var(--bs-primary);
   border-radius: 35px;
   padding: 10px 5rem;
}

.portfolio .portfolio-filter .filter-button {
   text-decoration: none;
   /* color: rgb(109, 109, 109); */
   display: inline-block;
   padding: 0 30px;
   position: relative;
}



/*---------------------------------------------
          Career page css
---------------------------------------------- */
/*---------------------------------------------
          Career hero section css
---------------------------------------------- */
.career {
   background-image: url("../img/aboutus_page/hero/herobg.png");
}

.box-item {
   width: 100%;
   height: 100%;
   position: relative;
   padding: 2.5rem;
   border-radius: 15px 150px 15px 15px;
   border: 3px solid var(--bs-primary);
   background: var(--bs-body-bg);
}

.icon-block-top {
   background-color: var(--bs-body-bg);
   padding: 1.5rem;
   position: absolute;
   border-radius: 50%;
   border: 3px solid var(--bs-primary);
   margin-top: -3.5rem;
   top: 0;
   width: 100px;
   height: 100px;
}

.box-item-shape::after {

   content: '';
   position: absolute;
   width: 100%;
   height: 100px;
   clip-path: circle(130px at 50% 140%);
   background: #6d6d6d;
   opacity: 0.04;
   bottom: 0;
}

.box-item-number {
   position: absolute;
   bottom: 0;
   left: 45%;
}
/*---------------------------------------------
         Hiring section css
---------------------------------------------- */
.border-shape
{
   position: relative;
}
.border-shape::after
{
   content: "";
   position: absolute;
   border: 3px dashed var(--bs-primary);
   width: 100%;
   height: 67%;
   top: 14%;
   z-index: -1;
}
.box-item.hiring
{
   border-radius: 79px 11px 11px 11px;
   border: 1px solid #EDEDED;
   box-shadow: 0px -10px 6px rgba(0, 0, 0, 0.02), 0px -5px 5px rgba(0, 0, 0, 0.03), 0px -1px 3px rgba(0, 0, 0, 0.03), 0px 0px 0px rgba(0, 0, 0, 0.03);
}
.box_number_shape::after {
   content: "";
   border-radius: 50%;
   position: absolute;
   width: 50px;
   height: 50px;
   opacity: 0.5;
   transition: all 1s;
   background: var(--bs-gradient);
   left: 0;
   right: 0;
   top: -5px;
}
.box_number
{
   left: 30px;
}
/*---------------------------------------------
         Modal section css
---------------------------------------------- */
.card-modal-col
{
background: var(--bs-gradient);
border-radius: 50px 0 0 50px;
}
.modal-body .card-form
{
   padding: 40px
}
.form-control
{
   padding: 10px !important;
}
.form-item{
   position: relative;
   margin-bottom: 15px
 }
 .form-item input,
 .form-item textarea{
   display: block;
   background: transparent;
   transition: all .3s ease;
   padding: 0 15px
 }
 .form-item input:focus,
 .form-item textarea:focus {
   border-color: #FFFFFF;
 }
 .form-item label{
   position: absolute;
   cursor: text;
   z-index: 2;
   top: 13px;
   left: 10px;
   padding: 0 10px;
   color: #0F0F0F;
   transition: all .3s ease;
 }
 
 .form-item input:focus+label,
 .form-item textarea:focus+label {
   top: -10px;
   background: #fff;
   color: #0F0F0F;
 }
*:focus{outline: none}






/* curser css */
/* @keyframes moveCursor1 {
   from {
       transform: scale(1);
   }

   to {
       transform: scale(.8);
   }
}

@keyframes moveCursor2 {
   0% {
       transform: scale(1);
   }

   50% {
       transform: scale(2);
   }

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


/*------------ body_bg_shap start hear --------------*/
/* git hub effect */
/* canvas {background: rgb(0, 0, 0);} */

.bg_shap
{
    position: absolute;
    top: 120%;
    border-radius: 100%;
    /* z-index: 1; */
    /* filter: blur(80px) blur(80px); */
    /* animation: animationTwo 75s infinite linear; */
}

@keyframes animationOne {
   0% {
       transform: translate(0px, 0px) rotate(0deg)
   }

   20% {
       transform: translate(70px, -1px) rotate(35deg)
   }

   40% {
       transform: translate(140px, 70px) rotate(70deg)
   }

   60% {
       transform: translate(80px, 120px) rotate(110deg)
   }

   80% {
       transform: translate(-40px, 70px) rotate(145deg)
   }

   100% {
       transform: translate(0px, 0px) rotate(0deg)
   }
}

@keyframes animationTwo {
   0% {
       transform: translate(0px, 0px) rotate(0deg) scale(1)
   }

   20% {
       transform: translate(70px, -1px) rotate(35deg) scale(0.9)
   }

   40% {
       transform: translate(140px, 70px) rotate(70deg) scale(1)
   }

   60% {
       transform: translate(80px, 120px) rotate(110deg) scale(1.2)
   }

   80% {
       transform: translate(-40px, 70px) rotate(145deg) scale(1.1)
   }

   100% {
       transform: translate(0px, 0px) rotate(0deg) scale(1)
   }
}

@keyframes animationThree {
   0% {
       transform: translate(165px, -180px)
   }

   100% {
       transform: translate(-345px, 615px)
   }
}

@keyframes animationFour {
   0% {
       transform: translate(-300px, 151px) rotate(0deg)
   }

   100% {
       transform: translate(251px, -200px) rotate(180deg)
   }
}

@keyframes animationFive {
   0% {
       transform: translate(61px, -99px) rotate(0deg)
   }

   21% {
       transform: translate(4px, -190px) rotate(38deg)
   }

   41% {
       transform: translate(-139px, -200px) rotate(74deg)
   }

   60% {
       transform: translate(-263px, -164px) rotate(108deg)
   }

   80% {
       transform: translate(-195px, -49px) rotate(144deg)
   }

   100% {
       transform: translate(-1px, 0px) rotate(180deg)
   }
}

.bg_shap:nth-of-type(even) {
    right: 0;
}

.bg_shap::before {
    content: "";
    width: 200px;
    height: 200px;
    position: absolute;
}

.bg_shap:nth-of-type(1)::before {
    /* background-image: linear-gradient(90deg, #2F56E5 50%, #000000); */
    background-image: linear-gradient(89.73deg, #ffffff 1.36%, #2F56E5 99.76%);
    bottom: -60px;
    animation: animationOne 5s infinite linear;
}

.bg_shap:nth-of-type(2)::before {
    background-image:var(--bs-gradient);
    right: 0;
    top: 400px;
}

.bg_shap:nth-of-type(3)::before {
    /* background-image: linear-gradient(90deg, #2F56E5 50%, #000000); */
    background-image: linear-gradient(89.73deg, #ffffff 1.36%, #2F56E5 99.76%);
    left: 0%;
    top: 950px;
}
.bg_shap:nth-of-type(4)::before {
    background-image:var(--bs-gradient);
    right: 0;
    top: 1500px;
}
.bg_shap:nth-of-type(5)::before {
    /* background-image: linear-gradient(90deg, #2F56E5 50%, #000000); */
    background-image: linear-gradient(89.73deg, #ffffff 1.36%, #2F56E5 99.76%);
    left: 0%;
    top: 2050px;
}
.bg_shap:nth-of-type(6)::before {
    background-image:var(--bs-gradient);
    right: 0;
    top: 2600px;
}
.bg_shap:nth-of-type(7)::before {
    /* background-image: linear-gradient(90deg, #2F56E5 50%, #000000); */
    background-image: linear-gradient(89.73deg, #ffffff 1.36%, #2F56E5 99.76%);
    left: 0%;
    top: 3150px;
}
.bg_shap:nth-of-type(8)::before {
    background-image:var(--bs-gradient);
    right: 0;
    top: 3700px;
}