iframe { position: absolute; width: 100%; height: 100%; z-index: 999; } 
	  .menu {
            list-style-type: none;
            padding: 0;
        }
        
        .menu > li {
            display: inline-block;
            position: relative;
            margin-right: 20px;
        }
        
        .menu > li > a {
            display: block;
            padding: 10px 15px;
            text-decoration: none;
            color: #333;
        }
        
        .sub-menu {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            background-color: #fff;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            z-index: 1000;
        }
        
        .sub-items:hover .sub-menu {
            display: block;
        }
        
        .sub-menu li {
            display: block;
        }
        
        .sub-menu li a {
            padding: 10px 15px;
            display: block;
            text-decoration: none;
            color: #333;
        }
        
        .sub-menu li a:hover {
            background-color: #f0f0f0;
        }
        
        .sub-sub-menu {
            display: none;
            position: absolute;
            top: 0;
            left: 100%;
            background-color: #fff;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            z-index: 1000;
            width: 200px;
        }
        
        .digital-marketing:hover .sub-sub-menu {
            display: block;
        }
        
        .sub-sub-menu li {
            display: block;
        }
        
        .sub-sub-menu li a {
            padding: 10px 15px;
            display: block;
            text-decoration: none;
            color: #333;
        }
        
        .sub-sub-menu li a:hover {
            background-color: #f0f0f0;
        }
    
	   /*flip the card*/
	   @media (min-width: 768px) {
      .myCard
         {
        width: 340px;
        height: 280px;
      }
    }
    
    @media (min-width: 1024px) {
      .myCard
       {
        width: 320px;
        height: 280px;
      }
    }
     @media (min-width: 768px) {
      
      .myCard2 {
        width: 300px;
        height: 280px;
      }
    }
    
    @media (min-width: 1024px) {
      
      .myCard2 {
      width: 260px;
      height: 270px;
      }
    }

    	   
    .myCard {
      background-color: transparent;
      /*width: 320px;*/
      height: 280px;
      align-items: center;
      perspective: 1000px;
    }
    
    .myCard2 {
      background-color: transparent;
      /*width: 280px;*/
      height: 270px;
      align-items: center;
      perspective: 1000px;
    }
    
    .title {
      font-size: 1.5em;
      font-weight: 900;
      text-align: center;
      margin: 0;
      padding:10px;
    }
    .card-image {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50%; /* Adjust height as needed */
    width: 100%; /* Adjust width as needed */
    }
    
    .card-image img {
        width: 40%; /* Adjust width as needed */
    }
    
    .innerCard {
      position: relative;
      width: 100%;
      height: 100%;
      text-align: center;
      transition: transform 0.8s;
      transform-style: preserve-3d;
      cursor: pointer;
    }
    
    .myCard:hover .innerCard {
      transform: rotateY(180deg);
    }
    
    .myCard2:hover .innerCard {
      transform: rotateY(180deg);
    }
    
    .frontSide,
    .backSide {
      position: absolute;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-evenly;
      width: 100%;
      height: 100%;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      border: 1px solid rgba(255, 255, 255, 0.8);
      border-radius: 1rem;
      color: white;
      box-shadow: 0 0 0.3em rgba(255, 255, 255, 0.5);
      font-weight: 600;
    }
    
    .frontSide,
    .frontSide::before {
      background: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
      
    }
    
    .backSide,
    .backSide::before {
      background-image: linear-gradient(43deg, rgb(65, 88, 208) 0%, rgb(200, 80, 192) 46%, rgb(255, 204, 112) 100%);
    }
    
    .backSide {
      transform: rotateY(180deg);
    }
    
    .frontSide::before,
    .backSide::before {
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      content: '';
      width: 98%;
      height: 100%;
      position: absolute;
      z-index: -1;
      border-radius: 1em;
      filter: blur(20px);
      animation: animate 5s linear infinite;
    }
    
    @keyframes animate {
      0% {
        opacity: 0.3;
      }
    
      80% {
        opacity: 1;
      }
    
      100% {
        opacity: 0.3;
      }
    }	   
    
    
    
    .DZ-theme-btn.DZ-bt-buy-now,
    .DZ-theme-btn.DZ-bt-support-now
    {
        display:none !important;
    }
    /*card design*/
    /*@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");*/

    .call-btn {
        position: fixed;
        margin: 0;
        padding: 0;
        left: 0;
        bottom: 0px;
        background: #fff;
        background-color: transparent;
        cursor: pointer;
        font-size: 0;
        width: 110px;
        height: 110px;
        z-index: 1000;
    }
    
    .call-btn .tada {
        background: #4ad1fb;
        border-radius: 100px;
        width: 40px;
        height: 40px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-top: -20px;
        margin-left: -20px;
        animation-name: tada;
        animation-duration: 0.5s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
    }
    
    .call-btn .tada a:before {
        font-family: FontAwesome;
        content: "\f095";
        font-size: 25px;
        
        text-decoration: none;
        color: #fff;
        margin-left: 10px;
        position: absolute;
        top: 50%;
        margin-top: -10px;
    }
    
    
    @keyframes tada {
        from {
            transform: rotate(-20deg);
        }
        to {
            transform: rotate(20deg);
        }
    }
    
    .call-btn .pulse {
        width: 60px;
        height: 60px;
        background: rgba(74 209 251);
        ;
        border-radius: 100px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -30px;
        margin-left: -30px;
        animation-name: pulse;
        animation-duration: 0.5s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
        animation-timing-function: ease-in-out;
    }
    
    @keyframes pulse {
        from {
            width: 55px;
            height: 55px;
            margin-top: -27.5px;
            margin-left: -27.5px;
        }
        to {
            width: 60px;
            height: 60px;
            margin-top: -30px;
            margin-left: -30px;
        }
    }
    
    .call-btn .zoomIn {
        width: 80px;
        height: 80px;
        border: 2px solid rgb(10 193 251);
        border-radius: 100px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -40px;
        margin-left: -40px;
        animation-name: zoomIn;
        animation-duration: 1s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-out;
    }
    
    @keyframes zoomIn {
        from {
            width: 40px;
            height: 40px;
            margin-top: -20px;
            margin-left: -20px;
        }
        to {
            width: 80px;
            height: 80px;
            margin-top: -40px;
            margin-left: -40px;
        }
    }
    
    @media screen and (max-width: 549px) {
        .call-btn {
            width: 80px;
            height: 80px;
        }
    }
    /*email button*/
    .email-btn {
        position: fixed;
        left: 0px;
        bottom: 90px;
        margin: 0;
        padding: 0;
        width: 110px;
        height: 110px;
        background: transparent;
        cursor: pointer;
        font-size: 0;
        z-index: 1000;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .email_icon {
        background-color: #42db87;
        width: 60px;
        height: 60px;
        font-size: 30px;
        border-radius: 50%;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 0 0 0 #42db87;
        animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
        font-weight: normal;
        font-family: sans-serif;
        text-decoration: none !important;
        transition: all 300ms ease-in-out;
    }
    @media screen and (max-width: 549px) {
    .email-btn {
            width: 80px;
            height: 80px;
        }
    }
    
    /*whatsapp*/
    
    .floating_btn {
      position: fixed;
      bottom: 60px;
      right: 10px;
      width: 100px;
      height: 100px;
      display: flex;
      flex-direction: column;
      align-items:center;
      justify-content:center;
      z-index: 1000;
    }
    @media screen and (min-width: 1200px) {
        .floating_btn {
          display:none;
        }
    }
    @keyframes pulsing {
      to {
        box-shadow: 0 0 0 30px rgba(232, 76, 61, 0);
      }
    }
    
    .contact_icon {
      background-color: #42db87;
      color: #fff;
      width: 60px;
      height: 60px;
      font-size:30px;
      border-radius: 50px;
      text-align: center;
      box-shadow: 2px 2px 3px #999;
      display: flex;
      align-items: center;
      justify-content: center;
      transform: translatey(0px);
      animation: pulse 1.5s infinite;
      box-shadow: 0 0 0 0 #42db87;
      -webkit-animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
      -moz-animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
      -ms-animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
      animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
      font-weight: normal;
      font-family: sans-serif;
      text-decoration: none !important;
      transition: all 300ms ease-in-out;
    }
    
    .text_icon {
      margin-top: 8px;
      color: #1dc5fb;
      font-size: 13px;
    }
    /*cookie*/
    .cookie-consent {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s, visibility 0.5s;    
    }
    
    .cookie-consent.show {
        opacity: 1;
        visibility: visible;
        z-index: 99999 !important; 
    }
    
    .cookie-content {
        background-color: #fff;
        color: #000;
        padding: 20px;
        border-radius: 5px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        text-align: center;
        max-width: 500px;
        width: 80%;
        position: relative;
        z-index: 99999; 
    }
    
    .cookie-content h2 {
        margin-top: 0;
    }
    
    .cookie-content .opt-out-link {
        color: #007BFF;
        text-decoration: none;
    }
    
    .cookie-content .opt-out-link:hover {
        text-decoration: underline;
    }
    
    .close-btn {
        position: absolute;
        top: 10px;
        right: 10px;
        font-size: 20px;
        cursor: pointer;
    }
    /*contact us*/
   @media screen and (max-width: 768px) {
    .contact-page-link-box {
        width: 90% !important;
    }
}
.section {
            padding: 100px 0;
            background: linear-gradient(135deg, #f3f4f6, #e1e2e6);
        }
        .section-title {
            text-align: center;
            margin-bottom: 60px;
        }
        .section-title h2 {
            font-size: 3rem;
            font-weight: 700;
            color: #212529;
            margin-bottom: 20px;
            position: relative;
            display: inline-block;
        }
        .section-title h2::after {
            content: "";
            position: absolute;
            bottom: -10px;
            left: 0;
            height: 4px;
            width: 60px;
            background-color: #007bff;
            border-radius: 2px;
        }
        /*road map*/
        .roadmap {
            position: relative;
            max-width: 1140px;
            margin: 0 auto;
        }
        .roadmap-step {
            display: flex;
            align-items: center;
            margin-bottom: 60px;
            position: relative;
            flex-direction: column;
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.6s ease, transform 0.6s ease;
        }
        .roadmap-step.fade-in {
            opacity: 1;
            transform: translateY(0);
        }
        .roadmap-step:nth-child(odd) {
            flex-direction: column;
        }
        .roadmap-step .step-content {
            padding: 20px;
            background: #fff;
            border-radius: 10px;
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
            position: relative;
            z-index: 1;
            transition: background-color 0.3s ease, box-shadow 0.3s ease;
        }
        .roadmap-step:hover .step-content {
            background-color: #f8f9fc;
            box-shadow: 0 15px 30px rgba(0,0,0,0.2);
        }
        .roadmap-step .step-icon {
            font-size: 3rem;
            color: #007bff;
            margin-bottom: 20px;
            transition: transform 0.3s ease, color 0.3s ease;
        }
        .roadmap-step:hover .step-icon {
            transform: scale(1.1);
            color: #0056b3;
        }
        .roadmap-step .step-title {
            font-size: 1.5rem;
            font-weight: 600;
            color: #212529;
            margin-bottom: 10px;
            transition: color 0.3s ease;
        }
        .roadmap-step:hover .step-title {
            color: #007bff;
        }
        .roadmap-step .step-description {
            font-size: 1rem;
            color: #6c757d;
            line-height: 1.6;
        }
        .roadmap-step::before {
            content: "";
            position: absolute;
            top: 20px;
            width: 2px;
            background: #007bff;
            bottom: -20px;
            left: calc(50% - 1px);
            z-index: 0;
        }
        .roadmap-step:nth-child(odd)::before {
            left: calc(50% - 1px);
        }
        .roadmap-step::after {
            content: "";
            position: absolute;
            top: 0;
            left: calc(50% - 15px);
            width: 30px;
            height: 30px;
            background: #fff;
            border: 3px solid #007bff;
            border-radius: 50%;
            z-index: 1;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        }
        .roadmap-step:nth-child(odd)::after {
            left: auto;
            right: calc(50% - 15px);
        }
        .btn-primary {
            background-color: #007bff;
            border: none;
            border-radius: 50px;
            padding: 12px 30px;
            font-size: 1.125rem;
            font-weight: 600;
            text-transform: uppercase;
            transition: background-color 0.3s ease, transform 0.3s ease;
            margin-top: 40px;
        }
        .btn-primary:hover {
            background-color: #0056b3;
            transform: scale(1.05);
        }
        .rc-anchor-pt{
            display: none !important;
        }
        @media (min-width: 768px) {
            .roadmap-step {
                flex-direction: row;
            }
            .roadmap-step:nth-child(odd) {
                flex-direction: row-reverse;
            }
            .roadmap-step::before {
                left: 50%;
                right: auto;
            }
            .roadmap-step:nth-child(odd)::before {
                left: auto;
                right: 50%;
            }
            .roadmap-step::after {
                top: -15px;
                left: calc(50% - 15px);
            }
            .roadmap-step:nth-child(odd)::after {
                left: auto;
                right: calc(50% - 15px);
            }
        }
        @media (max-width: 767.98px) {
            .section-title h2 {
                font-size: 2.5rem;
            }
            .roadmap-step::before {
                left: 50%;
                right: auto;
            }
            .roadmap-step:nth-child(odd)::before {
                left: auto;
                right: 50%;
            }
            .roadmap-step::after {
                top: -10px;
                left: calc(50% - 15px);
            }
            .roadmap-step:nth-child(odd)::after {
                left: auto;
                right: calc(50% - 15px);
            }
        }
        /*tab content*/
        .tab-container {
        display: flex;
        background-color: #f8f9fc;
        border-radius: 10px;
        overflow: hidden;
        max-width: 1200px;
        margin: 0 auto;
        }
        
        .tab-menu {
            background-color: #007bff;
            width:48%;
            display: flex;
            flex-direction: column;
            padding: 20px 10px;
        }
        
        .tab-item {
            color: white;
            padding: 20px 10px;
            cursor: pointer;
            display: flex;
            align-items: center;
            font-size: 1.0rem;
            position: relative;
        }
        
        .tab-item i {
            margin-right: 10px;
        }
        
        .tab-item.active {
            background-color: #0066cc;
            border-radius: 5px;
            font-size: 15px;
        }
        
        .tab-item.active .arrow {
            display: inline-block;
            font-size: 1.5rem;
            margin-left: auto;
        }
        
        .arrow {
            display: none;
            color: white;
        }
        
        .tab-content {
            background-color: #ffffff;
            width: 52%;
            padding-left: 10px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: flex-start;
        }
        
        .tab-pane {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            width: 100%;
        }
        
        .cards {
            background-color: #35c0ea;
            padding: 15px;
            width: 48%;
            margin-bottom: 15px;
            text-align: left;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .cards img {
            width: 50px;
            height: auto;
            margin-bottom: 10px;
        }
        
        .cards p {
            margin: 0;
            font-size: 13px;
            font-weight: 400;
            color: white;
            line-height: 18px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .cards:hover {
            transform: scale(1.05);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        }
        
        .tab-pane.active {
            display: flex;
        }
        
        .tab-pane:not(.active) {
            display: none;
        }
   
/*why chhose comados*/
/*.custom-main-circle {*/
/*    width: 180px;*/
/*    height: 180px;*/
/*    background-color: #007bff;*/
/*    border-radius: 50%;*/
/*    display: flex;*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*    position: absolute;*/
/*    top: 50%;*/
/*    left: 50%;*/
/*    transform: translate(-50%, -50%);*/
/*}*/

/*.custom-logo {*/
/*    width: 90px;*/
/*    height: 90px;*/
/*}*/

/* Circle Item Styling */
/*.custom-circle-item {*/
/*    width: 140px;*/
/*    padding: 20px;*/
/*    text-align: center;*/
/*    background-color: white;*/
/*    border-radius: 50%;*/
/*    box-shadow: 0 4px 6px rgba(0,0,0,0.1);*/
/*}*/

/*.custom-icon {*/
/*    width: 40px;*/
/*    height: 40px;*/
/*    margin-bottom: 10px;*/
/*}*/

/*h5 {*/
/*    font-size: 16px;*/
/*    font-weight: bold;*/
/*    margin-bottom: 10px;*/
/*}*/

/*p {*/
/*    font-size: 12px;*/
/*}*/

/* Positioning Circle Items */
/*.custom-circle-top {*/
/*    top: -100px;*/
/*    left: 50%;*/
/*    transform: translateX(-50%);*/
/*}*/

/*.custom-circle-right {*/
/*    top: 50%;*/
/*    right: -100px;*/
/*    transform: translateY(-50%);*/
/*}*/

/*.custom-circle-bottom-right {*/
/*    bottom: -100px;*/
/*    right: 50px;*/
/*}*/

/*.custom-circle-bottom-left {*/
/*    bottom: -100px;*/
/*    left: 50px;*/
/*}*/

/*.custom-circle-left {*/
/*    top: 50%;*/
/*    left: -100px;*/
/*    transform: translateY(-50%);*/
/*}*/
/* footer */
     
footer {
  position: relative;
  background-color: black;
  padding-top: 55px;
  /* background-image: url(../image/footer-bg.jpg); */
  background-size: cover;
  background-position: center center;
  overflow: hidden;
  /* bottom: -48px; */
}

footer:before {
  position: absolute;
  content: "";
  height: 630px;
  width: 630px;
  border-radius: 50%;
  left: -10%;
  top: -20%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(194, 255, 84, 0.2) 0%, rgba(163, 177, 138, 0) 100%);
  transform: matrix(-1, 0, 0, 1, 0, 0);
  opacity: .2
}

footer:after {
  position: absolute;
  content: "";
  height: 630px;
  width: 630px;
  border-radius: 50%;
  right: -10%;
  top: -20%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(194, 255, 84, 0.2) 0%, rgba(163, 177, 138, 0) 100%);
  transform: matrix(-1, 0, 0, 1, 0, 0);
  opacity: .2
}

.footer-logo {
    text-align: center;
    margin-bottom: 30px;
}

.footer-logo a {
  margin-bottom: 20px;
  display: inline-block
}

.footer-logo a img {
  max-width: 200px
}

.footer-logo p {
  text-align: center;
  color: #fff;
  margin: 0
}

@media(max-width:767px) {
  .footer-logo p {
      font-size: 14px
  }
}

.footer-middle {
    padding: 20px 0;
    border-top: 1px solid #454e48;
    border-bottom: 1px solid #454e48;
}
.footer-widget {
    padding: 0px 5px 25px 5px;
}

.footer-widget h4 {
  
  font-weight: 600;
  font-size: 25px;
  color: #fff;
  margin-bottom: 30px
}

.social-media {
  position: relative
}

@media(max-width:767px) {
  .social-media {
      text-align: center
  }
}

.social-media h4 {
  
  font-style: inherit;
  font-weight: 500;
  font-size: 25px;
  text-align: center;
  letter-spacing: .03em;
  color: #fff;
  position: absolute;
  transform: rotate(-90deg);
  left: -50px;
  top: 40%;
  margin: 0
}

@media(max-width:767px) {
  .social-media h4 {
      position: static;
      transform: none;
      margin-bottom: 20px
  }
}

ul.social-icons {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-left: 50px
}

@media(max-width:767px) {
  ul.social-icons {
      margin-left: 0
  }
}

ul.social-icons li {
  display: block
}

@media(max-width:767px) {
  ul.social-icons li {
      display: inline-block
  }
}

ul.social-icons li a {
  display: inline-block;
  border: 1px solid #fff;
  box-sizing: border-box;
  border-radius: 10px;
  height: 35px;
  width: 35px;
  text-align: center;
  line-height: 35px;
  margin: 15px 0;
  color: #fff;
  transition: all .5s ease-out 0s
}

@media(max-width:767px) {
  ul.social-icons li a {
      margin: 0 10px
  }
}

ul.social-icons li a:hover {
  background: rgb(21, 196, 251);;
  border-radius: 10px;
  border: 1px solid transparent;
  color: #404943
}

ul.footer-menus {
  list-style: none;
  margin: 0;
  padding: 0
}

ul.footer-menus li {
  display: block;
  padding-bottom: 15px
}

ul.footer-menus li:last-child {
  padding-bottom: 0
}

ul.footer-menus li a {
  position: relative;
  font-weight: 500;
  font-size: 16px;
  color: #fff;
  display: inline-block;
  transition: all .5s ease-out 0s
}

@media only screen and (min-width:992px) and (max-width:1199px) {
  ul.footer-menu li a {
      font-size: 15px
  }
}

ul.footer-menus li a:before {
  position: absolute;
  content: "";
  top: 50%;
  transform: translateY(-50%);
  left: -20px;
  height: 10px;
  width: 10px;
  background-color: rgb(21, 196, 251);;
  border-radius: 50%;
  visibility: hidden;
  opacity: 0;
  transition: all .5s ease-out 0s
}

ul.footer-menus li a:hover {
  color: rgb(21, 196, 251);;
  padding-left: 15px
}

ul.footer-menus li a:hover:before {
  left: 0;
  visibility: visible;
  opacity: 1
}
.footer-widget h4,
.footer-widget .phone a,
.footer-widget .email a,
.footer-widget .address p,
.footer-bottoms .copy-txt span {
    color: white; /* Set font color to white */
}

.footer-widget .num-icon i,
.footer-widget .mail-icon i,
.footer-widget .address-icon i {
    color: white; /* Set icon color to white */
}

.footer-widget .phone a:hover,
.footer-widget .email a:hover {
    color: rgb(21, 196, 251); /* Maintain hover effect with blue */
}

.footer-bottoms .copy-txt span {
    color: white; 
}

/* service form design */

form.services {
  max-width: 800px;
  margin: 50px auto;
  background-color: #fff;
  padding: 40px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.form-box {
  margin-bottom: 20px;
}

.form-input {
  width: 100%;
  padding: 14px;
  border: 2px solid #ddd;
  border-radius: 8px;
  font-size: 16px;
  background-color: #f9f9f9;
  transition: all 0.3s ease;
}

.form-input:focus {
  border-color: #007BFF;
  outline: none;
  background-color: #fff;
}

select.form-input, textarea.form-input {
  height: auto;
}

textarea.form-input {
  resize: vertical;
  min-height: 150px;
}

button.sec-btn {
  width: 100%;
  padding: 15px;
  background-color: #007BFF;
  border: none;
  border-radius: 8px;
  color: white;
  font-size: 16px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button.sec-btn:hover {
  background-color: #0056b3;
}

button.sec-btn span {
  display: block;
}


/* ReCaptcha Styling */
.g-recaptcha {
  margin-top: 20px;
  margin-bottom: 20px;
  transform: scale(0.85);
  transform-origin: 0 0;
}

/*heder button*/

@keyframes glowZoom {
    0% {
    transform: scale(1); /* Normal size */
    box-shadow: 0 0 15px rgba(10, 193, 251, 0.8); /* Initial glow */
    }
    50% {
    transform: scale(1.1); /* Zoom in */
    box-shadow: 0 0 30px rgba(10, 193, 251, 0.8); /* Stronger glow */
    }
    100% {
    transform: scale(1); /* Zoom out to normal size */
    box-shadow: 0 0 15px rgba(10, 193, 251, 0.8); /* Initial glow */
    }
    }
    
    #proposal-btn {
    background: linear-gradient(to right, rgb(74, 209, 251), rgb(10, 193, 251)); /* Gradient background */
    color: white; /* Text color */
    border: none; /* Remove border */
    padding: 10px 20px; /* Button padding */
    font-size: 12px; /* Font size */
    border-radius: 30px; /* Rounded corners */
    animation: glowZoom 2s infinite; /* Continuous animation */
    transition: all 0.3s ease; /* Smooth transition for hover effect */
    height:58px;
    }
    
    #proposal-btn:hover {
    /* Optional: Add hover effect if desired */
    transform: scale(1.05); /* Slight scale on hover */
    }
    
    #proposal-btn:focus {
    outline: none; /* Remove outline on focus */
    }
    
    #proposal-btn span {
    font-weight: bold;
    }
    
/*road map*/
    .roadmap {
      padding: 30px 50px;
      
      .point {
        display: flex;
        flex-direction: column;
        padding: 10px 50px;
        position: relative;
        
        &:first-child {
          .point-index {
            top: auto;
            bottom: 0;
            transform: translate(-50%, 2px) !important;
          }
        }    
        
        &:last-child {
          .point-index {
            top: 0;
            transform: translate(50%, -2px) !important;
          }
        }   
        
        &:not(:last-child) {
          border-bottom: 2px solid #12c3fb;
        }
    
        &:nth-child(odd) {
          align-items: flex-start;
          
          &:not(:first-child) {
            border-left: 2px solid #12c3fb;
          }
          
          .point-index {
            left: 0;
            transform: translate(-50%, -50%);
          }
        }
        
        &:nth-child(even) {
          align-items: flex-end;
          
          &:not(:last-child) {
            border-right: 2px solid #12c3fb;
          }
          
          .point-index {
            right: 0;
            transform: translate(50%, -50%);
          }
        }
        
        .point-index {
          position: absolute;
          top: 50%;
          width: 40px;
          height: 40px;
          background: #151317;
          border: 2px solid #12c3fb;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 23px;
          font-weight: bold;
        }
        
        .point-label {
        flex: 1 0 100%;
        font-size: 25px;
        line-height: 35px;
        color: #010f2e;
        font-weight: bold;
        font-family: 'Jost', sans-serif;
        margin-bottom: 15px;
          
          @media (min-width: 641px) {
            flex: 1 0 50%;
            width: 50%;
          }
        }
        
        .point-text {
              font-size: 15px;
                line-height: 24px;
                color: #777777;
                font-weight: normal;

          
          @media (min-width: 641px) {
            flex: 1 0 50%;
            width: 50%;
          }
        }
      }
    }