* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration:none;
  }
  
  :root {
    --primary-color: #0F67F6; /*sky blue */
    --secondary-color: #000000; /* Black */
    --background-color: #ffffff; /* White */
    --main-gradient: linear-gradient(to right, #0F67F6, #6200FF);
  }
  
  body {
    margin: 0;
    padding: 0;
    font-family: Arial !important;
    overflow-x: hidden;
    background-color: white;
  }
  
  
  /* Upper Header CSS */
  .upperheader-connectly {
    background: var(--main-gradient);
  }
  
  .upperheader {
    max-width: 1400px;
    margin: auto;
    font-weight: bold;
    font-size: 19px;
    display: flex;
    justify-content: space-between;
    padding-top: 5px;
  }
  
  .iconh {
    width: 28px;
  }
  
  .left-section a {
    color: #fff;
    text-decoration: none;
    margin-right: 10px;
    display: inline-flex; /* Align items within the link */
    align-items: center; /* Centre content vertically */
  }
  
  .right-section {margin-top: 3px;}
  
  .white-text {
    color: white;
  }
  
  .left-section a:not(:last-child)::after {
    content: "|";
    color: white;
    margin: 0 5px;
    display: inline-block;
    vertical-align: middle; /* Align the icon vertically */
  }
  
  /* Media Queries for Tablet and Mobile Devices */
  @media (max-width: 1400px) {
    .right-section {
      margin-right: 10px;
    }
    .left-section {
      margin-left: 10px;
    }
  }
  
  @media (max-width: 726px) {
    .left-section {
      margin-left: 20px;
    }
    .maili {
      display: none; 
    }
  }
  
  @media (max-width: 600px) {  
    .upperheader {
      padding-top: 2px;
      padding-bottom: 0px;
    }
  
    .maili {
      display: none; 
    }
  
    .left-section {
      margin: auto;
    }
  
    .right-section {
      margin: auto;  
      text-align: center;   
    }
  
  
    .left-section a {
      font-size: 16px; /* Adjust font size if needed */
    }
  
   
      .upperheader .maili {
        display: none !important;
      }
    
  }
  
  @media (max-width: 320px) {  
    .upperheader {
      padding: 2px;
    }
  
    .left-section {
      display: none;
    }
  
    .maili {
      display: none; 
    }
  }
  
  /* Upper Header End */
  
  
  
  /*Header*/
  
  header {
    max-width: 1400px;
    margin: auto;
    background-color: white;
    color: #333;
    text-align: center;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height:55px; 
    font-size: 16px;
  }
  
  .logo {
    margin-top: 45px;
    margin-left:10px;
  }
  
  .logo img {
    width: 180px;
    margin-bottom: -8px;
  }
  
  .contact-button {
    font-weight: 600;
    font-size: 14px;
    margin-right:7px;
    padding: 14px 32px;
    background: linear-gradient(to right, #8a2be2, #0F6AE1);
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: background 0.3s ease;
  }
  
  .contact-button::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.273);
    opacity: 0;
    animation: shineLeftRight 2s linear infinite alternate;
  }
  
  @keyframes shineLeftRight {
    0% {
      left: -100%;
      opacity: 0;
    }
    50% {
      left: 100%;
      opacity: 1;
    }
    100% {
      left: -100%;
      opacity: 0;
    }
  }
  
  .contact-button:hover::before {
    animation: shineRightLeft 2s linear infinite alternate;
  }
  
  @keyframes shineRightLeft {
    0% {
      left: 100%;
      opacity: 0;
    }
    50% {
      left: -100%;
      opacity: 1;
    }
    100% {
      left: 100%;
      opacity: 0;
    }
  }
  
  .main-nav ul{
    list-style-type: none;
    padding: 0;
    text-align: center;
  }
  
  .main-nav li {
    display: inline;
    position: relative;
    margin-right: 20px;
  }
  
  .main-nav a {
    text-decoration: none;
    color: #05003c;
    position: relative;
  }
  
  .main-nav li::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -8px;
    width: 0;
    height: 4px;
    border-radius: 25px;
    background-color: #0F67F6;
    transition: all 0.3s ease;
    transform: translateX(-50%);
    box-shadow: 0 0 10px rgba(15, 103, 246, 0.7);
  }
  
  .main-nav li:hover::before {
    width: 100%;
    box-shadow: 0 0 20px rgba(15, 103, 246, 0.7);
  }
  
  @media (max-width: 1100px) {
    .logo {
      margin-left:80px;
    }
      
    .contact-button {
      margin-right: 80px;
    }
  }
  
  @media (max-width:800px) {
    header {
      display: none; 
    }
  }
  
  @media (max-width:900px) {
    .logo {
      margin-left:12px;
    }
    .contact-button{
      margin-right: 12px;
    }
  }
  
  /*header end*/
  
  /*lower header*/    
  .lowerheader {
    background-color: #ebebeb;
    padding:17px;
    text-align: center;
    font-size: 14px;
    font-weight: 450;
    font-family:arial;
  }
  
  
  .lowerheader .nav-bar li {
    display: inline;
    margin: 0 10px;
  }
  
  @media (max-width:1240px) {
    .lowerheader {
      font-size: 12px;
      font-weight: 600;
      padding:19px;
    }
    
    
    .lowerheader .nav-bar li {
      display: inline;
      margin: 0 3px;
    }
  }
  
  @media (max-width:1172px) {
    .lowerheader {
      text-align: right;
      font-size: 11px;
      padding-right: 30vh;
      
  
    }
    
    
    .lowerheader .nav-bar li {
      margin: 0 3px;
    }
  }
  
  @media (max-width:1081px) {
    .lowerheader {
      padding-right: 25vh;
      
  
    }}
  
    @media (max-width:1041px) {
      .lowerheader {
        padding-right: 20vh;
        
    
      }}
      @media (max-width:1001px) {
        .lowerheader {
          padding-right: 15vh;
          
      
        }}
        @media (max-width:961px) {
          .lowerheader {
            padding-right: 12vh;
            
        
          }}
          @media (max-width:932px) {
            .lowerheader {
              padding-right: 9vh;
              
          
            }}
            @media (max-width:911px) {
              .lowerheader {
                padding-right: 7vh;
               }}
              @media (max-width:836px) {
                .lowerheader {
                  padding-right: 3vh;           
                }}
  
  .lowerheader .nav-bar a {
    color: rgb(0, 0, 0);
    text-decoration: none;
  }
  
  .lowerheader .divider {
    color: rgb(171, 171, 171);
  }
  
  .lowerheader .nav-bar a:hover {
    color:#0F67F6;
  }
  
  @media (max-width:800px) {
    .lowerheader {
      display: none; 
    }
  }
  
  /*lower header end*/
  
  /*mobile Header*/
  
  @media (min-width:800px) { 
    .logomobile{
     display: none;
  
    }
  
    .sidebar{
    display: none;
    }
  }
  
  @media (max-width:800px)  {  
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 80px;
    }
          
    .logomobile {
      margin-left: 30px; 
      margin-top: 2px;
    }
         
    .menu {
      margin-right: 30px;
    }
  
    .menuborder{
      border-style: solid;
      border-width: 1px;
      border-radius: 2px;
      border-color: #b5b5b5;
      padding-top: 10px;
      
   }
  
    .menu div{  
      width: 35px;
      height: 30px;
      position: relative;
      align-items: center;
    }
  
    .menu span{
      background-image: linear-gradient(to right, #50C1FA, #2541FF);
      width: 70%;
      height: 3px;
      cursor: pointer;
      border-radius: 5px;
      display: block;
      position: absolute;
      top: 50%;
      left:50%;
      transform: translate(-50%,-50%);
      transition: transform 0.5s, width0.5s;
    }
  
    .menu .line-1{
      transform: translate(-50%,-9px);
    }
  
    .menu .line-3{
      transform: translate(-50%,6px);
    }
  
    .openmenu .line-1{
      transform: translate(-50%,-50%) rotate(-45deg);
    }
  
    .openmenu .line-3{
      transform: translate(-50%,-50%) rotate(45deg);
    }
  
    .openmenu .line-2{
      width:0;
    }
  
    .sidebar {
      width: 250px;
      height: 100%;
      position: fixed;
      top: 0;
      left: -250px;
      background-color: #fff;     
    }    
  
    .logomobile2 {
      margin-top: 25px;
      text-align: center;
      margin-left: -2px;
    }
  
    .navigation2 {
      list-style: none;
      padding: 0;
    }
  
    .navigation2 li {
      padding: 15px 20px;    
    }
  
    .navigation2 a {
      text-decoration: none;
      color: #000; 
      display: block;
    }
  
    .open-sidebar {
      left: 0;
    }
  
    .divider2{
      margin-left: 20px;
      border-top: 1px solid #e1e1e1; 
      width: 80%;
    }
  
    .page-containerd{
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.155); /* Adjust the alpha (4th value) for transparency */
      z-index: 999; /* Ensure it's above other content */
      display: none; /* Initially hidden */
    }        
  }
  
  /*sidebar end*/   
  
  
  
  /*slider*/  
  
  
  .sliderbanner{
    margin-bottom: 450px;
  }
  
  .slider-one,
  .slider-two {
    width: 100%;
    height: 445px;
    position: absolute;
    overflow: hidden;
  }
  
  .slider-one .slider-one-image,
  .slider-one .slider-two-image,
  .slider-two .slider-one-image,
  .slider-two .slider-two-image{
   
    width: 110%;
    height: 100%;
    background-image: url("images/website.webp");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    animation: zoom-out 3s linear infinite;
  }
  
  .slider-one .slider-one-image .slider-text,
  .slider-one .slider-two-image .slider-text,
  .slider-two .slider-one-image .slider-text,
  .slider-two .slider-two-image .slider-text
  {
    position: absolute;
    top: 22%;
    left: 5%;
    color: #ffffff;
    width: 600px;
    text-transform: capitalize;
    animation: text-up 3s linear infinite;
    transform: translateY(100px);
    animation-delay: 0s;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  }
  
  .slider-one .slider-one-image .slider-text h1,
  .slider-one .slider-two-image .slider-text h1,
  .slider-two .slider-one-image .slider-text h1,
  .slider-two .slider-two-image .slider-text h1
  {
    font-size: 2.5rem;
    margin-bottom: 20px;
  }
  
  .slider-one .slider-one-image .slider-text p,
  .slider-one .slider-two-image .slider-text p,
  .slider-two .slider-one-image .slider-text p,
  .slider-two .slider-two-image .slider-text p{
    font-size: 18px;
    line-height: 28px;
    margin-bottom: 20px;
  }
  
  .slider-two {
    
    animation: slider-two 6s linear infinite;
  }
  
  .slider-two .slider-two-image {
    background-image: url("images/websitebanner2.webp");
  }
  
  .slider-two .slider-two-image .slider-text {
    animation-delay: 3s;
  }
  
  @keyframes text-up {
    10% {
      -webkit-transform: translateY(0px);
              transform: translateY(0px);
    }
    100% {
      -webkit-transform: translateY(0px);
              transform: translateY(0px);
    }
  }
  
  @keyframes zoom-out {
    100% {
      width: 100%;
    }
  }
  
  @keyframes slider-one {
    0% {
      visibility: visible;
    }
    
    50% {
      visibility: hidden;
  
    }
    100% {
      visibility: hidden;
    }
  }
  
  @keyframes slider-two {
    0% {
      visibility: hidden;
    }
    
    50% {
      visibility: hidden;
  
    }
    100% {
      visibility: visible;
    }
  }
  
  
  .contact-button2 {
    font-weight: 600;
    margin-right: 160px;
    padding: 14px 30px;
    background: linear-gradient(to right, #8a2be2, #0F6AE1);
    color: #fff;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: background 0.3s ease;
  }
  
  .contact-button2::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.273);
    opacity: 0;
    animation: shineLeftRight 2s linear infinite alternate;
  }
  
  @keyframes shineLeftRight {
    0% {
      left: -100%;
      opacity: 0;
    }
    50% {
      left: 100%;
      opacity: 1;
    }
    100% {
      left: -100%;
      opacity: 0;
    }
  }
  
  .contact-button2:hover::before {
    animation: shineRightLeft 2s linear infinite alternate;
  }
  
  @keyframes shineRightLeft {
    0% {
        left: 100%;
        opacity: 0;
    }
    50% {
        left: -100%;
        opacity: 1;
    }
    100% {
        left: 100%;
        opacity: 0;
    }
  }
  
  @media (max-width: 820px){
  
    .sliderbanner{
      margin-bottom: 205px;
    }
    
    .slider-one,
    .slider-two {
      height: 200px;
    }
   
    .slider-one .slider-one-image .slider-text,
    .slider-two .slider-two-image .slider-text
    {
      top: 10%;
      width: 80%;
    }
    
    
    .slider-one .slider-one-image .slider-text h1,
    .slider-one .slider-two-image .slider-text h1,
    .slider-two .slider-one-image .slider-text h1,
    .slider-two .slider-two-image .slider-text h1
    {
      font-size: 13.5px;
      margin-bottom: 7px;
    
    }
    
    .slider-one .slider-one-image .slider-text p,
    .slider-one .slider-two-image .slider-text p
    {
      font-size: 12px;
      line-height: 17px;
      width: 56%;
      text-align: justify;
      margin-bottom: 7px;
    }
  
    .slider-two .slider-one-image .slider-text p,
    .slider-two .slider-two-image .slider-text p{
      font-size: 12px;
      line-height: 16px;
      width: 47%;
      text-align: justify;
      margin-bottom: 7px;
    }
    
    .contact-button2 {
      font-weight: 600;
      font-size: 10px;
      margin-right:0px;
      padding: 8px 17px;
    }
  
  }
  
  /*slider end*/      
  
  /*Whatsapp Chat Button*/
  .hidden {
      display: none;
  }
  
  .sticky-button {
      position: fixed;
    z-index: 10000;
      background-color: #25D366;
      bottom: 24px;
      right: 20px;
      border-radius: 50px;
      box-shadow: 0 2px 5px 0 rgba(0,0,0,.1);
      z-index: 20;
      overflow: hidden;
      display: flex;	
      width: 55px;
      height: 55px;
      -webkit-transition: all 0.2s ease-out;
      transition: all 0.2s ease-out;
    z-index: 999;
    transition: .1s;
    -webkit-animation: hoverWaves linear 1s infinite;
    animation: hoverWaves linear 1s infinite;
  }
  
  @keyframes hoverWaves {
    0% {
      box-shadow: 0 4px 6px rgba(56, 163, 253, 0.3), 0 0 0 0 rgba(7, 246, 63, 0.096), 0 0 0 0 rgba(0, 239, 115, 0.299);
    }
  
    40% {
      box-shadow: 0 4px 6px rgba(56, 163, 253, 0.3), 0 0 0 10px rgba(7, 246, 63, 0.096), 0 0 0 0 rgba(0, 239, 115, 0.299);
    }
  
    80% {
      box-shadow: 0 4px 6px rgba(56, 163, 253, 0.3), 0 0 0 20px rgba(7, 246, 63, 0.096), 0 0 0 0 rgba(0, 239, 115, 0.299);
    }
  
    100% {
      box-shadow: 0 4px 6px rgba(56, 163, 253, 0.3), 0 0 0 20px rgba(7, 246, 63, 0.096), 0 0 0 0 rgba(0, 239, 115, 0.299);
    }
  }
  
  .sticky-button svg {
      margin: auto;
      fill: #fff;
      width: 35px;
      height: 35px;
  }
  
  .sticky-button a,.sticky-button label {
      cursor: pointer;
      display: flex;
      align-items: center;
      width: 55px;
      height: 55px;
      -webkit-transition: all .3s ease-out;
      transition: all .3s ease-out;
  }
  
  .sticky-button label svg.close-icon {
      display: none;
  }
  
  .sticky-chat {
    position: fixed;
    right: 20px;
    width: 320px;
    transition: all 0.3s ease-out;
    z-index: 21;
    opacity: 0;
    visibility: hidden;
    margin: auto; /* Center horizontally */
  }
  
  .sticky-chat a {
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif; 
  }
  
  .sticky-chat svg {
      width: 35px;
      height: 35px;
  }
  
  .sticky-chat .chat-content {
    
      border-radius: 10px;
      background-color: #ffffffb0;
      box-shadow: 0 2px 5px 0 rgba(0,0,0,.25);
      overflow: hidden;
      font-family: arial;
      
  }
  
  .sticky-chat .chat-header {
      position: relative;
      display: flex;
      align-items: center;
      padding: 15px 20px;
      background-color: #25D366;
      overflow: hidden;
  }
  
  .sticky-chat .chat-header:after {
      content: '';
      display: block;
      position: absolute;
      bottom: 0;
      right: 0;
      width: 80px;
      height: 75px;
      background: rgba(0,0,0,.040);
      border-radius: 70px 0 5px 0;
  }
  
  .sticky-chat .chat-header svg {
      width: 35px;
      height: 35px;
      flex: 0 0 auto;
      fill: #fff;
  }
  
  .sticky-chat .chat-header .title {
      padding-left: 15px;
      font-size: 16px;
      font-weight: 700;
      font-family: 'Roboto',sans-serif;
    color: #fff;
  }
  
  .sticky-chat .chat-header .title span {
      font-size: 13px;
      font-weight: 700;
      display: block;
      line-height: 1.58em;
      margin: 0;
      color: #f4f4f4;
  }
  
  .sticky-chat .chat-text {
      margin: 10px 20px;
      font-size: 14px;
    font-weight: 700;
    color:#3e3e3e;
    margin-bottom: 10px;
  }
  
  .sticky-chat .chat-text span {
      display: inline-block;
      padding: 10px;
      background-color: #f0f5fb;
      border-radius: 0px 15px 15px;
  }
  
  .sticky-chat .chat-text span:after {
      content: 'just now';
      display: inline-block;
      margin-left: 10px;
      font-size: 9px;
      color: #989b9f;
  }
  
  
  
  .chat-link {
    margin-left: 160px;
    padding: 13px 18px;
    background-color: #088408;
    color: rgb(255, 255, 255);
    border-radius: 25px;
    text-decoration: none;
    display: inline-flex; 
    align-items: center; 
  }
  
  
  .chat-link:hover {
    background-color: #097969;
  }
  
  
  .chat-icon {
    width: 26px;
    height: 26px;
    margin-left: 10px;
  }
  .btn2{
    margin-bottom: 12px;
  }
  
  .chat-menu:checked+.sticky-button label {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
  }
  
  .chat-menu:checked+.sticky-button label svg.chat-icon {
      display: none;
  }
  
  .chat-menu:checked+.sticky-button label svg.close-icon {
      display: table-cell;
  }
  
  .chat-menu:checked+.sticky-button+.sticky-chat {
      bottom: 90px;
      opacity: 1;
      visibility: visible;
  }
  
  @media (max-width: 280px) {
    .sticky-chat {
        
        width: 90%; 
        left: 5%; 
        right: 5px;
    }
    
  .chat-link {
    margin-left: 100px;
  }
  }
  /*Whatsapp Chat Button End*/
  
  /*Call chat button*/
  
  .btn-call {
    background: #38a3fd;
    border: 2px solid #38a3fd;
    border-radius: 50%;
    box-shadow: 0 8px 10px rgba(56, 163, 253, 0.3);
    cursor: pointer;
    height:50px;
    width: 50px;
    text-align: center;
    position: fixed;
    right: 92px;
    bottom: 27px;
    z-index: 999;
    transition: .1s;
    -webkit-animation: hoverWave linear 1s infinite;
    animation: hoverWave linear 1s infinite;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
  }
  
  .btn-call__ico {
    display: flex;
    justify-content: center;
    align-items: center;
    animation: 8200ms ease 0s normal none 1 running shake;
    animation-iteration-count: infinite;
    -webkit-animation: 8200ms ease 0s normal none 1 running shake;
    -webkit-animation-iteration-count: infinite;
    color: white;
    font-size: 26px;
    padding-top: 5px;
    transition: .3s all;
  }
  
  .btn-call:hover {
    background-color: #fff;
  }
  
  .btn-call:hover .btn-call__ico {
    color: #38a3fd;
  }
  
  @keyframes hoverWave {
    0% {
      box-shadow: 0 4px 6px rgba(56, 163, 253, 0.3), 0 0 0 0 rgba(56, 163, 253, 0.2), 0 0 0 0 rgba(56, 163, 253, 0.2);
    }
  
    40% {
      box-shadow: 0 4px 6px rgba(56, 163, 253, 0.3), 0 0 0 10px rgba(56, 163, 253, 0.2), 0 0 0 0 rgba(56, 163, 253, 0.2);
    }
  
    80% {
      box-shadow: 0 4px 6px rgba(56, 163, 253, 0.3), 0 0 0 20px rgba(56, 163, 253, 0), 0 0 0 17px rgba(56, 163, 253, 0.067);
    }
  
    100% {
      box-shadow: 0 4px 6px rgba(56, 163, 253, 0.3), 0 0 0 20px rgba(56, 163, 253, 0), 0 0 0 26px rgba(56, 163, 253, 0.0);
    }
  }
  
  /* animations icon */
  
  @keyframes shake {
    0% {
        transform: rotateZ(0deg);
        -ms-transform: rotateZ(0deg);
        -webkit-transform: rotateZ(0deg);
    }
  
    10% {
        transform: rotateZ(-30deg);
        -ms-transform: rotateZ(-30deg);
        -webkit-transform: rotateZ(-30deg);
    }
  
    20% {
        transform: rotateZ(15deg);
        -ms-transform: rotateZ(15deg);
        -webkit-transform: rotateZ(15deg);
    }
  
    30% {
        transform: rotateZ(-10deg);
        -ms-transform: rotateZ(-10deg);
        -webkit-transform: rotateZ(-10deg);
    }
  
    40% {
        transform: rotateZ(7.5deg);
        -ms-transform: rotateZ(7.5deg);
        -webkit-transform: rotateZ(7.5deg);
    }
  
    50% {
        transform: rotateZ(-6deg);
        -ms-transform: rotateZ(-6deg);
        -webkit-transform: rotateZ(-6deg);
    }
  
    60% {
        transform: rotateZ(5deg);
        -ms-transform: rotateZ(5deg);
        -webkit-transform: rotateZ(5deg);
    }
  
    70% {
        transform: rotateZ(-4.28571deg);
        -ms-transform: rotateZ(-4.28571deg);
        -webkit-transform: rotateZ(-4.28571deg);
    }
  
    80% {
        transform: rotateZ(3.75deg);
        -ms-transform: rotateZ(3.75deg);
        -webkit-transform: rotateZ(3.75deg);
    }
  
    90% {
        transform: rotateZ(-3.33333deg);
        -ms-transform: rotateZ(-3.33333deg);
        -webkit-transform: rotateZ(-3.33333deg);
    }
  
    100% {
        transform: rotateZ(0deg);
        -ms-transform: rotateZ(0deg);
        -webkit-transform: rotateZ(0deg);
    }
  }
  
  @-webkit-keyframes shake {
    0% {
        transform: rotateZ(0deg);
        -ms-transform: rotateZ(0deg);
        -webkit-transform: rotateZ(0deg);
    }
  
    10% {
        transform: rotateZ(-30deg);
        -ms-transform: rotateZ(-30deg);
        -webkit-transform: rotateZ(-30deg);
    }
  
    20% {
        transform: rotateZ(15deg);
        -ms-transform: rotateZ(15deg);
        -webkit-transform: rotateZ(15deg);
    }
  
    30% {
        transform: rotateZ(-10deg);
        -ms-transform: rotateZ(-10deg);
        -webkit-transform: rotateZ(-10deg);
    }
  
    40% {
        transform: rotateZ(7.5deg);
        -ms-transform: rotateZ(7.5deg);
        -webkit-transform: rotateZ(7.5deg);
    }
  
    50% {
        transform: rotateZ(-6deg);
        -ms-transform: rotateZ(-6deg);
        -webkit-transform: rotateZ(-6deg);
    }
  
    60% {
        transform: rotateZ(5deg);
        -ms-transform: rotateZ(5deg);
        -webkit-transform: rotateZ(5deg);
    }
  
    70% {
        transform: rotateZ(-4.28571deg);
        -ms-transform: rotateZ(-4.28571deg);
        -webkit-transform: rotateZ(-4.28571deg);
    }
  
    80% {
        transform: rotateZ(3.75deg);
        -ms-transform: rotateZ(3.75deg);
        -webkit-transform: rotateZ(3.75deg);
    }
  
    90% {
        transform: rotateZ(-3.33333deg);
        -ms-transform: rotateZ(-3.33333deg);
        -webkit-transform: rotateZ(-3.33333deg);
    }
  
    100% {
        transform: rotateZ(0deg);
        -ms-transform: rotateZ(0deg);
        -webkit-transform: rotateZ(0deg);
    }
  }
  /*Call chat button end*/
  
 /*footer*/

footer {
    padding-top: 10px;
    padding-bottom: 10px;
    background: #000000;
    width: 100%;
    padding: 10px;
}

footer::before {
    top: 100px;
    height: 1px;
    width: 100%;
    background: #AFAFB6;
}

footer .content {
    max-width: 1400px;
    margin: auto;
}

.logo-image {
    margin-top: 5px;
    width: 170px;
    height: auto;
}

.link-boxes {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

footer .content .link-boxes .box {
    width: calc(100% / 5 - 10px);
}

.content .link-boxes .box .link_name {
    color: #fff;
    font-weight: 400;
    margin-bottom: 15px;
    position: relative;
}

.link-boxes .box .link_name::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    height: 2px;
    width: 35px;
    background: #0F6AE1;
}

.content .link-boxes .box li {
    margin: 12px 0;
    list-style: none;
}

.content .link-boxes .box li a {
    color: #fff;
    font-size: 15px;
    font-weight: 400;
    text-decoration: none;
    opacity: 0.8;
    transition: all 0.4s ease;
}

.contact-box li {
    margin: 6px 0;
    list-style: none;
    color: #fff;
    font-weight: 400;
    opacity: 0.8;
}

.contact-box a {
    color: #fff;
    text-decoration: underline;
    opacity: 1;
}

.subscribe-form {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.subscribe-form input {
    width: 100%;
    padding: 13px 6px;
    background: #2E2E2E;
    border: 1px solid #2E2E2E;
    color: #fff;
}

.subscribe-form button {
    position: absolute;
    right: 0;
    background: linear-gradient(to right, #0F67F6, #6200ff);
    padding: 10px 10px;
    border: 1px solid #5d00ff;
}

.subscribe-form button:hover {
    background: linear-gradient(to right, #6200ff, #0F67F6);
    cursor: pointer;
}

.subscribe-form button i {
    color: #fff;
    font-size: 20px;
    transform: rotate(-6deg);
}

.subscribe-form input:focus {
    outline: none;
    border-color: #2E2E2E;
}

.footericons {
    margin-top: 15px;
}

/* Mobile Responsive Styles */
@media screen and (max-width: 1020px) {
    .content .link-boxes .box .link_name {
        font-size: 11;
    }

    .content .link-boxes .box li a {
        font-size: 10px;
    }

    .social-icons a {
        margin: 1px;
    }
}

@media screen and (max-width: 980px) {
    .subscribe-form input {
        width: 100%;
    }
    .subscribe-form button {
        margin-right: 0px;
    }

    .content .link-boxes .box .link_name {
        font-size: 16;
    }

    .content .link-boxes .box li a {
        font-size: 13px;
    }
    .social-icons a {
        margin-right: 0px;
    }
    footer {
        overflow-x: hidden;
        padding-top: 20px;
        padding-bottom: 20px;
        text-align: center;
    }

    footer::before {
        top: 50px;
    }

    .content .link-boxes {
        flex-direction: column;
        align-items: center;
    }

    footer .content .link-boxes .box {
        width: 100%;
        margin-bottom: 20px;
    }

    .link-boxes .box .link_name::before {
        width: 25px;
    }

    .social-icons {
        text-align: center;
        margin-top: 20px;
    }

    .social-icons a {
        margin-right: 10px;
        margin-bottom: 10px;
    }
    .link-boxes .box .link_name::before {
        content: '';
        position: absolute;
        left: 50%;
        bottom: -2px;
        height: 2px;
        width: 35px;
        background: #0F6AE1;
        transform: translateX(-50%);
    }
}

/*footer credit*/
.credit-section {
    max-width: 1420px;
    margin: auto;
    background-color: #ffffff;
    padding: 9px;
    color: rgb(28, 28, 28);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media (max-width: 767px) {
    .credit-section {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }

    .copyright {
        margin: 0;
        padding: 8px 0;
    }

    .credit-end {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }
}

/*footer end*/

  /*Contact*/
.contact_content{
  background-image: url('images/contact_background.webp');
  background-size: cover;
  background-position: bottom;
  padding-top: 20px;
  padding-bottom: 20px;
}
  .contact-container {

    position: relative;
    width: 100%;
    padding: 1rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2vh;
    margin-top: 15px;
  }
  
  
  .contact-main-form {
    width: 100%;
    max-width: 820px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  
  .contact-form {
    background-color: #0F6AE1;
    position: relative;
  }
  
  .circle {
    border-radius: 50%;
    background: linear-gradient(135deg, transparent 20%, #77b2ff);
    position: absolute;
  }
  
  .circle.one {
    width: 130px;
    height: 130px;
    top: 130px;
    right: -40px;
  }
  
  .circle.two {
    width: 80px;
    height: 80px;
    top: 10px;
    right: 30px;
  }
  
  .contact-form:before {
    content: "";
    position: absolute;
    width: 26px;
    height: 26px;
    background-color: #0F6AE1;
    transform: rotate(45deg);
    top: 50px;
    left: -13px;
  }
  
  .contactform {
    padding: 1rem 2.2rem;
    z-index: 10;
    overflow: hidden;
    position: relative;
  }
  
  .title {
    color: #fff;
    font-weight: 500;
    font-size: 1.5rem;
    line-height: 1;
    margin-bottom: 0.7rem;
  }
  
  .input-container {
    position: relative;
    margin: 1rem 0;
  }
  
  .input {
    width: 100%;
    outline: none;
    border: 2px solid #fafafa;
    background: none;
    padding: 0.6rem 1.2rem;
    color: #fff;
    font-weight: 500;
    font-size: 0.95rem;
    letter-spacing: 0.5px;
    border-radius: 25px;
    transition: 0.3s;
  }
  
  textarea.input {
    padding: 0.8rem 1.2rem;
    min-height: 150px;
    border-radius: 22px;
    resize: none;
    overflow-y: auto;
  }
  
  .input-container label {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    padding: 0 0.4rem;
    color: #fafafa;
    font-size: 0.9rem;
    font-weight: 400;
    pointer-events: none;
    z-index: 1000;
    transition: 0.5s;
  }
  
  .input-container.textarea label {
    top: 1rem;
    transform: translateY(0);
  }
  
  .btn {
    width: 100%;
    padding-top: 9px;
    padding-bottom: 9px;
    background-color: #fff;
    border: 2px solid #fafafa;
    font-size: 0.95rem;
    color: #0F6AE1;
    line-height: 1;
    border-radius: 25px;
    outline: none;
    cursor: pointer;
    transition: 0.3s;
    margin: 0;
  }
  
  .btn:hover {
    background-color: transparent;
    color: #fff;
  }
  
  .input-container span {
    position: absolute;
    top: 0;
    left: 25px;
    transform: translateY(-50%);
    font-size: 0.8rem;
    padding: 0 0.4rem;
    color: transparent;
    pointer-events: none;
    z-index: 500;
  }
  
  .input-container span:before,
  .input-container span:after {
    content: "";
    position: absolute;
    width: 10%;
    opacity: 0;
    transition: 0.3s;
    height: 5px;
    background-color: #0F6AE1;
    top: 50%;
    transform: translateY(-50%);
  }
  
  .input-container span:before {
    left: 50%;
  }
  
  .input-container span:after {
    right: 50%;
  }
  
  .input-container.focus label {
    top: 0;
    transform: translateY(-50%);
    left: 25px;
    font-size: 0.8rem;
  }
  
  .input-container.focus span:before,
  .input-container.focus span:after {
    width: 50%;
    opacity: 1;
  }
  
  .contact-info {
    padding: 2.3rem 2.2rem;
    position: relative;
  }
  
  .contact-info .title {
    color: #0F6AE1;
  }
  
  .text {
    color: #333;
    margin: 1.5rem 0 2rem 0;
  }
  
  .information {
    display: flex;
    color: #555;
    margin: 0.7rem 0;
    align-items: center;
    font-size: 0.95rem;
  }
  
  .information a{
    text-decoration: none;
    /* Set the color to black */
    color: #555;
  }
  
  .icon {
    width: 28px;
    margin-right: 0.7rem;
  }
  
  .social-media {
    padding: 2rem 0 0 0;
  }
  
  .social-media p {
    color: #333;
  }
  
  .contact-social-icons {
    display: flex;
    margin-top: 0.5rem;
  }
  
  .contact-social-icons a {
    width: 35px;
    height: 35px;
    border-radius: 5px;
    background: linear-gradient(45deg, #71afff, #0F6AE1);
    color: #fff;
    text-align: center;
    line-height: 35px;
    margin-right: 0.5rem;
    transition: 0.3s;
  }
  
  .contact-social-icons a:hover {
    transform: scale(1.05);
  }
  
  .contact-info:before {
    content: "";
    position: absolute;
    width: 110px;
    height: 100px;
    border: 22px solid #0F6AE1;
    border-radius: 50%;
    bottom: -77px;
    right: 50px;
    opacity: 0.3;
  }
  
  .big-circle {
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: linear-gradient(to bottom, #0F6AE1, #90b8ff,);
    bottom: 50%;
    right: 50%;
    transform: translate(-40%, 38%);
  }
  
  .big-circle:after {
    content: "";
    position: absolute;
    width: 360px;
    height: 360px;
    background-color: #fafafa;
    border-radius: 50%;
    top: calc(50% - 180px);
    left: calc(50% - 180px);
  }
  
  .square {
    position: absolute;
    height: 400px;
    top: 50%;
    left: 50%;
    transform: translate(181%, 11%);
    opacity: 0.2;
  }
  
  @media (max-width: 850px) {
    .contact-main-form {
      grid-template-columns: 1fr;
    }
  
    .contact-info:before {
      bottom: initial;
      top: -75px;
      right: 65px;
      transform: scale(0.95);
    }
  
    .contact-form:before {
      top: -13px;
      left: initial;
      right: 70px;
    }
  
    .square {
      transform: translate(140%, 43%);
      height: 350px;
    }
  
    .big-circle {
      bottom: 75%;
      transform: scale(0.9) translate(-40%, 30%);
      right: 50%;
    }
  
    .text {
      margin: 1rem 0 1.5rem 0;
    }
  
    .social-media {
      padding: 1.5rem 0 0 0;
    }
  }
  
  @media (max-width: 480px) {
    .contact-container {
      padding: 1.5rem;
    }
  
    .contact-info:before {
      display: none;
    }
  
    .square,
    .big-circle {
      display: none;
    }
  
    .contactform,
    .contact-info {
      padding: 1.7rem 1.6rem;
    }
  
    .text,
    .information,
    .social-media p {
      font-size: 0.8rem;
    }
  
    .title {
      font-size: 1.15rem;
    }
  
    .social-icons a {
      width: 30px;
      height: 30px;
      line-height: 30px;
    }
  
    .icon {
      width: 23px;
    }
  
    .input {
      padding: 0.45rem 1.2rem;
    }
  
    .btn {
      padding: 0.45rem 1.2rem;
    }
  }
  /*contact end*/
  
  
  .labels {
    font-size: 14px;
    display: block;
    position: absolute;
    left: 80px;
    color: white;
    transition: 0.3s;
  } 
  
  /* Add a class to move the label up */
  .moved-up {
    top: -8px; /* Adjust this value to control how much the label moves up */
    left:80px;
    padding: 0px 5px;
    font-size: 13px;
    background-color: #0F6AE1;
    color: white;
  }
  
  
  /*section welcome*/
  .container2 {
    display: flex;
    width: 100%;
    max-width: 1400px;
    margin: auto;
  }
  .column {
    margin-top: 25px;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .welcomeh {
    font-size: 40px;
    color: #2254FE;
  }
  .text-column {
    font-size: 18px;
    text-align: center;
  }
  h1, h2 {
    margin: 0;
    padding-bottom:5px;
  }
  .p1 {
    margin: 20px 0;
    color: rgb(55, 55, 55);
  }
  
  .image-column img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
    
  .button3 {
    font-weight: 600;
    font-size: 20px;
    margin-right:7px;
    padding: 14px 32px;
    background: linear-gradient(to right, #8a2be2, #0F6AE1);
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: background 0.3s ease;
  }
  
  
  /*mobile*/
  /* Mobile responsive styles for welcome section */
  @media (max-width: 768px) {
    .container2 {
      flex-direction: column;
      align-items: center;
    }
  
    .column {
      margin-top: 15px;
      width: 100%;
    }
  
    .text-column {
      text-align: center;
      padding: 0 15px;
    }
  
    .welcomeh {
      font-size: 30px;
    }
  
    h1, h2 {
      font-size: 20px;
    }
  
    .p1 {
      font-size: 16px;
      margin: 15px 0;
    }
  
    .image-column img {
      max-width: 90%;
      height: auto;
      margin: 10px 0;
    }
  
    .button3 {
      font-size: 16px;
      padding: 12px 24px;
      margin: 10px auto;
    }
  }
  
  /*section welcome end*/
  
  /*section services start*/
  .services{
  
    margin-top: 30px;
    margin-bottom: 30px;
    text-align: center;
  }
  .websiter-icon {
      display: block;
      margin: auto;
      width: 150px; 
      height: auto; 
  }
  
  .h2services{
    margin-top: 15px;
    text-align: center;
    font-size: 28px;
    position: relative;
    padding-bottom: 15px;
    display: inline-block;
  }
  
  
  .h2services::after {
    content: '';
    position: absolute;
    width: 300px; /* Adjust the width to make the underline shorter */
    height: 4px; /* Thickness of the underline */
    background-color: #3A5CEB;
    bottom:0;
    left: 50%;
    transform: translateX(-50%);
  }
  
  
  .wrapper {
    display: flex;
    width: 100%;
    max-width: 1400px;
    margin: auto;
    justify-content: center; /* Centre columns within the wrapper */
    flex-wrap: wrap; /* Allow wrapping to handle smaller screens */
    padding: 20px;
  
  }
  .service-column {
    background-color: #8fb1ff65; /* Light blue background */
    padding: 15px;
    width: calc(33.33% - 50px); /* Adjust width to account for margins */
    box-sizing: border-box;
    margin: 0 15px; /* Increased margin space between columns for better spacing */
    border-radius: 5px;
  }
  /* Style for images in columns */
  .service-column img {
    width: 100%;
    height: auto;
  }
  
  /* Style for headings in columns */
  .service-column h2 {
    text-align: center; /* Centre the heading */
    margin-top: 10px;
    font-size: 30px; /* Font size for headings */
  }
  
  .service-list {
    list-style: none;
    padding: 0;
    margin: 10px 0 15px 0;
  }
  
  /* Style for list items */
  .service-list li {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    font-size:19px;
  }
  
  /* Style for icons in list items */
  .service-list li img {
    width: 23px; /* Size of icons */
    height: auto; /* Maintain aspect ratio */
    margin-right: 10px;
  
  }
  .service-list li img {
    width: 23px; /* Adjust the size as needed */
    height: auto; /* Maintain aspect ratio */
    margin-right: 10px;
  }
  
  .service-column h2 {
    text-align: center;
    font-size: 30px;
  }
  
  .contact-button-services {
    font-weight: 600;
    font-size: 18px;
    margin-right: 7px;
    padding: 14px 32px;
    background: linear-gradient(to right, #8a2be2, #0F6AE1);
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: background 0.3s ease;
    width: 100%; /* Make the button full width */
    display: block; /* Make the button a block-level element */
    box-sizing: border-box; /* Ensure padding is included in the width */
  }
  
  .contact-button-services::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.273);
    opacity: 0;
    animation: shineLeftRight 2s linear infinite alternate;
  }
  /*mobile css*/
  /* Mobile responsive styles for services section */
  @media (max-width: 768px) {
    .wrapper {
      flex-direction: column; /* Stack the columns vertically */
      padding: 10px; /* Reduce padding */
    }
  
    .service-column {
      width: 100%; /* Make columns take full width */
      margin: 10px 0; /* Add vertical spacing between columns */
      padding: 15px; /* Maintain padding */
    }
  
    .service-column img {
      width: 100%; /* Ensure images remain responsive */
      height: auto; /* Maintain aspect ratio */
    }
  
    .service-column h2 {
      font-size: 23px; /* Adjust font size for smaller screens */
      margin-top: 5px; /* Reduce margin */
    }
  
    .service-list li {
      font-size: 16px; /* Reduce font size for better fit */
      margin-bottom: 8px; /* Adjust spacing */
    }
  
    .service-list li img {
      width: 20px; /* Reduce icon size */
      margin-right: 8px; /* Adjust spacing */
    }
  
    .contact-button-services {
      font-size: 16px; /* Reduce font size */
      padding: 12px 20px; /* Adjust padding for smaller buttons */
    }
  
    .h2services {
      font-size: 24px; /* Adjust heading size */
      padding-bottom: 10px; /* Reduce padding */
      margin-left: 4px;
      margin-right: 4px;
    }
  
    .h2services::after {
      width: 200px; /* Reduce underline width */
    }
  
    .websiter-icon {
      width: 100px; /* Reduce size of the icon */
    }
  }
  
  
  /*section services end*/
  /*project section start*/
  .ourprojects {
    margin-top: 30px;
    padding-top: 30px;
    padding-bottom: 60px;
    text-align: center;
    background: linear-gradient(to bottom, #ececec, white);
  }
  
  
  .projects-container {
    display: flex;
    max-width: 1400px;
    margin: auto;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 25px;
    margin-top: 20px;
  }
  
  .project {
    width: 30%;
    text-align: center;
    position: relative; /* For overlay positioning */
    overflow: hidden; /* Prevent overflow of the overlay */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.421); /* Subtle shadow */
  }
  
  
  .project-image {
    width: 100%;
    height: auto;
  
  }
  
  .project-overlay {
    position: absolute;
    top: 50%; /* Center the overlay */
    left: 50%; /* Center the overlay */
    width: 100%;
    height: 100%;
    background-color: #7556f1ec; /* Initial background color */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0; /* Hidden by default */
    transform: translate(-50%, -50%) scale(0); /* Start from center and scale down */
    transition: opacity 0.5s ease, transform 0.5s ease; /* Slower transition */
  }
  
  .project:hover .project-overlay {
    opacity: 1; /* Show on hover */
    transform: translate(-50%, -50%) scale(1); /* Expand to full size on hover */
  }
  
  .project-overlay h3,
  .project-overlay p {
    color: white; /* White text */
    margin: 10px 0;
  }
  
  .visit-site-btn {
    background-color: white;
    color: #3A5CEB;
    padding: 10px 20px;
    text-decoration: none;
    font-weight: bold;
    margin-top: 10px;
    border-radius: 5px;
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition */
  }
  
  .visit-site-btn:hover {
    background-color: #3A5CEB;
    color: white;
  }
  /*mobile css*/
  /* Mobile responsive styles for Projects section */
  @media (max-width: 768px) {
    .projects-container {
      flex-direction: column; /* Stack projects vertically */
      padding: 10px; /* Reduce padding */
    }
  
    .project {
      width: 100%; /* Make projects full width */
      margin-bottom: 20px; /* Add spacing between projects */
    }
  
    .project-image {
      width: 100%; /* Ensure images remain responsive */
      height: auto; /* Maintain aspect ratio */
    }
  
    .project-overlay {
      top: 50%; /* Center overlay */
      left: 50%; /* Center overlay */
      width: 100%; /* Ensure overlay covers the project */
      height: 100%; /* Ensure overlay covers the project */
      transform: translate(-50%, -50%) scale(0); /* Start from center and scale down */
    }
  
    .project-overlay h3 {
      font-size: 18px; /* Adjust heading size */
      margin: 5px 0; /* Reduce spacing */
    }
  
    .project-overlay p {
      font-size: 14px; /* Adjust paragraph size */
      margin: 5px 0; /* Reduce spacing */
    }
  
    .visit-site-btn {
      font-size: 14px; /* Reduce button text size */
      padding: 8px 16px; /* Adjust button padding */
    }
  
    .ourprojects {
      padding-top: 20px; /* Adjust padding */
      padding-bottom: 40px; /* Adjust padding */
    }
  }